/*
 * Carousel — reusable slider component (hero + future sections)
 * Transitions live here (CSS); carousel.js only manages state/classes.
 * Progressive enhancement: with JS off, the first slide (.is-active) shows.
 */

.carousel {
  position: relative;
}

.carousel__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel__track {
  display: flex;
  width: 100%;
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}

/* ── Fade mode ─────────────────────────────────────────────────────── */

.carousel[data-transition="fade"] .carousel__track {
  display: block;
  position: relative;
}

.carousel[data-transition="fade"] .carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.carousel[data-transition="fade"] .carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Slide mode ────────────────────────────────────────────────────── */

.carousel[data-transition="slide"] .carousel__track {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ── Controls bar (arrows + dots) ──────────────────────────────────── */

/* Prev / dots / next live together in one bottom-centered row, so the arrows
 * sit alongside the dots rather than floating at mid-height over the copy. */
.carousel__controls {
  position: absolute;
  left: 50%;
  bottom: var(--space-8);
  transform: translateX(-50%);
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* ── Arrows ────────────────────────────────────────────────────────── */

.carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-white);
  background: rgba(0, 48, 73, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-full);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.carousel__arrow:hover {
  background: var(--color-verdigris-ink);
  border-color: var(--color-verdigris-ink);
  transform: translateY(-2px);
}

.carousel__arrow:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* ── Dots ──────────────────────────────────────────────────────────── */

.carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
}

.carousel__dot:hover { background: rgba(255, 255, 255, 0.5); }

.carousel__dot.is-active {
  background: var(--color-verdigris);
  border-color: var(--color-verdigris);
  transform: scale(1.15);
}

.carousel__dot:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* ── Hero carousel specifics ───────────────────────────────────────── */

/* The hero base is display:flex; as a carousel the slides own the centering. */
.hero--carousel {
  display: block;
}

.hero--carousel .carousel__viewport {
  min-height: 100svh;
}

/* Give the track height so fade-mode (absolute) slides have a containing box. */
.hero--carousel .carousel__track {
  min-height: 100svh;
}

.hero__slide {
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* When the copy is taller than the viewport (large text / text-zoom), keep it
     from overflowing UP under the fixed header: `safe` falls back to start-align
     instead of clipping the title. Progressive — browsers without `safe` keep
     the plain `center` above. */
  align-items: safe center;
}

/* Scroll hint would collide with the dots — hide it on the carousel. */
.hero--carousel .hero__scroll-hint {
  display: none;
}

/* animations.css hides hero text (opacity:0) for the GSAP intro reveal, but
   that reveal only targets the FIRST slide (querySelector). Keep every other
   slide's text visible — the slide fade/slide transition handles show/hide. */
.hero--carousel .carousel__slide:nth-child(n + 2) .hero__eyebrow,
.hero--carousel .carousel__slide:nth-child(n + 2) .hero__title,
.hero--carousel .carousel__slide:nth-child(n + 2) .hero__subtitle,
.hero--carousel .carousel__slide:nth-child(n + 2) .hero__cta {
  opacity: 1;
}

@media (max-width: 640px) {
  /* Slightly smaller arrows on phones; they're in the bottom control bar and
   * clear of the copy, so they stay visible (alongside swipe + dots). */
  .carousel__arrow { width: 2.5rem; height: 2.5rem; }

  /* Sit the control bar closer to the very bottom edge on phones, giving the
   * copy above it a little more room before it reaches the arrows/dots. */
  .carousel__controls { bottom: var(--space-5); }
}

/* ── Reduced motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .carousel__slide,
  .carousel__track {
    transition: none !important;
  }
}