/*
 * ReceptionXpress - sezioni della home (templates/home.php).
 * Direzione grafica: materiali/direzione.md. Mobile-first, soglie del framework.
 *
 * Tre colori non sono token del design system, per scelta dell'operatore: stanno
 * in style.css (:root, variabili --rx-*). Se diventano token, si cambiano li'.
 */

/* Avorio e petrolio (--rx-avorio, --rx-avorio-2, --rx-petrolio) sono in style.css, :root. */
.dg-home {
	--rx-testo-chiaro: rgba(var(--dg-white-rgb), .74);
	--rx-vetro: rgba(var(--dg-white-rgb), .07);
	--rx-vetro-bordo: rgba(var(--dg-white-rgb), .12);
	color: var(--dg-white);
	background: var(--dg-secondary-500);
}

/* Reset di margini e titoli dentro le sezioni: specificita' zero, cosi' le classi vincono. */
:where(.dg-home) :is(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
:where(.dg-home) :is(h1, h2, h3) { color: inherit; font-weight: var(--dg-fw-bold); letter-spacing: -0.035em; line-height: 1.05; }
:where(.dg-home) img { display: block; max-width: 100%; }

/* ---------- Sezioni ---------- */
.dg-sez { padding-block: var(--dg-ss-lg); }
.dg-sez--attaccata { padding-top: 0; }
.dg-sez__titolo { max-width: 18ch; font-size: var(--dg-display-5); }
.dg-sez__titolo--centro { margin-inline: auto; text-align: center; }
.dg-sez__intro { max-width: 52ch; margin-top: var(--dg-space-4); font-size: var(--dg-fs-lg); color: var(--rx-testo-chiaro); }

/* Alone sfumato petrolio e oro dietro le sezioni scure con le card. */
.dg-alone { position: relative; isolation: isolate; }
.dg-alone::before {
	content: "";
	position: absolute;
	inset: 5% 0 0;
	z-index: -1;
	background:
		radial-gradient(40% 50% at 20% 40%, var(--rx-petrolio), transparent 70%),
		radial-gradient(35% 45% at 85% 70%, rgba(var(--dg-primary-500-rgb), .2), transparent 70%);
	filter: blur(30px);
	pointer-events: none;
}

/* Due colonne: immagine e testo. */
.dg-dueparti { display: grid; gap: var(--dg-ss-sm); align-items: center; }
/* min-width 0: un contenuto largo non allarga la colonna oltre lo schermo. */
.dg-dueparti > * { min-width: 0; }
@media (min-width: 992px) {
	.dg-dueparti { grid-template-columns: 1fr 1fr; }
	.dg-dueparti--inverso > :first-child { order: 2; }
}

/* ---------- Hero ---------- */
.dg-hero { position: relative; display: flex; align-items: flex-end; min-height: 100svh; overflow: hidden; }
.dg-hero__img { position: absolute; inset: 0; width: 100%; height: 70%; object-fit: cover; object-position: 62% 50%; }
.dg-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(var(--dg-secondary-500-rgb), .5) 0%, rgba(var(--dg-secondary-500-rgb), .2) 20%, rgba(var(--dg-secondary-500-rgb), .85) 52%, var(--dg-secondary-500) 70%);
}
.dg-hero__wrap { position: relative; z-index: 1; display: grid; gap: var(--dg-space-5); padding-top: 16rem; padding-bottom: var(--dg-ss-md); }
.dg-hero__titolo { max-width: 11ch; font-size: var(--dg-display-1); }
.dg-hero__testo { max-width: 42ch; margin-top: var(--dg-space-4); font-size: var(--dg-fs-lg); color: var(--rx-testo-chiaro); }
.dg-hero__azioni { display: flex; flex-wrap: wrap; gap: var(--dg-space-3); margin-top: var(--dg-space-5); }
@media (min-width: 768px) {
	.dg-hero__img { height: 100%; object-position: 50% 40%; }
	.dg-hero::after {
		background:
			linear-gradient(90deg, rgba(var(--dg-secondary-500-rgb), .7) 0%, rgba(var(--dg-secondary-500-rgb), 0) 60%),
			linear-gradient(180deg, rgba(var(--dg-secondary-500-rgb), .55) 0%, rgba(var(--dg-secondary-500-rgb), 0) 28%, rgba(var(--dg-secondary-500-rgb), .3) 55%, var(--dg-secondary-500) 100%);
	}
	.dg-hero__wrap { padding-top: 8rem; }
}
@media (min-width: 992px) {
	.dg-hero__wrap { grid-template-columns: 1.35fr 1fr; align-items: end; }
}

/* Riquadro in vetro dell'hero. */
.dg-pannello {
	padding: var(--dg-space-4);
	background: rgba(var(--dg-secondary-500-rgb), .5);
	border: var(--dg-border-width) solid var(--rx-vetro-bordo);
	border-radius: var(--dg-radius-2xl);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}
.dg-pannello__titolo { font-size: var(--dg-fs-sm); color: var(--rx-testo-chiaro); }
.dg-pannello__lista { display: grid; gap: var(--dg-space-2); margin-top: var(--dg-space-3); padding: 0; list-style: none; }
.dg-pannello__voce {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: var(--dg-space-3);
	align-items: center;
	padding: var(--dg-space-3);
	line-height: var(--dg-lh-sm);
	background: var(--rx-vetro);
	border-radius: var(--dg-radius-xl);
}
.dg-pannello__voce b { display: block; font-weight: var(--dg-fw-semibold); }
.dg-pannello__voce small { font-size: var(--dg-fs-sm); color: var(--rx-testo-chiaro); }
.dg-pannello__ico {
	display: grid;
	place-items: center;
	width: 2.5rem; height: 2.5rem;
	color: var(--dg-primary-500);
	background: rgba(var(--dg-primary-500-rgb), .16);
	border-radius: var(--dg-radius-circle);
}
.dg-pannello__ico .dg-icona { width: 1.25rem; height: 1.25rem; }

/* ---------- Pensato per ---------- */
.dg-perchi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--dg-space-3) var(--dg-space-4);
	padding-block: var(--dg-space-5);
	font-size: var(--dg-fs-sm);
	color: var(--rx-testo-chiaro);
	border-bottom: var(--dg-border-width) solid var(--rx-vetro-bordo);
}
.dg-perchi__titolo { flex-basis: 100%; text-align: center; }
.dg-perchi__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--dg-space-3) var(--dg-space-4); padding: 0; list-style: none; }
.dg-perchi__lista li { display: inline-flex; align-items: center; gap: var(--dg-space-1); font-size: var(--dg-font-size-base); color: var(--dg-white); }
.dg-perchi .dg-icona { width: 1.25rem; height: 1.25rem; color: var(--dg-primary-500); }
@media (min-width: 576px) {
	.dg-perchi { gap: var(--dg-space-3) var(--dg-space-5); }
	.dg-perchi__titolo { flex-basis: auto; }
	.dg-perchi__lista { gap: var(--dg-space-3) var(--dg-space-5); }
	.dg-perchi__lista li { gap: var(--dg-space-2); font-size: var(--dg-fs-lg); }
	.dg-perchi .dg-icona { width: var(--dg-icona-dimensione); height: var(--dg-icona-dimensione); }
}

/* ---------- Come funziona ---------- */
.dg-passi { display: grid; gap: var(--dg-space-3); margin-top: var(--dg-ss-sm); padding: 0; list-style: none; }
@media (min-width: 992px) { .dg-passi { grid-template-columns: repeat(3, 1fr); } }
.dg-passo {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--rx-vetro);
	border: var(--dg-border-width) solid var(--rx-vetro-bordo);
	border-radius: var(--dg-radius-2xl);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}
.dg-passo__media { position: relative; aspect-ratio: 1 / .9; overflow: hidden; }
.dg-passo__media > img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.dg-passo__media--telefono {
	display: grid;
	place-items: end center;
	background: radial-gradient(90% 80% at 50% 100%, rgba(var(--dg-primary-500-rgb), .25), transparent 70%);
}
.dg-passo__media--telefono .dg-telefono { width: 52%; margin-bottom: -30%; }
.dg-passo__corpo { padding: var(--dg-space-4); }
.dg-passo__num {
	display: inline-grid;
	place-items: center;
	width: 2rem; height: 2rem;
	margin-bottom: var(--dg-space-3);
	font-size: var(--dg-fs-sm);
	color: var(--dg-primary-500);
	border: var(--dg-border-width) solid var(--dg-primary-500);
	border-radius: var(--dg-radius-circle);
}
.dg-passo__titolo { font-size: var(--dg-h4); font-weight: var(--dg-fw-semibold); letter-spacing: -0.02em; }
.dg-passo__testo { margin-top: var(--dg-space-2); color: var(--rx-testo-chiaro); }

/* ---------- Telefono e monitor ---------- */
/* La cornice non ruba spazio all'immagine (content-box): la schermata resta intera. */
.dg-telefono {
	box-sizing: content-box;
	aspect-ratio: 393 / 852;
	overflow: hidden;
	background: var(--dg-black);
	border: 6px solid var(--dg-black);
	border-radius: var(--dg-radius-2xl);
	box-shadow: var(--dg-shadow-xl), 0 0 0 1px var(--rx-vetro-bordo);
}
.dg-telefono img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--dg-radius-2xl) - 6px); }

.dg-totem { width: min(24rem, 100%); margin-inline: auto; }
.dg-totem__schermo {
	padding: .9rem .9rem 2.2rem;
	background: var(--dg-secondary-900);
	border-radius: var(--dg-radius-xl);
	box-shadow: var(--dg-shadow-xl), 0 0 0 1px var(--rx-vetro-bordo);
}
.dg-totem__schermo img { width: 100%; height: auto; border-radius: var(--dg-radius-lg); }
.dg-totem__piede { width: 38%; height: 1.2rem; margin-inline: auto; background: var(--dg-secondary-900); border-radius: 0 0 var(--dg-radius-lg) var(--dg-radius-lg); }

/* ---------- Elenco con icona ---------- */
.dg-lista { margin-top: var(--dg-space-5); padding: 0; list-style: none; }
.dg-lista__voce {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	gap: var(--dg-space-3);
	padding-block: var(--dg-space-3);
	border-top: var(--dg-border-width) solid var(--rx-vetro-bordo);
}
.dg-lista__voce .dg-icona { width: 1.5rem; height: 1.5rem; color: var(--dg-primary-500); }
.dg-lista__titolo { display: block; font-weight: var(--dg-fw-semibold); }
.dg-lista__testo { font-size: var(--dg-fs-sm); color: var(--rx-testo-chiaro); }

/* ---------- Fascia chiara (app, vantaggi, noleggio) ---------- */
.dg-fascia-chiara {
	--rx-testo-chiaro: var(--dg-neutral-600);
	--rx-vetro-bordo: var(--rx-avorio-2);
	color: var(--dg-neutral-800);
	background: var(--rx-avorio);
	border-radius: var(--dg-radius-2xl) var(--dg-radius-2xl) 0 0;
}
.dg-fascia-chiara .dg-lista__voce .dg-icona { color: var(--dg-primary-600); }
.dg-fascia-chiara .dg-telefono { box-shadow: var(--dg-shadow-lg); }

.dg-telefoni {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--dg-space-4);
	padding: var(--dg-ss-sm) var(--dg-space-4);
	background:
		radial-gradient(70% 60% at 30% 20%, rgba(var(--dg-primary-500-rgb), .28), transparent 70%),
		var(--rx-avorio-2);
	border-radius: var(--dg-radius-2xl);
}
.dg-telefoni .dg-telefono { width: 44%; max-width: 15rem; }
.dg-telefoni .dg-telefono + .dg-telefono { margin-top: var(--dg-space-6); }

.dg-app__nota {
	display: inline-flex;
	align-items: center;
	gap: var(--dg-space-2);
	margin-top: var(--dg-space-4);
	padding: .35em .9em .35em .4em;
	font-size: var(--dg-fs-sm);
	background: var(--rx-avorio-2);
	border-radius: var(--dg-radius-pill);
}
.dg-app__nota .dg-icona { width: 1.1rem; height: 1.1rem; color: var(--dg-primary-600); }

/* ---------- Vantaggi ---------- */
.dg-vantaggi__frase { max-width: 24ch; font-size: var(--dg-display-6); line-height: 1.12; }
.dg-vantaggi__frase span { font-weight: var(--dg-fw-normal); color: var(--dg-neutral-600); }
.dg-vantaggi { display: grid; gap: var(--dg-space-5) var(--dg-space-4); margin-top: var(--dg-ss-sm); padding: 0; list-style: none; }
@media (min-width: 576px) { .dg-vantaggi { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .dg-vantaggi { grid-template-columns: repeat(4, 1fr); } }
.dg-vantaggi__voce { padding-top: var(--dg-space-3); border-top: var(--dg-border-width) solid var(--dg-neutral-800); }
.dg-vantaggi__voce .dg-icona { margin-bottom: var(--dg-space-3); color: var(--dg-primary-600); }
.dg-vantaggi__titolo { font-size: var(--dg-h6); font-weight: var(--dg-fw-semibold); line-height: var(--dg-lh-sm); letter-spacing: -0.01em; }
.dg-vantaggi__testo { margin-top: var(--dg-space-2); font-size: var(--dg-fs-sm); color: var(--dg-neutral-600); }

/* ---------- Noleggio ---------- */
.dg-numeri { display: grid; margin-top: var(--dg-space-5); padding: 0; list-style: none; border-top: var(--dg-border-width) solid var(--dg-neutral-800); }
@media (min-width: 768px) { .dg-numeri { grid-template-columns: repeat(3, 1fr); } }
.dg-numeri li { padding: var(--dg-space-5) var(--dg-space-4) 0 0; }
.dg-numeri__valore { display: block; font-size: var(--dg-display-3); line-height: 1; letter-spacing: -0.05em; }
.dg-numeri__etichetta { display: block; margin-top: var(--dg-space-2); color: var(--dg-neutral-600); }

.dg-include {
	display: grid;
	gap: var(--dg-space-5);
	align-items: end;
	justify-items: start;
	margin-top: var(--dg-ss-sm);
	padding: var(--dg-space-5) var(--dg-space-4);
	background: var(--rx-avorio-2);
	border-radius: var(--dg-radius-2xl);
}
/* Le colonne si stringono e, se non c'e' spazio, diventano una: una voce lunga non deve
   allargare il riquadro oltre lo schermo (sbordava sotto i 360 px). */
.dg-include { grid-template-columns: minmax(0, 1fr); }
.dg-include > div { min-width: 0; }
@media (min-width: 1200px) { .dg-include { grid-template-columns: 1fr auto; padding-inline: var(--dg-space-5); } }
.dg-include__titolo { font-size: var(--dg-h5); letter-spacing: -0.01em; }
.dg-include__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--dg-space-3) var(--dg-space-4); margin-top: var(--dg-space-4); padding: 0; list-style: none; }
@media (min-width: 992px) { .dg-include__lista { grid-template-columns: repeat(4, auto); } }
.dg-include__lista li { display: flex; align-items: flex-start; gap: var(--dg-space-2); min-width: 0; font-size: var(--dg-fs-sm); overflow-wrap: anywhere; }
.dg-include__lista .dg-icona { width: 1.15rem; height: 1.15rem; margin-top: .1em; color: var(--dg-primary-600); }

/* ---------- Destinazione ---------- */
.dg-destinazione { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--dg-radius-2xl); }
.dg-destinazione__img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 35%; }
.dg-player {
	position: absolute;
	left: var(--dg-space-3); right: var(--dg-space-3); bottom: var(--dg-space-3);
	display: flex;
	align-items: center;
	gap: var(--dg-space-3);
	padding: var(--dg-space-3);
	font-size: var(--dg-fs-sm);
	color: var(--dg-white);
	background: rgba(var(--dg-secondary-500-rgb), .55);
	border-radius: var(--dg-radius-xl);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.dg-player__play { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; color: var(--dg-neutral-800); background: var(--dg-primary-500); border-radius: var(--dg-radius-circle); }
.dg-player__play .dg-icona { width: 1.1rem; height: 1.1rem; }
.dg-player__barra { flex: 1; height: 3px; background: linear-gradient(90deg, var(--dg-primary-500) 35%, rgba(var(--dg-white-rgb), .2) 35%); border-radius: 3px; }

/* ---------- Domande frequenti ---------- */
.dg-faq { max-width: 52rem; margin: var(--dg-ss-sm) auto 0; }
.dg-faq__voce { border-bottom: var(--dg-border-width) solid var(--rx-vetro-bordo); }
.dg-faq__domanda {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dg-space-3);
	padding-block: var(--dg-space-4);
	font-size: var(--dg-fs-lg);
	font-weight: var(--dg-fw-semibold);
	list-style: none;
	cursor: pointer;
}
.dg-faq__domanda::-webkit-details-marker { display: none; }
.dg-faq__domanda .dg-icona { width: 1.5rem; height: 1.5rem; color: var(--dg-primary-500); transition: transform var(--dg-duration-fast) var(--dg-ease-standard); }
.dg-faq__voce[open] .dg-faq__domanda .dg-icona { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .dg-faq__domanda .dg-icona { transition: none; } }
.dg-faq__risposta { max-width: 62ch; padding-bottom: var(--dg-space-4); color: var(--rx-testo-chiaro); }

/* ---------- Contatti ---------- */
.dg-contatti { position: relative; overflow: hidden; border-radius: var(--dg-radius-2xl); }
.dg-contatti__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.dg-contatti::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--dg-secondary-500-rgb), .93) 30%, rgba(var(--dg-secondary-500-rgb), .55)); }
.dg-contatti__dentro { position: relative; z-index: 1; display: grid; gap: var(--dg-ss-sm); padding: var(--dg-ss-md) var(--dg-space-3); }
@media (min-width: 992px) { .dg-contatti__dentro { grid-template-columns: 1fr 1.1fr; padding-inline: var(--dg-space-5); } }
.dg-contatti__mail { display: inline-block; margin-top: var(--dg-space-5); font-size: var(--dg-h5); color: var(--dg-primary-300); }
.dg-contatti__mail:hover { color: var(--dg-primary-500); }
.dg-contatti__form {
	padding: var(--dg-space-4);
	background: rgba(var(--dg-secondary-500-rgb), .5);
	border: var(--dg-border-width) solid var(--rx-vetro-bordo);
	border-radius: var(--dg-radius-2xl);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

/* Il modulo CF7 su fondo scuro: si cambiano solo le variabili dello stile di base. */
.dg-contatti .wpcf7 {
	--dg-cf7-gap: var(--dg-space-3);
	--dg-cf7-field-bg: var(--rx-vetro);
	--dg-cf7-field-color: var(--dg-white);
	--dg-cf7-field-border: var(--rx-vetro-bordo);
	--dg-cf7-placeholder: rgba(var(--dg-white-rgb), .5);
	--dg-cf7-accent: var(--dg-primary-500);
	--dg-cf7-accent-hover: color-mix(in srgb, var(--dg-primary-500) 82%, var(--dg-primary-700));
	--dg-cf7-accent-contrast: var(--dg-neutral-800);
	--dg-cf7-check-off: rgba(var(--dg-white-rgb), .2);
	--dg-cf7-check-mark: var(--dg-neutral-800);
	font-size: var(--dg-fs-sm);
	color: var(--rx-testo-chiaro);
}
.dg-contatti .wpcf7 a { color: var(--dg-primary-300); }
/* Il pulsante del modulo come gli altri pulsanti del sito: niente maiuscolo. */
.dg-contatti .wpcf7-form .wpcf7-submit { font-weight: var(--dg-fw-semibold); letter-spacing: normal; text-transform: none; }