/* ═══════════════════════════════════════════════════════════════════
   intro-categoria.css - INTRO IMPAGINATA DELLE PAGINE CATEGORIA
   ───────────────────────────────────────────────────────────────────
   Creato il 2026-09-24 su richiesta di Andrea: il testo introduttivo
   delle categorie arrivava dal CMS (DescrizioneCategoria, HTML del
   CKEditor) e veniva stampato "nudo" dentro un .pf-p. Ora il testo sta
   nei resx della pagina e viene impaginato qui, SENZA card.

   COMPONENTE CONDIVISO: l'HTML lo scrive SOLO App_Code/IntroCategoria.cs
   (sempre dentro un <div class="cat-in">), lo stile e' SOLO questo file.
   Cosi' tutte le pagine categoria hanno la stessa resa e le stesse classi.
   - Occhiello, titolo e paragrafi usano .pf-eyebrow / .pf-h2 / .pf-p:
     le pagine che li definiscono gia' (scoped) vincono, perche' il loro
     <style> arriva DOPO questo file; per le altre valgono i fallback
     qui sotto, con gli stessi valori del trio canonico del sito.
   - Tutto e' agganciato sotto .cat-in: serve a battere le regole
     generiche del tema (.gdlr-core-page-builder-body p { margin:0 }).
   - Colori: la pagina imposta sul suo wrapper
       --in-acc     accento (numeri, filetti, occhiello di fallback)
       --in-acc-dk  fondo scuro della foto / del segnaposto
     I --cm-* sono i token scoped delle pagine categoria; se mancano
     valgono i fallback.
   - Stessa struttura dell'intro delle Spiagge (.sp-in-*, 2026-09-24),
     che per ora resta con le sue classi nella pagina.
   ═══════════════════════════════════════════════════════════════════ */

/* Fallback del trio canonico (solo per le pagine che non lo definiscono) */
.cat-in .pf-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-size:.75rem;
    font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--in-acc,#1a1a2e);margin-bottom:11px}
.cat-in .pf-eyebrow::before{content:'';width:22px;height:1.5px;background:currentColor}
.cat-in .pf-h2{font-family:var(--font-display);font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:300;line-height:1.12;
    color:var(--cm-ink,#1a1a2e);margin:0 0 .9rem}
.cat-in .pf-h2 em{font-style:italic;color:var(--in-acc,#1a1a2e)}
.cat-in .pf-p{font-size:.9rem;font-weight:300;color:var(--cm-ink-md,#3a3848);line-height:1.9}
.cat-in .pf-p strong{color:var(--cm-ink,#1a1a2e);font-weight:600}
.cat-in .pf-p a{color:var(--in-acc,#1a1a2e);text-decoration:underline;text-underline-offset:3px}

/* PAGINE "OSPITE" (.cat-in-host sul contenitore): occhiello e titolo della
   pagina stanno FUORI dal componente, subito sopra (DormireList, Mangiare,
   Comuni, Muoversi, Quando andare, Storia, Traghetti, Noleggio, Sposarsi,
   Itinerari). Da tablet in su il contenitore diventa una griglia a 2 colonne
   e la foto sale accanto a occhiello + titolo + attacco, invece di stare
   accanto al solo attacco. Righe: 1 occhiello, 2 titolo, 3 attacco (1fr:
   assorbe l'altezza della foto senza aprire buchi fra occhiello e titolo).
   Tutto quello che viene dopo l'apertura va a tutta larghezza. */
.intro-inner > .intro-text.cat-in-host{grid-column:1/-1}
@media (min-width:761px){
    .cat-in-host{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;
        column-gap:2.4rem;align-items:start}
    .cat-in-host > *{grid-column:1 / -1}
    .cat-in-host > :has(~ .cat-in){grid-column:1}
    .cat-in-host > .cat-in,.cat-in-host > .cat-in > .cat-in-open{display:contents}
    .cat-in-host > .cat-in > :not(.cat-in-open){grid-column:1 / -1}
    .cat-in-host .cat-in-open-tx{grid-column:1;display:block}
    .cat-in-host .cat-in-ph{grid-column:2;grid-row:1 / span 3;align-self:stretch;min-height:300px}
}

/* Pagine ospite: quello che la pagina mette DOPO l'intro (es. intro_p2 di
   Quando andare, Storia, Noleggio, Traghetti + rotte) non deve attaccarsi
   alla chiusura in corsivo: il tema azzera i margini dei <p>. */
.cat-in-host > .cat-in ~ *{margin-top:1.6rem}

/* Apertura: testo (occhiello + titolo + attacco) a sinistra, foto a destra */
.cat-in .cat-in-open{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.4rem;align-items:stretch}
.cat-in .cat-in-open--solo{grid-template-columns:minmax(0,1fr)}
.cat-in .cat-in-open-tx{display:flex;flex-direction:column;justify-content:center;min-width:0}
.cat-in .cat-in-open-tx .pf-h2{margin-bottom:1rem}
.cat-in .pf-p.cat-in-lead{font-size:1rem;line-height:1.8;margin:0}

/* Foto: riempie l'altezza del testo, minimo 340px. Il fondo scuro si vede
   solo mentre l'immagine carica. */
.cat-in .cat-in-ph{position:relative;margin:0;min-height:340px;border-radius:14px;overflow:hidden;
    background:var(--in-acc-dk,var(--in-acc,#1a1a2e))}
.cat-in .cat-in-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Segnaposto (foto da produrre): stessa resa dei segnaposto delle Spiagge */
.cat-in .cat-in-ph--vuoto{display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.10),transparent 62%),var(--in-acc-dk,#1a1a2e)}
.cat-in .cat-in-ph--vuoto::before{content:'';position:absolute;inset:0;
    background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px}
.cat-in .cat-in-ph--vuoto i{position:relative;font-size:2.3rem;color:rgba(255,255,255,.45)}

/* Fascia elenco: voci numerate 01/02/03... (stesso motivo dell'elenco delle
   Spiagge) su una griglia di 3 colonne, fra due filetti. Griglia e non riga
   libera: con 6 voci la riga libera lasciava l'ultima voce da sola a capo. */
.cat-in .cat-in-band{margin:2.4rem 0 0;padding:1.4rem 0 1.5rem;
    border-top:1px solid var(--cm-brd,#ebebeb);border-bottom:1px solid var(--cm-brd,#ebebeb)}
.cat-in .cat-in-wt{font-family:var(--font-body);font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    color:var(--cm-ink-lt,#6b6a78);margin:0 0 .9rem}
.cat-in .cat-in-words{list-style:none;margin:0 0 1rem;padding:0;display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem 1.6rem}
.cat-in .cat-in-words:last-child{margin-bottom:0}
.cat-in .cat-in-words li{display:flex;align-items:baseline;gap:10px;min-width:0;font-family:var(--font-display);
    font-size:clamp(1.15rem,1.8vw,1.35rem);font-weight:400;line-height:1.3;color:var(--cm-ink,#1a1a2e)}
.cat-in .cat-in-n{font-family:var(--font-display);font-style:italic;font-size:.95rem;color:var(--in-acc,#1a1a2e);flex-shrink:0}
.cat-in .cat-in-band .pf-p{margin:0}

/* Corpo: paragrafi numerati su 2 colonne, ognuno col suo filetto in alto */
.cat-in .cat-in-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2.4rem;margin:2.2rem 0 0}
.cat-in .cat-in-body--uno{grid-template-columns:minmax(0,1fr)}
.cat-in .cat-in-bi{display:flex;gap:14px;align-items:flex-start;padding-top:1.1rem;border-top:1px solid var(--cm-brd,#ebebeb);min-width:0}
.cat-in .cat-in-bi .cat-in-n{font-size:1.05rem;line-height:1.6}
.cat-in .cat-in-bi-tx{min-width:0}
.cat-in .cat-in-bt{font-family:var(--font-display);font-size:1.25rem;font-weight:400;line-height:1.25;
    color:var(--cm-ink,#1a1a2e);margin:0 0 .45rem}
.cat-in .cat-in-bi .pf-p{margin:0}
/* Paragrafi con dati in evidenza (es. Quando andare): niente numeri, etichetta
   del periodo + numeri con la stessa resa dell'hero (.ph-stat-n / .ph-stat-l) */
.cat-in .cat-in-bl{font-family:var(--font-body);font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    color:var(--cm-ink,#1a1a2e);margin:0 0 .9rem}
.cat-in .cat-in-stats{display:flex;flex-wrap:wrap;gap:.8rem 2rem;margin:0 0 1rem}
.cat-in .cat-in-stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.cat-in .cat-in-stat-n{font-family:var(--font-display);font-size:1.7rem;font-weight:600;line-height:1.1;color:var(--in-acc,#1a1a2e)}
.cat-in .cat-in-stat-l{font-family:var(--font-body);font-size:.75rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
    color:var(--cm-ink-lt,#6b6a78)}
.cat-in .cat-in-body--dati{gap:1.6rem 3rem}

/* Chiusura in corsivo con filetto d'accento (stessa resa di .sp-in-close) */
.cat-in .cat-in-close{font-family:var(--font-display);font-style:italic;font-size:1.12rem;line-height:1.6;
    color:var(--cm-ink,#1a1a2e);border-left:3px solid var(--in-acc,#1a1a2e);padding-left:16px;margin:1.8rem 0 0}

/* Mobile: una colonna, foto sopra il testo in formato 16:10, voci su 2 colonne */
@media (max-width:760px){
    .cat-in .cat-in-open{grid-template-columns:1fr;gap:1.2rem}
    .cat-in .cat-in-ph{order:-1;min-height:0;aspect-ratio:16/10}
    .cat-in .cat-in-band{margin-top:1.8rem}
    .cat-in .cat-in-words{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.2rem}
    .cat-in .cat-in-body{grid-template-columns:1fr;gap:1.2rem;margin-top:1.8rem}
}