/* ==========================================================================
   KOBIL — Resources/Case Studies — Hero
   Figma 6201:91737 (desktop 1440) · 6201:91889 (phone 393)

   Rebuilt from the Aug-2026 frames. The previous version came from 3984:29140:
   a blue sans "CASE STUDIES" eyebrow, a 40/50 sans H1, a baked-in WebP wash, and
   every value hardcoded in px. Values are `--wN` / `--mN` throughout.

   Structurally this is the insights hero with a different breadcrumb, and the
   frames agree almost to the pixel: H1 at y=268 and both columns bottom-aligned
   at y=414 on both pages. The one difference is the breadcrumb's line height —
   18 here, 20 on insights — which is why the block starts at 234 rather than 232.
   ========================================================================== */

.sec-case-studies-hero {
  position: relative;
  /* 134 = the frame's crumb line box (y=234) minus the header's height (100). */
  padding: var(--w134) var(--w100) 0;
  /* `clip` rather than `hidden`: `hidden` would make this a scroll container and
     cut the wash's upward bleed, and the two axes cannot mix `hidden` with
     `visible` — `clip` can. No `isolation: isolate` (the old file had it): that
     makes the section a stacking context, traps the `z-index: -1` wash inside it,
     and — because the section is positioned — paints the whole subtree over the
     white block that follows. */
  overflow-x: clip;
  overflow-y: visible;
}

/* The blurred wash behind the header (frame vector 6201:91738).

   **The colour is #1D56EE, not the insights pages' #3EBFFC.** Two independent
   checks agree: Figma's own export of this node carries `fill="#1D56EE"`, and
   sampling the frame renders shows the tint pulling green down hard here
   (delta -39,-29,-2 against the page background) where insights only pulls red
   (-33,-10,0) — a blue wash rather than a cyan one. Opacity 22%, blur 150.

   The geometry is reused from the insights list asset, and that is exact rather
   than approximate: both frames report this vector at x=797.796875,
   y=147.50390625, 1610.79661518168 x 988.9504491667103 — identical to ten
   decimal places, i.e. the same instance at the same place. So this file is that
   flattened frame-space export with the fill swapped.

   The canvas is a 1440 x 1295 flattening anchored at the *page* origin, which is
   why it is pulled up by exactly the header's height. */
.sec-case-studies-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--w100));
  left: 0;
  width: 100%;
  height: var(--w1295);
  background: url('/assets/resources/case-studies/hero/hero-wash.svg') no-repeat top left / 100% 100%;
  pointer-events: none;
}

.csh__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--w72);
}

.csh__head {
  display: flex;
  flex-direction: column;
  gap: var(--w16);
  width: var(--w597);
  flex: 0 0 auto;
}

/* `RESOURCES | CASE STUDIES` — IBM Plex Mono Medium 12/18, System/70%.
   The widths confirm the family: "RESOURCES" is 65 for 9 characters and
   "CASE STUDIES" 87 for 12, i.e. 7.2 per character either way — Plex Mono's
   advance at 12px. */
.csh__crumbs {
  display: flex;
  align-items: center;
  gap: var(--w12);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w18);
  text-transform: uppercase;
  color: var(--navy-70);
}

/* The frame draws a 0.5px stroke 10 tall; 1px at half opacity carries the same
   ink and stays crisp at every width. */
.csh__crumb-sep {
  flex: 0 0 auto;
  width: 1px;
  height: var(--w10);
  background: var(--navy-70);
  opacity: 0.5;
}

/* Instrument Serif 56/1.3 — 146 over two lines in the frame. */
.csh__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--navy);
}

.csh__lead {
  flex: 0 0 auto;
  width: var(--w492);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-80);
}

/* ---- Phone (Figma 6201:91889) ----
   Head at x=24 y=140 w=345: crumbs (18) + 16 + H1 (123, three lines of 41) + 12
   + lead (60, three lines of 20). Unlike the insights list phone frame, this one
   keeps both breadcrumbs. */
@media (max-width: 768px) {
  .sec-case-studies-hero {
    /* 72 = the frame's crumb line box (y=140) minus the phone header (68). */
    padding: var(--m72) var(--m24) 0;
  }

  /* The phone has its own vector (6201:91890) and it is *not* the insights one
     rescaled — the two triangles are not similar (sides 297.9/324.0/326.6 against
     279.1/323.4/336.0), so there is nothing to reuse. Figma exports a rotated
     vector in its own unrotated local space with no rotation in the payload, so
     placing that export directly distorts it.

     Instead this is the wash measured out of the frame render itself: for each
     8px cell of the region where the page background is visible, take the
     lightest pixel (text only darkens, so the lightest pixel in a cell is
     background + wash) and solve `rendered = bg*(1-a) + #1D56EE*a` for `a` on the
     red and green channels. That grid is a 50x100 RGBA PNG, 1KB, stretched back
     with `background-size: 100% 100%` — the field has no detail finer than the
     125px blur, so the upscale is lossless in practice. Cells hidden behind the
     white card are interpolated from the visible side strips; they are never
     seen. */
  .sec-case-studies-hero::before {
    top: calc(-1 * var(--m68));
    left: 0;
    width: 100%;
    height: var(--m800);
    background-image: url('/assets/resources/case-studies/hero/hero-wash-mobile.png');
    background-size: 100% 100%;
  }

  .csh__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--m12);
  }

  .csh__head {
    width: auto;
    gap: var(--m16);
  }

  .csh__crumbs {
    gap: var(--m12);
    font-size: var(--m12);
    line-height: var(--m18);
  }

  .csh__crumb-sep {
    height: var(--m10);
  }

  .csh__title {
    font-size: var(--m34);
    line-height: 1.2;
  }

  .csh__lead {
    width: auto;
    font-size: var(--m14);
    line-height: var(--m20);
  }
}