/* Hero carousel (library candidate, T25). Tokens only.
   Base styles = no script: the heading on a dark ground, then every slide stacked in order
   (photo behind its message and button). With script (html.js) the slides sit on top of each
   other behind one fixed heading, and the controls appear. Mobile first: phone, then 768, then 1024. */

.hero-carousel {
  --hc-text: var(--c-white-a90);
  position: relative;
  overflow: hidden;
  background: var(--c-deep-blue);
  color: var(--hc-text);
  --color-heading: var(--c-white);
  --color-text: var(--c-white-a90);
  --color-focus: var(--color-focus-inverse);   /* B6: white focus ring on photos and blue grounds */
  /* Phones and tablets (below 1024 px): the heading and intro sit over the middle of the photo, so a darker
     Deep Blue layer sits behind the text block only, with a soft top edge (sign-off answer 7, T25a). The rest
     of the photo gets the same scrim as on desktop. Built from the token at a fixed strength (CC11: 4.5:1 for
     the intro on rendered pixels). */
  --hc-layer: color-mix(in srgb, var(--c-deep-blue) 58%, transparent);
  --hc-layer-fade: var(--space-24);   /* soft edge above the heading (and to the right of the text on tablets) */
}

/* ── Fixed heading and intro ───────────────────────────────────────────── */
.hero-carousel__head {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: var(--space-16) var(--page-gutter) var(--space-8);
}
.hero-carousel__heading {
  margin: 0;
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-hero);
  color: var(--c-white);
}
.hero-carousel__intro {
  max-width: 34ch;
  margin: var(--space-5) 0 0;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--c-white);
}

/* ── Slides ────────────────────────────────────────────────────────────── */
.hero-carousel__slides { position: relative; }

/* The slide's theme class gives it the theme's tokens; the photo stays the ground. */
.hero-carousel .hero-carousel__slide {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  min-height: min(80svh, 760px);
  padding: var(--space-32) var(--page-gutter) var(--space-10);
  background: none;
  color: var(--hc-text);
  --color-heading: var(--c-white);
  --color-text: var(--c-white-a90);
  --color-focus: var(--color-focus-inverse);
}
.hero-carousel__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--c-deep-blue);
}
.hero-carousel__media picture { display: contents; }
.hero-carousel__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Scrim: protects white type on any photo. */
.hero-carousel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-bottom), var(--scrim-left);
}

.hero-carousel__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  min-width: 0;
}
/* Without script each slide is its own panel: the same text layer sits behind that slide's text (T25a). */
.no-js .hero-carousel__content::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--hc-layer-fade));
  bottom: calc(-1 * var(--space-10));
  left: calc(-1 * var(--page-gutter));
  right: -100vw;   /* the text column is narrower than the panel; the carousel clips the overflow */
  background: var(--hc-layer);
  /* Masks use only the alpha channel: any opaque token works for the solid stop. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--c-deep-blue) var(--hc-layer-fade));
  mask-image: linear-gradient(to bottom, transparent 0, var(--c-deep-blue) var(--hc-layer-fade));
  pointer-events: none;
}

/* Slide colour: a short keyline in the slide's theme gradient. */
.hero-carousel__keyline {
  display: block;
  width: var(--space-12);
  height: var(--border-width-heavy);
  margin-bottom: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--theme-bg);
}
.hero-carousel__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  color: var(--c-white);
}
.hero-carousel__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-white);
}
.hero-carousel__text {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-white);
}
.hero-carousel__action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
/* The pale Presentation theme's dark pill disappears on a photo: use the white pill there. */
.hero-carousel .theme-presentation .hero-carousel__button {
  --btn-bg: var(--btn-inverse-bg);
  --btn-fg: var(--btn-inverse-fg);
  --btn-border: var(--btn-inverse-border);
}

/* ── Controls (shown by the script) ────────────────────────────────────── */
.hero-carousel__controls {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.hero-carousel__controls[hidden] { display: none; }
.hero-carousel__control {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: var(--border-width) solid var(--btn-outline-inverse-border);
  border-radius: var(--radius-pill);
  background: var(--btn-outline-inverse-bg);
  -webkit-backdrop-filter: var(--glass-pill-blur);
  backdrop-filter: var(--glass-pill-blur);
  color: var(--c-white);
  cursor: pointer;
  transition: var(--transition-control);
}
.hero-carousel__control:hover {
  border-color: var(--btn-hover-bg);
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
}
.hero-carousel__icon-play { display: none; }
.hero-carousel[data-state="stopped"] .hero-carousel__icon-play { display: block; }
.hero-carousel[data-state="stopped"] .hero-carousel__icon-pause { display: none; }

.hero-carousel__dots {
  display: flex;
  align-items: center;
  margin-left: var(--space-2);
}
.hero-carousel__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hero-carousel__dot::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  /* Dark fill inside a white ring: one of the two always stands out 3:1 from any photo. */
  background: var(--c-deep-blue);
  box-shadow: 0 0 0 var(--border-width-heavy) var(--c-white);
  transition: var(--transition-control);
}
.hero-carousel__dot:hover::before { background: var(--c-mid-blue); }
.hero-carousel__dot[aria-current="true"]::before {
  width: var(--space-3);
  height: var(--space-3);
  background: var(--c-white);
  box-shadow: 0 0 0 var(--border-width-heavy) var(--c-deep-blue);
}

/* Progress line: fills over the 7 seconds while auto-playing. */
.hero-carousel__progress {
  position: relative;
  flex-basis: 100%;
  height: var(--border-width-heavy);
  margin-top: var(--space-2);
  overflow: hidden;
  background: var(--c-white-a34);
}
.hero-carousel__progress-bar {
  position: absolute;
  inset: 0;
  background: var(--c-light-blue);
  transform: scaleX(0);
  transform-origin: left center;
}
.hero-carousel[data-state="playing"] .hero-carousel__progress-bar.is-running {
  animation: hero-carousel-progress var(--hc-interval, 7000ms) linear forwards;
}
.hero-carousel[data-hover="true"] .hero-carousel__progress-bar { animation-play-state: paused; }
@keyframes hero-carousel-progress { to { transform: scaleX(1); } }

/* ── With script: one stage, slides on top of each other ──────────────── */
.js .hero-carousel__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  min-height: min(94svh, 940px);
  padding: var(--space-32) var(--page-gutter) var(--space-10);
  row-gap: var(--space-6);
}
.js .hero-carousel__head { padding: 0; }
.js .hero-carousel__slides {
  position: static;
  display: grid;
}
.js .hero-carousel .hero-carousel__slide {
  position: static;
  grid-area: 1 / 1;
  display: block;
  min-height: 0;
  padding: 0;
  visibility: hidden;
  transition: visibility 0s linear var(--duration-reveal);
}
.js .hero-carousel .hero-carousel__slide.is-current {
  visibility: visible;
  transition: visibility 0s;
}
/* The photo and the text fade, not the slide itself: a fading slide would group its photo and text in one
   layer, and the text layer behind the heading would then sit over the fading slide's text (T25a). */
.js .hero-carousel__slide > .hero-carousel__media,
.js .hero-carousel__slide > .hero-carousel__content {
  opacity: 0;
  transition: opacity var(--duration-reveal) var(--ease-brand);
}
.js .hero-carousel__slide.is-current > .hero-carousel__media,
.js .hero-carousel__slide.is-current > .hero-carousel__content { opacity: 1; }

/* Text layer below 1024 px (T25a): one Deep Blue layer behind the heading, the controls and the slide text.
   It hangs from the heading block down to the bottom of the carousel (the carousel clips it), over the
   photos and under all the text. Soft top edge; on tablets it stops short of the right side with a soft edge. */
.js .hero-carousel__head::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--hc-layer-fade));
  bottom: -200svh;
  left: calc(-1 * var(--page-gutter));
  right: calc(-1 * var(--page-gutter));
  background: var(--hc-layer);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--c-deep-blue) var(--hc-layer-fade));
  mask-image: linear-gradient(to bottom, transparent 0, var(--c-deep-blue) var(--hc-layer-fade));
  pointer-events: none;
}
/* Photos fill the whole carousel; slides 2 to 5 only get their photo once the script primes them (lazy). */
.js .hero-carousel__slide:not(.is-primed) .hero-carousel__media { display: none; }
.js .hero-carousel__content { max-width: 560px; }

@media (min-width: 768px) {
  .hero-carousel__title { font-size: var(--fs-card-title); }
  .hero-carousel .hero-carousel__slide { padding-inline: var(--page-gutter); }
  /* Tablets: the slide text is at most 560 px wide, so the layer fades out to the right of it. */
  .js .hero-carousel__head::before,
  .no-js .hero-carousel__content::before {
    right: auto;
    width: calc(var(--page-gutter) + 560px + var(--hc-layer-fade));
    background: linear-gradient(to right, var(--hc-layer) calc(100% - var(--hc-layer-fade)), transparent);
  }
}

/* Script off, 1000 to 1023 px (T46a): the desktop header pill starts at 1000 px (T41) and would cover the top of
   the heading, so the heading gets the desktop top space here too. With script the heading sits low: no change. */
@media (min-width: 1000px) and (max-width: 1023.98px) {
  .no-js .hero-carousel__head { padding-top: var(--space-20); }
}

@media (min-width: 1024px) {
  /* Wide screens: the heading sits low, over the design's own scrim, so there is no text layer. */
  .js .hero-carousel__head::before,
  .no-js .hero-carousel__content::before { content: none; }
  .hero-carousel__head { padding-top: var(--space-20); }
  .js .hero-carousel__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    grid-template-rows: auto auto;
    column-gap: var(--gutter);
    max-width: calc(var(--container-wide) + 2 * var(--page-gutter));
    margin-inline: auto;
    padding-bottom: var(--space-12);
  }
  .js .hero-carousel__head { grid-column: 1; grid-row: 1 / 3; align-self: end; }
  .js .hero-carousel__controls { grid-column: 2; grid-row: 1; align-self: end; }
  .js .hero-carousel__slides { grid-column: 2; grid-row: 2; }
}

/* Reduced motion: slides swap instantly and the progress line stays still (CC7). */
@media (prefers-reduced-motion: reduce) {
  .js .hero-carousel .hero-carousel__slide,
  .js .hero-carousel .hero-carousel__slide.is-current,
  .js .hero-carousel__slide > .hero-carousel__media,
  .js .hero-carousel__slide > .hero-carousel__content { transition: none; }
  .hero-carousel__progress-bar { animation: none; }
}