/* ==========================================================================
   KOBIL — Resources/E-Books — Hero
   Figma 6201:91858 (desktop 1440) · 6201:92539 (phone 393)

   Rebuilt from the Aug-2026 frames. The previous version came from 16411:13448:
   a blue sans "E-BOOKS" eyebrow, a baked-in WebP wash, every value in px. Values
   are `--wN` / `--mN` throughout.

   The head is the same two-column, bottom-aligned shape as the insights and
   case-study lists: crumbs(18) + 16 + H1(146) at x=100 w=597, against the lead
   (69 tall, 492 wide) at x=848, both ending at y=414. Only the breadcrumb text and
   the wash differ.
   ========================================================================== */

.sec-e-books-hero {
  position: relative;
  /* 134 = the frame's crumb line box (y=234) minus the header's height (100) —
     the same as the case-studies list, whose head this mirrors exactly. */
  padding: var(--w134) var(--w100) 0;
  /* `clip`, not `hidden`: `hidden` would make this a scroll container and cut the
     wash's bleed above the section, and the axes cannot mix `hidden` with
     `visible`. No `isolation` — that would trap the `z-index: -1` wash inside this
     positioned section and paint it over the white card below. */
  overflow-x: clip;
  overflow-y: visible;
}

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

   **This page's wash is pink — Secondary/Pink `#CA80F4`.** Not the insights pages'
   `#3EBFFC` and not the case-studies `#1D56EE`. The token comes straight off the
   node, and the render agrees independently: against the page background the tint
   pulls green far harder than red (-9,-25,-1 at y=470), and #CA80F4 predicts exactly
   that ratio (g/r = 2.77 against the measured 2.78) where a cyan wash barely touches
   green and the blue one moves both about equally.

   Delivered as a measured raster rather than the vector, for the reason documented
   at length in `case-studies/hero.css`: Figma exports a rotated vector in its own
   *unrotated* local space with the rotation absent from the payload, so placing that
   export directly distorts it — and this node's geometry (y=111.99, h=750.86) matches
   no other page's, so there was no verified flattening to reuse either.

   So the field was solved out of the frame render: for each 20px cell where the page
   background is visible, take the lightest pixel in the cell (text and chrome only
   darken, so the lightest pixel is background + wash) and solve
   `rendered = bg*(1-a) + #CA80F4*a` for `a` on the red and green channels — blue
   carries no signal here, since #CA80F4's blue is 244 against the background's 252.
   The result is a 72x47 RGBA PNG stretched back with `background-size: 100% 100%`;
   a 150px blur has no detail finer than that.

   The rows below the frame's white card carry a **vertical continuation** of row 23
   (frame-y 460..480, the last row entirely above that card) rather than the horizontal
   interpolation they first shipped with. That first version was measured when the white
   block began at y=494, so every interior cell under it was filled from the two 40px
   side strips — and those sit far from the blob, so they solved to a≈0.01. Unifying the
   three list tops moved the block down to 602, which turned 108px of that dead zone
   into visible page background: the pink collapsed at y=500 and read as stopping short
   of the block. The frame cannot answer what belongs there (its card covers it), so the
   field holds its last measured row instead, which is also what the other two pages do
   — profiled against their live renders, both are at their strongest right where the
   white begins (insights 37,12,0 and case-studies 44,33,3 against the page background
   at y=600), and this page now plateaus into that edge the same way. The blob's own
   centre is near y=487, so a plateau past it is the physically right shape too.
   Everything below 602 is behind the opaque full-bleed block and never seen. */
.sec-e-books-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--w100));
  left: 0;
  width: 100%;
  height: var(--w940);
  background: url('/assets/resources/e-books/hero/hero-wash.png') no-repeat top left / 100% 100%;
  pointer-events: none;
}

.ebk-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--w151);
}

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

/* `RESOURCES | E-BOOKS` — IBM Plex Mono Medium 12/18, System/70%. */
.ebk-hero__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. */
.ebk-hero__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. */
.ebk-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);
}

.ebk-hero__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:92539) ----
   Head at x=24 y=180 w=345: crumbs(18) + 16 + H1(123, three lines of 41) + 12 +
   lead(60, three lines of 20). Both breadcrumbs are kept, as on the case-study
   pages — it is only the insights *list* phone frame that drops the first one. */
@media (max-width: 768px) {
  .sec-e-books-hero {
    /* 112 = the frame's crumb line box (y=180) minus the phone header (68). */
    padding: var(--m112) var(--m24) 0;
  }

  /* The phone vector (6201:92540) is the same shape and size as the case-studies
     phone one, 70px higher — and pink, which the render confirms: (-8,-21,-2) at
     y=430, the same green-dominant ratio. Measured out of this frame's own render
     by the method above, at an 8px cell: a 50x100 PNG, 1.1KB. */
  .sec-e-books-hero::before {
    top: calc(-1 * var(--m68));
    height: var(--m800);
    background-image: url('/assets/resources/e-books/hero/hero-wash-mobile.png');
  }

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

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

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

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

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

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