/* Purpose: Container, band rhythm, the alternating band surfaces, the shared photo-backdrop
   layer and the gold-foil band system. Also the breakpoint ladder that re-scales the layout
   tokens. Mobile first — base values are the smallest viewport, every step overrides upward. */

.shell {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.band {
  position: relative;
  padding: var(--band-pad) 0;
}

/* Alternating surfaces. Every band sat within a few RGB points of the next, so the seams
   vanished; these two alternate down the page. */
.surf-raise {
  background: var(--surf-raise);
}

.surf-glow {
  background: var(--surf-glow), var(--color-bg);
}

.surf-raise-glow {
  background: var(--surf-glow), var(--surf-raise);
}

/* Photo backdrop. Sections that carry a background photograph output it as an <img> with this
   class (so it is an editable ACF image, lazy loaded, with alt handling) rather than a CSS url.
   Each section sets its own opacity and crop; the scrim sits on the section's ::after. */
.band__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.band--photo {
  overflow: hidden;
}

.band--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.band--photo > .shell {
  position: relative;
  z-index: var(--z-content);
}

/* ══ GOLD-FOIL BANDS ═══════════════════════════════════════════════
   Gold marks the moments the page asks for the booking, so the treatment reads as a system
   rather than a one-off. Each band supplies its own photograph; everything else is shared. */
.gold-band {
  position: relative;
  overflow: hidden;
  color: var(--color-dark-ink);
  background: var(--foil);
}

.gold-band .band__media {
  object-position: center 42%;
  opacity: var(--opacity-foil-img);
}

/* Warm gold scrim — keeps the dark copy readable over the photograph. */
.gold-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--scrim-foil);
}

.gold-band > .shell {
  position: relative;
  z-index: var(--z-content);
}

.gold-band h2,
.gold-band h3 {
  color: var(--color-dark-ink);
}

.gold-band p {
  color: var(--color-foil-ink);
}

.gold-band b {
  color: var(--color-dark-ink);
  font-weight: var(--weight-bold);
}

.gold-band .kicker {
  color: var(--color-foil-ink-2);
  border-color: var(--color-foil-line-3);
  background: var(--color-foil-glass);
}

.gold-band .kicker::before {
  background: var(--color-foil-ink-3);
  box-shadow: none;
}

.gold-band .cta {
  background: var(--color-dark-ink);
  color: var(--color-gold-200);
  box-shadow: var(--shadow-cta-dk);
}

.gold-band .cta::after {
  background: var(--sheen-cta-dk);
}

.gold-band .cta:hover {
  box-shadow: var(--shadow-cta-dk-h);
}

@media (min-width: 561px) {
  :root {
    --band-pad: 66px;
    --gutter:   20px;
  }
}

@media (min-width: 821px) {
  :root {
    --band-pad: 82px;
    --gutter:   24px;
  }
}

@media (min-width: 1081px) {
  :root {
    --band-pad: 108px;
  }
}