/* Red Mammoth — homepage hero banner slider (ui-redesign step 4).
   0 live banners renders no markup at all (see _hero_banner.html), so this
   file only ever has an effect once at least one banner is published.
   Fixed-height section + absolutely-positioned fill for every slide's media:
   the box's size never depends on image/video load, so nothing shifts
   (CLS) regardless of which slide is active or how long its text is.
   Transition is a pure cross-fade (no translateX), so it needs no RTL/LTR
   mirroring of its own -- only the arrow icons and swipe/keyboard mapping
   (handled in js/hero-banner.js) are direction-aware. */

.hero-banner {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--color-navy-light);
  height: clamp(460px, 44vw, 620px);
  margin-bottom: clamp(64px, 12vw, 128px);
}
@media (max-width: 700px) {
  .hero-banner { height: clamp(560px, 128vw, 720px); }
}

.hero-banner__track { position: relative; width: 100%; height: 100% }

.hero-banner__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration-slow) var(--ease-standard);
}
.hero-banner__slide.is-active { opacity: 1; visibility: visible; z-index: 1 }

.hero-banner__media { position: absolute; inset: 0; overflow: hidden; background: var(--color-navy-light) }
.hero-banner__img, .hero-banner__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* the <picture> swaps which image loads at 700px, but can only style the one
   fallback <img> -- so the focal point switches by media query too, off two
   custom properties set inline per banner, matching whichever crop is shown. */
.hero-banner__img { object-position: var(--focal-desktop, 50% 50%) }
@media (max-width: 700px) {
  .hero-banner__img { object-position: var(--focal-mobile, 50% 50%) }
}

/* No overlay/scrim of any kind over the banner artwork, by explicit instruction --
   the owner designs the images so the text is legible on its own. The image
   renders exactly as uploaded; text sits over it with no treatment. */

.hero-banner__content {
  position: relative; z-index: 3; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  /* .hero-banner has no padding of its own (full-bleed media) -- unlike .hero/.cta-banner,
     where the section itself provides the side gutter, this section has to carry it instead. */
  padding: clamp(20px, 4vw, 40px);
}
.hero-banner__eyebrow {
  display: flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: .18em;
  color: var(--color-gold); margin: 0 0 20px; font-weight: 500;
}
.hero-banner__title {
  font-family: var(--font-heading); font-weight: 700; color: var(--color-cream);
  font-size: clamp(28px, 4.4vw, 42px); line-height: 1.3; margin: 0 0 20px; max-width: 22ch;
}
.hero-banner__lead { font-size: 17px; line-height: 1.85; color: var(--text-85); max-width: 52ch; margin: 0 0 30px }
.hero-banner__actions { display: flex; flex-wrap: wrap; gap: 14px }

/* entrance stagger (eyebrow/title/lead/actions, ~80ms apart) -- added only by JS
   once per activation and only when the visitor has not asked for reduced motion;
   default state is fully visible so a slide is always correct with JS disabled. */
.hero-banner [data-hero-stagger] { opacity: 1; transform: none }
.hero-banner__slide.is-entering [data-hero-stagger] {
  opacity: 0; animation: heroBannerFadeUp .55s var(--ease-out) both;
}
.hero-banner__slide.is-entering .hero-banner__eyebrow { animation-delay: 0ms }
.hero-banner__slide.is-entering .hero-banner__title { animation-delay: 80ms }
.hero-banner__slide.is-entering .hero-banner__lead { animation-delay: 160ms }
.hero-banner__slide.is-entering .hero-banner__actions { animation-delay: 240ms }
@keyframes heroBannerFadeUp {
  from { opacity: 0; transform: translateY(16px) }
  to { opacity: 1; transform: translateY(0) }
}

.hero-banner__controls {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 14px;
  padding: 0 clamp(20px, 4vw, 40px) 18px;
}
.hero-banner__arrow {
  flex: none; width: var(--tap-target); height: var(--tap-target); border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: rgba(246, 242, 232, .12); color: var(--color-cream); border: var(--border-soft);
  cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.hero-banner__arrow:hover { background: rgba(246, 242, 232, .22) }
.hero-banner__arrow:active { transform: translateY(1px) }
.hero-banner__arrow:focus-visible { outline: none; box-shadow: var(--focus-ring) }
/* mirror the chevrons in RTL so "forward" still points the reading direction */
html[dir="rtl"] .hero-banner__arrow svg { transform: scaleX(-1) }

.hero-banner__dots { display: flex; align-items: center; gap: 8px; margin-inline: 6px }
.hero-banner__dot {
  width: 9px; height: 9px; border-radius: 50%; padding: 0; border: none; cursor: pointer;
  background: rgba(246, 242, 232, .35); transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.hero-banner__dot.is-active { background: var(--color-gold); transform: scale(1.2) }
.hero-banner__dot:focus-visible { outline: none; box-shadow: var(--focus-ring) }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}