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