/* =========================================================
   lv-shared.css — Elementi LV2 condivisi tra più pagine.
   Da linkare da QUALSIASI pagina che usa i componenti .lv-meta,
   .lv-meta-item, .lv-meta-sep, .lv-meta-series* (etichette pill brand).
   Selettori NON scoped (a differenza di index.css che li ha sotto .hero):
   funzionano in qualunque contesto purché:
     - sia caricato il font "Lato" (Google) → vedi <link> in head
     - sia caricato "Material Symbols Outlined" per l'icona schedule
       → <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=schedule" rel="stylesheet">
   ========================================================= */
:root {
    /* Font dedicato a microcopy / metadata / descrizioni (Lato — humanist). */
    --font-info: 'Lato', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Larghezza standard del "body editoriale" (titoli card + blocchi testo).
       Default = mobile (92% — quasi tutto lo schermo). Ridotta progressivamente
       su breakpoint più ampi via media queries sotto. */
    --lv-body-width: 92%;
}

/* Tablet: 768-1024px → 80% */
@media (min-width: 768px)  {
    :root {
        --lv-body-width: 80%;
    }
}

/* Desktop: 1024-1440px → 65% */
@media (min-width: 1024px) {
    :root {
        --lv-body-width: 65%;
    }
}

/* Large: 1440px+ → 50% */
@media (min-width: 1440px) {
    :root {
        --lv-body-width: 50%;
    }
}

/* --- .lv-body-width — utility per uniformare larghezza + margini orizzontali
       di overlay card e blocchi editoriali. La width è governata da var
       responsive sopra. --- */
.lv-body-width {
    width: var(--lv-body-width);
    margin-left: auto;
    margin-right: auto;
}

/* --- Two-columns mobile: collassa a 1 colonna sotto i 768px.
       Su mobile due colonne strette diventano illeggibili. --- */
@media (max-width: 768px) {
    .textBox.two-columns {
        column-count: 1;
    }
}

/* --- .lv-meta — riga "Categoria | Durata | Lingua | Serie" --- */
.lv-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 16px;
    width: 100%;
    line-height: 1;

    /* font-family hardcoded + !important: alcuni CSS legacy (noova editorial.css)
       potrebbero sovrascrivere via cascade nonostante l'ordine dei link. */
    font-family: 'Neue Haas Display', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;

    /* font-weight: 700 !important */
    color: rgba(255, 255, 255, 0.85);

    /* default; override inline per per-card (es. style="color:#904b43") */
}

/* Anche i figli interni ereditano forzato — alcuni span/div legacy potrebbero
   provare a impostare un loro font-family con specificity > .lv-meta. */
.lv-meta,
.lv-meta * {
    font-family: 'Neue Haas Display', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* eccezione: l'icona Material Symbols deve usare il suo font (è un font-icon) */
.lv-meta .material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
}

.lv-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.lv-meta-item .material-symbols-outlined {
    font-size: 15px;
    opacity: 0.6;
}

.lv-meta-sep {
    /* Separatori | nascosti: si lascia solo lo spazio singolo del flex gap
       tra gli item (16px) — niente più doppia spaziatura attorno al pipe. */
    display: none;
}

/* Serie: piccolo box bordato (stile "HD Netflix"), brand color via currentColor */
.lv-meta-series {
    display: inline-block;
    border: 1px solid currentColor;
    padding: 0 3px;
    border-radius: 3px;
    /* Safari (macOS Preferences + iOS) forza un min-font-size sotto ~12px.
       Workaround: dichiariamo 12px (accettato) e scaliamo visivamente al ~83%
       per ottenere ~10px visual. transform-origin:left center per ancorare
       l'angolo sx (così non balla rispetto al meta separator a sx). */
    font-size: 12px;
    transform: scale(0.83);
    transform-origin: left center;
    /* Compensiamo lo spazio "extra" che il transform NON riduce (~17% di 12px ≈ 2px) */
    margin-right: -2px;

    letter-spacing: 0.02em;
    line-height: 1.4;

    /* font-weight non dichiarato → eredita 700 dal .lv-meta parent */
}

/* Brand color tokens per serie LibriVivi */
.lv-meta-series--colossal {
    color: #9bd99b;
}

.lv-meta-series--palco {
    color: #f0d060;
}

.lv-meta-series--recital {
    color: #80b4f0;
}

.lv-meta-series--fiabe {
    color: #f08080;
}

.lv-meta-series--letture {
    color: #70d5b8;
}

/* =========================================================
   HERO CARD — replica esatta del pattern hero-4 → productions
   della home. La card è sticky 100vh + 100vh slide-out (come
   hero-2/3/4), poi l'editorial in flusso prende il posto.
   IL "PAVIMENTO": .lv-floor fisso a z:0 dietro tutto, replica
   .contacts della home → tappa qualsiasi buco visivo durante
   le transizioni o quando il contenuto non riempie il viewport.
   ========================================================= */
.lv-hero-host {
    position: relative;
    z-index: 1;

    /* sopra .lv-floor (z:0), come #productions sopra .contacts */
}

.lv-hero-host .card-stack {
    position: relative;
}

.lv-hero-host .card-frame {
    position: relative;
    height: 200vh;

    /* 100vh stay + 100vh slide-out, come home */
    width: 100%;
}

.lv-hero-host .hero {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 0 20px 100px !important;
    background-size: cover !important;
    background-position: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* =========================================================
   .lv-floor — pavimento fisso dietro tutto. Replica di .contacts
   nella home: position fixed in basso, z:0 (sotto la pagina).
   Tappa qualsiasi buco visivo se il contenuto non riempie il
   viewport o durante le transizioni di slide.
   ATTENZIONE: tutti gli elementi della pagina che devono stare
   SOPRA al floor devono avere z-index >= 1 esplicito (es.
   .lv-hero-host, e i wrapper editorial myCenter/main/section).
   ========================================================= */
.lv-floor {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    height: 100vh;
    max-height: 100vh;
    background: #1b1514;

    /* stesso dark theme della home */
    pointer-events: none;

    /* non intercetta click */
}

/* (rimossa regola body > section { z-index: 1 } perché editorial2 ora usa
   la struttura della home: #productions { z-index: 1 } e .contacts {
   z-index: 0 } sono già definiti in index.css/index.html scope). */
/* =========================================================
   EDITORIAL PAGES — estende il template .lv-card.lv-banner a .hero-1.
   index.css ha :is(.hero-2,.hero-3,.hero-4) .lv-card.lv-banner perché
   sulla home hero-1 è "Legendary Voices" (testo). Sulle editorial2/3/4
   hero-1 è il banner Cantata/etc → serve la stessa regola di fill 100%.
   ========================================================= */
.hero-1 .lv-card.lv-banner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* =========================================================
   FIX STICKY HERO su pagine editorial — forzato con !important
   per neutralizzare qualunque regola noova editorial.css o globale
   che possa sovrascriverlo. La home non ha bisogno di !important
   perché non carica editorial.css.
   ========================================================= */
.card-stack .hero-2,
.card-stack .hero-3,
.card-stack .hero-4 {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
}

.card-stack .card-frame {
    position: relative !important;
    height: 200vh !important;
}

/* Card interna riempie 100vh, niente sforamenti */
.lv-hero-host .hero .lv-card,
.lv-hero-host .hero .lv-card.lv-banner {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.lv-hero-host .hero .lv-inner {
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Hero-2 specifico: layout verticalmente centrato + padding ampio */
.lv-hero-host .hero-2 {
    justify-content: center;
    padding: 80px 138px;
}

/* La .lv-card.lv-banner dentro .hero riempie tutto lo spazio della hero */
.lv-hero-host .hero .lv-card.lv-banner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Spacing dentro l'overlay-center (logo SVG → meta → credit → btn) */
.lv-hero-host .hero .lv-overlay-center {
    --stack-gap: 10px;
    gap: var(--stack-gap);
}

/* Logo SVG centrale: dimensione fissa a scaglioni come in home */
.lv-hero-host .hero .lv-overlay-center > img {
    width: 280px;
}

@media (min-width: 768px)  {
    .lv-hero-host .hero .lv-overlay-center > img {
        width: 440px;
    }
}

@media (min-width: 1024px) {
    .lv-hero-host .hero .lv-overlay-center > img {
        width: 600px;
    }
}

@media (min-width: 1440px) {
    .lv-hero-host .hero .lv-overlay-center > img {
        width: 780px;
    }
}

@media (min-width: 1920px) {
    .lv-hero-host .hero .lv-overlay-center > img {
        width: 940px;
    }
}

/* lv-credit (cast row) sotto la meta: stesso color del meta, font Lato */
.lv-hero-host .hero .lv-overlay-center .lv-credit {
    font-family: 'Lato', 'Helvetica Neue', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
    max-width: 90% !important;
}

.lv-hero-host .hero .lv-overlay-center .lv-credit b {
    font-weight: 700 !important;
}

/* =========================================================
   .lv-* INTERNAL RULES — copia da LV2 style.css, scoped a
   .lv-hero-host così non collidono con noova editorial.css
   (che ridefinisce le stesse classi diversamente).
   Senza questi, dentro la hero card di editorial vincono i
   noova styles e la card si scompone visivamente.
   ========================================================= */
.lv-hero-host .lv-card {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    transition: transform 0.3s ease;
}

.lv-hero-host .lv-inner {
    height: 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-size: cover;
    background-position: center;
    background-color: transparent;
    border-radius: 0;
    overflow: hidden;
    transition: transform 1.3s ease;
}

.lv-hero-host .lv-overlay-center {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 35px 0;
}

.lv-hero-host .lv-badge-tl {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 3;
}

.lv-hero-host .lv-badge-tr {
    top: 20px;
    right: 20px;
    position: absolute;
    text-align: right;
    height: 40px;
    z-index: 3;
}

.lv-hero-host .lv-btn {
    background-color: white;
    border-radius: 20px;
    padding: 12px 24px;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    line-height: 16px;
    cursor: pointer;
    color: black;
    border: none;
    display: inline-block;
    text-decoration: none;
    transition: filter 0.2s, transform 0.3s;
}

.lv-hero-host .lv-btn:hover,
.lv-hero-host .lv-hover-scale:hover {
    filter: brightness(1.05);
    transform: scale(1.03);
}