/* ==========================================================================
   KOBIL — Resources/Insights — Hero
   Figma 6201:91670 (desktop 1440) · 6201:91975 (phone 393)

   Rebuilt from the Aug-2026 frames; the previous version came from 3984:29116
   and shared almost nothing with them — a blue sans eyebrow instead of the mono
   breadcrumb, a 40px sans H1 instead of the 56px serif one, and every value
   hardcoded in px instead of the fluid scale.

   All spacing is `--wN` / `--mN`, so the page is a proportional zoom of its
   frame (SKILL.md §2). The frame insets the content 100px on each side —
   1240 + 2x100 = 1440 — which is why the page is `page--flush` and each section
   carries its own `--w100`.
   ========================================================================== */

.sec-insights-hero {
  position: relative;
  /* 132 = the frame's eyebrow line box (y=232) minus the header's height (100).
     The 192 that was here came from reading the breadcrumb as starting near
     y≈302; frame 6201:91674 puts the hero block at y=232, so the whole hero — and
     with it the tab bar and the white block — sat 60px too low.

     Absolute frame coordinates are the rule on this page (the glow is anchored to
     the page origin and every phone value is measured from it), so this is the
     frame's y minus the header's real height. Worth noting: the frames draw the
     nav pill at y=30..110 while the shared header renders it at 20..100 — the
     site header is 10px higher than every frame. That is one global fix in the
     header partial, not something to absorb page by page. */
  padding: var(--w132) var(--w100) 0;
  /* NO `isolation: isolate` here — it was the bug. Isolating makes this section a
     stacking context, which traps the `z-index: -1` glow *inside* it; and because
     the section is `position: relative`, the whole thing then paints in the
     positioned layer, i.e. after the white card area's background. The 1295px-tall
     glow bled over the white block as a result.

     Without it the section is not a stacking context (relative + z-index auto), so
     the glow joins the root stacking context's negative layer and paints before any
     in-flow background — behind the white block, which is what the frame shows. */
  /* The blob below is deliberately wider than the page and offset past its right
     edge — which made the whole document scroll sideways at every viewport under
     1440, mobile included (the scrollbar appeared exactly the offset's width).
     That is fixed properly now — the box is exactly the page width — so this is a
     guard rather than the fix, and it matches the frame, which clips at its edge.

     `clip` rather than `hidden`: `overflow: hidden` would turn this into a scroll
     container and cut the blob's upward bleed as well, and `hidden`/`visible`
     cannot be mixed on the two axes — `clip` can, so the vertical bleed survives. */
  overflow-x: clip;
  overflow-y: visible;
}

/* The blurred glow behind the header (frame vector 6201:91671).
   #3EBFFC at 22% under a 150px blur, exported flat.

   Position is the whole point here and I had it wrong: the SVG is authored on a
   **1440 x 1295 canvas anchored at the page origin** — y=0 is the top of the page,
   above the header — not on some box floating near the hero. So the box is the full
   page width and is pulled up by exactly the header's height.

   That height is `--w100` and not a guess: measured at 1440/1280/1024/900 the header
   is 100/88.9/71.1/62.5 tall, which is 6.944vw — the same ramp `--w100` rides. The
   phone header is 68 at 393, hence `--m68` in the phone block below.

   `background-size: 100% 100%` rather than `contain`: the box already *is* the
   vector's canvas at page scale, so stretching it to the box is a faithful
   proportional scale, and `contain` would letterbox it. */
.sec-insights-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--w100));
  left: 0;
  width: 100%;
  height: var(--w1295);
  background: url('/assets/resources/insights/hero/hero-wash.svg') no-repeat top left / 100% 100%;
  pointer-events: none;
}

/* `flex-end`, not `flex-start`: the frame bottom-aligns the lead with the left
   column rather than top-aligning it. The head block runs 232..414 and the lead
   345..414 — same bottom edge, and 69 of its 182 height. Top-aligning put the
   lead 53px too high. */
.insights-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--w40);
}

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

/* `RESOURCES | INSIGHTS` — IBM Plex Mono Medium 12/20, System/70%. */
.insights-hero__crumbs {
  display: flex;
  align-items: center;
  gap: var(--w12);
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w20);
  text-transform: uppercase;
  color: var(--navy-70);
}

/* The 10px hairline between the two crumbs. */
.insights-hero__crumb-sep {
  width: 1px;
  height: var(--w10);
  background: var(--navy-70);
  opacity: 0.5;
}

/* Instrument Serif 56/1.3 — the frame's "Desktop H3 new" style. */
.insights-hero__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);
}

.insights-hero__desc {
  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:91975) ----
   Frame geometry, read off 6201:91984: the hero block is x=24, w=345 (393-2x24);
   the eyebrow's cap-top is at y=200, the H1's line box at y=224, the lead at
   y=359. The H1 is 34/1.2 (123px over three lines = 41 each), NOT the 32/1.3 I
   had — at 32 the title fits "Secure" on line one and wraps to two lines instead
   of the frame's three. The lead is Body/Small 14/20, not the desktop 16/23. */
@media (max-width: 768px) {
  /* 127, not the frame's 200-68=132, and that difference is the eyebrow's
     half-leading rather than a fudge. Figma trims the mobile eyebrow to its cap
     box (`text-box-trim: trim-both`, 8px tall for 12px mono), so y=200 is where
     the *glyphs* start. A CSS line box is not trimmed: at line-height 18 over
     IBM Plex Mono's 1.30em content area the cap-top sits 5.1px below the box
     top, so the box has to start at 195 for the ink to land on 200.

     Doing it with `text-box-trim` instead would let both numbers stay verbatim
     (132 + 16), but Firefox has no support, and there the H1 would drop 10px —
     a layout shift in one browser is worse than a derived number here. */
  .sec-insights-hero {
    padding: var(--m127) var(--m24) 0;
  }

  /* The phone has its OWN vector (6201:91976), flattened to a 393 x 964 canvas —
     same convention as the desktop one: page width, anchored at the page origin,
     pulled up by the phone header's height (68 at 393). Its glow is stronger and
     tighter than the desktop's: 44% opacity under a 125px blur, not 22%/150.

     My first attempt squeezed the *desktop* SVG into a 366x494 box at x=239, which
     is why it read as a small smudge at the right edge. Those numbers came from
     `get_metadata`, and they are the bounding box of the **rotated** node
     (285x329 rotated 42.5deg) — exactly the trap SKILL.md flags. The flattened SVG
     is the authority; the inspector's box for a rotated vector is not. */
  .sec-insights-hero::before {
    top: calc(-1 * var(--m68));
    left: 0;
    right: auto;
    width: 100%;
    height: var(--m964);
    background-image: url('/assets/resources/insights/hero/hero-wash-mobile.svg');
    background-size: 100% 100%;
  }

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

  /* 11 = the frame's H1 top (224) minus the eyebrow line box's bottom (195+18),
     the same half-leading correction as the padding above. */
  .insights-hero__head {
    width: auto;
    gap: var(--m11);
  }

  /* Mono Medium 12/18 with 0.48px tracking (0.04em) — the desktop eyebrow is
     12/20 untracked, so both values change here. */
  .insights-hero__crumbs {
    gap: var(--m12);
    font-size: var(--m12);
    line-height: var(--m18);
    letter-spacing: 0.04em;
  }

  /* The phone frame's eyebrow is the single word INSIGHTS (tag instance
     6201:95136) — no RESOURCES, no hairline. The crumb trail is desktop-only. */
  .insights-hero__crumbs > :not(:last-child) {
    display: none;
  }

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

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