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

/* Tablet AND mobile: 48px. Mobile used to drop to 32px; the owner set 3rem as
   the floor on 2026-10-22, so there is no separate ≤767px step any more. */
@media (max-width: 991px) {
  .banner-section.hp-section {
    --banner-pad-block: 3rem;   /* 48px */
  }
}

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

/* Optional narrow copy column — heading + body capped at 699px, the text width
   of the Figma banner frames (731px "Copy" column minus its 32px right
   padding). Off by default: banners shipped before 2026-10-22 keep the
   shared 800px cap. */
.banner-section[data-copy-width="narrow"] .inline-banner__copy {
  max-width: 43.6875rem;   /* 699px */
}

/* Optional mobile image — the shared card hides the image panel at ≤767px
   (right for the sticky banners, which overlay the page). A static section
   can afford it, so this opt-in stacks it under the copy instead: full card
   width on phones, capped at 420px and centred on wider mobile screens so a
   square panel never dominates. */
@media (max-width: 767px) {
  .banner-section[data-mobile-image="true"] .inline-banner[data-variant="inverted"] {
    grid-template-areas:
      "rail"
      "copy"
      "image";
  }

  /* Button → image: 32px (the card's desktop rhythm) instead of the copy's
     20px mobile bottom padding, so the stacked image doesn't crowd the CTA. */
  .banner-section[data-mobile-image="true"] .inline-banner[data-variant="inverted"] .inline-banner__content {
    padding-bottom: var(--spacing-8);   /* 32px */
  }

  .banner-section[data-mobile-image="true"] .inline-banner[data-variant="inverted"] .inline-banner__img-panel {
    display:      flex;
    width:        100%;
    max-width:    26.25rem;   /* 420px */
    justify-self: center;
  }
}