/* ==========================================================================
   KOBIL — Homepage: "Built for worlds where trust cannot fail."
   Figma: D-Homepage → 6019:111756; the rows + photo block is the component
   set "industries/desktop" 5486:2422 (1280 wide: 578 rows · 231 gap · 471
   photo) and "imdustries/mobile" 6213:49578 (362 wide, photo below).

   Eight variants, one per industry: the selected row turns Primary/Dark Blue
   and expands its description, and the photo on the right is THAT industry's.
   So the eight photos are a cross-faded stack and one selected index drives
   row + description + photo — see js/sections/industries-home.js.

   Desktop: the whole row is the link to its industry page (title + 24px
   arrow) and hover/focus is what selects — the prototype's own ON_HOVER
   transition, which leaves the click free to navigate. The phone frame turns
   the row into an accordion instead: the title and the "+" both toggle it
   (js holds the link back below 769) and "See more" inside the open row is
   what navigates there.
   ========================================================================== */

.sec-industries-home {
  background: var(--white);
  padding: var(--w88) 0 var(--w96);
}

.sec-industries-home__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--w80);
}

.sec-industries-home__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 600;
  line-height: var(--w18);
  letter-spacing: 2.04px;
  text-transform: uppercase;
  color: var(--navy-70);
}

.sec-industries-home__title {
  margin-top: var(--w20);
  max-width: var(--w620);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w56);
  line-height: 1.2;
  color: var(--navy);
}

/* Figma's component is one centered row: 578 + 231 + 471 = the 1280 content
   column. */
.sec-industries-home__grid {
  display: grid;
  grid-template-columns: var(--w578) var(--w471);
  align-items: center;
  gap: var(--w231);
  margin-top: var(--w40);
}

/* ---- Rows ---- */

.sec-industries-home__rows {
  display: flex;
  flex-direction: column;
  gap: var(--w12);
  /* The variants are 483 tall except the two whose description wraps to a
     second line (financial 506, telecom 506). Holding the column at the
     tallest keeps the section from reflowing — and the centered photo from
     sliding 11px — every time the selection moves between them. 514, not
     506: Figma draws the row stroke outside the frame box, the CSS border
     inside it, so eight rows add 8px the variant heights don't show. */
  min-height: var(--w514);
}

/* The arrow is positioned against the row, so the row is the containing
   block; `items-start` in Figma means its 24px box aligns with the top of
   the title's line box, i.e. top: 0 here. */
.sec-industries-home__row {
  position: relative;
  padding-bottom: var(--w20);
  border-bottom: 1px solid var(--navy-40);
}

.sec-industries-home__row-top {
  display: flex;
  align-items: center;
  gap: var(--w24);
}

/* The row's link: title on the left, arrow on the right of the 578 column.
   The inner 24 gap leaves the text the same 530 the description gets, so
   both wrap identically. */
.sec-industries-home__row-link {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--w24);
}

.sec-industries-home__row-title {
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 500;
  line-height: var(--w26);
  color: var(--navy);
  transition: color 0.4s var(--ease);
}

.sec-industries-home__row.is-open .sec-industries-home__row-title {
  color: var(--blue);
}

/* Stroked 24px arrow (Figma "Frame" — the same glyph in navy and #1046cf, so
   one inline SVG on currentColor). */
.sec-industries-home__row-arrow {
  display: block;
  flex: 0 0 auto;
  width: var(--w24);
  height: var(--w24);
  color: var(--navy);
  transition: color 0.4s var(--ease), transform 0.4s var(--ease);
}

.sec-industries-home__row.is-open .sec-industries-home__row-arrow {
  color: var(--blue);
}

/* The nudge stays on hover, not on the selected state: selection outlives the
   cursor, and a permanently shifted arrow would sit 4px out of the column the
   other seven line up in (Figma's active variant keeps it in line). */
.sec-industries-home__row-link:hover .sec-industries-home__row-arrow {
  transform: translateX(var(--w4));
}

/* The phone's "+"/"−" button; hidden wherever the arrow does the pointing. */
.sec-industries-home__row-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--navy);
  cursor: pointer;
  transition: color 0.4s var(--ease);
}

.sec-industries-home__row-icon {
  position: relative;
  display: block;
  width: var(--w24);
  height: var(--w24);
}

/* One 14px plus, masked twice: the ::after is clipped to its middle bar, so
   the open row reads as a minus (Figma's icon inset 45.83%). */
.sec-industries-home__row-icon::before,
.sec-industries-home__row-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--w14);
  height: var(--w14);
  transform: translate(-50%, -50%);
  background-color: currentColor;
  -webkit-mask: url("/assets/ecosystem/icon-toggle-plus.svg") center / contain no-repeat;
  mask: url("/assets/ecosystem/icon-toggle-plus.svg") center / contain no-repeat;
  transition: opacity var(--dur) var(--ease), transform 0.3s var(--ease);
}

.sec-industries-home__row-icon::after {
  opacity: 0;
  clip-path: inset(45% 0);
}

.sec-industries-home__row.is-open .sec-industries-home__row-icon::before {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.sec-industries-home__row.is-open .sec-industries-home__row-icon::after {
  opacity: 1;
}

.sec-industries-home__row.is-open .sec-industries-home__row-toggle {
  color: var(--blue);
}

/* Description — collapsed unless the row is selected (0.4s, the prototype's
   own ON_HOVER SMART_ANIMATE). Same right inset as the head. */
.sec-industries-home__row-reveal {
  display: grid;
  grid-template-rows: 0fr;
  padding-right: var(--w48);
  transition: grid-template-rows 0.4s var(--ease);
}

.sec-industries-home__row.is-open .sec-industries-home__row-reveal {
  grid-template-rows: 1fr;
}

.sec-industries-home__row-reveal-inner {
  overflow: hidden;
}

.sec-industries-home__row-desc {
  padding-top: var(--w8);
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

/* "See more" is the phone's navigation affordance: there the head only opens
   the row, so the link the desktop hangs on the arrow moves in here. */
.sec-industries-home__row-more {
  display: none;
}

/* ---- Photo stack ---- */

.sec-industries-home__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--w20);
  overflow: clip;
}

.sec-industries-home__shot {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.sec-industries-home__shot.is-active {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Phone — Figma "imdustries/mobile" 6213:49578: the 362 column stacks the row
   list and a 361 square photo with 24 between them. Rows keep the 12 gap, the
   head carries the "+", and the open row shows description + "See more". */
@media (max-width: 768px) {
  .sec-industries-home {
    padding: var(--m40) 0 var(--m60);
  }

  .sec-industries-home__inner {
    padding: 0 var(--m16);
  }

  .sec-industries-home__title {
    margin-top: var(--m24);
    font-size: var(--m34);
  }

  .sec-industries-home__grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--m24);
    margin-top: var(--m40);
  }

  .sec-industries-home__rows {
    gap: var(--m12);
    min-height: 0;
  }

  /* 12 of bottom padding here, not the desktop's 20 — the resting variant
     (6213:49576) sets every row that way. */
  .sec-industries-home__row {
    padding-bottom: var(--m12);
  }

  .sec-industries-home__row-top {
    gap: var(--m24);
  }

  /* Figma tightens the gap to 12 on the open row. */
  .sec-industries-home__row.is-open .sec-industries-home__row-top {
    gap: var(--m12);
  }

  .sec-industries-home__row-title {
    font-size: var(--m16);
    font-weight: 600;
    line-height: var(--m23);
  }

  .sec-industries-home__row-arrow {
    display: none;
  }

  .sec-industries-home__row-toggle {
    display: inline-flex;
  }

  .sec-industries-home__row-icon {
    width: var(--m24);
    height: var(--m24);
  }

  .sec-industries-home__row-icon::before,
  .sec-industries-home__row-icon::after {
    width: var(--m14);
    height: var(--m14);
  }

  /* 12 + 24: the open row is the only one that shows the panel, and Figma
     tightens its head gap to 12, so the description gets 326 of the 362. */
  .sec-industries-home__row-reveal {
    padding-right: var(--m36);
  }

  .sec-industries-home__row-desc {
    padding-top: var(--m4);
    font-size: var(--m16);
    line-height: var(--m23);
  }

  .sec-industries-home__row-more {
    display: inline-block;
    margin-top: var(--m8);
    font-family: var(--font-sans);
    font-size: var(--m14);
    font-weight: 500;
    line-height: var(--m22);
    color: var(--navy);
    text-decoration: underline;
  }

  .sec-industries-home__media {
    border-radius: var(--m15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sec-industries-home__row-icon::before,
  .sec-industries-home__row-icon::after,
  .sec-industries-home__shot,
  .sec-industries-home__row-reveal {
    transition: none;
  }
}