/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   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;
  }
}

/* ============================================================
   SplitCard — alternating text / visual rows. See SplitCard.tsx.
   ============================================================ */

.split-card {
  background:    var(--card);
  border-radius: var(--radius-lg);
  padding:       0.5rem 0;
  width:         100%;
  box-sizing:    border-box;
  overflow:      hidden;
}


/* ---- Row: text(1fr) | visual(2fr); reverse → 2fr | 1fr ---- */

.split-card__row {
  display:               grid;
  grid-template-columns: 1fr 2fr;
  align-items:           stretch;
}

.split-card__row--reverse {
  grid-template-columns: 2fr 1fr;
}
.split-card__row--reverse .split-card__text   { grid-column: 2; grid-row: 1; }
.split-card__row--reverse .split-card__visual { grid-column: 1; grid-row: 1; }


/* ---- Text column ------------------------------------------ */

.split-card__text {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     flex-start;   /* don't stretch children — buttons keep natural width */
  gap:             2.25rem;      /* 36px */
  padding:         2rem 2rem 2rem 4rem;
  min-width:       0;
  box-sizing:      border-box;
}
.split-card__row--reverse .split-card__text {
  padding: 2rem 4rem 2rem 2rem;
}

/* Step indicator: number circle + muted label */
.split-card__step {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.split-card__step-label {
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color:       var(--muted-foreground);
  white-space: nowrap;
}

.split-card__copy {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-3);   /* 12px */
}
.split-card__title {
  margin:      0;
  font-size:   var(--font-size-2xl);     /* 24px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-2xl);   /* 32px */
  color:       var(--foreground);
}
.split-card__body {
  margin:      0;
  font-size:   var(--font-size-xl);      /* 20px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xl);    /* 28px */
  color:       var(--foreground);
}


/* ---- Visual column + frame -------------------------------- */

.split-card__visual {
  padding:    0.5rem 1rem;
  min-height: 800px;
  min-width:  0;
  box-sizing: border-box;
}
.split-card__visual-frame {
  height:        100%;
  border:        0.5px solid rgba(40, 40, 37, 0.2);
  border-radius: 12px;
  overflow:      hidden;
  box-sizing:    border-box;
}
/* The frame defines the visual's box — the visual fills it. Block visuals
   (grids, tables, placeholders) that want to center shorter content wrap it
   in their own flex container. */
.split-card__visual-frame > * {
  height:     100%;
  box-sizing: border-box;
}
/* An image visual also covers the frame by default. */
.split-card__visual-frame > img {
  display:    block;
  width:      100%;
  object-fit: cover;
}


/* ---- Footer (e.g. bottom CTA) ----------------------------- */

.split-card__footer {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         4rem;
}


/* ============================================================
   Tablet (≤991px) — stack: visual above text
   ============================================================ */

@media (max-width: 991px) {
  .split-card__row,
  .split-card__row--reverse {
    grid-template-columns: 1fr;
  }

  .split-card__visual { order: 1; }
  .split-card__text   { order: 2; }

  .split-card__row--reverse .split-card__text,
  .split-card__row--reverse .split-card__visual { grid-column: unset; grid-row: unset; }

  /* The reversed selector must be repeated here: `.split-card__row--reverse
     .split-card__text` above is two classes to this rule's one, so without it
     reversed rows keep their desktop `2rem 4rem 2rem 2rem` at every width. */
  .split-card__text,
  .split-card__row--reverse .split-card__text {
    padding: 1.5rem 2rem 3rem;
  }

  .split-card__visual {
    min-height: 400px;
  }

  .split-card__footer {
    padding: 2rem;
  }
}


/* ============================================================
   Mobile (≤767px) — smaller heading/body; visual sizes to content
   ============================================================ */

@media (max-width: 767px) {
  .split-card__title {
    font-size:   var(--font-size-xl);   /* 20px */
    line-height: var(--line-height-xl); /* 28px */
  }
  .split-card__body {
    font-size:   var(--font-size-lg);   /* 18px */
    line-height: var(--line-height-lg); /* 28px */
  }
  .split-card__visual {
    min-height: auto;   /* the visual content provides its own mobile height */
  }
}

/* ============================================================
   IconBadge — Small circular icon container
   ============================================================ */

.icon-badge {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           1.625rem;  /* 26px */
  height:          1.625rem;
  border-radius:   var(--radius-full);
  flex-shrink:     0;
  color:           var(--foreground);
}

/* ---- Size ------------------------------------------------- */

.icon-badge[data-size="md"] { width: 2rem; height: 2rem; }  /* 32px */

@media (max-width: 767px) {
  .icon-badge[data-mobile-size="sm"] { width: 1.625rem; height: 1.625rem; }
}


/* ---- Typography ------------------------------------------- */

.icon-badge[data-typography="label"] {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);
}


/* ---- Color variants --------------------------------------- */

.icon-badge[data-variant="card"]        { background: var(--card); }
.icon-badge[data-variant="bg"]          { background: var(--background); }
.icon-badge[data-variant="teal"]        { background: color-mix(in srgb, var(--color-brand-blue-400) 40%, transparent); }
.icon-badge[data-variant="teal-active"] { background: color-mix(in srgb, var(--color-brand-blue-400) 60%, var(--background)); }