/* ============================================================
   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;
  }
}

/* ============================================================
   MOBILE — the caption leaves the image
   Under 700px the 2.32:1 frame is only ~160px tall, so the hero
   switches to a fixed portrait-ish height and the caption drops
   below the media in normal flow. The slider becomes a flex
   column: the track takes the whole declared height and the
   caption follows it, overflowing the box (which is why the
   slider's own overflow has to open up while the track and the
   slides keep clipping the media).
   ============================================================ */
@media (max-width: 700px) {
  .hero-slider {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    height: 68svh;
    min-height: 420px;
    /* The caption sits outside the frame now, so the box can't clip. */
    overflow: visible;
    /* And the bed behind it is the page, not the slide colour. */
    background: transparent;
  }

  /* The clipping moves down a level, so the media still crops. */
  .hero-slider__track {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .hero-slide {
    overflow: hidden;
  }

  /* Out of the frame and into the flow, below the media. */
  .hero-slider__caption {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    max-width: none;
    padding: 16px 20px 0;
    color: #000000;
  }

  .hero-slider__title {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
  }

  .hero-slider__desc {
    font-size: 15px;
    color: #6b6b6b;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  /* Nothing left to keep legible — the caption is on white. */
  .hero-slider__scrim {
    display: none;
  }

  /* Centred on the IMAGE, not on the slider: the track is 68svh tall
     and the caption overflows below it, so half of that is the media's
     own midpoint. A plain top: 50% would measure the whole box. */
  .hero-filter {
    top: 34svh;
    bottom: auto;
    transform: translateY(-50%);
  }
}