/* 02-highlights (design sections/{desktop,mobile}/02-highlights.jpg): main video + thumbnails, then the photo carousel. */
.cv25-highlights { padding-bottom: 80px; }
.cv25-hl-title { margin: 90px 0 0; text-align: center; font-size: clamp(2rem, 4.4vw, 4rem); font-weight: 800; line-height: 1.15; }
.cv25-hl-sub { margin: 6px 0 0; text-align: center; font-size: clamp(1rem, 1.8vw, 1.625rem); }

.cv25-player { position: relative; max-width: 890px; margin: 60px auto 0; }
.cv25-player-main {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer;
    border-radius: 16px; overflow: hidden; background: #000;
}
.cv25-player-main img { width: 100%; height: 100%; object-fit: cover; }
.cv25-player .cv25-arrow--prev { left: -26px; }
.cv25-player .cv25-arrow--next { right: -26px; }
/* 13 session clips: a scrolling row, three in view (design shows three); thin visible scrollbar so mouse users see there's more. */
.cv25-thumbs {
    list-style: none; margin: 16px auto 0; padding: 0 0 12px; max-width: 890px;
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: thin; scrollbar-color: var(--cv25-cyan) rgba(255, 255, 255, .12);
}
.cv25-thumbs li { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; }
.cv25-thumbs button {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer;
    border-radius: 12px; overflow: hidden; background: #000;
}
.cv25-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* Carousel: centred slide full size, neighbours peek behind it, scaled down. */
.cv25-gallery { margin-top: 150px; }
.cv25-gallery-title { display: none; margin: 0 0 30px; text-align: center; font-size: 2rem; font-weight: 600; }
.cv25-gallery-stage { position: relative; max-width: 1260px; margin: 0 auto; }
.cv25-gallery-track { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: 0; --slide: 64%; }
.cv25-gallery-track::-webkit-scrollbar { display: none; }
/* Spacers let the first/last slide reach the centre. */
.cv25-gallery-track::before, .cv25-gallery-track::after { content: ''; flex: 0 0 calc((100% - var(--slide)) / 2); }
.cv25-slide {
    position: relative; flex: 0 0 var(--slide); margin: 0; scroll-snap-align: center; aspect-ratio: 709 / 400;
    border-radius: 20px; overflow: hidden; transform: scale(.84); opacity: .7; z-index: 0;
    transition: transform 350ms ease, opacity 350ms ease;
}
/* Neighbours tuck in behind the centred slide (design: side photos peek out underneath). */
.cv25-slide:has(+ .is-active) { transform: translateX(14%) scale(.84); }
.cv25-slide.is-active + .cv25-slide { transform: translateX(-14%) scale(.84); }
.cv25-slide.is-active { transform: none; opacity: 1; z-index: 1; }
.cv25-slide img { width: 100%; height: 100%; object-fit: cover; }
.cv25-gallery .cv25-arrow--prev { left: calc(18% - 26px); }
.cv25-gallery .cv25-arrow--next { right: calc(18% - 26px); }
.cv25-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.cv25-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: #B3FAFE; cursor: pointer; transition: width 250ms; }
.cv25-dots button[aria-current] { width: 38px; background: var(--cv25-cyan); }

@media (max-width: 767px) {
    .cv25-hl-title { margin-top: 50px; }
    .cv25-player { margin-top: 30px; }
    .cv25-player .cv25-arrow--prev { left: 6px; }
    .cv25-player .cv25-arrow--next { right: 6px; }
    .cv25-thumbs { margin-right: calc(-1 * var(--hub-gutter)); padding-right: var(--hub-gutter); }
    .cv25-thumbs li { flex: 0 0 44%; scroll-snap-align: start; }
    .cv25-gallery { margin-top: 70px; }
    .cv25-gallery-title { display: block; }
    .cv25-gallery-track { --slide: 74%; }
    .cv25-slide { border-radius: 14px; }
    .cv25-gallery .cv25-arrow--prev { left: 10%; }
    .cv25-gallery .cv25-arrow--next { right: 10%; }
}