/* ── Section heading ── */
.ythc-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 14px;
    padding: 0;
}

/* ── Scroll area ── */
.ythc-scroll-area {
    position: relative;
}

/* ── Track ── */
.ythc-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 6px;
}
.ythc-track::-webkit-scrollbar { display: none; }
.ythc-track.ythc-at-end {
    -webkit-mask-image: none;
    mask-image: none;
}

/* ── Card ── */
.ythc-card {
    flex: 0 0 200px;
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #111;
    cursor: pointer;
    transition: transform 0.25s ease;
}
.ythc-card:hover { transform: scale(1.02); }
.ythc-card img {
    width: 100%;
    height: 100%;
    display: block;
}

/*  Shorts are already 9:16 — fill the card.
    Regular 16:9 videos are letterboxed into the vertical card instead of
    being centre-cropped, with a blurred copy of the same frame behind them
    so the empty space is never a dead black band. */
.ythc-card-thumb {
    position: relative;
    z-index: 1;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.ythc-card--landscape .ythc-card-thumb {
    object-fit: contain;
}
.ythc-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    object-fit: cover;
    filter: blur(22px) saturate(1.25) brightness(0.55);
    transform: scale(1.25);
    pointer-events: none;
}
.ythc-card:hover .ythc-card-thumb { transform: scale(1.04); }

/* ── Card overlay ── */
.ythc-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,0.82) 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 14px 12px;
    box-sizing: border-box;
}
.ythc-card-overlay h3 {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ── Channel label (multi-channel strips) ── */
.ythc-card-channel {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* ── Arrow buttons ── */
.ythc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: #222;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    transition: background 0.2s ease;
    padding: 0;
}
.ythc-arrow:hover { background: #f0f0f0; }
.ythc-arrow-left  { left: -18px; }
.ythc-arrow-right { right: -18px; }
.ythc-arrow.ythc-hidden { opacity: 0; pointer-events: none; }

/* ── Modal — shared base ── */
.ythc-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ythc-modal-backdrop.ythc-open {
    display: flex;
}
.ythc-modal-close-top {
    position: absolute;
    top: -44px;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    padding: 0;
    z-index: 10;
}
.ythc-modal-close-top:hover {
    background: rgba(255,255,255,0.28);
}
.ythc-modal-outer {
    position: relative;
    width: 100%;
    /*  Landscape (the default): as wide as the viewport allows.
        The second declaration also caps width by available HEIGHT — a 16:9
        box can't be so wide that it runs off the bottom of the screen, and
        the 170px covers the backdrop padding, close button and title bar.
        Browsers without min() just keep the 1200px line above. */
    max-width: 1200px;
    max-width: min(1600px, calc((100vh - 170px) * 16 / 9));
}
.ythc-modal-outer.ythc-portrait {
    max-width: 360px;
}
.ythc-modal-box {
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.85);
    width: 100%;
    animation: ythcPop 0.2s ease forwards;
}
@keyframes ythcPop {
    from { opacity: 0; transform: scale(0.93); }
    to   { opacity: 1; transform: scale(1); }
}
.ythc-iframe-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    background: #000;
}
.ythc-iframe-wrap.ythc-wrap-portrait {
    padding-bottom: 177.78%;
    max-height: 75vh;
    overflow: hidden;
}
.ythc-iframe-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}
.ythc-modal-bar {
    padding: 10px 14px;
    background: #111;
}
.ythc-modal-bar span {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ythc-modal-bar em {
    color: rgba(255,255,255,0.6);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 500;
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ythc-modal-bar em:empty { display: none; }

/*  The play icon is centred on the card, so it can't take part in the
    overlay's bottom-aligned flow. */
.ythc-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 2px solid rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    pointer-events: none;
    flex-shrink: 0;
}
.ythc-play-icon svg {
    width: 40px;
    height: 40px;
    fill: #fff;
    display: block;
    position: relative;
    left: 0;
}
.ythc-card:hover .ythc-play-icon {
    background: rgba(255,0,0,0.85);
    border-color: transparent;
    transform: translate(-50%, -50%) scale(1.12);
}

/* ── Mobile overrides ── */
@media (max-width: 640px) {
    .ythc-arrow { display: none; }
    .video-row { padding-left: 8px; padding-right: 8px; }
    .ythc-card { flex: 0 0 155px; }
    .ythc-modal-backdrop {
        padding: 52px 12px 16px;
        align-items: center;
    }
    /*  Landscape fills the phone; only Shorts stay narrow. Capping both at
        75vw left a 16:9 video about 165px tall. */
    .ythc-modal-outer {
        max-width: 100%;
    }
    .ythc-modal-outer.ythc-portrait {
        max-width: 75vw;
    }
    .ythc-iframe-wrap.ythc-wrap-portrait {
        max-height: 62vh;
    }
    .ythc-iframe-wrap:not(.ythc-wrap-portrait) {
        padding-bottom: 56.25%;
    }
    .ythc-modal-box {
        border-radius: 12px;
    }
}