/* ==========================================================================
   KOBIL — Resources/Insights — Article detail
   Figma 6201:91705 (desktop 1440) · 6201:92005 (phone 393)

   Rebuilt from the Aug-2026 frames. The previous version came from
   5590:76041 / 5609:77629 and shared little with them: every value was hardcoded
   in px, the glow was a hand-tuned radial-gradient standing in for the frame's
   vector, and the head was a 2x2 grid that cannot express the frame's layout
   (see `__head` below). Values are `--wN` / `--mN` throughout, so the page is a
   proportional zoom of its frame.

   Frame geometry, desktop: header 100 tall, head block at y=233, white card
   491..3352 full-bleed, reading column 832 centred, footer at 3425.
   Phone: header 68 (frame draws 76 — see the note in insights/hero.css), head at
   y=170, card 551..4151 full-bleed, column 361 inset 16.
   ========================================================================== */

.sec-insights-detail {
  position: relative;
  /* 133 = the frame's eyebrow line box (y=233) minus the header's height (100). */
  padding-top: var(--w133);
  /* The glow is exactly the page width, so this is a guard rather than a fix —
     and `clip` rather than `hidden` so the upward bleed past the section's top
     edge survives (the two axes cannot mix `hidden` with `visible`; they can mix
     `clip`). Deliberately NO `isolation: isolate`: isolating would make this a
     stacking context and trap the `z-index: -1` glow inside it, which — because
     the section is `position: relative` — would then paint the whole subtree in
     the positioned layer, i.e. over the white card's background. */
  overflow-x: clip;
  overflow-y: visible;
}

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

   This is the list page's asset, reused deliberately. The detail frame has its own
   vector node, but it is the same shape at the same x and width, 4.4px higher and
   3% shorter — and under a 150px blur at 22% that is invisible. Measured rather
   than assumed: sampling both frame renders on an 8x7 grid over the whole header
   band, the blue-minus-red tint of the two is identical to within 1 unit.

   Reusing it also sidesteps a real trap. `get_design_context` hands back the
   vector in its own *unrotated* local space (1572x1504) plus a stretched
   destination box — Figma's codegen does not flatten the rotation, so placing that
   export directly distorts the shape. `detail-wash-desktop.svg`/`-mobile.svg` were
   exactly that export, which is why the previous implementation gave up on them
   and hand-tuned a radial-gradient instead. The list page's asset is the
   *frame-space* flattening: path coordinates already in frame coordinates, canvas
   anchored at the page origin, hence the pull-up by exactly the header's height. */
.sec-insights-detail::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;
}

/* ---- Head: two columns, bottom-aligned -------------------------------------
   Not a grid, and that is the whole point. The frame's two columns are
   independent stacks that share a baseline at the bottom: left is
   crumbs(20) + 16 + H1(142) = 178 starting at 233; right is meta(20) + 27 +
   lead(92) = 139 starting at 272. Both end at 411. A 2x2 grid forces the two
   first rows to share a row box, which would drag the meta row up to y=233 —
   the previous version's `grid-template-areas` did exactly that. Two flex
   columns with `align-items: flex-end` express it directly.

   The phone frame stacks the same five pieces in a different order — crumbs, H1,
   lead, hairline, meta — which is why `__meta` carries an `order` here rather
   than sitting first in the DOM: source order is the phone's, desktop hoists. */

.insights-detail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--w72);
  padding: 0 var(--w100);
}

.insights-detail__head-main {
  display: flex;
  flex-direction: column;
  gap: var(--w16);
  width: var(--w676);
  flex: 0 0 auto;
}

/* `RESOURCES | INSIGHTS` — IBM Plex Mono Medium 12/20, System/70%. Unlike the
   list page's phone frame, the detail phone frame keeps both crumbs. */
.insights-detail__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(--w20);
  text-transform: uppercase;
  color: var(--navy-70);
}

/* The hairline between crumbs, and between date and Share.
   The frame draws a 0.5px stroke; solving the rendered ink against the page
   background gives (85, 99, 124) — System/70% (#586680) at half coverage. A 1px
   line at 0.5 opacity carries the same ink and stays crisp at every width. */
.insights-detail__crumb-sep {
  flex: 0 0 auto;
  width: 1px;
  height: var(--w10);
  background: var(--navy-70);
  opacity: 0.5;
}

/* Instrument Serif 55/1.3 — note 55, not the list page's 56. */
.insights-detail__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--w55);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--navy);
}

.insights-detail__head-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--w27);
  width: var(--w492);
  flex: 0 0 auto;
}

.insights-detail__meta {
  order: -1;
  display: flex;
  align-items: center;
  gap: var(--w16);
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--navy-80);
}

.insights-detail__share {
  display: inline-flex;
  align-items: center;
  gap: var(--w2);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.insights-detail__share:hover {
  color: var(--blue);
}

.insights-detail__share img {
  display: block;
  width: var(--w18);
  height: var(--w18);
}

/* Phone-only: the frame puts a full-width rule between the lead and the meta
   row. The desktop frame has no divider at all. */
.insights-detail__rule {
  display: none;
}

.insights-detail__lead {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-80);
}

/* ---- White card ------------------------------------------------------------
   Full-bleed (sampled: row y=700 of the frame render is #ffffff from x=0 to
   1439, and the column at x=720 turns white at exactly y=491), 80 under the head,
   48 of padding. The side inset lives on `__head` rather than on the section so
   the card needs no negative-margin break-out.

   NO bottom margin: the card runs straight into the footer. The frame does put 73
   between the two and that is what used to be here, but it read as a stray band of
   page background under the article — content owner asked for the two to meet. */

.insights-detail__card {
  margin: var(--w80) 0 0;
  padding: var(--w48) 0;
  background: var(--white);
}

.insights-detail__inner {
  display: flex;
  flex-direction: column;
  gap: var(--w32);
  width: var(--w832);
  margin: 0 auto;
}

/* 830x468 in the frame, centred — as an aspect ratio rather than fixed pixels so
   the cover scales with the column. No `width`/`height` attributes on the img;
   this box fixes the geometry. Radius 20: the render's corner insets, corrected
   for the ~1px antialiasing bias of "first non-white pixel", trace r=20 (15, 12,
   10, 9, 8 …) — r=18 would start at 13.8. Unlike the list card, the detail cover
   carries no blue overlay. */
.insights-detail__media {
  position: relative;
  width: 100%;
  aspect-ratio: 830 / 468;
  border-radius: var(--w20);
  overflow: hidden;
}

.insights-detail__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.insights-detail__content {
  display: flex;
  flex-direction: column;
  gap: var(--w16);
}

/* Instrument Sans SemiBold 14/20 uppercase, System/65% — *not* the mono the list
   card uses for its meta line. The dots are System/70%: the darkest pixels in the
   frame's tag band sit exactly at the dot coordinates, at #586680, while the
   glyphs sit at #7B89A2. */
.insights-detail__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--w6);
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 600;
  line-height: var(--w20);
  text-transform: uppercase;
  color: var(--navy-70);
}

.insights-detail__tags > span {
  display: inline-flex;
  align-items: center;
  gap: var(--w6);
}

.insights-detail__tag-dot {
  flex: 0 0 auto;
  width: var(--w4);
  height: var(--w4);
  border-radius: 50%;
  background: var(--navy-70);
}

/* ---- The article body -----------------------------------------------------
   Body/Desktop-Mobile/Large — Instrument Sans 18/26, System/80% — measured off the
   frame as well as read from it: the render's line ink repeats every 26px.

   Everything *between* blocks is a design-system decision rather than a frame
   value, and deliberately so: the frame's body is a single flattened text node
   containing the whole article as one string, so it specifies no paragraph gap and
   no heading treatment. The one gap it does give is the card's own H2 to the text
   below it, 16, which is reused here for "heading to whatever follows". Headings
   take the frame's H2 style (Title/Desktop/Title 1, SemiBold 24/32, System/100%,
   capped at the 595 the frame gives that node); h3/h4 step down from it.

   Real content across all 75 articles uses: paragraph, list/ul, list/ol, h2, h3,
   h4 and horizontalrule — all covered below. */

.insights-detail__card .rich-text {
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-80);
}

.insights-detail__card .rich-text > * {
  margin: 0;
}

.insights-detail__card .rich-text > * + * {
  margin-top: var(--w26);
}

.insights-detail__card .rich-text h2 {
  max-width: var(--w595);
  font-size: var(--w24);
  font-weight: 600;
  line-height: var(--w32);
  color: var(--navy);
}

.insights-detail__card .rich-text h3,
.insights-detail__card .rich-text h4,
.insights-detail__card .rich-text h5,
.insights-detail__card .rich-text h6 {
  font-size: var(--w20);
  font-weight: 600;
  line-height: var(--w28);
  color: var(--navy);
}

.insights-detail__card .rich-text > h2 + *,
.insights-detail__card .rich-text > h3 + *,
.insights-detail__card .rich-text > h4 + *,
.insights-detail__card .rich-text > h5 + *,
.insights-detail__card .rich-text > h6 + * {
  margin-top: var(--w16);
}

.insights-detail__card .rich-text > * + h2 {
  margin-top: var(--w40);
}

.insights-detail__card .rich-text > * + h3,
.insights-detail__card .rich-text > * + h4,
.insights-detail__card .rich-text > * + h5,
.insights-detail__card .rich-text > * + h6 {
  margin-top: var(--w32);
}

.insights-detail__card .rich-text a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: var(--w3);
}

.insights-detail__card .rich-text strong,
.insights-detail__card .rich-text b {
  font-weight: 600;
}

.insights-detail__card .rich-text ul,
.insights-detail__card .rich-text ol {
  padding-left: var(--w24);
}

.insights-detail__card .rich-text ul {
  list-style: disc;
}

.insights-detail__card .rich-text ol {
  list-style: decimal;
}

.insights-detail__card .rich-text li + li {
  margin-top: var(--w8);
}

.insights-detail__card .rich-text hr {
  height: 1px;
  border: 0;
  background: var(--navy-40);
}

.insights-detail__card .rich-text > hr {
  margin-top: var(--w40);
}

.insights-detail__card .rich-text > hr + * {
  margin-top: var(--w40);
}

.insights-detail__card .rich-text__figure {
  margin: 0;
}

.insights-detail__card .rich-text__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--w20);
}

.insights-detail__card .rich-text__figure figcaption {
  margin-top: var(--w12);
  font-size: var(--w14);
  line-height: var(--w20);
  color: var(--navy-70);
}

/* The press/legal trailer. The frame gives it 483 of the column's 832 — and no
   article carries one yet: `trailer` is empty on all 75, so this renders only
   once an editor fills it in. */
.insights-detail__trailer {
  max-width: var(--w483);
}

/* ---- Phone (Figma 6201:92005) ------------------------------------------- */
@media (max-width: 768px) {
  .sec-insights-detail {
    /* 102 = the frame's crumb line box (y=170) minus the phone header (68).
       No half-leading correction is needed here, unlike the list page: this
       frame's crumb row is an ordinary 18-tall line box, not a trimmed cap box. */
    padding-top: var(--m102);
  }

  /* The phone has its own vector (6201:92006) — 44% under a 125px blur, against
     the desktop's 22%/150 — and the list page's phone asset is reused for the same
     reason and with the same check: sampled across the header band the two frames'
     tint agrees to within 3 units, and the 964-tall canvas already reaches past
     this page's card top (551) where the list's stopped at 456. */
  .sec-insights-detail::before {
    top: calc(-1 * var(--m68));
    height: var(--m964);
    background-image: url('/assets/resources/insights/hero/hero-wash-mobile.svg');
  }

  .insights-detail__head {
    flex-direction: column;
    align-items: stretch;
    /* 12 = H1 bottom to lead top; the two inner stacks carry 16 and 20. */
    gap: var(--m12);
    padding: 0 var(--m24);
  }

  .insights-detail__head-main {
    width: auto;
    gap: var(--m16);
  }

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

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

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

  .insights-detail__head-aside {
    width: auto;
    align-items: stretch;
    gap: var(--m20);
  }

  /* Source order is the phone's, so the desktop hoist is simply dropped. */
  .insights-detail__meta {
    order: 0;
    justify-content: space-between;
    gap: 0;
    font-size: var(--m12);
    line-height: var(--m18);
  }

  /* The phone frame's meta row is date at one edge, Share at the other, with
     nothing between them. */
  .insights-detail__meta .insights-detail__crumb-sep {
    display: none;
  }

  .insights-detail__share img {
    width: var(--m18);
    height: var(--m18);
  }

  /* System/60% at half coverage — solving the rendered ink gives (184, 193, 210)
     against #B9C1D1's (185, 193, 209). */
  .insights-detail__rule {
    display: block;
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--navy-60);
    opacity: 0.5;
  }

  .insights-detail__lead {
    font-size: var(--m16);
    line-height: var(--m23);
  }

  .insights-detail__card {
    /* Same as desktop: no gap to the footer (was 12 here). */
    margin: var(--m16) 0 0;
    padding: var(--m16) 0 var(--m24);
  }

  .insights-detail__inner {
    width: auto;
    padding: 0 var(--m16);
    gap: var(--m24);
  }

  .insights-detail__media {
    aspect-ratio: 361 / 204;
    border-radius: var(--m12);
  }

  .insights-detail__content {
    gap: var(--m16);
  }

  /* Inter SemiBold 12/18 with 0.48px tracking — the phone frame names a different
     family from its desktop twin's Instrument Sans, and Inter is already loaded
     here as `--font-ui`, so it is taken at its word rather than normalised. */
  .insights-detail__tags {
    gap: var(--m6);
    font-family: var(--font-ui);
    font-size: var(--m12);
    line-height: var(--m18);
    letter-spacing: 0.04em;
  }

  .insights-detail__tags > span {
    gap: var(--m6);
  }

  .insights-detail__tag-dot {
    width: var(--m3);
    height: var(--m3);
  }

  .insights-detail__card .rich-text {
    font-size: var(--m18);
    line-height: var(--m26);
  }

  .insights-detail__card .rich-text > * + * {
    margin-top: var(--m26);
  }

  .insights-detail__card .rich-text h2 {
    max-width: none;
    font-size: var(--m20);
    line-height: var(--m26);
  }

  .insights-detail__card .rich-text h3,
  .insights-detail__card .rich-text h4,
  .insights-detail__card .rich-text h5,
  .insights-detail__card .rich-text h6 {
    font-size: var(--m18);
    line-height: var(--m24);
  }

  .insights-detail__card .rich-text > h2 + *,
  .insights-detail__card .rich-text > h3 + *,
  .insights-detail__card .rich-text > h4 + *,
  .insights-detail__card .rich-text > h5 + *,
  .insights-detail__card .rich-text > h6 + * {
    margin-top: var(--m16);
  }

  .insights-detail__card .rich-text > * + h2 {
    margin-top: var(--m32);
  }

  .insights-detail__card .rich-text > * + h3,
  .insights-detail__card .rich-text > * + h4,
  .insights-detail__card .rich-text > * + h5,
  .insights-detail__card .rich-text > * + h6 {
    margin-top: var(--m24);
  }

  .insights-detail__card .rich-text ul,
  .insights-detail__card .rich-text ol {
    padding-left: var(--m20);
  }

  .insights-detail__card .rich-text li + li {
    margin-top: var(--m8);
  }

  .insights-detail__card .rich-text > hr,
  .insights-detail__card .rich-text > hr + * {
    margin-top: var(--m32);
  }

  .insights-detail__card .rich-text__figure img {
    border-radius: var(--m12);
  }

  .insights-detail__card .rich-text__figure figcaption {
    margin-top: var(--m8);
    font-size: var(--m12);
    line-height: var(--m18);
  }

  .insights-detail__trailer {
    max-width: none;
  }
}