/* ============================================================
   «ROTATIVA» — contact.css: la sola pagina Contatti.
   Griglia asimmetrica scheda-modulo | recapiti e mappa, campi
   con bersaglio pieno. Dal blocco 4 (6/9/2026) il modulo è vivo:
   asterischi degli obbligatori (scelta di Giorgio),
   messaggi d'errore rossi sotto i campi, riepilogo
   in cima alla scheda, riga di aiuto del bottone spento,
   contatore del racconto, honeypot fuori schermo e la SCOSSA del
   campo sbagliato (animazione decisa da Giorgio il 6/9, regola 8;
   ferma con prefers-reduced-motion).
   La mappa è un'immagine di OpenStreetMap: il credito in pagina
   è richiesto dalla licenza, non è decorazione. Dal blocco 5
   (7/9/2026) sotto la figura c'è la riga con l'avviso e due
   bottoni uguali (il consenso e il link a Google Maps); con
   «Accetta» la cornice ospita l'iframe di Google Maps (.map-embed).
   ============================================================ */

/* le due colonne finiscono insieme: la mappa cresce fino all'altezza del
   modulo, invece di lasciare un vuoto di 300px prima del piede */
.contact-grid{
  display:grid;grid-template-columns:1fr .8fr;
  gap:clamp(1.75rem,3.5vw,3rem);align-items:stretch;
}
.contact-column{display:flex;flex-direction:column}

/* ============ LA SCHEDA DEL MODULO ============ */
.form-card{
  position:relative;   /* l'honeypot si posiziona rispetto alla scheda */
  background:var(--paper);
  border:1px solid var(--border);
  padding:1.75rem 1.5rem;
}
@media (min-width:900px){.form-card{padding:2.5rem 2.25rem}}
.form-card h2{font-size:1.625rem;margin-bottom:1.5rem}
/* il sottotitolo sotto il titolo della scheda (giro a vista del 6/9): più piccolo, grigio chiaro (5,0:1 su carta) */
.form-subtitle{font-size:.9375rem;line-height:1.5;color:var(--gray-3);margin:-1rem 0 1.25rem;max-width:none}
.form-card form{display:flex;flex-direction:column;gap:1.1rem}
.fields-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field-label{font-size:.9375rem;font-weight:600;color:var(--ink)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:1.0625rem;color:var(--ink);
  background:#FFFFFF;
  border:1px solid var(--field-line);
  border-radius:3px;
  padding:.7rem .85rem;min-height:48px;
  width:100%;
}
.field textarea{resize:vertical;line-height:1.6;min-height:140px}
.field input::placeholder,.field textarea::placeholder{color:var(--gray-3)}
/* finché resta su «Seleziona…» la tendina parla da segnaposto, non da risposta */
.field select:has(option[value=""]:checked){color:var(--gray-3)}
/* Fuoco sui campi in inchiostro scuro, non in rosso (Giorgio, giro a vista dell'8/9/2026, blocco 6): il rosso
   resta solo agli errori (.is-invalid), così un campo attivo non sembra sbagliato. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink);
}

/* la frase ha valore legale: mai da postilla */
/* 15 px come le etichette: a 16 px la frase sforava di 3 px la riga della scheda e andava a capo
   (giro a vista del 6/9) */
.consent{display:flex;align-items:flex-start;gap:.75rem;font-size:.9375rem;line-height:1.6;color:var(--gray-1)}
.consent input{flex:none;width:22px;height:22px;margin-top:.15rem;accent-color:var(--red)}
.demo-note{
  font-size:.9375rem;line-height:1.6;color:var(--gray-2);
  background:var(--sand);
  border:1px solid var(--border);
  padding:.85rem 1rem;
  max-width:none;
}
.form-card .button{width:100%;text-align:center}

/* ============ IL MODULO VIVO (blocco 4) ============ */
/* l'asterisco degli obbligatori (la legenda sotto il titolo è stata tolta da Giorgio al giro a vista del 6/9) */
.required-mark{color:var(--red);font-weight:700}
.field-counter{font-size:.875rem;line-height:1.5;color:var(--gray-2);max-width:none}
.field-counter.is-over{color:var(--red);font-weight:600}
/* il messaggio d'errore: rosso pieno sotto il campo, nascosto finché non serve (il JS lo riempie) */
.field-error{display:block;font-size:.9375rem;line-height:1.5;color:var(--red);font-weight:600}
.field-error[hidden]{display:none}
.field input.is-invalid,.field select.is-invalid,.field textarea.is-invalid{
  border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);
}
.consent.is-invalid input{box-shadow:0 0 0 2px var(--red)}   /* l'outline resta al fuoco (WCAG 2.4.7) */
/* il riepilogo in cima alla scheda: fascia sabbia col filetto rosso a sinistra, i messaggi portano al campo */
.form-errors{
  background:var(--sand);border:1px solid var(--border);border-left:4px solid var(--red);
  padding:.9rem 1.1rem;font-size:1rem;line-height:1.6;color:var(--ink);
}
.form-errors p{max-width:none;font-weight:600}
.form-errors ul{list-style:disc;padding-left:1.25rem;margin-top:.35rem}
.form-errors li+li{margin-top:.2rem}
.form-errors a{color:var(--red)}
/* la riga di aiuto sopra il bottone spento (regione aria-live) */
.form-help{
  font-size:.9375rem;line-height:1.5;color:var(--gray-2);text-align:center;max-width:none;margin-bottom:-.35rem;
}
/* il bottone d'invio (richieste di Giorgio al giro a vista del 6/9): l'ombra sotto il bottone è dello stesso rosso del
   fondo (non la bruna delle schede) e, quando è spento, il bottone tiene il suo colore sbiadito al 60 % col cursore
   normale, come i bottoni disattivati di PrimeNG (niente grigio) */
.form-card .button-solid{box-shadow:0 4px 12px rgba(178,30,40,.32)}
.form-card .button-solid:hover{box-shadow:0 4px 12px rgba(142,23,33,.36)}
.form-card .button[disabled],.form-card .button[disabled]:hover{
  background:var(--red);box-shadow:0 4px 12px rgba(178,30,40,.32);opacity:.6;cursor:default;
}
/* l'honeypot: fuori dallo schermo, non display:none (molti robot saltano ciò che è nascosto così) */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* la scossa del campo sbagliato: 4 px a destra e a sinistra per 0,3 s, solo quando l'errore è nuovo */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-4px)}
  40%,80%{transform:translateX(4px)}
}
@media (prefers-reduced-motion:no-preference){
  .is-shaking{animation:shake .3s var(--ease-soft)}
}

/* ============ RECAPITI ============ */
.contact-list{list-style:none;display:flex;flex-direction:column;gap:.75rem}
.contact-item{
  display:flex;align-items:center;gap:1rem;
  background:var(--paper);border:1px solid var(--border);
  padding:1rem 1.1rem;
}
.contact-item .disc{width:42px;height:42px}
.contact-item .disc svg{width:19px;height:19px}
.contact-label{
  display:block;
  font-size:.75rem;font-weight:600;line-height:1.3;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-2);
}
.contact-value{display:block;font-size:1.0625rem;line-height:1.45;color:var(--ink);margin-top:.2rem}
.contact-item a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.contact-item a:hover{color:var(--red)}

/* ============ LA MAPPA ============ */
.map{
  margin:1.1rem 0 0;border:1px solid var(--border);background:var(--paper);
  display:flex;flex-direction:column;flex:1;min-height:260px;
}
.map-frame{position:relative;overflow:hidden;flex:1;min-height:230px}
.map img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.22) contrast(1.05)}
.map-pin{
  position:absolute;left:50%;top:50%;
  width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 4px rgba(178,30,40,.28);
  pointer-events:none;
}
.map figcaption{padding:.6rem .85rem;font-size:.75rem;color:var(--gray-2)}
.map figcaption a{color:var(--gray-2);text-decoration:underline;text-underline-offset:2px}
.map figcaption a:hover{color:var(--red)}
/* con «Accetta» la mappa di Google riempie la cornice (blocco 5); la figura riceve il fuoco dal JS (tabindex -1) */
.map-embed{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* Scheletro di caricamento della mappa di Google (blocco 6, 8/9/2026, animazione decisa da Giorgio al giro a
   vista: il riquadro restava bianco finché Google non disegnava; resa alla PrimeNG Skeleton): consent.js mette
   nella cornice un .map-skeleton con quattro forme arrotondate (tre barre e un blocco grande) su cui scorre un
   riflesso chiaro, e lo toglie all'evento load dell'iframe; intanto l'iframe è trasparente (.is-loading) e poi
   appare in dissolvenza. Con prefers-reduced-motion le forme restano ferme, senza riflesso né dissolvenza. */
.map-skeleton{
  position:absolute;inset:0;z-index:2;background:#f1efea;
  padding:1.4rem;display:flex;flex-direction:column;gap:.9rem;pointer-events:none;
}
.map-skeleton span{display:block;position:relative;overflow:hidden;border-radius:6px;background:#dcd8cf;height:.9rem}
.map-skeleton span:nth-child(1){width:55%;height:1.15rem}
.map-skeleton span:nth-child(2){width:80%}
.map-skeleton span:nth-child(3){width:40%}
.map-skeleton span:nth-child(4){flex:1;width:100%;height:auto;border-radius:10px}
.map-skeleton span::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
}
.map-frame.is-loading .map-embed{opacity:0}
@keyframes shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:no-preference){
  .map-skeleton span::after{animation:shimmer 1.3s ease-in-out infinite}
  .map-embed{transition:opacity .4s var(--ease-soft)}
}
.map:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* sotto la figura, senza scelta o dopo «Rifiuta» (giro a vista del 7/9): una riga di avviso e due bottoni uguali,
   il modulo del consenso («Mostra la mappa di Google») e il link che apre Google Maps */
.map-choice{margin-top:.85rem}
.map-choice-note{margin:0 0 .6rem;max-width:none;font-size:.9375rem;line-height:1.5;color:var(--gray-2)}
.map-choice-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.map-choice .consent-form{flex:1 1 12rem}
.map-open{flex:1 1 12rem;text-align:center}
.map-choice .consent-form .button,.map-open{font-size:.9375rem;padding:.7rem .9rem;min-height:44px}

/* ===== RESPONSIVE — modulo ===== */
@media (max-width:960px){
  .contact-grid{grid-template-columns:1fr;gap:1.75rem}
  .map{flex:none;min-height:0}
  .map-frame{min-height:220px}
}
@media (max-width:560px){
  .fields-pair{grid-template-columns:1fr}
}