/* Work page — case study list. design.md: Work page — case study list.
   Built against the exact Figma frame (533:312 "Desktop - 21", on-demand expanded via 533:379/397,
   the collapsed AI-Powered/Reusable Lists bands via 567:628/662) rather than approximate values —
   every width, gap and padding below is taken straight from that node tree's own absolute pixel
   metadata, not the rounded Tailwind classes get_design_context also returns for the same nodes.
   Colours reuse the AA-corrected Work library tokens directly
   (--color-lib-*-bg/accent/cta-hover/cta-press/mat) rather than the raw (failing-contrast) hex the
   frame itself uses in places — same decision this doc already made for the Work library book
   cards.

   Resynced against the Figma file's current state (node metadata, not the earlier read this file's
   comments used to cite) — several values had drifted or were never quite right: the expanded
   band's padding was 48/87/32 (top/horizontal/bottom), corrected to a symmetric 48/90; the text
   column was 455px, corrected to 589; the metrics/headline column inside it (.work-band__meta-col)
   was a fixed 419px, corrected to flex: 1 1 0 — Figma's own node is flex-grow, not a fixed width,
   and 419 was specific to a single-digit numeral's leftover space at the OLD 455px column width;
   .work-band__headline-lg was a separate fixed 445px, corrected to 100% of its (now 589px) parent;
   the screenshot/placeholder block was 650x418, corrected to 650x342 (width unchanged); the
   collapsed band was missing its 90px right padding (harmless today, since its 765px content
   column never reaches that far, but present on the actual node); and the shared hover-expand
   height (498px) is recomputed below for the new numbers rather than left over from the old ones. */

/* The "Case studies" heading above the list. .section-title's own shared rule (components.css)
   gives it 36px/--text-h2, the same size the case study pages use for their own section
   headings — this page wants 24px DM Sans Medium instead (--text-h3 is already exactly that:
   see the Type scale in design.md), plus the 48px gap down to the first card. Scoped to this one
   heading via its own class rather than changed on .section-title itself, which those other
   pages still need at 36px. */
.work-list__heading {
  font-size: var(--text-h3);
  margin-bottom: var(--space-2xl);
}

/* Bands go edge to edge of the viewport (deliberately wider than Figma's own ~1259px-inset frame —
   the frame's text/image geometry inside each band is still matched exactly, just not the frame's
   own outer width). */
.work-list {
  display: flex;
  flex-direction: column;
}

/* --work-band-height defaults to the plain 169px every band already used — only the LAST band
   (js/work.js) ever sets it to something taller, so On-Demand and AI-Powered are completely
   unaffected by any of this: the property is simply never set on them, so they keep reading the
   fallback. See js/work.js for why only the last one grows, and only on desktop. */
.work-band {
  position: relative;
  display: grid;
  grid-template-rows: var(--work-band-height, 169px);
  overflow: hidden;
  background: var(--band-bg);
  text-decoration: none;
  transition: grid-template-rows 0.35s ease-in-out;
  /* Shared by .work-band__collapsed and .work-band__expanded below — see the comment on each for
     why they both need the SAME number. 90(left) + 1263(the expanded group's own measured width:
     589 text + 24 gap + 650 shot) + 90(right) = 1443, the widest either state's content ever
     needs. The background stays full-bleed (this rule's own width is untouched); only the content
     inside is capped and centred. */
  --work-band-content-max: 1443px;
}

/* 475px — not a Figma value, measured. Figma's own on-demand frame (533:379/397, the only band
   shown expanded) comes to 472px (48 + a 376px text column + 48), but that 376 is Figma's text
   engine; a real browser renders the same three-line headline + three-line metrics column at
   378.8125px — measured directly (getBoundingClientRect on .work-band__text), not estimated from
   font metrics, the same way every other text-driven height on this site is settled. 48 + 378.8125
   + 48 rounds up to 475, with headroom rather than a hairline fit.

   One shared height for all three bands, same as before: AI-Powered and Reusable Lists both need
   only 342 + 96 = 438 (their own text is shorter than the 650x342 screenshot, so the screenshot is
   what determines their content height) — 475 clears both with room to spare, matching the
   existing "only one card expands, and every card expands to the same height" behaviour rather
   than switching to a per-card height now that the numbers changed. */
.work-band:hover,
.work-band:focus-visible {
  grid-template-rows: 475px;
}

.work-band--on-demand {
  --band-bg: var(--color-lib-ondemand-bg);
  --band-accent: var(--color-lib-ondemand-accent);
  --band-cta-hover: var(--color-lib-ondemand-cta-hover);
  --band-cta-press: var(--color-lib-ondemand-cta-press);
  --band-mat: var(--color-lib-ondemand-mat);
}

.work-band--ai-powered {
  --band-bg: var(--color-lib-ai-bg);
  --band-accent: var(--color-lib-ai-accent);
  --band-cta-hover: var(--color-lib-ai-cta-hover);
  --band-cta-press: var(--color-lib-ai-cta-press);
  --band-mat: var(--color-lib-ai-mat);
}

.work-band--reusable-lists {
  --band-bg: var(--color-lib-lists-bg);
  --band-accent: var(--color-lib-lists-accent);
  --band-cta-hover: var(--color-lib-lists-cta-hover);
  --band-cta-press: var(--color-lib-lists-cta-press);
  --band-mat: var(--color-lib-lists-mat);
}

/* Dark mode — previously undocumented, so all three bands stayed on their light-mode --band-bg
   in both themes and sat at full brightness against the otherwise near-black page. Each now
   switches to that case study's own dark band shade — the same tokens the case study page's
   stats band, the Work library book cards and the About page testimonial cards already use —
   design.md: Work page — case study list → Dark mode. Only --band-bg changes: metrics text,
   dividers and the "View case study" pill (--band-accent, --band-cta-hover/-press) were already
   checked against a background this dark or darker, so they're untouched.

   .work-band { background: var(--band-bg); } (above) is the only rule reading this token, and
   neither .work-band__collapsed nor .work-band__expanded carries its own background — so, same
   as the book cards, overriding --band-bg once per variant here covers both states. */
[data-theme="dark"] .work-band--on-demand { --band-bg: var(--color-lib-ondemand-band-dark); } /* #36352A, 9.93:1 */
[data-theme="dark"] .work-band--ai-powered { --band-bg: var(--color-lib-ai-band-dark); } /* #372A24, 8.99:1 */
[data-theme="dark"] .work-band--reusable-lists { --band-bg: var(--color-lib-lists-band-dark); } /* #1F242F, 7.72:1 */

/* ── Collapsed content (Figma 533:333/533:339) ──────────────────────────────
   left:91 top:24, a 765px-wide column, flex-col gap-16 between the index/eyebrow row and the
   headline. */

.work-band__collapsed {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, var(--work-band-content-max));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  /* No-op at the plain 169px height every band but the last one uses — there's no slack to
     centre into. Only matters for a band js/work.js has stretched taller than its own content,
     where it keeps the meta row + headline centred in the extra height rather than pinned to the
     top with empty band colour opening up underneath. */
  justify-content: center;
  gap: var(--space-md);
  padding: 24px 90px 24px 91px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-in-out 0.15s, visibility 0s linear 0s;
}

/* 765px is the text column's own width in Figma, measured after the 91px left padding above —
   capping the padded box itself at 765px (border-box includes that padding) would leave only
   674px for the text and wrap it a line taller than the fixed 169px collapsed height allows. */
.work-band__meta,
.work-band__headline {
  max-width: 765px;
}

.work-band:hover .work-band__collapsed,
.work-band:focus-visible .work-band__collapsed {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
}

.work-band__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
}

.work-band__index {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--band-accent);
}

.work-band__eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--band-accent);
}

.work-band__headline {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 32px;
  line-height: var(--leading-normal);
  color: var(--band-accent);
}

/* ── Expanded content (Figma 533:379, on-demand) ────────────────────────────
   Padding 48/90 on the band itself; inside it one group (text column + screenshot, gap-24,
   vertically centered on each other) sitting at the padded left edge of a CAPPED, centred content
   box — see --work-band-content-max on .work-band above — not the raw band edge.

   Figma's own frame does leave the group sitting at the padded left edge with nothing stretching
   it further (its one child makes the outer row's justify-between a no-op), and that was
   reproduced as-is at first: correct up to the ~1440px width Figma was designed at, but past it
   the band's now-full-bleed background kept growing while the content stayed pinned left, so the
   gap of plain band colour past the screenshot grew without bound on wider screens — flush left
   margin, an ever-increasing right one. Capping and centring the content box fixes that (equal
   margins beyond ~1443px) while changing nothing at or below it: min(100%, 1443px) still resolves
   to 100% on any narrower viewport, which is exactly the flush-left, no-visible-margin layout this
   already had there. */

.work-band__expanded {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, var(--work-band-content-max));
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  padding: 48px 90px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
}

.work-band:hover .work-band__expanded,
.work-band:focus-visible .work-band__expanded {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-in-out 0.15s, visibility 0s linear 0s;
}

.work-band__group {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.work-band__text {
  flex: none;
  width: 589px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.work-band__upper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  width: 100%;
}

/* Numeral+eyebrow row, then the headline directly under it with no extra gap of its own — the
   apparent space above the headline in Figma is just the row's own height (set by the tall
   numeral) with the short eyebrow column centered inside it, not a margin. */
.work-band__top {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}

.work-band__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.work-band__numeral {
  flex: none;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 73px;
  line-height: var(--leading-normal);
  color: var(--band-accent);
  white-space: nowrap;
}

.work-band__meta-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.work-band__eyebrows {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: var(--leading-normal);
  color: var(--band-accent);
}

.work-band__rule {
  flex: none;
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--band-accent);
}

.work-band__name {
  width: 100%;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--band-accent);
}

.work-band__headline-lg {
  width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 32px;
  line-height: var(--leading-normal);
  color: var(--band-accent);
}

.work-band__metrics-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Plain stacked lines at their own line-height — Figma has no extra gap between them, unlike the
   12px gaps everywhere else in this component. Reused as-is for AI-Powered's non-metric two-line
   copy ("ADDRESSING MOST RECURRING USER PAIN-POINT" / "USING AI VALIDATION", Figma 643:63) — same
   visual pattern (mono 16px, no bullets, no inter-line gap), just different content per case study. */
.work-band__metrics {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--band-accent);
}

.work-band__metrics li {
  margin: 0;
}

.work-band__cta {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 7px 23px 7px 22px;
  border-radius: var(--radius-pill);
  background: var(--band-accent);
  color: var(--color-lib-cta-label);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  transition: background-color 0.15s ease-in-out;
}

.work-band:hover .work-band__cta:hover {
  background: var(--band-cta-hover);
}

.work-band:hover .work-band__cta:active {
  background: var(--band-cta-press);
}

/* Rebuilt as a real multi-layer composition matching Figma exactly (632:103157 / 636:103317 /
   636:103332), not a single flattened image forced to object-fit: cover this box. That was the
   actual root cause of the long-standing alignment bug: cover-fitting one flattened screenshot
   onto a 650x342 box intermittently painted smaller than its own laid-out box (confirmed via
   getBoundingClientRect that the box and img both measured 650x342 correctly — only the paint was
   wrong), and no amount of re-cropping that flattened asset fixed it, because the design was never
   a single cover-fit image to begin with. Each case study's Figma frame composes 2-3 separately
   positioned screenshots (each its own small "image fill" — oversized img, cropped by its own
   overflow: hidden container, offset by Figma's own percentages) with their own drop-shadows and
   z-order. .work-band__shot is now just the positioning context; .work-band__shot-layer +
   .work-band__shot-layer img below do the actual work, with per-card exact-px placement written
   inline in work.html (left/top/width/height match Figma's own frame 1:1, since this box is
   exactly the 650x342 Figma designed it at — no scaling needed). */
.work-band__shot {
  position: relative;
  flex: none;
  width: 650px;
  height: 342px;
  border-radius: 5px;
  background: var(--band-mat);
  overflow: hidden;
}

.work-band__shot-layer {
  position: absolute;
  overflow: hidden;
}

.work-band__shot-layer img {
  position: absolute;
  display: block;
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .work-band,
  .work-band__collapsed,
  .work-band__expanded,
  .work-band__cta {
    transition: none;
  }
}

/* ── Narrow viewports ────────────────────────────────────────────────────── */

/* Not in Figma — the reference frames are desktop only. Below this the 87px side padding and the
   fixed-width text column plus 650px screenshot no longer fit; padding shrinks to the page margin
   and the group stacks (screenshot under text) instead of sitting side by side, so the band grows
   taller rather than clipping. */
@media (max-width: 1099px) {
  .work-band__collapsed {
    padding-left: var(--space-page-margin);
    max-width: none;
  }

  .work-band__expanded {
    padding: var(--space-xl) var(--space-page-margin);
  }

  .work-band__group {
    flex-direction: column;
    align-items: flex-start;
  }

  .work-band__text {
    width: 100%;
  }

  .work-band__headline-lg {
    width: 100%;
  }

  .work-band__meta-col {
    flex: 1 1 auto;
    width: auto;
  }

  .work-band__shot {
    width: 100%;
    height: auto;
    aspect-ratio: 650 / 342;
  }

  .work-band,
  .work-band:hover,
  .work-band:focus-visible {
    grid-template-rows: auto;
    min-height: 169px;
  }

  /* left/width/transform (the desktop centering added above --work-band-content-max) have to be
     reset here, not just position — transform applies to static elements too (unlike left, which
     position:static ignores on its own), so the leftover translateX(-50%) would still shift the
     now-in-flow, full-width element sideways by half its own width without this. */
  .work-band__collapsed {
    position: static;
    left: auto;
    width: auto;
    transform: none;
  }

  .work-band:hover .work-band__collapsed,
  .work-band:focus-visible .work-band__collapsed {
    display: none;
  }

  .work-band__expanded {
    position: static;
    left: auto;
    width: auto;
    transform: none;
    display: none;
  }

  .work-band:hover .work-band__expanded,
  .work-band:focus-visible .work-band__expanded {
    display: flex;
  }
}