/*= Layout, spacing, colors and type are Tailwind in module.html. This file holds
/*= the reels-slider mechanics (scroll-snap track + flanking arrows) and the coral
/*= pain-point bullet — the parts utilities can't express cleanly. */

/*+ Common Pain Points — coral bullet aligned to the first text line. */
.content-social-media__dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-top: 7px;
    border-radius: 999px;
    background: var(--color-coral);
}

/** ========================================
/** Reels slider
/** ======================================== */

/*+ Hover-to-play — fade the poster thumbnail out while the muted Mux video plays
/*~ (module.js toggles .is-playing on mouseenter/leave). */
.content-social-media .reel-card__thumb {
    transition: opacity 0.25s ease;
}

.content-social-media .reel-card.is-playing .reel-card__thumb {
    opacity: 0;
}

/*+ Mux fills the 9:16 card. The <mux-video> inner <video> defaults to
/*= object-fit: var(--media-object-fit, contain) — contain shows thin black bars
/*= when a reel isn't pixel-exact 9:16. The custom property inherits into the
/*= shadow DOM, so setting it here forces the video to cover. */
.content-social-media .reel-card mux-video {
    --media-object-fit: cover;
}

/*+ Play glyph — shown at rest over the poster, hidden once the video plays. */
.content-social-media .reel-card__play {
    transition: opacity 0.25s ease;
}

.content-social-media .reel-card.is-playing .reel-card__play {
    opacity: 0;
}

/*= Gap between cards (and between arrows and the viewport) — matches the Tailwind
/*= gap on .content-social-media__slider. */
.content-social-media__slider {
    --csm-gap: 12px;
}

/*+ Viewport — mobile fills the space between the arrows; two cards show and the
/*= rest scroll-snap horizontally (scrollbar hidden). */
.content-social-media__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.content-social-media__viewport::-webkit-scrollbar {
    display: none;
}

/*- Track */
.content-social-media__track {
    display: flex;
    gap: var(--csm-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

/*- Slide — mobile shows two per view (each = half the viewport minus half a gap). */
.content-social-media__slide {
    flex: 0 0 calc(50% - var(--csm-gap) / 2);
    scroll-snap-align: start;
    list-style: none;
}

/*+ Arrows — bare chevron buttons flanking the viewport. */
.content-social-media__arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-grey-900);
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.content-social-media__arrow:hover {
    color: var(--color-coral);
}

.content-social-media__arrow:focus-visible {
    outline: 2px solid var(--color-burgundy);
    outline-offset: 2px;
    border-radius: 8px;
}

.content-social-media__arrow[disabled] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/*= Keep the arrow's footprint when hidden (visibility, not display) so the
/*= viewport — and therefore the two cards (50% each) — stays the same width
/*= whether or not the arrows show. Otherwise a 2-slide, no-overflow slider
/*= reclaims the arrow space and the cards render noticeably larger. */
.content-social-media__arrow[hidden] {
    display: inline-flex;
    visibility: hidden;
    pointer-events: none;
}

/*~ Desktop (≥xl) — the row goes side-by-side; the slider flex-fills the space
/*= beside the 620px content column. Two cards still show (each 50% of the viewport),
/*= which lands at ~278px wide at the 1440px design width and scales down below it. */
@media (min-width: 1280px) {
    .content-social-media__slider {
        --csm-gap: 22px;
    }

    .content-social-media__arrow {
        width: 44px;
        height: 44px;
    }
}