/* ============================================================
   Expanding industry cards — light.

   Ported from the ExpandingCards React component: one card is open at
   a time and takes 5fr, the rest collapse to 1fr and show only a
   vertical spine label. That is what keeps the copy down — only the
   open card's description is on screen.

   The open index is driven by JS setting --expand-cols / --expand-rows.

   Photography, bright: the plant photographs were relit as daylight interiors
   and now sit at luminance 134-168, against the four process cards at 168-184.
   That is one set, so it gets one treatment — a white scrim with dark ink,
   the same way the process cards read. The low-key originals (43-84) needed
   the opposite and got it; under a dark gradient the whole industries band
   went black, which is what Esther called out.

   The scrim direction follows the pictures. Replace them with dark artwork
   again and every number below is invalid — flip back to a dark gradient with
   white copy and recalibrate against the new luminance, do not reuse these.
   ============================================================ */

.expand-cards {
  display: grid;
  grid-template-columns: var(--expand-cols, 5fr 1fr 1fr 1fr 1fr);
  gap: clamp(0.5rem, 1vw, 0.75rem);
  height: clamp(380px, 44vw, 460px);
  transition: grid-template-columns 500ms var(--ease-out);
}

.expand-card {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  /* Visible before the photo decodes, and behind it afterwards. */
  background: var(--surface-3);
  isolation: isolate;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.expand-card[data-active] {
  border-color: rgba(248, 17, 23, 0.28);
  box-shadow: 0 14px 36px rgba(11, 18, 32, 0.09);
}

/* Per-industry tint. Set on the card so both the wash and any future
   accent can read it from one place. */
.expand-card--steel { --tint: var(--tint-steel); }
.expand-card--sage  { --tint: var(--tint-sage); }
.expand-card--ochre { --tint: var(--tint-ochre); }
.expand-card--slate { --tint: var(--tint-slate); }
.expand-card--olive { --tint: var(--tint-olive); }

/* Daylight plant photographs. A collapsed card steps back by losing its colour
   and gaining a little light — held back, not pushed down. Dimming was what
   the low-key set needed; on these it would only undo the relighting. */
.expand-card__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.4) contrast(1.02) brightness(1.05);
  opacity: 1;
  transform: scale(1.06);
  transition: filter 400ms var(--ease-out),
              opacity 400ms var(--ease-out),
              transform 400ms var(--ease-out);
}
.expand-card[data-active] .expand-card__media {
  filter: grayscale(0.06) contrast(1.06) brightness(1.02);
  opacity: 1;
  transform: scale(1);
}

/* The tint wash. `multiply` keeps the photo's own light and shadow while
   pulling every hue toward the industry colour — a flat overlay would
   just fog it. */
.expand-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tint, var(--tint-slate));
  mix-blend-mode: multiply;
  /* Light, because each photograph is already graded to its industry hue and
     multiply costs a dark picture far more brightness than a pale one. */
  opacity: 0.14;
  transition: opacity 400ms var(--ease-out);
}
.expand-card[data-active] .expand-card__media::after { opacity: 0.08; }

/* A collapsed column is a fifth of the width and its label is a single line of
   6pt mono, so it needs far less cover than the open card's three-line block.
   The shared scrim below is built for that block; used unchanged on a narrow
   column it whites out most of the row and the picture disappears. */
.expand-card:not([data-active])::after {
  background: linear-gradient(to top,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.72) 22%,
    rgba(255, 255, 255, 0.34) 45%,
    rgba(255, 255, 255, 0) 70%);
}

/* Carries the dark copy off the photograph. Deepest under the text and clear
   by the halfway mark — pushed any higher it erases the picture, which is the
   mistake the 12 Aug calibration made. */
.expand-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.93) 24%,
    rgba(255, 255, 255, 0.58) 40%,
    rgba(255, 255, 255, 0) 58%);
}

/* Collapsed state: name runs up the card so a 1fr column stays readable. */
.expand-card__spine {
  position: absolute;
  left: 1.15rem;
  bottom: 1.35rem;
  z-index: 2;
  transform-origin: left bottom;
  transform: rotate(-90deg);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: opacity 220ms var(--ease-out);
}
.expand-card[data-active] .expand-card__spine { opacity: 0; }

.expand-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1rem, 1.8vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  pointer-events: none;
}

/* Staggered reveal, matching the component's delay ladder. */
.expand-card__body > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.expand-card[data-active] .expand-card__body > * { opacity: 1; transform: none; }
.expand-card[data-active] .expand-card__icon  { transition-delay: 60ms; }
.expand-card[data-active] .expand-card__title { transition-delay: 120ms; }
.expand-card[data-active] .expand-card__desc  { transition-delay: 180ms; }
.expand-card[data-active] .expand-card__cue   { transition-delay: 240ms; }

.expand-card__icon { width: 26px; height: 26px; color: var(--brand); }
.expand-card__title {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.expand-card__desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--gray-700);
  max-width: 42ch;
}
.expand-card__cue {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 0.15rem;
}
.expand-card:hover .expand-card__cue { color: var(--brand); }

.expand-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.expand-cards__more { margin-top: 1.5rem; }

@media (max-width: 780px) {
  /* Stack: the accordion runs vertically and the spine sits flat. */
  .expand-cards {
    grid-template-columns: 1fr;
    grid-template-rows: var(--expand-rows, 4fr 1fr 1fr 1fr 1fr);
    height: clamp(460px, 118vw, 620px);
    transition: grid-template-rows 500ms var(--ease-out);
  }
  .expand-card__spine {
    transform: none;
    left: 1.15rem;
    bottom: 1rem;
  }
  /* The open card is roughly half its desktop height while its copy block is
     the same four lines, so the block reaches into the weak end of the shared
     scrim and the icon and title end up over open plant. Carried higher and
     held stronger here; the picture still has the top quarter. */
  .expand-card[data-active]::after {
    background: linear-gradient(to top,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.95) 40%,
      rgba(255, 255, 255, 0.74) 62%,
      rgba(255, 255, 255, 0.22) 82%,
      rgba(255, 255, 255, 0) 100%);
  }
  /* A collapsed row here is only a fraction of a 460–620px stack, so the name
     lands high in it — past the point where the shared scrim has faded out.
     The strip therefore carries its own gradient across the full height,
     strongest on the left where the name sits and clearing to the right, so
     the plant is still visible in the row rather than a flat white bar. */
  .expand-card:not([data-active])::after {
    background: linear-gradient(to right,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.82) 48%,
      rgba(255, 255, 255, 0.42) 100%);
  }
  .expand-card__desc { font-size: 0.86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .expand-cards,
  .expand-card__media,
  .expand-card__body > * { transition-duration: 1ms; }
}