/* ============================================================
   TTCC — HERO
   Hero slider, the filter pill and its dropdown panels.
   index.html only.
   ============================================================ */

/* ============================================================
   HERO SLIDER
   Full-bleed crossfading slider. Slides, dots and dropdown
   options are built by JS; everything here is presentation.
   ============================================================ */
/* The wrapper owns the side gutter — the same value the top bar uses.
   The slider fills it edge to edge, so the two align by construction
   rather than by two numbers that have to be kept in sync. */
.hero-slider-wrap {
  padding: 0 var(--gutter);
  /* Clears the fixed top bar; no bottom gap, the slider ends the page. */
  padding-top: var(--topbar-h);
}

.hero-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Capped and centred, so a 13" and a 49" screen show the same
     proportions rather than a stretched band. */
  max-width: 2000px;
  /* Fixed ratio, not viewport-derived: the frame's proportions stay
     identical at every width instead of stretching taller on short
     screens or shrinking on tall ones. */
  aspect-ratio: 2.32 / 1;
  margin: 0 auto;
  background: #111111;
}

/* ============================================================
   INTRO — the state the hero opens in, once per page load
   `is-intro` sits on .hero-slider until the sequence runs. It
   holds the frame white and empty: no media, no scrim, no
   caption, no dots — only the pill, which JS has already set to
   its resting "Everything / Everyone" label. Removing the class
   is what plays everything in; the durations below are the ones
   named in the hero config (INTRO_FADE, INTRO_META_DELAY,
   INTRO_META_FADE).
   ============================================================ */
.hero-slider.is-intro {
  background: #ffffff;          /* empty frame reads white, not the slide bed */
}

/* Media fades up over INTRO_FADE. The scale-in is suppressed during the
   intro so the first slide arrives flat rather than mid-zoom. */
.hero-slider.is-intro .hero-slide.is-active {
  opacity: 0;
}

.hero-slider.is-intro .hero-slide.is-active .hero-slide__media {
  transform: none;
  transition: none;
}

.hero-slider.is-intro .hero-slider__scrim,
.hero-slider.is-intro .hero-slider__caption,
.hero-slider.is-intro .hero-slider__dots {
  opacity: 0;
}

/* `is-intro-playing` lasts only for the reveal itself. It carries the
   intro's own timings — 800ms ease-out on the media, and the caption and
   dots trailing 300ms behind over 400ms — so the ordinary 0.9s crossfade
   below is untouched for every later slide change. */
.hero-slider.is-intro-playing .hero-slide.is-active {
  transition: opacity 0.8s ease-out;
}

.hero-slider.is-intro-playing .hero-slider__scrim,
.hero-slider.is-intro-playing .hero-slider__caption,
.hero-slider.is-intro-playing .hero-slider__dots {
  transition: opacity 0.4s ease 0.3s;
}

/* ----- Slides: only one visible, crossfaded ----- */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.4s ease;
}

.hero-slide.is-active .hero-slide__media {
  transform: scale(1);
}

/* ----- Legibility scrim, under the caption ----- */
.hero-slider__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

/* ----- Caption: bottom left ----- */
.hero-slider__caption {
  position: absolute;
  left: 28px;
  bottom: 22px;
  z-index: 2;
  max-width: 620px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;      /* fade IN */
}

.hero-slider__caption.is-out {
  opacity: 0;
  transition: opacity 0.3s ease;      /* fade OUT */
}

.hero-slider__title {
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
}

.hero-slider__desc {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: #ffffff;
}

/* ----- Dots: bottom right ----- */
.hero-slider__dots {
  position: absolute;
  right: 28px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-dot {
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  line-height: 0;
  cursor: pointer;
}

.hero-dot__mark {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.4s ease, width 0.3s ease, height 0.3s ease;
}

.hero-dot.is-active .hero-dot__mark {
  width: 12px;
  height: 12px;
  background: #ffffff;
}

/* ----- Centred filter sentence ----- */
/* Spans the full width and centres the pill inside itself. Anchoring at
   left: 50% instead would cap the pill's shrink-to-fit width at half the
   slider, forcing the sentence to wrap far earlier than its max-width. */
.hero-filter {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  justify-content: center;
  pointer-events: none;         /* only the pill itself is interactive */
}


/* ----- Slider responsive -----
   Above 1200px the wrapper keeps `padding: 0 var(--gutter)`, mirroring
   .topbar__inner — the slider's edges and the top bar's logo/nav sit on
   the same vertical line. At 1200px and below that gutter is dropped and
   the slider runs full-bleed (see the rule further down). */

/* Under 900px the caption tightens. */
@media (max-width: 900px) {
  .hero-slider__dots {
    display: none;
  }

  .hero-slider__caption {
    left: 16px;
    right: 16px;
    bottom: 20px;
    max-width: none;
  }

  .hero-slider__title {
    font-size: 15px;
  }

  .hero-slider__desc {
    font-size: 15px;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

}

/* At 1200px and below the slider goes edge to edge: the wrapper drops its
   side gutter, so the media meets both screen edges. The caption and the
   pill are positioned against the slider, so they keep their insets. */
@media (max-width: 1200px) {
  .hero-slider-wrap {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Reduced motion: keep the crossfade, drop the slow zoom */
@media (prefers-reduced-motion: reduce) {
  .hero-slide__media {
    transform: none !important;
    transition: none !important;
  }
}