/* =============================================================================
   DE LUX 21 — Pagine editoriali (regione, produttori, produttore, chi-siamo, contatti)
   ========================================================================== */

/* --- REGIONE: divisore cartografico --------------------------------------- */
.regione-hero { position: relative; min-height: 70vh; display: flex; align-items: center; text-align: center; background: var(--surface); overflow: hidden; }
/* Parallax header: il layer mappa e' piu' alto della sezione cosi' la corsa
   (parallax.js, evidente) non scopre mai i bordi. La sezione ha overflow:hidden. */
.regione-hero[data-parallax] > .pencil-bg { inset: -40% 0; }
.regione-hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 50%, transparent), color-mix(in srgb, var(--bg) 20%, transparent)); }
/* con una mappa-foto caricata il veil si alleggerisce, cosi' la cartografia
   resta leggibile sotto il titolo (fallback sicuro: senza :has resta il veil pieno) */
.regione-hero:has(.pencil-bg--photo) .regione-hero__veil {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 22%, transparent), color-mix(in srgb, var(--bg) 6%, transparent));
}
.regione-hero__content { position: relative; z-index: 1; width: 100%; }
.regione-hero__title { font-size: clamp(3.5rem, 13vw, 11rem); color: var(--accent); line-height: .9; overflow-wrap: break-word; }
/* Il nome del territorio e' UNA parola sola e in corpo grande: sotto i 340 px
   "Champagne" chiede 304 px in una colonna da 280 e finisce tagliato dal
   riquadro (che ha overflow hidden), quindi si perde l'ultima lettera senza
   che niente lo dica. Il pavimento del clamp scende SOLO qui, cosi' sopra i
   380 px non cambia un pixel. `overflow-wrap` e' la rete per il giorno in cui
   arriva un nome piu' lungo di "Franciacorta". */
@media (max-width: 380px) {
  .regione-hero__title { font-size: clamp(2.4rem, 12vw, 3.5rem); }
}
.regione-hero__compass { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 1.5rem 0; color: var(--accent); }
.regione-hero__compass .line { height: 1px; width: clamp(40px, 12vw, 160px); background: var(--accent); }
.regione-hero__coord { font-size: 1rem; letter-spacing: .2em; }

/* --- Produttori griglia ---------------------------------------------------- */
.produttori-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.5rem); }
@media (max-width: 900px) { .produttori-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .produttori-grid { grid-template-columns: 1fr; } }
.produttore-card { background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-card); padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: .6rem; transition: transform .4s var(--ease-emph), box-shadow .4s; }
.produttore-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(0,0,0,.35); }
/* Riquadro del logo maison. Altezza fissa e object-fit contain perche' i loghi
   hanno proporzioni molto diverse fra loro, da 600x127 a 600x600: senza un
   riquadro comune le card della griglia partirebbero tutte da altezze diverse. */
.produttore-card__logo { display: flex; align-items: center; height: 56px; margin-bottom: .8rem; }
.produttore-card__logo img { max-height: 100%; max-width: 180px; width: auto; object-fit: contain; }
.produttore-card__name { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.05; }
.produttore-card__sede { font-size: .8rem; }
.produttore-card .link-arrow { margin-top: .6rem; align-self: flex-start; }

/* --- Produttore singolo ---------------------------------------------------- */
.produttore-hero { padding-block: clamp(3rem, 7vw, 6rem); }
/* Logo della maison in testa alla scheda. Sta sopra all'occhiello e al titolo,
   con un margine sotto che lo stacca dal testo. Altezza contenuta: e' una firma,
   non un'insegna, e non deve rubare la scena al nome. */
.produttore-hero__logo { margin-bottom: 1.4rem; }
.produttore-hero__logo img { height: auto; max-height: 72px; max-width: 240px; width: auto; display: block; }
@media (max-width: 720px) { .produttore-hero__logo img { max-height: 56px; max-width: 190px; } }
/* Mappa del territorio in trasparenza dietro la scheda produttore: stessa
   intensita' della scheda prodotto, altrimenti a .72 coprirebbe il testo. */
.produttore-hero .pencil-bg--photo { opacity: .13; }
/* Foto della cantina caricata da admin: prende il posto della mini-mappa. */
.produttore-hero__foto img { width: 100%; max-width: 460px; margin-inline: auto; display: block;
  border-radius: 4px; border: var(--hairline) solid var(--line); aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Chi siamo ------------------------------------------------------------- */
.chisiamo-hero { padding-block: clamp(4rem, 9vw, 8rem) clamp(2rem, 4vw, 4rem); }

/* --- Chi siamo: "Come lavoriamo" -------------------------------------------
   Ha preso il posto della fascia navy "La missione" il 07/09/2026. Quella era
   centrata su fondo scuro e reggeva una frase sola; questo e' un documento che
   scrive il cliente, quindi fondo chiaro, con la misura di lettura che gli da'
   gia' .documento. Tutto centrato (richiesta 07/09/2026) per stare in asse con
   l'occhiello e il titolo in cima alla pagina, che sono centrati anche loro. */
.lavoro { border-top: var(--hairline) solid var(--line); }
.lavoro__segno { display: block; margin-inline: auto; margin-bottom: 1.2rem; opacity: .7; }
/* --- Chi siamo: la foto di tutti e tre (16/09/2026) --------------------------
   Sta subito sotto il titolo, a tutta larghezza della colonna. Proporzione
   FISSA a 16:9 con object-fit cover, come gia' fa la galleria di cantina: le
   foto d'evento arrivano in ogni formato, e senza un vincolo una verticale
   sfonderebbe la pagina spingendo le tre schede sotto la piega. */
.chisiamo-foto { margin: 0; }
.chisiamo-foto img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-card);
  border: var(--hairline) solid var(--line);
}
@media (max-width: 620px) { .chisiamo-foto img { aspect-ratio: 4 / 3; } }

/* --- Chi siamo: i tre soci ---------------------------------------------------
   TRE COLONNE DI TESTO, senza riquadri (richiesta cliente 16/09/2026,
   "eliminiamo le foto singole"). I riquadri bordeaux col numero dentro erano i
   segnaposto delle foto che non sono mai arrivate: tolte quelle dal disegno,
   restavano tre rettangoli colorati che promettevano un'immagine inesistente.

   Del numero resta un segno tipografico piccolo sopra il nome: serve a dire che
   sono tre percorsi distinti, che e' il senso della pagina, e costa una riga
   invece di mezza colonna.

   Le regole vecchie (.socio__media, .socio__num, .socio--rev, e la griglia a
   due colonne del singolo socio) NON stanno piu' qui: erano al servizio del
   riquadro e con lui se ne vanno. Chi le rimettesse si ritroverebbe il
   rettangolo bordeaux che il cliente ha chiesto di togliere. */
.soci {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.socio { display: block; }
.socio__indice {
  display: block; font-family: var(--font-ui); font-size: var(--fs-label);
  letter-spacing: .2em; color: var(--gold); margin-bottom: .5rem;
}
.socio__body h2 { font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
.socio__body .label { margin-top: .6rem; display: block; }
/* Sotto gli 860 px tre colonne diventano tre strisce strette: si impilano, e il
   testo torna a misura di lettura. */
@media (max-width: 860px) { .soci { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); } }

/* --- Contatti -------------------------------------------------------------- */
.contatti-info h2 { margin-top: .3rem; }
.contatti-list { display: flex; flex-direction: column; gap: 1.2rem; }
.contatti-list li { display: flex; flex-direction: column; gap: .2rem; font-family: var(--font-ui); padding-bottom: 1.2rem; border-bottom: var(--hairline) solid var(--line); }
.contatti-list a:hover { color: var(--accent); }

/* --- Galleria di cantina ----------------------------------------------------
   Griglia a proporzioni fisse. La scelta e' obbligata dal materiale: le foto
   delle cantine sono verticali 92 volte su 175, e Château de Suronde le ha
   verticali tutte e quattordici. Con le proporzioni vere quella galleria sarebbe
   una colonna di francobolli altissimi; con aspect-ratio fisso e object-fit
   cover la composizione regge qualunque miscela, e le proporzioni originali
   tornano nell'ingrandimento, che e' dove servono davvero. */
.galleria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: clamp(.6rem, 1.2vw, 1rem);
}
.galleria__voce {
  position: relative; display: block; overflow: hidden;
  border-radius: 3px; background: var(--surface);
  border: var(--hairline) solid var(--line);
}
.galleria__voce img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .6s var(--ease-emph), filter .4s ease;
}
.galleria__voce:hover img, .galleria__voce:focus-visible img { transform: scale(1.04); }
.galleria__voce:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.galleria__did {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .7rem .8rem .6rem; color: #fff; font-size: var(--fs-label);
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
}
@media (prefers-reduced-motion: reduce) {
  .galleria__voce img { transition: none; }
  .galleria__voce:hover img { transform: none; }
}

/* Ingrandimento. Nasce chiuso: senza JavaScript non viene mai aperto e le
   anteprime restano semplici link al file, che si aprono da soli. */
.lente {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: rgba(12, 12, 14, .93);
  padding: clamp(1rem, 4vw, 3rem);
}
.lente.is-on { display: flex; }
.lente__fig { margin: 0; max-width: min(1200px, 100%); max-height: 100%; display: flex;
  flex-direction: column; align-items: center; gap: .8rem; }
.lente__fig img {
  max-width: 100%; max-height: calc(100vh - 9rem);
  width: auto; height: auto; object-fit: contain; border-radius: 3px;
}
.lente__did { color: rgba(255,255,255,.82); font-family: var(--font-ui);
  font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.lente__btn {
  position: absolute; background: none; border: 0; cursor: pointer; padding: .8rem;
  color: rgba(255,255,255,.75); font-size: 2rem; line-height: 1; font-family: var(--font-ui);
}
.lente__btn:hover, .lente__btn:focus-visible { color: #fff; }
.lente__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lente__chiudi { top: .6rem; right: 1rem; font-size: 2.4rem; }
.lente__prec { left: .4rem; top: 50%; transform: translateY(-50%); }
.lente__succ { right: .4rem; top: 50%; transform: translateY(-50%); }
.lente__conta { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.55); font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: .12em; }
@media (max-width: 560px) {
  .lente__btn { font-size: 1.6rem; padding: .5rem; }
  .lente__chiudi { font-size: 2rem; }
}