/*
 * /use-cases/<slug>/ — page-specific styles (template:
 * web/src/pages/use-cases/[slug].astro). The page reuses the industry hero
 * (.hero--industry sizing + hero-fill.js + the .hero__stats strip) and the
 * industry body modules; this file adds only what's new to the use-case hero:
 *   .uc-eyebrow      — "■ USE CASE" label + industry/category tags above the H1
 *   .uc-hero__row    — H1 left + bracketed CTA right, on one row
 *   .hero--use-case  — stat-strip restyle: orange Geist-Pixel-Grid values
 */

/* ── Eyebrow — filled square + "USE CASE" + tag list ───────────────────────
 * Same mono/square language as .about-eyebrow; the square marks only the
 * fixed "USE CASE" label, the tags follow at a wide gap.
 */
.uc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 30px;
}

.uc-eyebrow__label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.uc-eyebrow__label::before {
  content: '';
  width: 9px;
  height: 9px;
  background: currentColor;
  flex: none;
}

/* ── H1 + CTA row ──────────────────────────────────────────────────────────
 * The BOOK A DEMO button sits at the right tram side, dropped to the foot of
 * the heading block.
 */
.uc-hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

/* The base .hero__heading is a centring flex column (each wrapped line would
   centre); this heading is plain flush-left text. */
.uc-hero__row .hero__heading--industry {
  display: block;
  text-align: left;
  margin-bottom: 0;
  max-width: 900px;
}

.uc-hero__cta {
  flex: none;
  margin-bottom: 14px;
}

/* The hero button reads dark with ORANGE corner brackets (vs the white-bracket
   .btn--outline used elsewhere) — recolour the bracket pseudo-element only. */
.uc-hero__cta.btn--outline {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.25);
}
.uc-hero__cta.btn--outline::before {
  background:
    linear-gradient(var(--orange), var(--orange)) top    left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) top    left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--orange), var(--orange)) top    right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) top    right / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom right / var(--bracket-w) var(--bracket)  no-repeat;
}

/* ── Stat strip restyle ────────────────────────────────────────────────────
 * The industry strip's white Geist values become orange dot-matrix figures
 * (Geist Pixel Grid); labels drop to the small mono treatment so the values
 * carry the row.
 */
.hero--use-case .hero__stat-value {
  font-family: var(--font-pixel-grid);
  font-size: 84px;
  color: var(--orange);
  white-space: nowrap;
}

.hero--use-case .hero__stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* ── Intro — framing statement under the hero stats ────────────────────────
 * Mono heading, then a 2-up: accent-bar statements left, image right. The
 * section starts at the hero's bottom rule (the hero's own corner brackets
 * frame it), so it draws no top edge of its own. The first statement's bar is
 * white, the rest dim — reading order emphasis from the design.
 */
/* The section aligns to the RAIL (+36px, like the stat cells above it), not the
   hero's --content-edge — per the design, its content starts wider than the hero
   text and the image runs out to the same padding edge on the right. */
.uc-intro {
  padding: 60px calc(var(--rail-edge) + 36px) 72px;
}

.uc-intro__heading {
  font-family: var(--font-pixel);   /* Geist Pixel (square) */
  font-weight: 400;
  font-size: 46px;
  letter-spacing: 0.01em;
  color: var(--white);
  margin: 0 0 48px;
}

.uc-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 440px) 1fr;
  gap: 96px;
  align-items: start;
}

.uc-intro__points {
  list-style: none;
  margin: 0 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 52px;
}

/* Each statement is an even ~165px row; the accent bar spans the full row and
   the text centres against it (the bar is deliberately taller than the text). */
.uc-intro__point {
  position: relative;
  min-height: 165px;
  display: flex;
  align-items: center;
  padding-left: 26px;
  font-family: var(--font-sans);
  font-weight: 400;                 /* Geist Regular — not bold */
  font-size: 22px;
  line-height: 1.5;
  color: var(--white);
}
.uc-intro__point::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(255, 255, 255, 0.35);
}
.uc-intro__point:first-child::before {
  background: var(--white);
}

/* Fills its column to the right padding edge; centred against the points block. */
.uc-intro__media {
  align-self: center;
}
.uc-intro__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Light zone — everything below the divider-2 transition ────────────────
 * divider-2.png dithers black → #DADADA, so the zone is the site's standard
 * light surface (matches the card-scroll section + /about/'s .values).
 * NO z-index: the page tram lines (.page-wrapper::after, fixed, z-101,
 * mix-blend-mode: difference — see css/layout.css) must paint over this zone,
 * where the difference blend flips them to faint grey. Lifting the zone above
 * z-101 (the .values approach) hides them.
 */
.uc-light {
  position: relative;
  background: #DADADA;
}

/* ── Feature rows — bordered grid on the tram lines ────────────────────────
 * One row per feature: SQUARE image left, text right — pixel-font heading at
 * the top, orange-square bullets a fixed distance below it. 1px black
 * hairlines frame the grid and split its cells; orange corner brackets sit
 * outside the four grid corners (shared .bracket primitive) and orange nodes
 * mark where each row seam crosses the outer edges (stat-strip language).
 * The 128px top margin also clears the divider-2 overlay, which extends 64px
 * into the zone.
 *
 * Every row is exactly --uc-row-h tall — a fixed height, not a minimum, so
 * neither long copy nor an odd-shaped image can push one row out of step with
 * the others. The copy budget that fits in that height is enforced up front by
 * the CMS (character/bullet limits in web/public/admin/config.yml) and clipped
 * here as a backstop. Retune the geometry with the two custom properties below.
 */
.uc-features {
  position: relative;
  /* Row height AND the media column's width — the image cell is a square of
     this side, so it displays square whatever the source image's aspect ratio
     is (object-fit: cover crops it; uploads are never pre-cropped).
     620 media + 556 body = 1176px, the content width at --col-width. */
  --uc-row-h: 620px;
  /* Fixed heading → bullets distance. The height available for copy is 524px
     (620 less the body's 2 × 48 padding), against 55.2px per heading line
     (48 × 1.15), 26.6px per bullet line (19 × 1.4), this gap and 36px between
     bullets. The tallest row in the current content needs 494px — a 3-line
     heading over bullets of 2+3+3 lines (use-cases/adas-validation) — so there
     is ~30px of headroom. Note this is calibrated to the real copy, NOT a proof
     that every combination the CMS allows will fit: a 3-line heading over three
     4-line bullets would want 601px and get clipped. Squeezing the gaps enough
     to cover that case would wreck the spacing, so the guarantee here is only
     that the row height never moves. */
  --uc-copy-gap: 44px;
  /* Content edge ≠ tram lines: the grid insets to --content-edge like every
     other section's inner (numbered-points, tailwinds), leaving the chameleon
     rules running clear of it. */
  margin: 128px var(--content-edge) 96px;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.uc-features .bracket--tl { top: -3px;    left: -3px; }
.uc-features .bracket--tr { top: -3px;    right: -3px; }
.uc-features .bracket--bl { bottom: -3px; left: -3px; }
.uc-features .bracket--br { bottom: -3px; right: -3px; }

.uc-features__row {
  position: relative;
  display: grid;
  /* Square media cell + whatever is left for the body. */
  grid-template-columns: var(--uc-row-h) minmax(0, 1fr);
  /* The hard ceiling — a fixed height, so overflowing content cannot grow the
     row. The clipping is done by the two cells (both `overflow: hidden`); the
     row itself must stay `overflow: visible` or it would cut the seam nodes,
     which sit centred on its corners. */
  height: var(--uc-row-h);
}
.uc-features__row + .uc-features__row {
  border-top: 1px solid rgba(0, 0, 0, 0.3);
}

/* Square by construction: the cell is --uc-row-h wide and --uc-row-h tall.
   aspect-ratio carries the square into the stacked mobile layout, where the row
   height is auto. Non-square uploads are cropped here, on display — editors
   upload whatever they have. */
.uc-features__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.uc-features__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uc-features__body {
  display: flex;
  flex-direction: column;
  /* One fixed gap for heading → bullets in every row. (This used to be
     `margin: auto 0` on the list, which centred the bullets in the leftover
     space, so the distance moved with the length of the copy.) */
  gap: var(--uc-copy-gap);
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  padding: 48px 56px;
  min-width: 0;
  overflow: hidden;
}

.uc-features__heading {
  font-family: var(--font-pixel);   /* Geist Pixel (square) */
  font-weight: 400;
  font-size: 48px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--black);
  margin: 0;
  max-width: 480px;
  /* An unbroken token (a long product name, a pasted URL) would otherwise run
     past the cell and be cut mid-word by the overflow. */
  overflow-wrap: anywhere;
  /* 3 lines is the budget (≈42 chars at this width — the limit the CMS enforces
     on the field). Clip rather than reflow the row if a longer string gets in. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* overflow: hidden; */
}

/* Bullets start a fixed --uc-copy-gap below the heading; the slack in a short
   row falls at the bottom, so the heading and the first bullet sit on the same
   line in every row. */
.uc-features__points {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.uc-features__point {
  position: relative;
  padding-left: 36px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.4;
  color: #1A1A1A;
  max-width: 440px;
  overflow-wrap: anywhere;          /* see the heading — same reason */
  /* 4 lines (≈160 chars at this width — the CMS limit). The longest bullets in
     the current content run to 4 lines, so clamping at 3 would eat their tails. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.uc-features__point::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 11px;
  background: var(--orange);
}

/* Orange squares where the row seams cross the grid's outer edges (skip the
   first row — its top edge is the grid top, marked by the corner brackets). */
.uc-features__node {
  display: none;
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  background: var(--orange);
  transform: translate(-50%, -50%);
  z-index: 1;
}
.uc-features__row + .uc-features__row .uc-features__node { display: block; }
.uc-features__node--l { left: 0; }
.uc-features__node--r { left: 100%; }

/* ── Mobile / narrow (mobile.css owns the generic hero reflow ≤1300px) ───── */
@media (max-width: 1300px) {
  .uc-hero__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .uc-hero__cta { margin-bottom: 0; }
  .uc-eyebrow { gap: 24px; flex-wrap: wrap; row-gap: 10px; }
  .hero--use-case .hero__stat-value { font-size: 48px; }
  .uc-intro { padding: 56px var(--content-edge, 24px) 64px; }
  .uc-intro__heading { font-size: 28px; margin-bottom: 36px; }
  .uc-intro__grid { grid-template-columns: 1fr; gap: 40px; }
  .uc-intro__points { margin-left: 0; gap: 32px; }
  .uc-intro__point { min-height: 0; font-size: 18px; padding-top: 6px; padding-bottom: 6px; }
  /* Stacked: rows flow to their content (equal heights buy nothing once the
     cells are one above the other) and the clamps come off, so narrower columns
     wrap the copy instead of hiding the tail of it. The image stays square,
     capped so it doesn't eat the whole screen. */
  .uc-features { margin: 96px 24px 64px; }
  .uc-features__row { grid-template-columns: 1fr; height: auto; }
  .uc-features__media { width: min(100%, 420px); }
  .uc-features__body { border-left: none; border-top: 1px solid rgba(0, 0, 0, 0.3); padding: 32px 28px 40px; gap: 28px; }
  .uc-features__heading { font-size: 30px; display: block; -webkit-line-clamp: none; }
  .uc-features__points { gap: 28px; }
  .uc-features__point { font-size: 17px; display: block; -webkit-line-clamp: none; }
  .uc-features__node--r { display: none !important; }
}