/* ==========================================================================
   Product video wall
   Shared by every marker-driven video section (Social UGC, Proof Videos).
   Modelled on the "Courtside Reviews" row on stackathletics.com: left-aligned
   heading + subheading, then poster-frame tiles with a centred play/pause
   pill. No captions, ratings or nav arrows.

   Sizing comes from custom properties the section sets inline from its
   theme-editor settings: --vw-ratio, --vw-radius, --vw-cols.
   ========================================================================== */

.video-wall {
    display: block;
}

/* Header row: titles on the left, slider arrows pinned right and bottom-aligned
   with the subheading, so they never sit over the videos. */
.video-wall__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.video-wall__titles {
    min-width: 0;
}

.video-wall__heading {
    margin: 0;
    text-align: left;
}

.video-wall__subheading {
    margin: 4px 0 0;
    text-align: left;
    font-weight: 400;
    opacity: 0.75;
}

.video-wall__nav {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

/* The JS hides the nav via the `hidden` attribute when the row does not
   overflow. The UA rule for [hidden] is display:none at lower specificity than
   the class rule above, so it loses without this explicit override — the same
   trap documented for .price__bms-line in component-price.css. */
.video-wall__nav[hidden] {
    display: none;
}

.video-wall__arrow {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgb(var(--color-text) / 20%);
    border-radius: 50%;
    background: none;
    color: rgb(var(--color-text));
    cursor: pointer;
    transition: border-color 0.15s ease, opacity 0.15s ease;
}

.video-wall__arrow:hover:not(:disabled) {
    border-color: rgb(var(--color-text) / 60%);
}

.video-wall__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

/* icon-arrow is a downward chevron; rotate it into left/right. */
.video-wall__arrow--prev svg {
    transform: rotate(90deg);
}

.video-wall__arrow--next svg {
    transform: rotate(-90deg);
}

.video-wall__arrow svg {
    width: 12px;
    height: 12px;
}

/* Touch gets the swipe carousel instead — arrows on a snap-scroller are
   redundant and eat header width on a narrow screen. */
@media screen and (max-width: 959px) {
    .video-wall__nav {
        display: none;
    }
}

.video-wall__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--vw-cols) - 1) * var(--vw-gap)) / var(--vw-cols));
    gap: var(--vw-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Mobile: horizontal snap carousel, ~1.6 tiles in view so the row reads as
   scrollable without needing a visible scrollbar.

   Deliberately no negative-margin edge bleed: .page-width only has a 5px
   gutter at mobile widths, so pulling the list wider than its container makes
   the whole page horizontally scrollable. Tiles start at the page gutter and
   the partially visible next tile is the affordance instead. */
@media screen and (max-width: 959px) {
    .video-wall__list {
        grid-auto-columns: var(--vw-mobile-width);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

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

    .video-wall__item {
        scroll-snap-align: start;
    }
}

/* Desktop: fewer tiles than columns should stay tile-sized rather than
   stretching across the row — grid-auto-columns fixes the track width, so the
   grid just ends early. Anything beyond the column count scrolls. */
@media screen and (min-width: 960px) {
    .video-wall__list {
        overflow-x: auto;
        scrollbar-width: none;
    }

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

.video-wall__item {
    margin: 0;
    min-width: 0;
}

.video-wall__card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--vw-ratio);
    overflow: hidden;
    border-radius: var(--vw-radius);
    background-color: #f2f2f2;
}

.video-wall__card video,
.video-wall__card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The toggle button is the click target; without this a tap on the video
       itself can be swallowed by the UA's own media hit-testing on iOS. */
    pointer-events: none;
}

/* Full-tile click target with the pill centred inside it, so tapping anywhere
   on the video toggles playback (matching the reference implementation). */
.video-wall__toggle {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #0b0b0b;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.video-wall__toggle-pill {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 30%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.video-wall__toggle:hover .video-wall__toggle-pill {
    background-color: rgb(255 255 255 / 55%);
}

.video-wall__toggle svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Icon swap: play triangle while paused, pause bars while playing. The pill
   also fades back while playing so it does not sit over the video throughout. */
.video-wall__icon--pause,
.video-wall__card[data-playing='true'] .video-wall__icon--play {
    display: none;
}

.video-wall__card[data-playing='true'] .video-wall__icon--pause {
    display: block;
}

.video-wall__card[data-playing='true'] .video-wall__toggle-pill {
    opacity: 0;
}

.video-wall__card[data-playing='true'] .video-wall__toggle:hover .video-wall__toggle-pill,
.video-wall__card[data-playing='true'] .video-wall__toggle:focus-visible .video-wall__toggle-pill {
    opacity: 1;
}

.video-wall__toggle:focus-visible {
    outline: 2px solid rgb(var(--color-text));
    outline-offset: 2px;
}

.video-wall__list {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    .video-wall__toggle-pill {
        transition: none;
    }

    .video-wall__list {
        scroll-behavior: auto;
    }
}