/* =========================================================
   ArtI — foglio di stile unico
   Direzione "Insegna". Mobile-first: base = 375px.
   Nessun framework, nessuna compilazione. HTML + CSS puri.
   ========================================================= */

/* ---------- 1. Variabili ---------- */
:root{
  /* superfici */
  --verde:#0E2A22;          /* superficie principale, header, footer */
  --verde-2:#1B4E3E;        /* superficie verde secondaria / categoria tessile */
  --crema:#F5EFE3;          /* fondo pagina */
  --bianco:#FFFFFF;         /* fondo card */
  --ink:#14120E;            /* testo principale su crema/bianco */

  /* accenti */
  --arancio:#B0421F;        /* azioni primarie (crema sopra = 5:1) */
  --arancio-scuro:#8E3618;  /* arancio come TESTO su crema */
  --giallo:#EFB93B;         /* marchio, PLUS, fascia artigiano (testo ink) */
  --rosso:#A22C0F;          /* errori */

  /* testo */
  --ink-70:rgba(20,18,14,.72);
  --ink-50:rgba(20,18,14,.55);   /* solo icone e bordi, mai testo */
  --crema-75:rgba(245,239,227,.76);
  --linea:rgba(20,18,14,.10);
  --linea-forte:rgba(20,18,14,.20);
  --linea-chiara:rgba(245,239,227,.30);

  /* categorie: --cat = fondo targa, --cat-ink = testo sulla targa */
  --cat:var(--verde);
  --cat-ink:var(--crema);

  /* tipografia */
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-testo:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --fs-xs:12px; --fs-s:13.5px; --fs-m:15px; --fs-l:17px;
  --fs-h3:21px; --fs-h2:26px; --fs-h1:34px; --fs-hero:42px;

  /* spaziature */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; --s7:44px; --s8:64px;

  /* angoli e ombre */
  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:20px;
  --ombra:0 2px 6px rgba(20,18,14,.07);
  --ombra-alta:0 10px 28px rgba(14,42,34,.16);

  /* misure */
  --tocco:48px;             /* altezza minima di ogni area toccabile */
  --largh:1180px;
}

/* ---------- 2. Reset minimo ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--ink);
  font:400 var(--fs-m)/1.6 var(--font-testo);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--arancio-scuro);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--arancio);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 3. Impianto ---------- */
.container{width:100%;max-width:var(--largh);margin:0 auto;padding:0 var(--s4)}
.section{padding:var(--s6) 0}
.section--verde{background:var(--verde);color:var(--crema)}
.section--giallo{background:var(--giallo);color:var(--ink)}
.section--crema{background:var(--crema)}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.stack--s{gap:var(--s2)}
.row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.row--between{justify-content:space-between}
.grid{display:grid;gap:var(--s3);grid-template-columns:1fr}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- 4. Tipografia ---------- */
.display{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1.03}
.h-hero{font-size:var(--fs-hero)}
.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2)}
.h3{font-size:var(--fs-h3);line-height:1.1}
.eyebrow{font:700 10.5px/1 var(--font-testo);letter-spacing:.14em;text-transform:uppercase}
.lead{font-size:var(--fs-l);line-height:1.55}
.muted{color:var(--ink-70)}
.muted-light{color:var(--crema-75)}
.small{font-size:var(--fs-xs);line-height:1.5}
.accento{color:var(--giallo)}

/* ---------- 5. Navigazione ---------- */
.navbar{background:var(--verde);color:var(--crema)}
.navbar__inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);padding:var(--s3) var(--s4);max-width:var(--largh);margin:0 auto}
.brand{display:inline-flex;align-items:center;background:var(--giallo);color:var(--ink);
  padding:6px 10px;border-radius:7px;font:800 21px/1 var(--font-display);letter-spacing:-.04em}
.brand:hover{text-decoration:none;background:#F3C556}
.nav-toggle{width:var(--tocco);height:var(--tocco);border:0;border-radius:var(--r-m);
  background:rgba(245,239,227,.12);display:grid;place-content:center;gap:4px;cursor:pointer}
.nav-toggle span{display:block;width:16px;height:2px;background:var(--crema);border-radius:2px}
.nav-links{display:none;flex-direction:column;gap:var(--s1);padding:0 var(--s4) var(--s4)}
.nav-links[data-aperto="si"]{display:flex}
.nav-links a{min-height:var(--tocco);display:flex;align-items:center;padding:0 var(--s3);
  border-radius:var(--r-m);color:var(--crema);font-weight:500}
.nav-links a[aria-current="page"]{background:rgba(245,239,227,.14);font-weight:600}
.nav-links a:hover{background:rgba(245,239,227,.1);text-decoration:none}
.segmenti{display:flex;gap:4px;background:rgba(245,239,227,.12);border-radius:11px;padding:3px}
.segmenti a{min-height:38px;display:flex;align-items:center;padding:0 var(--s3);
  border-radius:var(--r-s);color:var(--crema);font:500 var(--fs-s)/1 var(--font-testo)}
.segmenti a[aria-current="page"]{background:var(--crema);color:var(--ink);font-weight:600}
.segmenti a:hover{text-decoration:none}
.navbar__azione{display:none}

/* ---------- 6. Pulsanti ---------- */
.btn{min-height:var(--tocco);display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);padding:0 var(--s4);border:0;border-radius:var(--r-m);cursor:pointer;
  font:600 14.5px/1 var(--font-testo);text-align:center;transition:background .12s ease}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--arancio);color:var(--crema)}
.btn--primary:hover{background:#94371A}
.btn--dark{background:var(--verde);color:var(--crema)}
.btn--dark:hover{background:#163C31}
.btn--outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--linea-forte)}
.btn--outline:hover{background:rgba(20,18,14,.05)}
.btn--outline-light{background:transparent;color:var(--crema);box-shadow:inset 0 0 0 1.5px var(--linea-chiara)}
.btn--outline-light:hover{background:rgba(245,239,227,.1)}
.btn--blocco{width:100%}
.btn[disabled],.btn--disabled{background:rgba(20,18,14,.08);color:rgba(20,18,14,.4);cursor:not-allowed}
.btn--icona{width:var(--tocco);padding:0;flex:none}

/* ---------- 7. Categorie (fondo targa) ---------- */
.cat-ceramica{--cat:#B0421F}
.cat-legno{--cat:#8A6046}
.cat-tessile{--cat:#1B4E3E}
.cat-gioielli{--cat:#EFB93B;--cat-ink:#14120E}
.cat-cuoio{--cat:#7A2E1C}
.cat-vetro{--cat:#2A5670}
.cat-metalli{--cat:#43484E}
.cat-alimentari{--cat:#5F5417}
.cat-altro{--cat:#3B362F}

/* ---------- 8. Card attività ---------- */
.card{background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r-l);
  overflow:hidden;display:block;color:var(--ink);box-shadow:var(--ombra)}
.card:hover{text-decoration:none;box-shadow:var(--ombra-alta)}
/* targa: sostituisce la foto quando manca. Il nome È l'immagine. */
.card__targa{position:relative;background:var(--cat);color:var(--cat-ink);
  padding:var(--s5) var(--s4) var(--s4);min-height:112px;
  display:flex;flex-direction:column;justify-content:space-between}
.card__targa .card__nome{font-family:var(--font-display);font-weight:800;
  letter-spacing:-.035em;line-height:1.02;font-size:30px;margin-top:var(--s2)}
.card__foto{min-height:120px;background:#C9B79A center/cover no-repeat;
  display:flex;align-items:flex-end;padding:var(--s3) var(--s4)}
.card__foto .badge{background:rgba(20,18,14,.7);color:var(--crema)}
.card__corpo{padding:var(--s3) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.card__corpo .card__nome{font:800 22px/1.05 var(--font-display);letter-spacing:-.03em}
.card__meta{font:600 var(--fs-s)/1.4 var(--font-testo);color:var(--ink-70)}
.card__piede{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.card__evento{font:600 12.5px/1.4 var(--font-testo);color:var(--verde-2)}
.card__evento--vuoto{font-weight:500;color:var(--ink-70)}
/* variante orizzontale compatta (elenco lungo su telefono) */
.card--riga{display:flex;align-items:stretch}
.card--riga .card__targa{flex:none;width:104px;min-height:0;padding:var(--s3)}
.card--riga .card__targa .card__nome{font-size:19px;margin-top:0}
.card--riga .card__corpo{flex:1;min-width:0}

/* ---------- 9. Etichette ---------- */
.badge{display:inline-flex;align-items:center;padding:7px 10px;border-radius:var(--r-s);
  background:rgba(20,18,14,.07);color:var(--ink);font:600 12.5px/1 var(--font-testo)}
.badge--cat{background:var(--cat);color:var(--cat-ink)}
.badge--plus{background:var(--giallo);color:var(--ink);padding:5px 7px;border-radius:6px;
  font:700 9.5px/1 var(--font-testo);letter-spacing:.1em;text-transform:uppercase}
.badge--gratuito{background:transparent;box-shadow:inset 0 0 0 1px var(--linea-forte);color:var(--ink-70)}
.badge--assoluto{position:absolute;top:var(--s3);right:var(--s3)}
.chip{min-height:44px;display:inline-flex;align-items:center;gap:var(--s2);padding:0 var(--s3);
  border-radius:var(--r-m);background:var(--verde);color:var(--crema);
  font:600 var(--fs-s)/1 var(--font-testo)}
.chip--rimuovi::after{content:"✕";font-size:11px;opacity:.85}
.chip--vuoto{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--linea-forte)}

/* ---------- 10. Moduli ---------- */
.campo{display:flex;flex-direction:column;gap:6px}
.campo__label{font:600 var(--fs-xs)/1 var(--font-testo);color:var(--ink-70)}
.form-control{min-height:52px;width:100%;border-radius:var(--r-m);border:2px solid var(--linea-forte);
  background:var(--bianco);color:var(--ink);padding:0 var(--s3);font:400 var(--fs-m)/1 var(--font-testo)}
.form-control::placeholder{color:var(--ink-70)}
.form-control:focus{border-color:var(--verde);outline:none;box-shadow:0 0 0 3px rgba(176,66,31,.25)}
.form-control--errore{border-color:var(--rosso)}
.campo__aiuto{font:400 12.5px/1.4 var(--font-testo);color:var(--ink-70)}
.campo__errore{font:600 12.5px/1.4 var(--font-testo);color:var(--rosso)}
select.form-control{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:var(--s6)}
.filtri{background:var(--verde);color:var(--crema);padding:var(--s4) var(--s4) var(--s5)}
.filtri .campo__label{color:var(--crema-75)}
.filtri .form-control{border-color:var(--linea-chiara);background-color:transparent;color:var(--crema)}
.filtri .form-control:focus{background-color:var(--bianco);color:var(--ink);border-color:var(--crema)}
.filtri .form-control--pieno{background-color:var(--crema);color:var(--ink);border-color:var(--crema)}
/* freccia del select: crema sul blocco verde, ink quando il campo è a fuoco */
.filtri select.form-control{background-image:
  linear-gradient(45deg,transparent 50%,var(--crema) 50%),
  linear-gradient(135deg,var(--crema) 50%,transparent 50%)}
.filtri select.form-control:focus{background-image:
  linear-gradient(45deg,transparent 50%,var(--ink) 50%),
  linear-gradient(135deg,var(--ink) 50%,transparent 50%)}

/* ---------- 11. Avvisi, stati vuoti ---------- */
.alert{border-radius:var(--r-m);padding:var(--s3) var(--s4);font-size:14px;line-height:1.55}
.alert--info{background:var(--verde);color:var(--crema)}
.alert--info a{color:var(--giallo)}
.alert--attenzione{background:var(--giallo);color:var(--ink)}
.alert--errore{background:rgba(162,44,15,.12);color:#7A2E1C}
.vuoto{border-radius:var(--r-l);background:var(--verde);color:var(--crema);
  padding:var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.vuoto__titolo{font:800 26px/1.05 var(--font-display);letter-spacing:-.03em}
.vuoto--leggero{background:transparent;color:var(--ink);border:1.5px dashed var(--linea-forte)}

/* ---------- 12. Eventi ---------- */
.evento{background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--ombra)}
.evento__testa{display:flex;align-items:stretch}
.evento__data{flex:none;width:78px;background:var(--cat,var(--arancio));color:var(--crema);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--s4) 0;text-align:center}
.evento__giorno{font:800 34px/1 var(--font-display);letter-spacing:-.04em}
.evento__mese{font:700 10px/1.6 var(--font-testo);letter-spacing:.14em;text-transform:uppercase}
.evento__durata{font:500 11px/1.4 var(--font-testo);color:var(--crema);opacity:.85;margin-top:2px}
.evento__corpo{padding:var(--s3) var(--s4);min-width:0;flex:1}
.evento__titolo{font:800 var(--fs-h3)/1.1 var(--font-display);letter-spacing:-.03em}
.evento__strappo{border-top:1.5px dashed var(--linea-forte);padding:var(--s3) var(--s4)}
.mese-separatore{background:var(--verde);color:var(--giallo);padding:var(--s3) var(--s4)}

/* ---------- 13. Mappa (immagine statica + link) ---------- */
.mappa{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--linea);background:var(--bianco)}
.mappa__img{height:170px;background:
  linear-gradient(0deg,rgba(20,18,14,.06) 0 1px,transparent 1px 32px),
  linear-gradient(90deg,rgba(20,18,14,.06) 0 1px,transparent 1px 32px),#E8E0D0;
  display:grid;place-content:center}
.mappa__pin{width:18px;height:18px;border-radius:50%;background:var(--arancio);
  border:3px solid var(--crema);box-shadow:0 3px 8px rgba(0,0,0,.25)}
.mappa__piede{padding:var(--s3) var(--s4);display:flex;align-items:center;
  justify-content:space-between;gap:var(--s3)}

/* ---------- 14. Paginazione ---------- */
.paginazione{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.paginazione__pagine{display:flex;gap:6px}
.paginazione a,.paginazione span{min-width:var(--tocco);min-height:var(--tocco);
  display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-m);
  font:600 14px/1 var(--font-testo);color:var(--ink)}
.paginazione a{box-shadow:inset 0 0 0 1.5px var(--linea-forte)}
.paginazione a:hover{background:rgba(20,18,14,.05);text-decoration:none}
.paginazione [aria-current="page"]{background:var(--verde);color:var(--crema)}
.paginazione .disabilitato{background:rgba(20,18,14,.05);color:rgba(20,18,14,.35)}

/* ---------- 15. Piede pagina ---------- */
.footer{background:var(--verde);color:var(--crema);padding:var(--s6) 0}
.footer a{color:var(--crema);font-weight:500}
.footer__nota{color:rgba(245,239,227,.7);font-size:var(--fs-xs)}

/* ---------- 16. Da 720px ---------- */
@media (min-width:720px){
  :root{--fs-hero:56px;--fs-h1:46px;--fs-h2:32px}
  .container{padding:0 var(--s6)}
  .section{padding:var(--s7) 0}
  .nav-toggle{display:none}
  .segmenti{display:none}                 /* da 720px basta una sola riga di navigazione */
  .navbar__azione{display:inline-flex}
  .nav-links{display:flex!important;flex-direction:row;align-items:center;gap:var(--s1);padding:0 var(--s6) var(--s3)}
  .navbar__inner{padding-bottom:var(--s2)}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid{gap:var(--s4)}
  .card--riga .card__targa{width:150px}
}
/* ---------- 17. Da 1080px ---------- */
@media (min-width:1080px){
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .layout-elenco{display:grid;grid-template-columns:280px 1fr;gap:var(--s6);align-items:start}
  .filtri{border-radius:var(--r-l);padding:var(--s5)}
}
/* ---------- 18. Stampa / QR ---------- */
@media print{.navbar,.footer,.filtri{display:none}body{background:#fff}}