/* Insights page only. Layout: a featured picture card beside the "Most recent" list, then the topic chips over the card
   grid (.posts, .latest, .pills, .tag and .link are shared, in css/site.css). Every font-size comes from the --t-* tokens
   in site.css; this file sets none. No decorative motion: the featured picture's hover zoom was removed (proposal, 2026-10-22). */
.blog-bar { padding-bottom: 20px; margin-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); }

/* the picture card stretches to the "Most recent" list beside it (8/4 from 1024px), so the row has no empty corner */
.blog-feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; align-items: stretch; }
.blog-feature__card {
  grid-column: 1 / 9; position: relative; display: flex; align-items: flex-end; min-height: clamp(420px, 40vw, 620px);
  border-radius: var(--r-xl); overflow: hidden; background: var(--dark); color: var(--on-dark);
}
.blog-feature__card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the scrim and the text greys are the Midnight / on-dark tokens at the owner's earlier opacities (color-mix keeps them tokens).
   Each color-mix() line follows the same value as plain rgba (Midnight 11 15 20, on-dark 242 245 249) for browsers without
   color-mix (before Chrome 111, Safari 16.2, Firefox 113), which drop the second declaration and keep the first. */
.blog-feature__card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 15, 20, 0.05) 30%, rgba(11, 15, 20, 0.78));
  background: linear-gradient(180deg, color-mix(in srgb, var(--dark) 5%, transparent) 30%, color-mix(in srgb, var(--dark) 78%, transparent));
}
.blog-feature__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(24px, 3vw, 44px); max-width: 720px; }
.blog-feature__body .meta { color: rgba(242, 245, 249, 0.78); color: color-mix(in srgb, var(--on-dark) 78%, transparent); }
.blog-feature__desc { color: rgba(242, 245, 249, 0.82); color: color-mix(in srgb, var(--on-dark) 82%, transparent); }
.blog-recent { grid-column: 9 / 13; }
.blog-recent > .h3 { margin-bottom: 16px; }
/* brand: at most 65 characters per line of running text. 50ch measured 63-67 characters of this copy in Inter (lines.py,
   2026-10-22), so the featured line and the topic note take 46ch (at most 63 measured); the card lines' 46ch is site.css's */
.blog-feature__desc, .blog-topics__note { max-width: 46ch; }
/* a title's hard-hyphenated word ("board-level", "trust-first") never breaks at its hyphen: the build wraps it (insight_title()) */
.blog-nowrap { white-space: nowrap; }

/* [02] Browse by topic: the note, the shared chip row (.pills and .pill, site.css: 44px targets, the 3:1 edge, the pressed
   tick) with the R&D link at its end, kept tight above the grid it filters ([03] drops its top padding). */
.blog-topics { padding-bottom: clamp(40px, 5vw, 72px); }
.blog-topics__note { color: var(--ink-2); margin-bottom: clamp(20px, 2.5vw, 32px); text-wrap: balance; }
.blog-topics__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.blog-topics__row .link { white-space: nowrap; }

@media (max-width: 1023px) {
  .blog-feature__card, .blog-recent { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .blog-feature__card { min-height: clamp(300px, 56vw, 420px); }   /* the first screen below the hero is not one picture */
  /* the text fills the short card, so the scrim is deep from the top (Midnight): the title no longer crosses the light trail */
  .blog-feature__card::after {
    background: linear-gradient(180deg, rgba(11, 15, 20, 0.55), rgba(11, 15, 20, 0.85));
    background: linear-gradient(180deg, color-mix(in srgb, var(--dark) 55%, transparent), color-mix(in srgb, var(--dark) 85%, transparent));
  }
}