/* ==========================================================================
   whats-next.css — section 7, the carousel
   Card measured square at ~339px, left 20, top 144, with the next slide
   peeking 24px to its right. Dots at y 512.
   ========================================================================== */

.next__title {
  padding-top: calc(53 * var(--u));
}

/* Scroll-snap does the work: it is swipeable, keyboard-scrollable and
   works with JavaScript disabled. The script only mirrors the current index
   into the dots — it never drives the movement. */
/* ul.* rather than .* deliberately: base.css resets `ul[class] { padding: 0 }`,
   which is specificity 0-1-1 and silently beat a plain .next__track rule —
   the slides sat flush against the frame edge with no gutter. */
ul.next__track {
  display: flex;
  gap: calc(24 * var(--u));
  max-width: calc(393 * var(--u));
  margin-top: calc(38 * var(--u));
  margin-inline: auto;
  padding-inline: calc(20 * var(--u));
  /* Without this the snap edge ignores the padding and the browser scrolls
     the first slide flush to the frame edge, eating the gutter. */
  scroll-padding-inline: calc(20 * var(--u));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Momentum scrolling on iOS without a visible scrollbar. */
  -webkit-overflow-scrolling: touch;
}

.next__track::-webkit-scrollbar {
  display: none;
}

.next__slide {
  flex: 0 0 calc(339 * var(--u));
  scroll-snap-align: start;
  margin: 0;
}

.next__img {
  width: calc(339 * var(--u));
  height: calc(339 * var(--u));
  border-radius: calc(16 * var(--u));
  object-fit: cover;
}

/* --- Dots -------------------------------------------------------------- */

.next__dots {
  display: flex;
  gap: calc(8 * var(--u));
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin-top: calc(24 * var(--u));
  margin-inline: auto;
  padding: calc(3 * var(--u)) calc(9 * var(--u));
  border-radius: 999px;
  /* The design sets the indicator group on a slightly lifted plate. */
  background-color: rgb(255 255 255 / 0.12);
}

.next__dot {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 999px;
  background-color: #ffffff;
  transition: width var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}

/* Active is the brand magenta, sampled from the design at #ff42e0 — not a
   brighter white, which is the conventional but wrong assumption here. */
.next__dot[aria-current="true"] {
  width: calc(20 * var(--u));
  background-color: #ff42e0;
}

/* Dots are 9px — far below a usable tap target — so each button carries an
   invisible 44px hit area. The dots stay visually correct. */
.next__dotbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

.next__dotbtn::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .next__dot {
    transition: none;
  }
  .next__track {
    scroll-behavior: auto;
  }
}