/* ==========================================================================
   Overlays: hero slider, gallery lightbox (the menu drawer is in chrome.css).
   Split out of components.css (keep it linked right after it, so the cascade
   order of these rules relative to pages.css / inner.css is unchanged).
   ========================================================================== */

/* ==========================================================================
   Hero slider
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 34rem;
  height: 72vh;
  height: 72svh;
  overflow: hidden;
  background: var(--maroon);
  color: var(--on-maroon);
  touch-action: pan-y; /* vertical scroll stays native; horizontal swipes reach the slider */
}
/* No slides: a plain maroon panel with the texts (no photo, no scrim, no controls). */
.hero.hero--empty { height: auto; min-height: 26rem; max-height: none; }
.hero.hero--empty .hero__scrim { display: none; }
@media (min-width: 900px) {
  .hero { height: 88vh; height: 88svh; min-height: 38rem; max-height: 62rem; }
}

.hero__slides,
.hero__slide,
.hero__scrim { position: absolute; inset: 0; }

.hero__slide {
  margin: 0;
  opacity: 0;
  transition: opacity var(--dur-hero-fade) var(--ease-in-out);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 60% 40%;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__slide.is-active img { animation: hero-zoom var(--dur-hero-slide) linear forwards; }
  .hero.is-paused .hero__slide.is-active img { animation-play-state: paused; }
}
@keyframes hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

.hero__scrim {
  background:
    var(--scrim-hero),
    linear-gradient(0deg, rgb(46 16 7 / 0.55) 0%, rgb(46 16 7 / 0) 45%);
}

.hero__content {
  position: relative;
  padding-bottom: clamp(6.5rem, 5rem + 4vw, 8.5rem);
}
.hero__eyebrow { color: var(--saffron-on-maroon); }
.hero__eyebrow.eyebrow--rule::before { background: var(--saffron-on-maroon); }
.hero__title {
  margin-top: var(--space-4);
  max-width: 14ch;
  font-size: calc(var(--text-display) * 0.86);
  font-weight: var(--weight-semibold);
  line-height: 1.02;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-maroon);
  text-wrap: balance;
}
.hero__deck {
  margin-top: var(--space-5);
  max-width: 36rem;
  font-size: var(--text-lead);
  line-height: 1.6;
  color: rgb(250 246 238 / 0.86);
}
.hero__cta { margin-top: var(--space-6); }

/* Gentle entrance for hero copy */
@media (prefers-reduced-motion: no-preference) {
  .hero__content > * { animation: hero-rise 1s var(--ease-out) both; }
  .hero__content > :nth-child(2) { animation-delay: 120ms; }
  .hero__content > :nth-child(3) { animation-delay: 240ms; }
  .hero__content > :nth-child(4) { animation-delay: 360ms; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.hero__controls {
  position: absolute;
  inset: auto 0 clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem) 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}
/* Below 900px the floating WhatsApp button sits in the bottom-right corner, where the pause button would be:
   keep the controls clear of it (the solid header pushes the hero down, so the two met on phone-height viewports). */
@media (max-width: 899px) {
  .hero__controls { padding-right: calc(var(--gutter) + 4rem); }
}
.hero__caption {
  display: none;
  align-items: baseline;
  gap: var(--space-3);
  margin-right: auto;
  font-size: var(--text-small);
  color: rgb(250 246 238 / 0.8);
}
@media (min-width: 640px) { .hero__caption { display: inline-flex; } }
.hero__count {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--saffron-on-maroon);
}
.hero__dots { display: flex; }
.hero__dot {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.75rem;
}
.hero__dot-bar {
  position: relative;
  width: 1.5rem;
  height: 2px;
  overflow: hidden;
  background: rgb(250 246 238 / 0.4);
}
.hero__dot-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--saffron-on-maroon);
  transform: scaleX(0);
  transform-origin: left;
}
.hero__dot:hover .hero__dot-bar { background: rgb(250 246 238 / 0.7); }
.hero__dot.is-active .hero__dot-bar::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .hero.is-playing .hero__dot.is-active .hero__dot-bar::after {
    animation: hero-progress 6500ms linear both;
  }
  .hero.is-paused .hero__dot.is-active .hero__dot-bar::after { animation-play-state: paused; }
}
@keyframes hero-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.hero__toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(250 246 238 / 0.35);
  border-radius: var(--radius-round);
  color: var(--on-maroon);
  transition: border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.hero__toggle:hover { border-color: var(--saffron-on-maroon); color: var(--saffron-on-maroon); }
.hero__icon-play { display: none; }
.hero.is-paused .hero__icon-play { display: block; }
.hero.is-paused .hero__icon-pause { display: none; }

/* ==========================================================================
   Lightbox (gallery)
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  place-items: center;
  padding: clamp(4rem, 3rem + 3vw, 5rem) var(--space-4) clamp(5.5rem, 4rem + 3vw, 5rem);
  color: var(--on-maroon);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.lightbox.is-open { opacity: 1; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox__stage {
  position: relative;
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  max-width: min(100%, 90rem);
  margin: 0;
  touch-action: none; /* modal: every swipe (left/right/down) reaches site.js; pan-y made the browser cancel swipe-down */
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100svh - 11rem);
  width: auto;
  height: auto;
  border-radius: var(--radius-1);
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.lightbox.is-loading .lightbox__img { opacity: 0; transform: scale(0.99); }
.lightbox__caption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  font-size: var(--text-small);
  color: var(--on-maroon-muted);
}
.lightbox__count {
  flex: none;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--saffron-on-maroon);
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgb(250 246 238 / 0.25);
  border-radius: var(--radius-round);
  color: var(--on-maroon);
  transition: border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}
.lightbox__btn:hover { border-color: var(--saffron-on-maroon); color: var(--saffron-on-maroon); }
.lightbox__close { top: var(--space-4); right: var(--space-4); }
.lightbox__prev,
.lightbox__next { bottom: var(--space-5); }
.lightbox__prev { left: calc(50% - 3.5rem); }
.lightbox__next { right: calc(50% - 3.5rem); }
@media (min-width: 900px) {
  .lightbox { padding-inline: 6rem; }
  .lightbox__prev,
  .lightbox__next { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox__prev { left: var(--space-6); }
  .lightbox__next { right: var(--space-6); }
}