/**
 * Section: YouTube Shorts
 *
 * Full-bleed horizontally-scrolling row of vertical Shorts cards
 * (Figma node 1:139). The row is ALWAYS a flex scroll container —
 * with exactly 4 items at 25% basis it fits the viewport with no
 * scrollbar; with 5+ items it overflows and the user scrolls. The
 * card-per-view count drops on narrower viewports.
 *
 * Play button styles live in css/bc-buttons.css (shared with YT Video).
 */

.bc-shorts {
    padding: 10px 0;
}

.bc-shorts__row {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

.bc-shorts__row::-webkit-scrollbar {
    display: none;
}

.bc-shorts__item {
    flex: 0 0 calc((100% - 30px) / 4);
    min-width: 0;
    position: relative;
    aspect-ratio: 27 / 40;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
}

.bc-shorts__thumbnail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bc-shorts__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.bc-shorts__item:hover .bc-video__play {
    background: rgba(28, 28, 28, 0.6);
}

/* Iframe replaces facade on click */
.bc-shorts__item iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.bc-shorts__item--playing .bc-shorts__thumbnail,
.bc-shorts__item--playing .bc-shorts__overlay,
.bc-shorts__item--playing .bc-video__play {
    display: none;
}

/* ── Responsive cards-per-view (gap-aware) ── */
@media (max-width: 1199px) {
    .bc-shorts__item {
        flex-basis: calc((100% - 20px) / 3);
    }
}

@media (max-width: 991px) {
    .bc-shorts__item {
        flex-basis: calc((100% - 10px) / 2);
    }
}

@media (max-width: 767px) {
    .bc-shorts__item {
        flex-basis: 100%;
    }
}