/* VrBannerSection — Figma node 6237:3518.
   Layout + chrome come entirely from the shared BannerSection / InlineBanner
   (variant "inverted", colorVariant "cyan"). This wrapper adds nothing visual;
   the cyan color scheme lives in InlineBanner.css. */

.vr-banner {
  display: contents;
}

/* Figma 6237:3519 uses a wider, landscape image panel (421×334 — the exported
   chart asset's own natural size) instead of the shared inverted default
   (302px square). Copy is 731px in that exact Figma frame, but that frame is
   a single fixed-width (1384px) snapshot, not a responsive spec.

   Two things must both hold as the row narrows, and they trade off against
   each other:
   - The image should render at up to its natural 421×334 (never upscaled
     past that, never distorted off its aspect ratio).
   - Copy must never drop below 50% of the row — a plain fixed 421px image
     column (the previous version of this fix) leaves copy 100% of whatever
     space is left, which shrank well under half once the row got narrow
     (down to ~22% at 1000px wide).

   `minmax(50%, 1fr) minmax(0, 421px)` gets both: the image track's max is a
   plain length (421px, not `fr`), so a non-flexible track never grows past
   it regardless of leftover space — at wide rows this behaves exactly like
   a fixed 421px column. Only once the row gets tight enough that giving the
   image its full 421px would push copy under its 50% floor does the image
   track actually shrink (down to its own min of 0) to hold that floor. The
   img-panel itself tracks its column 1:1 (`width:100%; max-width:421px`)
   with `aspect-ratio:421/334` still set, so it shrinks in proportion — never
   cropped/squished — right along with the track.

   Applies whenever the image is visible at all — both the desktop row
   (>1200px) and the stacked tablet layout (768–1200px, raised from the
   shared component's usual 991px cutoff specifically for this wider image —
   see InlineBanner.css) — each reads its width from a *different* grid
   (`.inline-banner__intro` desktop-only vs. `.inline-banner[data-variant=
   "inverted"]` itself once stacked), so both need the same override. Below
   768px the shared component hides the image entirely (untouched). */

@media (min-width: 1201px) {
  .vr-banner .inline-banner[data-variant="inverted"] .inline-banner__intro {
    grid-template-columns: minmax(50%, 1fr) minmax(0, 421px);
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .vr-banner .inline-banner[data-variant="inverted"] {
    grid-template-columns: minmax(50%, 1fr) minmax(0, 421px);
  }
}

@media (min-width: 768px) {
  .vr-banner .inline-banner[data-variant="inverted"] .inline-banner__img-panel {
    width:        100%;
    max-width:    421px;
    aspect-ratio: 421 / 334;
  }
}

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


/* ============================================================
   BannerSection — static (non-sticky) promotional banner section.

   Just the section shell + background. All card visuals come from
   the shared InlineBannerCard `inverted` variant (see
   InlineBanner.css → "Inverted variant").
   ============================================================ */

.banner-section {
  background: var(--background, #f5f0e7);
}

/* Figma frame uses 64px block padding (vs the 128px .hp-section default).
   Top/bottom read a per-breakpoint variable so each side can be doubled
   independently via the data-double-* switches below. */
.banner-section.hp-section {
  --banner-pad-block: 4rem;   /* 64px */
  padding-top:    var(--banner-pad-block);
  padding-bottom: var(--banner-pad-block);
}

@media (max-width: 991px) {
  .banner-section.hp-section {
    --banner-pad-block: 3rem;   /* 48px */
  }
}

@media (max-width: 767px) {
  .banner-section.hp-section {
    --banner-pad-block: 2rem;   /* 32px */
  }
}

/* Optional padding switches — double one side, every breakpoint. */
.banner-section.hp-section[data-double-top="true"] {
  padding-top: calc(var(--banner-pad-block) * 2);
}

.banner-section.hp-section[data-double-bottom="true"] {
  padding-bottom: calc(var(--banner-pad-block) * 2);
}