/* Hero Banner — Slider mode. All rules scoped under .hero-banner--slider. */
/* NB: .hero-slider itself is NOT height:100% — its height comes from aspect-ratio
   (set below). Only the inner layers fill it 100%. */
.hero-banner--slider .hero-slider__track,
.hero-banner--slider .hero-slider__slide,
.hero-banner--slider .hero-slider__img {
  height: 100%;
}

/* height:auto overrides the theme's .hero-videos{height:100%} so aspect-ratio sizes the box */
.hero-banner--slider .hero-slider {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.hero-banner--slider .hero-slider__track {
  width: 100%;
}

.hero-banner--slider .hero-slider__img {
  width: 100%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  transform: scale(1);
}

/* Slick sets slide width; ensure slides fill height */
.hero-banner--slider .slick-list,
.hero-banner--slider .slick-track {
  height: 100%;
}

.hero-banner--slider .slick-slide>div {
  height: 100%;
}

/* ---- Ken Burns (active slide only) ---- */
.hero-banner--slider .hero-slider__img.is-animating {
  animation-duration: var(--kb-duration, 6000ms);
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.hero-banner--slider .kb-zoom-in.is-animating {
  animation-name: hsKbZoomIn;
}

.hero-banner--slider .kb-zoom-out.is-animating {
  animation-name: hsKbZoomOut;
}

.hero-banner--slider .kb-pan-left.is-animating {
  animation-name: hsKbPanLeft;
}

.hero-banner--slider .kb-pan-right.is-animating {
  animation-name: hsKbPanRight;
}

.hero-banner--slider .kb-zoom-pan.is-animating {
  animation-name: hsKbZoomPan;
}

@keyframes hsKbZoomIn {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(var(--kb-scale, 1.12));
  }
}

@keyframes hsKbZoomOut {
  from {
    transform: scale(var(--kb-scale, 1.12));
  }

  to {
    transform: scale(1);
  }
}

@keyframes hsKbPanLeft {
  from {
    transform: scale(var(--kb-scale, 1.12)) translateX(2%);
  }

  to {
    transform: scale(var(--kb-scale, 1.12)) translateX(-2%);
  }
}

@keyframes hsKbPanRight {
  from {
    transform: scale(var(--kb-scale, 1.12)) translateX(-2%);
  }

  to {
    transform: scale(var(--kb-scale, 1.12)) translateX(2%);
  }
}

@keyframes hsKbZoomPan {
  from {
    transform: scale(1) translateX(1%);
  }

  to {
    transform: scale(var(--kb-scale, 1.12)) translateX(-1%);
  }
}

/* ---- Overlay tint ---- */
.hero-banner--slider .hero-slider__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* ---- Nav arrows ---- */
.hero-banner--slider .slick-arrow {
  z-index: 4;
  color: var(--nav-color, #fff);
}

.hero-banner--slider .slick-arrow span {
  color: var(--nav-color, #fff);
}

.hero-banner--slider[data-arrows="never"] .slick-arrow {
  display: none !important;
}

.hero-banner--slider[data-arrows="always"] .slick-arrow {
  opacity: 1;
}

.hero-banner--slider[data-arrows="hover"] .slick-arrow {
  opacity: 0;
  transition: opacity .3s ease;
}

.hero-banner--slider[data-arrows="hover"]:hover .slick-arrow {
  opacity: 1;
}

/* ---- Indicators (dots / progress bar / progress timer) ---- */
.hero-banner--slider .hero-slider__indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 4;
  text-align: center;
}

.hero-banner--slider[data-indicator-vis="never"] .hero-slider__indicator,
.hero-banner--slider[data-indicator-vis="never"] .slick-dots {
  display: none !important;
}

.hero-banner--slider[data-indicator-vis="always"] .hero-slider__indicator,
.hero-banner--slider[data-indicator-vis="always"] .slick-dots {
  opacity: 1;
}

.hero-banner--slider[data-indicator-vis="hover"] .hero-slider__indicator,
.hero-banner--slider[data-indicator-vis="hover"] .slick-dots {
  opacity: 0;
  transition: opacity .3s ease;
}

.hero-banner--slider[data-indicator-vis="hover"]:hover .hero-slider__indicator,
.hero-banner--slider[data-indicator-vis="hover"]:hover .slick-dots {
  opacity: 1;
}

.hero-banner--slider .slick-dots li button:before {
  color: var(--nav-color, #fff);
}

.hero-banner--slider .hero-slider__progress {
  height: 3px;
  width: 200px;
  max-width: 60%;
  margin: 0 auto;
  background: rgba(255, 255, 255, .3);
  border-radius: 3px;
  overflow: hidden;
}

.hero-banner--slider .hero-slider__progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--nav-color, #fff);
}

.hero-banner--slider .hero-slider__progress.is-running span {
  animation: hsProgress linear forwards;
  animation-duration: var(--timer-duration, 5000ms);
}

@keyframes hsProgress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* ============================================================
   Default layout + typography to MATCH the Figma RSVP mock.
   Scoped entirely to .hero-banner--slider, so the existing
   image/video hero blocks on other pages are untouched.
   Tunable values are exposed as custom properties.
   ============================================================ */
.hero-banner--slider {
  --hs-top: 134px;
  /* space below the fixed navbar (mock: image top y=134) */
  --hs-side: 50px;
  /* mock side margins (image x=50, w=1340 in a 1440 frame) */
  --hs-radius: 0px;
  /* mock hero image has square corners */
  /* override the theme's full-bleed hero defaults */
  height: auto;
  opacity: 1;
  /* theme fades .hero-banner in after 2.2s; not wanted here */
  animation: none;
  padding: var(--hs-top) var(--hs-side) 0;
}

/* drop the theme's left-dark gradient; mock has none (optional overlay field handles tint) */
.hero-banner--slider:before {
  display: none;
}

/* inset, fixed-proportion image band (mock: 1340x660 => aspect ~2.03:1) */
.hero-banner--slider .hero-slider {
  /* --hs-aspect (set inline from the block's "Aspect Ratio" field) overrides the default */
  aspect-ratio: var(--hs-aspect, 1340 / 660);
  border-radius: var(--hs-radius);
}

/* overlay the shared .container/.hero-textarea exactly over the image box */
.hero-banner--slider .container {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--hs-top);
  bottom: 0;
  padding: 0 var(--hs-side);
  display: flex;
  align-items: flex-end;
  /* text sits at the bottom of the image */
  pointer-events: none;
  z-index: 3;
}

.hero-banner--slider .hero-textarea {
  position: static;
  /* override theme absolute positioning */
  left: auto;
  bottom: auto;
  transform: none;
  max-width: 760px;
  pointer-events: auto;
  /* mock: text 149px from image left, ~102px up from image bottom */
  padding: 0 0 102px 149px;
}

/* typography — exact Figma tokens (Manrope Bold, Secondary-Light-grey #FCFAF7) */
.hero-banner--slider .hero-textarea span {
  display: block;
  color: #FCFAF7;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: normal;
  letter-spacing: 0.75px;
  margin-bottom: 9px;
}

.hero-banner--slider .hero-textarea h1 {
  color: #FCFAF7;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 37px;
  line-height: 41px;
  margin-bottom: 0;
}

.hero-banner--slider .hero-textarea a.btn-block {
  margin-top: 24px;
}

/* disable the theme's CSS entrance keyframes (GSAP owns the text entrance);
   keep opacity 1 so the "no animation" case stays visible */
.hero-banner--slider .hero-textarea h1,
.hero-banner--slider .hero-textarea span,
.hero-banner--slider .hero-textarea p,
.hero-banner--slider .hero-textarea a.btn-block {
  animation: none;
  opacity: 1;
}

/* Mobile — matches the Figma mobile mock (375px frame). Sizes use vw so the hero
   scales proportionally across phone widths, clamped so they cap at the desktop
   values for a seamless transition into the >=992px layout. --hs-top is set from
   the real header height by hero-slider.js (not hardcoded here). */
@media (max-width: 991px) {
  .hero-banner--slider {
    /* --hs-side: clamp(16px, 8vw, 50px);        */
    /* mock: 30px @ 375 */
    --hs-side: clamp(16px, 28px, 50px);
  }

  .hero-banner--slider .hero-slider {
    aspect-ratio: var(--hs-aspect-mobile, 314 / 171);
    /* mock: ~1.835:1 */
  }

  .hero-banner--slider .hero-textarea {
    max-width: none;
    /* mock: text ~17px in from the image's left edge, ~25px up from its bottom */
    padding: 0 clamp(14px, 4.5vw, 40px) clamp(16px, 6.5vw, 48px);
  }

  .hero-banner--slider .hero-textarea span {
    /* label / date line */
    font-size: clamp(11px, 3.2vw, 15px);
    /* mock: 13px @ 375 */
    letter-spacing: 0.12em;
    /* mock: ~1.56px */
    margin-bottom: clamp(4px, 1.3vw, 9px);
  }

  .hero-banner--slider .hero-textarea h1 {
    /* heading */
    font-size: clamp(18px, 4.6vw, 37px);
    /* mock: 21px @ 375 */
    line-height: 1.15;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-banner--slider .hero-slider__img.is-animating {
    animation: none !important;
    transform: scale(1) !important;
  }

  .hero-banner--slider .hero-slider__progress span {
    animation: none !important;
  }
}