/* =============================================
   features.css — Feature Page specific styles
   ============================================= */

/* Nav active state */
.nav-active {
    color: var(--text) !important;
    position: relative;
}
.nav-active::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0; right: 0;
    height: 2px;
    background: var(--grad);
    border-radius: 2px;
}

/* Features Hero */
.feat-hero {
    padding: 7rem 1.75rem 4rem;
    text-align: center;
}
.feat-hero-inner {
    max-width: 680px;
    margin: 0 auto;
}
.feat-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    margin: .6rem 0 1.25rem;
}
.feat-hero p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

/* Feature Blocks */
.feat-block {
    padding: 5rem 1.75rem;
    border-top: 1px solid var(--border);
}
.feat-block-dark {
    background: rgba(15,15,18,.7);
}
.feat-block-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    gap: 4rem;
    align-items: center;
}
.feat-block-left  { grid-template-columns: 1fr 1.4fr; }
.feat-block-right { grid-template-columns: 1.4fr 1fr; }

/* Feature Text side */
.feat-num {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: .35;
    margin-bottom: .5rem;
    font-variant-numeric: tabular-nums;
}
.feat-block-text h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.feat-block-text p {
    color: var(--muted);
    font-size: .97rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}
.feat-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.feat-list li {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .9rem;
    color: var(--text);
}
.feat-list li i {
    color: #10b981;
    font-size: .8rem;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: rgba(16,185,129,.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================
   Preview Shell — rendered app mockup
   ============================================= */
.preview-shell {
    background: #131316;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
        0 24px 60px rgba(0,0,0,.65),
        0 0 0 1px rgba(99,102,241,.1),
        inset 0 1px 0 rgba(255,255,255,.05);
    overflow: hidden;
    font-size: .78rem;
}
.preview-bar {
    background: #0d0d10;
    padding: .55rem .85rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: relative;
}
.preview-dots { display:flex; gap:.35rem; }
.preview-dots span { width:10px; height:10px; border-radius:50%; }
.preview-dots span:nth-child(1) { background:#ff5f57; }
.preview-dots span:nth-child(2) { background:#febc2e; }
.preview-dots span:nth-child(3) { background:#28c840; }
.preview-title {
    position: absolute; left:50%; transform:translateX(-50%);
    font-size:.68rem; color:var(--muted);
}

/* App nav inside preview */
.preview-app-nav {
    background: #131316;
    border-bottom: 1px solid var(--border);
    padding: 0 .9rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    height: 40px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.pan-logo {
    display:flex; align-items:center; gap:.25rem;
    font-size:.82rem; font-weight:300; white-space:nowrap; flex-shrink:0;
}
.pan-logo i { color:var(--primary); font-size:.9rem; }
.pan-logo strong { font-weight:700; }
.pan-cats { display:flex; gap:.1rem; flex-shrink:0; }
.pan-cat {
    color:var(--muted); font-size:.65rem;
    padding:.22rem .5rem; border-radius:5px; white-space:nowrap;
}
.pan-active {
    color:var(--text);
    background:rgba(39,39,42,.85);
}
.pan-search {
    display:flex; align-items:center; gap:.35rem;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06);
    border-radius:100px;
    padding:.22rem .65rem;
    color:var(--muted); font-size:.63rem;
    flex:1;
}
.pan-search-active { border-color:rgba(99,102,241,.5); color:var(--text); }
.pan-cursor { animation: blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.pan-filter-btn {
    background:var(--surface); border:1px solid var(--border);
    width:26px; height:26px; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    font-size:.65rem; color:var(--muted); flex-shrink:0;
}

/* Preview body */
.preview-body {
    padding: .85rem .9rem .8rem;
    background: var(--bg);
    background-image: radial-gradient(circle at top right, rgba(99,102,241,.04), transparent 40%);
}
.pre-sec-hd {
    display:flex; justify-content:space-between; align-items:center;
    font-size:.7rem; font-weight:600; margin-bottom:.55rem;
}
.pre-count { font-size:.6rem; color:var(--muted); font-weight:400; }

/* Video grid in preview */
.pre-grid { display:grid; gap:.55rem; }
.pre-grid-5 { grid-template-columns:repeat(5,1fr); }
.pre-card {
    background:rgba(24,24,27,.55);
    border:1px solid var(--border);
    border-radius:9px;
    overflow:hidden;
}
.pre-card-fade { opacity:.3; }
.pre-thumb {
    position:relative;
    padding-top:56.25%;
}
.pre-badge {
    position:absolute; bottom:3px; left:3px;
    font-size:.48rem; font-weight:700; color:white;
    padding:.1rem .3rem; border-radius:2px;
}
.pre-dur, .pre-live {
    position:absolute;
    font-size:.48rem; font-weight:600;
    padding:.1rem .3rem; border-radius:2px;
}
.pre-dur { bottom:3px; right:3px; background:rgba(0,0,0,.75); }
.pre-live { top:3px; right:3px; background:#ef4444; color:white; }
.pre-ttl {
    padding:.35rem .4rem;
    font-size:.6rem; font-weight:600; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Filter bar */
.pre-filter-bar {
    display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.6rem;
}
.pre-filter-chip {
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    padding:.18rem .55rem; border-radius:100px;
    font-size:.6rem; color:var(--muted);
}
.pre-filter-active {
    background:rgba(99,102,241,.15);
    border-color:rgba(99,102,241,.4);
    color:var(--text);
}

/* Live TV grid */
.pre-live-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:.55rem;
}
.pre-live-card {
    background:rgba(24,24,27,.6);
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
}
.pre-live-card:hover { border-color:var(--border-hi); }
.pre-live-active { border-color:rgba(99,102,241,.45); }
.pre-live-screen {
    position:relative;
    padding-top:56.25%;
}
.pre-live-overlay {
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:.35rem;
}
.pre-live-badge {
    background:#ef4444; color:white;
    font-size:.5rem; font-weight:700;
    padding:.1rem .35rem; border-radius:2px;
}
.pre-live-play {
    font-size:.7rem;
    background:rgba(99,102,241,.85);
    width:20px; height:20px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:white;
}
.pre-live-info { padding:.45rem .5rem; }
.pre-live-ch { margin-bottom:.2rem; }
.pre-ch-dot {
    font-size:.55rem; font-weight:700; color:white;
    padding:.1rem .35rem; border-radius:2px;
}
.pre-live-prog { font-size:.62rem; font-weight:600; line-height:1.3; }
.pre-live-meta { font-size:.55rem; color:var(--muted); margin-top:.15rem; }

/* Watch later list */
.pre-watchlater-list { display:flex; flex-direction:column; gap:.5rem; }
.pre-wl-item {
    display:flex; align-items:center; gap:.7rem;
    background:rgba(24,24,27,.55);
    border:1px solid var(--border);
    border-radius:9px;
    padding:.5rem .65rem;
}
.pre-wl-thumb {
    width:52px; height:36px; border-radius:6px; flex-shrink:0; position:relative;
}
.pre-wl-thumb .pre-badge { font-size:.45rem; }
.pre-wl-info { flex:1; min-width:0; }
.pre-wl-title { font-size:.63rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pre-wl-meta  { font-size:.55rem; color:var(--muted); margin-top:.12rem; }
.pre-wl-prog  { display:flex; align-items:center; gap:.4rem; margin-top:.2rem; }
.pre-wl-prog span { font-size:.53rem; color:var(--muted); white-space:nowrap; }
.pre-prog-bar { flex:1; height:3px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
.pre-prog-fill { height:100%; background:var(--grad); border-radius:2px; }
.pre-wl-play {
    color:var(--muted); font-size:.75rem; flex-shrink:0;
    transition:color .2s;
}
.pre-wl-item:hover .pre-wl-play { color:var(--primary); }

/* ---- DOWNLOAD CTA ---- */
.feat-cta {
    padding: 5rem 1.75rem;
    text-align: center;
    border-top: 1px solid var(--border);
    background: rgba(99,102,241,.04);
}
.feat-cta-inner { max-width: 560px; margin: 0 auto; }
.feat-cta h2 {
    font-size: 2rem; font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: .75rem;
}
.feat-cta p { color: var(--muted); margin-bottom: 2rem; }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
    .feat-block-left, .feat-block-right {
        grid-template-columns: 1fr;
    }
    .feat-block-right .feat-block-preview { order: -1; }
    .pre-grid-5 { grid-template-columns: repeat(3,1fr); }
    .pre-card:nth-child(n+4) { display:none; }
    .pre-live-grid { grid-template-columns: repeat(2,1fr); }
    .pre-live-card:nth-child(n+3) { display:none; }
}
@media (max-width: 600px) {
    .feat-block { padding: 3.5rem 1.1rem; }
    .feat-num { font-size: 2.5rem; }
    .pre-grid-5 { grid-template-columns: repeat(2,1fr); }
    .pan-cats { display:none; }
}