/* Home page di marketing (IT/EN) - pagina a se', non condivide lo stile.css
   dell'app guest (niente .step/.card/altezza bloccata): scroll normale,
   layout "da sito", palette brand ripresa da style.css ma ridefinita qui in
   proprio cosi' la pagina resta indipendente. */

:root {
  --accent: #FFD62E;
  --accent-dark: #E6BE00;
  --bg-dark: #1F4E79;
  --bg-dark-2: #163A5C;
  --bg-light: #FAF8F2;
  --text-dark: #1F2937;
  --text-muted: #52606D;
  --text-on-dark: #FFFFFF;
  --radius-lg: 20px;
  --radius-md: 12px;
  --shadow-soft: 0 12px 30px rgba(31, 78, 121, 0.12);
  --max-width: 1120px;
  /* Altezza reale dell'header sticky, misurata da home.js (cambia tra
     mobile e desktop) - il fallback qui e' solo per un attimo prima che il
     JS giri al load. Usata per lo scroll-margin-top delle sezioni ancorate
     qui sotto, cosi' il salto da menu non finisce coperto dall'header. */
  --header-h: 84px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  /* --font-family iniettata da home.html/privacy.html in base a SITE_FONT
     (vedi core.site_font_css()) - fallback Nunito se non impostata. */
  font-family: var(--font-family, "Nunito", system-ui, sans-serif);
  color: var(--text-dark);
  background: var(--bg-light);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

.hidden { display: none !important; }

a { color: inherit; }

h1, h2, h3 { font-weight: 900; line-height: 1.15; margin: 0 0 12px; }
h2 { font-size: clamp(26px, 4vw, 36px); text-align: center; }
h3 { font-size: 20px; }

.section-subtitle {
  text-align: center;
  color: var(--text-muted);
  max-width: 768px;
  margin: 0 auto 36px;
  font-size: 16px;
}

/* Target dei link della nav (#how/#packages/#gallery/#faq/#contact): senza
   scroll-margin-top l'header sticky (altezza variabile tra mobile e
   desktop, vedi --header-h sopra) copre il titolo appena raggiunto dallo
   scroll. */
#how, #last-event, #packages, #gallery, #faq, #contact {
  scroll-margin-top: var(--header-h);
}

/* Skip link: invisibile finche' non riceve focus da tastiera - primo elemento
   raggiungibile con TAB, salta header/nav e va dritto al contenuto. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--accent);
  color: var(--bg-dark);
  font-weight: 800;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  z-index: 100;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 12px;
}

/* --accent-dark contro sfondo chiaro/crema (praticamente tutta la pagina
   tranne hero/contatti) resta sotto 1.8:1 di contrasto, ben sotto il 3:1
   minimo WCAG 1.4.11 per un indicatore di focus - risultato, l'anello da
   tastiera era quasi invisibile ovunque tranne che sulle sezioni scure.
   --bg-dark regge 6-9:1 su tutti gli sfondi chiari; nelle sezioni scure
   (hero, contatti, sotto) si passa ad --accent che li' ha contrasto alto. */
:focus-visible {
  outline: 3px solid var(--bg-dark);
  outline-offset: 2px;
}

.hero :focus-visible,
.contact-section :focus-visible {
  outline-color: var(--accent);
}

/* Contenuto solo per screen reader (annunci live, label ridondanti) - resta
   nel flusso del documento (a differenza di display:none) cosi' viene letto
   dagli assistive tech ma non occupa spazio visivo. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================= Header ================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 248, 242, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(31, 78, 121, 0.08);
}

.site-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  text-decoration: none;
  font-weight: 900;
  font-size: 20px;
  color: var(--bg-dark);
}

.brand-logo { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.brand-text { white-space: nowrap; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  font-weight: 700;
  font-size: 15px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-width: 0;
  padding: 0 20px;
}
.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
  text-decoration: none;
  color: var(--bg-dark);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  border-bottom-color: var(--bg-dark);
}

/* Solo bandierina (niente piu' testo IT/EN, vedi home.html/privacy.html):
   pulsante rotondo compatto invece della pillola con testo di prima - il
   nome della lingua resta comunque per chi usa uno screen reader, tramite
   aria-label sul link (content.lang_switch_label). */
.lang-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0 !important;
  background: var(--bg-dark);
  border-radius: 50%;
  border-bottom: none !important;
  text-decoration: none;
}
.lang-link:hover, .lang-link:focus-visible {
  background: var(--bg-dark-2);
}

.lang-flag {
  /* Prima 18px dentro un cerchio da 30px (6px di margine per lato): la
     bandiera risultava piccola e poco leggibile. 26px lascia solo 2px di
     "bordo" scuro visibile intorno, stessa dimensione del pulsante. */
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Hamburger: nascosto su desktop (la nav resta inline in header), mostrato
   sotto i 768px al posto della nav orizzontale - vedi il blocco
   "Header mobile" piu' sotto per il comportamento a quella larghezza. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--bg-dark);
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.nav-toggle-bars { position: relative; }

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }

/* Icona -> X quando il menu e' aperto (stesso bottone, cambia solo aspetto). */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* ================= Header mobile: hamburger + menu verticale ================= */
/* Sotto i 768px la nav orizzontale a scroll (sopra) non si vedeva bene con
   piu' di 2-3 voci: qui diventa un pannello verticale a comparsa, aperto dal
   bottone hamburger - il cambio lingua resta pero' sempre visibile in
   header, subito dopo l'hamburger (non finisce dentro il menu). */
@media (max-width: 768px) {
  .brand { order: 1; }
  /* margin-left:auto sull'hamburger (non piu' sul cambio lingua, vedi sopra):
     con 3 item su questa riga (brand/nav-toggle/lang-link) lo space-between
     del contenitore li spargerebbe uniformemente, lasciando hamburger+lingua
     staccati dal bordo invece che appiccicati l'uno all'altro a destra. */
  .nav-toggle { display: inline-flex; order: 2; margin-left: auto; }
  .lang-link { order: 3; }

  .site-header-inner {
    flex-wrap: wrap;
    gap: 0 16px;
    padding: 14px 20px 20px;
  }

  .site-nav {
    order: 4;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-x: visible;
    overflow-y: auto;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    padding: 0 4px;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }

  .site-nav.is-open {
    max-height: 60vh;
    opacity: 1;
    visibility: visible;
    padding: 8px 4px 16px;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0s linear 0s;
  }

  .site-nav a {
    padding: 12px 8px;
    border-bottom: 1px solid rgba(31, 78, 121, 0.1);
  }

  /* Niente riga sotto l'ultima voce del menu: senza, restava un separatore
     "a vuoto" con niente sotto. */
  .site-nav a:last-child {
    border-bottom: none;
  }
}

/* ================= Hero ================= */

.hero {
  background: linear-gradient(160deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%);
  color: var(--text-on-dark);
  padding: 64px 20px;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  padding: 0 20px;
}

@media (min-width: 860px) {
  .hero-inner { grid-template-columns: 1.1fr 0.9fr; }
}

.hero h1 {
  font-size: clamp(32px, 5vw, 48px);
  color: var(--text-on-dark);
}

.hero-subtitle {
  font-size: 18px;
  opacity: 0.92;
  max-width: 46ch;
  margin: 0 0 28px;
}

.btn-cta {
  display: inline-block;
  background: var(--accent);
  color: var(--bg-dark);
  font-weight: 800;
  font-size: 17px;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn-cta:hover { background: var(--accent-dark); transform: translateY(-2px); }
.btn-cta:active { transform: translateY(0); }

.hero-media img {  
  box-shadow: var(--shadow-soft);
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  border: 1px solid #fff;
  border-radius: 25px;
}

/* ================= Come funziona ================= */

/* max-width/margin spostati su .how-steps (come .packages-grid per
   .packages-section): senza, il background bianco sarebbe rimasto chiuso
   nel riquadro centrale invece di coprire tutta la larghezza della sezione,
   a differenza delle altre sezioni sotto. */
.how-it-works {
  padding: 72px 20px;
  background: #fff;
}

.how-steps {
  max-width: 1000px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 720px) {
  .how-steps { grid-template-columns: repeat(3, 1fr); }
}

.how-step {
  background: var(--bg-light);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-soft);
  text-align: center;
}

/* Facoltativa (vedi HOME_HOW_STEP{1,2,3}_IMAGE): se assente lo step resta
   com'era prima, solo numero+testo - non e' un placeholder obbligatorio. */
.how-step-image {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin: 0 auto 18px;
  display: block;
  transition: opacity 0.3s ease;
}

/* Solo passo 3 con 2+ foto (vedi initHowStep3Rotator in home.js): dissolvenza
   durante il cambio immagine invece di uno scatto secco. */
.how-step-image.is-fading {
  opacity: 0;
}

.how-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-dark);
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 14px;
}

.how-step p { color: var(--text-muted); margin: 0; }

/* ================= Pacchetti ================= */

/* Cream: alterna con gallery-section, bianca, cosi' le due sezioni
   restano distinguibili - vedi anche package-card qui sotto, che per lo
   stesso motivo passa a bianco. */
.packages-section {
  background: var(--bg-light);
  padding: 72px 20px;
}

.packages-grid {
  max-width: 1366px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

/* 620-1159px: con 5 pacchetti non ci stanno piu' leggibili su un'unica riga
   (vedi sotto) - qui vanno a capo su piu' colonne. Colonne fisse (2 poi 3)
   invece di auto-fit: auto-fit ricalcola il numero di colonne in base allo
   spazio disponibile e, appena sotto la soglia per stare tutti in riga,
   produceva split scomodi tipo 4+1 (4 card strette su una riga, 1 sola
   sulla successiva) - con un numero fisso il resto va sempre a capo in
   blocco (2+2+1, poi 3+2), mai una singola card isolata su una riga piena. */
@media (min-width: 620px) {
  .packages-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 20px;
  }
}

@media (min-width: 768px) {
  .packages-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Da qui in su (larghezza sufficiente anche con 5 pacchetti) tutti in
   un'unica riga, quanti siano: le card si restringono (flex, non grid) pur
   di restare in linea invece di andare a capo come nella fascia sopra. */
@media (min-width: 1160px) {
  .packages-grid {
    display: flex;
    flex-wrap: nowrap;
  }

  .package-card { flex: 1 1 0; min-width: 0; }
}

.package-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-soft);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

/* Altezze fisse su titolo/testo/foto incluse cosi' le card restano
   allineate a riga anche quando i pacchetti hanno nomi/descrizioni di
   lunghezza diversa - senza, "Demo" (una parola) e "Ideale per grandi
   eventi" (una frase) partirebbero il CTA a altezze diverse anche a card
   gia' alte uguali (lo stretch del flex le pareggia solo nel complesso, non
   riga per riga). Titolo e foto incluse usano min-height (testo corto,
   niente da troncare); la descrizione usa height fissa + line-clamp perche'
   e' l'unico campo abbastanza lungo da poter sforare le 2 righe previste. */
.package-title {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

/* height fissa (non min-height): una descrizione piu' lunga di 2 righe
   viene troncata con ellissi invece di allungare la card oltre le altre -
   serve solo quando le card stanno in riga (vedi packages-grid sopra,
   min-width: 620px): sotto sono impilate in colonna, senza bisogno di
   restare allineate tra loro, quindi torna auto. */
.package-description {
  color: var(--text-muted);
  margin: 0;
  min-height: 54px;
  height: auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.package-photos {
  margin: 4px 0 0;
  font-weight: 800;
  font-size: 14px;
  min-height: 1.4em;
  /* niente --accent-dark qui: su sfondo chiaro scende sotto il 4.5:1 richiesto */
  color: var(--bg-dark);
}

/* Riga propria (non piu' affiancato a "foto incluse") e font ben piu'
   grande: e' il numero che deve saltare all'occhio per primo in una card
   pacchetto. */
.package-price {
  margin: 0 0 6px;
  font-weight: 900;
  font-size: 32px;
  min-height: 1.2em;
  color: var(--bg-dark);
}

.package-cta { margin-top: auto; }

/* Il pacchetto resta visibile (non sparisce dalla vetrina) ma "grigetto":
   niente CTA funzionante finche' non viene riattivato in admin. Sfondo
   piatto + grayscale (non opacity: su un intero blocco di testo l'opacity
   abbassa il contrasto sotto la soglia AA, il grayscale no perche' non
   tocca la luminosita' di colori gia' poco saturi come questi). */
.package-card-disabled {
  position: relative;
  overflow: hidden;
  background: #fff;
  filter: grayscale(0.6);
}

.package-cta-disabled {
  background: #d8dce0;
  /* #6b7280 dava 3.51:1 su questo sfondo: sotto il 4.5:1 richiesto per un
     testo 17px/800 (non abbastanza grande da contare come "large text").
     #5a606c ci arriva a 4.58:1, stessa tonalita' solo piu' scura. */
  color: #5a606c;
  cursor: default;
  box-shadow: none;
}
.package-cta-disabled:hover { background: #d8dce0; transform: none; }

/* Nastro diagonale "Presto disponibile": sempre visibile come adesivo
   sulla card, cosi' lo stato del pacchetto e' chiaro a colpo d'occhio
   senza doverci mettere un testo diverso nel bottone (che resta uguale
   alle altre card, vedi commit che ha uniformato la CTA). */
.package-coming-soon-badge {
  position: absolute;
  top: 37px;
  right: -37px;
  width: 170px;
  padding: 5px 0;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-align: center;
  transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(31, 78, 121, 0.35);
  pointer-events: none;
  opacity: 0.90;
}

/* ================= Gallery prima/dopo: carousel ================= */
/* Coverflow leggero fatto di solo scroll-snap nativo (swipe/trackpad/frecce
   funzionano gratis, nessuna libreria) + una custom property --dist scritta
   da home.js ad ogni frame di scroll (distanza normalizzata 0..1 dal centro
   della corsia) che pilota scala/opacita' di ogni slide in CSS: la slide
   centrale risalta, le laterali si affievoliscono. Se JS non parte (errore,
   disabilitato) --dist resta 0 su tutte: restano comunque leggibili, solo
   senza l'effetto. */

/* Bianca: alterna con packages-section, cream, cosi' le due sezioni restano
   distinguibili l'una dall'altra invece di fondersi con lo stesso sfondo -
   vedi anche gallery-item qui sotto, che per lo stesso motivo passa a
   cream (altrimenti si confonderebbe con la sezione). */
.gallery-section {
  background: #fff;
  padding: 72px 20px;
}

.carousel {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.carousel-track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 32px clamp(8px, 12vw, 22%) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide {
  --dist: 0;
  flex: 0 0 auto;
  width: min(340px, 78vw);
  scroll-snap-align: center;
  transform: scale(calc(1 - var(--dist) * 0.24));
  opacity: calc(1 - var(--dist) * 0.6);
}

.carousel-slide.is-active .gallery-item {
  box-shadow: 0 0 0 3px var(--accent);
}

/* Un rimbalzo singolo quando una slide diventa quella centrale (home.js
   aggiunge/rimuove questa classe una volta sola, non e' un loop): l'anima
   attorno allo scale "a riposo" gia' calcolato da --dist, poi torna li'. */
@keyframes carousel-bounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.09); }
  65% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.carousel-slide.is-bouncing {
  animation: carousel-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}

.carousel-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--bg-dark);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.carousel-arrow:hover:not(:disabled) { background: var(--bg-dark-2); transform: translateY(-1px); }
.carousel-arrow:disabled { opacity: 0.3; cursor: default; }

@media (max-width: 600px) {
  .carousel-arrow { width: 36px; height: 36px; }
  .carousel-arrow svg { width: 18px; height: 18px; }

  /* Niente padding laterale sotto i 600px: la slide riempie tutta la
     larghezza del track (gia' al netto dello spazio preso dalle frecce),
     cosi' su mobile si vede sempre una sola card intera, senza le vicine
     che sbucano ai bordi come nel coverflow desktop. -6px (non 100% netto)
     per lasciare lo spazio ai 3px di anello giallo per lato sulla slide
     attiva: senza margine, l'overflow-x:auto del track lo ritaglierebbe di
     nuovo (stesso bug del commit "risolto anello giallo tagliato... su
     mobile" - qui si ripresenterebbe per il padding a 0 invece che per la
     larghezza in vw). */
  .carousel-track {
    padding-left: 0;
    padding-right: 0;
  }

  .carousel-slide {
    width: calc(100% - 6px);
  }
}

.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  /* alpha 0.7, non un valore decorativo a caso: e' la soglia minima per
     restare sopra il rapporto 3:1 richiesto da WCAG 1.4.11 (contrasto dei
     componenti non testuali) sullo sfondo bianco della sezione. */
  background: rgba(31, 78, 121, 0.7);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.carousel-dot:hover { background: rgba(31, 78, 121, 0.85); }

.carousel-dot.is-active {
  background: var(--bg-dark);
  transform: scale(1.3);
}

.gallery-item {
  margin: 0;
  background: var(--bg-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}

.gallery-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.gallery-half {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.gallery-half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  /* alpha alta + text-shadow apposta: sta sopra una foto qualsiasi (contenuto
     non controllabile), deve restare leggibile anche su uno scatto quasi
     bianco - due tecniche indipendenti dal colore esatto della foto sotto. */
  background: rgba(31, 78, 121, 0.92);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 999px;
}

.gallery-tag-after {
  background: var(--accent);
  color: var(--bg-dark);
}

.gallery-item figcaption {
  padding: 14px 16px;
  font-size: 24px;
  color: var(--text-muted);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-snap-type: none; }
}

/* ================= FAQ ================= */

/* Bianca: alterna con packages-section, cream, cosi' le due sezioni restano
   distinguibili. max-width/margin spostati su .faq-list (come .how-steps
   per .how-it-works), altrimenti il background sarebbe rimasto chiuso nel
   riquadro centrale invece di coprire tutta la larghezza della sezione. */
.faq-section {
  padding: 72px 20px;
  background: #fff;
}

.faq-list {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* A differenza di how-step/package-card/gallery-item, faq-item segue lo
   sfondo della sezione (bianco qui) invece di contrastarci: si distingue
   comunque grazie a box-shadow. */
.faq-item {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 4px 20px;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 800;
  padding: 16px 0;
  list-style: none;
  position: relative;
  padding-right: 30px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 14px;
  font-size: 22px;
  font-weight: 900;
  /* --accent-dark su sfondo bianco resta a ~1.8:1, sotto la soglia 3:1 -
     quasi invisibile. --bg-dark (gia' usato per i link della nav) ci
     arriva a 8.7:1. */
  color: var(--bg-dark);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  margin: 0 0 18px;
  color: var(--text-muted);
}

/* ================= Dall'ultimo evento ================= */
/* Cream: continua l'alternanza bianco/cream (how bianca, questa cream,
   gallery bianca, packages cream, faq bianca) prima della sezione contatti,
   scura a se' - vedi commit "Home: alternanza sfondi tra sezioni". */
.last-event-section {
  background: var(--bg-light);
  padding: 72px 20px;
}

.last-event-meta {
  max-width: var(--max-width);
  margin: -12px auto 40px;
  text-align: center;
  font-weight: 800;
  font-size: 17px;
  color: var(--bg-dark);
}

.last-event-meta-dot {
  opacity: 0.45;
  margin: 0 8px;
}

/* Mosaico: griglia a 6 colonne con qualche tile 2x2 (una ogni 7, vedi
   nth-child sotto) per un effetto dinamico invece di una griglia uniforme -
   dense riempie i buchi lasciati dai tile grandi invece di lasciare spazi
   vuoti nell'ordine naturale del flusso. Ogni tile parte invisibile/
   rimpicciolito e passa a is-visible via IntersectionObserver in home.js,
   un tile alla volta (ingresso a scaglioni) invece che tutti insieme -
   nessuna animazione se prefers-reduced-motion (home.js salta l'observer,
   il transition-duration globale a 0.01ms qui sotto la rende comunque
   istantanea come rete di sicurezza). */
.last-event-mosaic {
  max-width: 1366px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 110px;
  grid-auto-flow: dense;
  gap: 10px;
}

.last-event-tile {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.last-event-tile.is-visible {
  opacity: 1;
  transform: scale(1);
}

.last-event-tile a {
  display: block;
  width: 100%;
  height: 100%;
}

.last-event-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.last-event-tile:nth-child(7n+1) {
  grid-column: span 2;
  grid-row: span 2;
}

/* Swap mobile (sotto i 480px, vedi media query): una sola foto alla volta
   con dissolvenza incrociata (home.js alterna is-active ogni 2.6s), non il
   carousel prima/dopo - quel componente e' scritto per un'unica istanza
   per pagina e qui serve solo uno scorrimento passivo, non frecce/swipe. */
.last-event-swap {
  display: none;
}

@media (max-width: 720px) {
  .last-event-mosaic {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 92px;
  }
}

@media (max-width: 480px) {
  .last-event-meta-dot { display: none; }

  .last-event-meta-date {
    display: block;
  }

  .last-event-meta-bar { display: none; }

  .last-event-meta-client {
    display: block;
  }

  .last-event-mosaic { display: none; }

  .last-event-swap {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  /* Swipe nativo via scroll-snap (stessa tecnica del carousel prima/dopo,
     vedi .carousel-track) invece del cross-fade a tempo di prima: qui
     l'ospite scorre le foto col dito invece di aspettare il cambio
     automatico. */
  .last-event-swap-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    scrollbar-width: none;
  }

  .last-event-swap-track::-webkit-scrollbar { display: none; }

  .last-event-swap-link {
    flex: 0 0 100%;
    aspect-ratio: 1 / 1;
    scroll-snap-align: center;
    display: block;
  }

  .last-event-swap-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* ================= Contatti ================= */

.contact-section {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: 72px 20px;
}

.contact-section h2,
.contact-section .section-subtitle {
  color: var(--text-on-dark);
}

.contact-section .section-subtitle { opacity: 0.85; }

.contact-form {
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row { display: flex; flex-direction: column; gap: 6px; }

.form-row label { font-weight: 700; font-size: 14px; }

.form-row input,
.form-row select,
.form-row textarea {
  font: inherit;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: none;
  background: #fff;
  color: var(--text-dark);
}

.form-row textarea { resize: vertical; min-height: 90px; }
.form-row select { cursor: pointer; }

.contact-form .btn-cta {
  align-self: center;
  margin-top: 8px;
}

.contact-form .cf-turnstile {
  align-self: center;
}

.contact-form .form-hint {
  display: none;
  align-self: center;
  text-align: center;
  font-size: 12px;
  opacity: 0.75;
  margin: -8px 0 0;
}

/* Checkbox obbligatoria (vedi ContactRequestIn.privacy_consent in app.py):
   riga propria, non un altro .form-row (quelli sono per campi di testo con
   label sopra, qui serve testo+checkbox affiancati). */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}

.form-consent input { margin-top: 3px; flex: 0 0 auto; cursor: pointer; }
.form-consent a { text-decoration: underline; }

.form-status {
  text-align: center;
  min-height: 22px;
  font-weight: 700;
  margin: 4px 0 0;
}

.form-status.error { color: #FFB4AB; }
.form-status.success { color: var(--accent); }

.contact-thankyou {
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.contact-thankyou-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-dark);
  font-size: 28px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-thankyou-text {
  font-weight: 700;
  font-size: 18px;
  margin: 0;
}

/* ================= Footer ================= */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 20px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.site-footer p { margin: 0; }

.footer-logo { width: 48px; height: 48px; border-radius: 10px; margin-bottom: 4px; }

.footer-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--bg-dark);
}

.footer-slogan {
  font-weight: 700;
  color: var(--bg-dark);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 14px;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: underline;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--bg-dark);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.footer-social-label {
  font-weight: 700;
  color: var(--text-muted);
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--text-muted);
  background: rgba(31, 78, 121, 0.08);
  transition: color 0.15s ease, background 0.15s ease;
}

.footer-social-icon svg {
  width: 16px;
  height: 16px;
}

.footer-social-icon:hover,
.footer-social-icon:focus-visible {
  color: #fff;
  background: var(--bg-dark);
}

/* ================= Pagina privacy ================= */
/* Testata lunga da leggere top-to-bottom (non sezioni affiancate come la
   home): titoli a sinistra invece che centrati, colonna piu' stretta di
   --max-width per non stirare le righe di testo. */

.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}

.legal-page h1 {
  font-size: clamp(28px, 4vw, 38px);
  text-align: left;
}

.legal-page h2 {
  font-size: 21px;
  text-align: left;
  margin-top: 32px;
}

.legal-page p {
  color: var(--text-dark);
  margin: 0 0 14px;
}

.legal-page a { text-decoration: underline; }

.legal-back {
  display: inline-block;
  margin-bottom: 24px;
  font-weight: 700;
  text-decoration: none;
}

.legal-back:hover,
.legal-back:focus-visible { text-decoration: underline; }