/* ==========================================================================
   Home (templates/home.php). Regole in materiali/direzione.md.
   Valori letterali ammessi solo dove nessun token li copre, segnalati.
   ========================================================================== */

/* Rientro che allinea un testo al contenitore anche dentro un elemento a tutta
   larghezza (hero, fasce): meta' dello spazio fuori dal contenitore + il suo margine. */
.dg-hero, .dg-stagioni { --dg-rientro: max(var(--dg-space-3), calc((100vw - var(--dg-container-max)) / 2 + var(--dg-space-3))); }

/* ---------- Hero della stagione ---------- */
.dg-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-rows: 1fr auto;
	min-height: calc(100svh - 5rem);
	color: var(--dg-white);
	background: var(--dg-neutral-900);
}
.admin-bar .dg-hero { min-height: calc(100svh - 5rem - 32px); }

.dg-hero__slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.dg-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--dg-ease-standard); } /* 1s: DISSOLVENZA in hero.js */
.dg-hero__slide.is-attiva { opacity: 1; }
.dg-hero__media { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* La foto invernale ha l'insegna del negozio in alto: si inquadra l'ingresso. */
.dg-hero--inverno .dg-hero__slide--immagine .dg-hero__media { object-position: 50% 85%; }
@media (prefers-reduced-motion: reduce) { .dg-hero__slide { transition: none; } }

/* Il logo grande al centro, direttamente su foto e video (niente velo): scritta
   bianca, fiocco nel colore della stagione. Un'ombra morbida lo stacca dalle
   zone chiare dell'immagine. */
.dg-hero__marchio { display: grid; place-items: center; padding: var(--dg-ss-md) var(--dg-space-4); }
.dg-hero__marchio .dg-logo { width: min(30rem, 72vw); filter: drop-shadow(0 .125rem 1rem rgba(var(--dg-black-rgb), .35)); }
.dg-hero--inverno .dg-hero__marchio .dg-logo [id="fiocco"] { fill: var(--dg-primary-500); }
.dg-hero--estate .dg-hero__marchio .dg-logo [id="fiocco"] { fill: var(--dg-secondary-500); }

.dg-hero__piede { display: flex; align-items: flex-end; justify-content: space-between; }

/* Riquadro colorato agganciato al bordo sinistro: la larghezza e' rientro + spazio
   fisso del testo, cosi' il testo ha la stessa misura su ogni schermo. */
.dg-hero__riquadro {
	width: 100%;
	padding: var(--dg-space-5) var(--dg-space-4) var(--dg-space-5) var(--dg-rientro);
}
@media (min-width: 768px) {
	.dg-hero__riquadro {
		width: min(calc(var(--dg-rientro) + 36rem + var(--dg-space-5)), calc(100% - 5rem));
		padding-right: var(--dg-space-5);
	}
}
/* Testo sopra un colore: il 50 della famiglia se il fondo e' scuro, il 900 se chiaro (regola DIGIVAL). */
.dg-hero--inverno .dg-hero__riquadro { color: var(--dg-primary-50); background: var(--dg-primary-600); }
.dg-hero--estate .dg-hero__riquadro { color: var(--dg-secondary-900); background: var(--dg-secondary-500); }
/* Sul riquadro blu il riempimento blu del pulsante sparirebbe: qui e' chiaro. */
.dg-hero--inverno .dg-hero__riquadro .dg-btn { --dg-btn-riempimento: var(--dg-primary-50); --dg-btn-testo-hover: var(--dg-primary-900); }
.dg-hero__titolo {
	margin: 0 0 var(--dg-space-4);
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
	line-height: 1.1;
	color: inherit;
}

.dg-hero__comandi { display: none; align-items: flex-end; gap: var(--dg-space-3); margin: 0 var(--dg-rientro) var(--dg-space-4) 0; }
@media (min-width: 768px) { .dg-hero__comandi { display: flex; } }
/* Selettore delle slide come nel vecchio sito: barrette bianche arrotondate
   (la attiva si allunga) e, sotto, frecce bianche da 40px come allora.
   Allineato a vista al pulsante "giu'" (3.5rem): la barretta sta in cima alla
   sua riga di 1rem, cosi' il suo bordo alto coincide con quello del pulsante;
   la riga resta alta 1rem perche' si possa premere; sotto, frecce da 2.5rem.
   La riga delle barrette e' larga quanto le due frecce. Misure (barretta 6px,
   frecce 40px) del vecchio sito: nessun token le copre. */
.dg-hero__selettore { --dg-freccia: 2.5rem; display: flex; flex-direction: column; align-items: flex-end; height: 3.5rem; }
.dg-hero__selettore[hidden] { display: none; }
.dg-hero__punti { display: flex; align-items: flex-start; gap: var(--dg-space-1); width: calc(2 * var(--dg-freccia) + var(--dg-space-1)); height: calc(3.5rem - var(--dg-freccia)); }
.dg-hero__frecce { display: flex; gap: var(--dg-space-1); }
/* Frecce: bordo bianco di 1px, sfondo trasparente, icona bianca. */
.dg-hero__freccia {
	display: grid;
	place-items: center;
	width: var(--dg-freccia); height: var(--dg-freccia);
	padding: 0;
	color: var(--dg-white);
	background: transparent;
	border: var(--dg-border-width) solid var(--dg-white);
	border-radius: var(--dg-radius-none);
	cursor: pointer;
	transition: background-color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dg-hero__freccia:hover { background: rgba(var(--dg-white-rgb), .15); }
.dg-hero__freccia .dg-icona { width: 1.5rem; height: 1.5rem; }
/* Il pulsante e' alto quanto la barretta e agganciato in alto: un <button>
   centra sempre il suo contenuto in verticale, e la barretta finiva a meta' riga.
   L'area da premere si allarga con ::after, invisibile, verso il basso.
   La barretta corta ha una misura fissa; quella attiva prende il resto della riga. */
.dg-hero__punto {
	position: relative;
	display: block;
	flex: 0 0 .625rem;
	height: .375rem;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: flex-grow var(--dg-duration-slow) var(--dg-ease-standard), flex-basis var(--dg-duration-slow) var(--dg-ease-standard);
}
.dg-hero__punto::after { content: ""; position: absolute; inset: -.25rem 0 -.5rem; }
.dg-hero__punto.is-attivo { flex: 1 1 0; }
.dg-hero__punto::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--dg-white);
	border-radius: var(--dg-radius-pill);
	opacity: .75;
	transition: opacity var(--dg-duration-slow) var(--dg-ease-standard);
}
.dg-hero__punto:hover::before,
.dg-hero__punto.is-attivo::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .dg-hero__punto, .dg-hero__punto::before { transition: none; } }
.dg-hero__giu {
	display: grid; place-items: center;
	width: 3.5rem; height: 3.5rem;
	color: var(--dg-primary-50);
	background: var(--dg-primary-600);
}
.dg-hero__giu:hover { color: var(--dg-primary-50); background: var(--dg-primary-700); }

/* ---------- Presentazione ---------- */
.dg-intro { padding-block: var(--dg-ss-lg); }
.dg-intro .dg-titolo-sezione { color: var(--dg-neutral-900); }
.dg-intro__testo { font-size: var(--dg-fs-lg); line-height: 1.6; color: var(--dg-neutral-700); }

/* ---------- Fasce inverno / estate ---------- */
.dg-stagioni { display: grid; }
@media (min-width: 992px) { .dg-stagioni { grid-template-columns: 1fr 1fr; } }

.dg-fascia {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--dg-space-4);
	padding: calc(var(--dg-ss-lg) + 2rem) var(--dg-space-3) var(--dg-ss-lg);
}
.dg-fascia--inverno { color: var(--dg-primary-50); background: var(--dg-primary-600); }
.dg-fascia--estate { color: var(--dg-secondary-900); background: var(--dg-secondary-500); }
.dg-fascia > :not(.dg-fascia__stagione) { position: relative; }

@media (min-width: 992px) {
	/* Lato esterno allineato al contenitore; contenuto largo al massimo meta' contenitore. */
	.dg-fascia { padding-inline: var(--dg-ss-md); }
	.dg-fascia--inverno { padding-left: max(var(--dg-ss-md), var(--dg-rientro)); }
	.dg-fascia--estate { padding-right: max(var(--dg-ss-md), var(--dg-rientro)); align-items: flex-end; text-align: right; }
	.dg-fascia > :not(.dg-fascia__stagione):not(.dg-tondo) { width: 100%; max-width: calc(var(--dg-container-max) / 2 - var(--dg-ss-md)); }
}

/* La stagione scritta in grande che esce dal bordo in alto. Peso 900 letterale:
   non esiste un token fw-black (elemento distintivo, direzione.md). */
.dg-fascia__stagione {
	position: absolute;
	top: -.3em; left: -.03em;
	font-size: clamp(5.5rem, 2rem + 11vw, 11rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.02em;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}
.dg-fascia--inverno .dg-fascia__stagione { color: var(--dg-primary-500); }
.dg-fascia--estate .dg-fascia__stagione { left: auto; right: .06em; color: var(--dg-secondary-300); }
@media (min-width: 992px) and (max-width: 1399.98px) { .dg-fascia__stagione { font-size: 7.5vw; } }

.dg-fascia__titolo {
	margin: 0;
	font-size: clamp(3.25rem, 1.8rem + 5.5vw, 7rem);
	line-height: .9;
	letter-spacing: -.02em;
	color: inherit;
}
.dg-fascia__testo { margin: 0; max-width: 32rem; font-size: var(--dg-fs-lg); line-height: 1.5; }

.dg-fascia__elenco { margin: var(--dg-space-3) 0 0; padding: 0; list-style: none; border-top: var(--dg-border-width) solid currentColor; }
.dg-fascia__elenco li { border-bottom: var(--dg-border-width) solid currentColor; }
.dg-fascia__elenco a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--dg-space-3);
	padding: var(--dg-space-3) var(--dg-space-2);
	color: inherit;
	font-weight: var(--dg-fw-semibold);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dg-fascia__elenco a:hover { color: inherit; background: rgba(var(--dg-black-rgb), .08); }
@media (min-width: 992px) {
	/* Colonna estate specchiata: freccia a sinistra, rivolta verso sinistra. */
	.dg-fascia--estate .dg-fascia__elenco a { flex-direction: row-reverse; }
	.dg-fascia--estate .dg-fascia__elenco .dg-icona { transform: scaleX(-1); }
}
.dg-fascia__marchi { margin: 0; font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-semibold); letter-spacing: .08em; text-transform: uppercase; }

/* Pulsante rotondo del vecchio sito, scuro e leggibile. */
.dg-tondo {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--dg-space-1);
	align-self: center;
	width: 8.5rem;
	aspect-ratio: 1;
	margin-top: auto;
	padding: var(--dg-space-3);
	color: var(--dg-neutral-50);
	font-size: var(--dg-fs-sm);
	font-weight: var(--dg-fw-bold);
	line-height: 1.2;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	background: var(--dg-neutral-900);
	border-radius: var(--dg-radius-circle);
}
.dg-tondo:hover { color: var(--dg-neutral-50); }
.dg-tondo .dg-icona { width: 1.5rem; height: 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
	.dg-tondo { transition: transform var(--dg-duration-base) var(--dg-ease-standard); }
	.dg-tondo:hover { transform: scale(1.05); }
}
@media (min-width: 992px) {
	/* Centrato sotto il contenuto della colonna, non sull'intera fascia. */
	.dg-fascia--inverno .dg-tondo { align-self: flex-start; margin-left: calc((min(100%, var(--dg-container-max) / 2 - var(--dg-ss-md)) - 8.5rem) / 2); }
	.dg-fascia--estate .dg-tondo { align-self: flex-end; margin-right: calc((min(100%, var(--dg-container-max) / 2 - var(--dg-ss-md)) - 8.5rem) / 2); }
}

/* ---------- Perché noi ---------- */
.dg-perche {
	position: relative;
	isolation: isolate;
	padding-block: var(--dg-ss-xl);
	color: var(--dg-neutral-50);
	background: var(--dg-neutral-900);
}
.dg-perche::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(var(--dg-neutral-900-rgb), .82); }
.dg-perche__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.dg-perche__titolo { color: var(--dg-neutral-50); }
.dg-perche__testo { max-width: 46rem; margin: 0 0 var(--dg-space-6); font-size: var(--dg-fs-lg); line-height: 1.6; color: var(--dg-neutral-200); }
.dg-perche__punti { list-style: none; padding: 0; }

/* Quadratino colorato con icona sopra un filetto. */
.dg-punto { height: 100%; border-top: var(--dg-border-width) solid var(--dg-neutral-600); }
.dg-punto__quadro {
	display: grid; place-items: center;
	width: 3rem; height: 3rem;
	margin-top: -1px;
	color: var(--dg-primary-50);
	background: var(--dg-primary-600);
}
.dg-punto__quadro .dg-icona { width: 1.5rem; height: 1.5rem; }
.dg-punto__titolo { margin: var(--dg-space-4) 0 var(--dg-space-3); font-size: var(--dg-h4); line-height: 1.2; color: var(--dg-neutral-50); }
.dg-punto__testo { margin: 0; padding-left: var(--dg-space-3); line-height: 1.6; color: var(--dg-neutral-200); border-left: var(--dg-border-width) solid var(--dg-neutral-500); }

/* ---------- Sedi ---------- */
/* Due "insegne": blocchi pieni nel colore della stagione, come le fasce.
   Il colore del testo sta in --dg-sede-testo: un punto solo per stagione. */
.dg-sedi { padding-block: var(--dg-ss-lg); }
.dg-sedi__titolo { margin-bottom: var(--dg-space-5); color: var(--dg-neutral-900); font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); }
.dg-sedi__griglia { display: grid; gap: var(--dg-space-4); }
@media (min-width: 992px) { .dg-sedi__griglia { grid-template-columns: 1fr 1fr; } }

.dg-sede {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--dg-space-4);
	padding: var(--dg-space-6) var(--dg-space-4);
	color: var(--dg-sede-testo);
}
@media (min-width: 576px) { .dg-sede { padding-inline: var(--dg-space-5); } }
.dg-sede--inverno { --dg-sede-testo: var(--dg-primary-50); background: var(--dg-primary-600); }
.dg-sede--estate { --dg-sede-testo: var(--dg-secondary-900); background: var(--dg-secondary-500); }
.dg-sede > :not(.dg-sede__filigrana) { position: relative; }

/* Icona gigante in filigrana nell'angolo in basso a destra. */
.dg-sede__filigrana { position: absolute; right: -2rem; bottom: -2rem; opacity: .15; pointer-events: none; }
.dg-sede__filigrana .dg-icona { width: 16rem; height: 16rem; }

.dg-sede__tipo { margin: 0; }
.dg-sede__nome { margin: 0; font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); line-height: .95; letter-spacing: -.02em; color: inherit; }
.dg-sede__indirizzo { margin: 0; font-size: var(--dg-fs-lg); line-height: 1.4; }

.dg-sede__azioni { display: flex; flex-wrap: wrap; gap: var(--dg-space-2); }
.dg-sede__azione {
	display: inline-flex;
	align-items: center;
	gap: var(--dg-space-2);
	padding: var(--dg-space-2) var(--dg-space-3);
	color: inherit;
	font-size: var(--dg-fs-sm);
	font-weight: var(--dg-fw-bold);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	border: var(--dg-border-width) solid currentColor;
	transition: background-color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dg-sede__azione:hover { color: inherit; background: rgba(var(--dg-black-rgb), .1); }
.dg-sede__azione .dg-icona { width: 1.25rem; height: 1.25rem; }

.dg-sede__orari {
	display: flex;
	align-items: flex-start;
	gap: var(--dg-space-3);
	margin-top: auto;
	padding-top: var(--dg-space-4);
	border-top: var(--dg-border-width) solid currentColor;
}
.dg-sede__orari > .dg-icona { flex: none; width: 1.5rem; height: 1.5rem; }
.dg-sede__orari dl { display: grid; gap: var(--dg-space-1); margin: 0; }
.dg-sede__orari dl > div { display: flex; flex-wrap: wrap; gap: 0 var(--dg-space-3); }
.dg-sede__orari dt { font-weight: var(--dg-fw-bold); }
.dg-sede__orari dd, .dg-sede__orari p { margin: 0; }