/* =====================================================================
   ElbaMyLove - eventi.css  (2026-09-20)
   CSS CONDIVISO della sezione Eventi: hub (App_Page/Cosa-Fare/
   Eventi-Isola-Elba.aspx) e scheda dettaglio (Evento-Dettaglio.aspx).

   PERCHE' ESISTE: la scheda dettaglio mostra le stesse card della hub
   ("Altri eventi"). Prima il CSS delle card stava inline nella hub:
   la scheda avrebbe dovuto ricopiarlo, cioe' lo stesso componente scritto
   due volte. Qui c'e' UNA sola definizione, con gli stessi nomi di classe.
   Il markup delle card lo produce App_Code/EventiCardBuilder.cs.

   CONTENUTO: token della palette Eventi, fondale dell'hero, sezioni
   (pf-*), avviso (.evt-legend), card ricorrenti (.rec-*), card
   calendario (.evt-*), griglie. Tutto scoped sotto .eventi-page.
   Solo CSS variables per i font.
   ===================================================================== */

/* PALETTE notte mediterranea + neon/oro */
.eventi-page{
    --ev-bg:#0d1117; --ev-bg2:#1a1040; --ev-amber:#e0a020; --ev-gold:#d6a01e;
    --ev-purple:#6c3fc5; --ev-teal:#0ea5a0;
    --cat-sport:#0ea5a0; --cat-musica:#6c3fc5; --cat-sagra:#d98a00;
    --cat-cultura:#e8523a; --cat-natura:#22a558; --cat-notte:#d6447f;
    --cm-ink:#1a1a2e; --cm-ink-md:#3a3848; --cm-ink-lt:#7d7b8c;
    --cm-soft:#f7f7f7; --cm-brd:#ebebeb;
    background:#fff;
}

/* HERO: fondale fisso "notte festival" (override del background globale).
   Colori LETTERALI nei selettori #page-hero (regola del progetto): l'hero puo'
   stare fuori dal wrapper .eventi-page e allora le variabili non arrivano. */
#page-hero.hero-eventi .ph-bg{
    background:
        radial-gradient(ellipse at 15% 10%,rgba(108,63,197,.4) 0%,transparent 50%),
        radial-gradient(ellipse at 85% 80%,rgba(14,165,160,.3) 0%,transparent 50%),
        radial-gradient(ellipse at 55% 50%,rgba(232,82,58,.16) 0%,transparent 55%),
        linear-gradient(175deg,#0d1117 0%,#120a28 55%,#0a0810 100%);
}
#page-hero.hero-eventi .ph-h1 em{color:#e0a020}
#page-hero.hero-eventi .ph-stat-n{color:#e0a020}
#page-hero.hero-eventi .breadcrumb-nav a:hover{color:#e0a020}

/* SEZIONI */
.eventi-page .pf-sec{margin-bottom:3.2rem;padding-bottom:3.2rem;border-bottom:1px solid var(--cm-brd);scroll-margin-top:calc(120px + var(--elm-hdr-d,0px))}
.eventi-page .pf-sec:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.eventi-page .pf-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ev-purple);margin-bottom:11px}
.eventi-page .pf-eyebrow::before{content:'';width:22px;height:1.5px;background:var(--ev-purple)}
.eventi-page .pf-h2{font-family:var(--font-display);font-size:clamp(1.85rem,3.6vw,2.6rem);font-weight:300;line-height:1.13;color:var(--cm-ink);margin-bottom:.9rem}
.eventi-page .pf-h2 em{font-style:italic;color:var(--ev-purple)}
.eventi-page .pf-p{font-size:.9rem;color:var(--cm-ink-md);line-height:1.9}

/* AVVISO / LEGENDA (riquadro oro con icona) */
.eventi-page .evt-legend{display:flex;align-items:flex-start;gap:10px;background:#fdf6e3;border:1px solid rgba(214,160,30,.35);border-radius:8px;padding:12px 16px;font-size:.8rem;color:var(--cm-ink);line-height:1.6;margin:1.2rem 0}
.eventi-page .evt-legend i{color:var(--ev-gold);flex-shrink:0;font-size:1.1rem;margin-top:1px}

/* ---------------------------------------------------------------------
   COPERTINA NELLE CARD
   Andrea, 20/09/2026: "aumenta lo spazio per l'immagine di copertina,
   centrata, <img>" -> area 4:3 per entrambe le card (prima: 96px la
   ricorrente, 150px quella del calendario).
   Poi, stesso giorno: "dovrebbe esserci una versione thumb- che riempia
   tutto lo spazio disponibile" -> l'<img> e' il thumb- (vedi
   EventiLoader.VariantiCard) con object-fit:cover: riempie tutta l'area.
   Il thumb- e' un quadrato ritagliato al centro: nel 4:3 se ne perde un
   ottavo sopra e uno sotto. Il gradiente della categoria resta come fondo
   durante il caricamento e per le card senza immagine (emoji).
   min-height = rete per i browser senza aspect-ratio.
   --------------------------------------------------------------------- */
.eventi-page .rec-top,
.eventi-page .evt-img{position:relative;overflow:hidden;flex-shrink:0;aspect-ratio:4/3;min-height:150px;
    display:flex;align-items:center;justify-content:center;color:#fff}
.eventi-page .rec-top{font-size:2.6rem}   /* emoji del fallback statico della hub (testo nudo) */
.eventi-page .evt-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;
    z-index:1;transition:transform .4s}
.eventi-page .evt-emoji{font-size:3.2rem;line-height:1;transition:transform .4s}
.eventi-page .rec-card:hover .evt-cover,.eventi-page .evt-card:hover .evt-cover{transform:scale(1.04)}
.eventi-page .rec-card:hover .evt-emoji,.eventi-page .evt-card:hover .evt-emoji{transform:scale(1.08)}

/* EVENTI RICORRENTI (.rec-card) */
.eventi-page .rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.4rem}
.eventi-page .rec-card{border-radius:12px;overflow:hidden;border:1px solid var(--cm-brd);background:#fff;display:flex;flex-direction:column;transition:transform .26s,box-shadow .26s;text-decoration:none;color:inherit;cursor:pointer}
.eventi-page .rec-card:hover .rec-n{color:var(--ev-purple)}
.eventi-page .rec-card:hover{transform:translateY(-5px);box-shadow:0 14px 38px rgba(0,0,0,.1)}
.eventi-page .rec-when{position:absolute;top:9px;left:9px;z-index:2;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.52);color:#fff;padding:3px 9px;border-radius:3px;backdrop-filter:blur(3px)}
.eventi-page .rec-bd{padding:15px;display:flex;flex-direction:column;flex:1}
.eventi-page .rec-n{font-family:var(--font-display);font-size:1.15rem;font-weight:600;line-height:1.2;margin-bottom:4px;color:var(--cm-ink)}
.eventi-page .rec-loc{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--cm-ink-lt);margin-bottom:8px}
.eventi-page .rec-loc i{color:var(--ev-purple);font-size:.76rem}
.eventi-page .rec-d{font-size:.78rem;color:var(--cm-ink-md);line-height:1.6;flex:1}

/* CARD CALENDARIO (.evt-card) */
.eventi-page .evt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.eventi-page .evt-card{border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--cm-brd);text-decoration:none;color:var(--cm-ink);display:flex;flex-direction:column;position:relative;transition:transform .26s,box-shadow .26s}
.eventi-page .evt-card:hover{transform:translateY(-5px);box-shadow:0 16px 42px rgba(0,0,0,.1);color:var(--cm-ink)}
.eventi-page .evt-accent{height:4px;flex-shrink:0}
.eventi-page .evt-date{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);border-radius:6px;padding:5px 10px;min-width:42px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.eventi-page .evt-d{font-family:var(--font-display);font-size:1.3rem;font-weight:600;line-height:1;color:var(--cm-ink)}
.eventi-page .evt-m{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cm-ink-lt)}
.eventi-page .evt-cat{position:absolute;bottom:10px;left:10px;z-index:2;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:2px;color:#fff}
.eventi-page .evt-biz{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:3px;background:var(--ev-gold);color:#1a1408;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.eventi-page .evt-biz i{font-size:.66rem}
/* 14/10/2026: cuore "Il mio viaggio" (.pc-fav, stile base in custom_elbamylove.css) in basso a
   destra sulla foto: in alto ci sono data e badge "Proposto da un'attivita'". Non scoped su
   .eventi-page: le stesse card stanno anche in fondo alla scheda evento. */
.evt-img .pc-fav,
.rec-top .pc-fav{top:auto;bottom:10px;right:10px;z-index:3}
.eventi-page .evt-body{padding:15px;display:flex;flex-direction:column;flex:1}
.eventi-page .evt-title{font-family:var(--font-display);font-size:1.12rem;font-weight:600;line-height:1.25;margin-bottom:6px;color:var(--cm-ink)}
.eventi-page .evt-loc{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--cm-ink-lt);margin-bottom:8px}
.eventi-page .evt-loc i{color:var(--ev-purple);font-size:.76rem}
.eventi-page .evt-desc{font-size:.78rem;color:var(--cm-ink-md);line-height:1.6;flex:1}
.eventi-page .evt-when{display:flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;color:var(--ev-purple);margin-top:10px;padding-top:10px;border-top:1px solid #f0f0f0}
/* card business evidenziata */
.eventi-page .evt-card.is-biz{border-color:var(--ev-gold);box-shadow:0 0 0 1px var(--ev-gold) inset}
.eventi-page .evt-card.is-biz .evt-when{color:var(--ev-gold-dk,#8a6210)}

/* GRIGLIE: responsive */
@media (max-width:1100px){ .eventi-page .rec-grid{grid-template-columns:1fr 1fr} .eventi-page .evt-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
    .eventi-page .rec-grid{grid-template-columns:1fr}
    .eventi-page .evt-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
    .eventi-page .evt-cover,.eventi-page .evt-emoji,.eventi-page .rec-card,.eventi-page .evt-card{transition:none}
}