/* AEKE .sg — the YouTube video gallery (the K1's "Real People Real Progress" strip).
 *
 * MEASURED ON aeke.com's K1 page at 1440:
 *
 *   .video-gallery-section          510 tall — ground `--bg-body`, `padding: 40px 0`
 *     > .page-width                 430 — `padding: 40px 0` again
 *       > .video-gallery__container 350 — `padding: 0 40px`, `max-width: 1480px`
 *           h2                      50 — 32px/700, line-height 50px, centred, `margin: 0 0 40px`
 *           .swiper                 260 — `padding: 20px 0 40px`
 *             .swiper-slide         298.75 x 168, `margin-right: 50px`
 *               .video-gallery__item        radius 12px, `box-shadow: 0 2px 8px rgba(0,0,0,.1)`
 *                 thumbnail                 `object-fit: cover`, absolutely filling the tile
 *                 play button               68x48, radius 12px, YouTube red, centred
 *             .swiper-pagination    12 — `margin-top: 20px`, bullets 12px, gap 8px
 *
 * ## Two deliberate differences from the live page
 *
 * 1. **The strip is a scroll container, not a Swiper.** Swiper is a third-party library and a
 *    script tag to lay out ten tiles that already fit in a row; the site's other horizontal
 *    strips use `scroll-snap` and this now matches them. The measured geometry is unchanged.
 * 2. **The bullets say which page you are on.** Upstream renders seven bullets that are all the
 *    same red at the same opacity, so the indicator tells a visitor nothing. There is one bullet
 *    per clip here and the inactive ones are dimmed — the same control, actually working.
 *
 * The section's own inline CSS upstream also sets `color: #333333`, a dark grey on a dark
 * ground. Nothing visible inherits it (the title, and the tiles, each set their own), so it is
 * not reproduced: inheriting the page's body colour is the correct default and costs nothing.
 */

.video-gallery-section {
  background: var(--bg-body);
  padding: 40px 0;
}

.video-gallery {
  padding: 40px 0;
}

.video-gallery__header,
.video-gallery__track {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 15px;
}

@media (min-width: 48em) {
  .video-gallery__header,
  .video-gallery__track {
    padding: 0 40px;
  }
}

.video-gallery__title {
  margin: 0 0 40px;
  font-size: 32px;
  font-weight: 700;
  line-height: 50px;
  color: var(--color-heading);
  text-align: center;
}

/* Padding rather than margin on the scroller: the tiles carry an 8px shadow and the first row
   would clip it, and the 40px under them is the space the bullets sit in — the same 20/40 the
   live carousel's own track computes to. */
.video-gallery__scroller {
  display: flex;
  gap: 50px;
  padding: 20px 0 40px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.video-gallery__scroller::-webkit-scrollbar {
  display: none;
}

.video-gallery__slide {
  flex: 0 0 299px;
  scroll-snap-align: start;
}

/* Live renders a **single** clip as a full-width player rather than as one tile of a strip:
   measured on the B1, its one slide is 1345x757 — 16:9 across the whole page, giving a 1087px
   section — where the K1's nine stay 299 wide. The tile is already 16:9, so only the track width
   has to change. */
.video-gallery--single .video-gallery__slide {
  flex: 0 0 100%;
  max-width: 100%;
}

.video-gallery__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: var(--video-tile-bg);
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
  cursor: pointer;
}

.video-gallery__thumbnail {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-gallery__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-youtube);
  color: var(--color-heading);
  transform: translate(-50%, -50%);
}

.video-gallery__play svg {
  width: 24px;
  height: 24px;
}

/* The iframe lands in the same box the still occupied, so the tile does not resize on play. */
.video-gallery__frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--bg-body);
}

.video-gallery__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-gallery__item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------------ bullets */

.video-gallery__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.video-gallery__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-youtube);
  opacity: 0.35;
  cursor: pointer;
}

.video-gallery__dot.is-active {
  opacity: 1;
}

.video-gallery__dot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .video-gallery__scroller {
    scroll-behavior: auto;
  }
}