/* =====================================================================
   ARTICLE PAGES (/insights/<slug>/), visual round. Loaded after insights-legal.css.
   Cinematic photo hero, wide media moments inside the article (break out under the contents rail,
   which fades while a wide figure passes), large photo cards for related reading.
   Markup is generated by /tmp/vbt-tools/is-gen/insights-img.mjs (idempotent).
   ===================================================================== */

/* ---------- hero: shorter than the service heroes, text first ---------- */
.phero--art { min-height: 78svh; }
.phero--art .phero__title { max-width: 22ch; }
.phero--art .phero__chips time { font-weight: 600; }
@media (max-width: 767px) { .phero--art { min-height: 72svh; } }

/* ---------- wide media moments ---------- */
.art .prose .art__wide { position: relative; z-index: 3; margin: clamp(40px, 5vw, 64px) 0; }
@media (min-width: 1101px) {
  /* span the whole .wrap (prose column + gap + contents rail) */
  .art .prose .art__wide { width: calc(min(100vw, var(--wrap)) - 2 * var(--gut)); max-width: none; }
}
.prose .art__fig.art__wide { aspect-ratio: 21 / 9; border-radius: var(--r); box-shadow: 0 40px 90px -50px rgba(0,0,0,.9); }
.art__wide.art__fig img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; }
.art__fig.art__wide::after { background: linear-gradient(180deg, rgba(7,10,11,0) 55%, rgba(7,10,11,.35)), linear-gradient(90deg, rgba(20,154,157,.10), transparent 40%); }
@media (max-width: 1100px) { .prose .art__fig.art__wide { aspect-ratio: 16 / 9; } }
@media (max-width: 767px) { .prose .art__fig.art__wide { aspect-ratio: 4 / 3; border-radius: var(--r-s); } .art .prose .art__wide { margin: 32px 0; } }

/* collage as a wide moment: three staggered photos in a row on desktop */
.art .prose .art__collage { --u: clamp(40px, 3.6vw, 54px); }
.prose .art__collage .collage__item { margin: 0; }
@media (min-width: 768px) {
  .art__collage.collage--3 { grid-template-columns: 1.25fr 1fr 1fr; }
  .art__collage.collage--3 > .collage__item:nth-child(1) { grid-column: 1; grid-row: 1 / span 7; }
  .art__collage.collage--3 > .collage__item:nth-child(2) { grid-column: 2; grid-row: 2 / span 8; }
  .art__collage.collage--3 > .collage__item:nth-child(3) { grid-column: 3; grid-row: 1 / span 6; }
}

/* contents rail steps aside while a wide figure passes under it */
.art__side { transition: opacity .3s var(--ease), visibility .3s; }
.art__side.is-under { opacity: 0; visibility: hidden; }

/* ---------- related reading: large photo cards ---------- */
.art__rel { margin-top: 36px; gap: 20px; }
.art__rel .pcard--bg { min-height: clamp(420px, 36vw, 520px); }
.art__rel .pcard__body { padding: 28px 28px 30px; }
.art__rel .pcard__body h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; letter-spacing: -.01em; }
.art__rel .card__kicker i { font-style: normal; opacity: .6; margin: 0 4px; }
.art__rel .card__kicker time { font-weight: 600; }
.art__rel .pcard:focus-visible { outline: 2px solid var(--teal-l); outline-offset: 4px; }
@media (min-width: 768px) and (max-width: 1100px) { .art__rel > .pcard:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 380px; } }
@media (max-width: 767px) { .art__rel .pcard--bg { min-height: 380px; } }

@media (prefers-reduced-motion: reduce) {
  .art__side { transition: none; }
  .art__wide.art__fig img { top: 0; height: 100%; }
}