.tv-hub{position:relative;isolation:isolate;background:#d60d20;color:#fff;overflow:hidden}
.tv-hub::before{content:"▶";position:absolute;top:-.15em;right:-.08em;font-size:39vw;line-height:1;color:#ffffff09;z-index:-1;pointer-events:none}
.tv-hub [hidden]{display:none!important}
.tv-heading{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;margin-bottom:3rem}
.tv-hub .tv-heading .eyebrow{font-size:.8rem;letter-spacing:.09em}
.tv-youtube-icon{display:inline-grid;place-items:center;flex-shrink:0;width:42px;height:29px;border-radius:8px;background:white;color:#d60d20;font-size:1rem;padding-left:2px}
.tv-hub .tv-heading h2{font-size:clamp(5.5rem,12vw,12rem);line-height:.95;letter-spacing:-.08em;margin-top:1.25rem;white-space:nowrap}
.tv-hub .tv-heading h2 span{color:#fff}
.tv-heading-copy{max-width:430px;justify-self:end}
.tv-tagline{font-size:clamp(1.7rem,2.8vw,3rem);font-weight:900;letter-spacing:-.05em;line-height:1.03}
.tv-heading-copy>p:not(.tv-tagline){font-size:1.05rem;line-height:1.6;color:#fff0f1;margin:1rem 0 1.5rem}
.tv-browser{background:#141414;border:1px solid #ffffff2b;border-radius:18px;box-shadow:0 28px 65px #60061259;padding:0 clamp(1rem,2.3vw,2.5rem) 1.75rem;overflow:hidden}
.tv-channel-bar{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid #ffffff21}
.tv-channel-name{display:flex;align-items:center;gap:.8rem;min-width:0}
.tv-channel-name img{width:43px;height:43px;border-radius:50%;flex-shrink:0}
.tv-channel-name strong{display:block;font-size:1rem;line-height:1.4}
.tv-channel-name span{display:block;color:#aaa;font-size:.875rem;overflow-wrap:anywhere}
.tv-channel-link{display:flex;gap:1.2rem;font-size:.875rem;flex-shrink:0;padding:.65rem 1rem;border:1px solid #555;border-radius:6px}
.tv-channel-link:hover{background:#2a2a2a}
.tv-featured{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(220px,.85fr);align-items:center;gap:clamp(1.4rem,3vw,3rem);padding:2rem 0 2.5rem;border-bottom:1px solid #ffffff21}
.tv-player{position:relative;aspect-ratio:16/9;min-height:200px;min-width:0;background:#080808;border-radius:10px;overflow:hidden;scroll-margin-top:120px}
.tv-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tv-poster{position:absolute;inset:0;display:block}
.tv-poster img{width:100%;height:100%;object-fit:contain}
.tv-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000a,transparent 42%);pointer-events:none}
.tv-big-play{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;background:#f10c25;color:#fff;width:85px;height:59px;border-radius:14px;font-size:1.7rem;padding-left:4px;box-shadow:0 7px 30px #0005;transition:transform .2s,background .2s}
.tv-poster:hover .tv-big-play{transform:translate(-50%,-50%) scale(1.08);background:#ff1932}
.tv-poster-caption{position:absolute;z-index:1;left:20px;bottom:15px;font-size:.75rem;font-weight:700;letter-spacing:.14em}
.tv-selected-label{display:block;color:#ff6e80;font-size:.75rem;font-weight:700;letter-spacing:.1em}
.tv-feature-info h3{font-size:clamp(1.5rem,2.2vw,2.6rem);line-height:1.12;letter-spacing:-.04em;margin:1rem 0;overflow-wrap:anywhere}
.tv-feature-info>p{color:#bbb;font-size:.95rem;line-height:1.6;margin-bottom:1rem}
.tv-feature-info>.text-link{font-size:.875rem;border-bottom:1px solid #888}
.tv-controls{display:flex;align-items:center;gap:1.2rem;margin-top:1.5rem}
.tv-controls button{width:46px;height:46px;border-radius:50%;border:1px solid #656565;color:white;background:none;font-size:1.4rem;line-height:1}
.tv-controls button:hover{background:#d60d20;border-color:#d60d20}
.tv-controls>span{font-size:.8rem;letter-spacing:.1em;color:#ccc;font-variant-numeric:tabular-nums}
.tv-catalog-heading{display:flex;gap:1.5rem;justify-content:space-between;align-items:center;margin:2rem 0 1.4rem}
.tv-catalog-heading h3{font-size:1.35rem;line-height:1.3;letter-spacing:-.025em}
.tv-catalog-heading>span{font-size:.75rem;letter-spacing:.07em;color:#999;text-align:right}
.tv-filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.5rem}
.tv-filters button{background:#2a2a2a;color:#eee;border:1px solid #3b3b3b;border-radius:6px;padding:.6rem 1.15rem;font-size:.875rem;font-weight:600;min-height:44px}
.tv-filters button[aria-pressed="true"]{background:#fff;border-color:#fff;color:#111}
.tv-filters button:hover:not([aria-pressed="true"]){background:#3c3c3c}
.tv-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem 1.2rem}
.tv-card{display:block;min-width:0;border-radius:8px}
.tv-card-image{position:relative;aspect-ratio:16/9;background:#242424;border-radius:8px;overflow:hidden;border:2px solid transparent}
.tv-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.tv-card:hover img{transform:scale(1.03)}
.tv-card-play{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:32px;height:25px;border-radius:6px;background:#000c;color:#fff;font-size:.8rem;padding-left:2px}
.tv-card-selected{display:none;position:absolute;bottom:10px;left:10px;font-size:.65rem;letter-spacing:.05em;font-weight:700;padding:.2rem .4rem;background:#d60d20;color:#fff}
.tv-card[aria-current="true"] .tv-card-image{border-color:#ff4c63}
.tv-card[aria-current="true"] .tv-card-selected{display:block}
.tv-card-copy{padding:.8rem .2rem 0}
.tv-card-category{font-size:.75rem;letter-spacing:.07em;font-weight:600;color:#ff8a98}
.tv-card h4{font-size:1rem;font-weight:700;letter-spacing:-.015em;line-height:1.4;margin:.35rem 0 .4rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tv-card-copy p{font-size:.8rem;color:#a9a9a9;line-height:1.5}
.tv-card:hover h4{color:#ffbcc5}
.tv-catalog-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid #ffffff21}
.tv-catalog-footer>p{color:#aaa;font-size:.85rem}
.tv-catalog-footer .text-link{font-size:.875rem}
.tv-more{display:inline-flex;align-items:center;justify-content:center;gap:1.5rem;min-height:46px;border:1px solid #777;border-radius:6px;background:transparent;color:white;padding:.7rem 1.35rem;font-size:.9rem;font-weight:600}
.tv-more:hover{background:#333}
.tv-image-error img{visibility:hidden}
.tv-image-error::before{content:"JC TV";position:absolute;inset:0;display:grid;place-items:center;background:#3c0a12;color:#fff;font-weight:900;font-size:2rem;letter-spacing:-.04em}
.tv-hub a:focus-visible,.tv-hub button:focus-visible,.tv-player:focus-visible{outline:3px solid white;outline-offset:4px}
@media(max-width:1000px){.tv-featured{grid-template-columns:minmax(0,1.4fr) minmax(200px,1fr);gap:1.5rem}.tv-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.tv-catalog-heading>span{display:none}}
@media(max-width:750px){.tv-heading{grid-template-columns:1fr;gap:1.8rem;margin-bottom:2rem}.tv-hub .tv-heading h2{font-size:clamp(5rem,20vw,9rem);margin-top:1rem}.tv-heading-copy{justify-self:start;max-width:100%}.tv-tagline{font-size:2rem}.tv-heading-copy .tv-tagline br{display:none}.tv-heading-copy>p:not(.tv-tagline){font-size:1rem}.tv-featured{grid-template-columns:1fr;gap:1.5rem;padding-top:1.3rem}.tv-feature-info h3{font-size:1.8rem}.tv-channel-bar{align-items:flex-start;gap:1rem}.tv-channel-name strong{font-size:.9rem}.tv-channel-name span{font-size:.75rem}.tv-channel-link{font-size:.75rem;padding:.5rem .65rem;gap:.4rem}.tv-channel-name img{width:36px;height:36px}.tv-catalog-footer{justify-content:center}.tv-catalog-footer>p{width:100%;text-align:center}.tv-controls{margin-top:1rem}}
@media(max-width:500px){.tv-browser{border-radius:12px;padding-inline:14px}.tv-channel-bar{flex-wrap:wrap}.tv-channel-link{padding:.5rem .8rem;min-height:40px;align-items:center}.tv-hub .tv-heading .eyebrow{font-size:.75rem;letter-spacing:.04em}.tv-catalog{grid-template-columns:1fr;gap:1.8rem}.tv-feature-info h3{font-size:1.6rem}.tv-filters{gap:.45rem}.tv-filters button{padding:.6rem .75rem;font-size:.8rem}.tv-catalog-heading h3{font-size:1.25rem}.tv-big-play{width:70px;height:49px;font-size:1.45rem}.tv-card h4{-webkit-line-clamp:unset;display:block}.tv-catalog-footer .tv-more{width:100%}}
