/* ============================================================
   VrHeroSection — Hero for the VR (Virtual Receptionists) page

   Figma node 6237:2839. See VrHeroSection.figma.md.

   Layout: 6-column grid inside a wide-container wrapper (matches
   HybridHeroSection / AirHeroSection). Everything (eyebrow → H1 →
   body → CTAs → advantages) lives in the left content column (col 3);
   the visual card sits in col 4 and bleeds to the wide-container edge.

   Column template:
     [gutter] [spacer 32px] [1fr] [1fr] [spacer 32px] [gutter]
   The gutter columns collapse once the viewport is < 1024px + gutters.
   ============================================================ */


/* ---- Outer section ---------------------------------------- */

.vr-hero {
  position:       relative;
  display:        flex;
  flex-direction: column;
  gap:            4rem;          /* 64px — between the hero grid and the carousel */
  width:          100%;
  background:     var(--background);
  padding-top:    8rem;          /* 128px — Figma pt-128px */
  padding-bottom: 4rem;          /* 64px */
  font-family:    var(--font-family-default);
  box-sizing:     border-box;
  overflow:       hidden;
}


/* ---- Content wrapper -------------------------------------- */

.vr-hero__wrap {
  width:      100%;
  max-width:  1480px;   /* wide container */
  padding:    0 48px;   /* wide container padding */
  margin:     0 auto;
  box-sizing: border-box;
}


/* ---- Grid ------------------------------------------------- */

.vr-hero__grid {
  display:               grid;
  grid-template-columns: clamp(0px, calc((100% - 1024px) / 2 - 32px), 148px)
                         32px
                         1fr
                         1fr
                         32px
                         clamp(0px, calc((100% - 1024px) / 2 - 32px), 148px);
  column-gap:            0;
  align-items:           start;
}


/* ---- Left column ------------------------------------------ */

.vr-hero__left {
  grid-column:    3;
  display:        flex;
  flex-direction: column;
  gap:            6rem;               /* 96px — between intro block and advantages */
  padding:        1rem 2rem 2rem 0;   /* pt-16 pr-32 pb-32 pl-0 */
  margin-right:   0.5rem;             /* 8px — half of 16px inner gap */
  min-width:      0;
  box-sizing:     border-box;
}

/* Eyebrow + H1 + body + actions, stacked with 32px between heading and cta */
.vr-hero__intro {
  display:        flex;
  flex-direction: column;
  gap:            2rem;               /* 32px */
}

.vr-hero__heading {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;             /* 24px — eyebrow → H1 */
}

.vr-hero__cta {
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;            /* 36px — body → actions */
}


/* ---- Actions ---------------------------------------------- */

.vr-hero__actions {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--spacing-3);      /* 12px */
}


/* ---- Advantages list -------------------------------------- */

.vr-hero__advantages {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-3);    /* 12px */
}

.vr-hero__advantage {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.vr-hero__advantage-text {
  margin:      0;
  font-size:   var(--font-size-base);  /* 16px */
  line-height: var(--line-height-base);
  color:       var(--foreground);
  white-space: nowrap;
}


/* ---- Right card (bleeds to wide-container edge) ----------- */

.vr-hero__card {
  grid-column:   4 / 7;
  margin-left:   0.5rem;               /* 8px — half of 16px inner gap */
  padding:       1rem;                 /* 16px — Figma p-16px */
  background:    var(--card);
  border-radius: var(--radius-lg);     /* 24px */
  overflow:      hidden;
  box-sizing:    border-box;
}

/* Positioning context for the 3-layer visual composite (see the file-level
   comment in VrHeroSection.tsx). Layer 1 (base image) sits in normal flow;
   layers 2/3 are `position: absolute` on top of it. `container-type: size`
   lets those layers size themselves in `cqmin` — a % of this box's smaller
   dimension — so they scale with the card instead of Figma's fixed export
   sizes (matches the AirCustomizeSection / VrCustomizeSection convention).
   A `size` container can't take its size from its children (that's the
   point of size containment), so `aspect-ratio` lives here now — moved off
   `.vr-hero__visual`/`-placeholder` below, which just fill it — otherwise
   this box has no height to size cqmin against and collapses to 0 (same
   pitfall as `.vr-customize__viz`, see VrCustomizeSection.css). */
.vr-hero__visual-stack {
  position:       relative;
  width:          100%;
  aspect-ratio:   1 / 1;               /* always square */
  container-type: size;
}

.vr-hero__visual {
  display:       block;
  width:         100%;
  height:        100%;
  object-fit:    cover;
  border-radius: 12px;
  border:        0.5px solid rgba(40, 40, 37, 0.2);
  box-sizing:    border-box;
}

/* Placeholder for layer 1 — only renders if `visualSrc` is explicitly
   cleared (e.g. an empty Webflow field); the component defaults it to the
   exported base image. */
.vr-hero__visual-placeholder {
  width:         100%;
  height:        100%;
  /* Light-blue wash approximating the collage background, so the layout reads
     correctly if the base image URL is ever missing. */
  background:    linear-gradient(180deg, rgba(89, 183, 217, 0.25) 0%, rgba(89, 183, 217, 0.35) 100%), var(--secondary);
  border-radius: 12px;
  border:        0.5px solid rgba(40, 40, 37, 0.2);
  box-sizing:    border-box;
}


/* ---- Layer 2: avatar video ---------------------------------
   Figma node 8071:4750. Centered circle, 313px of the 652px base image
   (48.01%) → 48.01cqmin. Border + outer glow sized off the same 652px
   reference: glow blur 192px → 29.45cqmin.

   The white ring (6px → 0.92cqmin) is a *separate* element layered after
   the video, not a shadow on this frame: an inset box-shadow here would be
   part of this box's own background/border paint layer, which sits *under*
   normal children — the full-bleed video would completely cover it. Figma's
   own source hits the same issue and solves it the same way (see the
   avatar-ring rule below). */

.vr-hero__avatar {
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  width:         48.01cqmin;
  aspect-ratio:  1 / 1;
  border-radius: var(--radius-full);
  border:        0.5px solid rgba(40, 40, 37, 0.2);
  box-shadow:    0 0 29.45cqmin 0 var(--color-brand-blue-300);
  overflow:      hidden;
  box-sizing:    border-box;
}

.vr-hero__avatar-video {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Painted after the video in DOM order, so it renders on top. */
.vr-hero__avatar-ring {
  position:       absolute;
  inset:          0;
  border-radius:  inherit;
  box-shadow:     inset 0 0 0 0.92cqmin var(--card);
  pointer-events: none;
}


/* ---- Layer 3: calendar window -------------------------------
   Pinned to the top-right corner. Width only, in cqmin off the same 652px
   reference as the other two layers (334px → 51.23%); height is `auto` so
   the SVG keeps its own (non-square, 334×384) aspect ratio — the glow
   around the calendar card is baked into the SVG itself. */

.vr-hero__calendar {
  position: absolute;
  top:      0;
  right:    0;
  width:    51.23cqmin;
  height:   auto;
  display:  block;
}


/* ============================================================
   Tablet (≤991px) — collapse to stacked layout
   ============================================================ */

@media (max-width: 991px) {
  .vr-hero {
    padding-top:    4.5rem;            /* 72px */
    padding-bottom: 4rem;
  }

  .vr-hero__wrap {
    padding: 0 60px;
  }

  .vr-hero__grid {
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    gap:            2.5rem;            /* block → card */
  }

  .vr-hero__left {
    gap:          4rem;               /* 64px intro → advantages */
    padding:      0;
    margin-right: 0;
  }

  .vr-hero__card {
    margin-left:  -16px;
    margin-right: -16px;
  }
}


/* ============================================================
   Mobile (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .vr-hero__wrap {
    padding: 0 2rem;
  }

  .vr-hero__card {
    margin-left:  -1rem;
    margin-right: -1rem;
    padding:      12px;
  }

  .vr-hero__advantage-text {
    white-space: normal;
  }
}


/* ============================================================
   Portrait mobile (≤479px) — H1 holds 36px via
   .page-h1--no-portrait-shrink (set in VrHeroSection.tsx)
   ============================================================ */

@media (max-width: 479px) {
  .vr-hero {
    padding-top: 4.5rem;
  }

  .vr-hero__left {
    gap: 2rem;                        /* 32px intro → advantages */
  }
}

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

/* ============================================================
   Eyebrow — icon + label kicker. See Eyebrow.tsx.
   ============================================================ */

.eyebrow {
  display:      inline-flex;
  align-items:  center;
  gap:          0.5rem;            /* 8px */
  height:       36px;
  padding:      5px 0;
  width:        fit-content;       /* never stretch in a column-flex parent */
  font-size:    var(--font-size-sm);
  line-height:  var(--line-height-sm);
  font-weight:  var(--font-weight-regular);
  color:        var(--muted-foreground);
  white-space:  nowrap;
  box-sizing:   border-box;
}

.eyebrow[data-variant="active"] {
  color:       var(--foreground);
  font-weight: var(--font-weight-medium);
}