/* ==========================================================================
   Solutions industries  —  Figma "Component 482 / Industries - Animated"
   (867:8413). 1920 x 1254 on Mono/Light - Grey.

   Six environments listed on the left, six cards on a rail to the right.
   Card is 742 tall (560 image + 48 gap + 134 copy) on a 902 pitch (742 + 160
   gap); one card is in view at a time and picking a list item scrolls the rail
   to it. The vertical sibling of the front page's `industries` section.

   Reworked cut (867:25642): no lede, headline at y135/212, list and rail at
   y353, and the rail clips from under the rule rather than at the first card.

   Default -> Animated, i.e. what the reveal plays:
     rule              width 38 -> 1824
     SOLUTIONS         translateX -80 -> 0
     FOUR ENVIRONMENTS translateY +20 -> 0
     ANY SITE          translateX +150 -> 0   (right-aligned, slides in)
     headline lines    translateY +70 -> 0
     lede              translateY +50 -> 0
     list items        translateY +40 -> 0
     card 1 image      width 0 -> 767         (a wipe, not a slide)
     card 1 title/body translateY +40 / +70 -> 0
   Figma masks card 1 only, because it is the card at rest.
   ========================================================================== */

.sol-ind {
  top: calc(1315 * var(--s));
  height: calc(1254 * var(--s));
  background: var(--c-mono-dark);   /* the ground the plate opens over */
  overflow: clip;   /* not `hidden` — that would trap the sticky pin */
  z-index: 2;
  /* Hold the content back until the plate has reached full bleed. The plate
     takes --rv-dur * 1.2, so the lead matches it exactly: the rectangle opens
     edge to edge first, then the content starts. Read by .rv / .rv-fade /
     .rule__fill in base.css. */
  --rv-lead: calc(var(--rv-dur) * 1.2);
}

/* --- backdrop plate -----------------------------------------------------
   Not in the Figma frame for this section, which is a flat Mono/Light - Grey
   fill — this is the front page's Features/FAQ treatment applied here on
   request. Same numbers as .faqbg__plate: inset 30.15 / 48, opening to full
   bleed, over Mono/Dark. It lives inside the pin so it travels with the
   sticky stage. */
.sol-ind__plate {
  position: absolute;
  inset: calc(30.15 * var(--s)) calc(48 * var(--s));
  background: var(--c-light-grey);
  transition: inset calc(var(--rv-dur) * 1.2) var(--rv-ease);
}
.sol-ind.is-in .sol-ind__plate { inset: 0; }

/* --- pinned rail ---------------------------------------------------------
   The stage is the 1254 frame from Figma. When the rail has somewhere to
   travel, ui.js adds `has-pin` and sets the two custom properties: the
   section grows by the runway (the vertical scroll the rail consumes) and the
   stage sticks with the *rail* centred in the viewport, not the stage — the
   rail is the part you are meant to be watching. Scroll position inside the
   runway then drives the track, so the six cards walk past one per ~902 of
   scroll and the matching name on the left goes blue. */

.sol-ind__pin {
  position: relative;
  width: 100%;
  height: calc(1254 * var(--s));
}

/* Stage + runway, plus --sol-pad. The pad matters: the rail is centred with a
   negative sticky `top`, which starts the scrub |top| earlier in the document
   and would otherwise leave the tail of the runway past the last scrollable
   pixel — the sixth card would stop short of landing. */
.sol-ind.has-pin {
  height: calc(1254 * var(--s) + var(--sol-runway, 0px) + var(--sol-pad, 0px));
}

.sol-ind.has-pin .sol-ind__pin {
  position: sticky;
  top: var(--sol-top, 0px);
}

/* Scroll owns the track's position while pinned, so a transition would fight
   it. Clicks are handled by scrolling the page instead. */
.sol-ind.has-pin .sol-ind__track { transition: none; }

/* --- header -------------------------------------------------------------- */

.sol-ind__rule {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(94 * var(--s));
  width: calc(1824 * var(--s));
  --rule-from: 38;
  --rule-color: var(--c-light-grey-02);
}

.sol-ind__eyebrow {
  position: absolute;
  height: calc(22 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.48 * var(--s));
  color: var(--c-mono-grey);
}
.sol-ind__eyebrow--a { left: calc(48 * var(--s));   top: calc(48 * var(--s)); width: calc(134 * var(--s)); }
.sol-ind__eyebrow--b { left: calc(643 * var(--s));  top: calc(48 * var(--s)); width: calc(241 * var(--s)); }
.sol-ind__eyebrow--c { left: calc(1720 * var(--s)); top: calc(48 * var(--s)); width: calc(151 * var(--s)); text-align: right; }
.sol-ind__eyebrow--c > .rv { display: block; }

.sol-ind__h {
  position: absolute;
  left: calc(48 * var(--s));
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: calc(64 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-3.2 * var(--s));
  color: var(--c-mono-dark);
  white-space: nowrap;
}
.sol-ind__h--l1 { top: calc(135 * var(--s)); width: calc(763 * var(--s)); height: calc(77 * var(--s)); }
.sol-ind__h--l2 { top: calc(212 * var(--s)); width: calc(464 * var(--s)); height: calc(77 * var(--s)); }

/* --- the list ------------------------------------------------------------ */

/* Wider than Figma's 399. "Commercial and Industrial Facilities" needs 568 at
   36px, so at 399 it wrapped to a second line inside a mask only 43 tall —
   the overflow clipped it and the label read as "Commercial and". The rail
   starts at x971, so 600 fits with room and keeps every item on one line at
   the 55 pitch. */
.sol-ind__list {
  position: absolute;
  left: calc(182 * var(--s));
  top: calc(353 * var(--s));
  width: calc(600 * var(--s));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 43 tall on a 55 pitch — the 12 is the gap, not line-height. */
.sol-ind__item {
  height: calc(43 * var(--s));
  margin-bottom: calc(12 * var(--s));
}
.sol-ind__item:last-child { margin-bottom: 0; }

.sol-ind__pick {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-sans);
  font-size: calc(36 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-1.44 * var(--s));
  text-align: left;
  color: var(--c-light-grey-02);
  cursor: pointer;
  transition: color var(--ui-dur) var(--ui-ease);
}
.sol-ind__pick:hover { color: var(--c-mono-grey); }
.sol-ind__pick.is-active { color: var(--c-sky-blue); }

/* --- the rail ------------------------------------------------------------ */

/* --- the rail ------------------------------------------------------------
   The clip starts at y95 — one pixel under the rule at y94 — not at the first
   card. That way a card travelling upward disappears *under* the rule instead
   of being cut off in mid-air at the top of its own column. The cards still
   begin at y353: the track carries the 258 difference as its own offset, which
   is constant and so does not disturb the JS translate. */
.sol-ind__rail {
  position: absolute;
  left: calc(971 * var(--s));
  top: calc(95 * var(--s));
  width: calc(767 * var(--s));
  height: calc(1016 * var(--s));   /* 95 -> 1111, the old 353 + 758 */
  overflow: hidden;
}

.sol-ind__track {
  position: relative;
  top: calc(40 * var(--s));        /* 95 + 40 = 135, level with the heading */
  width: 100%;
  transition: transform calc(var(--rv-dur) * 0.7) var(--rv-ease);
  will-change: transform;
}

.sol-ind__card {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(742 * var(--s));
}
.sol-ind__card:nth-child(1) { top: 0; }
.sol-ind__card:nth-child(2) { top: calc(902 * var(--s)); }
.sol-ind__card:nth-child(3) { top: calc(1804 * var(--s)); }
.sol-ind__card:nth-child(4) { top: calc(2706 * var(--s)); }
.sol-ind__card:nth-child(5) { top: calc(3608 * var(--s)); }
.sol-ind__card:nth-child(6) { top: calc(4510 * var(--s)); }

.sol-ind__shot {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(767 * var(--s));
  height: calc(560 * var(--s));
  overflow: hidden;
}
.sol-ind__shot img {
  display: block;
  width: calc(767 * var(--s));   /* fixed, so the wipe reveals rather than squashes */
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* The wipe: the container collapses to nothing and opens to full width,
   while the image inside keeps its own width so it is uncovered rather
   than stretched. */
.sol-ind__shot--wipe {
  width: 0;
  transition: width calc(var(--rv-dur) * 1.1) var(--rv-ease);
  transition-delay: calc(var(--rv-lead, 0ms) + 2 * var(--rv-step));
}
.sol-ind.is-in .sol-ind__shot--wipe { width: calc(767 * var(--s)); }

.sol-ind__copy {
  position: absolute;
  left: 0;
  top: calc(608 * var(--s));
  width: 100%;
}

.sol-ind__card-title {
  height: calc(38 * var(--s));
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: calc(32 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-1.28 * var(--s));
  color: var(--c-mono-dark);
}

.sol-ind__card-body {
  height: calc(72 * var(--s));
  margin: calc(24 * var(--s)) 0 0;   /* 608 + 38 + 24 = 670, Figma's body top */
  font-family: var(--f-sans);
  font-size: calc(20 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-0.8 * var(--s));
  color: var(--c-mono-dark);
}

@media (prefers-reduced-motion: reduce) {
  .sol-ind__plate,
  .sol-ind.is-in .sol-ind__plate { inset: 0; transition: none; }
  .sol-ind__shot--wipe,
  .sol-ind.is-in .sol-ind__shot--wipe { width: calc(767 * var(--s)); transition: none; }
  .sol-ind__track { transition: none; }
}

/* --- reflow -------------------------------------------------------------- */

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  /* Reflowed: the section carries its own ground, no plate to open. */
  .sol-ind { height: auto; padding: 40px 20px 48px; background: var(--c-light-grey); --rv-lead: 0ms; }
  .sol-ind__plate { display: none; }
  /* No pinning below the reflow breakpoint — the cards simply stack. */
  .sol-ind.has-pin { height: auto; }
  .sol-ind.has-pin .sol-ind__pin { position: static; }
  .sol-ind__pin { height: auto; }
  .sol-ind__rule { display: none; }

  .sol-ind__eyebrow,
  .sol-ind__h,
  .sol-ind__list,
  .sol-ind__rail { position: static; width: auto; height: auto; }

  .sol-ind__eyebrow--b,
  .sol-ind__eyebrow--c { display: none; }
  .sol-ind__eyebrow--a { font-size: 12px; }

  .sol-ind__h {
    font-size: clamp(28px, 7.5vw, 40px);
    letter-spacing: -0.02em;
    white-space: normal;
  }
  .sol-ind__h--l1 { margin-top: 14px; }

  /* The list becomes a horizontal chip strip, the rail a native scroller. */
  .sol-ind__list {
    display: flex;
    gap: 10px;
    margin-top: 26px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sol-ind__list::-webkit-scrollbar { display: none; }
  .sol-ind__item { flex: none; height: auto; margin: 0; }
  .sol-ind__pick { font-size: 15px; letter-spacing: 0; white-space: nowrap; }

  .sol-ind__rail { margin-top: 24px; overflow: visible; height: auto; }
  .sol-ind__track { transform: none !important; top: 0; }
  .sol-ind__card { position: relative; top: auto !important; height: auto; }
  .sol-ind__card + .sol-ind__card { margin-top: 40px; }
  .sol-ind__shot,
  .sol-ind__shot--wipe,
  .sol-ind.is-in .sol-ind__shot--wipe {
    position: relative;
    width: 100% !important;
    height: auto;
    aspect-ratio: 767 / 560;
    transition: none;
  }
  .sol-ind__shot img { width: 100%; height: 100%; }
  .sol-ind__copy { position: static; margin-top: 20px; }
  .sol-ind__card-title { height: auto; font-size: 22px; letter-spacing: -0.01em; }
  .sol-ind__card-body { height: auto; margin-top: 12px; font-size: 16px; letter-spacing: 0; }
}