/* =========================================================================
   AX Reels Showcase
   Vertical (9:16) reel cards. Only the active reel plays in full colour;
   the rest are dimmed. Each card has a thin progress bar. On desktop the
   reels sit in a row (Splide carousel when there are more than 4); on mobile
   they become a single "peek" carousel.
   ========================================================================= */

.ax-reel {
  --ax-reel-radius: 30px;
  --ax-reel-accent: #292929;   /* progress fill  */
  --ax-reel-track:  #d9d9d9;   /* progress track */
  --ax-reel-gap-mobile: 12px;
  --ax-reel-gap-desktop: 20px;
  --ax-reel-card-max: 300px;   /* desktop card width cap */
  width: 100%;
  box-sizing: border-box;
}
.ax-reel *,
.ax-reel *::before,
.ax-reel *::after { box-sizing: border-box; }

/* ---- Header / View More -------------------------------------------------- */
.ax-reel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px;
}
.ax-reel__header--no-heading { justify-content: flex-start; }

.ax-reel__heading {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
}
.ax-reel__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  font-size: 1rem;
  white-space: nowrap;
}
.ax-reel__more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: transform .2s ease;
}
.ax-reel__more-icon svg { width: 15px; height: 15px; display: block; }
.ax-reel__more:hover .ax-reel__more-icon { transform: translateX(3px); }

/* ---- Track / slides ------------------------------------------------------ */
.ax-reel__splide .splide__list { align-items: flex-start; }

.ax-reel__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
}

/* When Splide is not mounted yet (or JS disabled) lay slides out as a flex
   row so there is no unstyled flash. */
.ax-reel__splide:not(.is-active) .splide__list {
  display: flex;
  gap: var(--ax-reel-gap-desktop);
}
.ax-reel__splide:not(.is-active) .ax-reel__item { flex: 1 1 0; min-width: 0; }

/* ---- Card ---------------------------------------------------------------- */
.ax-reel__card {
  position: relative;
  width: 100%;
  max-width: none;          /* mobile: fill the slide */
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--ax-reel-radius);
  overflow: hidden;
  background: #000;
  filter: grayscale(1);
  opacity: .5;
  transition: filter .5s ease, opacity .5s ease;
}
.ax-reel__item.is-active .ax-reel__card {
  filter: none;
  opacity: 1;
}
.ax-reel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Poster image layered over the video. It stays visible on every reel except
   the active (playing) one, so the curated thumbnail is never replaced by the
   video's own first frame once it buffers. */
.ax-reel__poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity .4s ease;
  pointer-events: none;
}
.ax-reel__item.is-active .ax-reel__poster { opacity: 0; }

/* ---- Progress bar -------------------------------------------------------- */
.ax-reel__bar {
  position: relative;
  width: 70%;
  max-width: 208px;
  height: 4px;
  margin-top: 16px;
  border-radius: 2px;
  background: var(--ax-reel-track);
  overflow: hidden;
}
.ax-reel__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: var(--ax-reel-accent);
}

/* ---- Desktop ------------------------------------------------------------- */
@media (min-width: 900px) {
  .ax-reel__card {
    max-width: var(--ax-reel-card-max);
  }
  .ax-reel__bar { margin-top: 18px; }
}