/* ============================================================================
   CSI Key Visual — R4.1
   ----------------------------------------------------------------------------
   One circular key visual per detail-page hero.

   The art ships as a square image whose corners are fully transparent (the disc
   is inset 124/2048 of the frame), so `drop-shadow` follows the circle rather
   than the bounding box and no clipping or border-radius is needed.

   Measured before writing this file: every disc edge sits at luminance
   0.04–0.16, and the five dark heroes paint at 0.05–0.13. On those pages the
   disc would dissolve into the background, so `--on-dark` carries its own
   separation. The six light heroes paint at 0.97–0.99 and only need grounding.

   Layout rule: the hero's existing children are moved into `.kv-hero__text`
   untouched, so each page renders its hero exactly as before and the visual is
   added beside it. Nothing here restyles existing hero content.
   ========================================================================== */

.kv-figure {
  margin: 0;
  min-width: 0;
}

.kv-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.kv-figure--on-dark img {
  filter:
    drop-shadow(0 0 34px rgba(34, 211, 238, 0.22))
    drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}

.kv-figure--on-light img {
  filter: drop-shadow(0 16px 30px rgba(11, 27, 51, 0.20));
}

/* Two-column hero from 900px up: copy left, key visual right. */
@media (min-width: 900px) {
  .kv-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 330px);
    column-gap: 44px;
    align-items: center;
  }

  .kv-hero__text {
    min-width: 0;
  }
}

/* Below 900px the hero stacks: copy first, visual after it. Capped so it never
   dominates a phone screen. */
@media (max-width: 899px) {
  .kv-figure {
    max-width: 288px;
    margin: 24px auto 0;
  }
}

/* Two heroes already fill their second column with real content, so the visual
   sits above that content instead of taking a column of its own:
   - .hero-side  = dashboard's operations board
   - .kv         = the AI phone page's three-step call-flow diagram */
.hero-side > .kv-figure,
.kv > .kv-figure {
  max-width: 232px;
  margin: 0 auto 18px;
}