/* 3Music TV media family — Midnight Culture broadcast refresh
   Loaded by base.php for videos, livestream, DASH and snaps routes. */

.tm-site-page:is(.tm-family-videos, .tm-family-livestream, .tm-family-snaps) {
    --tm-radius-banner: 28px;
    --tm-radius-card: 20px;
    --tm-radius-control: 12px;
    --tm-radius-pill: 999px;
    --tm-media-bg: #09090b;
    --tm-media-surface: #141419;
    --tm-media-surface-raised: #1b1b22;
    --tm-media-line: rgba(255, 255, 255, 0.11);
    --tm-media-copy: #f7f4ef;
    --tm-media-muted: #aaa7b1;
    --tm-media-cream: #f2efe9;
    --tm-media-paper: #fffdf9;
    --tm-media-ink: #111114;
    --tm-media-red: #f73145;
    --tm-media-red-dark: #b81629;
    --tm-media-yellow: #ffdb01;
    --tm-media-purple: #ab48fb;
    background: var(--tm-media-bg) !important;
}

.tm-site-page:is(.tm-family-videos, .tm-family-livestream, .tm-family-snaps) .page_wrapper,
.tm-site-page:is(.tm-family-videos, .tm-family-livestream, .tm-family-snaps) #tm-main {
    min-width: 0;
    background: var(--tm-media-bg);
}

/* Shared family geometry: controls, states, ads and loading placeholders. */
.tm-site-page:is(.tm-family-videos, .tm-family-livestream, .tm-family-snaps) :is(.tm-btn, .tm-input, .tm-media-control, select, textarea) {
    border-radius: var(--tm-radius-control) !important;
}

.tm-site-page:is(.tm-family-videos, .tm-family-livestream, .tm-family-snaps) :is(.tm-media-state-panel, .tm-comment-card, .tm-comment-form) {
    overflow: hidden;
    border-radius: var(--tm-radius-card) !important;
}

.tm-site-page:is(.tm-family-videos, .tm-family-livestream, .tm-family-snaps) .tm-media-state-panel {
    background: rgba(127, 127, 127, 0.06);
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.18);
}

.tm-site-page:is(.tm-family-videos, .tm-family-livestream, .tm-family-snaps) :is(.tm-vid-skel, .tm-vid-skel-dark, .tm-skeleton, .tm-snaps-skel, .tm-media-skeleton) {
    border-radius: var(--tm-radius-control) !important;
}

.tm-site-page.tm-family-videos .tm-vid-skel.tm-vid-card-skel {
    border-radius: var(--tm-radius-card) !important;
}

.tm-site-page:is(.tm-family-videos, .tm-family-livestream, .tm-family-snaps) [x-data^="tmAdSlot"] img {
    border-radius: var(--tm-radius-banner) !important;
}

.tm-family-videos .tm-video-detail-page .tm-comment-captcha,
.tm-family-videos .tm-video-detail-page .tm-comment-success {
    border-radius: var(--tm-radius-control) !important;
}

.tm-family-videos .tm-video-detail-page .tm-comment-count {
    border-radius: var(--tm-radius-pill) !important;
}

.tm-family-videos .tm-video-detail-page .tm-comment-avatar {
    border-radius: 50% !important;
}

.tm-media-masthead {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 0 0 var(--tm-radius-banner) var(--tm-radius-banner) !important;
    background:
        radial-gradient(circle at 78% 25%, rgba(171, 72, 251, 0.18), transparent 24rem),
        radial-gradient(circle at 20% 110%, rgba(247, 49, 69, 0.17), transparent 28rem),
        var(--tm-media-bg);
}

.tm-media-masthead::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -8%;
    bottom: -9rem;
    width: 34rem;
    height: 17rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50% !important;
    transform: rotate(-10deg);
}

.tm-media-masthead-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: clamp(2rem, 7vw, 6.5rem);
    align-items: end;
    width: min(100% - 48px, 1328px);
    margin: 0 auto;
    padding: clamp(4rem, 8vw, 7.5rem) 0 clamp(2.6rem, 5vw, 4.4rem);
}

.tm-media-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--tm-media-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tm-media-kicker::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50% !important;
    background: var(--tm-media-red);
    box-shadow: 0 0 0 5px rgba(247, 49, 69, 0.14);
}

.tm-media-masthead h1 {
    max-width: 850px;
    margin: 18px 0 0;
    color: var(--tm-media-copy);
    font-size: clamp(3.1rem, 7.05vw, 6.6rem);
    font-weight: 700;
    letter-spacing: -0.075em;
    line-height: 0.84;
}

.tm-media-masthead h1 em {
    color: var(--tm-media-red);
    font-family: 'Republica Minor', 'Graphik', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -0.03em;
}

.tm-media-masthead-copy {
    max-width: 390px;
    margin: 0;
    color: #c9c6cf;
    font-size: 0.98rem;
    line-height: 1.7;
}

.tm-media-masthead-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    margin-top: 22px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--tm-radius-control) !important;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tm-media-masthead-action:hover {
    border-color: var(--tm-media-yellow);
    background: var(--tm-media-yellow);
    color: #09090b;
}

/* -------------------------------------------------------------------------
   Videos index
   ---------------------------------------------------------------------- */
.tm-family-videos #tm-videos-page {
    overflow: hidden;
    background: var(--tm-media-bg);
    color: var(--tm-media-copy);
}

.tm-family-videos #tm-videos-page .tm-vid-hero {
    padding: 0 24px 42px;
    background: transparent;
}

.tm-family-videos #tm-videos-page .tm-vid-hero-inner {
    grid-template-columns: minmax(0, 1.58fr) minmax(320px, 0.72fr);
    max-width: 1328px;
    overflow: hidden;
    border: 1px solid var(--tm-media-line);
    border-radius: var(--tm-radius-banner) !important;
    background: var(--tm-media-surface);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.38);
}

.tm-family-videos #tm-videos-page .tm-vid-hero-player,
.tm-family-videos #tm-videos-page .tm-vid-hero-player-ratio {
    background: #050506;
}

.tm-family-videos #tm-videos-page .tm-vid-hero-poster {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: #050506;
    color: inherit;
    text-align: left;
}

.tm-family-videos #tm-videos-page .tm-vid-hero-poster-overlay {
    background:
        linear-gradient(90deg, transparent 55%, rgba(5, 5, 7, 0.34)),
        linear-gradient(0deg, rgba(5, 5, 7, 0.32), transparent 52%);
}

.tm-family-videos #tm-videos-page .tm-vid-hero-play-btn {
    width: 74px;
    height: 74px;
    border-radius: 50% !important;
    background: var(--tm-media-yellow);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

.tm-family-videos #tm-videos-page .tm-vid-hero-info {
    justify-content: flex-end;
    padding: clamp(28px, 4vw, 54px);
    gap: 17px;
    background:
        radial-gradient(circle at 100% 0, rgba(171, 72, 251, 0.12), transparent 17rem),
        var(--tm-media-surface);
}

.tm-family-videos #tm-videos-page .tm-vid-hero-cat,
.tm-family-videos #tm-videos-page .tm-netflix-card-cat {
    color: var(--tm-media-red);
}

.tm-family-videos #tm-videos-page .tm-vid-hero-title {
    font-size: clamp(1.46rem, 2.54vw, 2.5rem);
    letter-spacing: -0.045em;
    line-height: 1.02;
    text-transform: none;
}

.tm-family-videos #tm-videos-page .tm-vid-hero-desc {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.88rem;
}

.tm-family-videos #tm-videos-page .tm-vid-hero-meta {
    color: rgba(255, 255, 255, 0.48);
}

.tm-family-videos #tm-videos-page .tm-vid-hero-watch-btn {
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--tm-radius-control) !important;
    background: var(--tm-media-red-dark);
}

.tm-family-videos #tm-videos-page .tm-netflix-section {
    padding: 36px 0 48px;
    background:
        radial-gradient(circle at 12% 110%, rgba(247, 49, 69, 0.12), transparent 24rem),
        #0d0d10;
}

.tm-family-videos #tm-videos-page .tm-netflix-hdr,
.tm-family-videos #tm-videos-page .tm-netflix-scroll-outer {
    max-width: 1328px;
    padding-right: 24px;
    padding-left: 24px;
}

.tm-family-videos #tm-videos-page .tm-netflix-hdr-title {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
}

.tm-family-videos #tm-videos-page .tm-netflix-scroll {
    gap: 14px;
    padding: 8px 2px 14px;
}

.tm-family-videos #tm-videos-page .tm-netflix-card {
    width: 270px;
    overflow: hidden;
    border: 1px solid var(--tm-media-line);
    border-radius: var(--tm-radius-card) !important;
    background: var(--tm-media-surface);
    transform-origin: center;
}

.tm-family-videos #tm-videos-page .tm-netflix-card:hover {
    z-index: 5;
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.24);
}

.tm-family-videos #tm-videos-page .tm-netflix-thumb {
    border-radius: var(--tm-radius-card) !important;
}

.tm-family-videos #tm-videos-page .tm-netflix-card-title {
    font-size: 0.72rem;
    text-transform: none;
}

.tm-family-videos #tm-videos-page .tm-netflix-arrow,
.tm-family-videos #tm-videos-page .tm-cat-arrow {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50% !important;
    background: rgba(8, 8, 10, 0.9);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.tm-family-videos #tm-videos-page .tm-netflix-arrow:hover,
.tm-family-videos #tm-videos-page .tm-cat-arrow:hover {
    border-color: var(--tm-media-yellow);
    background: var(--tm-media-yellow);
    color: #09090b;
}

.tm-family-videos #tm-videos-page > div[style*="background:#fff"] {
    padding: 54px 0 68px !important;
    background: var(--tm-media-cream) !important;
    color: var(--tm-media-ink);
}

.tm-family-videos #tm-videos-page > div[style*="background:#fff"] > .max-w-7xl {
    max-width: 1328px !important;
    padding-right: 24px !important;
    padding-left: 24px !important;
}

.tm-family-videos #tm-videos-page .tm-cat-row {
    margin-bottom: 52px;
}

.tm-family-videos #tm-videos-page .tm-cat-scroll {
    gap: 16px;
    padding: 5px 2px 16px;
}

.tm-family-videos #tm-videos-page .tm-cat-card {
    width: 300px;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 20, 0.12);
    border-radius: var(--tm-radius-card) !important;
    background: var(--tm-media-paper);
    box-shadow: 0 12px 30px rgba(22, 20, 18, 0.06);
}

.tm-family-videos #tm-videos-page .tm-cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 46px rgba(22, 20, 18, 0.12);
}

.tm-family-videos #tm-videos-page .tm-cat-card .tm-vid-thumb {
    border-radius: var(--tm-radius-card) var(--tm-radius-card) 0 0 !important;
}

.tm-family-videos #tm-videos-page .tm-cat-card .tm-vid-info {
    padding: 13px 14px 15px;
}

.tm-family-videos #tm-videos-page .tm-cat-card .tm-vid-title {
    color: var(--tm-media-ink);
    text-transform: none;
}

.tm-family-videos #tm-videos-page .tm-vid-play-badge,
.tm-family-videos #tm-videos-page .tm-vid-hover-play {
    border-radius: var(--tm-radius-pill) !important;
}

/* -------------------------------------------------------------------------
   Video detail
   ---------------------------------------------------------------------- */
.tm-family-videos .tm-video-detail-page {
    min-height: 70vh;
    padding: 38px 0 72px;
    background:
        radial-gradient(circle at 90% 4%, rgba(171, 72, 251, 0.12), transparent 25rem),
        var(--tm-media-bg);
}

.tm-family-videos .tm-video-detail-page > .max-w-7xl {
    max-width: 1328px !important;
    padding: 0 24px !important;
}

.tm-family-videos .tm-video-detail-page .tm-back-link {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--tm-media-line);
    border-radius: var(--tm-radius-control) !important;
    color: var(--tm-media-muted);
}

.tm-family-videos .tm-video-detail-page .tm-back-link:hover {
    border-color: var(--tm-media-yellow);
    color: var(--tm-media-yellow);
}

.tm-family-videos .tm-video-detail-page .tm-video-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 326px;
    gap: 28px !important;
    align-items: start;
}

.tm-family-videos .tm-video-detail-page .tm-video-main-column {
    min-width: 0;
    padding: 18px clamp(18px, 3vw, 32px) 34px;
    border-radius: var(--tm-radius-card) !important;
    background: var(--tm-media-cream);
    color: var(--tm-media-ink);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.3);
}

.tm-family-videos .tm-video-detail-page .tm-player-wrap {
    overflow: hidden;
    margin: 0 -14px 24px !important;
    border: 1px solid var(--tm-media-line);
    border-radius: var(--tm-radius-banner) !important;
    background: #000;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.tm-family-videos .tm-video-detail-page .tm-player-wrap :is(iframe, video, .tm-player-placeholder),
.tm-family-livestream .tm-player-wrapper :is(iframe, video, .tm-player-overlay) {
    border-radius: inherit;
}

.tm-family-videos .tm-video-detail-page .tm-video-page-title {
    font-size: clamp(1.55rem, 3.4vw, 2.82rem);
    letter-spacing: -0.05em;
    line-height: 1.03;
}

.tm-family-videos .tm-video-detail-page .tm-cat-tag {
    border-radius: var(--tm-radius-pill) !important;
    background: var(--tm-media-red-dark);
}

.tm-family-videos .tm-video-detail-page .tm-meta-bar,
.tm-family-videos .tm-video-detail-page .tm-share-bar {
    border-color: rgba(17, 17, 20, 0.13);
}

.tm-family-videos .tm-video-detail-page .tm-share-btn {
    min-height: 38px;
    border-radius: var(--tm-radius-control) !important;
}

.tm-family-videos .tm-video-detail-page .tm-video-sidebar {
    width: 326px !important;
    padding: 20px;
    border: 1px solid var(--tm-media-line);
    border-radius: var(--tm-radius-card) !important;
    background: rgba(20, 20, 25, 0.94);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.tm-family-videos .tm-video-detail-page .tm-related-title,
.tm-family-videos .tm-video-detail-page .tm-related-info-title {
    color: var(--tm-media-copy);
}

.tm-family-videos .tm-video-detail-page .tm-related-title {
    border-color: var(--tm-media-red);
}

.tm-family-videos .tm-video-detail-page .tm-related-card {
    border-width: 0 0 1px !important;
    border-color: var(--tm-media-line) !important;
    border-radius: var(--tm-radius-control) !important;
    background: transparent;
    box-shadow: none;
}

.tm-family-videos .tm-video-detail-page .tm-related-card:hover {
    transform: none;
    border-color: var(--tm-media-line) !important;
    box-shadow: none;
}

.tm-family-videos .tm-video-detail-page .tm-related-thumb {
    overflow: hidden;
    border-radius: var(--tm-radius-control) !important;
}

.tm-family-videos .tm-video-detail-page .tm-related-info-date,
.tm-family-videos .tm-video-detail-page .tm-video-sidebar > p,
.tm-family-videos .tm-video-detail-page .tm-video-sidebar a[href$="/videos"] {
    color: var(--tm-media-muted) !important;
}

/* -------------------------------------------------------------------------
   Livestream
   ---------------------------------------------------------------------- */
.tm-family-livestream #tm-main {
    background:
        radial-gradient(circle at 85% 6%, rgba(171, 72, 251, 0.13), transparent 25rem),
        var(--tm-media-bg);
}

.tm-family-livestream .tm-live-page-header {
    display: block;
    overflow: hidden;
    padding: 0;
    border-bottom: 1px solid var(--tm-media-line);
    border-radius: 0 0 var(--tm-radius-banner) var(--tm-radius-banner) !important;
    background:
        linear-gradient(100deg, rgba(247, 49, 69, 0.09), transparent 42%),
        radial-gradient(circle at 78% 12%, rgba(171, 72, 251, 0.18), transparent 25rem),
        var(--tm-media-bg);
}

.tm-family-livestream .tm-live-page-header-inner {
    width: min(100% - 48px, 1328px);
    margin: 0 auto;
    padding: clamp(3.8rem, 7vw, 6.6rem) 0 clamp(2.7rem, 5vw, 4.5rem);
}

.tm-family-livestream .tm-live-page-header h1 {
    max-width: 820px;
    margin: 18px 0 0;
    color: #fff;
    font-size: clamp(2.4rem, 5.28vw, 4.96rem);
    font-weight: 700;
    letter-spacing: -0.075em;
    line-height: 0.86;
}

.tm-family-livestream .tm-live-page-header h1 em {
    color: var(--tm-media-red);
    font-family: 'Republica Minor', 'Graphik', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.02em;
    word-spacing: 0.16em;
}

.tm-family-livestream .tm-live-page-header-copy {
    max-width: 560px;
    margin: 20px 0 0;
    color: var(--tm-media-muted);
    font-size: 0.98rem;
    line-height: 1.7;
}

.tm-family-livestream .tm-live-badge,
.tm-family-livestream .tm-player-badge-live .tm-live-badge {
    min-height: 28px;
    border-radius: var(--tm-radius-pill) !important;
    background: var(--tm-media-red-dark);
}

.tm-family-livestream .tm-live-content {
    max-width: 1328px !important;
    padding: 34px 24px 72px !important;
    color: var(--tm-media-copy);
}

.tm-family-livestream .tm-player-wrapper {
    overflow: hidden;
    border: 1px solid var(--tm-media-line) !important;
    border-radius: var(--tm-radius-banner) !important;
    background: #000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.44);
}

.tm-family-livestream .tm-player-overlay {
    background: rgba(5, 5, 7, 0.9);
}

.tm-family-livestream .animate-pulse > div[style*="background"] {
    border-radius: var(--tm-radius-control) !important;
}

.tm-family-livestream .tm-live-player-meta {
    margin: 0 4px 22px !important;
    padding: 18px 0 !important;
    border-color: var(--tm-media-line) !important;
}

.tm-family-livestream .tm-live-player-meta h2 {
    color: var(--tm-media-copy);
    font-size: clamp(0.94rem, 1.88vw, 1.22rem) !important;
}

.tm-family-livestream .tm-live-player-meta p {
    color: var(--tm-media-muted) !important;
}

.tm-family-livestream .tm-live-player-meta .tm-btn-outline {
    border-color: rgba(247, 244, 239, 0.34) !important;
    color: var(--tm-media-copy) !important;
}

.tm-family-livestream .tm-live-player-meta .tm-btn-outline:hover,
.tm-family-livestream .tm-live-player-meta .tm-btn-outline:focus-visible {
    border-color: var(--tm-media-copy) !important;
    background: var(--tm-media-copy) !important;
    color: var(--tm-media-ink) !important;
}

.tm-family-livestream .tm-live-schedule-panel,
.tm-family-livestream .tm-live-status-card,
.tm-family-livestream .tm-live-sidebar-panel {
    padding: 20px;
    border: 1px solid var(--tm-media-line) !important;
    border-radius: var(--tm-radius-card) !important;
    background: rgba(20, 20, 25, 0.95) !important;
    color: var(--tm-media-copy);
}

.tm-family-livestream .tm-live-schedule-panel .tm-section-header,
.tm-family-livestream .tm-live-sidebar-panel .tm-section-header {
    min-height: 0;
    margin-bottom: 12px !important;
    padding-bottom: 12px;
    border-color: var(--tm-media-line);
}

.tm-family-livestream .tm-live-schedule-panel .tm-section-title,
.tm-family-livestream .tm-live-sidebar-panel .tm-section-title {
    color: var(--tm-media-copy);
    font-size: 1.13rem;
}

.tm-family-livestream .tm-schedule-row {
    border-color: var(--tm-media-line);
}

.tm-family-livestream .tm-schedule-row.tm-sched-now {
    border-left-color: var(--tm-media-red);
    background: rgba(247, 49, 69, 0.08);
}

.tm-family-livestream .tm-schedule-show,
.tm-family-livestream .tm-live-status-card span,
.tm-family-livestream .tm-live-sidebar-panel .font-bold {
    color: var(--tm-media-copy);
}

.tm-family-livestream .tm-radio-card {
    width: 100%;
    border-color: var(--tm-media-line);
    border-radius: var(--tm-radius-control) !important;
    background: rgba(255, 255, 255, 0.035);
    color: var(--tm-media-copy);
    font-family: inherit;
    text-align: left;
}

.tm-family-livestream .tm-radio-card:hover,
.tm-family-livestream .tm-radio-card.tm-radio-playing {
    border-color: rgba(247, 49, 69, 0.62);
    background: rgba(247, 49, 69, 0.09);
}

.tm-family-livestream .tm-radio-logo,
.tm-family-livestream .tm-radio-logo-placeholder {
    border-radius: var(--tm-radius-control) !important;
}

.tm-family-livestream .tm-live-recent-list {
    overflow: hidden;
    border-color: var(--tm-media-line) !important;
    border-radius: var(--tm-radius-card) !important;
    background: rgba(255, 255, 255, 0.025);
}

.tm-family-livestream .tm-live-recent-list a {
    border-color: var(--tm-media-line) !important;
}

.tm-family-livestream .tm-live-recent-list a:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}

.tm-family-livestream .tm-live-recent-list a > div:first-child {
    border-radius: var(--tm-radius-control) !important;
}

.tm-family-livestream .tm-live-ad {
    overflow: hidden;
    border: 1px solid var(--tm-media-line);
    border-radius: var(--tm-radius-banner) !important;
}

/* -------------------------------------------------------------------------
   Snaps
   ---------------------------------------------------------------------- */
.tm-family-snaps .tm-snaps-page {
    background: var(--tm-media-cream);
    color: var(--tm-media-ink);
}

.tm-family-snaps .tm-snaps-page > .max-w-7xl {
    max-width: 1328px !important;
    padding: 52px 24px 74px !important;
}

.tm-family-snaps .tm-snaps-grid {
    column-gap: 14px;
}

.tm-family-snaps .tm-snaps-item {
    width: 100%;
    margin-bottom: 14px;
    padding: 0;
    border: 0;
    border-radius: var(--tm-radius-card) !important;
    background: #17171a;
    color: #fff;
    font-family: inherit;
    text-align: left;
    box-shadow: 0 12px 32px rgba(22, 20, 18, 0.11);
}

.tm-family-snaps .tm-snaps-item img {
    border-radius: var(--tm-radius-card) !important;
}

.tm-family-snaps .tm-snaps-overlay {
    padding: 16px;
    border-radius: var(--tm-radius-card) !important;
    background: linear-gradient(to top, rgba(5, 5, 7, 0.68), transparent 58%);
}

.tm-family-snaps .tm-snaps-caption {
    opacity: 0.94;
    transform: none;
    font-size: 0.78rem;
}

.tm-family-snaps .tm-lightbox {
    background: rgba(5, 5, 7, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.tm-family-snaps .tm-lightbox-img {
    border-radius: var(--tm-radius-banner) !important;
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.58);
}

.tm-family-snaps .tm-lightbox-nav,
.tm-family-snaps .tm-lightbox-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50% !important;
    background: rgba(17, 17, 20, 0.78);
}

.tm-family-snaps .tm-lightbox-nav:hover,
.tm-family-snaps .tm-lightbox-close:hover {
    border-color: var(--tm-media-yellow);
    background: var(--tm-media-yellow);
    color: #09090b;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .tm-family-videos .tm-video-detail-page .tm-video-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .tm-family-videos .tm-video-detail-page .tm-video-sidebar {
        width: 100% !important;
    }
}

@media (max-width: 900px) {
    .tm-media-masthead-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .tm-media-masthead-copy {
        max-width: 620px;
    }

    .tm-family-videos #tm-videos-page .tm-vid-hero-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .tm-family-videos #tm-videos-page .tm-vid-hero-info {
        min-height: 290px;
    }
}

@media (max-width: 640px) {
    .tm-media-masthead-inner,
    .tm-family-livestream .tm-live-page-header-inner {
        width: min(100% - 32px, 1328px);
    }

    .tm-media-masthead-inner {
        padding-top: 3.4rem;
    }

    .tm-media-masthead h1 {
        font-size: clamp(2.82rem, 15vw, 4.23rem);
    }

    .tm-family-livestream .tm-live-page-header h1 {
        font-size: clamp(2.256rem, 12vw, 3.384rem);
    }

    .tm-family-videos #tm-videos-page .tm-vid-hero {
        padding: 0 16px 28px;
    }

    .tm-family-videos #tm-videos-page .tm-vid-hero-inner {
        border-radius: var(--tm-radius-banner) !important;
    }

    .tm-family-videos #tm-videos-page .tm-vid-hero-info {
        min-height: 0;
        padding: 22px 18px 24px;
    }

    .tm-family-videos #tm-videos-page .tm-vid-hero-play-btn {
        width: 58px;
        height: 58px;
    }

    .tm-family-videos #tm-videos-page .tm-netflix-hdr,
    .tm-family-videos #tm-videos-page .tm-netflix-scroll-outer,
    .tm-family-videos #tm-videos-page > div[style*="background:#fff"] > .max-w-7xl {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    .tm-family-videos #tm-videos-page .tm-netflix-card {
        width: min(76vw, 248px);
    }

    .tm-family-videos #tm-videos-page .tm-netflix-arrow,
    .tm-family-videos #tm-videos-page .tm-cat-arrow {
        display: none;
    }

    .tm-family-videos #tm-videos-page .tm-cat-card {
        width: min(78vw, 248px);
    }

    .tm-family-videos .tm-video-detail-page {
        padding-top: 24px;
    }

    .tm-family-videos .tm-video-detail-page > .max-w-7xl {
        padding: 0 16px !important;
    }

    .tm-family-videos .tm-video-detail-page .tm-video-main-column {
        padding: 10px 16px 26px;
        border-radius: var(--tm-radius-card) !important;
    }

    .tm-family-videos .tm-video-detail-page .tm-player-wrap {
        margin: 0 -8px 20px !important;
        border-radius: var(--tm-radius-banner) !important;
    }

    .tm-family-videos .tm-video-detail-page .tm-share-label {
        width: 100%;
    }

    .tm-family-livestream .tm-live-content {
        padding: 24px 16px 56px !important;
    }

    .tm-family-livestream .tm-player-wrapper {
        border-radius: var(--tm-radius-banner) !important;
    }

    .tm-family-livestream .tm-live-player-meta > .flex {
        flex-direction: column;
    }

    .tm-family-livestream .tm-live-player-meta a {
        align-self: flex-start;
    }

    .tm-family-livestream .tm-live-schedule-panel,
    .tm-family-livestream .tm-live-status-card,
    .tm-family-livestream .tm-live-sidebar-panel {
        padding: 16px;
        border-radius: var(--tm-radius-card) !important;
    }

    .tm-family-snaps .tm-snaps-page > .max-w-7xl {
        padding: 38px 16px 58px !important;
    }

    .tm-family-snaps .tm-snaps-grid {
        column-gap: 9px;
    }

    .tm-family-snaps .tm-snaps-item {
        margin-bottom: 9px;
        border-radius: var(--tm-radius-card) !important;
    }

    .tm-family-snaps .tm-snaps-item img,
    .tm-family-snaps .tm-snaps-overlay {
        border-radius: var(--tm-radius-card) !important;
    }

    .tm-family-snaps .tm-snaps-overlay {
        padding: 10px;
    }

    .tm-family-snaps .tm-snaps-caption {
        font-size: 0.68rem;
    }

    .tm-family-snaps .tm-lightbox-img-wrap,
    .tm-family-snaps .tm-lightbox-img {
        max-width: calc(100vw - 24px);
    }

    .tm-family-snaps .tm-lightbox-nav.prev {
        left: 10px;
    }

    .tm-family-snaps .tm-lightbox-nav.next {
        right: 10px;
    }

    .tm-family-snaps .tm-lightbox-nav {
        width: 42px;
        height: 42px;
        background: rgba(5, 5, 7, 0.72);
    }
}

@media (max-width: 380px) {
    .tm-family-videos .tm-video-detail-page .tm-share-btn {
        justify-content: center;
        flex: 1 1 calc(50% - 0.5rem);
    }

    .tm-family-livestream .tm-schedule-row {
        gap: 0.55rem;
    }

    .tm-family-livestream .tm-schedule-time {
        min-width: 68px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-site-page:is(.tm-family-videos, .tm-family-livestream, .tm-family-snaps) *,
    .tm-site-page:is(.tm-family-videos, .tm-family-livestream, .tm-family-snaps) *::before,
    .tm-site-page:is(.tm-family-videos, .tm-family-livestream, .tm-family-snaps) *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}