/*
Theme Name: Radio 51 Rock
Description: Tema Custom App-First per Radio 51 Rock
Author: Agenzia
Version: 1.0.0
*/

/* ==========================================
   FONT LOCALI (Zero chiamate esterne)
   ========================================== */

/* FONT: ANTON (Usato per Titoli H1, H2, UI in maiuscolo) */
@font-face {
    font-family: 'Anton';
    src: url('./fonts/anton-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* FONT: INTER - Regular 400 (Usato per paragrafi e testi base) */
@font-face {
    font-family: 'Inter';
    src: url('./fonts/inter-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* FONT: INTER - 500 */
@font-face {
    font-family: 'Inter';
    src: url('./fonts/inter-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* FONT: INTER - 600 */
@font-face {
    font-family: 'Inter';
    src: url('./fonts/inter-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* FONT: INTER - 700 */
@font-face {
    font-family: 'Inter';
    src: url('./fonts/inter-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* FONT: INTER - 800 */
@font-face {
    font-family: 'Inter';
    src: url('./fonts/inter-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* FONT: INTER - 900 */
@font-face {
    font-family: 'Inter';
    src: url('./fonts/inter-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
   2. DESIGN TOKENS (Variabili Globali in REM)
   ========================================== */
:root {
    /* Palette Colori - Dark Mode First */
    --brand-red: #E52525;
    --brand-red-hover: #FF3B3B;
    --brand-red-pressed: #C81F1F;
    --brand-black: #1D1D1B;
    
    --bg-0: #0F1010;
    --bg-1: #121212;
    --surface: #1D1D1B;
    --card: #232322;
    --stroke: #2E2E2C;
    --stroke-light: #424240;
    
    --text-primary: #F5F5F5;
    --text-button: #FFFFFF;
    --text-muted: #CFCFCF;
    --text-subtle: #A9A9A9;

    /* Tipografia */
    --font-display: 'Anton', sans-serif;
    --font-ui: 'Inter', sans-serif;

    /* Spaziature */
    --space-1: 0.5rem;    
    --space-2: 1rem;      
    --space-3: 1.5rem;    
    --space-4: 2rem;      
    --space-5: 3rem;      
    --space-6: 4rem;      

    /* Forme / Radius */
    --radius-btn: 0.5rem;   
    --radius-card: 0.75rem; 
    --radius-sm: 0.25rem;   

    /* Layout Massimo */
    --layout-max-width: 80rem; 
    --player-height: 5.625rem; 
    --bottom-nav-height: 4rem; 
}

/* ==========================================
   3. RESET E REGOLE BASE (INCLUSO CONTAINER GLOBALE)
   ========================================== */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

html.disable-scroll,
html.disable-scroll body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-0); color: var(--text-primary);
    font-family: var(--font-ui); line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* Aggiunto il padding-top per il nuovo header fixed */
    padding-top: 5.5rem; 
    padding-bottom: 7rem;
}

/* LA CLASSE MADRE PER GOVERNARE LE DIMENSIONI DEL SITO */
.container {
    width: 100%;
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.transition-fade { transition: 0.4s; opacity: 1; }
html.is-animating .transition-fade { opacity: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* ==========================================
   4. TIPOGRAFIA FLUIDA
   ========================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display); font-weight: 400;
    letter-spacing: 0.03125rem; line-height: 1.1;
    text-transform: uppercase; margin-bottom: var(--space-2);
}
h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: var(--space-4); }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }

a { color: var(--text-primary); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--brand-red); }

/* ==========================================
   5. HEADER APP-FIRST & NAVIGAZIONE
   ========================================== */
.site-header { 
    height: 5.5rem;
    border-bottom: 1px solid var(--stroke);
    background-color: rgba(15, 16, 16, 0.85);
    backdrop-filter: blur(0.625rem);
    /* Modificato da sticky a fixed + aggiunto left: 0 */
    position: fixed; top: 0; left: 0; z-index: 9000;
    width: 100%;
}

.header-inner { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 100%;
    border-bottom: 1px solid var(--stroke);
}

.logo { display: flex; align-items: center; height: 100%; flex-shrink: 0; }
.site-logo-img { max-height: 3.5rem; width: auto; display: block; transition: transform 0.2s; }
.site-logo-img:hover { transform: scale(1.05); }

/* --- INIZIO MENU DESKTOP --- */
.desktop-main-nav {
    display: none; 
}

@media (min-width: 1024px) {
    .desktop-main-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        gap: clamp(1rem, 2vw, 2.5rem);
        padding: 0 1.5rem;
        min-width: 0;
    }
}

/* --- INIZIO MENU DESKTOP --- */
.desktop-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* Spaziatura perfetta tra icona e testo */
    font-family: var(--font-display);
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    color: var(--text-primary); /* Bianco di base */
    text-transform: uppercase;
    transition: color 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

/* La classe dedicata per l'icona nel menù desktop */
.desktop-nav-link .nav-icon {
    width: 1.25rem; /* Dimensione bilanciata rispetto al font 1.125rem */
    height: 1.25rem;
    fill: currentColor; /* Magia: copia il colore del testo (bianco o rosso) */
    transition: transform 0.2s ease;
}

/* Effetto Hover e Stato Attivo */
.desktop-nav-link:hover,
.desktop-nav-link.active {
    color: var(--brand-red); /* Il testo diventa rosso... e l'icona lo segue! */
}

/* --- FINE MENU DESKTOP --- */

.header-actions { 
    display: flex; 
    align-items: center; 
    gap: 1.5rem; 
    flex-shrink: 0; 
}

/* BOTTONE HEADER (Ascolta in App - Stile Unificato) */
.btn-app-simple {
    background-color: #FFFFFF;
    color: var(--brand-black);
    border: none;
    border-radius: 2rem;
    padding: 0.6rem 1.2rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    /* Transizione unificata per colore, sfondo e movimento a 0.2s */
    transition: all 0.2s ease; 
}

/* L'effetto Hover richiesto per il Desktop */
.btn-app-simple:hover {
    background-color: var(--brand-red);
    color: var(--text-button);
}

/* L'effetto di pressione (click/tap) */
.btn-app-simple:active { 
    transform: scale(0.95); 
    opacity: 0.8; 
}

/* Classi di utilità per lo scambio dei bottoni Desktop/Mobile */
.hide-on-desktop { display: none; }

.eq-burger { position: relative; width: 2.5rem; height: 2.5rem; background: transparent; border: none; cursor: pointer; outline: none; }
.eq-burger .bar { position: absolute; bottom: 0.5rem; width: 0.125rem; background: var(--text-primary); border-radius: 0.125rem; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.eq-burger .bar:nth-child(1) { left: 0.65rem; height: 35%; }
.eq-burger .bar:nth-child(2) { left: 1.05rem; height: 70%; }
.eq-burger .bar:nth-child(3) { left: 1.45rem; height: 45%; }
.eq-burger .bar:nth-child(4) { left: 1.85rem; height: 60%; }

.eq-burger.is-active .bar { height: 2rem; bottom: 0; top: 0; margin: auto; background: var(--brand-red); }
.eq-burger.is-active .bar:nth-child(1) { left: 1.1875rem; transform: rotate(45deg); }
.eq-burger.is-active .bar:nth-child(2) { left: 1.1875rem; transform: scaleY(0); opacity: 0; }
.eq-burger.is-active .bar:nth-child(3) { left: 1.1875rem; transform: scaleY(0); opacity: 0; }
.eq-burger.is-active .bar:nth-child(4) { left: 1.1875rem; transform: rotate(-45deg); }

/* ==========================================
   5.1 MENU FULLSCREEN ROCK STYLE
   ========================================== */
.fullscreen-nav {
    position: fixed; inset: 0; background: var(--bg-0); z-index: 8000;
    display: flex; flex-direction: column;
    padding: 6.5rem 1.5rem 6.5rem 1.5rem;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    overflow-y: auto; overscroll-behavior: none;
}

.fullscreen-nav.is-open { opacity: 1; pointer-events: auto; }

.nav-links-wrapper {
    display: flex; flex-direction: column; flex-grow: 0; margin: auto;
    gap: 1.5rem; /* Aumentato leggermente il gap per far respirare il testo grande */
    width: 100%; max-width: 40rem; 
}

.nav-block-link {
    flex: 1 1 auto; min-height: 3.5rem; 
    display: flex; align-items: center; justify-content: center;
    background: transparent; /* Rimosso lo sfondo rosso */
    color: var(--text-primary);
    font-family: var(--font-display); 
    font-size: clamp(2rem, 8vw, 3.5rem); /* Testo più grande come da mockup */
    letter-spacing: 0.05rem; text-transform: uppercase; text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, color 0.2s ease;
    transform: translateY(1.25rem); opacity: 0; 
}

/* Hover e interazioni pulite: solo cambio colore del testo */
.fullscreen-nav.is-open .nav-block-link:hover { color: var(--brand-red); }
.fullscreen-nav.is-open .nav-block-link:active { transform: scale(0.96) translateY(0); transition: transform 0.05s ease-out; }
.fullscreen-nav.is-open .nav-block-link { transform: translateY(0); opacity: 1; }

.nav-block-link:nth-child(1) { transition-delay: 0.05s; }
.nav-block-link:nth-child(2) { transition-delay: 0.1s; }
.nav-block-link:nth-child(3) { transition-delay: 0.15s; }
.nav-block-link:nth-child(4) { transition-delay: 0.2s; }
.nav-block-link:nth-child(5) { transition-delay: 0.25s; }

.nav-social-footer {
    display: flex; justify-content: center; align-items: center; gap: 2rem;
    margin-top: var(--space-4); flex-shrink: 0;
    transform: translateY(1.25rem); opacity: 0; transition: transform 0.4s ease 0.3s, opacity 0.4s ease 0.3s;
}

.fullscreen-nav.is-open .nav-social-footer { transform: translateY(0); opacity: 1; }

.social-icon-link { color: var(--text-primary); transition: color 0.3s; display: flex; align-items: center; justify-content: center; }
.social-icon-link:hover, .social-icon-link:active { color: var(--brand-red); }
.social-icon-link svg { width: 1.75rem; height: 1.75rem; fill: currentColor; }

.nav-legal-footer { margin-top: 1.5rem; text-align: center; transform: translateY(1.25rem); opacity: 0; transition: transform 0.4s ease 0.4s, opacity 0.4s ease 0.4s; }
.fullscreen-nav.is-open .nav-legal-footer { transform: translateY(0); opacity: 1; }
.legal-text { color: var(--text-muted); font-size: 0.75rem; font-family: var(--font-ui); line-height: 1.6; }

/* Pagine Podcast (Single) — la testata usa la banda condivisa .media-* (§25);
   qui resta solo il messaggio "nessun audio". */
.podcast-no-audio { color: var(--brand-red); font-style: italic; }

/* ==========================================
   5.2 COMPONENTI GLOBALI (Testate Pagine)
   ========================================== */
.global-page-header {
    text-align: left;
    margin-bottom: 2.5rem;
    padding-top: 3rem; 
}

.global-breadcrumbs { 
    font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; 
    letter-spacing: 0.05em; font-family: var(--font-ui); 
}
.global-breadcrumbs a { color: var(--text-subtle); transition: color 0.2s; }
.global-breadcrumbs a:hover { color: var(--text-primary); }
.global-breadcrumbs .sep { margin: 0 0.5rem; color: var(--text-subtle); }
.global-breadcrumbs .current { color: var(--text-primary); }

/* Freccia di risalita del breadcrumb: stessa SVG del bottone "Torna",
   nascosta su desktop, visibile solo nel breadcrumb ridotto mobile */
.breadcrumb-back-arrow { display: none; }

/* Mobile: breadcrumb ridotto al solo link di risalita al livello padre (← Padre) */
@media (max-width: 768px) {
    .global-breadcrumbs .sep,
    .global-breadcrumbs .current,
    .global-breadcrumbs a { display: none; }
    .global-breadcrumbs a:last-of-type {
        display: inline-flex; align-items: center; gap: 0.4rem;
        color: var(--text-muted); font-weight: 600; padding: 0.25rem 0;
    }
    .global-breadcrumbs a:last-of-type .breadcrumb-back-arrow {
        display: inline-block; width: 1rem; height: 1rem;
    }
}

.global-page-title { 
    font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 0.5rem; 
    font-family: var(--font-display); line-height: 1.1; text-transform: uppercase;
}

.global-page-subtitle {
    font-size: 1rem; color: var(--text-muted); font-family: var(--font-ui);
}


/* ==========================================
   6. BOTTONE ASCOLTA (Stile App)
   ========================================== */
.btn-play-podcast {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: var(--brand-red); color: var(--text-button);
    padding: 0.875rem 2rem; border: 1px solid var(--brand-red); border-radius: 2rem;
    font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease;
    box-shadow: 0 0.25rem 1rem rgba(229, 37, 37, 0.2);
}
.btn-play-podcast:hover { background: var(--brand-red-hover); transform: translateY(-0.125rem); box-shadow: 0 0.375rem 1.25rem rgba(229, 37, 37, 0.4); }
.btn-play-podcast:active { transform: translateY(0); box-shadow: 0 0.125rem 0.625rem rgba(229, 37, 37, 0.2); }
.btn-play-podcast svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.btn-play-podcast.is-playing { background: var(--surface); border-color: var(--brand-red); color: var(--brand-red); box-shadow: none; }

/* ==========================================
   7. PLAYER GLOBALE E SLIDE PANEL (DESKTOP)
   ========================================== */
#global-radio-player {
    position: fixed; bottom: 0; left: 0; width: 100%; height: var(--player-height);
    background: var(--surface); border-top: 1px solid var(--stroke);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem; box-sizing: border-box; z-index: 9999;
}

.mini-progress-bar, .btn-close-player { display: none; }

.player-left { display: flex; align-items: center; width: 30%; min-width: 15.625rem; }
.player-cover { width: 3.5rem; height: 3.5rem; background-color: var(--bg-0); border-radius: 0.25rem; margin-right: 1rem; object-fit: cover; }
#ui-cover-placeholder { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); color: var(--brand-red); font-size: 1.5rem; width: 3.5rem; height: 3.5rem; background-color: var(--bg-0); border-radius: 0.25rem; margin-right: 1rem;}
.player-info { display: flex; flex-direction: column; }
.player-title { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.05rem; line-height: 1.1; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15.625rem; }
.player-artist { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.125rem; }

.player-center { display: flex; flex-direction: column; align-items: center; width: 40%; }
.player-main-controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; width: 100%; }

.btn-icon { background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.2s; padding: 0.25rem; }
.btn-icon:hover { color: var(--text-primary); }
.btn-icon svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.skip-control svg { width: 1.75rem; height: 1.75rem; }

.btn-play-pause {
    background: var(--brand-red); color: var(--text-primary);
    width: 3.25rem; height: 3.25rem; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform 0.1s;
}
.btn-play-pause:active { transform: scale(0.95); }
.btn-play-pause svg { width: 1.75rem; height: 1.75rem; fill: currentColor; }

.live-badge { margin-top: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--brand-red); letter-spacing: 0.05rem; display: flex; align-items: center; gap: 0.25rem; }
.live-dot { width: 0.375rem; height: 0.375rem; background: var(--brand-red); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

.podcast-timeline { display: none; align-items: center; gap: 0.5rem; width: 100%; max-width: 25rem; margin-top: 0.25rem; font-size: 0.75rem; color: var(--text-muted); }
.progress-bar { flex-grow: 1; height: 0.25rem; background: var(--stroke); border-radius: 0.125rem; position: relative; cursor: pointer; }
.progress-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--brand-red); border-radius: 0.125rem; width: 0%; pointer-events: none;}

.player-right { display: flex; justify-content: flex-end; align-items: center; width: 30%; gap: 1.5rem; }
.volume-control { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); }
.volume-slider { width: 6rem; height: 0.25rem; -webkit-appearance: none; background: var(--stroke); border-radius: 0.125rem; outline: none; }
.volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--text-primary); cursor: pointer; }

.podcast-only { display: none; }

.slide-panel {
    position: fixed; top: 0; right: 0; width: 25rem; max-width: 100%;
    height: calc(100vh - var(--player-height));
    background: var(--bg-1); border-left: 1px solid var(--stroke); z-index: 10000;
    transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex; flex-direction: column; box-shadow: -0.3125rem 0 1rem rgba(0,0,0,0.5);
}
.slide-panel.is-open { transform: translateX(0); }
.slide-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid var(--stroke); background: var(--surface); }
.slide-panel-header h3 { margin: 0; font-family: var(--font-display); letter-spacing: 0.05rem; font-size: 1.5rem; }
.btn-close-panel { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.5rem; transition: color 0.2s; padding: 0; }
.btn-close-panel:hover { color: var(--brand-red); }
.slide-panel-content { padding: 1.5rem; overflow-y: auto; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }
.slide-panel-content p { margin-top: 0; margin-bottom: 1rem; }

/* ==========================================
   8. MEDIA QUERIES (Mobile App-First)
   ========================================== */
@media (max-width: 768px) {
    .site-header { height: 4.5rem; }
    body {
        padding-top: 4.5rem; /* Compensa la nuova altezza mobile */
        /* Libera l'ingombro fisso in basso (player sopra la bottom-nav) + respiro,
           cosi' l'ultimo contenuto non finisce sotto il player. Vale su tutte le pagine. */
        padding-bottom: calc(var(--player-height) + var(--bottom-nav-height) + var(--safe-bottom) + var(--space-2));
    }
    .site-logo-img { max-height: 2.75rem; }
    .header-actions { gap: 0.75rem; }
    
    /* Gestione Tasti App: Scambio visibilità Mobile/Desktop */
    .hide-on-mobile { display: none !important; }
    .hide-on-desktop { display: inline-block !important; }

    /* Ridimensionamento Burger Menu (da 2.5rem a 2rem) */
    .eq-burger { width: 2rem; height: 2rem; }
    .eq-burger .bar:nth-child(1) { left: 0.45rem; }
    .eq-burger .bar:nth-child(2) { left: 0.75rem; }
    .eq-burger .bar:nth-child(3) { left: 1.05rem; }
    .eq-burger .bar:nth-child(4) { left: 1.35rem; }
    .eq-burger.is-active .bar:nth-child(1),
    .eq-burger.is-active .bar:nth-child(2),
    .eq-burger.is-active .bar:nth-child(3),
    .eq-burger.is-active .bar:nth-child(4) { left: 0.9375rem; }

    /* Cuscinetto di 9rem per evitare che i link legali finiscano sotto al Player e alla Bottom Nav */
    .fullscreen-nav { 
        padding-top: 5rem; 
        padding-bottom: calc(9rem + var(--safe-bottom)); 
    }
    .nav-links-wrapper { gap: 0.75rem; } 
    .nav-block-link { max-height: 4rem; }
    .nav-social-footer { margin-top: var(--space-4); gap: 1.25rem; }
    .social-icon-link svg { width: 1.5rem; height: 1.5rem; }
    
    .nav-legal-footer { margin-top: 1rem; }
    .legal-text { font-size: 0.65rem; } 
    .legal-break { display: block; margin-bottom: 0.25rem; } 

    :root {
        --safe-bottom: env(safe-area-inset-bottom, 0px);
        --safe-top: env(safe-area-inset-top, 0px);
    }

    /* --- IL NUOVO MINI-PLAYER RED LIQUID GLASS --- */
    #global-radio-player {
        /* 1. Ancoraggio Flush: poggia direttamente sulla Bottom Nav (altezza 4rem) */
        bottom: 0; 
        transform: translateY(calc(var(--bottom-nav-height) * -1 - var(--safe-bottom))); 
        
        left: 0.5rem;
        width: calc(100% - 1rem);
        height: 3.5rem; 
        padding: 0 0.8125rem;
        border-radius: 0.375rem;
        
        /* 2. Red Liquid Glass Material */
        background: rgba(229, 37, 37, 0.7);
        backdrop-filter: blur(1rem) saturate(150%);
        -webkit-backdrop-filter: blur(1rem) saturate(150%);
        
        /* Luce riflessa in alto (0.0625rem = 1px) e ombra solida */
        box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.4), 0 0.25rem 1rem rgba(0,0,0,0.5);
        border: none;
        
        cursor: default; 
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                    height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                    border-radius 0.4s ease, 
                    padding 0.4s ease,
                    left 0.4s ease,
                    width 0.4s ease;
    }
    
    /* Lama di luce: ancorata in basso */
    .mini-progress-bar { 
        display: block; 
        position: absolute; 
        top: auto; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        height: 0.125rem; 
        background: rgba(0, 0, 0, 0.3); /* Solco neutrale */
        border-radius: 0 0 0.5rem 0.5rem; 
        overflow: hidden;
        z-index: 10;
    }
    .mini-progress-fill { 
        height: 100%; 
        background: #FFFFFF; /* Progresso bianco puro */
        width: 0%; 
        pointer-events: none; 
        transition: width 0.1s linear; 
    }

    /* Risoluzione Overflow e Specificità (No !important) */
    body #global-radio-player .player-right, 
    body #global-radio-player .skip-control, 
    body #global-radio-player .podcast-timeline, 
    body #global-radio-player .live-badge { 
        display: none!important; 
    }
    
    .player-left { flex-grow: 1; min-width: 0; display: flex; align-items: center; }
    .player-cover, #ui-cover-placeholder { width: 2.5rem; height: 2.5rem; border-radius: 0.25rem; margin-right: 0.75rem; }
    
    /* Testi bianchi per contrastare il Red Glass */
    body #global-radio-player .player-title { 
        font-size: 1rem; 
        color: #FFFFFF; 
        max-width: 100%; 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
    }
    body #global-radio-player .player-artist { 
        font-size: 0.75rem; 
        color: rgba(255, 255, 255, 0.8); 
    }
    
    .player-center { 
        width: auto; 
        flex-shrink: 0; 
        margin-left: 0.5rem; 
        display: flex; 
        align-items: center; 
        justify-content: center;
        height: 100%;
    }
    
    /* Bottone Minimal: piatto, bianco e pulito */
    body #global-radio-player .btn-play-pause { 
        width: 2.5rem; 
        height: 2.5rem; 
        background: transparent; 
        color: #FFFFFF;
        border-radius: 0;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: none;
    }
    
    body #global-radio-player .btn-play-pause svg { 
        width: 1.5rem; 
        height: 1.5rem; 
        margin-left: 0; 
    }
    /* --- FINE MINI-PLAYER RED LIQUID GLASS --- */

    /* --- IL PLAYER FULL-SCREEN QUANDO SI ESPANDE (INATTIVO VIA JS, MA PRESERVATO CSS) --- */
    #global-radio-player.is-expanded {
        transform: translateY(0);
        background: var(--surface); /* Ripristina il colore solido */
        bottom: 0; left: 0; width: 100%; border-radius: 0; border: none;
        height: 100dvh; 
        padding: calc(2rem + var(--safe-top)) 1.5rem calc(2rem + var(--safe-bottom));
        flex-direction: column; align-items: center; justify-content: space-evenly; cursor: default; 
    }

    #global-radio-player.is-expanded .btn-close-player {
        display: block; position: absolute; top: calc(1rem + var(--safe-top)); left: 1rem;
        background: none; border: none; color: var(--text-muted); padding: 0.5rem; cursor: pointer;
    }
    #global-radio-player.is-expanded .btn-close-player svg { width: 2rem; height: 2rem; fill: currentColor; }
    #global-radio-player.is-expanded .mini-progress-bar { display: none; }
    
    #global-radio-player.is-expanded .player-left { flex-direction: column; width: 100%; min-width: 100%; text-align: center; margin-top: 2rem; flex-grow: 0; }
    #global-radio-player.is-expanded .player-cover, #global-radio-player.is-expanded #ui-cover-placeholder {
        width: 16rem; height: 16rem; margin: 0 auto 2rem auto; border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(0,0,0,0.5); font-size: 5rem;
    }
    
    body #global-radio-player.is-expanded .player-title { color: var(--text-primary); font-size: 1.75rem; max-width: 100%; white-space: normal; line-height: 1.2; }
    body #global-radio-player.is-expanded .player-artist { color: var(--text-muted); font-size: 1.1rem; margin-top: 0.5rem; }

    #global-radio-player.is-expanded .player-center { width: 100%; flex-direction: column-reverse; gap: 2rem; margin-left: 0; }
    
    #global-radio-player.is-expanded .podcast-timeline { max-width: 100%; display: flex; margin-top: 1rem; }
    #global-radio-player.is-expanded .skip-control { display: flex; }
    
    /* Il tasto play gigante nella modale ripristina il brand-red */
    body #global-radio-player.is-expanded .btn-play-pause { 
        width: 4.5rem; height: 4.5rem; 
        background: var(--brand-red);
        border-radius: 50%;
        box-shadow: 0 0.5rem 1rem rgba(229, 37, 37, 0.4);
    } 
    body #global-radio-player.is-expanded .btn-play-pause svg { width: 2.25rem; height: 2.25rem; margin-left: 0.25rem; }

    #global-radio-player.is-expanded .player-right { display: flex; width: 100%; justify-content: center; margin-top: 1rem; }
    #global-radio-player.is-expanded .volume-control { display: none; }
    #global-radio-player.is-expanded #btn-info { display: flex; }

    .slide-panel { z-index: 10001; height: 100dvh; width: 100%; }
} /* <--- LA GABBIA MOBILE È STATA CORRETTAMENTE SIGILLATA QUI */

/* ==========================================
   9. ARCHIVIO PODCAST E APP CARDS
   ========================================== */
.podcast-archive-wrapper { padding-top: 0; padding-bottom: 5rem; }

/* Filtri Categorie (Stile App / Palinsesto) */
.archive-filters-wrapper { 
    padding-bottom: 1.5rem; 
    border-bottom: 1px solid var(--stroke-light); 
    margin-bottom: 2.5rem; 
}
.archive-filters { display: flex; gap: 0.75rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0.5rem; }
.archive-filters::-webkit-scrollbar { display: none; }

.filter-pill {
    flex: 0 0 auto; background: transparent; border: 1px solid var(--stroke-light);
    color: var(--text-muted); font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600;
    padding: 0.5rem 1.25rem; border-radius: 2rem; cursor: pointer;
    transition: all 0.2s ease; text-transform: uppercase; letter-spacing: 0.05em;
}
.filter-pill:hover { border-color: var(--text-subtle); color: var(--text-primary); }
.filter-pill.active { background: var(--text-primary); color: var(--brand-black); border-color: var(--text-primary); }

/* GRIGLIA PRINCIPALE (Basata sui gap, zero bordi complessi) */
.podcast-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 1.5rem; 
}

@media (min-width: 768px) { 
    .podcast-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } 
}

@media (min-width: 1024px) { 
    .podcast-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } 
}

/* CARD SINGOLA (App Surface - Design Pulito e Solido) */
.podcast-card { 
    display: flex; flex-direction: column; position: relative; 
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-card); 
    overflow: hidden; 
}

/* ==========================================
   INTERNI DELLA CARD (Immagini e Testi)
   ========================================== */
.card-image-wrapper { 
    position: relative; aspect-ratio: 1 / 1; overflow: hidden; 
    background: var(--bg-0); z-index: 2; 
    border-bottom: 1px solid var(--stroke);
}

/* 1. IMMAGINE: Accelerazione hardware (GPU) attiva */
.card-cover, .card-cover-placeholder { 
    width: 100%; height: 100%; object-fit: cover; 
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); 
    will-change: transform; 
    backface-visibility: hidden; 
    transform: translateZ(0); 
}
.card-cover-placeholder { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 4rem; color: var(--stroke); }

/* Effetti Hover Condivisi (Podcast, News e card Programma) */
.podcast-card:hover .card-cover,
.news-card:hover .card-cover,
.programma-card:hover .card-cover { transform: scale(1.05) translateZ(0); }

.podcast-card:hover .card-title a,
.news-card:hover .card-title a { color: var(--brand-red); }

/* 2. BOTTONE PLAY: A filo zero in basso a sinistra, spigoli netti */
.card-play-btn { 
    position: absolute; bottom: 0; left: 0; 
    width: 2.5rem; height: 2.5rem; 
    background: var(--text-primary); color: var(--brand-red); 
    border: none; border-radius: 0; 
    display: flex; align-items: center; justify-content: center; 
    cursor: pointer; transition: background 0.2s; 
    z-index: 10; 
}
.card-play-btn svg { width: 1.75rem; height: 1.75rem; fill: currentColor; }
.podcast-card:hover .card-play-btn { background: var(--brand-red); color: var(--text-button); } 

/* 3. BADGE EPISODIO/DATA: A filo zero in basso a destra, spigoli netti */
.card-badge-ep { 
    position: absolute; bottom: 0; right: 0; 
    background: var(--text-primary); color: var(--brand-black); 
    padding: 0.5rem 1rem; font-family: var(--font-display); 
    font-size: 1.25rem; letter-spacing: 0.05em; 
    border-radius: 0; 
    z-index: 2; line-height: 1.1; 
}

/* Contenuto Testuale della Card */
.card-content { display: flex; flex-direction: column; flex-grow: 1; z-index: 2; padding: 1.5rem; }

/* Sottotitolo */
.card-subtitle { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.625rem; font-family: var(--font-ui); font-weight: 600; }
/* Allineamento ottico delle icone (qui e in .meta-dj): le icone sono piu' alte delle
   maiuscole accanto e hanno il peso in basso (cuffie, tazza, base del microfono), quindi
   centrate matematicamente sembrano basse. Alzate di 1px, misurato in Chromium. */
.card-subtitle svg { width: 0.875rem; height: 0.875rem; transform: translateY(-1px); }

/* Titolo: interlinea 1.25 (non l'1.1 degli altri titoli Anton) perche' qui i titoli
   vanno spesso su 2-3 righe; a 1.1 le righe quasi si toccavano. */
.card-title { font-size: 1.625rem; line-height: 1.25; margin-bottom: 1rem; overflow-wrap: break-word; text-transform: none; font-family: var(--font-display); letter-spacing: 0.02em; }
.card-title a { color: var(--text-primary); }
.card-title a::before { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Meta (DJ e Durata): ancorata in fondo alla card (margin-top: auto), cosi' resta allineata
   tra le card della stessa riga anche con titoli di lunghezza diversa. */
.card-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-muted); margin-top: auto; font-family: var(--font-ui); text-transform: uppercase; font-weight: 600; }
.meta-dj { display: flex; align-items: center; gap: 0.35rem; z-index: 2; position: relative; }
.meta-dj svg { width: 1rem; height: 1rem; transform: translateY(-1px); }
.meta-divider { color: var(--stroke); }

/* Paginazione Standard */
.archive-pagination { margin-top: 5rem; display: flex; justify-content: center; gap: 0.5rem; font-family: var(--font-ui); position: relative; z-index: 10; }
.archive-pagination .page-numbers { padding: 0.5rem 1rem; border: 1px solid var(--stroke); color: var(--text-primary); border-radius: 0.25rem; transition: all 0.2s; font-weight: 600; }
.archive-pagination .page-numbers:hover { border-color: var(--brand-red); color: var(--brand-red); }
.archive-pagination .current { background: var(--brand-red); border-color: var(--brand-red); color: var(--text-button); }

/* ==========================================
   10. PALINSESTO LIVE (TIMELINE)
   ========================================== */
/* Selettore Giorni */
.schedule-days-nav {
    position: sticky; top: 5.5rem; z-index: 50; 
    background: rgba(15, 16, 16, 0.95);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--stroke); 
    padding: 1rem 0; margin-bottom: 2rem;
}
.schedule-days-wrapper { 
    display: flex; gap: 0.75rem; overflow-x: auto; 
    overscroll-behavior-x: contain; padding-bottom: 0.5rem; 
    scrollbar-width: none; -ms-overflow-style: none;
}
.schedule-days-wrapper::-webkit-scrollbar { display: none; }

.day-pill {
    flex: 0 0 auto; background: transparent; border: 1px solid var(--stroke-light);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0.5rem 1.25rem; border-radius: 0.5rem; cursor: pointer;
    transition: all 0.2s ease;
}
.day-name { font-family: var(--font-display); font-size: 1.25rem; color: var(--text-subtle); line-height: 1.1; letter-spacing: 0.05em; }
.day-date { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; margin-top: 0.2rem; font-family: var(--font-ui); }

.day-pill:hover { border-color: var(--text-subtle); }
.day-pill:hover .day-name { color: var(--text-primary); }
.day-pill.is-active { background: var(--text-primary); border-color: var(--text-primary); }
.day-pill.is-active .day-name { color: var(--brand-black); }
.day-pill.is-active .day-date { color: rgba(0,0,0,0.7); }

/* Timeline Container */
.schedule-timeline-container { padding-bottom: 6rem; }
.schedule-timeline { display: flex; flex-direction: column; }
.schedule-item { display: flex; gap: 1rem; position: relative; margin-bottom: 0; }

.schedule-time { 
    width: 3.5rem; flex-shrink: 0; display: flex; flex-direction: column; 
    align-items: flex-end; padding-top: 0.5rem; font-family: var(--font-display); 
}
.time-start { font-size: 1.25rem; color: var(--text-primary); line-height: 1; letter-spacing: 0.05em;}
.time-end { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; font-family: var(--font-ui); font-weight: 600;}

.schedule-track { 
    width: 1rem; display: flex; flex-direction: column; 
    align-items: center; position: relative; 
}
.track-dot { 
    width: 0.75rem; height: 0.75rem; border-radius: 50%; 
    background: var(--stroke); margin-top: 0.65rem; 
    z-index: 2; border: 2px solid var(--bg-0); 
}
.track-line { 
    flex-grow: 1; width: 2px; background: var(--stroke); 
    margin-top: -0.25rem; margin-bottom: -0.65rem; z-index: 1; 
}

/* Card Palinsesto */
.schedule-card {
    flex-grow: 1; background: var(--surface); border: 1px solid var(--stroke);
    display: flex; gap: 1.5rem; padding: 1.25rem; margin-bottom: 1.5rem; position: relative;
    transition: transform 0.2s, border-color 0.2s;
    border-radius: var(--radius-card); 
    overflow: hidden; 
}

.schedule-cover { 
    width: 8rem; height: 8rem; flex-shrink: 0; object-fit: cover; 
    border: 1px solid var(--stroke); border-radius: 0.25rem;
}

.schedule-info { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; }

.schedule-season-info {
    font-family: var(--font-display); font-size: 0.85rem; color: var(--brand-red);
    letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.25rem;
}

.schedule-title { 
    font-family: var(--font-display); font-size: 2rem; 
    color: var(--text-primary); line-height: 1.1; margin-bottom: 0.75rem; letter-spacing: 0.03em;
}

.schedule-meta-list { display: flex; flex-direction: column; gap: 0.5rem; }
.meta-item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; font-family: var(--font-ui); }
.meta-icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--brand-red); margin-top: 0.15rem; }
.meta-text-dj { color: var(--text-subtle); font-weight: 600; text-transform: uppercase; }
.meta-text-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

/* Stati Live/Past */
.schedule-item.is-past .schedule-card { opacity: 0.5; background: transparent; }
.schedule-item.is-past .track-dot { background: var(--stroke-light); }

.schedule-item.is-live .schedule-card { border-color: var(--brand-red); background: rgba(229, 37, 37, 0.05); }
.schedule-item.is-live .track-dot { background: var(--brand-red); box-shadow: 0 0 0 4px rgba(229, 37, 37, 0.2); }
.schedule-item.is-live .time-start { color: var(--brand-red); font-weight: bold; }
.schedule-item.is-live .schedule-cover { border-color: var(--brand-red); }

.schedule-live-badge {
    position: absolute; top: 0; right: 0; background: var(--brand-red); color: var(--text-button);
    font-family: var(--font-display); font-size: 0.75rem; padding: 0.35rem 0.75rem;
    display: flex; align-items: center; gap: 0.35rem; letter-spacing: 0.05em; z-index: 5;
    border-bottom-left-radius: 0.5rem; 
}
.schedule-live-badge .live-dot { width: 6px; height: 6px; background: white; border-radius: 50%; animation: pulse 1.5s infinite; }

/* Responsive Mobile */
@media (max-width: 768px) {
    .schedule-days-nav { top: 4.5rem; } 
    .schedule-item { gap: 0.5rem; }
    .schedule-time { width: 3rem; }
    .time-start { font-size: 1.15rem; }
    .schedule-card { padding: 1rem; gap: 1rem; flex-direction: column; }
    .schedule-cover { width: 100%; aspect-ratio: 16/9; height: auto; }
    .schedule-title { font-size: 1.5rem; }
    .meta-text-desc { -webkit-line-clamp: 2; }
}

/* ==========================================
   11. ROCK NEWS (Blog & Masonry)
   ========================================== */
.news-archive-wrapper { padding-bottom: 5rem; }

/* Motore Masonry (CSS Columns) */
.news-masonry-grid {
    column-count: 1;
    column-gap: 2rem;
}
@media (min-width: 768px) { .news-masonry-grid { column-count: 2; } }
@media (min-width: 1024px) { .news-masonry-grid { column-count: 3; } }

/* Contenitore Card News (Serve per non farla spezzare tra le colonne) */
.news-card {
    break-inside: avoid; 
    margin-bottom: 2rem;
    display: flex; flex-direction: column; position: relative;
    background: var(--surface); border: 1px solid var(--stroke);
    border-radius: var(--radius-card); overflow: hidden;
}

/* Modificatore Immagine: Quadrata (1:1) su mobile, libera su desktop */
.news-card .card-image-wrapper { aspect-ratio: 1 / 1; border-bottom: 1px solid var(--stroke); }

@media (min-width: 1024px) {
    .news-card .card-image-wrapper { aspect-ratio: auto; }
    
    /* Layout Masonry sfalsato su 3 colonne (Matrice CSS pura basata sui REM) */
    /* Piccola: 15rem | Media: 22.5rem | Grande: 30rem */
    
    /* 15rem: Elementi n. 1, 6, 8 di ogni ciclo da 9 */
    .news-card:nth-child(9n+1) .card-image-wrapper,
    .news-card:nth-child(9n+6) .card-image-wrapper,
    .news-card:nth-child(9n+8) .card-image-wrapper { height: 15rem; }

    /* 30rem: Elementi n. 2, 4, 9 di ogni ciclo da 9 */
    .news-card:nth-child(9n+2) .card-image-wrapper,
    .news-card:nth-child(9n+4) .card-image-wrapper,
    .news-card:nth-child(9n+9) .card-image-wrapper { height: 30rem; }

    /* 22.5rem: Elementi n. 3, 5, 7 di ogni ciclo da 9 */
    .news-card:nth-child(9n+3) .card-image-wrapper,
    .news-card:nth-child(9n+5) .card-image-wrapper,
    .news-card:nth-child(9n+7) .card-image-wrapper { height: 22.5rem; }
}

/* Tasto Leggi di più + Freccia in basso */
.card-read-more {
    margin-top: 1.25rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; font-family: var(--font-ui); font-weight: 600;
    color: var(--text-primary); transition: color 0.2s ease;
}
.card-read-more svg { width: 1.25rem; height: auto; color: currentColor; }
.news-card:hover .card-read-more { color: var(--brand-red); }

/* ==========================================
   12. BOTTOM NAVIGATION BAR (Mobile App)
   ========================================== */
.bottom-nav {
    display: none; /* Nasconde la barra su Desktop */
}

/* Attiva la barra solo su schermi Mobile (fino a 768px) */
@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
        position: fixed; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
        background-color: rgba(15, 16, 16, 0.95);
        backdrop-filter: blur(0.625rem);
        -webkit-backdrop-filter: blur(0.625rem);
        border-top: 1px solid var(--stroke);
        z-index: 9000;
        justify-content: space-around; 
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    
    .nav-item { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
        gap: 0.25rem; 
        color: var(--text-subtle); 
        font-size: 0.75rem; 
        font-family: var(--font-ui);
        width: 25%;
        height: 100%;
        letter-spacing: 0.05em;
        transition: color 0.2s ease;
    }
    .nav-item span { position: relative; }

    /* Hover: stato intermedio, distinto sia dall'inattivo sia dall'attivo */
    .nav-item:hover { color: var(--text-muted); }

    /* Attivo: testo/icona bianchi + tick rosso sotto la label */
    .nav-item.active { color: var(--text-primary); }
    .nav-item.active span::after {
        content: ''; position: absolute; left: 50%; transform: translateX(-50%);
        bottom: -0.35rem; width: 1.15rem; height: 2px;
        background: var(--brand-red); border-radius: 1px;
    }
    
    .nav-item svg { 
        width: 1.5rem; 
        height: 1.5rem; 
    }
}

/* ==========================================
   13. MODALE DESKTOP (QR + PWA)
   ========================================== */
.desktop-app-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem);
    z-index: 10005;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
.desktop-app-modal-overlay.is-active { opacity: 1; pointer-events: auto; }

.desktop-app-modal-box {
    background: var(--surface); border: 1px solid var(--stroke);
    border-radius: 1rem; padding: 2.5rem;
    width: 90%; max-width: 38rem; position: relative;
    transform: translateY(2rem); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center; color: var(--text-primary);
}
.desktop-app-modal-overlay.is-active .desktop-app-modal-box { transform: translateY(0); }

.close-modal-btn {
    position: absolute; top: 1rem; right: 1rem;
    background: transparent; border: none; color: var(--text-muted);
    font-size: 2rem; line-height: 1; cursor: pointer; transition: color 0.2s;
}
.close-modal-btn:hover { color: var(--brand-red); }

.modal-app-title { font-size: 2rem; margin-bottom: 2rem; color: var(--text-primary); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; }
.modal-split-layout { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.modal-qr-section, .modal-pwa-section { flex: 1; display: flex; flex-direction: column; align-items: center; }
.modal-app-text { font-family: var(--font-ui); font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1rem; }

.qr-code-placeholder { width: 10rem; height: 10rem; background: #FFF; color: #000; display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 0.5rem; }
.modal-divider { width: 1px; height: 10rem; background: var(--stroke); }

.btn-pwa-install {
    background: var(--brand-red); color: var(--text-button);
    border: none; border-radius: 2rem; padding: 0.75rem 1.5rem;
    font-family: var(--font-ui); font-weight: 600; text-transform: lowercase;
    cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.btn-pwa-install:hover { background: var(--brand-red-hover); transform: translateY(-0.125rem); }

@media (max-width: 768px) {
    .modal-split-layout { flex-direction: column; gap: 1.5rem; }
    .modal-divider { width: 100%; height: 1px; }
}

/* ==========================================
   19. HOMEPAGE DEDICATA (front-page.php)
   ========================================== */
.home-wrapper { padding-bottom: var(--space-5); }

/* --- Hero --- */
.home-hero {
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(229, 37, 37, 0.14) 0%, transparent 55%),
        var(--bg-0);
    border-bottom: 1px solid var(--stroke);
    padding: var(--space-6) 0 var(--space-5);
    text-align: center;
    margin-bottom: var(--space-5);
}
.home-hero-inner {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-2);
}
.home-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
    background: var(--surface); border: 1px solid var(--stroke);
    padding: 0.4rem 0.9rem; border-radius: 2rem;
}
.home-hero-title {
    font-size: clamp(2.75rem, 9vw, 6rem);
    margin: 0; line-height: 1;
}
.home-hero-subtitle {
    font-family: var(--font-ui); color: var(--text-muted);
    font-size: clamp(1rem, 2vw, 1.2rem); max-width: 34rem;
    margin: 0 auto;
}
.home-hero-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--space-2); margin-top: var(--space-2);
}
.home-hero-secondary {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-ui); font-weight: 600; font-size: 0.95rem;
    color: var(--text-muted); transition: color 0.2s ease;
}
.home-hero-secondary:hover { color: var(--brand-red); }
.home-hero-secondary svg { width: 1.25rem; height: auto; }

/* CTA diretta: stesso look del bottone play podcast, ma classe dedicata
   (fuori dalla logica .btn-play-podcast di main.js) */
.home-hero-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: var(--brand-red); color: var(--text-button);
    padding: 0.875rem 2rem; border: 1px solid var(--brand-red); border-radius: 2rem;
    font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease;
    box-shadow: 0 0.25rem 1rem rgba(229, 37, 37, 0.2);
}
.home-hero-cta:hover { background: var(--brand-red-hover); transform: translateY(-0.125rem); box-shadow: 0 0.375rem 1.25rem rgba(229, 37, 37, 0.4); }
.home-hero-cta:active { transform: translateY(0); box-shadow: 0 0.125rem 0.625rem rgba(229, 37, 37, 0.2); }
.home-hero-cta svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.home-hero-cta.is-playing { background: var(--surface); border-color: var(--brand-red); color: var(--brand-red); box-shadow: none; }

/* --- Testata di sezione condivisa (home + landing /podcast/) ---
   Titolo + filetto sotto, con eventuale link "vedi tutti" a destra (opzionale:
   se manca, il titolo resta a sinistra). Fonte unica per le testate di sezione,
   cosi' restano subordinate al titolo pagina e non rimano come "secondo titolo". */
.home-section { margin-bottom: var(--space-5); }
.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-2); margin-bottom: var(--space-3);
    padding-bottom: var(--space-1); border-bottom: 1px solid var(--stroke);
}
.section-title {
    font-size: clamp(1.5rem, 4vw, 2.25rem); margin: 0;
}
.section-cta {
    display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
    font-family: var(--font-ui); font-weight: 600; font-size: 0.85rem;
    letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-subtle);
    transition: color 0.2s ease; white-space: nowrap;
}
.section-cta:hover { color: var(--brand-red); }
.section-cta svg { width: 1.1rem; height: auto; }

/* ==========================================
   20. PAGINE STATICHE (page.php)
   ========================================== */
.page-single-wrapper { max-width: 50rem; margin: 0 auto; padding-bottom: var(--space-5); }

.page-featured { margin-bottom: var(--space-4); }
.page-featured img {
    width: 100%; height: auto; display: block;
    border-radius: var(--radius-card); border: 1px solid var(--stroke);
}

.page-content { font-family: var(--font-ui); line-height: 1.7; color: var(--text-muted); }
.page-content > *:first-child { margin-top: 0; }
.page-content p { margin-bottom: var(--space-2); }
.page-content h2,
.page-content h3,
.page-content h4 { color: var(--text-primary); margin-top: var(--space-4); }
.page-content h2 { margin-top: var(--space-6); }
.page-content a { color: var(--brand-red); text-decoration: underline; }
.page-content a:hover { color: var(--brand-red-hover); }
.page-content ul,
.page-content ol { margin: 0 0 var(--space-2) var(--space-3); }
.page-content li { margin-bottom: var(--space-1); }
.page-content img { max-width: 100%; height: auto; border-radius: var(--radius-btn); }
.page-content blockquote {
    border-left: 3px solid var(--brand-red); padding-left: var(--space-2);
    margin: var(--space-3) 0; color: var(--text-subtle);
}

/* Tabelle nel contenuto delle pagine (blocco Tabella dell'editor, es. Privacy
   e Cookie). Il tema non le stilava: sul fondo scuro i bordi predefiniti di
   WordPress non si vedevano. Selettori con .wp-block-table per prevalere sugli
   stili del blocco. Su telefono la tabella scorre in orizzontale dentro il suo
   riquadro (la pagina no) e la prima colonna resta ferma a sinistra. */
.page-content .wp-block-table {
    margin: var(--space-3) 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--stroke-light); border-radius: var(--radius-card);
}
.page-content .wp-block-table table {
    width: 100%; border-collapse: collapse;
    font-size: 0.9375rem; line-height: 1.5;
}
.page-content .wp-block-table thead { border-bottom: 0; }
.page-content .wp-block-table th,
.page-content .wp-block-table td {
    padding: 0.75rem 1rem; text-align: left; vertical-align: top;
    border: 0; border-bottom: 1px solid var(--stroke-light);
}
.page-content .wp-block-table th + th,
.page-content .wp-block-table td + td { border-left: 1px solid var(--stroke-light); }
.page-content .wp-block-table thead th {
    background: var(--surface); color: var(--text-primary);
    font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.page-content .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.page-content .wp-block-table td:first-child { color: var(--text-primary); font-weight: 600; }

@media (max-width: 767px) {
    .page-content .wp-block-table table { min-width: 40rem; font-size: 0.875rem; }
    .page-content .wp-block-table th,
    .page-content .wp-block-table td { padding: 0.625rem 0.75rem; }
    .page-content .wp-block-table th:first-child,
    .page-content .wp-block-table td:first-child {
        position: sticky; left: 0; z-index: 1;
        width: 8.5rem; min-width: 8.5rem;
        background: var(--surface);
        box-shadow: 1px 0 0 var(--stroke-light);
    }
}

/* ==========================================
   21. FIX CLICK CARD PODCAST (play vs navigazione)
   ========================================== */
/* La card è flex: lo z-index dei figli conta anche senza position, quindi
   l'overlay-link del titolo (in .card-content) copriva il pulsante play
   (dentro .card-image-wrapper). Confinando l'overlay al solo contenuto,
   il pulsante torna cliccabile; l'immagine resta navigabile via .card-cover-link. */
.podcast-card .card-content { position: relative; }
.podcast-card .card-cover-link { display: block; width: 100%; height: 100%; }
.podcast-card .card-badge-ep { pointer-events: none; }

/* ==========================================
   22. ARTICOLO SINGOLO ROCK NEWS (single.php)
   ========================================== */
/* --- Testata articolo --- */
.news-single-head { padding-top: var(--space-4); }
/* Breadcrumb a sinistra, a piombo col logo (larghezza container) */
.news-single-breadcrumbs { margin-bottom: var(--space-3); }
/* Intro centrata: meta + titolo + excerpt */
.news-single-intro { max-width: 50rem; margin: 0 auto; text-align: center; }

.news-single-meta {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: var(--space-2);
    font-family: var(--font-ui); font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.news-single-cat { color: var(--brand-red); }
.news-single-date { color: var(--text-subtle); }

.news-single-title {
    font-family: var(--font-display); text-transform: none;
    font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; margin-bottom: 0;
}
.news-single-excerpt {
    font-family: var(--font-ui); color: var(--text-muted);
    font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.6;
    max-width: 42rem; margin: var(--space-2) auto 0;
}

/* Featured image a larghezza container, senza bordo */
.news-single-featured { margin: var(--space-4) auto; }
.news-single-featured img {
    width: 100%; height: auto; display: block; border-radius: var(--radius-card);
}

/* Corpo di lettura a 50rem */
.news-single-body { max-width: 50rem; margin: 0 auto; padding: 0 1.5rem; }

/* Leggibilità corpo (solo news): testo più chiaro e più grande */
.news-single .page-content { color: #E8E8E8; font-size: 1.1rem; }
/* Respiro sotto le immagini inserite nel contenuto (figure + img, senza doppioni) */
.news-single .page-content figure { margin-bottom: var(--space-4); }
.news-single .page-content img { margin-bottom: var(--space-4); }
.news-single .page-content figure img { margin-bottom: 0; }
/* Titoli nel corpo articolo non in maiuscolo */
.news-single .page-content h2,
.news-single .page-content h3,
.news-single .page-content h4 { text-transform: none; }

/* Azioni fondo articolo: in colonna, stessa larghezza (contorno bianco, hover rosso) */
.news-single-actions {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    margin: var(--space-6) 0;
}
.news-action-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; max-width: 18rem;
    background: transparent; color: var(--text-primary);
    border: 1px solid var(--text-primary); border-radius: 2rem;
    padding: 0.7rem 1.5rem;
    font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease;
}
.news-action-btn:hover { color: var(--brand-red); border-color: var(--brand-red); background: transparent; }
.news-action-btn svg { width: 1.15rem; height: 1.15rem; }

/* Sezione "Le ultime Rock News" */
.news-related {
    margin-top: var(--space-5); margin-bottom: var(--space-6);
    padding-top: var(--space-4); border-top: 1px solid var(--stroke);
}
.news-related-title { font-size: clamp(1.4rem, 4vw, 2rem); margin-bottom: var(--space-3); }

.news-related-strip {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
}

/* Card compatta */
.news-compact-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--stroke);
    border-radius: var(--radius-card); overflow: hidden;
    transition: border-color 0.2s ease;
}
.news-compact-card:hover { border-color: var(--stroke-light); }
.news-compact-image { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-0); }
.news-compact-cover { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.news-compact-card:hover .news-compact-cover { transform: scale(1.05); }
.news-compact-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 3rem; color: var(--stroke);
}
.news-compact-body { padding: var(--space-2); }
.news-compact-eyebrow {
    display: block; font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle);
    margin-bottom: 0.4rem;
}
.news-compact-title {
    font-family: var(--font-display); font-size: 1.15rem; line-height: 1.15;
    text-transform: none; color: var(--text-primary); margin: 0;
    overflow-wrap: break-word;
}
.news-compact-card:hover .news-compact-title { color: var(--brand-red); }

/* Mobile: scorrimento orizzontale con snap e peek della card successiva */
@media (max-width: 768px) {
    .news-related-strip {
        display: flex; gap: var(--space-2);
        overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding-bottom: var(--space-1);
    }
    .news-related-strip::-webkit-scrollbar { display: none; }
    .news-compact-card { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ==========================================
   23. MENU FULLSCREEN — SEZIONI NEL BURGER
   ========================================== */
/* Sezioni principali con lo stesso stile tipografico grande del menu
   (Anton uppercase, colonna, centrate, animazione ereditata da .nav-block-link).
   Visibili solo ≤1023; su desktop (≥1024) le sezioni sono già nell'header. */
.nav-sections-wrapper {
    display: flex; flex-direction: column; flex-grow: 0; margin: auto;
    gap: 1.5rem; width: 100%; max-width: 40rem;
}
@media (min-width: 1024px) { .nav-sections-wrapper { display: none; } }
@media (max-width: 768px) { .nav-sections-wrapper { gap: 0.75rem; } }

/* Legali retrocessi a riga piccola (mobile/tablet). Su desktop restano i link
   grandi di .nav-links-wrapper, quindi lì questa riga è nascosta. */
.nav-legal-links {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 0.4rem 0.75rem; margin-top: var(--space-3); padding-top: var(--space-2);
}
.nav-legal-links a {
    font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-subtle);
    transition: color 0.2s ease;
}
.nav-legal-links a:hover { color: var(--brand-red); }
.nav-legal-sep { color: var(--stroke-light); font-size: 0.85rem; }
@media (min-width: 1024px) { .nav-legal-links { display: none; } }

/* Su mobile/tablet i link legali "grandi" attuali restano nascosti */
@media (max-width: 1023px) { .nav-links-wrapper { display: none; } }

/* ==========================================
   24. RIGA PUNTATA (lista stile Spotify) — card-puntata.php
   ========================================== */
.puntate-list { margin-top: var(--space-3); }
.puntate-heading { font-size: clamp(1.3rem, 3vw, 1.8rem); margin-bottom: var(--space-2); }

/* Riga in GRID con aree: desktop = cover | testo | play (colonne) */
.card-puntata {
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr auto;
    grid-template-areas:
        "cover head play"
        "cover desc play"
        "cover meta play";
    align-items: start;
    column-gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--card);
}

/* Cover: quadrata fissa (a prova di cliente), ritaglio centrato, raggio piccolo */
.puntata-cover {
    grid-area: cover; align-self: start;
    width: 96px; height: 96px;
    border-radius: var(--radius-sm); overflow: hidden; background: var(--card);
}
.puntata-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.puntata-cover-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 2rem; color: var(--stroke);
}

.puntata-head { grid-area: head; min-width: 0; }

/* Titolo bianco (Anton), programma muted */
.puntata-title {
    font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em;
    font-size: 1.35rem; line-height: 1.15; margin: 0; text-transform: none;
}
.puntata-title a { color: var(--text-primary); }
/* Stretched link: tutta la riga cliccabile -> pagina puntata */
.puntata-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card-puntata:hover .puntata-title a { color: var(--brand-red); }

.puntata-programma {
    display: inline-block; position: relative; z-index: 2;
    font-size: 0.9rem; color: var(--text-muted); margin: 4px 0 0;
}
.puntata-programma:hover { color: var(--brand-red); }

.puntata-desc {
    grid-area: desc; margin: 6px 0 0;
    font-size: 0.9rem; color: var(--text-muted); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Meta a piena leggibilita (bianca) come richiesto */
.puntata-meta {
    grid-area: meta; margin-top: 8px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-size: 0.8rem; color: var(--text-primary);
}
.puntata-dj { display: inline-flex; align-items: center; gap: 6px; }
.puntata-dj svg { width: 15px; height: 15px; }
.puntata-meta-sep { color: var(--text-primary); }

/* Play: bianco -> rosso su hover, icona grande */
.puntata-play-btn {
    grid-area: play; position: relative; z-index: 2; align-self: center;
    width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--text-primary); color: var(--bg-0);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.puntata-play-btn:hover { background: var(--brand-red); color: var(--text-button); transform: scale(1.06); }
.puntata-play-btn svg { width: 32px; height: 32px; fill: currentColor; }

/* Mobile: riga alta = cover · titolo · play; descrizione e meta a tutta larghezza sotto */
@media (max-width: 768px) {
    .card-puntata {
        grid-template-columns: 68px 1fr auto;
        grid-template-areas:
            "cover head play"
            "desc  desc  desc"
            "meta  meta  meta";
        column-gap: var(--space-2);
    }
    .puntata-cover { width: 68px; height: 68px; }
    .puntata-title { font-size: 1.05rem; }
    .puntata-programma, .puntata-desc { font-size: 0.82rem; }
    .puntata-play-btn { width: 44px; height: 44px; }
    .puntata-play-btn svg { width: 28px; height: 28px; }
}

/* ==========================================
   25. BANDA TESTATA MEDIA (single-programma + single-podcast)
   ========================================== */
/* Componente condiviso show/puntata: cover quadrata FLUIDA (min-max) a sinistra +
   colonna info che ne riempie l'altezza. Interni info specifici per template
   (.programma-* per lo show, .puntata-* per la puntata). */
.media-header {
    display: grid; grid-template-columns: minmax(220px, 260px) 1fr; gap: var(--space-4);
    align-items: stretch; margin-bottom: var(--space-5);
}

/* Cover quadrata (cover art): si adatta tra min e max, resta quadrata, ritaglio auto */
.media-cover {
    align-self: start;
    width: 100%; aspect-ratio: 1 / 1;
    border-radius: var(--radius-card); overflow: hidden; background: var(--card);
}
.media-cover-img, .media-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-cover-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 3rem; color: var(--stroke);
}

/* Colonna info: riempie l'altezza della cover (testo in alto, azioni in basso). */
.media-info { display: flex; flex-direction: column; }

/* --- Interni show (single-programma) --- */
.programma-info-title { font-size: clamp(1.2rem, 3vw, 1.6rem); margin-bottom: var(--space-2); }
.programma-desc { color: var(--text-muted); line-height: 1.6; }
.programma-desc p { margin: 0 0 0.75rem; }
.programma-desc p:last-child { margin-bottom: 0; }

/* Condividi: stessa lingua degli articoli (contorno bianco -> rosso), riusa .js-share.
   margin-top:auto lo ancora in basso, riempiendo l'altezza del blocco info. */
.programma-share {
    align-self: flex-start; margin-top: auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: transparent; color: var(--text-primary);
    border: 1px solid var(--text-primary); border-radius: 2rem;
    padding: 0.7rem 1.5rem;
    font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease;
}
.programma-share:hover { color: var(--brand-red); border-color: var(--brand-red); }
.programma-share svg { width: 1.15rem; height: 1.15rem; }

/* --- Interni puntata (single-podcast) --- */
.puntata-from { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-subtle); margin-bottom: 0.35rem; }
.puntata-from a { color: var(--brand-red); font-weight: 600; transition: color 0.2s ease; }
.puntata-from a:hover { color: var(--brand-red-hover); }
.puntata-sottotitolo { font-size: 1.05rem; line-height: 1.4; color: var(--text-primary); margin-bottom: var(--space-2); }
.puntata-single-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
    font-family: var(--font-ui); font-size: 0.9rem; color: var(--text-muted);
    margin-bottom: var(--space-1);
}
.puntata-single-meta .puntata-dj { display: inline-flex; align-items: center; gap: 6px; }
.puntata-single-meta .puntata-dj svg { width: 15px; height: 15px; }
/* Separatori piu' grandi e in un grigio ben visibile sullo sfondo scuro */
.puntata-single-meta .sep { color: var(--text-subtle); font-size: 1.3em; line-height: 1; }
/* Azioni (Play + Condividi) ancorate in basso, come il Condividi dello show */
.puntata-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); }
/* Solo sulla puntata: Condividi alla stessa altezza di "Ascolta episodio"
   (stesso padding verticale + font-size del .btn-play-podcast), cosi' i due pill
   sono una coppia allineata. Fill/outline restano per la gerarchia; larghezza libera. */
.puntata-actions .programma-share { margin-top: 0; align-self: auto; padding: 0.875rem 1.5rem; font-size: 1rem; }

/* Note della puntata (sotto la banda): heading condiviso .section-* + corpo di lettura */
.puntata-note { margin-top: var(--space-5); }
.puntata-note-body { color: var(--text-muted); line-height: 1.7; max-width: 52rem; }
.puntata-note-body p { margin: 0 0 0.75rem; }
.puntata-note-body p:last-child { margin-bottom: 0; }
.puntata-note-body img { max-width: 100%; height: auto; border-radius: var(--radius-card); margin: 0.5rem 0 1rem; }

/* Mobile/tablet (<=1023): cover quadrata A SINISTRA (non centrata, non full-width),
   info in colonna sotto, tutto allineato a sinistra */
@media (max-width: 1023px) {
    .media-header { grid-template-columns: 1fr; gap: var(--space-3); align-items: start; }
    .media-cover { width: 220px; max-width: 100%; }
    .programma-share { margin-top: var(--space-3); }
    .puntata-actions { margin-top: var(--space-3); padding-top: 0; }
}

/* ==========================================
   26. LANDING /podcast/ — griglia programmi + feed + carica altre
   ========================================== */
/* Testo introduttivo landing: riusa .global-page-subtitle (Inter, spento), qui solo
   larghezza di lettura e interlinea comoda. Stampato sotto l'H1 se il campo ACF e' pieno. */
.podcast-intro { max-width: 46rem; line-height: 1.6; }
.programmi-section { margin-bottom: var(--space-6); }

/* Griglia a colonne bilanciate: la card riempie 1:1 e resta quadrata. Il numero di
   colonne (2-4, tetto 4) e' calcolato dal template dal conteggio programmi ed emesso
   come classe modificatore -> mai auto-fill/auto-fit (che con pochi elementi lasciano
   buchi o gonfiano/orfanano). Vedi archive-programma.php. */
.programmi-grid { display: grid; gap: var(--space-3); }
.programmi-grid--cols-1 { grid-template-columns: minmax(0, 20rem); }
.programmi-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.programmi-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.programmi-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Card grafica: solo cover quadrata col titolo dentro l'immagine. Raggio coerente
   con la cover programma (--radius-card). Hover-zoom condiviso via .card-cover. */
.programma-card {
    position: relative; display: block; aspect-ratio: 1 / 1;
    border-radius: var(--radius-card); overflow: hidden; background: var(--card);
}
.programma-card-ph {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 1.4rem; color: var(--text-primary);
    text-align: center; padding: 0 0.6rem;
}

/* Mobile: 2 colonne fisse a prescindere dal numero di programmi. Sovrascrive le
   varianti --cols-* (stessa specificita', ma questa regola viene dopo nel sorgente). */
@media (max-width: 768px) {
    .programmi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
}

/* Carica altre puntate: stessa lingua degli altri bottoni (contorno bianco -> rosso) */
.load-more-wrap { display: flex; justify-content: center; margin-top: var(--space-4); }
.load-more-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: transparent; color: var(--text-primary);
    border: 1px solid var(--text-primary); border-radius: 2rem;
    padding: 0.7rem 1.6rem;
    font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease;
}
.load-more-btn:hover { color: var(--brand-red); border-color: var(--brand-red); }
.load-more-btn:disabled { opacity: 0.6; cursor: default; }
.load-more-plus { width: 1.1rem; height: 1.1rem; }

/* Barra filtri puntate (landing): righe etichettate (oggi solo DJ) che riusano il
   pill `.filter-pill` esistente. Una scelta per riga; piu' righe si combinerebbero in
   AND lato server. Le righe scrollano in orizzontale se i termini crescono. */
.puntate-filters { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0 var(--space-3); }
.puntate-filter-row { display: flex; align-items: center; gap: var(--space-2); }
.puntate-filter-label {
    flex: 0 0 auto; min-width: 3.5rem;
    font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle);
}
.puntate-filter-pills { display: flex; gap: 0.6rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0.25rem; }
.puntate-filter-pills::-webkit-scrollbar { display: none; }
/* I pill filtro della landing sono <button> (azione in pagina, non link): azzera il chrome nativo. */
button.filter-pill { -webkit-appearance: none; appearance: none; line-height: 1; }
/* Lista in caricamento durante un cambio filtro: attenua + blocca i click finche' arriva la risposta. */
.landing-puntate-list.is-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.15s ease; }

/* ==========================================
   27. PAGINA CONTATTI (page-contatti.php)
   ========================================== */
/* Testata: riusa .global-page-header come la landing Podcast. Il testo
   introduttivo e' il contenuto della pagina scritto nell'editor. */
.contatti-page { padding-bottom: var(--space-5); }
.contatti-intro { max-width: 46rem; line-height: 1.6; }
.contatti-intro p { margin: 0; }

/* Blocco email (protagonista): stessa sfumatura rossa leggera della hero in home */
.contatti-email {
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(229, 37, 37, 0.14) 0%, transparent 55%),
        var(--surface);
    border: 1px solid var(--stroke); border-radius: var(--radius-card);
    padding: 2.5rem;
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: var(--space-4);
    container-type: inline-size;
}
.contatti-email-main {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
    flex: 1 1 26rem; min-width: 0;
}
.contatti-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
    background: var(--card); border: 1px solid var(--stroke);
    padding: 0.4rem 0.9rem; border-radius: 2rem;
}
.contatti-eyebrow svg { width: 0.875rem; height: 0.875rem; }

/* Indirizzo email: NON deve MAI andare a capo.
   La dimensione segue la larghezza del contenitore (container query):
   misurato col font Anton, l'indirizzo e' largo ~12 volte la dimensione del
   carattere, quindi 8cqi lo fa occupare al massimo il 96% dello spazio.
   Tetto 3rem sugli schermi larghi. La prima font-size (1.1rem) e' la riserva
   per i browser senza container queries: entra in una riga anche a 320px.
   ⚠️ SE L'INDIRIZZO CAMBIA (Sezione 13 di functions.php), il valore 8cqi va
   ricalcolato sulla nuova lunghezza. */
.contatti-email-wrap { width: 100%; container-type: inline-size; }
.contatti-email-address {
    display: inline-block; white-space: nowrap;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-size: min(3rem, 8cqi);
    line-height: 1.1; letter-spacing: 0.02em; color: var(--text-primary);
}
.contatti-email-address:hover { color: var(--brand-red); }

/* Bottoni: il primario e' identico alla CTA rossa della home */
.contatti-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.contatti-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    border-radius: 2rem; padding: 0.875rem 2rem;
    font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease;
}
.contatti-btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.contatti-btn--primary {
    background: var(--brand-red); color: var(--text-button);
    border: 1px solid var(--brand-red);
    box-shadow: 0 0.25rem 1rem rgba(229, 37, 37, 0.2);
}
.contatti-btn--primary:hover {
    background: var(--brand-red-hover); border-color: var(--brand-red-hover);
    color: var(--text-button); transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1.25rem rgba(229, 37, 37, 0.4);
}
.contatti-btn--secondary {
    background: transparent; color: var(--text-primary);
    border: 1px solid var(--stroke-light);
}
.contatti-btn--secondary:hover { border-color: var(--text-subtle); color: var(--text-primary); }

/* Seguici: testata con .section-head / .section-title condivisi (home + landing).
   Le icone compaiono solo per i social con un indirizzo (Sezione 13). */
.contatti-social { margin-top: var(--space-5); }
.contatti-social-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3);
}
.contatti-social-tile {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 1.25rem; background: var(--surface);
    border: 1px solid var(--stroke); border-radius: var(--radius-card);
    color: var(--text-primary); transition: border-color 0.2s ease;
}
.contatti-social-tile:hover { border-color: var(--brand-red); color: var(--text-primary); }
.contatti-social-icon {
    width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 50%;
    background: var(--card); display: flex; align-items: center; justify-content: center;
}
.contatti-social-icon svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.contatti-social-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.contatti-social-name { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; }
.contatti-social-handle { font-family: var(--font-ui); font-size: 0.875rem; color: var(--text-subtle); }
.contatti-social-arrow { width: 1.125rem; height: 1.125rem; margin-left: auto; flex-shrink: 0; color: var(--text-subtle); }

/* Tablet: social su 2 colonne */
@media (max-width: 1023px) {
    .contatti-social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Telefono: blocco email in colonna, bottoni a tutta larghezza, social in colonna */
@media (max-width: 768px) {
    .contatti-email {
        padding: var(--space-3);
        flex-direction: column; align-items: stretch; gap: var(--space-3);
    }
    .contatti-email-main { flex: 0 0 auto; }
    /* Su telefono/tablet l'email misura la larghezza dal riquadro esterno
    (.contatti-email). Misurata dal proprio riquadro, nel layout a colonna,
    il browser ne calcolava l'altezza una volta sola: email sopra i bottoni. */
    .contatti-email-wrap { container-type: normal; }
    .contatti-actions { flex-direction: column; }
    .contatti-btn { width: 100%; padding: 0.875rem 1.5rem; }
    .contatti-social-grid { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ==========================================
   28. BANNER DEI COOKIE (CookieConsent v3)
   ========================================== */
/* La libreria (assets/vendor/cookieconsent/) si stila con variabili CSS su
   #cc-main: qui le colleghiamo ai token del tema. Configurazione e testi in
   assets/js/consent.js; registro in functions.php, Sezione 17.
   "Accetta tutto" e "Rifiuta" hanno lo stesso peso (equalWeightButtons). */
#cc-main {
    --cc-font-family: var(--font-ui);
    --cc-modal-border-radius: var(--radius-card);
    --cc-btn-border-radius: 2rem;
    --cc-bg: var(--surface);
    --cc-primary-color: var(--text-primary);
    --cc-secondary-color: var(--text-muted);
    --cc-link-color: var(--text-primary);
    --cc-btn-primary-bg: var(--text-button);
    --cc-btn-primary-color: var(--brand-black);
    --cc-btn-primary-border-color: var(--text-button);
    --cc-btn-primary-hover-bg: var(--brand-red);
    --cc-btn-primary-hover-color: var(--text-button);
    --cc-btn-primary-hover-border-color: var(--brand-red);
    --cc-btn-secondary-bg: transparent;
    --cc-btn-secondary-color: var(--text-primary);
    --cc-btn-secondary-border-color: var(--stroke-light);
    --cc-btn-secondary-hover-bg: transparent;
    --cc-btn-secondary-hover-color: var(--text-button);
    --cc-btn-secondary-hover-border-color: var(--brand-red);
    --cc-separator-border-color: var(--stroke);
    --cc-toggle-on-bg: var(--brand-red);
    --cc-toggle-off-bg: var(--stroke-light);
    --cc-toggle-on-knob-bg: var(--text-button);
    --cc-toggle-off-knob-bg: var(--text-button);
    --cc-toggle-readonly-bg: var(--stroke);
    --cc-toggle-readonly-knob-bg: var(--text-subtle);
    --cc-toggle-readonly-knob-icon-color: var(--stroke);
    --cc-cookie-category-block-bg: var(--card);
    --cc-cookie-category-block-border: var(--stroke);
    --cc-cookie-category-block-hover-bg: var(--card);
    --cc-cookie-category-block-hover-border: var(--stroke-light);
    --cc-cookie-category-expanded-block-bg: var(--card);
    --cc-cookie-category-expanded-block-hover-bg: var(--card);
    --cc-section-category-border: var(--stroke);
    --cc-overlay-bg: rgba(0, 0, 0, 0.7);
    --cc-footer-bg: var(--bg-1);
    --cc-footer-color: var(--text-subtle);
    --cc-footer-border-color: var(--stroke);
    --cc-webkit-scrollbar-bg: var(--stroke-light);
}
#cc-main .cm,
#cc-main .pm { border: 1px solid var(--stroke-light); }
#cc-main .cm__title,
#cc-main .pm__title {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    letter-spacing: 0.02em; font-size: 1.5rem; line-height: 1.1;
}
#cc-main .cm__btn,
#cc-main .pm__btn { font-weight: 600; }
#cc-main a { text-decoration: underline; }
/* La X: bianca su fondo scuro, rossa al passaggio */
#cc-main .cm__btn--close,
#cc-main .pm__close-btn { background: transparent; border-color: var(--stroke-light); }
#cc-main .cm__btn--close svg,
#cc-main .pm__close-btn svg { stroke: var(--text-primary); }
#cc-main .cm__btn--close:hover svg,
#cc-main .pm__close-btn:hover svg { stroke: var(--brand-red); }
/* Il banner resta sopra il player (desktop) e sopra player + barra in basso (telefono) */
@media (min-width: 640px) {
    #cc-main .cm--box.cm--bottom { bottom: calc(var(--player-height) + 1rem); }
}
@media (max-width: 639px) {
    #cc-main .cm--box.cm--bottom { bottom: calc(var(--player-height) + var(--bottom-nav-height) + var(--safe-bottom, 0px) + 0.5rem); }
}
.rr-consent-id { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--text-primary); }

/* Link "Preferenze cookie" sotto la riga legale del menu a tutto schermo */
.nav-cookie-prefs {
    display: inline-block; margin-top: 0.35rem; padding: 0.25rem 0.5rem;
    background: none; border: 0; cursor: pointer;
    font-family: var(--font-ui); font-size: 0.75rem; color: var(--text-subtle);
    text-decoration: underline; text-underline-offset: 2px;
    transition: color 0.2s ease;
}
.nav-cookie-prefs:hover,
.nav-cookie-prefs:focus-visible { color: var(--brand-red); }