/* ============================================================
   Industry cards — photo with a frosted label plate

   Replaces the five-card accordion. The accordion only ever exposed
   five of the ten industries on the homepage, which left five detail
   pages reachable from exactly one place on the whole site. A grid
   shows all ten and every one of them is a way in.

   The plate is the device: a translucent, blurred panel sitting over
   the lower part of the photograph rather than a solid bar. The blur
   is what makes it read as glass — a flat white box at the same
   opacity just looks like a sticker.
   ============================================================ */

.ind-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.5rem, 1vw, 0.9rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.ind-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-3);
  aspect-ratio: 3 / 4;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.ind-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(11, 18, 32, 0.14);
}
.ind-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.ind-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Held slightly back so the plate stays the most legible thing on the
     card, and so ten different photographs read as one set. */
  filter: saturate(0.9) contrast(1.02);
  transform: scale(1.02);
  transition: transform 600ms var(--ease-out), filter 400ms var(--ease-out);
}
.ind-card:hover .ind-card__img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.04);
}

/* Per-industry wash, the same desaturated hues the rest of the site uses.
   Kept faint: it ties the set together without turning the photographs
   into flat colour. */
.ind-card__img::after { content: none; }
.ind-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--tint, var(--tint-slate));
  mix-blend-mode: multiply;
  opacity: 0.14;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.ind-card:hover::before { opacity: 0.06; }

.ind-card--steel { --tint: var(--tint-steel); }
.ind-card--sage  { --tint: var(--tint-sage); }
.ind-card--ochre { --tint: var(--tint-ochre); }
.ind-card--slate { --tint: var(--tint-slate); }
.ind-card--olive { --tint: var(--tint-olive); }

/* The glass plate. backdrop-filter is what does the work; the gradient
   fill on top of it keeps text legible where the photo underneath is
   bright, and the hairline border is what reads as an edge of glass. */
.ind-card__plate {
  position: absolute;
  z-index: 2;
  left: clamp(0.5rem, 1vw, 0.75rem);
  right: clamp(0.5rem, 1vw, 0.75rem);
  bottom: clamp(0.5rem, 1vw, 0.75rem);
  padding: clamp(0.7rem, 1.1vw, 0.95rem) clamp(0.75rem, 1.2vw, 1rem);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.74) 0%,
    rgba(255, 255, 255, 0.56) 100%);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 6px 20px rgba(11, 18, 32, 0.12);
  transition: background var(--dur-base) var(--ease-out);
}
/* Where backdrop-filter is unsupported the plate would be a washed-out
   panel with unreadable text, so fall back to something nearly opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ind-card__plate { background: rgba(255, 255, 255, 0.94); }
}
.ind-card:hover .ind-card__plate {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.7) 100%);
}

.ind-card__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 0.3rem;
}
.ind-card__name {
  display: block;
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.ind-grid__more { margin-top: clamp(1.5rem, 3vw, 2rem); }

@media (max-width: 1080px) { .ind-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .ind-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .ind-grid { grid-template-columns: repeat(2, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .ind-card, .ind-card__img, .ind-card__plate, .ind-card::before {
    transition: none;
  }
  .ind-card:hover { transform: none; }
  .ind-card:hover .ind-card__img { transform: scale(1.02); }
}

/* Three related industries at the foot of a detail page, rather than the
   full ten. Enough to keep moving without turning the page into an index. */
.ind-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .ind-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .ind-grid--3 { grid-template-columns: 1fr; } }