/* ══ LA SCENA ═════════════════════════════════════════════════════════════════
   Una fotografia intera con il velo che sale dal basso e il testo appoggiato
   dentro. È il modo in cui questo sito mostra una cosa che si sceglie
   guardando: la card di un evento nell'elenco, la stessa card ingrandita dentro
   il modal, e domani le card della home.

   ═══ PERCHÉ STA IN UN FOGLIO SUO ════════════════════════════════════════════
   Perché la card sta in un pacchetto e il modal è del sito: senza un posto
   comune, le stesse regole finivano scritte due volte — stesse misure, stesso
   velo, stessa Sicilia — e due copie della stessa cosa divergono al primo
   ritocco. Chi tocca una card deve ritrovarsi la STESSA cosa più grande, e
   questo è il file che lo garantisce.

   Chi la usa aggiunge il suo: la card ci mette il rapporto 3:2 e la matita, il
   modal ci mette il chip della data, la descrizione e la mappa. */

  .sc{ position:relative; display:block; overflow:hidden; isolation:isolate;
    text-decoration:none; color:#fff;
    background:#9bb0c0 center/cover no-repeat; }

  /* Il velo: sale dal basso e si spegne a metà, così la fotografia resta
     fotografia sopra e il testo si legge sotto. Non è decorazione — la foto la
     sceglie chi crea l'evento, e su una foto chiara un titolo bianco sparisce. */
  .sc::before{ content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 20%, rgba(0,0,0,0) 46%); }

  .sc-corpo{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px 16px; }

  .sc-genere{ display:inline-block; margin-bottom:.45rem; padding:.14rem .55rem;
    border-radius:999px; background:#f0a640; color:#3a2c00;
    font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
  .sc-genere:empty{ display:none; }

  /* Il bianco si DICE, non si eredita. `.sc` lo dà a tutto quello che ha dentro,
     ma nel modal il titolo è un `h3`, e un `h3{color:…}` scritto in un foglio
     qualunque del sito batte l'ereditarietà senza che qui si veda niente di
     strano. Sulla fotografia un titolo scuro sparisce. */
  .sc-titolo{ display:block; color:#fff; font-weight:700; font-size:1.12rem;
    line-height:1.15; margin:0; text-shadow:0 1px 6px rgba(0,0,0,.55); }

  .sc-righe{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.35rem;
    font-size:.75rem; text-shadow:0 1px 4px rgba(0,0,0,.5); }
  .sc-riga{ display:inline-flex; align-items:center; gap:.3rem; opacity:.95; }
  .sc-riga[hidden]{ display:none; }
  .sc-riga i{ opacity:.9; color:#f0a640; }

/* ── LA SICILIA IN ALTO A DESTRA ──────────────────────────────────────────────
   Dice DOVE prima che uno legga il nome di un paese che magari non conosce.

   ═══ L'OMBRA SEGUE LA SAGOMA ════════════════════════════════════════════════
   Qui c'era un alone tondo sfumato dietro: si vedeva come una macchia scura in
   un angolo della fotografia, e la Sicilia ci galleggiava sopra come appiccicata
   male. Un'ombra si vede quando NON si vede — quando fa staccare la forma senza
   dichiararsi.

   Quindi `drop-shadow`, che segue il contorno vero — le coste, lo stretto, le
   isole — invece di un cerchio che non ha niente a che fare con quello che
   circonda. Tre ombre: una stretta e nera che fa da bordo, una media che stacca,
   una larga e morbida che regge anche sulle foto chiare.

   ═══ MASCHERA, NON IMMAGINE ═════════════════════════════════════════════════
   Il file dichiara `fill="currentColor"`: messo come immagine di sfondo non
   eredita niente e resta nero, una macchia appiccicata sulla copertina. Come
   maschera la forma la dà lui, il colore lo diamo noi — e `drop-shadow` sopra
   una maschera segue la maschera, non il rettangolo. */
  .sc-mini{ position:absolute; top:10px; right:10px; z-index:3;
    width:74px; aspect-ratio:1000 / 1119; padding:0; border:0; background:transparent;
    filter:drop-shadow(0 0 1px rgba(0,0,0,.95))
           drop-shadow(0 2px 3px rgba(0,0,0,.75))
           drop-shadow(0 5px 12px rgba(0,0,0,.55)); }
  .sc-mini[hidden]{ display:none; }

  .sc-mini::before{ content:''; position:absolute; inset:0; z-index:1; background:#fff;
    -webkit-mask:url('/assets/mappe/sicilia-isole.svg') center/100% 100% no-repeat;
            mask:url('/assets/mappe/sicilia-isole.svg') center/100% 100% no-repeat; }

  .sc-mini i{ position:absolute; z-index:2; transform:translateX(-50%);
    /* La PUNTA della goccia sul punto, non il suo centro. */
    color:#ff3b30; font-size:13px; line-height:1;
    text-shadow:0 0 3px #fff, 0 1px 3px rgba(0,0,0,.7); }

/* ── IL CHIP DELLA DATA, A CAVALLO ────────────────────────────────────────────
   Il quadrato bianco fra la fotografia e quello che c'è sotto. La posizione la
   mette il contenitore, non la scena: solo chi ha un «sotto» può metterci
   qualcosa a cavallo. */
  .sc-chip{ position:absolute; z-index:4;
    background:#fff; border:1px solid rgba(10,61,98,.12); border-radius:12px;
    padding:.35rem .65rem .4rem; text-align:center; line-height:1; min-width:58px;
    box-shadow:0 6px 14px -4px rgba(10,61,98,.4); }
  .sc-chip[hidden]{ display:none; }
  .sc-chip b{ display:block; font-weight:800; }
  .sc-chip .w{ font-size:.58rem; letter-spacing:.1em; color:#95a5a6;
    text-transform:uppercase; font-weight:700; margin-bottom:1px; }
  .sc-chip .d{ font-size:1.3rem; color:#0a3d62; }
  .sc-chip .m{ font-size:.62rem; letter-spacing:.12em; color:#f0a640;
    text-transform:uppercase; margin-top:2px; }

/* ═══ TU SEI QUI, SULLA SICILIA PICCOLA ═════════════════════════════════════
   Un pallino blu col bordo bianco dove sta chi guarda, accanto al segno
   dell'evento. Lo posa promo.js, solo se la posizione è già disponibile. */
/* Il pallino di dove sei sta SOTTO il segno del posto (che ha livello 2): quando
   sei lì vicino i due si toccano, e quello che conta è il posto. */
.sc-mini .sc-io{ position:absolute; z-index:1; width:9px; height:9px; margin:0 0 -4.5px -4.5px; border-radius:50%;
  background:#1a73e8; box-shadow:0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.45); pointer-events:none; }