/**
 * Veckans TV — CSS för /nyheter/-archive
 *
 * Innehåller:
 *   1. Kort-CSS porterad från KiteTheme/page-kommande-program-ny.php (rad ~452-825)
 *   2. Veckans TV-specifik styling (header, vecko-strip, sektion-rubriker, poster-grid)
 *
 * SYNK-NOTIS: kort-CSS:en (rad 1-200 ungefär) speglar styling i Kommande-templaten.
 * Om Kommande-templaten ändrar visuell stil ska denna fil också uppdateras för
 * pixel-perfekt konsekvens med Kommande-sidan.
 *
 * @since v0.10.75 (Fas 1c av Veckans TV-bygget)
 */

/* v0.10.161: Skip-to-content-länk för keyboard-användare (WCAG 2.4.1).
   Dold tills focus via Tab — då slidar den in från toppen. */
.webbtv-skip-link {
    position: absolute;
    top: -48px;
    left: 16px;
    z-index: 99999;
    background: #1a1a1a;
    color: #fff;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 0 0 6px 6px;
    font-weight: 600;
    font-size: 14px;
    transition: top .15s ease-out;
}
.webbtv-skip-link:focus {
    top: 0;
    outline: 2px solid #f4c54a;
    outline-offset: 2px;
}

/* ===================================================================
 * 1. KORT-CSS (portad från Kommande-templaten)
 * =================================================================== */

.vtv-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
/* v0.10.160: Direkt övergång 2-kol → 4-kol utan mellansteg vid 3-kol.
   Med 8 items max är båda jämnt delbara (4 rader / 2 rader). 3-kol-zonen
   gav 3+3+2 ojämn rad på landskap-mobil och små tablets. */
@media (min-width: 992px) {
    .vtv-grid-container { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

.program-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: 10px;
    transition: transform .2s ease-out, box-shadow .2s ease-out;
    background: #fdfdfd;
    border: 1px solid #eee;
    overflow: hidden;
}
.program-card-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.program { display: flex; flex-direction: column; flex-grow: 1; }
.program-img { position: relative; background: #eee; }
.program-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 40/21;
    object-fit: cover;
    border-bottom: 1px solid #eee;
}
.program-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 40/21;
    color: #6b6b70; /* v0.10.161: WCAG-fix #aaa (2.6:1) → 4.9:1 */
    font-size: .9em;
}

/* Status-badges (top-right) */
.badge-ny-serie, .badge-tillbaka, .badge-ny-sasong, .badge-nytt-avsnitt, .badge-aktuell, .badge-final {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #fff;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: .68rem;
    z-index: 3;
    letter-spacing: .2px;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.badge-ny-serie     { background: rgba(103, 81, 188, .9); }
.badge-tillbaka     { background: rgba(43, 98, 177, .9); }
.badge-ny-sasong    { background: rgba(63, 106, 148, .9); }
.badge-nytt-avsnitt { background: rgba(42, 193, 92, .9); }
.badge-aktuell      { background: rgba(250, 80, 45, .92); } /* Veckans urval-specifik */
/* v0.11.53: Säsongsfinal — amber, distinkt från övriga lila/blå/gröna nyanser.
   Signalerar "händer en gång per säsong" likt Försvinner snart-badgen. */
.badge-final        { background: rgba(212, 160, 23, .9); }

/* v0.11.8: Premiär-badge för linjär-TV-premiär i Topp ikväll-rad.
   v0.11.47: Lila → grön. Lila reserveras nu för "Ny serie" (S1 E1).
   Premiär används som fallback för fall där scraper detekterar E1 utan
   tydlig season-data (film-premiärer, oklar serie-struktur). Grön matchar
   tabla-renderarens paletter. */
.badge-premiere {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(42, 193, 92, .9);
    color: #fff;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: .68rem;
    z-index: 3;
    letter-spacing: .2px;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.badge-betalprogram {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(30,30,30,.78);
    color: #fff;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: .68rem;
    z-index: 3;
    letter-spacing: .2px;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

/* Airtime-badge (top-left) */
.airtime-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 5px;
    font-size: .72rem;
    letter-spacing: .2px;
    z-index: 3;
}
@media (max-width: 600px) {
    .airtime-badge,
    .badge-ny-serie, .badge-tillbaka, .badge-ny-sasong, .badge-nytt-avsnitt,
    .badge-betalprogram, .badge-aktuell, .badge-final {
        padding: 3px 6px;
        font-size: .64rem;
    }
}

.program-ingress-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.88);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 4;
    padding: 6% 12px;
}
.program-ingress-content { width: 100%; max-height: 100%; overflow-y: auto; }
.program-ingress-content p {
    margin: 0;
    color: #fff !important;
    font-size: .85rem !important;
    line-height: 1.35 !important;
}
@media (min-width: 992px) {
    .program-card-link:hover .program-ingress-overlay { opacity: 1; visibility: visible; }
}

.program-info {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
}
.program-content-main { flex-grow: 1; margin-bottom: 6px; }
.program-title {
    font-size: 1.05rem;
    margin: 0 0 4px;
    color: #1a1a1a;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 600px) {
    .program-title { font-size: .88rem; font-weight: 600; line-height: 1.2; }
}
.program-metadata { font-size: .85rem; color: #666; margin: 0 0 1px; line-height: 1.35; }
.meta-separator { color: #ccc; margin: 0 4px; }

/* Lead-rad för Veckans urval (mellan titel och meta-rad) */
.program-lead {
    font-size: .86rem;
    color: #555;
    line-height: 1.4;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 600px) {
    .program-lead { display: none; }
}

.program-meta {
    font-size: .9rem;
    color: #555;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
}

/* ===== Veckans urval — artikel-känsla (v0.10.111) ===== */
/* Differentiera artikelkort från program-kort: större rubrik, datum-rad,
   större lead, kategori-pill på bilden, inget IMDb-badge. */
.vtv-urval-card .vtv-urval-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 4px;
}
.vtv-urval-card .vtv-urval-datum {
    font-size: 0.78rem;
    color: #8a8a90;
    margin: 0 0 10px;
    text-transform: none;
    letter-spacing: 0.2px;
}
.vtv-urval-card .vtv-urval-lead {
    font-size: 0.92rem;
    line-height: 1.45;
    color: #444;
    margin: 0 0 12px;
    /* Tillåt 4 rader istället för 2 — artikel-känsla */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Kategori-pill överst-vänster på bilden.
   v0.10.151: top + padding + font matchar status-badges (Tillbaka/Aktuell osv)
   så de hamnar på samma höjd och visuellt rim. */
.vtv-urval-card .vtv-urval-kategori {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 5px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
@media (max-width: 600px) {
    .vtv-urval-card .vtv-urval-kategori {
        padding: 3px 6px;
        font-size: .64rem;
    }
}
/* Dölj IMDb på artikelkort (existerar i HTML från andra kort men inte här) */
.vtv-urval-card .imdb { display: none; }

/* "Betalprogram"-tag (v0.10.110) på Veckans urval-kort. Placeras till vänster
   om kanal-badge för always-betal-tjänster. */
.wn-betal-tag {
    display: inline-block;
    padding: 3px 8px;
    background: #444;
    color: #fff;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.kanal-badge {
    border: 1px solid #ddd;
    color: #555;
    background: #f7f7f7;
    font-weight: normal;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
}
.imdb {
    background: #f5c518;
    color: #000;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: .82rem;
    cursor: pointer;
}
.kanal-logo-in-badge { height: 15px; width: auto; margin-right: 6px; }
.kanal-logo-in-badge[alt^="SVT"] { height: 12px; }
.program-favorite { margin-left: auto; }

@media (max-width: 600px) {
    .program-metadata { display: none; }
    .program-meta { border-top: none; padding-top: 0; }
    .program-meta .imdb { display: none; }
}

/* ===================================================================
 * 2. VECKANS TV-specifik styling (header, vecko-strip, sektion-rubriker)
 * =================================================================== */

.vtv-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 48px;
}
@media (max-width: 768px) {
    .vtv-page { padding: 0 16px 32px; }
}

/* Header */
.vtv-header {
    text-align: center;
    padding: 16px 0 8px;
}
.vtv-header h1 {
    font-weight: 300;
    font-size: 2.0rem;
    letter-spacing: -.01em;
    color: #1a1a1a;
    margin: 0 0 2px;
    line-height: 1.1;
}
.vtv-header .vtv-week-meta {
    color: #666;
    font-size: 1.05rem;
    font-weight: 400;
    margin: 0;
}
@media (max-width: 768px) {
    .vtv-header { padding: 14px 0 4px; }
    .vtv-header h1 { font-size: 1.5rem; }
    .vtv-header .vtv-week-meta { font-size: .95rem; }
}

/* Vecko-strip */
.vtv-week-strip-wrap {
    padding: 12px 0 16px;
    /* v0.10.147: relative för att kunna positionera "Tillbaka till idag"-pill absolut. */
    position: relative;
}
.vtv-week-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vtv-week-nav {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 999px;
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .15s;
    line-height: 1;
    padding: 0;
}
.vtv-week-nav:hover {
    background: #f5f7fa;
    color: #1a1a1a;
    border-color: #c3c8d0;
}
/* v0.10.148: disabled-pil när cap nådd (förra/nästa vecka utanför ±1) */
.vtv-week-nav-disabled {
    opacity: .3;
    cursor: not-allowed;
    pointer-events: none;
}
.vtv-week-days {
    display: flex;
    flex: 1;
    max-width: 760px;
    margin: 0 4px;
    gap: 6px;
    justify-content: center;
}
.vtv-day-cell {
    /* v0.10.145: avrivningskalender-stil — lätt stående, outline, stor siffra */
    flex: 1;
    max-width: 66px;
    aspect-ratio: 1 / 1.15;
    padding: 6px 4px;
    text-align: center;
    border-radius: 10px;
    transition: background .15s, color .15s, border-color .15s;
    position: relative;
    border: 1px solid #e5e5e5;
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.vtv-day-cell:hover {
    background: #f5f7fa;
    border-color: #c3c8d0;
}
.vtv-day-cell.active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}
.vtv-day-cell .vtv-day-name {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #6b6b70;
    margin-bottom: 2px;
}
.vtv-day-cell.active .vtv-day-name { color: rgba(255,255,255,.72); }
.vtv-day-cell .vtv-day-num {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    color: #1a1a1a;
}
.vtv-day-cell.active .vtv-day-num { color: #fff; }
.vtv-day-cell .vtv-day-count {
    font-size: .68rem;
    color: #6b6b70;
    margin-top: 2px;
}
.vtv-day-cell.active .vtv-day-count { color: rgba(255,255,255,.85); }
.vtv-day-cell.today::before {
    content: "";
    position: absolute;
    top: 5px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2ac15c;
}

/* "Tillbaka till idag"-pill — bara på annan vecka.
   v0.10.147: absolut-positionerad så den inte trycker ner stripen (layout-hopp).
   v0.10.149: pillen byter sida baserat på pilriktning (matchar tids-riktning mot idag).
   Mobil: kompakt cirkel med bara pil (texten döljs via .vtv-today-pill-text). */
.vtv-today-pill-wrap {
    position: absolute;
    top: 14px;
    z-index: 1;
}
.vtv-today-pill-wrap-left  { left: 4px; }
.vtv-today-pill-wrap-right { right: 4px; }
.vtv-today-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #1a1a1a;
    color: #fff !important;
    border-radius: 999px;
    text-decoration: none !important;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1;
    transition: opacity .15s;
}
.vtv-today-pill:hover { opacity: 0.85; }
.vtv-today-pill-icon { font-weight: 600; }

@media (max-width: 768px) {
    .vtv-week-strip-wrap { padding: 8px 0 20px; }
    .vtv-week-days { margin: 0 2px; }
    .vtv-day-cell {
        max-width: none;
        aspect-ratio: 1 / 1.1;
        padding: 5px 3px;
        border-radius: 8px;
    }
    .vtv-day-cell .vtv-day-num { font-size: 1.2rem; }
    .vtv-day-cell .vtv-day-name { font-size: .6rem; letter-spacing: .05em; }
    .vtv-day-cell .vtv-day-count { display: none; } /* "idag"-text bort på mobil */
    .vtv-day-cell.today::before {
        /* v0.11.45: badge-stil — pricken sticker ut snett från cellens
         * hörn med vit ring runt. Cellen (66x76) är för liten för att
         * rymma prick INOM hörnet med luft åt både kant OCH text.
         * Klassisk notification-badge-mönster (samma som iOS-app-ikoner). */
        top: -3px;
        right: -3px;
        width: 8px;
        height: 8px;
        border: 1.5px solid #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }
    .vtv-week-nav { width: 32px; height: 32px; font-size: 1rem; }
    /* Mobil: pill kollapsar till kompakt cirkel med bara pilen — sparar bredd */
    .vtv-today-pill {
        width: 32px;
        height: 32px;
        padding: 0;
        justify-content: center;
        font-size: 1rem;
        gap: 0;
    }
    .vtv-today-pill-text { display: none; }
    .vtv-today-pill-wrap { top: 12px; }
    .vtv-today-pill-wrap-left  { left: 2px; }
    .vtv-today-pill-wrap-right { right: 2px; }
}

/* Sektion */
.vtv-section + .vtv-section { margin-top: 72px; }
.vtv-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e1e4e8;
    gap: 16px;
}
.vtv-section-title {
    font-size: 1.9rem;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.2;
    margin: 0;
}
.vtv-section-title .vtv-section-meta {
    font-size: .92rem;
    color: #6b6b70;
    font-weight: 400;
    margin-left: 10px;
}
.vtv-section-link {
    font-size: .9rem;
    color: #23467d;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .15s;
    text-decoration: none;
}
.vtv-section-link:hover { color: #1a1a1a; }

/* v0.11.18: mindre titel-storlek i arkiv-vyn (många kort = mer luft behövs) */
.vtv-section-arkiv .vtv-urval-card .vtv-urval-title {
    font-size: 1rem;
    line-height: 1.3;
}

/* v0.11.17: arkiv-vy (?arkiv=1) — Tillbaka-länk + paginering */
.vtv-arkiv-back {
    color: #23467d;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
}
.vtv-arkiv-back:hover { color: #1a1a1a; text-decoration: underline; }
.vtv-arkiv-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 40px 0 60px;
    padding-top: 24px;
    border-top: 1px solid #e1e4e8;
}
.vtv-arkiv-pagelink {
    color: #23467d;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 14px;
    border: 1px solid #d0d4d9;
    border-radius: 6px;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.vtv-arkiv-pagelink:hover {
    background: #f6f7f8;
    border-color: #23467d;
    color: #1a1a1a;
}
.vtv-arkiv-pagestate {
    color: #6b6b70;
    font-size: .95rem;
    white-space: nowrap;
}
/* v0.11.20: mobile-tight paginering — knappar fick text-radbryt + saknade luft mot nästa sektion */
@media (max-width: 768px) {
    .vtv-arkiv-pagination {
        gap: 10px;
        margin: 32px 0 56px;
    }
    .vtv-arkiv-pagelink {
        padding: 6px 10px;
        font-size: .9rem;
    }
    .vtv-arkiv-pagestate {
        font-size: .85rem;
    }
}
.vtv-section-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (max-width: 768px) {
    .vtv-section + .vtv-section { margin-top: 56px; }
    .vtv-section-title { font-size: 1.5rem; }
    .vtv-section-title .vtv-section-meta {
        display: block;
        margin-left: 0;
        font-size: .85rem;
        margin-top: 2px;
    }
}

/* Försvinner snart — poster-grid (2:3 aspect, stående bilder) */
.vtv-poster-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
@media (max-width: 1199px) {
    .vtv-poster-grid { grid-template-columns: repeat(4, 1fr); }
    /* v0.10.160: Utöka v0.10.88-fixen — dölj 5:e item HELA vägen ner till mobil.
       Resultat: 4-kol = 4 items (1 hel rad), 2-kol = 4 items (2+2 hela rader).
       Samma regel för Försvinner snart OCH Kommande program (båda har klassen). */
    .vtv-poster-card:nth-child(5) { display: none; }
}
@media (max-width: 768px) {
    .vtv-poster-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    /* :nth-child(5)-fixen ärvs från 1199-regeln ovan (kaskad). */
}

/* Dismiss-knapp på Försvinner snart-poster (admin-only, v0.10.88) */
.vtv-poster-card { position: relative; }
.vtv-dismiss-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,.65);
    color: #fff;
    border: none;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s, background .15s;
}
.vtv-poster-card:hover .vtv-dismiss-btn { opacity: 1; }
.vtv-dismiss-btn:hover { background: rgba(0,0,0,.85); }

/* Admin-edit-länk på Topp ikväll-kort (v0.10.88) — diskret ✏️ för admins */
.wdtvf-admin-edit {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,.65);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    z-index: 3;
    opacity: 0;
    transition: opacity .15s, background .15s;
}
.program-grid-item { position: relative; }
.program-grid-item:hover .wdtvf-admin-edit { opacity: 1; }
.wdtvf-admin-edit:hover { background: rgba(0,0,0,.85); color: #fff; }

.vtv-poster-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform .2s;
    color: inherit;
    text-decoration: none;
}
.vtv-poster-card:hover { transform: translateY(-3px); }
.vtv-poster-img {
    position: relative;
    aspect-ratio: 2/3;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.vtv-poster-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vtv-poster-channel {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,.78);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
    letter-spacing: .02em;
    z-index: 2;
}

/* v0.10.161/162: "X dagar kvar"-amber-badge på Försvinner snart-poster.
   Dynamisk text (matchar /sista-chansen/-konventionen) — ersätter
   under-titel-texten helt (var dubbel-info). Färg amber-gul (#f4c54a) —
   INTE primary-orange #fa502d (för aggressiv på stor yta).
   Svart text för WCAG-kontrast. nowrap förhindrar text-wrap på smala viewports. */
.vtv-poster-deadline-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #f4c54a;
    color: #1a1a1a;
    font-size: .72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: .01em;
    white-space: nowrap;
    z-index: 2;
}
/* Smal mobil-fallback — minska storleken så "7 dagar kvar" får plats utan
   att krocka med kanal-badgen (top-left). */
@media (max-width: 480px) {
    .vtv-poster-deadline-badge {
        font-size: .65rem;
        padding: 3px 8px;
    }
}
/* v0.10.154: Mer luft inom kortet — padding-bottom 14px så "Sista dagen X" /
   "Tillgänglig X" inte ligger hopstoppad mot nästa sektion.
   v0.10.155: Reducerad margin under titeln (6 → 3px) — deadline-texten ska
   sitta nära titeln som en under-rad, men padding-bottom på info-blocket
   bibehålls för andningsrum mot nästa sektion. */
.vtv-poster-info { padding: 10px 2px 14px; }
.vtv-poster-title {
    font-size: .92rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.25;
    margin: 0 0 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vtv-poster-deadline {
    font-size: .78rem;
    color: #6b6b70;
}

/* Veckans urval — "Sista dagen X"-text i meta-raden (v0.10.85).
   Saklig grå, ingen alarm-färg — matchar Försvinner snart-stilen.
   margin-left: auto trycker texten till höger sida i flex-meta-raden. */
.vtv-urval-lastday {
    font-size: .82rem;
    color: #6b6b70;
    font-style: italic;
    margin-left: auto;
}

/* Tom sektion (failsafe) */
.vtv-empty-section {
    padding: 24px;
    text-align: center;
    color: #6b6b70;
    font-style: italic;
    border: 1px dashed #e1e4e8;
    border-radius: 8px;
}

/* Admin-länk längst ner */
.vtv-admin-link {
    display: inline-block;
    margin: 48px auto 0;
    padding: 10px 14px;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    color: #666;
    text-decoration: none;
    font-size: 13px;
    text-align: center;
}
.vtv-admin-link:hover { background: #ebebeb; }
.vtv-admin-wrapper {
    text-align: center;
    margin-bottom: 40px;
}

/* ============================================================ */
/* TOPP IKVÄLL — TV-bilage-stil radlayout (v0.10.115)           */
/* Skild från Veckans urval-grid för visuell kontrast.          */
/* ============================================================ */

.vtv-topp-list {
    display: grid;
    /* min(480px, 100%): skydd mot horisontell overflow på smala mobiler.
       Utan min() tvingas kolumnen alltid till 480px → swayar i sidled på <480px. */
    grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
    gap: 12px;
}

/* Wrapper för topp-row + ✕-knapp (knappen kan inte vara child av <a>). */
.topp-row-wrap {
    position: relative;
}
.topp-exclude-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 10;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}
.topp-row-wrap:hover .topp-exclude-btn { opacity: 1; }
.topp-exclude-btn:hover { background: #c1272d; }
/* Mobil: alltid synlig (ingen hover) */
@media (hover: none) {
    .topp-exclude-btn { opacity: 1; }
}

.topp-row {
    display: grid;
    grid-template-columns: 80px 160px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 16px 14px 12px;
    background: #fff;
    border-radius: 8px;
    border-left: 5px solid var(--topp-channel-color, #999);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    text-decoration: none !important;
    color: inherit;
    transition: box-shadow .2s ease, transform .15s ease;
}
.topp-row:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
    transform: translateY(-1px);
    text-decoration: none !important;
    color: inherit;
}

.topp-time-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.topp-time {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}
.topp-channel {
    /* v0.10.143: tiden vänsterställd, kanalnamnet centrerat under den */
    align-self: center;
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 6px;
    font-weight: 600;
}

.topp-thumb-wrap {
    position: relative;
    width: 160px;
    height: 90px;
}
.topp-thumb {
    width: 160px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
/* v0.11.7/8: Topp ikväll-thumbnail är ~160px bred — full badge-storlek blir
   för dominant på den ytan. Override gör badgar ~50% mindre här utan
   att påverka övriga badge-användningar (kommande-program, Försvinner snart).
   Gäller ALLA badge-typer på topp-row (betal + serie-badges). */
.topp-thumb-wrap .badge-betalprogram,
.topp-thumb-wrap .badge-premiere,
.topp-thumb-wrap .badge-ny-serie,
.topp-thumb-wrap .badge-ny-sasong,
.topp-thumb-wrap .badge-final {
    padding: 2px 6px !important;
    font-size: 0.6rem !important;
    top: 3px !important;
    right: 3px !important;
    letter-spacing: 0.1px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
}

.topp-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.topp-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #1a1a1a;
    margin: 0 0 4px;
    line-height: 1.2;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.topp-meta {
    font-size: 12px;
    color: #666;
    margin: 0 0 6px;
    line-height: 1.3;
}
.topp-imdb {
    background: #ffc107;
    color: #000;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}
.topp-ingress {
    font-size: 13px;
    color: #444;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 600px) {
    /* Mobil: stapla tid + kanal + thumb vertikalt i vänsterspalt (80px),
       text får hela högerspalt → massor mer plats för titel/ingress.
       Långa kanalnamn (KUNSKAPSKANALEN) bryts naturligt till 2 rader. */
    .topp-row {
        grid-template-columns: 80px 1fr;
        grid-template-areas:
            "time text"
            "thumb text";
        gap: 8px 12px;
        padding: 12px;
        align-items: start;
    }
    .topp-time-col { grid-area: time; }
    .topp-thumb-wrap { grid-area: thumb; }
    .topp-text-col { grid-area: text; }
    .topp-time { font-size: 24px; }
    .topp-channel {
        font-size: 11px;
        margin-top: 4px;
        overflow-wrap: break-word;
        line-height: 1.2;
    }
    .topp-thumb-wrap, .topp-thumb { width: 80px; height: 45px; }
    .topp-title { font-size: 15px; -webkit-line-clamp: 2; }
    .topp-ingress { -webkit-line-clamp: 3; }
}