@charset "UTF-8";

/*
 * File: css/modules/tnsb-main-top-reel-refinements.css
 * Purpose: Main TOP reel card spacing and consistent two-line episode titles.
 * Kept separate from shared reel.css to avoid overlapping the dark-mode PR.
 */

/* Standard TOP thumbnails: keep the banner and text-free ranking composition intact. */
.reel-container .reel-card:not(.is-banner):not(.tnsb-main-top-ranking__card) .reel-img {
    margin-bottom: 8px;
}

/* The LISTEN progress bar stays visually attached to the thumbnail:
   8px image margin + 2px progress top margin = the original 10px gap. */
.reel-container .tnsb-main-top-listen .tnsb-main-top-listen__progress {
    margin-top: 2px;
}

/* Consistent typography and two-line ellipsis across TOP reel cards. */
.reel-container .reel-card .reel-title {
    margin-bottom: 0;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Hover applies to both linked and access-restricted TOP cards. */
.reel-container .reel-card:hover .reel-title {
    color: rgba(255, 255, 255, 1);
}

/* TOP card subtitles: always a single line with an ellipsis if needed. */
.reel-container .reel-card .reel-date {
    display: block;
    font-size: 0.8em;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide card subtitles on TOPICS, VIDEO, TV and YOUTUBE.
   Templates also omit these spans, so this is a safe fallback. */
.reel-container .tnsb-top-no-card-subtitle .reel-date {
    display: none !important;
}

/* TOP heading rhythm: align PODCAST and other reel section headings. */
.reel-container h2.adjust--podcasts,
.reel-container h2.adjust--top {
    margin-bottom: 8px;
}

/* Desktop: 40px between shelves. The first shelf still begins at 32px.
   Both guest (PODCAST) and logged-in (MEMBERSHIP) layouts are covered. */
@media (min-width: 1030px) {
    .reel-container h2.adjust--podcasts,
    .reel-container h2.adjust--top {
        margin-top: 40px;
    }

    .reel-container > h2.adjust--podcasts:first-of-type,
    .reel-container > h2.adjust--top:first-of-type {
        margin-top: 32px;
    }
}

/* Keep the short explanatory subtitle to the right on desktop as on mobile. */
.reel-container h2.adjust--podcasts > span,
.reel-container h2.adjust--top > span {
    display: inline-block;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    padding-left: 1.2em;
    position: relative;
    top: 0px;
    left: auto;
    line-height: 1;
    font-weight: 500;
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}


@media (max-width: 780px) {
    .reel-container h2.adjust--podcasts,
    .reel-container h2.adjust--top {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }

    .reel-container h2.adjust--podcasts > span,
    .reel-container h2.adjust--top > span {
        font-size: 0.75rem;
        padding-left: 0.75em;
        top: 0px;
        left: auto;
        max-width: 40vw;
    }

}

/*
 * TOP card artwork stays colorful in every plan. The shared stylesheet
 * applies grayscale to .popup-trigger and .none_plan images; only undo
 * that visual filter here, never change the original access controls.
 */
.reel-container .reel-card .reel-img img {
    -webkit-filter: none !important;
    filter: none !important;
}

/* Reuse the site's native white / lime .tnsb_key icon assets and circular
 * backdrop from tnsb-site.css; keep the key within each thumbnail. */
.reel-container .reel-card .reel-img.tnsb_key {
    position: relative;
    height: auto;
}

/*
 * Clickable video artwork gets a large, CSS-drawn play button (no emoji).
 * Restricted video cards instead receive the white or lime padlock,
 * depending on their required membership plan.
 * The existing padlock's dark disc measures 50px; play is larger at 72px.
 */
.reel-container .reel-card .reel-img.tnsb-top-playable {
    position: relative;
}

.reel-container .reel-card .reel-img.tnsb-top-playable::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 9;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* White play triangle centered optically within the disc. */
.reel-container .reel-card .reel-img.tnsb-top-playable::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 23px solid #fff;
    top: 50%;
    left: 50%;
    transform: translate(-39%, -50%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .reel-container .reel-card .reel-img.tnsb-top-playable::before {
        width: 64px;
        height: 64px;
    }
    .reel-container .reel-card .reel-img.tnsb-top-playable::after {
        border-top-width: 12px;
        border-bottom-width: 12px;
        border-left-width: 20px;
    }
}

/* ORIGINAL episode-added and MEMBERSHIP new-post badges use the same style.
   Badge z-index remains above the existing white/lime padlock icons. */
.reel-container .tnsb-main-top-original .reel-img,
.reel-container .tnsb-main-top-membership .reel-img {
    position: relative;
}
.reel-container .tnsb-main-top-original__badge,
.reel-container .tnsb-main-top-membership__badge {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 11;
    display: inline-block;
    padding: 4px 6px;
    border-radius: 0 0 3px;
    background: #b4ff00;
    color: #000;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    letter-spacing: 0;
}

/*
 * TNSB- Desktop member directory and horizontal reel width.
 *
 * The shared reel.css deliberately extends each reel to the viewport edge
 * using a negative right margin. The directory plugin adds a 240px right
 * margin to .main--cts--wrap while html.tnsb-aside-open is active.
 * When the directory is open, stop only the reels at the narrowed main
 * content edge instead of drawing cards behind the fixed aside.
 *
 * 16px matches reel.css' desktop margin-left; box sizing and native
 * horizontal scroll stay unchanged. Closed state and mobile keep the
 * original edge-to-edge reel behavior. The desktop arrow controls read the
 * actual scroller width and respond to its ResizeObserver updates.
 */
@media (min-width: 1030px) {
    html.tnsb-aside-open .main--cts--wrap .reel-container .reel-scroller:not(.is-banner) {
        width: calc(100% - 16px) !important;
        margin-right: 0 !important;
    }
}