/*
 * ilf-design.css | I Love Formello Design System
 * Versione: 2.1 (13/10/2026): identità visiva Brand Strategy & Identity ILF v2.1
 *
 * Palette 2.1: Verde Formello, Verde Bosco, Terracotta, Rosso Cuore, Verde Collina,
 *              Bianco Soft, Testo, Grigio Pietra.
 * Font:        Manrope (titoli, wordmark, pulsanti) · Inter (testo, navigazione).
 *
 * REGOLA CONTRASTO (AA): Terracotta (4,22:1 su Bianco Soft) e Rosso Cuore (4,44:1)
 * si usano solo per accenti, icone, sfondi con testo bianco grande e testo da 24px in su.
 * Testo corrente e link su fondo chiaro: Verde Formello o Verde Bosco.
 * Verde Collina è solo un fondo.
 *
 * I nomi dei token storici (--verde, --rosso, --arancio, --azzurro, ...) restano
 * per compatibilità con le pagine che li usano nei <style> interni: cambiano i valori.
 *
 * PATH ICONE: assets/icons/*.svg
 * NOTA: richiede server HTTP (mask-image non funziona con file://)
 */

/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  /* Palette ufficiale 2.1 */
  --ilf-verde-formello: #176641;   /* primario: link, pulsanti */
  --ilf-verde-bosco:    #104A32;   /* header/footer scuri, titoli */
  --ilf-terracotta:     #B85E24;   /* accenti caldi (non per testo piccolo) */
  --ilf-rosso-cuore:    #D13E2D;   /* accento distintivo, uso limitato */
  --ilf-verde-collina:  #BFD9C5;   /* solo fondi */
  --ilf-bianco-soft:    #F7F8F4;   /* fondo principale */
  --ilf-testo:          #202A24;
  --ilf-grigio-pietra:  #E8ECE7;   /* bordi, divisori */

  /* Stati interfaccia */
  --state-success: #18794E;
  --state-warning: #8A4B08;
  --state-error:   #B42318;
  --state-info:    #1D4ED8;

  /* Alias storici → palette 2.1 */
  --verde:         var(--ilf-verde-formello);
  --verde-lt:      var(--ilf-verde-collina);
  --verde-dk:      var(--ilf-verde-bosco);
  --terra:         var(--ilf-terracotta);
  --terra-lt:      #D9936A;                 /* terracotta chiara: solo su fondi scuri */
  --azzurro:       var(--ilf-verde-bosco);  /* l'azzurro non fa parte del brand */
  --azzurro-lt:    var(--ilf-verde-collina);
  --azzurro-pale:  #EAF1EB;
  --arancio:       var(--ilf-terracotta);
  --arancio-lt:    var(--ilf-verde-collina); /* usato per etichette su fondi scuri */
  --arancio-pale:  #F6EBE2;
  --rosso:         var(--ilf-rosso-cuore);

  /* Colori di categoria (mappe, legende, filtri, badge): solo palette brand 2.1.
     Gli stessi valori sono scritti nei segnaposto JS delle mappe (home, territorio, turismo, servizi). */
  --cat-turismo:        var(--ilf-verde-formello);  /* #176641 */
  --cat-enogastronomia: var(--ilf-rosso-cuore);     /* #D13E2D */
  --cat-ricettivita:    var(--terra-lt);            /* #D9936A: chiara per distinguerla dal rosso; testo sopra scuro */
  --cat-servizi:        var(--ilf-testo);           /* #202A24 */

  /* Semantic aliases */
  --color-primary:    var(--verde);
  --color-accent:     var(--rosso);
  --color-cta:        var(--verde);
  --color-highlight:  var(--verde-dk);
  --color-bg:         var(--ilf-bianco-soft);
  --color-surface:    #FFFFFF;
  --color-bg-warm:    #EEF2EB;   /* a metà tra Bianco Soft e Grigio Pietra */
  --color-bg-sand:    var(--ilf-grigio-pietra);
  --color-bg-sand2:   #D5DDD4;
  --color-text:       var(--ilf-testo);
  --color-text-2:     #4A554E;   /* 7,3:1 su Bianco Soft */
  --color-text-3:     #5F6B63;   /* 5,2:1 su Bianco Soft */
  --color-text-muted: var(--color-text-3);
  --color-text-light: #FFFFFF;
  --color-border:     var(--ilf-grigio-pietra);

  /* Dark section backgrounds */
  --dark-nl:    var(--ilf-verde-bosco);   /* Newsletter */
  --dark-appro: var(--ilf-verde-bosco);   /* Approfondimenti */
  --dark-cta:   var(--ilf-verde-bosco);   /* CTA finale + Footer */

  /* Fonts */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-nav:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type scale */
  /* Mobile first (15/10/2026): su smartphone nessun testo sotto i 14px, testo corrente a 16px
     (niente zoom automatico di iOS nei campi); su desktop la scala resta quella di prima. */
  --text-xs:   .875rem;
  --text-sm:   clamp(.875rem, .85rem + .1vw,  .94rem);
  --text-md:   clamp(1rem,    .96rem + .15vw, 1.1rem);
  --text-lg:   clamp(1.125rem, 1.06rem + .3vw, 1.33rem);
  --text-xl:   clamp(1.3rem,  1.18rem + .6vw, 1.7rem);
  --text-2xl:  clamp(1.55rem, 1.3rem + 1.1vw, 2.3rem);
  --text-3xl:  clamp(1.9rem,  1.45rem + 2vw,  3.4rem);
  --text-hero: clamp(2.3rem,  1.6rem + 3.2vw, 4.5rem);

  /* 8pt spacing scale */
  --space-3xs: .125rem;
  --space-xs:  clamp(.25rem, .22rem + .15vw, .5rem);
  --space-sm:  clamp(.5rem,  .45rem + .25vw, .75rem);
  --space-md:  clamp(1rem,   .9rem + .5vw, 1.5rem);
  --space-lg:  clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
  /* le spaziature grandi si stringono su smartphone (prima: 5rem tra le sezioni a 390px) */
  --space-xl:  clamp(1.75rem, 1rem + 3.2vw, 4rem);
  --space-2xl: clamp(2.25rem, 1rem + 5vw,   6rem);
  --space-3xl: clamp(3rem,    1.2rem + 7vw, 8rem);

  /* Altezza della barra compatta su smartphone: serve a sticky e ancore */
  --hdr-h: 3.5rem;

  /* Layout */
  --max-width:  1200px;
  --radius-sm:  .375rem;
  --radius-md:  .75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-pill:9999rem;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(16,74,50,.08);
  --shadow-md:  0 4px 16px rgba(16,74,50,.10);
  --shadow-lg:  0 8px 32px rgba(16,74,50,.12);
}


/* ═══════════════════════════════════════════
   RESET
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; transition: color .2s; }
ul   { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }


/* ═══════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--verde-dk);
}
h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

.section-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: var(--space-sm);
}
.section-label--blue  { color: var(--verde-dk); }
.section-label--red   { color: var(--verde); }   /* Rosso Cuore non è per testo piccolo */
.section-label--green { color: var(--verde); }
.section-label--light { color: var(--ilf-verde-collina); }


/* ═══════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
@media (max-width: 30rem) {
  .container { padding-left: var(--space-md); padding-right: var(--space-md); }
}
.section { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }

.section__header { text-align: center; margin-bottom: var(--space-2xl); }
.section__title  { font-size: var(--text-2xl); margin-bottom: var(--space-sm); }
.section__desc   {
  font-size: var(--text-md); color: var(--color-text-2);
  max-width: 600px; margin: 0 auto; line-height: 1.7;
}


/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .8rem 2rem; border: 2px solid transparent;
  cursor: pointer; transition: all .3s ease; text-decoration: none;
  border-radius: var(--radius-pill);
}
.btn--primary   { background: var(--verde);   color: #fff; border-color: var(--verde); }
.btn--primary:hover   { background: var(--verde-dk); border-color: var(--verde-dk); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(23,102,65,.35); }
.btn--cta       { background: var(--verde);    color: #fff; border-color: var(--verde); }   /* pulsanti principali: Verde Formello */
.btn--cta:hover       { background: var(--verde-dk); border-color: var(--verde-dk); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(23,102,65,.35); }
.btn--blue      { background: var(--verde-dk); color: #fff; border-color: var(--verde-dk); }
.btn--blue:hover      { background: var(--verde); border-color: var(--verde); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(16,74,50,.35); }
.btn--outline   { background: transparent; color: var(--verde); border-color: var(--verde); }
.btn--outline:hover   { background: var(--verde); color: #fff; border-color: var(--verde); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(23,102,65,.3); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.btn--outline-light:hover { background: #fff; color: var(--color-text); border-color: #fff; transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.btn--ghost     { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost:hover     { background: rgba(255,255,255,.15); border-color: #fff; transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }


/* ═══════════════════════════════════════════
   PHOSPHOR ICONS | CSS mask-image
   Path da questo CSS: ../icons/nome.svg
   RICHIEDE server HTTP (non file://)
═══════════════════════════════════════════ */
.ph-icon {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  vertical-align: middle; flex-shrink: 0;
}
/* Social */
.ph-facebook-logo    { -webkit-mask-image: url('../icons/facebook-logo.svg');   mask-image: url('../icons/facebook-logo.svg'); }
.ph-instagram-logo   { -webkit-mask-image: url('../icons/instagram-logo.svg');  mask-image: url('../icons/instagram-logo.svg'); }
.ph-youtube-logo     { -webkit-mask-image: url('../icons/youtube-logo.svg');    mask-image: url('../icons/youtube-logo.svg'); }
.ph-x-logo           { -webkit-mask-image: url('../icons/x-logo.svg');          mask-image: url('../icons/x-logo.svg'); }
.ph-whatsapp-logo    { -webkit-mask-image: url('../icons/whatsapp-logo.svg');   mask-image: url('../icons/whatsapp-logo.svg'); }
/* UI */
.ph-caret-down       { -webkit-mask-image: url('../icons/caret-down.svg');      mask-image: url('../icons/caret-down.svg'); }
.ph-magnifying-glass { -webkit-mask-image: url('../icons/magnifying-glass.svg');mask-image: url('../icons/magnifying-glass.svg'); }
.ph-user-circle      { -webkit-mask-image: url('../icons/user-circle.svg');     mask-image: url('../icons/user-circle.svg'); }
/* Sezioni ILF */
.ph-compass          { -webkit-mask-image: url('../icons/compass.svg');         mask-image: url('../icons/compass.svg'); }
.ph-church           { -webkit-mask-image: url('../icons/church.svg');          mask-image: url('../icons/church.svg'); }
.ph-music-note       { -webkit-mask-image: url('../icons/music-note.svg');      mask-image: url('../icons/music-note.svg'); }
.ph-mountains        { -webkit-mask-image: url('../icons/mountains.svg');       mask-image: url('../icons/mountains.svg'); }
.ph-fork-knife       { -webkit-mask-image: url('../icons/fork-knife.svg');      mask-image: url('../icons/fork-knife.svg'); }
.ph-fork-knife-fill  { -webkit-mask-image: url('../icons/fork-knife-fill.svg'); mask-image: url('../icons/fork-knife-fill.svg'); }
.ph-house-line       { -webkit-mask-image: url('../icons/house-line.svg');      mask-image: url('../icons/house-line.svg'); }
.ph-house-fill       { -webkit-mask-image: url('../icons/house-fill.svg');      mask-image: url('../icons/house-fill.svg'); }
.ph-map-pin          { -webkit-mask-image: url('../icons/map-pin.svg');         mask-image: url('../icons/map-pin.svg'); }
.ph-buildings-fill   { -webkit-mask-image: url('../icons/buildings-fill.svg');  mask-image: url('../icons/buildings-fill.svg'); }
.ph-bed              { -webkit-mask-image: url('../icons/bed.svg');             mask-image: url('../icons/bed.svg'); }
.ph-calendar         { -webkit-mask-image: url('../icons/calendar.svg');        mask-image: url('../icons/calendar.svg'); }
.ph-newspaper        { -webkit-mask-image: url('../icons/newspaper.svg');       mask-image: url('../icons/newspaper.svg'); }
.ph-city             { -webkit-mask-image: url('../icons/city.svg');            mask-image: url('../icons/city.svg'); }
.ph-book-open        { -webkit-mask-image: url('../icons/book-open.svg');       mask-image: url('../icons/book-open.svg'); }
.ph-leaf             { -webkit-mask-image: url('../icons/leaf.svg');            mask-image: url('../icons/leaf.svg'); }
/* Numeri utili + Luoghi card */
.ph-warning          { -webkit-mask-image: url('../icons/warning.svg');              mask-image: url('../icons/warning.svg'); }
.ph-buildings-fill   { -webkit-mask-image: url('../icons/buildings-fill.svg');       mask-image: url('../icons/buildings-fill.svg'); }
.ph-first-aid        { -webkit-mask-image: url('../icons/first-aid.svg');            mask-image: url('../icons/first-aid.svg'); }
.ph-bus              { -webkit-mask-image: url('../icons/bus.svg');                  mask-image: url('../icons/bus.svg'); }
.ph-users            { -webkit-mask-image: url('../icons/users.svg');                mask-image: url('../icons/users.svg'); }
.ph-house-fill       { -webkit-mask-image: url('../icons/house-fill.svg');           mask-image: url('../icons/house-fill.svg'); }
.ph-map-pin          { -webkit-mask-image: url('../icons/map-pin.svg');              mask-image: url('../icons/map-pin.svg'); }
.ph-buildings        { -webkit-mask-image: url('../icons/buildings.svg');             mask-image: url('../icons/buildings.svg'); }
.ph-house            { -webkit-mask-image: url('../icons/house.svg');                 mask-image: url('../icons/house.svg'); }
/* Meteo | WMO weather icons */
.ph-sun              { -webkit-mask-image: url('../icons/sun.svg');                  mask-image: url('../icons/sun.svg'); }
.ph-cloud-sun        { -webkit-mask-image: url('../icons/cloud-sun.svg');            mask-image: url('../icons/cloud-sun.svg'); }
.ph-cloud            { -webkit-mask-image: url('../icons/cloud.svg');                mask-image: url('../icons/cloud.svg'); }
.ph-cloud-fog        { -webkit-mask-image: url('../icons/cloud-fog.svg');            mask-image: url('../icons/cloud-fog.svg'); }
.ph-cloud-rain       { -webkit-mask-image: url('../icons/cloud-rain.svg');           mask-image: url('../icons/cloud-rain.svg'); }
.ph-snowflake        { -webkit-mask-image: url('../icons/snowflake.svg');            mask-image: url('../icons/snowflake.svg'); }
.ph-cloud-lightning  { -webkit-mask-image: url('../icons/cloud-lightning.svg');      mask-image: url('../icons/cloud-lightning.svg'); }
.ph-thermometer-simple { -webkit-mask-image: url('../icons/thermometer-simple.svg'); mask-image: url('../icons/thermometer-simple.svg'); }
.ph-wind             { -webkit-mask-image: url('../icons/wind.svg');                 mask-image: url('../icons/wind.svg'); }
.ph-drop             { -webkit-mask-image: url('../icons/drop.svg');                 mask-image: url('../icons/drop.svg'); }


/* ═══════════════════════════════════════════
   HEADER 1 | ESPANSO (position: relative, Sessione 05)
   Logo centrato · nav su riga separata sotto.
   Scorre via naturalmente con la pagina: nessuna logica JS.
═══════════════════════════════════════════ */
.header {
  position: relative; z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 14px rgba(16,74,50,.06);
}

.header__inner {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-md) var(--space-lg) var(--space-sm);
  gap: var(--space-xs);
}

.header__logo { display: inline-flex; }
.header__logo-img { height: 52px; width: 52px; }

/* ─── Wordmark: simbolo locale + nome in HTML (Manrope 800) ───
   Verde Bosco su fondo chiaro, Bianco Soft su fondo scuro (.ilf-wordmark--light). */
.ilf-wordmark {
  display: inline-flex; align-items: center; gap: .7rem;
  color: var(--ilf-verde-bosco); text-decoration: none;
}
.ilf-wordmark__symbol { flex-shrink: 0; display: block; }
.ilf-wordmark__text {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.85rem; line-height: 1; letter-spacing: -.015em;
  color: inherit; white-space: nowrap;
}
.ilf-wordmark--sm { gap: .55rem; }
.ilf-wordmark--sm .ilf-wordmark__text { font-size: 1.3rem; }
.ilf-wordmark--light { color: var(--ilf-bianco-soft); }
.ilf-wordmark:hover { color: var(--ilf-verde-formello); }
.ilf-wordmark--light:hover { color: #fff; }
@media (max-width: 30rem) { .ilf-wordmark--sm .ilf-wordmark__text { font-size: 1.15rem; } }

.header__nav {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0;
}
.header__nav-link {
  display: inline-flex; align-items: center;
  padding: .5rem .7rem;
  font-family: var(--font-nav); font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text); transition: color .2s; white-space: nowrap;
}
.header__nav-link:hover { color: var(--verde); }
.header__nav-link.active { color: var(--verde); border-bottom: 2px solid var(--rosso); }   /* sottolineatura = accento Rosso Cuore */
.header__nav-cta {
  display: inline-flex; align-items: center;
  padding: .45rem 1.2rem; margin-left: .4rem;
  font-family: var(--font-nav); font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--verde); color: #fff; border-radius: var(--radius-pill);
  transition: background .2s; white-space: nowrap;
}
.header__nav-cta:hover { background: var(--verde-dk); color: #fff; }

/* ─── Mobile: expanded header nasconde la nav ─── */
@media (max-width: 48rem) {
  .header__nav { display: none; }
}


/* ═══════════════════════════════════════════
   HEADER 2 | COMPATTO (position: fixed, Sessione 05)
   Barra fissa: logo sx · nav centro · azioni dx · hamburger mobile.
   Nascosto con translateY(-100%) di default.
   JS aggiunge .is-visible quando hdrExp è fuori viewport →
   translateY(0) con transition CSS → slide-down senza glitch.
═══════════════════════════════════════════ */
.hdr-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 14px rgba(16,74,50,.08);
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.hdr-bar.is-visible { transform: translateY(0); }

.hdr-bar__inner {
  display: flex; flex-direction: row; align-items: center;
  padding: .35rem var(--space-lg); gap: var(--space-sm);
}

.hdr-bar__logo { display: inline-flex; flex-shrink: 0; }
.hdr-bar__logo-img { height: 36px; width: 36px; }
/* Nav compatta su schermi medi: via il nome, resta il simbolo */
@media (min-width: 48.01rem) and (max-width: 72rem) {
  .hdr-bar .ilf-wordmark__text { display: none; }
  .hdr-bar__nav-link { padding-left: .5rem; padding-right: .5rem; }
}

.hdr-bar__nav {
  display: flex; align-items: center; justify-content: center;
  flex: 1; flex-wrap: nowrap; overflow: visible; /* visible: i dropdown non vengono tagliati */
}
.hdr-bar__nav-link {
  display: inline-flex; align-items: center;
  padding: .55rem .65rem;
  font-family: var(--font-nav); font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text); transition: color .2s; white-space: nowrap;
}
.hdr-bar__nav-link:hover { color: var(--verde); }
.hdr-bar__nav-link.active { color: var(--verde); border-bottom: 2px solid var(--rosso); }
.hdr-bar__nav-cta {
  display: inline-flex; align-items: center;
  padding: .45rem 1.2rem; margin-left: .4rem;
  font-family: var(--font-nav); font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--verde); color: #fff; border-radius: var(--radius-pill);
  transition: background .2s; white-space: nowrap;
}
.hdr-bar__nav-cta:hover { background: var(--verde-dk); color: #fff; }

.hdr-bar__actions { display: flex; gap: .75rem; align-items: center; flex-shrink: 0; }
.hdr-bar__action-link { color: var(--color-text-2); display: flex; align-items: center; transition: color .2s; }
.hdr-bar__action-link:hover { color: var(--verde); }

.hdr-bar__hamburger { display: none; padding: 4px; align-items: center; justify-content: center; }

/* ─── Mobile: hdrExp nascosto, hdrCmp sempre visibile come sticky ─── */
@media (max-width: 48rem) {
  #hdrExp { display: none; }
  #hdrCmp {
    position: sticky !important;
    top: 0 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── Mobile: compact header ─── */
@media (max-width: 48rem) {
  .hdr-bar__nav     { display: none; }
  .hdr-bar__actions { display: none; }
  .hdr-bar__hamburger { display: flex; }
  .hdr-bar__nav.nav--open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(255,255,255,.98); border-top: 1px solid var(--color-border);
    padding: var(--space-sm) 0; box-shadow: 0 8px 24px rgba(0,0,0,.1);
    z-index: 10;
  }
  .hdr-bar__nav-link, .hdr-bar__nav-cta {
    padding: .6rem var(--space-lg); width: 100%;
    justify-content: flex-start; margin-left: 0; border-radius: 0;
  }

  /* ─── Mobile: nav-item wrappers full-width + dropdown espanso ─── */
  .hdr-bar__nav.nav--open .nav-item {
    width: 100%; flex-direction: column; align-items: flex-start;
  }
  .hdr-bar__nav.nav--open .nav-item__dropdown {
    position: static; opacity: 1; pointer-events: auto;
    transform: none; box-shadow: none; border: none; border-radius: 0;
    border-top: 1px solid rgba(0,0,0,.06);
    background: rgba(0,0,0,.03);
    padding: .15rem 0 .35rem; width: 100%; min-width: 0;
  }
  .hdr-bar__nav.nav--open .nav-item__dropdown-link {
    padding: .42rem var(--space-lg) .42rem calc(var(--space-lg) + 1.2rem);
    font-size: .65rem; color: var(--color-text-2);
  }
  .hdr-bar__nav.nav--open .nav-chevron { display: none; }
}


/* ═══════════════════════════════════════════
   DROPDOWN NAVIGAZIONE
   .nav-item | wrapper con position:relative
   .nav-item__dropdown | pannello sottomenu
   .nav-chevron | indicatore freccia
═══════════════════════════════════════════ */

/* ─── Wrapper voce nav con sottomenu ─── */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ─── Pannello dropdown ─── */
.nav-item__dropdown {
  position: absolute;
  top: 100%;           /* no gap | collegato direttamente al nav-item */
  left: 0;
  min-width: min(215px, 60vw);
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
  box-shadow: 0 10px 36px rgba(16,74,50,.14), 0 2px 6px rgba(16,74,50,.06);
  border: 1px solid var(--color-border);
  padding: 5px 0 .35rem; /* padding-top 5px = separazione visiva senza gap fisico */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  /* delay .12s sull'uscita: il mouse ha tempo di raggiungere il pannello */
  transition: opacity .18s ease .12s, transform .18s ease .12s;
  z-index: 300;
}

.nav-item:hover .nav-item__dropdown,
.nav-item:focus-within .nav-item__dropdown,
.nav-item.touch--open .nav-item__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  /* nessun delay sull'entrata: appare subito */
  transition: opacity .15s ease, transform .15s ease;
}

/* Touch: chevron ruota quando il dropdown è aperto via JS */
.nav-item.touch--open .nav-chevron { transform: rotate(180deg); }

/* ─── Link singolo nel dropdown ─── */
.nav-item__dropdown-link {
  display: block;
  padding: .55rem 1.1rem;
  font-family: var(--font-nav);
  font-size: .8125rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-2);
  transition: background .14s, color .14s;
  white-space: nowrap;
}
.nav-item__dropdown-link:hover {
  background: var(--color-bg-warm);
  color: var(--verde);
}
.nav-item__dropdown-link:first-child { border-radius: 0 var(--radius-md) 0 0; }
.nav-item__dropdown-link:last-child  { border-radius: 0 0 var(--radius-md) var(--radius-md); }

/* ─── Chevron indicatore ─── */
.nav-chevron {
  display: inline-block;
  width: .6rem; height: .6rem;
  margin-left: .22rem; margin-top: .06rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url('../icons/caret-down.svg');
  mask-image: url('../icons/caret-down.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  transition: transform .18s ease;
}
.nav-item:hover .nav-chevron { transform: rotate(180deg); }

/* Chevron su sfondo scuro (bottone CTA verde) */
.nav-chevron--light { background-color: rgba(255,255,255,.82); }

/* ─── CTA CONTATTI con dropdown ─── */
.nav-item--cta { margin-left: .4rem; }
.nav-item--cta .header__nav-cta,
.nav-item--cta .hdr-bar__nav-cta { margin-left: 0; }

/* Dropdown CONTATTI apre a destra → allinea a destra del bottone */
.nav-item--cta .nav-item__dropdown {
  left: auto; right: 0;
  border-radius: var(--radius-md) 0 var(--radius-md) var(--radius-md);
}
.nav-item--cta .nav-item__dropdown-link:first-child {
  border-radius: var(--radius-md) 0 0 0;
}


/* ═══════════════════════════════════════════
   HERO | video / immagine full-bleed
═══════════════════════════════════════════ */
.hero {
  position: relative; width: 100%;
  min-height: 62vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--dark-cta);
}
.hero__bg { position: absolute; inset: 0; z-index: 1; }
.hero__bg video, .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg video { position: absolute; inset: 0; }   /* il video (inserito da JS) copre il poster */
.hero__overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 100%);
}
.hero__content {
  position: relative; z-index: 3;
  text-align: center; padding: var(--space-xl) var(--space-lg);
  max-width: 800px;
}
.hero__label   { font-size: var(--text-xs); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ilf-verde-collina); margin-bottom: var(--space-md); }
.hero__title   { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 800; color: #fff; text-shadow: 0 2px 28px rgba(0,0,0,.5); margin-bottom: var(--space-sm); }
.hero__subtitle { font-size: var(--text-lg); font-weight: 300; color: rgba(255,255,255,.85); line-height: 1.6; max-width: 600px; margin: 0 auto var(--space-xl); }
.hero__buttons { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }
/* Inner page hero (più basso) */
.hero--page { min-height: 50vh; }
/* Modificatori colore titolo hero | applicare all'<h1> per override del color globale h1 */
.hero-title--white { color: #fff !important; }
.hero-title--dark  { color: var(--color-text) !important; }


/* ═══════════════════════════════════════════
   PHOTO CAROUSEL (infinite scroll)
   Pattern PugliaKitchen: marquee continuo,
   pause on hover, mouse drag, touch drag.
   Inizializzato da ilf-main.js su .photo-carousel
═══════════════════════════════════════════ */
.photo-carousel {
  overflow: hidden; position: relative;
  cursor: grab; background: var(--color-bg);
  width: 100%;
}
.photo-carousel:active { cursor: grabbing; }
.carousel-track { display: flex; will-change: transform; }
.carousel-item  {
  flex-shrink: 0; height: 340px;
  aspect-ratio: 4/3; overflow: hidden;
  margin-right: 0;
}
@media (min-width: 48rem) { .carousel-item { height: 420px; } }
.carousel-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease, filter .6s ease;
  filter: saturate(1) brightness(1);
}
.carousel-item:hover img {
  transform: scale(1.07);
  filter: saturate(1.3) brightness(1.07);
}


/* ═══════════════════════════════════════════
   REVIEW CAROUSEL (infinite scroll, card più grandi)
   Stessa tecnica .photo-carousel ma con card di testo.
═══════════════════════════════════════════ */
.review-carousel {
  overflow: hidden; position: relative;
  cursor: grab; user-select: none;
  padding: var(--space-sm) 0 var(--space-lg);
}
.review-carousel:active { cursor: grabbing; }
.review-track { display: flex; will-change: transform; }
.review-card {
  flex-shrink: 0;
  width: clamp(220px, 75vw, 400px);
  margin-right: var(--space-md);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-xl) var(--space-lg);
  text-align: center;
}
.review-card__stars  { color: #F59E0B; font-size: 1.55rem; letter-spacing: 5px; margin-bottom: var(--space-md); line-height: 1; }
.review-card__text   { font-size: var(--text-sm); line-height: 1.8; color: var(--color-text-2); font-style: italic; margin-bottom: var(--space-lg); }
.review-card__author { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); }
.review-card__avatar {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; flex-shrink: 0;
  letter-spacing: .03em;
}
.review-card__author-info { display: flex; flex-direction: column; gap: .15rem; text-align: left; }
.review-card__name { font-weight: 700; font-size: var(--text-sm); color: var(--color-text); line-height: 1.3; }
.review-card__role { font-size: var(--text-xs); color: var(--color-text-3); }


/* ═══════════════════════════════════════════
   NEWS GRID | card editoriali (PK-style)
═══════════════════════════════════════════ */
.news-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-lg);
}
@media (max-width: 48rem) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .news-grid { grid-template-columns: 1fr; } }

.news-card {
  background: var(--color-bg-warm); border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s;
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.news-card__img  { width: 100%; height: 200px; object-fit: cover; }
.news-card__body { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; }
.news-card__tag  {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--verde); margin-bottom: var(--space-sm);
}
.news-card h3    {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
  line-height: 1.3; margin-bottom: var(--space-sm);
  /* color ereditato dal parent (.news-card) per rispettare dark/light bg */
}
.news-card p     { font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-2); flex: 1; margin-bottom: var(--space-md); }
.news-card__read {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--verde); transition: color .2s; align-self: flex-start;
}
.news-card__read:hover { color: var(--verde-dk); }


/* ═══════════════════════════════════════════
   APPROFONDIMENTI GRID (dark bg version)
═══════════════════════════════════════════ */
.art-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-lg); }
@media (max-width: 48rem) { .art-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .art-grid { grid-template-columns: 1fr; } }

.art-card {
  background: var(--color-bg); border-radius: var(--radius-md);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 6px 28px rgba(0,0,0,.22); transition: transform .2s, box-shadow .2s;
}
.art-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.28); }
.art-card__img  { width: 100%; height: 195px; object-fit: cover; }
.art-card__body { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; }
.art-card__tag  {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--verde); margin-bottom: var(--space-sm);
}
.art-card h3    {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
  color: var(--color-text); line-height: 1.3; margin-bottom: var(--space-sm);
}
.art-card p     { font-size: var(--text-sm); line-height: 1.65; color: var(--color-text-2); flex: 1; margin-bottom: var(--space-md); }
.art-card__read {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--verde); transition: color .2s; align-self: flex-start;
}
.art-card__read:hover { color: var(--verde-dk); }


/* ═══════════════════════════════════════════
   ICON GRID 4×2 | "In Due Parole"
═══════════════════════════════════════════ */
.icon-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-xl) var(--space-lg); }
@media (max-width: 48rem) { .icon-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 30rem) { .icon-grid { grid-template-columns: 1fr; } }

.ig-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm); }
.ig-circle {
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ig-circle .ph-icon { width: 38px; height: 38px; }
.ig-red  { background: var(--rosso); color: #fff; }
.ig-blue { background: var(--verde); color: #fff; }
.ig-item h3 { font-family: var(--font-body); font-size: var(--text-md); font-weight: 700; color: var(--color-text); }
.ig-item p  { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-2); }


/* ═══════════════════════════════════════════
   FEATURE CARDS | 3 colonne (Storia sezione)
═══════════════════════════════════════════ */
.feature-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-md); }
@media (max-width: 36rem) { .feature-cards { grid-template-columns: 1fr; gap: var(--space-sm); } }

.fc {
  background: var(--color-surface); border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-xl) var(--space-lg);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--space-md);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.fc:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.1); }
.fc--red    { background: var(--verde-dk, #104A32); border-color: transparent; } /* brand 2.1: il rosso resta accento, la card piena va in Verde Bosco */
.fc--red:hover    { box-shadow: 0 8px 28px rgba(16,74,50,.3); }
.fc--blue   { background: var(--azzurro-pale); border-color: var(--ilf-verde-collina); }
.fc--blue:hover   { box-shadow: 0 8px 28px rgba(16,74,50,.2); border-color: var(--verde); }
.fc--verde  { background: #E4F0E7; border-color: var(--ilf-verde-collina); }
.fc--verde:hover  { box-shadow: 0 8px 28px rgba(23,102,65,.2); border-color: var(--verde); }
.fc--arancio { background: var(--arancio-pale); border-color: #E3BFA3; }
.fc--arancio:hover { box-shadow: 0 8px 28px rgba(184,94,36,.2); border-color: var(--terra); }
.fc-icon  { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fc-icon .ph-icon { width: 32px; height: 32px; }
.fc-icon--red     { background: rgba(209,62,45,.12);  color: var(--rosso); }
.fc-icon--white   { background: rgba(255,255,255,.25); color: #fff; }
.fc-icon--blue    { background: rgba(16,74,50,.10);    color: var(--verde-dk); }
.fc-icon--verde   { background: rgba(23,102,65,.12);  color: var(--verde); }
.fc-icon--arancio { background: rgba(184,94,36,.12);  color: var(--terra); }
.fc h3 {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
  line-height: 1.2; color: var(--color-text);
}
.fc--red h3, .fc--red p { color: #fff !important; }
.fc--red .btn--outline { color: #fff; border-color: rgba(255,255,255,.85); }
.fc--red .btn--outline:hover { background: #fff; color: var(--verde-dk, #104A32); }
.fc p  { font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-2); }


/* ═══════════════════════════════════════════
   NEWSLETTER | dark green
═══════════════════════════════════════════ */
.newsletter { padding: var(--space-3xl) 0; background: var(--dark-nl); text-align: center; }
.newsletter__inner { max-width: 38rem; margin-inline: auto; padding-inline: var(--space-lg); }
.newsletter .section-label { color: var(--ilf-verde-collina); }
.newsletter h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: #fff; margin-bottom: var(--space-sm); }
.newsletter__desc { color: rgba(255,255,255,.82); font-size: var(--text-md); line-height: 1.7; margin-bottom: var(--space-xl); }
.newsletter__form { display: flex; gap: var(--space-sm); flex-direction: column; }
@media (min-width: 32rem) { .newsletter__form { flex-direction: row; } }
.newsletter__input {
  flex: 1; padding: .8rem 1.25rem;
  font-family: var(--font-body); font-size: var(--text-sm);
  border: 1.5px solid rgba(255,255,255,.25); border-radius: var(--radius-pill);
  background: rgba(255,255,255,.1); color: #fff; outline: none;
  transition: border-color .2s;
}
.newsletter__input::placeholder { color: rgba(255,255,255,.7); }
.newsletter__input:focus { border-color: var(--ilf-verde-collina); background: rgba(255,255,255,.15); }
.newsletter__note { margin-top: var(--space-sm); font-size: var(--text-xs); color: rgba(255,255,255,.7); }
.newsletter__note a { color: rgba(255,255,255,.85); text-decoration: underline; }


/* ═══════════════════════════════════════════
   PARTNER CTA | warm gradient
═══════════════════════════════════════════ */
.partner-cta {
  padding: var(--space-3xl) 0;
  background: linear-gradient(140deg, var(--color-bg) 0%, var(--color-bg-sand) 100%);
  border-top: 1px solid var(--color-bg-sand2);
}
.partner-cta__inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--space-xl);
}
@media (min-width: 48rem) {
  .partner-cta__inner { flex-direction: row; text-align: left; justify-content: space-between; }
}
.partner-cta__text h2  { font-size: var(--text-2xl); margin-bottom: var(--space-sm); }
.partner-cta__text p   { color: var(--color-text-2); font-size: var(--text-md); max-width: 520px; }
.partner-cta__actions  { display: flex; gap: var(--space-md); flex-shrink: 0; flex-wrap: wrap; justify-content: center; }
@media (min-width: 48rem) { .partner-cta__actions { justify-content: flex-start; } }


/* ═══════════════════════════════════════════
   FOOTER | dark 4 colonne
═══════════════════════════════════════════ */
.footer { background: var(--dark-cta); color: rgba(255,255,255,.75); padding: var(--space-3xl) 0 0; border-top: 1px solid rgba(255,255,255,.12); }
.footer__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-xl);
  padding-bottom: var(--space-3xl);
}
@media (min-width: 40rem)  { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem)  { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* Logo footer: simbolo locale + wordmark Bianco Soft (vedi .ilf-wordmark) */
.footer__logo { display: inline-flex; }
.footer__logo-img { height: 44px; width: 44px; }
.footer .ilf-wordmark__text { font-size: 1.6rem; }
.footer__credit { opacity: .85; }
.footer__credit a { text-decoration: underline; text-underline-offset: 2px; }
.footer__tagline  { font-size: var(--text-sm); line-height: 1.7; margin: var(--space-md) 0; max-width: 280px; }
.footer__social   { display: flex; gap: var(--space-sm); }
.footer__social a {
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.8);
  transition: all .2s;
}
.footer__social a:hover { background: var(--verde); color: #fff; }

.footer__heading { font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: var(--space-lg); }
.footer__links   { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer__links a { font-size: var(--text-sm); color: rgba(255,255,255,.78); transition: color .2s; }
.footer__links a:hover { color: #fff; }
.footer__link-dimmed { opacity: .8; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.14); padding: var(--space-xl) 0;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-sm); text-align: center; font-size: var(--text-xs);
}
@media (min-width: 48rem) { .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer__copy  { color: rgba(255,255,255,.72); }
.footer__legal { display: flex; gap: var(--space-md); }
.footer__legal a { color: rgba(255,255,255,.72); transition: color .2s; }
.footer__legal a:hover { color: #fff; }


/* ═══════════════════════════════════════════
   PLACEHOLDER PAGE
   Usato nelle sezioni non ancora sviluppate
═══════════════════════════════════════════ */
.placeholder-hero {
  min-height: 55vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--verde-dk) 0%, var(--verde) 100%);
  text-align: center; padding: var(--space-xl) var(--space-lg);
}
.placeholder-hero h1   { font-family: var(--font-display); color: #fff; margin-bottom: var(--space-md); }
.placeholder-hero p    { color: rgba(255,255,255,.8); font-size: var(--text-lg); max-width: 500px; margin: 0 auto var(--space-xl); }
.placeholder-badge {
  display: inline-block; padding: .4rem 1rem;
  background: rgba(255,255,255,.15); color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

.placeholder-content {
  padding: var(--space-3xl) 0;
  background: var(--color-bg-warm); text-align: center;
}
.placeholder-content h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.placeholder-content p  { color: var(--color-text-2); font-size: var(--text-lg); max-width: 600px; margin: 0 auto var(--space-xl); line-height: 1.7; }


/* ═══════════════════════════════════════════
   SECTION DIVIDER (wave)
═══════════════════════════════════════════ */
.wave-divider { overflow: hidden; line-height: 0; position: relative; }
.wave-divider svg { display: block; width: 100%; }


/* ═══════════════════════════════════════════
   SEZIONE MACRO: STORIA / CULTURA / NATURA
   Layout editoriale 3 livelli (Sessione 05):
   1) intro 2-col (heading sx · testo dx)
   2) stats row 4-col con grandi numeri
   3) 3 feature card verde / arancio / azzurro
═══════════════════════════════════════════ */
.macro-section { background: var(--color-bg-warm); }

/* ─── 1. Intro editoriale 2 colonne ─── */
.macro__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
  margin-bottom: var(--space-2xl);
}
@media (max-width: 56rem) { .macro__intro { grid-template-columns: 1fr; gap: var(--space-xl); margin-bottom: var(--space-xl); } }
.macro__intro-heading h2 { font-size: var(--text-3xl); line-height: 1.05; margin-bottom: 0; text-wrap: balance; }
.macro__intro-body p { color: var(--color-text-2); line-height: 1.85; margin-bottom: var(--space-md); font-size: var(--text-md); text-wrap: pretty; }
.macro__intro-body p:last-child { margin-bottom: 0; }

/* ─── 2. Stats row | cornice completa + filetti interni ─── */
.macro__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-2xl);
}
@media (max-width: 48rem) { .macro__stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30rem) { .macro__stats { grid-template-columns: 1fr; } }
.macro__stat {
  padding: var(--space-lg) var(--space-md);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
  border-right: 1px solid var(--color-border);
  text-align: center;
}
.macro__stat:last-child { border-right: none; }
@media (max-width: 48rem) {
  .macro__stat:nth-child(2) { border-right: none; }
  .macro__stat:nth-child(3) { border-top: 1px solid var(--color-border); }
  .macro__stat:nth-child(4) { border-top: 1px solid var(--color-border); border-right: none; }
}
.macro__stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 1.4rem + 1.3vw, 2.4rem);
  font-weight: 700; color: var(--verde); line-height: 1;
  white-space: nowrap;
}
.macro__stat-label {
  font-size: var(--text-xs); color: var(--color-text-3);
  text-transform: uppercase; letter-spacing: .08em; line-height: 1.5;
  text-wrap: balance;
}

/* ─── 3. Cards più grandi + CTA ─── */
.macro__cards { margin-bottom: var(--space-xl); }
.macro__cards .fc-icon { width: 80px; height: 80px; }
.macro__cards .fc-icon .ph-icon, .macro__cards .fc-icon span { width: 40px !important; height: 40px !important; }
.macro__cards .fc h3 { font-size: var(--text-xl); }
.macro__cta-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; }


/* ═══════════════════════════════════════════
   SEZIONE ESPLORA | icone circolari su sfondo bianco
═══════════════════════════════════════════ */
.esplora-section { background: var(--color-surface); }
.sezioni__grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--space-xl) var(--space-lg);
}
@media (max-width: 48rem) { .sezioni__grid { grid-template-columns: repeat(2,1fr); gap: var(--space-lg); } }
@media (max-width: 30rem) { .sezioni__grid { grid-template-columns: repeat(2,1fr); gap: var(--space-md); } }
.sezione-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--space-xl) var(--space-md);
  text-decoration: none; color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.sezione-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(0,0,0,.1);
  border-color: var(--verde);
}
.sezione-card__icon-wrap {
  width: 5rem; height: 5rem;
  background: var(--rosso); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-md);
  transition: transform .3s, box-shadow .3s;
  box-shadow: 0 4px 16px rgba(209,62,45,.2);
}
.sezione-card:hover .sezione-card__icon-wrap {
  transform: scale(1.1);
  box-shadow: 0 8px 28px rgba(209,62,45,.35);
}
.sezione-card__icon {
  width: 2.4rem; height: 2.4rem;
  background: #fff;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.sezione-card__title { font-family: var(--font-body); font-size: var(--text-md); font-weight: 700; margin-bottom: var(--space-xs); transition: color .3s; }
.sezione-card:hover .sezione-card__title { color: var(--verde); }
.sezione-card__desc  { font-size: var(--text-sm); color: var(--color-text-2); line-height: 1.5; }


/* ═══════════════════════════════════════════
   SEZIONI DARK | sfondo scuro, testi in chiaro
   Cascata WCAG AA: tutti i testi figli in chiaro
═══════════════════════════════════════════ */
.section--dark  { background: var(--verde-dk); color: rgba(255,255,255,.88); }
.section--dark2 { background: var(--verde-dk); color: rgba(255,255,255,.88); }
.section--dark h1,  .section--dark h2,  .section--dark h3,  .section--dark h4,
.section--dark2 h1, .section--dark2 h2, .section--dark2 h3, .section--dark2 h4 { color: #fff; }
.section--dark p, .section--dark2 p { color: rgba(255,255,255,.82); }


/* ═══════════════════════════════════════════
   PHOTO STRIP | hover overlay magazine stile
═══════════════════════════════════════════ */
.carousel-item { position: relative; overflow: hidden; }
.carousel-item__overlay {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.45) 45%,
    rgba(0,0,0,.0)  100%);
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  padding: var(--space-md);
  gap: var(--space-xs);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .38s ease, transform .38s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.carousel-item:hover .carousel-item__overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.carousel-item__label {
  display: inline-block;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: .18rem .6rem; border-radius: var(--radius-sm);
}
.carousel-item__title {
  font-family: var(--font-display);
  font-size: var(--text-md); font-weight: 600;
  color: #fff; line-height: 1.25;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
  margin: 0;
}


/* ═══════════════════════════════════════════
   BTN SIZE VARIANTS
═══════════════════════════════════════════ */
.btn--sm { padding: .55rem 1.4rem; font-size: var(--text-xs); }
.btn--lg { padding: 1rem 2.6rem; font-size: var(--text-md); }


/* ═══════════════════════════════════════════
   WAVE DIVIDER | divisori ondulati (colline)
═══════════════════════════════════════════ */
.wave-divider     { overflow: hidden; line-height: 0; display: block; margin: 0; padding: 0; }
.wave-divider svg { display: block; width: 100%; }


/* ═══════════════════════════════════════════
   MAPPA DEL TERRITORIO
   .mappa-legend      | legenda colorata (statica)
   .mappa-filter-pill | filtri interattivi per categoria
   .ilf-map           | contenitore mappa Leaflet
   .luoghi-card       | card luogo nella griglia
═══════════════════════════════════════════ */

/* ─── Legenda (home + territorio) ─── */
.mappa-legend {
  display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.mappa-legend__item {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-nav); font-size: .8rem; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .28rem .75rem; border-radius: var(--radius-pill);
}
.mappa-legend__item::before {
  content: ''; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
/* Colori di categoria dalla palette brand 2.1 (token --cat-*):
   turismo=verde Formello · enogastronomia=rosso cuore · ricettività=terracotta · servizi=antracite */
.mappa-legend__item--turismo        { background:color-mix(in srgb, var(--cat-turismo) 10%, transparent);   color:var(--cat-turismo); }
.mappa-legend__item--turismo::before { background:var(--cat-turismo); }
.mappa-legend__item--enogastronomia  { background:color-mix(in srgb, var(--cat-enogastronomia) 10%, transparent);  color:var(--cat-enogastronomia); }
.mappa-legend__item--enogastronomia::before { background:var(--cat-enogastronomia); }
.mappa-legend__item--ricettivita    { background:color-mix(in srgb, var(--cat-ricettivita) 10%, transparent);  color:var(--cat-ricettivita); }
.mappa-legend__item--ricettivita::before { background:var(--cat-ricettivita); }
.mappa-legend__item--servizi        { background:color-mix(in srgb, var(--cat-servizi) 10%, transparent);  color:var(--cat-servizi); }
.mappa-legend__item--servizi::before { background:var(--cat-servizi); }

/* ─── Map container ─── */
.ilf-map          { width: 100%; display: block; }
.ilf-map--home    { height: 400px; }
.ilf-map--full    { height: 520px; }
.ilf-map--tall    { height: 460px; }
/* Mobile: mappa alta circa 62% dello schermo, mai oltre 520px */
@media (max-width: 767.98px) {
  .ilf-map--home, .ilf-map--full, .ilf-map--tall { height: min(62vh, 520px); min-height: 300px; }
}

/* ─── Filter pills (territorio) ─── */
.mappa-filters {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}
.mappa-filter-pill {
  padding: .38rem 1rem;
  font-family: var(--font-nav); font-size: .9rem; font-weight: 400;
  letter-spacing: .05em; text-transform: uppercase;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-2); background: #fff;
  cursor: pointer; transition: all .18s;
}
.mappa-filter-pill:hover { border-color: var(--verde); color: var(--verde); }
/* Bordo colorato a riposo | colore semantico per categoria */
.mappa-filter-pill--turismo        { border-color:var(--cat-turismo); color:var(--cat-turismo); }
.mappa-filter-pill--enogastronomia { border-color:var(--cat-enogastronomia); color:var(--cat-enogastronomia); }
.mappa-filter-pill--ricettivita    { border-color:var(--cat-ricettivita); color:var(--cat-ricettivita); }
.mappa-filter-pill--servizi        { border-color:var(--cat-servizi); color:var(--cat-servizi); }
/* Stato attivo | sfondo pieno */
.mappa-filter-pill--all.is-active          { background:var(--color-text);   border-color:var(--color-text);   color:#fff; }
.mappa-filter-pill--turismo.is-active      { background:var(--cat-turismo); border-color:var(--cat-turismo); color:#fff; }
.mappa-filter-pill--enogastronomia.is-active { background:var(--cat-enogastronomia); border-color:var(--cat-enogastronomia); color:#fff; }
.mappa-filter-pill--ricettivita.is-active  { background:var(--cat-ricettivita); border-color:var(--cat-ricettivita); color:#fff; }
.mappa-filter-pill--servizi.is-active      { background:var(--cat-servizi); border-color:var(--cat-servizi); color:#fff; }

/* ─── Luoghi cards grid ─── */
.luoghi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
@media (max-width: 64rem) { .luoghi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .luoghi-grid { grid-template-columns: 1fr; } }

.luoghi-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.luoghi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.1);
  border-color: transparent;
}
.luoghi-card__photo {
  height: 150px; overflow: hidden;
  background: var(--color-bg-warm);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.luoghi-card__photo img {
  width:100%; height:100%; object-fit:cover;
  transition: transform .4s ease;
}
.luoghi-card:hover .luoghi-card__photo img { transform: scale(1.05); }
.luoghi-card__photo-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
/* ─── Icone placeholder luoghi | colore semantico per categoria ─── */
.luoghi-icon--turismo        { background: var(--cat-turismo); }
.luoghi-icon--enogastronomia { background: var(--cat-enogastronomia); }
.luoghi-icon--ricettivita    { background: var(--cat-ricettivita); }
.luoghi-icon--servizi        { background: var(--cat-servizi); }

/* ─── Luoghi card | category gradient backgrounds ─── */
.luoghi-card__photo--turismo        { background: linear-gradient(145deg, color-mix(in srgb, var(--cat-turismo) 13%, transparent) 0%, color-mix(in srgb, var(--cat-turismo) 4%, transparent) 100%); }
.luoghi-card__photo--enogastronomia { background: linear-gradient(145deg, color-mix(in srgb, var(--cat-enogastronomia) 13%, transparent) 0%, color-mix(in srgb, var(--cat-enogastronomia) 4%, transparent) 100%); }
.luoghi-card__photo--ricettivita    { background: linear-gradient(145deg, color-mix(in srgb, var(--cat-ricettivita) 13%, transparent) 0%, color-mix(in srgb, var(--cat-ricettivita) 4%, transparent) 100%); }
.luoghi-card__photo--servizi        { background: linear-gradient(145deg, color-mix(in srgb, var(--cat-servizi) 13%, transparent) 0%, color-mix(in srgb, var(--cat-servizi) 4%, transparent) 100%); }
.luoghi-card__badge {
  position: absolute; top: var(--space-sm); left: var(--space-sm);
  font-family: var(--font-nav); font-size: .75rem; font-weight: 400;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .2rem .65rem; border-radius: var(--radius-pill); color: #fff;
}
.luoghi-card__badge--turismo        { background: var(--cat-turismo); }
.luoghi-card__badge--enogastronomia { background: var(--cat-enogastronomia); }
.luoghi-card__badge--ricettivita    { background: var(--cat-ricettivita); }
.luoghi-card__badge--servizi        { background: var(--cat-servizi); }
.luoghi-card__body   { padding: var(--space-md) var(--space-lg); }
.luoghi-card__zona   { font-size: var(--text-xs); color: var(--color-text-2); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .2rem; }
.luoghi-card__nome   { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-xs); line-height: 1.3; }
.luoghi-card__tagline { font-size: var(--text-sm); color: var(--color-text-2); line-height: 1.6; margin-bottom: var(--space-md); }
.luoghi-card__link {
  display: inline-block;
  font-family: var(--font-nav); font-size: .85rem; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--verde); transition: color .2s;
}
.luoghi-card__link:hover { color: var(--verde-dk); }

/* Map attribution */
.mappa-attribution {
  text-align: right; font-size: .7rem; color: var(--color-text-2);
  padding: .35rem var(--space-lg); background: #f5f5f5;
}

/* ═══════════════════════════════════════════
   SPOTLIGHT | In evidenza questa settimana
   Layout: 1 card grande + 2 card side
═══════════════════════════════════════════ */
.spotlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

/* ─── Main card ─── */
.spotlight-main {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.spotlight-main:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.1); }
.spotlight-main__photo { position: relative; height: 230px; }
.spotlight-main__photo-inner { width: 100%; height: 100%; }
/* ─── Spotlight photo placeholder ─── */
.spotlight-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.spotlight-main__body { padding: var(--space-lg); }
.spotlight-main__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 700; color: var(--color-text);
  line-height: 1.3; margin-bottom: var(--space-sm);
}
.spotlight-main__sub {
  color: var(--color-text-2); line-height: 1.65;
  margin-bottom: var(--space-md); font-size: var(--text-sm);
}

/* ─── Side container ─── */
.spotlight-side { display: flex; flex-direction: column; gap: var(--space-md); }

/* ─── Side card ─── */
.spotlight-side-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 120px 1fr;
  transition: transform .25s ease, box-shadow .25s ease;
}
.spotlight-side-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.09); }
.spotlight-side-card__photo { position: relative; min-height: 120px; overflow: hidden; }
.spotlight-side-card__body {
  padding: var(--space-md);
  display: flex; flex-direction: column; justify-content: center;
}
.spotlight-side-card__title {
  font-family: var(--font-display); font-size: 1rem;
  font-weight: 700; color: var(--color-text);
  line-height: 1.35; margin-bottom: .3rem;
}
.spotlight-side-card__sub {
  font-size: .82rem; color: var(--color-text-2);
  line-height: 1.55; margin-bottom: .5rem;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.spotlight-side-card__link {
  font-size: .8rem; font-weight: 600;
  color: var(--verde); text-decoration: none;
}
.spotlight-side-card__link:hover { text-decoration: underline; }

/* ─── Badge categoria ─── */
.spotlight-badge {
  position: absolute; top: var(--space-sm); left: var(--space-sm);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; padding: .22rem .65rem;
  border-radius: var(--radius-pill);
  white-space: nowrap; max-width: calc(100% - var(--space-sm));
  overflow: hidden; text-overflow: ellipsis;
}

/* ─── Responsive ─── */
@media (max-width: 48rem) {
  .spotlight-grid { grid-template-columns: 1fr; }
  .spotlight-side-card { grid-template-columns: 100px 1fr; }
}

/* ═══════════════════════════════════════════
   NUMERI UTILI | griglia 5 card contatti
═══════════════════════════════════════════ */
.numeri-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
}
.numeri-card {
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-md);
  transition: transform .22s ease, box-shadow .22s ease;
}
.numeri-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.numeri-card__icon-wrap {
  width: 2.8rem; height: 2.8rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.numeri-card__icon-wrap .ph-icon {
  width: 1.4rem; height: 1.4rem;
}
/* Varianti cromatiche card numeri utili | classi semantiche */
/* icone dei numeri utili: palette 2.1 (revisione 15/10/2026; prima azzurro, verde e giallo fuori palette) */
.numeri-card--emergenze .numeri-card__icon-wrap { background: rgba(180,35,24,.10); }
.numeri-card--emergenze .ph-icon               { background: #B42318; }   /* Errore */
.numeri-card--comune    .numeri-card__icon-wrap { background: rgba(16,74,50,.10); }
.numeri-card--comune    .ph-icon               { background: #104A32; }   /* Verde Bosco */
.numeri-card--sanita    .numeri-card__icon-wrap { background: rgba(23,102,65,.10); }
.numeri-card--sanita    .ph-icon               { background: #176641; }   /* Verde Formello */
.numeri-card--trasporti .numeri-card__icon-wrap { background: rgba(184,94,36,.12); }
.numeri-card--trasporti .ph-icon               { background: #B85E24; }   /* Terracotta */
.numeri-card--associazioni .numeri-card__icon-wrap { background: rgba(209,62,45,.10); }
.numeri-card--associazioni .ph-icon            { background: #D13E2D; }   /* Rosso Cuore */
.numeri-card__title {
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: 700; color: var(--color-text);
  margin-bottom: var(--space-sm);
}
.numeri-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.numeri-list li { display: flex; flex-direction: column; gap: .1rem; }
.numeri-list__label { font-size: .72rem; color: var(--color-text-3); text-transform: uppercase; letter-spacing: .06em; }
.numeri-list__num {
  font-size: .88rem; font-weight: 600; color: var(--verde);
  text-decoration: none; transition: color .2s;
}
.numeri-list__num:hover { color: var(--verde-dk); }

@media (max-width: 64rem) { .numeri-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 40rem) { .numeri-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 28rem) { .numeri-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════
   METEO | widget temperatura in tempo reale
═══════════════════════════════════════════ */
.meteo-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.meteo-title {
  font-family: var(--font-display); font-size: clamp(1.6rem,3vw,2.2rem);
  font-weight: 800; color: var(--color-text); line-height: 1.15;
  margin-bottom: var(--space-xs);
}
.meteo-sub { font-size: var(--text-xs); color: var(--color-text-3); margin-top: .25rem; }

/* Card meteo */
.meteo-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-2xl);
  display: flex; flex-direction: column; gap: var(--space-lg);
}
.meteo-card--fallback { padding: var(--space-xl); }

/* Temp principale */
.meteo-card__main { display: flex; align-items: center; gap: var(--space-lg); }
.meteo-card__icon-wrap {
  width: 4rem; height: 4rem; border-radius: 50%;
  background: rgba(209,62,45,.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.meteo-card__icon-wrap .ph-icon { width: 2rem; height: 2rem; }
.meteo-card__temp {
  font-family: var(--font-display); font-size: 3.5rem; font-weight: 800;
  color: var(--color-text); line-height: 1;
}
.meteo-card__unit { font-size: 1.5rem; font-weight: 400; }
.meteo-card__desc { font-size: var(--text-md); color: var(--color-text-2); margin-top: .3rem; }

/* Dati secondari */
.meteo-card__details {
  display: flex; gap: var(--space-xl); flex-wrap: wrap;
  border-top: 1px solid var(--color-border); padding-top: var(--space-md);
}
.meteo-detail { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.meteo-detail__icon { display: flex; }
.meteo-detail__icon .ph-icon { width: 1rem; height: 1rem; }
.meteo-detail__val { font-size: var(--text-md); font-weight: 600; color: var(--color-text); }
.meteo-detail__lbl { font-size: .72rem; color: var(--color-text-3); text-transform: uppercase; letter-spacing: .06em; }

/* Link */
.meteo-card__link {
  font-size: .85rem; font-weight: 600; color: var(--verde);
  text-decoration: none; align-self: flex-start;
}
.meteo-card__link:hover { text-decoration: underline; }

@media (max-width: 48rem) { .meteo-inner { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════
   EVENTI | griglia prossimi appuntamenti
═══════════════════════════════════════════ */
.eventi-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.eventi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
/* Card evento */
.evento-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.evento-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.1); }

/* Badge data colorato */
.evento-card__date {
  padding: var(--space-md) var(--space-lg);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .1rem; color: #fff;
}
.evento-card__day { font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; }
.evento-card__mon { font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; opacity: .9; }
.evento-card__dow { font-size: .7rem; opacity: .75; text-transform: uppercase; letter-spacing: .12em; margin-top: .1rem; }

/* Body */
.evento-card__body { padding: var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.evento-card__cat  { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.evento-card__title {
  font-family: var(--font-display); font-size: 1rem;
  font-weight: 700; color: var(--color-text); line-height: 1.3;
}
.evento-card__luogo {
  display: flex; align-items: center; gap: .3rem;
  font-size: .75rem; color: var(--color-text-2);
}
.evento-card__tagline {
  font-size: .8rem; color: var(--color-text-2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: .1rem;
}
.evento-card__link {
  font-size: .8rem; font-weight: 600; color: var(--verde);
  text-decoration: none; margin-top: auto; padding-top: var(--space-sm);
}
.evento-card__link:hover { text-decoration: underline; }

@media (max-width: 64rem) { .eventi-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 36rem) { .eventi-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════
   RESPONSIVE UTILITIES
═══════════════════════════════════════════ */
@media (max-width: 30rem) {
  .header__top-bar { padding: .6rem var(--space-md); }
  .feature-cards   { grid-template-columns: 1fr; }
  .icon-grid       { grid-template-columns: repeat(2,1fr); }
  .carousel-item   { height: 240px; }
}


/* ═══════════════════════════════════════════
   BREADCRUMB
   Barra di navigazione contestuale sopra il hero.
   Apparisce solo nelle pagine interne ($breadcrumbs definito).
   Semantica: <nav aria-label="..."> > <ol> > <li>
   Sessione 11
═══════════════════════════════════════════ */
.breadcrumb {
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border);
  padding: .55rem 0;
}
.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.breadcrumb__item {
  display: flex;
  align-items: center;
}
.breadcrumb__link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-2);
  text-decoration: none;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.breadcrumb__link:hover { color: var(--verde); }
.breadcrumb__sep {
  display: inline-block;
  font-size: .8rem;
  color: var(--color-text-3);
  padding: 0 .4rem;
  user-select: none;
  line-height: 1;
}
.breadcrumb__current {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
}
/* Icona casa inline per il link Home */
.breadcrumb__home-icon {
  display: inline-block;
  width: .85rem;
  height: .85rem;
  flex-shrink: 0;
  background-color: var(--color-text-2);
  -webkit-mask-image: url('../icons/house.svg');
  mask-image: url('../icons/house.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  transition: background-color .15s;
}
.breadcrumb__link:hover .breadcrumb__home-icon { background-color: var(--verde); }
.breadcrumb__home-label {
  /* visibile su schermi medi+, nascosta su molto piccoli per compattezza */
  display: inline;
}
@media (max-width: 22rem) {
  .breadcrumb__home-label { display: none; }
}


/* ═══════════════════════════════════════════
   PAGINA 404
═══════════════════════════════════════════ */
.err404 { padding: var(--space-3xl) 0; background: var(--color-bg); }
.err404__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.err404__code {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(5rem, 3rem + 10vw, 9rem); letter-spacing: -.04em;
  color: var(--ilf-verde-collina);               /* solo decorativo, grande, su fondo chiaro */
  margin-bottom: var(--space-sm);
}
.err404__title { font-size: var(--text-3xl); max-width: 22ch; text-wrap: balance; margin-bottom: var(--space-md); }
.err404__text  { max-width: 38rem; color: var(--color-text-2); font-size: var(--text-md); line-height: 1.7; margin-bottom: var(--space-xl); }
.err404__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-2xl); }
.err404__links {
  list-style: none; width: 100%; max-width: 60rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md);
}
@media (max-width: 56rem) { .err404__links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30rem) { .err404__links { grid-template-columns: 1fr; } }
.err404__card {
  display: flex; flex-direction: column; gap: .35rem; height: 100%;
  padding: var(--space-lg) var(--space-md); text-align: left;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-top: 3px solid var(--rosso); border-radius: var(--radius-md);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.err404__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-top-color: var(--verde); }
.err404__card-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--verde-dk); }
.err404__card-desc  { font-size: var(--text-sm); color: var(--color-text-2); line-height: 1.55; }

/* ─────────────────────────────────────────
   STRISCIA FOTOGRAFICA (assets/includes/_striscia-foto.php)
   Fascia a tutta larghezza di 5 riquadri; su mobile scorre in orizzontale.
───────────────────────────────────────── */
.ilf-striscia {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  height: clamp(150px, 20vw, 260px);
  background: var(--color-bg, #F7F8F4);
  overflow: hidden;
}
.ilf-striscia__item { position: relative; margin: 0; overflow: hidden; min-width: 0; }
.ilf-striscia__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.ilf-striscia__item:hover img { transform: scale(1.04); }
.ilf-striscia__credit {
  position: absolute; right: 6px; bottom: 6px; max-width: calc(100% - 12px);
  font-size: 10px; line-height: 1.3; color: #fff; background: rgba(16, 74, 50, .7);
  padding: 2px 6px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 767px) {
  .ilf-striscia { grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; }
  .ilf-striscia__item { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .ilf-striscia__item img { transition: none; } }

/* ─────────────────────────────────────────
   FOTO DEL TERRITORIO: credito e miniature di card (assets/includes/media.php: ilf_foto*)
   .ilf-credit      credito della foto (licenze CC BY / CC BY-SA), in basso a destra del contenitore posizionato
   .ilf-card-thumb  slot immagine 3:2 in cima alle card; con foto reale o placeholder di categoria
───────────────────────────────────────── */
.ilf-credit {
  position: absolute; right: 6px; bottom: 6px; z-index: 4;
  max-width: calc(100% - 12px);
  font-size: 10px; line-height: 1.3; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: right;
  color: #fff; background: rgba(16, 74, 50, .72);
  padding: 2px 6px; border-radius: 3px;
  pointer-events: none;
}
.ilf-card-thumb {
  position: relative; display: block; margin: 0;
  aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--color-bg-warm, #FAF8F4);
}
.ilf-card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
a:hover > .ilf-card-thumb img, article:hover .ilf-card-thumb img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .ilf-card-thumb img { transition: none; } }
/* foto di accompagnamento nel testo (focus, riquadri di sezione) */
.ilf-foto-box { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.ilf-foto-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* card di sezione con miniatura (home: esplora e percorsi; turismo: cosa vedere, itinerari, continua a esplorare) */
.fc, .sezione-card, .itinerari-card, .tur-cta-card { overflow: hidden; }
.fc > .ilf-card-thumb          { align-self: stretch; margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-lg)) 0; }
.sezione-card > .ilf-card-thumb { align-self: stretch; margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-md)) 0; }
.itinerari-card > .ilf-card-thumb { margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-lg)) 0; }
.tur-cta-card > .ilf-card-thumb   { margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-xl)) 0; }
/* sotto la foto l'icona resta, con un po' d'aria (il credito della foto non va coperto) */
.fc > .ilf-card-thumb + .fc-icon,
.sezione-card > .ilf-card-thumb + .sezione-card__icon-wrap { margin-top: var(--space-md); }
.sezione-card:hover > .ilf-card-thumb img { transform: scale(1.04); }
.feature-cards--2col > .fc > .ilf-card-thumb { aspect-ratio: 16 / 9; }

/* ─────────────────────────────────────────
   FIGURA NEL CORPO DEGLI ARTICOLI (assets/includes/media.php: ilf_foto_figura)
   <figure> con foto reale, didascalia e credito visibile; le foto in verticale restano strette e centrate.
───────────────────────────────────────── */
.ilf-figura { margin: var(--space-xl, 2rem) 0; }
.ilf-figura img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg, 12px);
  background: var(--color-bg-warm, #FAF8F4);
}
.ilf-figura--ritratto { max-width: 340px; margin-left: auto; margin-right: auto; }
.ilf-figura__cap {
  margin-top: var(--space-xs, .5rem);
  font-size: var(--text-sm, .875rem); line-height: 1.5;
  color: var(--color-text-2, #4a5560);
}
.ilf-figura__credit { display: block; margin-top: 2px; font-size: 11px; color: var(--color-text-3, #6b7680); }


/* ═══════════════════════════════════════════
   BANNER COOKIE | Consent Mode v2 (14/10/2026)
   Fisso in basso, non blocca la pagina. Bianco Soft su Verde Bosco.
═══════════════════════════════════════════ */
.ilf-cc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
  padding: var(--space-sm);
  pointer-events: none;
}
.ilf-cc[hidden] { display: none; }
.ilf-cc__box {
  pointer-events: auto;
  max-width: 60rem; margin: 0 auto;
  background: var(--ilf-bianco-soft); color: var(--ilf-testo);
  border: 1px solid var(--ilf-grigio-pietra); border-top: 4px solid var(--ilf-verde-bosco);
  border-radius: var(--radius-lg);
  box-shadow: 0 -4px 32px rgba(16,74,50,.22);
  padding: var(--space-md) var(--space-lg);
  max-height: calc(100vh - 1.5rem); overflow-y: auto;
}
.ilf-cc__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); line-height: 1.25;
  color: var(--ilf-verde-bosco); margin-bottom: var(--space-xs);
}
.ilf-cc__title:focus { outline: none; }
.ilf-cc__text { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-2); margin-bottom: var(--space-md); }
.ilf-cc__text a { color: var(--ilf-verde-formello); text-decoration: underline; }
.ilf-cc__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.ilf-cc__btn {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  padding: .65rem 1.3rem; border-radius: var(--radius-pill);
  border: 2px solid var(--ilf-verde-bosco); cursor: pointer;
  transition: background .2s, color .2s;
  flex: 1 1 9rem; text-align: center;
}
@media (min-width: 40rem) { .ilf-cc__btn { flex: 0 0 auto; } }
.ilf-cc__btn--solid { background: var(--ilf-verde-bosco); color: var(--ilf-bianco-soft); }
.ilf-cc__btn--solid:hover { background: var(--ilf-verde-formello); border-color: var(--ilf-verde-formello); }
.ilf-cc__btn--line { background: transparent; color: var(--ilf-verde-bosco); }
.ilf-cc__btn--line:hover { background: var(--ilf-verde-bosco); color: var(--ilf-bianco-soft); }
.ilf-cc__btn:focus-visible,
.ilf-cc__switch:focus-visible,
.footer__linkbtn:focus-visible,
.ilf-form__btn:focus-visible {
  outline: 3px solid #DAA520; outline-offset: 2px;
}
.ilf-cc__fieldset { border: 0; margin: 0 0 var(--space-md); padding: 0; min-width: 0; }
.ilf-cc__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ilf-cc__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: .7rem 0; border-bottom: 1px solid var(--ilf-grigio-pietra);
}
.ilf-cc__row:last-child { border-bottom: 0; }
.ilf-cc__row-label { font-weight: 700; font-size: var(--text-sm); color: var(--ilf-testo); cursor: pointer; }
.ilf-cc__row-text p { font-size: var(--text-xs); color: var(--color-text-2); line-height: 1.55; margin-top: .15rem; }
.ilf-cc__switch {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 2.8rem; height: 1.55rem; border-radius: var(--radius-pill);
  background: #8A958E; position: relative; cursor: pointer; transition: background .2s;
}
.ilf-cc__switch::after {
  content: ""; position: absolute; top: .2rem; left: .2rem;
  width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #fff; transition: transform .2s;
}
.ilf-cc__switch:checked { background: var(--ilf-verde-formello); }
.ilf-cc__switch:checked::after { transform: translateX(1.25rem); }
.ilf-cc__switch:disabled { opacity: .6; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .ilf-cc__btn, .ilf-cc__switch, .ilf-cc__switch::after { transition: none; }
}
/* Spazio in fondo alla pagina finché il banner è aperto, così non copre il footer */
html.ilf-cc-open body { padding-bottom: 14rem; }
@media (min-width: 40rem) { html.ilf-cc-open body { padding-bottom: 9rem; } }

/* Pulsante "Gestisci i cookie" nel footer: aspetto da link */
.footer__linkbtn {
  font: inherit; font-size: var(--text-sm); color: rgba(255,255,255,.78);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  text-decoration: underline; text-underline-offset: 3px; transition: color .2s;
}
.footer__legal .footer__linkbtn { font-size: inherit; color: rgba(255,255,255,.72); }
.footer__linkbtn:hover { color: #fff; }


/* ═══════════════════════════════════════════
   FORM (contatti, partner): consenso, stati, messaggi
═══════════════════════════════════════════ */
.ilf-form__consent {
  display: flex; align-items: flex-start; gap: .65rem;
  margin: var(--space-md) 0;
  font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-2);
}
.ilf-form__consent input[type="checkbox"] {
  flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .2rem;
  accent-color: var(--ilf-verde-formello);
}
.ilf-form__consent a { color: var(--ilf-verde-formello); text-decoration: underline; }
.ilf-form__btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.ilf-form__msg {
  margin-top: var(--space-md); padding: .85rem 1.1rem;
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-size: var(--text-sm); line-height: 1.6;
}
.ilf-form__msg[hidden] { display: none; }
.ilf-form__msg--ok  { background: #E6F2EA; border-color: #A8CDB5; color: #0E3F29; }
.ilf-form__msg--err { background: #FBEAE7; border-color: #E8B4AC; color: #7A1A10; }
.ilf-form__recaptcha { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-text-3); line-height: 1.5; }
.ilf-form__recaptcha a { text-decoration: underline; }
.ilf-form__field-err { display: block; margin-top: .3rem; font-size: var(--text-xs); color: var(--state-error); }
.ilf-form [aria-invalid="true"] { border-color: var(--state-error) !important; }

/* Newsletter non ancora attiva: invito onesto al posto del modulo */
.newsletter__soon {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
  margin-top: var(--space-md);
}
.newsletter__soon-text { color: rgba(255,255,255,.9); font-size: var(--text-md); font-weight: 600; }
.newsletter__soon .btn { border-radius: var(--radius-pill); }
.newsletter-section .newsletter__soon { max-width: 460px; margin-inline: auto; }


/* ═══════════════════════════════════════════
   MAPPE | gestione del tocco (assets/js/ilf-mappa.js)
   Su touch la mappa non cattura lo scroll: un dito scorre la pagina,
   due dita muovono/zoomano la mappa, un tocco la attiva.
═══════════════════════════════════════════ */
.ilf-map--guarded { position: relative; }
/* le mappe restano sotto header, barra azioni e banner cookie (i controlli Leaflet hanno z-index fino a 1000) */
.leaflet-container { z-index: 0; isolation: isolate; }
.ilf-map-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 800;
  max-width: calc(100% - 24px); padding: .3rem .75rem;
  background: rgba(16,74,50,.88); color: #fff;
  font-family: var(--font-nav); font-size: .72rem; line-height: 1.3; text-align: center;
  border-radius: var(--radius-pill); pointer-events: none;
  transition: opacity .25s;
}
.ilf-map--guarded.is-attiva .ilf-map-hint { opacity: 0; }
.leaflet-popup-content { font-family: var(--font-body); font-size: .9rem; line-height: 1.45; }
.leaflet-popup-content a { min-height: 24px; }
@media (max-width: 767.98px) {
  .leaflet-popup-content { margin: 12px 14px; }
  .leaflet-container .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; }
}

/* ═══════════════════════════════════════════
   BANNER COOKIE su mobile (< 768px): compatto, circa 2 righe di testo,
   "Accetta" e "Solo necessari" affiancati, "Personalizza" come link.
   Il pannello Personalizza si apre a parte, come foglio dal basso.
═══════════════════════════════════════════ */
.ilf-cc__short { display: none; }
@media (max-width: 767.98px) {
  .ilf-cc { padding: .4rem; }
  .ilf-cc__box { padding: .65rem .8rem .5rem; border-top-width: 3px; max-height: 30vh; }
  .ilf-cc__long { display: none; }
  .ilf-cc__short { display: inline; }
  .ilf-cc [data-cc-view="main"] .ilf-cc__title {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .ilf-cc [data-cc-view="main"] .ilf-cc__text { font-size: .8rem; line-height: 1.4; margin-bottom: .5rem; }
  .ilf-cc [data-cc-view="main"] .ilf-cc__actions { gap: .4rem; align-items: center; }
  .ilf-cc [data-cc-view="main"] .ilf-cc__btn { flex: 1 1 0; min-width: 0; padding: .5rem .4rem; font-size: .8rem; }
  .ilf-cc [data-cc-view="main"] .ilf-cc__btn--line {
    flex: 1 0 100%; border: 0; padding: .25rem 0 .1rem; min-height: 32px;
    text-decoration: underline; background: transparent;
  }
  /* Pannello Personalizza: foglio a parte, con sfondo scuro dietro */
  .ilf-cc.ilf-cc--prefs:not([hidden]) { top: 0; display: flex; align-items: flex-end; background: rgba(0,0,0,.45); pointer-events: auto; }
  .ilf-cc.ilf-cc--prefs .ilf-cc__box { width: 100%; max-height: 85vh; }
  html.ilf-cc-open body { padding-bottom: 8.5rem; }
}


/* ═══════════════════════════════════════════
   FOTO DELLE ATTIVITÀ (assets/includes/foto-attivita.php)
   Prima stampato inline da ilf_foto_stile() una volta per pagina; dal 15/10/2026 sta qui.
═══════════════════════════════════════════ */
.ilf-card-thumb--compatto { aspect-ratio: auto; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(23,102,65,.08); }
.ilf-card-thumb--compatto .ph-icon { width: 26px; height: 26px; color: var(--cat-turismo); }
.ilf-card-thumb--enogastronomia { background: color-mix(in srgb, var(--cat-enogastronomia) 10%, transparent); }
.ilf-card-thumb--enogastronomia .ph-icon { color: var(--cat-enogastronomia); }
.ilf-card-thumb--ricettivita { background: color-mix(in srgb, var(--cat-ricettivita) 16%, transparent); }
.ilf-card-thumb--ricettivita .ph-icon { color: var(--terra); }
.ilf-card-thumb--servizi { background: color-mix(in srgb, var(--cat-servizi) 10%, transparent); }
.ilf-card-thumb--servizi .ph-icon { color: var(--cat-servizi); }
.luoghi-card__photo--compatto { height: 56px; }
.luoghi-card__photo--compatto .ph-icon { width: 26px; height: 26px; }
.luoghi-card__photo--compatto .luoghi-card__badge { top: 50%; transform: translateY(-50%); }
.ilf-striscia__cap {
  position: absolute; left: 6px; top: 6px; max-width: calc(100% - 12px);
  font-size: 12px; line-height: 1.3; color: #fff; background: rgba(0,0,0,.6);
  padding: 2px 7px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ilf-foto-nota { position: absolute; left: 12px; bottom: 8px; z-index: 4; max-width: calc(100% - 24px); margin: 0; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.92); }
.ilf-hero-cap { position: absolute; left: 12px; bottom: 8px; z-index: 4; max-width: 55%; margin: 0; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.92); text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* Icone usate dalle schede attività e prima non definite (comparivano come quadratini pieni) */
.ph-phone           { -webkit-mask-image: url('../icons/phone.svg');            mask-image: url('../icons/phone.svg'); }
.ph-envelope-simple { -webkit-mask-image: url('../icons/envelope-simple.svg');  mask-image: url('../icons/envelope-simple.svg'); }
.ph-globe           { -webkit-mask-image: url('../icons/globe.svg');            mask-image: url('../icons/globe.svg'); }
.ph-clock           { -webkit-mask-image: url('../icons/clock.svg');            mask-image: url('../icons/clock.svg'); }
.ph-identification-card { -webkit-mask-image: url('../icons/identification-card.svg'); mask-image: url('../icons/identification-card.svg'); }
.ph-map-trifold     { -webkit-mask-image: url('../icons/map-trifold.svg');      mask-image: url('../icons/map-trifold.svg'); }
.ph-arrow-left      { -webkit-mask-image: url('../icons/arrow-left.svg');       mask-image: url('../icons/arrow-left.svg'); }
.ph-factory         { -webkit-mask-image: url('../icons/factory.svg');          mask-image: url('../icons/factory.svg'); }
.ph-address-book { -webkit-mask-image: url('../icons/address-book.svg'); mask-image: url('../icons/address-book.svg'); }
.ph-seal-check { -webkit-mask-image: url('../icons/seal-check.svg'); mask-image: url('../icons/seal-check.svg'); }
.ph-shield-check { -webkit-mask-image: url('../icons/shield-check.svg'); mask-image: url('../icons/shield-check.svg'); }
.ph-camera { -webkit-mask-image: url('../icons/camera.svg'); mask-image: url('../icons/camera.svg'); }
.ph-info { -webkit-mask-image: url('../icons/info.svg'); mask-image: url('../icons/info.svg'); }
.ph-arrow-right { -webkit-mask-image: url('../icons/arrow-right.svg'); mask-image: url('../icons/arrow-right.svg'); }
.ph-briefcase { -webkit-mask-image: url('../icons/briefcase.svg'); mask-image: url('../icons/briefcase.svg'); }
.ph-linkedin-logo   { -webkit-mask-image: url('../icons/linkedin-logo.svg');    mask-image: url('../icons/linkedin-logo.svg'); }
.ph-navigation-arrow{ -webkit-mask-image: url('../icons/navigation-arrow.svg'); mask-image: url('../icons/navigation-arrow.svg'); }
.ph-x               { -webkit-mask-image: url('../icons/x.svg');                mask-image: url('../icons/x.svg'); }
.ph-list            { -webkit-mask-image: url('../icons/list.svg');             mask-image: url('../icons/list.svg'); }


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE FIRST | revisione 15/10/2026
   Strato unico che corregge il comportamento su smartphone (375-414px) e
   tablet senza toccare l'aspetto desktop. Le regole valgono per tutte le
   pagine; dove le pagine hanno CSS interno con la stessa specificità, qui
   si usa un selettore un po' più specifico (html ...) invece di !important.
═══════════════════════════════════════════════════════════════════════ */

/* ─── Base: ancore sotto l'header, focus visibile, niente zoom del testo in orizzontale ─── */
html { scroll-padding-top: calc(var(--hdr-h) + .75rem); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (min-width: 48.01rem) { html { scroll-padding-top: 5rem; } }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ilf-terracotta); outline-offset: 2px; border-radius: 4px;
}
:where(.section--dark, .section--dark2, .footer, .hero, .newsletter, .newsletter-section, .cta-partner,
  [class*="-hero"], .blog-section, .news-section) :where(a, button, input, summary, [tabindex]):focus-visible {
  outline-color: #F2C46D;
}
.ilf-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;
}
.section-label { letter-spacing: .12em; }
p, li, dd { overflow-wrap: break-word; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }

/* ─── Pulsanti: area di tocco di almeno 44px ─── */
.btn { min-height: 44px; line-height: 1.25; text-align: center; }
.btn--sm { min-height: 44px; }

/* ─── Header compatto su smartphone ─── */
.nav-sub-toggle { display: none; }   /* pulsante dei sottomenu: solo nel menu a tutto schermo */
@media (max-width: 48rem) {
  .hdr-bar__inner { min-height: var(--hdr-h); padding: 0 .5rem 0 var(--space-md); justify-content: space-between; gap: .5rem; }
  .hdr-bar__logo { min-height: 44px; align-items: center; }
  .hdr-bar__logo-img { width: 34px; height: 34px; }
  .ilf-wordmark--sm .ilf-wordmark__text { font-size: 1.2rem; }
  .hdr-bar__hamburger {
    margin-left: auto; min-width: 44px; min-height: 44px; padding: 0 .55rem;
    gap: .4rem; border-radius: var(--radius-pill); color: var(--ilf-verde-bosco);
    font-family: var(--font-nav); font-size: .875rem; font-weight: 700; letter-spacing: .04em;
  }
  .hdr-bar__hamburger[aria-expanded="true"] { background: var(--color-bg-warm); }
  .hdr-bar__menu-txt { line-height: 1; }

  /* Menu a tutto schermo sotto la barra */
  .hdr-bar__nav.nav--open {
    position: fixed; top: var(--hdr-h); left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    width: auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    background: var(--color-surface); border-top: 1px solid var(--color-border);
    padding: .5rem 0 calc(2rem + env(safe-area-inset-bottom)); box-shadow: none;
  }
  .hdr-bar__nav.nav--open .nav-item { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--color-border); }
  .hdr-bar__nav.nav--open .hdr-bar__nav-link {
    flex: 1 1 0; width: auto; min-width: 0; min-height: 52px; padding: .75rem var(--space-md) .75rem var(--space-lg);
    font-size: 1rem; letter-spacing: .04em; border-bottom: 0;
  }
  .hdr-bar__nav.nav--open .hdr-bar__nav-link.active { color: var(--verde); box-shadow: inset 4px 0 0 var(--rosso); }
  .hdr-bar__nav.nav--open .nav-sub-toggle {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 52px; min-height: 52px; color: var(--color-text-2);
    border-left: 1px solid var(--color-border);
  }
  .hdr-bar__nav.nav--open .nav-sub-toggle .nav-chevron { display: inline-block; width: 1rem; height: 1rem; margin: 0; }
  .nav-sub-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
  .hdr-bar__nav.nav--open .nav-item__dropdown {
    display: none; flex: 1 0 100%; position: static; opacity: 1; pointer-events: auto; transform: none;
    box-shadow: none; border: 0; border-radius: 0; background: var(--color-bg-warm); padding: .25rem 0 .5rem;
  }
  .hdr-bar__nav.nav--open .nav-item.is-sub-open .nav-item__dropdown { display: block; }
  .hdr-bar__nav.nav--open .nav-item__dropdown-link {
    display: flex; align-items: center; min-height: 48px; white-space: normal;
    padding: .6rem var(--space-lg) .6rem calc(var(--space-lg) + .75rem);
    font-size: .9375rem; text-transform: none; letter-spacing: 0; color: var(--color-text);
  }
  .hdr-bar__nav.nav--open .nav-item--cta { width: auto; margin: var(--space-md) var(--space-lg) 0; border-bottom: 0; }
  .hdr-bar__nav.nav--open .hdr-bar__nav-cta {
    flex: 1 1 auto; width: 100%; justify-content: center; min-height: 52px; font-size: 1rem; border-radius: var(--radius-pill); padding: .75rem 1rem;
  }
  html.ilf-menu-open, html.ilf-menu-open body { overflow: hidden; }
}

/* ─── Breadcrumb: voci toccabili, una riga che scorre se lunga ─── */
.breadcrumb { padding: 0; }
.breadcrumb__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.breadcrumb__list::-webkit-scrollbar { display: none; }
.breadcrumb__link, .breadcrumb__current { font-size: .875rem; min-height: 44px; display: inline-flex; align-items: center; }
.breadcrumb__sep { font-size: .875rem; }
.breadcrumb__current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }

/* ─── Hero: altezza ragionevole, testo leggibile, CTA impilate, credito che non copre il testo ─── */
@media (max-width: 47.99rem) {
  html .hero { height: auto; min-height: min(78svh, 40rem); padding: 4.5rem 0 3.5rem; }
  html .hero__overlay { background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.7) 100%); }
  html .hero__title { font-size: clamp(2.6rem, 11vw, 3.4rem); margin-bottom: var(--space-md); }
  html .hero__label { font-size: .875rem; letter-spacing: .12em; color: rgba(255,255,255,.9); }
  html .hero__subtitle { font-size: 1.0625rem; line-height: 1.6; color: #fff; margin-bottom: var(--space-xl); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
  html .hero__scroll { display: none; }
  /* testate interne centrate: altezza dal contenuto, spazio sopra per il credito e sotto per la didascalia */
  html :is(.eno-hero, .srv-hero, .ric-hero, .tur-hero, .imm-hero, .bl-hero, .cs-hero, .ct-hero, .lg-hero, .pg-hero, .ph-hero, .pt-hero, .territorio-hero) {
    height: auto; min-height: 21rem; padding: 3.25rem 0 3rem;
  }
  html :is(.eno-hero, .srv-hero, .ric-hero, .tur-hero, .imm-hero, .bl-hero, .cs-hero, .ct-hero, .lg-hero, .pg-hero, .ph-hero, .pt-hero, .territorio-hero) [class$="__title"] {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
  html :is(.eno-hero, .srv-hero, .ric-hero, .tur-hero, .imm-hero) [class$="__subtitle"] { margin-bottom: var(--space-lg); }
  /* tutte le testate interne */
  [class*="-hero__subtitle"] { color: rgba(255,255,255,.95) !important; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
  [class*="-hero__label"] { letter-spacing: .12em !important; font-size: .875rem !important; }
  /* gruppi di pulsanti: a tutta larghezza, impilati */
  .hero__cta-group, [class*="-hero__cta"], .hero__buttons, .macro__cta-row, .partner-cta__actions,
  .cta-partner__cta-group, .err404__actions {
    flex-direction: column; align-items: stretch; width: 100%; max-width: 24rem; margin-inline: auto; gap: .75rem;
  }
  .hero__cta-group .btn, [class*="-hero__cta"] .btn, .hero__buttons .btn, .macro__cta-row .btn,
  .partner-cta__actions .btn, .cta-partner__cta-group .btn, .err404__actions .btn {
    width: 100%; margin-left: 0 !important; padding-left: 1.25rem; padding-right: 1.25rem;
  }
  html .btn--lg { padding-top: .9rem; padding-bottom: .9rem; font-size: 1rem; }
  /* il credito della foto di testata va in alto a destra: in basso c'è il titolo */
  [class*="hero__bg"] > .ilf-credit, .hero__bg > .ilf-credit {
    top: 0; bottom: auto; left: 0; right: 0; max-width: none; border-radius: 0;
    text-align: left; padding: 3px var(--space-md); background: rgba(16,74,50,.78);
  }
}

/* ─── Crediti foto: leggibili ma discreti ─── */
.ilf-credit, .ilf-striscia__credit { font-size: 11px; }

/* ─── Sezioni: meno aria verticale su smartphone ─── */
@media (max-width: 37.49rem) {
  .section__header { margin-bottom: var(--space-xl); }
  .section__desc, .section__header p { font-size: 1rem; }
  .section__header, .esplora-section .section__header { text-align: center; }
  .wave-divider svg { height: 36px; }
}

/* ─── Statistiche: 2x2 su smartphone, numeri leggibili ─── */
@media (max-width: 48rem) {
  .macro__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .macro__stat { padding: var(--space-md) .5rem; border-right: 1px solid var(--color-border); border-top: 0; }
  .macro__stat:nth-child(2n) { border-right: none; }
  .macro__stat:nth-child(n+3) { border-top: 1px solid var(--color-border); }
  .macro__stat-label { font-size: .875rem; letter-spacing: .04em; }
}
.macro__stat-label { font-size: .875rem; }

/* ─── Card di sezione (home "Esplora"): una riga per voce con miniatura a sinistra ─── */
@media (max-width: 37.49rem) {
  .sezioni__grid { grid-template-columns: 1fr; gap: .75rem; }
  .sezione-card {
    display: grid; grid-template-columns: 6.5rem 1fr; grid-template-rows: auto 1fr;
    column-gap: var(--space-md); align-items: center; text-align: left;
    padding: 0; min-height: 5.5rem;
  }
  .sezione-card > .ilf-card-thumb {
    grid-row: 1 / 3; margin: 0 !important; height: 100%; aspect-ratio: auto; min-height: 5.5rem;
  }
  .sezione-card > .ilf-card-thumb .ilf-credit { display: none; }
  .sezione-card > .ilf-card-thumb + .sezione-card__title { margin-top: 0; }
  .sezione-card__title { align-self: end; padding-top: .75rem; margin-bottom: .15rem; font-size: 1.0625rem; }
  .sezione-card__desc { align-self: start; padding: 0 .75rem .75rem 0; font-size: .875rem; line-height: 1.45; }
  .sezione-card__icon-wrap { display: none; }
  .sezione-card:hover { transform: none; }
}
/* il credito delle miniature "Esplora" su smartphone: ripetuto in fondo alla sezione */
.ilf-crediti-sezione { display: none; }
@media (max-width: 37.49rem) {
  .ilf-crediti-sezione { display: block; margin-top: var(--space-sm); font-size: .75rem; line-height: 1.4; color: var(--color-text-3); text-align: center; }
}

/* ─── Feature card (.fc): su smartphone niente icona sotto la foto, testo allineato a sinistra ─── */
@media (max-width: 37.49rem) {
  .feature-cards { gap: var(--space-md); }
  .fc { padding: var(--space-lg) var(--space-md); align-items: flex-start; text-align: left; gap: .75rem; }
  .fc > .ilf-card-thumb { margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-md)) .25rem !important; }
  .fc > .ilf-card-thumb + .fc-icon { display: none; }
  .fc p { font-size: .9375rem; }
  .fc .btn { align-self: stretch; }
  .macro__cards .fc h3 { font-size: 1.3rem; }
}

/* ─── Feature card con link nel titolo: tutta la card cliccabile ─── */
.fc--link { position: relative; }
.fc--link h3 a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
.fc--link h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fc--link:hover h3 a { color: var(--verde); }

/* ─── Card con foto (luoghi, blog, news): tutta la card cliccabile, testi leggibili ─── */
.luoghi-card, .art-card, .news-card, .evento-card { position: relative; }
.luoghi-card__link, .art-card__read, .news-card__read, .evento-card__link, .spotlight-side-card__link {
  min-height: 44px; display: inline-flex; align-items: center;
}
.luoghi-card__link::after, .evento-card__link::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
}
.luoghi-card__zona { font-size: .875rem; letter-spacing: .08em; }
.luoghi-card__tagline { font-size: .9375rem; }
.luoghi-card__link { font-size: .875rem; }
.luoghi-card__badge { font-size: .875rem; color: #fff; }
/* testo di legenda e filtri: varianti scure della stessa palette (contrasto AA sul fondo tinto) */
.luoghi-card__badge--turismo { background: var(--cat-turismo); }
.luoghi-card__badge--servizi { background: var(--cat-servizi); }
.mappa-legend__item--turismo { color: var(--ilf-verde-bosco); }
.mappa-legend__item--enogastronomia { color: var(--state-error); }
.mappa-filter-pill--turismo { color: var(--ilf-verde-bosco); }
.err404__code { color: #5E9A70; }   /* numero decorativo grande: almeno 3:1 */
.breadcrumb__link { min-width: 44px; justify-content: center; }
/* elenchi di soli link nel contenuto (indici, fonti): area di tocco più alta */
:where(main li > a:only-child) { display: inline; padding-block: .75rem; }   /* area di tocco più alta senza mandare a capo il link quando sta dentro una frase */
.luoghi-card__badge--ricettivita { background: var(--cat-ricettivita); color: var(--ilf-testo); }
.luoghi-card__photo { height: auto; aspect-ratio: 3 / 2; }
.luoghi-card__photo--compatto { aspect-ratio: auto; }
.mappa-legend__item { font-size: .875rem; min-height: 32px; }
.mappa-legend__item--ricettivita { color: var(--state-warning); }
.mappa-attribution { font-size: .875rem; }
.mappa-filter-pill { min-height: 44px; }
.mappa-filter-pill--ricettivita { color: var(--state-warning); }
.mappa-filter-pill--ricettivita.is-active { color: var(--ilf-testo); }

/* ─── Caroselli orizzontali su smartphone (liste lunghe in home): scroll-snap, niente JS ─── */
@media (max-width: 37.49rem) {
  .ilf-scroller {
    display: flex !important; gap: var(--space-sm) !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--space-md)); padding: .25rem var(--space-md) 1rem !important;
    scroll-padding-inline: var(--space-md); scrollbar-width: thin;
  }
  .ilf-scroller > * { flex: 0 0 84%; scroll-snap-align: start; min-width: 0; }
  .ilf-scroller > * > .luoghi-card { height: 100%; }
  .ilf-scroller-nota { display: block; margin: -.25rem 0 0; font-size: .875rem; color: var(--color-text-3); text-align: right; }
  .section--dark .ilf-scroller-nota, .section--dark2 .ilf-scroller-nota { color: rgba(255,255,255,.8); }
  .ilf-scroller:focus-visible { outline-offset: -3px; }
}
@media (min-width: 37.5rem) { .ilf-scroller-nota { display: none; } }

/* ─── Elenchi compatti su smartphone (.ilf-righe): card con miniatura a sinistra e testo a destra.
   La miniatura (.ilf-card-thumb) si "scioglie" nella griglia: la foto occupa la colonna sinistra e il
   credito finisce sotto il testo, leggibile invece che schiacciato sulla foto piccola. ─── */
@media (max-width: 37.49rem) {
  .ilf-righe { grid-template-columns: 1fr !important; gap: .6rem !important; }
  .ilf-righe > * {
    display: grid !important; grid-template-columns: 6.5rem 1fr; grid-template-rows: 1fr auto;
    column-gap: .9rem; align-items: center; min-height: 5.75rem;
  }
  .ilf-righe > * > .bl-card__top { display: none; }
  .ilf-righe > * { border-left: 4px solid var(--bl-accent, var(--verde)) !important; }
  .ilf-righe .ilf-card-thumb { display: contents; }
  .ilf-righe .ilf-card-thumb img { grid-column: 1; grid-row: 1 / 3; width: 100%; height: 100%; min-height: 5.75rem; object-fit: cover; }
  .ilf-righe .ilf-card-thumb .ilf-credit {
    grid-column: 2; grid-row: 2; position: static; max-width: none; background: none; color: var(--color-text-3);
    text-align: left; padding: 0 .75rem .55rem 0; font-size: 12px; line-height: 1.35;
  }
  .ilf-righe > * > :not(.ilf-card-thumb):not(.bl-card__top) { grid-column: 2; grid-row: 1; padding: .7rem .75rem .35rem 0; gap: .2rem; }
  .ilf-righe .bl-card__title { font-size: 1.0625rem; }
  .ilf-righe > *:hover { transform: none; }
}

/* ─── Elenco luoghi della mappa (territorio) su smartphone: righe compatte con miniatura ─── */
@media (max-width: 37.49rem) {
  .luoghi-grid--righe { gap: .6rem; }
  .luoghi-grid--righe .luoghi-card {
    display: grid; grid-template-columns: 6.25rem 1fr; grid-template-rows: auto 1fr auto;
    column-gap: .9rem; min-height: 6rem;
  }
  .luoghi-grid--righe .luoghi-card__photo:not(.luoghi-card__photo--compatto) { display: contents; }
  .luoghi-grid--righe .luoghi-card__photo > img { grid-column: 1; grid-row: 1 / 4; width: 100%; height: 100%; min-height: 6rem; object-fit: cover; }
  .luoghi-grid--righe .luoghi-card__photo--compatto { grid-column: 1; grid-row: 1 / 4; height: auto; aspect-ratio: auto; }
  .luoghi-grid--righe .luoghi-card__photo--compatto .luoghi-card__badge { display: none; }
  .luoghi-grid--righe .luoghi-card__badge {
    grid-column: 2; grid-row: 1; position: static; justify-self: start; margin-top: .65rem; transform: none;
  }
  .luoghi-grid--righe .luoghi-card__photo--compatto ~ .luoghi-card__body { grid-row: 1 / 3; }
  .luoghi-grid--righe .luoghi-card__body { grid-column: 2; grid-row: 2; padding: .4rem .75rem .5rem 0; align-self: center; }
  .luoghi-grid--righe .luoghi-card__tagline { margin-bottom: .25rem; font-size: .875rem; line-height: 1.45; }
  .luoghi-grid--righe .luoghi-card__photo .ilf-credit {
    grid-column: 2; grid-row: 3; position: static; max-width: none; background: none; color: var(--color-text-3);
    text-align: left; padding: 0 .75rem .55rem 0; font-size: 12px; line-height: 1.35;
  }
  .luoghi-grid--righe .luoghi-card:hover { transform: none; }
}

/* ─── Gruppi comprimibili (JS in ilf-main.js) e card di directory interamente cliccabili ─── */
.ilf-gruppo-toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 52px; padding: .25rem 0; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.ilf-gruppo-toggle .nav-chevron { width: .9rem; height: .9rem; margin-left: auto; transition: transform .2s; }
.ilf-gruppo-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.ilf-gruppo--chiuso > :not(h2):not(h3) { display: none !important; }
@media (max-width: 37.49rem) {
  [data-ilf-gruppo] { margin-top: 0 !important; }
  [data-ilf-gruppo] > h3 { margin-bottom: 0 !important; padding-bottom: 0 !important; font-size: 1.2rem !important; }
  [data-ilf-gruppo]:not(.ilf-gruppo--chiuso) > h3 { margin-bottom: var(--space-sm) !important; }
}

/* ─── Statistiche e numeri utili ─── */
.numeri-list__label { font-size: .875rem; }
.numeri-list__num { font-size: 1rem; display: inline-flex; align-items: center; min-height: 44px; }
.numeri-list { gap: .15rem; }
.numeri-card__title { font-size: 1rem; }
.meteo-detail__lbl { font-size: .875rem; }
.meteo-card__link { min-height: 44px; display: inline-flex; align-items: center; font-size: .9375rem; }
@media (max-width: 37.49rem) {
  .meteo-card { padding: var(--space-lg) var(--space-md); }
  .meteo-card__details { gap: var(--space-md) var(--space-lg); }
  .numeri-card { padding: var(--space-md); }
}

/* ─── Eventi ─── */
.evento-card__cat, .evento-card__luogo, .evento-card__tagline, .evento-card__link, .evento-card__dow { font-size: .875rem; }
.evento-card__mon { font-size: .9375rem; }

/* ─── Spotlight ─── */
.spotlight-badge { font-size: .875rem; }
.spotlight-side-card__sub, .spotlight-side-card__link { font-size: .875rem; }

/* ─── Striscia foto ─── */
@media (max-width: 767px) {
  .ilf-striscia { grid-auto-columns: 78%; height: clamp(170px, 48vw, 220px); scroll-padding-inline: var(--space-md); }
}

/* ─── FAQ (details/summary e accordion .faq__item) ─── */
:where(.post__faq, .pillar-faq, .faq, [class*="faq"]) summary {
  display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: .5rem 0; cursor: pointer;
}
.faq__question { min-height: 48px; width: 100%; text-align: left; }

/* ─── Articoli: larghezza di lettura, indice comprimibile, figure, tabelle ─── */
.post__wrap, .pillar-body { overflow-wrap: break-word; }
.post__toc li, .pillar-toc li { font-size: 1rem; }
.post__toc a, .pillar-toc a { display: inline-block; padding: .15rem 0; }
@media (pointer: coarse), (max-width: 48rem) { .post__toc a, .pillar-toc a { display: block; padding: .7rem 0; } .post__toc li, .pillar-toc li { margin-bottom: 0; } }
.ilf-toc-toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 48px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--verde-dk);
}
.ilf-toc-toggle .nav-chevron { width: .8rem; height: .8rem; transition: transform .2s; }
.ilf-toc-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.ilf-toc--chiuso > ol, .ilf-toc--chiuso > ul { display: none; }
@media (max-width: 37.49rem) {
  html .post__toc, html .pillar-toc { padding: .25rem var(--space-md) .5rem; margin: var(--space-lg) 0; }
  html .post { padding: var(--space-xl) 0; }
  html .post__wrap p, html .post__wrap li, html .pillar-body p, html .pillar-body li { font-size: 1.0625rem; line-height: 1.7; }
  html .post__lead, html .pillar-body .lead { font-size: 1.125rem; line-height: 1.6; margin-bottom: var(--space-lg); }
  html .post__wrap h2, html .pillar-body h2 { margin-top: var(--space-xl); }
  html .post__card, html .pillar-box, html .pillar-card { padding: var(--space-md); }
  html .post__note { padding: var(--space-md); }
  /* figure a tutta larghezza con didascalia leggibile */
  .post__wrap .ilf-figura:not(.ilf-figura--ritratto), .pillar-body .ilf-figura:not(.ilf-figura--ritratto) {
    margin-left: calc(-1 * var(--space-md)); margin-right: calc(-1 * var(--space-md));
  }
  .post__wrap .ilf-figura:not(.ilf-figura--ritratto) img, .pillar-body .ilf-figura:not(.ilf-figura--ritratto) img { border-radius: 0; }
  .ilf-figura__cap { padding: 0 var(--space-md); font-size: .875rem; }
  html .post-hero, html .pillar-hero { height: auto; min-height: 15rem; max-height: none; }
  html .post-hero__content { padding: 4.5rem var(--space-md) var(--space-lg); }
  html .post-hero__title, html .pillar-hero__title { font-size: clamp(1.75rem, 8vw, 2.3rem); }
  .post__related { grid-template-columns: 1fr; }
  .post__related a { min-height: 48px; }
}
.ilf-figura__credit { font-size: 12px; }
.post__related span { font-size: .875rem; }
.post__card dt { font-size: .875rem; }
.ilf-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-md) 0; max-width: 100%; }
.ilf-table-scroll > table { margin: 0; min-width: 32rem; }
.ilf-table-scroll:focus-visible { outline-offset: 2px; }

/* ─── Form: campi grandi, etichette visibili ─── */
:where(.ilf-form, .ct-form, .pt-form) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
  font-size: 1rem; min-height: 48px;
}
.ilf-form__consent { font-size: .9375rem; }
.ilf-form__consent input[type="checkbox"] { width: 1.4rem; height: 1.4rem; margin-top: .1rem; }
.ilf-form__consent label { cursor: pointer; }
.ilf-form__recaptcha { font-size: .875rem; }
@media (max-width: 37.49rem) {
  .ilf-form__btn { width: 100%; }
  html .pt-form-card, html .ct-form-card { padding: var(--space-lg) var(--space-md); }
  html .pt-card { padding: var(--space-lg) var(--space-md); }
}

/* ─── Footer: colonne impilate, link con area di tocco adeguata ─── */
.footer__links { gap: 0; }
.footer__links a, .footer__links .footer__linkbtn { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: .9375rem; }
.footer__heading { margin-bottom: var(--space-sm); font-size: .875rem; }
.footer__social a { width: 44px; height: 44px; }
.footer__legal { flex-wrap: wrap; justify-content: center; gap: 0 var(--space-md); }
.footer__legal a, .footer__legal .footer__linkbtn, .footer__credit a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__bottom { font-size: .875rem; }
@media (max-width: 39.99rem) {
  .footer { padding-top: var(--space-2xl); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-md); padding-bottom: var(--space-xl); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__tagline { max-width: none; }
  .footer__bottom { padding: var(--space-lg) 0 calc(var(--space-lg) + env(safe-area-inset-bottom)); }
}

/* ─── Schede attività: barra azioni e riquadro per il titolare ─── */
.sa-actions {
  display: flex; gap: .5rem; padding: .6rem var(--space-md);
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  box-shadow: 0 4px 14px rgba(16,74,50,.08);
}
.sa-actions__inner { display: flex; gap: .5rem; width: 100%; max-width: var(--max-width); margin: 0 auto; }
.sa-actions .btn {
  flex: 1 1 0; min-width: 0; min-height: 48px; padding: .6rem .5rem; gap: .4rem;
  font-size: .875rem; letter-spacing: .03em;
}
.sa-actions .btn .ph-icon { width: 1.1rem; height: 1.1rem; }
@media (max-width: 48rem) {
  .sa-actions { position: sticky; top: var(--hdr-h); z-index: 150; }
  /* tre pulsanti in 390 px: icona sopra l'etichetta, senza maiuscolo spaziato ("Indicazioni" usciva dal bordo) */
  .sa-actions .btn { flex-direction: column; gap: .15rem; padding: .4rem .25rem; text-transform: none; letter-spacing: 0; line-height: 1.2; }
}
/* credito della foto del comune in testata: una riga; il title spiega che non è l'attività */
.sa-credit-comune { pointer-events: auto; cursor: help; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 48.01rem) {
  .sa-actions { background: transparent; border: 0; box-shadow: none; padding: var(--space-lg) 0 0; }
  .sa-actions__inner { padding: 0 var(--space-lg); }
  .sa-actions__inner { justify-content: flex-start; }
  .sa-actions .btn { flex: 0 0 auto; padding-left: 1.6rem; padding-right: 1.6rem; }
}
.sa-titolare {
  margin-top: var(--space-xl); padding: var(--space-lg);
  background: var(--azzurro-pale); border: 1px solid var(--ilf-verde-collina);
  border-radius: var(--radius-md);
}
.sa-titolare__title { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: .35rem; }
.sa-titolare p { font-size: .9375rem; line-height: 1.6; color: var(--color-text-2); margin-bottom: var(--space-md); }

/* ─── Banner cookie su smartphone: testo e pulsanti ai minimi leggibili ─── */
@media (max-width: 767.98px) {
  .ilf-cc [data-cc-view="main"] .ilf-cc__text { font-size: .875rem; }
  .ilf-cc [data-cc-view="main"] .ilf-cc__btn { font-size: .875rem; min-height: 44px; }
  .ilf-cc [data-cc-view="main"] .ilf-cc__btn--line { min-height: 44px; }
  .ilf-cc__row-text p { font-size: .875rem; }
  .ilf-cc__btn { min-height: 44px; }
}

/* ─── Movimento ridotto: niente animazioni né scorrimenti automatici ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .hero__scroll svg animate { display: none; }
}

/* ═══════════════════════════════════════════════════════
   RICERCA NEL SITO | revisione 15/10/2026
   Pulsanti .ilf-cerca-apri (header espanso, barra compatta, barra e menu su smartphone),
   pannello #ilfCerca (assets/includes/header.php), logica in assets/js/ilf-cerca.js.
   ═══════════════════════════════════════════════════════ */
.header { position: relative; }
.header__cerca {
  position: absolute; top: var(--space-md); right: var(--space-lg);
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .9rem;
  font-family: var(--font-nav); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  cursor: pointer; transition: color .2s, border-color .2s;
}
.header__cerca:hover { color: var(--verde); border-color: var(--verde); }
button.hdr-bar__action-link { background: none; border: 0; cursor: pointer; min-width: 44px; min-height: 44px; justify-content: center; border-radius: var(--radius-pill); }
.nav-item--cerca { display: none; }
.nav-cerca { background: none; border: 0; cursor: pointer; gap: .6rem; text-align: left; font: inherit; }
@media (max-width: 48rem) {
  .hdr-bar__actions { display: flex; margin-left: auto; gap: 0; }
  .hdr-bar__actions + .hdr-bar__hamburger { margin-left: 0; }
  .hdr-bar__action-link { color: var(--ilf-verde-bosco); }
  .hdr-bar__nav.nav--open .nav-item--cerca { display: flex; }
  .hdr-bar__nav.nav--open .nav-cerca {
    font-family: var(--font-nav); font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--color-text); align-items: center;
  }
}

.ilf-cerca[hidden] { display: none; }
.ilf-cerca { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-start; justify-content: center; }
.ilf-cerca__sfondo { position: absolute; inset: 0; background: rgba(16, 74, 50, .55); }
.ilf-cerca__box {
  position: relative; width: min(42rem, calc(100% - 2rem)); max-height: calc(100svh - 6rem); margin-top: 4rem;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface); border-radius: var(--radius-md); box-shadow: 0 24px 60px rgba(16, 74, 50, .25);
}
.ilf-cerca__testa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .75rem .25rem 1.25rem; }
.ilf-cerca__tit { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--ilf-verde-bosco); margin: 0; }
.ilf-cerca__chiudi {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: none; border: 0; border-radius: var(--radius-pill); color: var(--color-text-2); cursor: pointer;
}
.ilf-cerca__chiudi:hover { background: var(--color-bg-warm); color: var(--ilf-verde-bosco); }
.ilf-cerca__form { padding: 0 1.25rem; }
.ilf-cerca__label { display: block; font-size: .875rem; color: var(--color-text-2); margin-bottom: .35rem; }
.ilf-cerca__campo {
  width: 100%; min-height: 48px; padding: .7rem 1rem; font-size: 1rem; font-family: inherit; color: var(--color-text);
  background: var(--ilf-bianco-soft, #F7F8F4); border: 2px solid var(--ilf-verde-collina); border-radius: var(--radius-sm);
}
.ilf-cerca__campo:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(23, 102, 65, .2); }
.ilf-cerca__stato { margin: .6rem 1.25rem .4rem; font-size: .875rem; color: var(--color-text-2); }
.ilf-cerca__lista { list-style: none; margin: 0; padding: 0 .5rem 1rem; overflow-y: auto; overscroll-behavior: contain; }
.ilf-cerca__voce + .ilf-cerca__voce { border-top: 1px solid var(--color-border); }
.ilf-cerca__link {
  display: flex; flex-direction: column; gap: .15rem; min-height: 48px; padding: .65rem .75rem;
  text-decoration: none; color: var(--color-text); border-radius: var(--radius-sm);
}
.ilf-cerca__link:hover, .ilf-cerca__link:focus-visible { background: var(--color-bg-warm); }
.ilf-cerca__link:focus-visible { outline: 3px solid var(--terracotta, #B85E24); outline-offset: -3px; }
.ilf-cerca__titolo { font-weight: 700; color: var(--ilf-verde-bosco); line-height: 1.3; }
.ilf-cerca__meta { font-size: .875rem; color: var(--color-text-2); }
.ilf-cerca__desc { font-size: .875rem; color: var(--color-text-3); line-height: 1.45; }
html.ilf-cerca-aperta, html.ilf-cerca-aperta body { overflow: hidden; }
@media (max-width: 47.99rem) {
  .ilf-cerca__box { width: 100%; max-height: none; height: 100%; margin-top: 0; border-radius: 0; }
  .ilf-cerca__testa { padding-top: .5rem; }
}



/* ═══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM 2.2 | componenti condivisi (revisione del 15/10/2026)
   Richiesta di Valerio: tutte le pagine al livello delle schede attività.
   Regole: card bianche con angoli morbidi e ombra leggera, icona in cerchio Verde Collina,
   titoli Manrope Verde Bosco, testo 15-16 px, ritmo verticale più compatto, ancore che non
   finiscono sotto la barra fissa. Le pagine usano questi componenti al posto delle card solo testo.
   ═══════════════════════════════════════════════════════════════════════ */
html { scroll-padding-top: calc(var(--hdr-h) + 1rem); }
.section { padding-top: clamp(2.75rem, 1.5rem + 4.5vw, 6rem); padding-bottom: clamp(2.75rem, 1.5rem + 4.5vw, 6rem); }
.section__header { margin-bottom: var(--space-xl); }

/* Griglia di card: 1 colonna su smartphone, poi quante ne stanno (min 16rem) */
.ilf-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-top: var(--space-xl); }
.ilf-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* Card unificata: icona, titolo, testo, azione facoltativa */
.ilf-card {
  position: relative; display: flex; flex-direction: column; gap: .65rem;
  padding: var(--space-md) var(--space-md) calc(var(--space-md) + .25rem);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px rgba(16,74,50,.06); transition: transform .25s, box-shadow .25s, border-color .25s;
}
.ilf-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16,74,50,.12); border-color: var(--ilf-verde-collina); }
.ilf-card__ic { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--azzurro-pale); color: var(--verde); }
.ilf-card__ic .ph-icon { width: 1.6rem; height: 1.6rem; }
.ilf-card__ic--terra { background: var(--arancio-pale); color: var(--terra); }
.ilf-card__ic--scuro { background: var(--verde-dk); color: #fff; }
.ilf-card__title { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.25; color: var(--verde-dk); }
.ilf-card__text { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--color-text-2); }
.ilf-card__link { margin-top: auto; padding-top: .35rem; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 700; font-size: .9375rem; color: var(--verde); }
.ilf-card__link .ph-icon { width: 1rem; height: 1rem; transition: transform .2s; }
.ilf-card:hover .ilf-card__link .ph-icon { transform: translateX(3px); }
.ilf-card__link--tutta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* tutta la card cliccabile */
.ilf-card--riga { flex-direction: row; align-items: flex-start; gap: var(--space-sm); }

/* Passi numerati */
.ilf-passi { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: var(--space-xl); counter-reset: passo; }
.ilf-passi { list-style: none; padding: 0; margin-left: 0; margin-right: 0; }
.section__header + .ilf-grid, .section__header + .ilf-passi { margin-top: 0; }
.ilf-passo { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: var(--space-md); padding-top: calc(var(--space-md) + 3rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 2px 10px rgba(16,74,50,.06); }
.ilf-passo::before { counter-increment: passo; content: counter(passo); position: absolute; top: var(--space-md); left: var(--space-md); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--verde); color: #fff; font-family: var(--font-display); font-weight: 700; }

/* Intro a due colonne (etichetta e titolo a sinistra, testo a destra da 900 px) */
.ilf-intro { display: grid; gap: var(--space-md) var(--space-xl); }
@media (min-width: 56rem) { .ilf-intro { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.ilf-intro p { font-size: var(--text-md); line-height: 1.75; color: var(--color-text-2); }
.ilf-intro p + p { margin-top: .8rem; }

/* Focus visibile ovunque (tastiera) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; border-radius: 4px; }

/* Icone usate dai componenti 2.2 */
.ph-users-three { -webkit-mask-image: url('../icons/users-three.svg'); mask-image: url('../icons/users-three.svg'); }
.ph-handshake { -webkit-mask-image: url('../icons/handshake.svg'); mask-image: url('../icons/handshake.svg'); }
.ph-megaphone { -webkit-mask-image: url('../icons/megaphone.svg'); mask-image: url('../icons/megaphone.svg'); }
.ph-newspaper-clipping { -webkit-mask-image: url('../icons/newspaper-clipping.svg'); mask-image: url('../icons/newspaper-clipping.svg'); }
.ph-calendar-blank { -webkit-mask-image: url('../icons/calendar-blank.svg'); mask-image: url('../icons/calendar-blank.svg'); }
.ph-calendar-check { -webkit-mask-image: url('../icons/calendar-check.svg'); mask-image: url('../icons/calendar-check.svg'); }
.ph-star { -webkit-mask-image: url('../icons/star.svg'); mask-image: url('../icons/star.svg'); }
.ph-sparkle { -webkit-mask-image: url('../icons/sparkle.svg'); mask-image: url('../icons/sparkle.svg'); }
.ph-target { -webkit-mask-image: url('../icons/target.svg'); mask-image: url('../icons/target.svg'); }
.ph-trend-up { -webkit-mask-image: url('../icons/trend-up.svg'); mask-image: url('../icons/trend-up.svg'); }
.ph-chart-line-up { -webkit-mask-image: url('../icons/chart-line-up.svg'); mask-image: url('../icons/chart-line-up.svg'); }
.ph-eye { -webkit-mask-image: url('../icons/eye.svg'); mask-image: url('../icons/eye.svg'); }
.ph-tree { -webkit-mask-image: url('../icons/tree.svg'); mask-image: url('../icons/tree.svg'); }
.ph-tree-evergreen { -webkit-mask-image: url('../icons/tree-evergreen.svg'); mask-image: url('../icons/tree-evergreen.svg'); }
.ph-flower-lotus { -webkit-mask-image: url('../icons/flower-lotus.svg'); mask-image: url('../icons/flower-lotus.svg'); }
.ph-bicycle { -webkit-mask-image: url('../icons/bicycle.svg'); mask-image: url('../icons/bicycle.svg'); }
.ph-person-simple-walk { -webkit-mask-image: url('../icons/person-simple-walk.svg'); mask-image: url('../icons/person-simple-walk.svg'); }
.ph-footprints { -webkit-mask-image: url('../icons/footprints.svg'); mask-image: url('../icons/footprints.svg'); }
.ph-castle-turret { -webkit-mask-image: url('../icons/castle-turret.svg'); mask-image: url('../icons/castle-turret.svg'); }
.ph-bank { -webkit-mask-image: url('../icons/bank.svg'); mask-image: url('../icons/bank.svg'); }
.ph-books { -webkit-mask-image: url('../icons/books.svg'); mask-image: url('../icons/books.svg'); }
.ph-book-open-text { -webkit-mask-image: url('../icons/book-open-text.svg'); mask-image: url('../icons/book-open-text.svg'); }
.ph-graduation-cap { -webkit-mask-image: url('../icons/graduation-cap.svg'); mask-image: url('../icons/graduation-cap.svg'); }
.ph-student { -webkit-mask-image: url('../icons/student.svg'); mask-image: url('../icons/student.svg'); }
.ph-baby { -webkit-mask-image: url('../icons/baby.svg'); mask-image: url('../icons/baby.svg'); }
.ph-heart { -webkit-mask-image: url('../icons/heart.svg'); mask-image: url('../icons/heart.svg'); }
.ph-heartbeat { -webkit-mask-image: url('../icons/heartbeat.svg'); mask-image: url('../icons/heartbeat.svg'); }
.ph-first-aid-kit { -webkit-mask-image: url('../icons/first-aid-kit.svg'); mask-image: url('../icons/first-aid-kit.svg'); }
.ph-pill { -webkit-mask-image: url('../icons/pill.svg'); mask-image: url('../icons/pill.svg'); }
.ph-tooth { -webkit-mask-image: url('../icons/tooth.svg'); mask-image: url('../icons/tooth.svg'); }
.ph-stethoscope { -webkit-mask-image: url('../icons/stethoscope.svg'); mask-image: url('../icons/stethoscope.svg'); }
.ph-scissors { -webkit-mask-image: url('../icons/scissors.svg'); mask-image: url('../icons/scissors.svg'); }
.ph-wrench { -webkit-mask-image: url('../icons/wrench.svg'); mask-image: url('../icons/wrench.svg'); }
.ph-hammer { -webkit-mask-image: url('../icons/hammer.svg'); mask-image: url('../icons/hammer.svg'); }
.ph-car { -webkit-mask-image: url('../icons/car.svg'); mask-image: url('../icons/car.svg'); }
.ph-car-profile { -webkit-mask-image: url('../icons/car-profile.svg'); mask-image: url('../icons/car-profile.svg'); }
.ph-gas-pump { -webkit-mask-image: url('../icons/gas-pump.svg'); mask-image: url('../icons/gas-pump.svg'); }
.ph-truck { -webkit-mask-image: url('../icons/truck.svg'); mask-image: url('../icons/truck.svg'); }
.ph-lightning { -webkit-mask-image: url('../icons/lightning.svg'); mask-image: url('../icons/lightning.svg'); }
.ph-sun-horizon { -webkit-mask-image: url('../icons/sun-horizon.svg'); mask-image: url('../icons/sun-horizon.svg'); }
.ph-key { -webkit-mask-image: url('../icons/key.svg'); mask-image: url('../icons/key.svg'); }
.ph-storefront { -webkit-mask-image: url('../icons/storefront.svg'); mask-image: url('../icons/storefront.svg'); }
.ph-shopping-bag { -webkit-mask-image: url('../icons/shopping-bag.svg'); mask-image: url('../icons/shopping-bag.svg'); }
.ph-shopping-cart { -webkit-mask-image: url('../icons/shopping-cart.svg'); mask-image: url('../icons/shopping-cart.svg'); }
.ph-coffee { -webkit-mask-image: url('../icons/coffee.svg'); mask-image: url('../icons/coffee.svg'); }
.ph-wine { -webkit-mask-image: url('../icons/wine.svg'); mask-image: url('../icons/wine.svg'); }
.ph-pizza { -webkit-mask-image: url('../icons/pizza.svg'); mask-image: url('../icons/pizza.svg'); }
.ph-bread { -webkit-mask-image: url('../icons/bread.svg'); mask-image: url('../icons/bread.svg'); }
.ph-cooking-pot { -webkit-mask-image: url('../icons/cooking-pot.svg'); mask-image: url('../icons/cooking-pot.svg'); }
.ph-tent { -webkit-mask-image: url('../icons/tent.svg'); mask-image: url('../icons/tent.svg'); }
.ph-image { -webkit-mask-image: url('../icons/image.svg'); mask-image: url('../icons/image.svg'); }
.ph-images-square { -webkit-mask-image: url('../icons/images-square.svg'); mask-image: url('../icons/images-square.svg'); }
.ph-pencil-simple { -webkit-mask-image: url('../icons/pencil-simple.svg'); mask-image: url('../icons/pencil-simple.svg'); }
.ph-chat-circle-text { -webkit-mask-image: url('../icons/chat-circle-text.svg'); mask-image: url('../icons/chat-circle-text.svg'); }
.ph-chats { -webkit-mask-image: url('../icons/chats.svg'); mask-image: url('../icons/chats.svg'); }
.ph-question { -webkit-mask-image: url('../icons/question.svg'); mask-image: url('../icons/question.svg'); }
.ph-check { -webkit-mask-image: url('../icons/check.svg'); mask-image: url('../icons/check.svg'); }
.ph-check-circle { -webkit-mask-image: url('../icons/check-circle.svg'); mask-image: url('../icons/check-circle.svg'); }
.ph-lock-simple { -webkit-mask-image: url('../icons/lock-simple.svg'); mask-image: url('../icons/lock-simple.svg'); }
.ph-timer { -webkit-mask-image: url('../icons/timer.svg'); mask-image: url('../icons/timer.svg'); }
.ph-link { -webkit-mask-image: url('../icons/link.svg'); mask-image: url('../icons/link.svg'); }
.ph-arrow-up-right { -webkit-mask-image: url('../icons/arrow-up-right.svg'); mask-image: url('../icons/arrow-up-right.svg'); }
.ph-paper-plane-tilt { -webkit-mask-image: url('../icons/paper-plane-tilt.svg'); mask-image: url('../icons/paper-plane-tilt.svg'); }
.ph-list-checks { -webkit-mask-image: url('../icons/list-checks.svg'); mask-image: url('../icons/list-checks.svg'); }
.ph-lightbulb { -webkit-mask-image: url('../icons/lightbulb.svg'); mask-image: url('../icons/lightbulb.svg'); }
.ph-rocket-launch { -webkit-mask-image: url('../icons/rocket-launch.svg'); mask-image: url('../icons/rocket-launch.svg'); }
.ph-medal { -webkit-mask-image: url('../icons/medal.svg'); mask-image: url('../icons/medal.svg'); }
.ph-hand-heart { -webkit-mask-image: url('../icons/hand-heart.svg'); mask-image: url('../icons/hand-heart.svg'); }
.ph-user-circle-plus { -webkit-mask-image: url('../icons/user-circle-plus.svg'); mask-image: url('../icons/user-circle-plus.svg'); }
.ph-at { -webkit-mask-image: url('../icons/at.svg'); mask-image: url('../icons/at.svg'); }
.ph-device-mobile { -webkit-mask-image: url('../icons/device-mobile.svg'); mask-image: url('../icons/device-mobile.svg'); }
.ph-music-notes { -webkit-mask-image: url('../icons/music-notes.svg'); mask-image: url('../icons/music-notes.svg'); }
.ph-palette { -webkit-mask-image: url('../icons/palette.svg'); mask-image: url('../icons/palette.svg'); }
.ph-paw-print { -webkit-mask-image: url('../icons/paw-print.svg'); mask-image: url('../icons/paw-print.svg'); }
.ph-swimming-pool { -webkit-mask-image: url('../icons/swimming-pool.svg'); mask-image: url('../icons/swimming-pool.svg'); }
.ph-basketball { -webkit-mask-image: url('../icons/basketball.svg'); mask-image: url('../icons/basketball.svg'); }
.ph-soccer-ball { -webkit-mask-image: url('../icons/soccer-ball.svg'); mask-image: url('../icons/soccer-ball.svg'); }
.ph-barbell { -webkit-mask-image: url('../icons/barbell.svg'); mask-image: url('../icons/barbell.svg'); }
.ph-film-slate { -webkit-mask-image: url('../icons/film-slate.svg'); mask-image: url('../icons/film-slate.svg'); }
.ph-microphone { -webkit-mask-image: url('../icons/microphone.svg'); mask-image: url('../icons/microphone.svg'); }
.ph-printer { -webkit-mask-image: url('../icons/printer.svg'); mask-image: url('../icons/printer.svg'); }
.ph-laptop { -webkit-mask-image: url('../icons/laptop.svg'); mask-image: url('../icons/laptop.svg'); }
.ph-train { -webkit-mask-image: url('../icons/train.svg'); mask-image: url('../icons/train.svg'); }
.ph-airplane { -webkit-mask-image: url('../icons/airplane.svg'); mask-image: url('../icons/airplane.svg'); }
.ph-signpost { -webkit-mask-image: url('../icons/signpost.svg'); mask-image: url('../icons/signpost.svg'); }
.ph-path { -webkit-mask-image: url('../icons/path.svg'); mask-image: url('../icons/path.svg'); }
.ph-waves { -webkit-mask-image: url('../icons/waves.svg'); mask-image: url('../icons/waves.svg'); }

/* ─── Design system 2.2: correzioni comuni segnalate dalla revisione della home (15/10/2026) ─── */
/* menu e "Cerca" a 14 px (erano 13) */
.header__nav-link, .header__nav-cta, .nav-item__dropdown-link { font-size: .875rem; }
@media (min-width: 64rem) and (max-width: 80rem) { .header__nav-link { letter-spacing: .02em; padding-left: .55rem; padding-right: .55rem; } }
/* mappe: suggerimento leggibile e attribuzione con contrasto AA */
.ilf-map-hint { font-size: .875rem; }
.leaflet-control-attribution a { color: var(--verde); }
/* onde: non si disegnano sopra la sezione seguente (lasciavano un filo chiaro) */
.wave-divider { position: static; margin-bottom: -1px; }
/* card fotografiche allineate alla scheda attività: raggio grande e ombra leggera */
.luoghi-card, .blog-card { border-radius: var(--radius-lg); box-shadow: 0 2px 10px rgba(16,74,50,.06); }
.fc--verde { background: var(--azzurro-pale); }
/* "Cerca" dell'header a 14 px; fonti degli articoli: tutte le voci con la stessa altezza (non solo quelle con un link) */
.header__cerca { font-size: .875rem; }
:where(.post__sources, .pillar-sources) li a { display: inline-block; padding-block: .6rem; }   /* ogni link delle fonti alto almeno 44 px, anche quando sono due nella stessa voce */
/* Link nel testo riconoscibili senza dipendere dal colore (WCAG 1.4.1): solo i link "nudi" dentro paragrafi
   e liste del contenuto; pulsanti, card e link con una classe propria non cambiano */
:where(main p, main li, main dd, main td) > a:not([class]) { color: var(--verde); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
:where(main p, main li, main dd, main td) > a:not([class]):hover { color: var(--verde-dk); text-decoration-thickness: 2px; }
:where(.section--dark, .section--dark2, .sa-titolare, [class*="--dark"]) :where(p, li) > a:not([class]) { color: #fff; }
/* didascalie della striscia foto a 14 px (i crediti restano piccoli: sono attribuzioni) */
.ilf-striscia__cap { font-size: .875rem; }
/* su smartphone il suggerimento "Due dita" sta sopra l'attribuzione della mappa, non la copre */
@media (pointer: coarse) { .ilf-map-hint { bottom: 30px; } }

/* "Cerca" anche nello span interno; link OpenStreetMap sotto le mappe con area di tocco */
.header__cerca span { font-size: .875rem; }
.mappa-attribution a { display: inline-block; padding-block: .7rem; }
.ph-binoculars { -webkit-mask-image: url('../icons/binoculars.svg'); mask-image: url('../icons/binoculars.svg'); }
.ph-bird { -webkit-mask-image: url('../icons/bird.svg'); mask-image: url('../icons/bird.svg'); }
.ph-person-simple-hike { -webkit-mask-image: url('../icons/person-simple-hike.svg'); mask-image: url('../icons/person-simple-hike.svg'); }
.ph-scroll { -webkit-mask-image: url('../icons/scroll.svg'); mask-image: url('../icons/scroll.svg'); }
.ph-park { -webkit-mask-image: url('../icons/park.svg'); mask-image: url('../icons/park.svg'); }
.ph-cake { -webkit-mask-image: url('../icons/cake.svg'); mask-image: url('../icons/cake.svg'); }
.ph-knife { -webkit-mask-image: url('../icons/knife.svg'); mask-image: url('../icons/knife.svg'); }
.ph-barn { -webkit-mask-image: url('../icons/barn.svg'); mask-image: url('../icons/barn.svg'); }
.ph-tire { -webkit-mask-image: url('../icons/tire.svg'); mask-image: url('../icons/tire.svg'); }
.ph-washing-machine { -webkit-mask-image: url('../icons/washing-machine.svg'); mask-image: url('../icons/washing-machine.svg'); }
.ph-scales { -webkit-mask-image: url('../icons/scales.svg'); mask-image: url('../icons/scales.svg'); }
.ph-calculator { -webkit-mask-image: url('../icons/calculator.svg'); mask-image: url('../icons/calculator.svg'); }
.ph-ruler { -webkit-mask-image: url('../icons/ruler.svg'); mask-image: url('../icons/ruler.svg'); }
.ph-compass-tool { -webkit-mask-image: url('../icons/compass-tool.svg'); mask-image: url('../icons/compass-tool.svg'); }
.ph-pipe-wrench { -webkit-mask-image: url('../icons/pipe-wrench.svg'); mask-image: url('../icons/pipe-wrench.svg'); }
.ph-t-shirt { -webkit-mask-image: url('../icons/t-shirt.svg'); mask-image: url('../icons/t-shirt.svg'); }
.ph-eyeglasses { -webkit-mask-image: url('../icons/eyeglasses.svg'); mask-image: url('../icons/eyeglasses.svg'); }
.ph-diamond { -webkit-mask-image: url('../icons/diamond.svg'); mask-image: url('../icons/diamond.svg'); }
.ph-flower { -webkit-mask-image: url('../icons/flower.svg'); mask-image: url('../icons/flower.svg'); }
.ph-couch { -webkit-mask-image: url('../icons/couch.svg'); mask-image: url('../icons/couch.svg'); }
.ph-plant { -webkit-mask-image: url('../icons/plant.svg'); mask-image: url('../icons/plant.svg'); }
.ph-cheese { -webkit-mask-image: url('../icons/cheese.svg'); mask-image: url('../icons/cheese.svg'); }
/* Griglie: --2 al massimo 2 colonne (4 card = 2+2, mai 3+1), --3 al massimo 3 */
.ilf-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
@media (min-width: 60rem) { .ilf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ilf-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
@media (min-width: 64rem) { .ilf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Moduli: casella del consenso da 24 px, link della nota reCAPTCHA con area di tocco */
.ilf-form__consent input[type="checkbox"] { width: 24px; height: 24px; flex: none; }
.ilf-form__recaptcha a { display: inline-block; padding-block: .5rem; }
/* Mappe: fumetti leggibili e attribuzione con il verde del sito (il CSS di Leaflet, caricato dopo, imponeva il suo blu) */
.leaflet-container .leaflet-popup-content { font-size: .9375rem; line-height: 1.45; }
.leaflet-container .leaflet-control-attribution a { color: var(--verde-dk); }

/* ═══════════════════════════════════════════════════════════════════════
   CARD DI DIRECTORY | componente comune (spostato da servizi/_dir-card.php il 15/10/2026)
   ═══════════════════════════════════════════════════════════════════════ */
/* Card (markup da ilf_dir_card() in servizi/_dir-card.php): hub enogastronomia, ricettività, servizi, Olmetti */
.dir-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr)); }
.dir-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px rgba(16,74,50,.06); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.dir-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,74,50,.12); border-color: var(--ilf-verde-collina); }
.dir-card > .ilf-card-thumb { margin: 0; }
.dir-card__corpo { flex: 1; display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 1rem .9rem; }
.dir-card__ic { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--azzurro-pale); color: var(--verde); }
.dir-card__ic .ph-icon { width: 1.35rem; height: 1.35rem; }
.dir-card__ic--terra { background: var(--arancio-pale); color: var(--terra); }
.dir-card__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.dir-card__cat { margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--verde); }
.dir-card__nome { margin: 0; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--verde-dk); overflow-wrap: anywhere; }
.dir-card__nome a { display: inline-block; min-height: 1.5rem; min-width: 2.75rem; color: inherit; text-decoration: none; }
.dir-card__nome a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.dir-card:hover .dir-card__nome a { color: var(--verde); }
.dir-card__desc { margin: .2rem 0 0; font-size: .9375rem; line-height: 1.55; color: var(--color-text-2); }
.dir-card__meta { margin: .2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; font-size: .875rem; line-height: 1.4; color: var(--color-text-2); }
.dir-card__zona, .dir-card__tel { display: inline-flex; align-items: center; gap: .35rem; }
.dir-card__zona { min-height: 1.75rem; }
.dir-card__zona--fuori { color: var(--color-text); font-weight: 600; }
.dir-card__meta .ph-icon { width: 1rem; height: 1rem; color: var(--color-text-3); }
.dir-card__tel { position: relative; z-index: 2; min-height: 44px; font-weight: 600; color: var(--verde); text-decoration: none; }
.dir-card__tel .ph-icon { color: var(--verde); }
.dir-card__tel:hover { text-decoration: underline; }
.dir-card__freccia { flex: none; align-self: center; width: 1.1rem; height: 1.1rem; color: var(--color-text-3); transition: transform .2s, color .2s; }
.dir-card:hover .dir-card__freccia { transform: translateX(3px); color: var(--verde); }
@media (prefers-reduced-motion: reduce) { .dir-card, .dir-card__freccia { transition: none; } .dir-card:hover { transform: none; } }

/* Gruppi per categoria (su smartphone diventano comprimibili: [data-ilf-gruppo], ilf-main.js) */
.dir-gruppo + .dir-gruppo { margin-top: var(--space-xl); }
.dir-gruppo__tit {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 var(--space-sm);
  padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.25; color: var(--verde-dk);
}
.dir-gruppo__tit .ilf-gruppo-toggle { gap: .6rem; justify-content: flex-start; }
.dir-gruppo__ic { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--azzurro-pale); color: var(--verde); }
.dir-gruppo__ic .ph-icon { width: 1.15rem; height: 1.15rem; }
.dir-gruppo__ic--terra { background: var(--arancio-pale); color: var(--terra); }
.dir-gruppo__n { font-family: var(--font-body); font-size: .9375rem; font-weight: 400; color: var(--color-text-2); }
@media (max-width: 37.49rem) {
  .dir-gruppo__tit { font-size: 1.15rem; }
  .dir-gruppo[data-ilf-gruppo] > .dir-gruppo__tit { padding-bottom: 0; }
  .dir-gruppo:not(.ilf-gruppo--chiuso) > .dir-gruppo__tit { margin-bottom: var(--space-sm); }
  .dir-card__corpo { gap: .7rem; padding: .85rem .85rem .75rem; }
  .dir-card__ic { width: 2.4rem; height: 2.4rem; }
  .dir-card__ic .ph-icon { width: 1.2rem; height: 1.2rem; }
}

/* Indice delle categorie (solo da tablet in su: su smartphone i gruppi sono già comprimibili) */
.dir-indice { display: none; }
@media (min-width: 37.5rem) {
  .dir-indice { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--space-xl); padding: 0; list-style: none; }
  .dir-indice a {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .35rem .9rem .35rem .45rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface);
    font-size: .875rem; font-weight: 600; color: var(--verde-dk); text-decoration: none; transition: border-color .2s, background .2s;
  }
  .dir-indice a:hover { border-color: var(--verde); background: var(--azzurro-pale); }
  .dir-indice .dir-gruppo__ic { width: 1.9rem; height: 1.9rem; }
  .dir-indice .dir-gruppo__ic .ph-icon { width: 1rem; height: 1rem; }
  .dir-indice small { font-size: .875rem; font-weight: 400; color: var(--color-text-2); }
}

/* Domande frequenti delle pagine-categoria: card con icona, domanda in h3 */
.dir-faq { display: grid; gap: var(--space-sm); max-width: 48rem; margin: 0 auto; padding: 0; list-style: none; }
.dir-faq .ilf-card--riga > div { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.dir-faq .ilf-card__text { font-size: 1rem; }
.dir-faq .ilf-card__title { font-size: 1.125rem; }

/* Intro editoriale delle pagine-categoria: righe di circa 70 caratteri */
.dir-intro { max-width: 42rem; margin: 0 auto; }
.dir-intro p { font-size: var(--text-md); line-height: 1.75; color: var(--color-text-2); }
.dir-intro p + p { margin-top: .9rem; }
.dir-intro .dir-intro__lead { font-size: var(--text-lg); line-height: 1.7; color: var(--color-text); }
/* Link nel testo delle pagine hub: riconoscibili anche senza colore (sottolineati), Verde Formello 5,9:1 */
.macro__intro-body p a, .dir-intro p a, .focus-agri__body p a, .olm-intro__lead a { color: var(--verde); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.macro__intro-body p a:hover, .dir-intro p a:hover, .focus-agri__body p a:hover, .olm-intro__lead a:hover { color: var(--verde-dk); }
.dir-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xl); }