/* =========================================================
   HOMEPAGE — i blocchi di ottobre 2026 (template-parts/home-blocchi.php)
   La home non carica pagine.css: le poche regole che le servono
   (segnaposto delle foto, .foto, domande frequenti) sono copiate
   qui sotto, uguali all'originale.
   Ritmo dei fondi: avorio chiaro / avorio alternati, una sola scena
   fotografica (il catering) a meta' pagina.
   ========================================================= */

/* --- da pagine.css --- */
/* ---------- segnaposto immagine ---------- */
.ph{position:relative;background:
      repeating-linear-gradient(45deg,rgba(184,137,63,.07) 0 12px,transparent 12px 24px),
      var(--avorio-2);
    border:1px solid var(--linea);display:flex;align-items:center;justify-content:center;
    text-align:center;overflow:hidden}
/* la cornice decorativa passa su outline, cosi' ::before resta libero
   per la targhetta col codice dello slot */
.ph{outline:1px solid rgba(184,137,63,.35);outline-offset:-10px}
.ph::before{content:attr(data-slot);position:absolute;top:12px;left:12px;z-index:2;
    font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;
    padding:5px 7px;border:1px solid rgba(184,137,63,.5);color:var(--oro-scuro);
    background:rgba(255,255,255,.75);pointer-events:none}
.ph:not([data-slot])::before{content:none}
.ph::after{content:attr(data-ph);position:relative;z-index:1;max-width:34ch;padding:0 18px;
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-scuro);line-height:1.7}
.ph--dark{background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 12px,transparent 12px 24px),#2E2A26;border-color:rgba(255,255,255,.16)}
.ph--dark{outline-color:rgba(216,199,164,.3)}
.ph--dark::before{border-color:rgba(216,199,164,.45);color:#E6D8B8;background:rgba(0,0,0,.45)}
.ph--dark::after{color:#D8C7A4}
.ph--1x1{aspect-ratio:1/1}
.ph--4x3{aspect-ratio:4/3}
.ph--3x2{aspect-ratio:3/2}
.ph--3x4{aspect-ratio:3/4}
.ph--16x9{aspect-ratio:16/9}
.ph--fill{position:absolute;inset:0;border:none;outline:none}
.foto{display:block;width:100%;height:auto;object-fit:cover;background:var(--avorio-2)}
.faq{padding:80px 32px;background:var(--avorio-2);border-top:1px solid var(--linea)}
.faq__in{max-width:var(--wrap);margin:0 auto}
.faq__lista{max-width:80ch;margin-top:24px;border-top:1px solid var(--linea)}
.faq__voce{border-bottom:1px solid var(--linea)}

/* La riga cliccabile. list-style e ::-webkit-details-marker tolgono il
   triangolino di sistema, che stona; la freccia la disegniamo noi. */
.faq__d{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
    padding:19px 4px;cursor:pointer;list-style:none;
    -webkit-tap-highlight-color:transparent}
.faq__d::-webkit-details-marker{display:none}
.faq__t{font-family:var(--serif);font-size:1.28rem;line-height:1.3;
    color:var(--inchiostro);margin:0;font-weight:500;text-wrap:balance;
    transition:color .3s var(--curva)}

/* Freccia in due tratti: guarda in basso da chiusa, in alto da aperta.
   margin-top la allinea alla prima riga del titolo, non al centro del
   blocco, altrimenti su domande di due righe scivola in mezzo. */
.faq__d::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-top:.42em;
    border-right:1.5px solid var(--oro-scuro);border-bottom:1.5px solid var(--oro-scuro);
    transform:rotate(45deg);transform-origin:60% 60%;
    transition:transform .3s var(--curva)}
.faq__voce[open] > .faq__d::after{transform:rotate(-135deg)}
.faq__d:focus-visible{outline:2px solid var(--oro);outline-offset:2px;
    border-radius:var(--r-min)}
@media(hover:hover){ .faq__d:hover .faq__t{color:var(--ottanio)} }

.faq__r{font-size:15.5px;line-height:1.7;color:var(--inchiostro-soft);
    margin:0;padding:0 34px 24px 4px;max-width:68ch}
.faq__r a{color:var(--ottanio);text-decoration:underline;
    text-decoration-color:var(--linea);text-underline-offset:3px}
.faq__r a:hover{text-decoration-color:currentColor}

/* <details> non sa animare l'altezza: si anima la risposta, che entra
   quando compare. Niente salto per chi ha chiesto meno movimento. */
@media(prefers-reduced-motion:no-preference){
  .faq__voce[open] > .faq__r{animation:faqApre .3s var(--curva) both}
}
@keyframes faqApre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Variante di orientamento: sta in mezzo alla pagina e non la deve spezzare,
   quindi niente fascia di fondo e testo piu' contenuto. */
.faq--guida{background:none;border-top:0;padding:54px 32px 10px}
.faq--guida .faq__lista{margin-top:18px}
.faq--guida .faq__d{padding:16px 4px}
.faq--guida .faq__t{font-size:1.12rem}
.faq--guida .faq__r{font-size:15px;padding-bottom:20px}

@media(max-width:900px){
  .faq{padding:60px 22px}
  .faq--guida{padding:40px 22px 4px}
  .faq__t{font-size:1.14rem}
  .faq__r{padding-right:8px}
}

/* --- impianto comune dei blocchi --- */
.h-wrap{max-width:var(--wrap);margin:0 auto}
.h-testa{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.h-testa h2{font-size:clamp(1.8rem,3vw,2.6rem);margin-top:10px;text-wrap:balance}
.h-testa .link{white-space:nowrap}

/* chi siamo */
.h-capsula{background:var(--avorio-2);padding:96px 32px 88px;text-align:center;border-bottom:1px solid var(--linea)}
.h-capsula__in{max-width:780px;margin:0 auto;display:grid;gap:26px;justify-items:center}
.h-capsula__testo{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.45;color:var(--inchiostro);text-wrap:balance}
.h-capsula__dati{list-style:none;margin:0;padding:0;width:100%;max-width:700px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border-top:1px solid var(--linea);padding-top:24px}
.h-capsula__dati li,.h-capsula__dati a{display:grid;gap:4px;justify-items:center;align-content:start;text-align:center}
.h-capsula__dati strong{font-family:var(--serif);font-size:2rem;line-height:1;font-weight:500;color:var(--accento);
  /* cifre "moderne", tutte della stessa altezza: con quelle all'antica di
     Cormorant il 7 scende sotto la riga e sembra piu' basso del 6 */
  font-variant-numeric:lining-nums}
.h-capsula__dati span{font-size:13px;line-height:1.45;color:var(--inchiostro-soft)}
.h-capsula__dati a{color:inherit;text-decoration:none;border-radius:var(--r-min)}
.h-capsula__dati a span{text-decoration:underline;text-decoration-color:var(--linea);text-underline-offset:3px}
.h-capsula__dati a:hover span{text-decoration-color:currentColor;color:var(--inchiostro)}
.h-capsula__dati a:focus-visible{outline:2px solid var(--accento);outline-offset:4px}

/* le sei porte: due righe da tre, illustrazione sopra il testo.
   Ogni porta e' una sottogriglia di cinque righe (illustrazione, nome,
   titolo, testo, invito) che prende l'altezza dalla griglia comune: cosi'
   nella stessa fila i titoli, i testi e gli inviti partono tutti alla
   stessa altezza, anche quando un testo e' piu' lungo degli altri. */
.h-porte{padding:80px 32px 88px;background:var(--avorio)}
.h-porte__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:32px;row-gap:28px}
.h-porta{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
.h-porta a{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:8px;justify-items:center;text-align:center;
  padding:18px 22px 22px;border:1px solid transparent;border-radius:var(--r-max);color:var(--inchiostro);text-decoration:none;
  transition:background .3s,border-color .3s,transform .3s var(--curva)}
.h-porta a:hover{background:var(--avorio-2);border-color:var(--linea);transform:translateY(-3px)}
.h-porta a:focus-visible{outline:2px solid var(--accento);outline-offset:2px}
.h-porta__arte{display:block;width:100%;max-width:220px;aspect-ratio:1/1;align-self:end}
.h-porta__arte img{width:100%;height:100%;object-fit:contain;opacity:.85}
.h-porta__nome{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accento);margin-top:4px}
.h-porta__titolo{font-family:var(--serif);font-size:clamp(1.3rem,1.7vw,1.5rem);font-weight:500;line-height:1.2;text-wrap:balance;margin:0}
.h-porta__testo{font-size:14.5px;line-height:1.6;color:var(--inchiostro-soft);max-width:36ch}
.h-porta__invito{align-self:end;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accento)}
.h-porta a:hover .h-porta__invito{text-decoration:underline;text-underline-offset:4px}

/* shop */
.h-shop{padding:110px 32px;background:var(--avorio-2);border-top:1px solid var(--linea)}
.h-prodotti{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.h-prodotto a{display:grid;gap:10px;color:var(--inchiostro);text-decoration:none}
/* Le foto dei prodotti sono su fondo bianco. Con la fusione "moltiplica"
   il bianco prende il colore del fondo della fascia e il prodotto resta
   com'e': sembra appoggiato sulla pagina, non dentro un riquadro.
   Il riquadro ha lo STESSO colore del fondo della fascia: durante la
   dissolvenza d'entrata (.reveal, con opacity e transform) il browser isola
   il blocco e la fusione non vede piu' la pagina dietro; con il colore qui
   la foto si fonde col riquadro e non lampeggia bianca. */
.h-prodotto__foto{display:block;aspect-ratio:1/1;border-radius:var(--r-max);overflow:hidden;background:var(--avorio-2);isolation:isolate}
.h-prodotto__foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .6s var(--curva)}
.h-prodotto a:hover .h-prodotto__foto img{transform:scale(1.04)}
.h-prodotto__nome{font-family:var(--serif);font-size:1.25rem;line-height:1.2}
.h-prodotto__prezzo{font-size:14px;color:var(--inchiostro-soft)}
.h-prodotto__prezzo del{opacity:.6;margin-right:6px}
.h-prodotto__prezzo ins{text-decoration:none;color:var(--accento)}
.h-prodotto__prezzo .rs-omnibus{display:block;font-size:12px;margin-top:2px}

/* storia */
.h-storia{padding:110px 32px;background:var(--avorio)}
.h-tappe{list-style:none;margin:0;padding:30px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px;
  border-top:1px solid var(--linea)}
.h-tappa{display:grid;gap:8px;align-content:start}
.h-tappa__foto{display:block;border-radius:var(--r-min);overflow:hidden;margin-bottom:6px}
.h-tappa__foto .foto,.h-tappa__foto .ph{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.h-tappa__anno{font-family:var(--serif);font-size:2.2rem;line-height:1;color:var(--accento);font-variant-numeric:lining-nums}
.h-tappa__titolo{font-family:var(--serif);font-size:1.2rem;font-weight:500;line-height:1.25}
.h-tappa p{font-size:14.5px;line-height:1.6;color:var(--inchiostro-soft)}

/* locali */
.h-locali{padding:110px 32px;background:var(--avorio-2);border-top:1px solid var(--linea)}
.h-indirizzi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.h-indirizzo a{display:grid;gap:4px;height:100%;padding:22px 24px;border:1px solid var(--linea);border-radius:var(--r-max);
  background:var(--avorio);color:var(--inchiostro);text-decoration:none;transition:border-color .3s,transform .3s var(--curva)}
.h-indirizzo a:hover{border-color:var(--accento);transform:translateY(-2px)}
.h-indirizzo a:focus-visible{outline:2px solid var(--accento);outline-offset:2px}
.h-indirizzo__nome{font-family:var(--serif);font-size:1.3rem}
.h-indirizzo__dove,.h-indirizzo__orari{font-size:14px;color:var(--inchiostro-soft)}
.h-stato{justify-self:start;margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px}
.h-stato--aperto{color:#22693A;background:#E5F3EA}
.h-stato--chiuso{color:var(--inchiostro-soft);background:var(--avorio-2);border:1px solid var(--linea)}

/* catering */
.h-catering{position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:110px 32px;color:#fff;text-align:center}
.h-catering__foto{position:absolute;inset:0}
.h-catering__foto .foto,.h-catering__foto .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-catering__velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.62))}
.h-catering__in{position:relative;max-width:680px;display:grid;gap:18px;justify-items:center}
.h-catering__in .overline{color:#E6D3AD}
.h-catering__in h2{font-size:clamp(2rem,4vw,3.2rem);text-wrap:balance}
.h-catering__in p{color:rgba(255,255,255,.9);line-height:1.7}
.h-catering__azioni{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:center;margin-top:8px}
.link--chiaro{color:#fff}

/* diario */
.h-diario{padding:110px 32px;background:var(--avorio)}
.h-articoli{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.h-articolo a{display:grid;gap:10px;color:var(--inchiostro);text-decoration:none}
.h-articolo__foto{display:block;aspect-ratio:3/2;border-radius:var(--r-max);overflow:hidden;background:var(--avorio-2)}
.h-articolo__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--curva)}
.h-articolo a:hover .h-articolo__foto img{transform:scale(1.04)}
/* senza foto: l'illustrazione a china, piccola e centrata, invece del vuoto */
.h-articolo__china{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--avorio-2)}
.h-articolo__china img{width:52%;height:auto;object-fit:contain;opacity:.7}
.h-articolo a:hover .h-articolo__china img{transform:none}
.h-articolo__titolo{font-family:var(--serif);font-size:1.35rem;line-height:1.25}
.h-articolo__sunto{font-size:14.5px;line-height:1.6;color:var(--inchiostro-soft)}

/* domande: fondo chiaro, con titolo vero; la citazione dopo torna avorio */
.faq--home{background:var(--avorio-2);border-top:1px solid var(--linea)}
.faq__titolo{font-size:clamp(1.8rem,3vw,2.6rem);margin-top:10px;text-wrap:balance}
/* "~" e non "+": fra le due c'e' lo <script> dei dati strutturati delle domande */
.faq--home ~ .quote{background:var(--avorio);border-top:1px solid var(--linea)}

@media(max-width:1100px){
  .h-porte__lista{column-gap:18px;row-gap:22px}
  .h-porta a{padding:18px 12px 20px}
}
@media(max-width:980px){
  .h-prodotti{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-tappe{grid-template-columns:repeat(3,minmax(0,1fr))}
  .h-indirizzi,.h-articoli{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .h-capsula,.h-shop,.h-storia,.h-locali,.h-diario{padding:64px 22px}
  .h-catering{padding:80px 22px;min-height:70vh}
  .h-testa{margin-bottom:26px}
  .h-capsula__dati{gap:10px}
  .h-capsula__dati strong{font-size:1.6rem}
  .h-capsula__dati span{font-size:12px}
  /* porte: fila da scorrere, come shop, storia e diario */
  .h-porte{padding:56px 22px 60px}
  .h-porta{display:block}
  .h-porta a{grid-template-rows:none;height:100%;padding:18px 16px 20px;background:var(--avorio-2);border-color:var(--linea)}
  .h-porta__arte{max-width:170px}
  /* locali: schede piu' basse, una sotto l'altra */
  .h-indirizzi{grid-template-columns:1fr;gap:10px}
  .h-indirizzo a{padding:14px 16px;gap:2px;border-radius:var(--r-min)}
  .h-indirizzo__nome{font-size:1.15rem}
  .h-indirizzo__dove,.h-indirizzo__orari{font-size:13.5px}
  .h-stato{margin-top:6px}
  /* shop, storia e diario: una fila da scorrere col dito invece di una colonna
     lunga tre schermate; la scheda successiva si intravede a destra */
  .h-scorri{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:22px;
    margin:0 -22px;padding:0 22px 6px;scrollbar-width:none;border-top:0;-webkit-overflow-scrolling:touch}
  .h-scorri::-webkit-scrollbar{display:none}
  .h-scorri > li{flex:0 0 78%;scroll-snap-align:start}
  .h-prodotti.h-scorri > li{flex-basis:62%}
  .h-tappe.h-scorri{padding-top:0}
}