/* ============================================================
   VrCustomizeSection — "Every practice handles intake differently."

   The card shell, alternating rows, text column and framed visual
   column all come from the shared SplitCard primitive (see
   SplitCard.css). This file only carries the section background,
   the bare-icon eyebrow override, the muted "Example:" line, and the
   node-flow diagram panels (shared TAB_BG + per-row diagram svg).
   ============================================================ */

.vr-customize {
  background: var(--accent);
}

/* Header uses the shared .section-header convention (section.css);
   .hp-section supplies the 128px padding + 64px header → card gap. */


/* ---- Eyebrow: bare icon + muted label --------------------
   SplitCard renders the eyebrow as <IconBadge variant="bg"> — a filled
   circle. The VR design shows a BARE 16px glyph, so strip the badge box
   for this section only (transparent bg, no fixed circle size). */

.vr-customize .split-card__step .icon-badge {
  width:      auto;
  height:     auto;
  background: transparent;
  color:      var(--foreground);
}


/* ---- Muted "Example:" line -------------------------------- */

.vr-customize__example {
  margin:      0;
  font-size:   var(--font-size-sm);      /* 14px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color:       var(--muted-foreground);
}


/* ---- Node-flow diagram panel ------------------------------
   The panel background (Bg1/2/3, one per row) is applied to the SplitCard
   frame itself via `visualClassName` — same treatment as homepage
   WorkforceSection's `workforce-visual--*` classes, just reused here as-is.
   `.vr-customize__viz` is the transparent cqmin-sizing layer on top: the
   diagram <img> is centered and capped in cqmin off this container's smaller
   dimension (see the Viz component note in VrCustomizeSection.tsx). */

.vr-customize__viz--intake {
  background-image:    url('https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/69c57a3f333f1d87297c9f9f_Bg1.svg');
  background-size:     cover;
  background-position: center;
}

.vr-customize__viz--scripts {
  background-image:    url('https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/69c57a3f2f8ec4852a3caea8_Bg2.svg');
  background-size:     cover;
  background-position: center;
}

.vr-customize__viz--synced {
  background-image:    url('https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/69c57a3fe9e7fc07e2201748_Bg3.svg');
  background-size:     cover;
  background-position: center;
}

.vr-customize__viz {
  width:          100%;
  height:         100%;
  container-type: size;
  display:        flex;
  align-items:    center;
  justify-content: center;
}

/* The diagram <img> itself. `--viz-max-h` (the per-row cqmin value, e.g.
   "53.26cqmin") is set inline per instance — see Viz in
   VrCustomizeSection.tsx. Kept as a custom property rather than a plain
   inline `max-height` so the ≤991px override below can bump every row by a
   flat amount via `calc()`, regardless of each row's own base percentage. */
.vr-customize__viz-img {
  display:   block;
  width:     auto;
  height:    auto;
  max-width: 92%;
  max-height: var(--viz-max-h);
}


/* ============================================================
   Tablet (≤991px) / Mobile (≤767px) — panel height, matching how
   AirCustomizeSection's TabbedCard sizes its own stacked-mode frame
   (`.tabbed-card__stack .tabbed-card__frame`: fixed height, not a
   min-height — 360px tablet, 297px mobile) rather than SplitCard's own
   defaults here (400px min-height tablet, then `min-height: auto` i.e.
   content-sized on mobile):
   - SplitCard's 400px tablet min-height left a lot of empty space around
     the (much shorter, wide-aspect) node-flow diagrams — a fixed, shorter
     360px reads tighter, same as AIR's tablet frame.
   - SplitCard's mobile `min-height: auto` collapses `.vr-customize__viz`
     to 0: it's a `container-type: size` box, so it needs a *definite*
     height to size cqmin against — it can't fall back to its own content
     the way a normal box would (that's also why the panel vanished to a
     1px border before this fix). A fixed 297px, matching AIR's mobile
     frame, fixes that and keeps proportions consistent with tablet.

   Both media queries target `.split-card__visual` directly (not the inner
   `.vr-customize__viz`) so the fixed height applies to the *whole* panel —
   frame + viz both inherit it via their existing height:100% chain, same
   as at desktop. (`.vr-customize .split-card__visual` beats SplitCard's own
   same-breakpoint rules on specificity, so this cleanly overrides both.)

   The diagram itself no longer has hit-the-edges risk at these tighter
   heights: `maxHeight`/`maxWidth` on the <img> (see Viz in
   VrCustomizeSection.tsx) means it's capped by whichever dimension is
   tighter, so it shrinks to fit width instead of overflowing when the
   panel gets this short and comparatively narrow.
   ============================================================ */

@media (max-width: 991px) {
  .vr-customize .split-card__visual {
    height: 360px;
  }

  /* The shorter tablet/mobile panel has room to spare — the diagram's own
     cqmin cap (sized off the 800px desktop-height panel's proportions)
     reads a little small/hard-to-read at these panel heights, so bump
     every row's cap by a flat 10cqmin on top of its own base value. */
  .vr-customize__viz-img {
    max-height: calc(var(--viz-max-h) + 15cqmin);
  }
}

@media (max-width: 767px) {
  .vr-customize .split-card__visual {
    height: 297px;
  }
}