/* ============================================================
   tv.css — page-specific styles for template-tv.php
   Loaded AFTER the shared bundle (tokens → base → sections →
   hero → animations). Only novel classes live here; shared
   classes (.spc-plan, .spc-bento, .spc-bundle, .spc-rolloff,
   .spc-modal, .spc-applist, .spc-band, etc.) are NOT touched.
   ============================================================ */

/* ---- Hero rise (reused on TV hero, defined per-page to avoid bundle dep) ---- */
.spc-page-tv .spc-hero__rise {
    opacity: 0;
    transform: translateY(28px);
    animation: spcRise .75s var(--ease-out) forwards;
}
.spc-page-tv .spc-hero__rise.d1 { animation-delay: .15s; }
.spc-page-tv .spc-hero__rise.d2 { animation-delay: .3s; }
.spc-page-tv .spc-hero__rise.d3 { animation-delay: .48s; }

/* ---- TV plan grid (5 plans — wider than 3-col internet grid) ---- */
.spc-tv-plan-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    align-items: stretch;
}

/* ---- Roll-off inline line on each plan card ---- */
.spc-tv-rolloff {
    font-size: .84rem;
    font-weight: 700;
    color: var(--green);
    margin-bottom: 10px;
    line-height: 1.4;
}

/* ---- "Spectrum Internet required" proximity note on Stream cards ---- */
.spc-required-note {
    font-size: 1rem;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 8px;
}

/* ---- "Channel availability varies by location." proximity note ---- */
.spc-tv-location-note {
    font-size: .88rem;
    font-weight: 600;
    color: var(--muted-fg);
    margin-bottom: 8px;
}

/* ---- Apps value line on plan cards ---- */
.spc-tv-apps-value {
    font-size: .88rem;
    font-weight: 600;
    color: var(--muted-fg);
    margin-bottom: 14px;
    font-style: italic;
}

/* ---- Tier columns (three-column app breakdown) ---- */
.spc-tv-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: clamp(36px, 5vw, 56px);
}

.spc-tv-tier {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--dk-border);
    border-radius: var(--radius-lg);
    padding: 26px;
}

.spc-tv-tier--plus {
    background: rgba(0, 97, 255, .1);
    border-color: rgba(0, 97, 255, .3);
}

.spc-tv-tier--platinum {
    background: rgba(0, 181, 255, .1);
    border-color: rgba(0, 181, 255, .35);
    position: relative;
    overflow: hidden;
}
.spc-tv-tier--platinum::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--grad);
}

.spc-tv-tier__name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
}

.spc-tv-tier__price {
    font-size: .9rem;
    font-weight: 700;
    color: var(--cyan);
    margin: 0 0 4px;
}

.spc-tv-tier__value {
    font-size: .82rem;
    color: var(--dk-muted);
    margin: 0 0 16px;
    font-style: italic;
}

.spc-tv-tier__apps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.spc-tv-tier__apps li {
    display: flex;
    gap: 9px;
    font-size: .9rem;
    color: var(--dk-muted);
    align-items: flex-start;
}

.spc-tv-tier__apps svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--green);
    margin-top: 3px;
}

/* ---- Premium channels list inside bento dark cell ---- */
.spc-tv-premiums {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.spc-tv-premiums li {
    display: flex;
    gap: 9px;
    font-size: .9rem;
    color: var(--dk-muted);
    align-items: flex-start;
}

.spc-tv-premiums svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--green);
    margin-top: 3px;
}

/* ---- Responsive ---- */
@media (max-width: 1280px) {
    .spc-tv-plan-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1023px) {
    .spc-tv-tier-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .spc-tv-plan-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
}

@media (max-width: 540px) {
    .spc-tv-plan-grid {
        grid-template-columns: 1fr;
    }
}

/* ==== Secondary plans (Stream / Mi Plan Latino) — wide split cards ==== */
.spc-tv-altgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.spc-tv-altcard {
    display: flex; justify-content: space-between; align-items: center; gap: 22px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 26px 28px; transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.spc-tv-altcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.spc-tv-altcard__info { max-width: 56%; }
.spc-tv-altcard__info .spc-plan__tag { margin-bottom: 8px; }
.spc-tv-altcard__buy { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 6px; flex-shrink: 0; }
@media (max-width: 980px) {
    .spc-tv-altgrid { grid-template-columns: 1fr; }
    .spc-tv-altcard { flex-direction: column; align-items: flex-start; }
    .spc-tv-altcard__info { max-width: none; }
    .spc-tv-altcard__buy { align-items: flex-start; text-align: left; }
}

/* ==== Apps marquee inside the dark section: light text + dark edge fades ==== */
.spc-section--dark .spc-applist { --mq-fade: var(--navy-950); padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.spc-section--dark .spc-applist span { color: #dce9f8; }
.spc-section--dark .spc-applist .sep { background: var(--grad); opacity: .9; }