/* ═══════════════════════════════════════════════════════════════
   THE ATELIER — pagina editoriale + interattiva
   Tre sezioni: Apertura · Percorsi (carousel) · Esplora (mappa)
   Token CSS da homepage.css (caricato da base_public.html).
═══════════════════════════════════════════════════════════════ */


/* ─── Palette locale: quattro accenti per le card ────────────── */

.atelier {
  --ac-foresta:    var(--color-accent-verde-alpi-dark); /* #2C4A3E */
  --ac-cordovan:   var(--color-accent-cordovan);        /* #4A2B2B */
  --ac-carbone:    var(--color-text-secondary);         /* #3D3D3A */
  --ac-inchiostro: var(--color-text-primary);           /* #141412 */
}


/* ─── Wrapper principale ─────────────────────────────────────── */

.atelier {
  max-width: var(--col-full);
  margin: 0 auto;
  padding: 0 var(--margin-page) var(--space-6);
}


/* ═══════════════════════════════════════════════════════════════
   APERTURA
═══════════════════════════════════════════════════════════════ */

.atelier__apertura {
  max-width: var(--col-text);
  margin: 0 auto var(--space-5);
  padding-top: var(--space-5);
}

.atelier__kicker {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}

.atelier__titolo {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--text-2xl);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.atelier__titolo em {
  font-style: italic;
  font-weight: 300;
}

.atelier__intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  max-width: 58ch;
  margin: 0 0 var(--space-3);
}

/* Tre link-azione sotto l'intro */

.atelier__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
}

.atelier__azione {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 0.5px solid var(--color-border-secondary);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.atelier__azione:hover {
  color: var(--color-text-accent);
  border-color: var(--color-border-accent);
}

.atelier__azione--primaria {
  color: var(--color-text-accent);
  font-weight: 500;
  border-color: var(--color-border-accent);
}

.atelier__azione--primaria:hover {
  color: var(--color-accent-verde-alpi-dark);
}


/* ═══════════════════════════════════════════════════════════════
   INTESTAZIONE SEZIONE — riutilizzabile
═══════════════════════════════════════════════════════════════ */

.sezione__intestazione {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 0.5px solid var(--color-border-secondary);
}

.sezione__intestazione--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

.sezione__titolo {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-1);
}

.sezione__sottotitolo {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.3;
  color: var(--color-text-primary);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   PERCORSI — carousel orizzontale con paginazione a punti
═══════════════════════════════════════════════════════════════ */

.atelier__percorsi {
  margin-bottom: var(--space-5);
  padding-top: var(--space-4);
  border-top: 0.5px solid var(--color-border-secondary);
}

/* Search input — stile sottile, editoriale */

.percorsi__ricerca-wrapper {
  flex-shrink: 0;
}

.percorsi__ricerca {
  appearance: none;
  border: none;
  border-bottom: 0.5px solid var(--color-border-primary);
  background: transparent;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  padding: 4px 0;
  width: 180px;
  outline: none;
  transition: border-color 0.2s;
}

.percorsi__ricerca::placeholder {
  color: var(--color-text-disabled);
  font-style: italic;
}

.percorsi__ricerca:focus {
  border-color: var(--color-border-accent);
}

/* Viewport + track — scroll snap orizzontale, scrollbar nascosta */

.percorsi__viewport {
  overflow: hidden; /* maschera lo scroll */
}

.percorsi__track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.percorsi__track::-webkit-scrollbar { display: none; }
.percorsi__track.is-dragging        { cursor: grabbing; }

/* Card singola */

.percorsi__card {
  flex: 0 0 calc((100% - 2 * var(--space-3)) / 3);
  scroll-snap-align: start;
  background: var(--color-bg-surface);
  border-top: 3px solid transparent;
  min-height: 200px;
  display: flex;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.percorsi__card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* Accenti cromatici */
.percorsi__card[data-accento="1"] { border-top-color: var(--ac-foresta); }
.percorsi__card[data-accento="2"] { border-top-color: var(--ac-cordovan); }
.percorsi__card[data-accento="3"] { border-top-color: var(--ac-carbone); }
.percorsi__card[data-accento="4"] { border-top-color: var(--ac-inchiostro); }

.percorsi__card-inner {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}

.percorsi__card-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.percorsi__card-tag {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.percorsi__card-count {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  color: var(--color-text-disabled);
}

.percorsi__card-titolo {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0;
}

.percorsi__card-testo {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
  flex: 1;
}

.percorsi__card-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-accent);
  text-decoration: none;
  border-bottom: 0.5px solid var(--color-border-accent);
  padding-bottom: 1px;
  margin-top: var(--space-2);
  transition: color 0.2s;
  align-self: flex-start;
}

.percorsi__card-download:hover { color: var(--color-accent-verde-alpi-dark); }

/* Paginazione a punti */

.percorsi__paginazione {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-3);
}

.percorsi__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border-primary);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.percorsi__dot[aria-selected="true"] {
  background: var(--color-text-accent);
  transform: scale(1.4);
}

.percorsi__dot:hover:not([aria-selected="true"]) {
  background: var(--color-text-tertiary);
}

.percorsi__empty {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-align: center;
  padding: var(--space-4) 0;
}


/* ═══════════════════════════════════════════════════════════════
   ESPLORA — mappa + pannello dettaglio
═══════════════════════════════════════════════════════════════ */

.atelier__esplora {
  margin-bottom: var(--space-5);
  padding-top: var(--space-4);
  border-top: 0.5px solid var(--color-border-secondary);
}

/* Bottone "Pianifica il tuo tour" */

.btn-pianifica {
  flex-shrink: 0;
  appearance: none;
  border: 0.5px solid var(--color-border-accent);
  background: transparent;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-text-accent);
  padding: 8px var(--space-2);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.btn-pianifica:hover {
  background: var(--color-accent-verde-alpi-light);
}

/* Layout mappa + dettaglio */

.esplora__corpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.esplora__mappa {
  height: 380px;
  background: var(--color-bg-secondary);
  z-index: 0;
}

/* Pannello dettaglio luogo */

.esplora__dettaglio {
  background: var(--color-bg-surface);
  border: 0.5px solid var(--color-border-tertiary);
  padding: var(--space-3);
  min-height: 200px;
  display: flex;
  align-items: flex-start;
}

.esplora__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
}

.esplora__placeholder p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-text-disabled);
  text-align: center;
  line-height: 1.4;
}

.esplora__scheda {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}

.esplora__scheda-tipo {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.esplora__scheda-nome {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0;
}

.esplora__scheda-testo {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: var(--space-1) 0 0;
}

.esplora__scheda-indirizzo {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin: 0;
}

.esplora__scheda-link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-accent);
  text-decoration: none;
  border-bottom: 0.5px solid var(--color-border-accent);
  padding-bottom: 1px;
  margin-top: var(--space-2);
  transition: color 0.2s;
}

.esplora__scheda-link:hover { color: var(--color-accent-verde-alpi-dark); }

/* Marker personalizzato Leaflet */

.luogo-marker {
  background: transparent !important;
  border: none !important;
}

.luogo-marker__dot {
  width: 10px;
  height: 10px;
  background: var(--color-accent-verde-alpi);
  border-radius: 50%;
  border: 2px solid var(--color-bg-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.luogo-marker--attivo .luogo-marker__dot,
.luogo-marker__dot:hover {
  transform: scale(1.5);
  background: var(--color-accent-verde-alpi-dark);
}


/* ═══════════════════════════════════════════════════════════════
   SCRIVICI — CTA finale
═══════════════════════════════════════════════════════════════ */

.atelier__scrivici {
  padding-top: var(--space-4);
  border-top: 0.5px solid var(--color-border-primary);
  margin-bottom: var(--space-5);
}

.scrivici__inner {
  max-width: var(--col-text);
}

.scrivici__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-2);
}

.scrivici__testo {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--color-text-primary);
  max-width: 54ch;
  margin: 0 0 var(--space-2);
}

.scrivici__link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  letter-spacing: 0.02em;
  color: var(--color-text-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-border-accent);
  text-underline-offset: 5px;
  text-decoration-thickness: 0.5px;
  transition: color 0.2s;
}

.scrivici__link:hover { color: var(--color-accent-verde-alpi-dark); }


/* ═══════════════════════════════════════════════════════════════
   TOUR — overlay a tutto schermo
═══════════════════════════════════════════════════════════════ */

.tour {
  position: fixed;
  inset: 0;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tour--visibile {
  opacity: 1;
  pointer-events: auto;
}

.tour__mappa {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Overlay scuro sotto il modale */
.tour::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 18, 0.45);
  z-index: 1;
  pointer-events: none;
}

.tour__chiudi {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 10;
  appearance: none;
  border: 0.5px solid rgba(255,255,255,0.4);
  background: rgba(20,20,18,0.6);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: var(--text-base);
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.tour__chiudi:hover { background: rgba(20,20,18,0.85); }

/* Modale */

.tour__modale {
  position: absolute;
  z-index: 10;
  top: var(--space-5);
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  width: min(520px, calc(100% - 2 * var(--margin-page)));
  background: var(--color-bg-primary);
  padding: var(--space-4);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tour--visibile .tour__modale {
  transform: translateX(-50%) translateY(0);
}

.tour__kicker {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-1);
}

.tour__titolo {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--text-2xl);
  line-height: 1.1;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
}

.tour__istruzione {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}

.tour__input {
  appearance: none;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border-primary);
  background: transparent;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-md);
  color: var(--color-text-primary);
  padding: var(--space-1) 0;
  margin-bottom: var(--space-3);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.tour__input::placeholder { color: var(--color-text-disabled); }

.tour__input:focus { border-color: var(--color-border-accent); }

.tour__avvia {
  appearance: none;
  border: none;
  background: var(--color-text-accent);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px var(--space-3);
  cursor: pointer;
  width: 100%;
  transition: background 0.2s;
}

.tour__avvia:hover { background: var(--color-accent-verde-alpi-dark); }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */

@media (min-width: 641px) {
  .atelier__titolo {
    font-size: var(--text-3xl);
  }

  .sezione__intestazione {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  /* Tablet: 2 card per pagina */
  .percorsi__card {
    flex: 0 0 calc((100% - var(--space-3)) / 2);
  }

  .esplora__corpo {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }

  .esplora__mappa {
    height: 460px;
  }

  .esplora__dettaglio {
    height: 460px;
    align-items: flex-start;
    overflow-y: auto;
  }
}

@media (min-width: 1025px) {
  .atelier__titolo {
    font-size: var(--text-4xl);
  }

  /* Desktop: 3 card per pagina */
  .percorsi__card {
    flex: 0 0 calc((100% - 2 * var(--space-3)) / 3);
  }

  .esplora__mappa {
    height: 500px;
  }

  .esplora__dettaglio {
    height: 500px;
  }
}

@media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 96dpi) {
  .atelier__titolo { font-weight: 400; }
}


/* ═══════════════════════════════════════════════════════════════
   GEM HOOK — teaser di contenuto esclusivo nella card percorso
═══════════════════════════════════════════════════════════════ */

.gem-hook {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 7px 0;
  border-top: 0.5px solid var(--color-border-tertiary);
  cursor: pointer;
  outline: none;
}

.gem-hook:focus-visible {
  outline: 2px solid var(--color-border-accent);
  outline-offset: 2px;
}

.gem-hook__lock {
  font-size: 11px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  line-height: 1;
}

.gem-hook__testo {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  flex: 1;
  filter: blur(3.5px);
  user-select: none;
  pointer-events: none;
  line-height: 1.4;
}

.gem-hook__cta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-accent);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  border-bottom: 0.5px solid var(--color-border-accent);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s;
}

.gem-hook__cta:hover { color: var(--color-accent-verde-alpi-dark); }


/* ═══════════════════════════════════════════════════════════════
   PDF GATE — modal email capture
═══════════════════════════════════════════════════════════════ */

.percorsi-gate {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 20, 18, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.percorsi-gate.is-open {
  opacity: 1;
  pointer-events: auto;
}

.percorsi-gate__modale {
  position: relative;
  background: var(--color-bg-primary);
  padding: var(--space-4);
  width: min(460px, calc(100% - 2 * var(--margin-page)));
  transform: translateY(-10px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.percorsi-gate.is-open .percorsi-gate__modale {
  transform: translateY(0);
}

.percorsi-gate__chiudi {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  appearance: none;
  border: none;
  background: none;
  font-size: var(--text-base);
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.15s;
}

.percorsi-gate__chiudi:hover { color: var(--color-text-primary); }

.percorsi-gate__titolo {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: 1.1;
  color: var(--color-text-primary);
  margin: var(--space-1) 0 var(--space-1);
}

.percorsi-gate__sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}

.percorsi-gate__input {
  appearance: none;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border-primary);
  background: transparent;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-md);
  color: var(--color-text-primary);
  padding: var(--space-1) 0;
  margin-bottom: var(--space-3);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.percorsi-gate__input::placeholder { color: var(--color-text-disabled); }
.percorsi-gate__input:focus { border-color: var(--color-border-accent); }

.percorsi-gate__btn {
  appearance: none;
  border: none;
  background: var(--color-text-accent);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px var(--space-3);
  cursor: pointer;
  width: 100%;
  margin-bottom: var(--space-2);
  transition: background 0.2s;
}

.percorsi-gate__btn:hover:not(:disabled) { background: var(--color-accent-verde-alpi-dark); }
.percorsi-gate__btn:disabled { opacity: 0.7; cursor: default; }

.percorsi-gate__fine-print {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  color: var(--color-text-disabled);
  text-align: center;
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   WIZARD PLANNER — step dentro il tour overlay
═══════════════════════════════════════════════════════════════ */

/* Modale: altezza adattiva per il wizard */
.tour__modale {
  max-height: calc(100svh - 120px);
  overflow-y: auto;
}

.tour__step[hidden] { display: none; }

/* Progress dots */
.wizard__dots {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.wizard__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-border-primary);
  transition: background 0.25s;
}

.wizard__dot.is-active { background: var(--color-text-accent); }

/* Piste */
.piste {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.pista-card {
  border: 0.5px solid var(--color-border-secondary);
  padding: var(--space-2);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.pista-card:hover,
.pista-card:focus-visible { border-color: var(--color-border-accent); background: var(--color-bg-secondary); }

.pista-card.is-selected {
  border-color: var(--color-text-accent);
  background: var(--color-accent-verde-alpi-light);
}

.pista-card__titolo {
  display: block;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-md);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.pista-card__sub {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.pista-followup { margin-top: var(--space-2); }
.pista-followup[hidden] { display: none; }

.quartieri {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quartiere-chip {
  appearance: none;
  border: 0.5px solid var(--color-border-secondary);
  background: transparent;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  color: var(--color-text-secondary);
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.quartiere-chip:hover,
.quartiere-chip:focus-visible,
.quartiere-chip.is-selected {
  border-color: var(--color-text-accent);
  color: var(--color-text-accent);
  outline: none;
}

/* Durata */
.durate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.durata-card {
  border: 0.5px solid var(--color-border-secondary);
  padding: var(--space-2) var(--space-1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.durata-card:hover,
.durata-card:focus-visible { border-color: var(--color-border-accent); background: var(--color-bg-secondary); }

.durata-card.is-selected {
  border-color: var(--color-text-accent);
  background: var(--color-accent-verde-alpi-light);
}

.durata-card__num {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-text-primary);
}

.durata-card__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.durata-card__hint {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-xs);
  color: var(--color-text-disabled);
  margin-top: 4px;
}

/* Stitching animation */
.stitching__eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-1);
}

.stitching__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.stitching__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s, transform 0.4s;
}

.stitching__item.is-visible { opacity: 1; transform: translateY(0); }
.stitching__item.is-done    { color: var(--color-text-tertiary); }

.stitching__item-check {
  font-size: 10px;
  color: var(--color-text-accent);
  flex-shrink: 0;
}

.stitching__fine {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  margin: var(--space-3) 0 0;
  opacity: 0;
  transition: opacity 0.5s;
}

.stitching__fine.is-visible { opacity: 1; }

/* Wizard nav (indietro / avanti) */
.tour__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tour__indietro {
  appearance: none;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}

.tour__indietro:hover { color: var(--color-text-secondary); }

.tour__avanti {
  appearance: none;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-text-accent);
  cursor: pointer;
  padding: 0;
  border-bottom: 0.5px solid var(--color-border-accent);
  transition: color 0.15s;
}

.tour__avanti:hover { color: var(--color-accent-verde-alpi-dark); }


/* ═══════════════════════════════════════════════════════════════
   BANNER RISULTATI WIZARD — sopra la mappa luoghi
═══════════════════════════════════════════════════════════════ */

.luoghi__risultati-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--color-accent-verde-alpi-light);
  border: 0.5px solid var(--color-border-accent);
  padding: 10px var(--space-3);
  margin-bottom: var(--space-3);
}

.luoghi__risultati-testo {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.luoghi__risultati-reset {
  appearance: none;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-accent);
  cursor: pointer;
  padding: 0;
  border-bottom: 0.5px solid var(--color-border-accent);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s;
}

.luoghi__risultati-reset:hover { color: var(--color-accent-verde-alpi-dark); }


/* ═══════════════════════════════════════════════════════════════
   AMA — pagina semplificata (accesso da articolo)
═══════════════════════════════════════════════════════════════ */

.ama__offerta {
  max-width: var(--col-text);
  margin: 0 auto var(--space-5);
  padding-top: var(--space-4);
  border-top: 0.5px solid var(--color-border-primary);
}

.ama__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ama__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.ama__item-numero {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  padding-top: 0.3em;
  min-width: 2rem;
}

.ama__item-titolo {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.ama__item-testo {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
}