/**
 * Stili dei componenti di layout (shortcode DG).
 *
 * Convenzioni del file:
 * - Le uniche variabili usate sono quelle di tema per font e colori:
 *   --dg-font-heading, --dg-font-body, --dg-black, --dg-grey, --dg-light,
 *   --dg-white, --dg-teal. Tutte le misure sono valori fissi in px.
 * - Fanno eccezione tre variabili scritte inline dai template, perché il valore
 *   arriva dallo shortcode: --dg-services-columns, --dg-news-per-view,
 *   --dg-banner-overlay.
 * - Nessun effetto al passaggio del mouse e nessuna transizione. Restano solo
 *   gli outline da tastiera (:focus-visible), che servono all'accessibilità.
 * - Due soli breakpoint: 900px e 600px.
 */

/* ---------- Titoli: reset dei margini del tema ---------- */

/*
 * Twenty Twenty sopra i 700px applica `margin: 6rem auto 3rem` a
 * `.entry-content h1, h2, h3`. I titoli dei componenti gestiscono da soli la
 * propria spaziatura, quindi li azzeriamo qui: agganciando `.entry-content`
 * la specificità (classe + classe) vince su quella del tema (classe + tag)
 * senza bisogno di !important sulle singole regole.
 */
.entry-content .dg-hero__title,
.entry-content .dg-double__title,
.entry-content .dg-double__subtitle,
.entry-content .dg-services__title,
.entry-content .dg-card__title,
.entry-content .dg-faq__title,
.entry-content .dg-news__title,
.entry-content .dg-news-card__title,
.entry-content .dg-newsletter__title,
.entry-content .dg-contatti__title,
.entry-content .dg-contatti__label,
.entry-content .dg-banner__title {
	margin: 0;
}

/* Sotto ha i recapiti: lo stacco glielo lasciamo. */
.entry-content .dg-contatti__label {
	margin-bottom: 8px;
}

/* Unico titolo con uno stacco proprio: sotto ha la descrizione. */
.entry-content .dg-double__title {
	margin-bottom: 20px;
}

/* ---------- Hero ---------- */

.dg-hero {
	position: relative;
	display: flex;
	/* Il contenuto si appoggia in basso, non al centro verticale. */
	align-items: flex-end;
	width: 100%;
	box-sizing: border-box;
	padding: 40px 64px;
	overflow: hidden;
	background: var(--dg-black, #1D1D1B);
	color: var(--dg-white, #FFFFFF);
	isolation: isolate;
	/* Altezza di default (`large`): le varianti la sovrascrivono qui sotto. */
	min-height: 800px;
}

/*
 * La classe è ripetuta di proposito. I modificatori stanno sullo stesso
 * elemento della base, quindi a specificità pari vincerebbe l'ultima regola
 * scritta: nei breakpoint `.dg-hero` verrebbe dopo e schiaccerebbe le varianti.
 * Con due classi la variante vince sempre, e i breakpoint possono ritoccare
 * solo l'altezza di default.
 */
.dg-hero.dg-hero--h-small {
	min-height: 320px;
}

.dg-hero.dg-hero--h-medium {
	min-height: 480px;
}

.dg-hero.dg-hero--h-full {
	min-height: 100vh;
}

.dg-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.dg-hero__inner {
	position: relative;
	width: 100%;
	max-width: 950px;
	margin: 0 auto;
}

.dg-hero--center .dg-hero__inner {
	text-align: center;
}

.dg-hero__title {
	margin: 0;
	font-family: var(--dg-font-heading, serif);
	font-size: 50px;
	font-weight: 400;
	line-height: 1.15;
	color: inherit;
	/* Ombra corta: stacca il testo dalla foto senza sfocarlo. */
	text-shadow: 0 1px 3px rgba(29, 29, 27, .55);
}

.dg-hero__desc {
	margin: 24px 0 0;
	max-width: 640px;
	font-family: var(--dg-font-body, sans-serif);
	font-size: 20px;
	line-height: 1.7;
	color: var(--dg-white, #FFFFFF);
	text-shadow: 0 1px 2px rgba(29, 29, 27, .5);
}

.dg-hero--center .dg-hero__desc {
	margin-left: auto;
	margin-right: auto;
}

.dg-hero__cta {
	display: inline-block;
	margin-top: 32px;
	padding: 14px 28px;
	border-radius: 999px;
	background: var(--dg-white, #FFFFFF);
	font-family: var(--dg-font-heading, serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: var(--dg-black, #1D1D1B);
	text-decoration: none;
}

.dg-hero__cta:focus-visible {
	outline: 2px solid var(--dg-white, #FFFFFF);
	outline-offset: 3px;
}

/* ---------- Double section ---------- */

.dg-double {
	padding: 170px 24px;
	background: var(--dg-white, #FFFFFF);
	color: var(--dg-black, #1D1D1B);
}

.dg-double--dark {
	background: var(--dg-black, #1D1D1B);
	color: var(--dg-white, #FFFFFF);
}

.dg-double__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 64px;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.dg-double--reverse .dg-double__col--main {
	order: 2;
}

.dg-double__col {
	min-width: 0;
}

.dg-double__title {
	margin: 0 0 20px;
	font-family: var(--dg-font-heading, serif);
	font-size: 33px;
	font-weight: 400;
	line-height: 1.15;
	color: inherit;
}

/* Sta sotto al titolo: lo stacco va sopra. */
.dg-double__subtitle {
	margin: 0;
	max-width: 370px;
	font-family: var(--dg-font-heading, serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: inherit;
}

.dg-double__desc {
	font-family: var(--dg-font-body, sans-serif);
	font-size: 16px;
	line-height: 1.7;
	color: var(--dg-grey, #616160);
}

.dg-double--dark .dg-double__desc {
	color: var(--dg-white, #FFFFFF);
}

.dg-double__desc > p {
	margin: 0;
}

.dg-double__desc > p + p {
	margin-top: 16px;
}

/* Allinea la prima riga della descrizione a quella del titolo. */
.dg-double__col--aside {
	padding-top: 8px;
}

.dg-double__cta {
	display: inline-block;
	margin-top: 32px;
	padding: 14px 28px;
	border-radius: 999px;
	background: var(--dg-black, #1D1D1B);
	font-family: var(--dg-font-heading, serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: var(--dg-white, #FFFFFF);
	text-decoration: none;
}

.dg-double--dark .dg-double__cta {
	background: var(--dg-white, #FFFFFF);
	color: var(--dg-black, #1D1D1B);
}

.dg-double__cta:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- Services ---------- */

/*
 * Il fondo non è a tutta pagina: resta contenuto nella larghezza del
 * contenitore, quindi il colore vive su .dg-services__inner e non sulla
 * section.
 */
.dg-services {
	padding: 0 24px 170px 24px;
	color: var(--dg-black, #1D1D1B);
}

.dg-services--dark {
	color: var(--dg-white, #FFFFFF);
}

.dg-services__inner {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 40px;
	border-radius: 22px;
	background: var(--dg-light, #EEEDED);
	position: relative;
}

.dg-services--light .dg-services__inner {
	background: var(--dg-white, #FFFFFF);
}

.dg-services--dark .dg-services__inner {
	background: var(--dg-black, #1D1D1B);
}

.dg-services__head {
	margin-bottom: 48px;
}

.dg-services--head-center .dg-services__head {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.dg-services__title {
	margin: 0;
	font-family: var(--dg-font-heading, serif);
	font-size: 33px;
	font-weight: 400;
	line-height: 1.15;
	color: inherit;
}

.dg-services__desc {
	margin: 16px 0 0;
	max-width: 720px;
	font-family: var(--dg-font-body, sans-serif);
	font-size: 16px;
	line-height: 1.7;
	color: var(--dg-grey, #616160);
}

.dg-services--dark .dg-services__desc {
	color: var(--dg-white, #FFFFFF);
}

.dg-services--head-center .dg-services__desc {
	margin-left: auto;
	margin-right: auto;
}

/*
 * Fuori dal flusso e centrata in orizzontale. Il riferimento è il padding box
 * di .dg-services__inner, quindi la larghezza va rientrata a mano del suo
 * padding (40px per lato, 32 su tablet, 24 su mobile).
 * Il numero di colonne arriva dallo shortcode.
 */
.dg-services__grid {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: calc(88% - 80px);
	display: grid;
	grid-template-columns: repeat(var(--dg-services-columns, 3), minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-services__item {
	display: flex;
	margin: 0;
}

.dg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	padding: 20px;
	border-radius: 22px;
	background: var(--dg-black, #1D1D1B);
	color: var(--dg-white, #FFFFFF);
	text-align: left;
}

.dg-services--light .dg-card {
	border: 1px solid var(--dg-light, #EEEDED);
}

.dg-card__title {
	margin: 0;
	font-family: var(--dg-font-heading, serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25;
	color: inherit;
}

.dg-card__link {
	color: inherit;
	text-decoration: none;
}

/* Estende l'area cliccabile del titolo a tutta la card. */
.dg-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.dg-card__link:focus-visible::after {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/*
 * Filo verde sotto al titolo della card.
 * Twenty Twenty stila `.entry-content hr` con un gradiente e due trattini in
 * ::before/::after: qui va tutto neutralizzato.
 */
.dg-card .dg-card__rule {
	width: 20%;
	height: 0;
	margin: 16px 0 0;
	border: 0;
	border-top: 2px solid var(--dg-teal, #52CEBF);
	background: none;
}

.dg-card .dg-card__rule::before,
.dg-card .dg-card__rule::after {
	content: none;
}

.dg-card__desc {
	margin: 12px 0 0;
	font-family: var(--dg-font-body, sans-serif);
	font-size: 16px;
	line-height: 1.7;
	color: inherit;
}

.dg-card__cta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 24px;
	font-family: var(--dg-font-heading, serif);
	font-size: 14px;
	line-height: 1;
	color: var(--dg-teal);
}

/* ---------- Icone (Lucide) ---------- */

/*
 * Il tratto segue il colore del testo, quindi le icone funzionano sia sui fondi
 * chiari sia su quelli scuri senza regole dedicate.
 */
.dg-icon {
	flex: 0 0 auto;
	stroke: currentColor;
	fill: none;
}

/* ---------- FAQ ---------- */

.dg-faq {
	padding: 96px 24px;
	background: var(--dg-white, #FFFFFF);
	color: var(--dg-black, #1D1D1B);
}

.dg-faq--grey {
	background: var(--dg-light, #EEEDED);
}

.dg-faq--dark {
	background: var(--dg-black, #1D1D1B);
	color: var(--dg-white, #FFFFFF);
}

.dg-faq__inner {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

.dg-faq__head {
	margin-bottom: 48px;
}

.dg-faq--head-center .dg-faq__head {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.dg-faq__title {
	margin: 0;
	font-family: var(--dg-font-heading, serif);
	font-size: 33px;
	font-weight: 400;
	line-height: 1.15;
	color: inherit;
}

.dg-faq__desc {
	margin: 16px 0 0;
	max-width: 720px;
	font-family: var(--dg-font-body, sans-serif);
	font-size: 16px;
	line-height: 1.7;
	color: inherit;
}

.dg-faq--head-center .dg-faq__desc {
	margin-left: auto;
	margin-right: auto;
}

.dg-faq__list {
	margin: 0 auto;
	border-top: 1px solid var(--dg-light, #EEEDED);
}

.dg-faq__item {
	border-bottom: 1px solid var(--dg-light, #EEEDED);
}

/* Su fondo nero il grigio chiaro dei bordi sparirebbe. */
.dg-faq--dark .dg-faq__list,
.dg-faq--dark .dg-faq__item {
	border-color: var(--dg-grey, #616160);
}

.dg-faq__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	cursor: pointer;
	list-style: none;
}

.dg-faq__summary::-webkit-details-marker {
	display: none;
}

.dg-faq__summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* È uno <strong>, non un heading: le domande restano fuori dalla gerarchia dei titoli. */
.dg-faq__question {
	display: block;
	margin: 0;
	font-family: var(--dg-font-heading, serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.35;
	color: inherit;
}

/*
 * Icona `plus` di Lucide. Da aperta nascondiamo la barra verticale: quel che
 * resta è esattamente l'icona `minus`, senza doverne stampare due.
 */
.dg-faq__icon {
	display: flex;
	flex: 0 0 auto;
	background: var(--dg-teal);
	border-radius: 4px;
}

.dg-faq__item[open] .dg-faq__icon .dg-icon__bar {
	display: none;
}

.dg-faq__answer {
	max-width: 780px;
	padding-bottom: 24px;
}

.dg-faq__answer p {
	margin: 0;
	font-family: var(--dg-font-body, sans-serif);
	font-size: 16px;
	line-height: 1.7;
	color: inherit;
}

/* ---------- Quotation ---------- */

.dg-quote {
	padding: 170px 24px 170px 24px;
	background: var(--dg-white, #FFFFFF);
	color: var(--dg-black, #1D1D1B);
}

.dg-quote--grey {
	background: var(--dg-light, #EEEDED);
}

.dg-quote--dark {
	background: var(--dg-black, #1D1D1B);
	color: var(--dg-white, #FFFFFF);
}

.dg-quote__inner {
	width: 100%;
	max-width: 500px;
	position: relative;
	margin: 0 auto;
	text-align: left;
}

/*
 * Virgoletta decorativa, fuori dal flusso e sbordante a sinistra del testo.
 * Sotto i 600px rientra nel flusso: vedi il blocco mobile in fondo al file.
 */
.dg-quote__mark {
  display: block;
  font-family: var(--dg-font-heading, serif);
  font-size: 213px;
  font-weight: 700;
  line-height: 1;
  color: #52CEBF47;
  user-select: none;
  position: absolute;
  top: -31px;
  left: -84px;
}

.dg-quote__text {
	margin: -24px 0 0;
	padding: 0;
	border: 0;
	quotes: none;
}

/*
 * Il tema imposta il font di testo su `.entry-content p` (classe + tag): a
 * parità di specificità vincerebbe l'ultimo foglio caricato. Agganciando
 * `.dg-quote` arriviamo a due classi + tag e il font dei titoli tiene sempre.
 */
.dg-quote .dg-quote__text > p {
	margin: 0;
	font-family: var(--dg-font-heading, serif);
	font-size: 24px;
	font-weight: 400;
	max-width: 500px;
	font-style: normal;
	line-height: 1.45;
	color: inherit;
}

/*
 * Twenty Twenty stila `.entry-content figcaption` e `.entry-content cite`
 * (classe + tag) imponendo il proprio font: senza agganciare `.dg-quote` la
 * regola dell'autore perde. Il <cite> va ridichiarato perché il font-family
 * del tema colpisce direttamente lui, non il figcaption che lo contiene.
 */
.dg-quote .dg-quote__author,
.dg-quote .dg-quote__author cite {
	margin: 0;
	font-family: var(--dg-font-body, sans-serif);
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	color: var(--dg-grey, #616160);
}

.dg-quote .dg-quote__author {
	margin-top: 25px;
}

.dg-quote--dark .dg-quote__author,
.dg-quote--dark .dg-quote__author cite {
	color: var(--dg-light, #EEEDED);
}

/* ---------- Team ---------- */

.dg-team {
	padding: 96px 24px;
	background: var(--dg-white, #FFFFFF);
	color: var(--dg-black, #1D1D1B);
}

.dg-team--grey {
	background: var(--dg-light, #EEEDED);
}

.dg-team--dark {
	background: var(--dg-black, #1D1D1B);
	color: var(--dg-white, #FFFFFF);
}

.dg-team__inner {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

.dg-team__head {
	margin-bottom: 48px;
}

.dg-team__title {
	margin: 0;
	font-family: var(--dg-font-heading, serif);
	font-size: 33px;
	font-weight: 400;
	line-height: 1.15;
	color: inherit;
}

/*
 * Quante colonne lo decide lo shortcode. `align-items: start` è quel che
 * permette a una card aperta di crescere senza allungare anche le vicine.
 */
.dg-team__grid {
	display: grid;
	grid-template-columns: repeat(var(--dg-team-columns, 4), 1fr);
	align-items: start;
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-team__item {
	margin: 0;
}

/* ---------- Scheda persona ---------- */

.dg-team-card__summary {
	display: block;
	cursor: pointer;
	list-style: none;
}

/* Il triangolino nativo di <details>: lo togliamo in tutti i motori. */
.dg-team-card__summary::-webkit-details-marker {
	display: none;
}

.dg-team-card__summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/*
 * Ritratto in verticale: il rapporto fisso tiene le foto allineate anche
 * quando gli originali hanno proporzioni diverse fra loro.
 */
.dg-team-card__photo {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center top;
	border-radius: 22px;
	background: var(--dg-light, #EEEDED);
}

.dg-team-card__photo--empty {
	background: var(--dg-light, #EEEDED);
}

.dg-team--dark .dg-team-card__photo--empty {
	background: var(--dg-grey, #616160);
}

.dg-team-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
}

.dg-team-card__text {
	display: block;
}

/* È uno <strong>, non un heading: le persone restano fuori dalla gerarchia dei titoli. */
.dg-team-card__name {
	display: block;
	font-family: var(--dg-font-heading, serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25;
	color: inherit;
}

.dg-team-card__job {
	display: block;
	margin-top: 6px;
	font-family: var(--dg-font-body, sans-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--dg-grey, #616160);
}

.dg-team--dark .dg-team-card__job {
	color: var(--dg-light, #EEEDED);
}

/* Stesso quadratino verde dell'icona FAQ, qui con un chevron che ruota. */
.dg-team-card__icon {
	display: flex;
	flex: 0 0 auto;
	background: var(--dg-teal, #52CEBF);
	border-radius: 4px;
	color: var(--dg-black, #1D1D1B);
	transition: transform .24s ease;
}

.dg-team-card[open] .dg-team-card__icon {
	transform: rotate(180deg);
}

.dg-team-card__bio {
	padding-top: 16px;
}

.dg-team-card__bio p {
	margin: 0 0 12px;
	font-family: var(--dg-font-body, sans-serif);
	font-size: 15px;
	line-height: 1.7;
	color: inherit;
}

.dg-team-card__bio p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dg-team-card__icon {
		transition: none;
	}
}

/* ---------- Partner ---------- */

.dg-partner {
	padding: 96px 24px;
	background: var(--dg-white, #FFFFFF);
	color: var(--dg-black, #1D1D1B);
}

.dg-partner--grey {
	background: var(--dg-light, #EEEDED);
}

.dg-partner--dark {
	background: var(--dg-black, #1D1D1B);
	color: var(--dg-white, #FFFFFF);
}

.dg-partner__inner {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

.dg-partner__head {
	margin-bottom: 48px;
}

.dg-partner__title {
	margin: 0;
	font-family: var(--dg-font-heading, serif);
	font-size: 33px;
	font-weight: 400;
	line-height: 1.15;
	color: inherit;
}

/* Quante colonne lo decide lo shortcode, come nel team. */
.dg-partner__grid {
	display: grid;
	grid-template-columns: repeat(var(--dg-partner-columns, 3), 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-partner__item {
	display: flex;
	margin: 0;
}

/* ---------- Scheda partner ---------- */

/*
 * `height: 100%` sulla card più il flex sull'item: è quel che tiene le schede
 * della stessa riga tutte alte uguali anche con descrizioni di lunghezza
 * diversa, senza doverle troncare.
 */
.dg-partner-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 32px;
	border-radius: 22px;
	background: var(--dg-light, #EEEDED);
}

.dg-partner--grey .dg-partner-card {
	background: var(--dg-white, #FFFFFF);
}

.dg-partner--dark .dg-partner-card {
	background: var(--dg-grey, #616160);
}

/*
 * Cornice ad altezza fissa per i loghi: gli originali arrivano con proporzioni
 * e margini diversi fra loro, e allinearli richiede un riquadro comune.
 */
.dg-partner-card__logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 64px;
	margin-bottom: 24px;
}

/*
 * `contain` e non `cover`: un logo ritagliato è un marchio storpiato. Le
 * altezze automatiche servono a scavalcare gli attributi width/height che
 * wp_get_attachment_image() stampa sul tag.
 */
.dg-partner-card__img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: left center;
}

.dg-partner-card__name {
	display: block;
	font-family: var(--dg-font-heading, serif);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.25;
	color: inherit;
}

/* `margin-top: auto` no: la descrizione segue il nome, non sprofonda in fondo. */
.dg-partner-card__desc {
	margin-top: 12px;
}

.dg-partner-card__desc p {
	margin: 0 0 12px;
	font-family: var(--dg-font-body, sans-serif);
	font-size: 15px;
	line-height: 1.7;
	color: inherit;
}

.dg-partner-card__desc p:last-child {
	margin-bottom: 0;
}

/* ---------- Contatti ---------- */

.dg-contatti {
	padding: 0 24px;
	background: var(--dg-white, #FFFFFF);
	color: var(--dg-black, #1D1D1B);
}

.dg-contatti--grey {
	background: var(--dg-light, #EEEDED);
}

.dg-contatti--dark {
	background: var(--dg-black, #1D1D1B);
	color: var(--dg-white, #FFFFFF);
}

.dg-contatti__inner {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

.dg-contatti__head {
	margin-bottom: 48px;
}

.dg-contatti__title {
	margin: 0;
	font-family: var(--dg-font-heading, serif);
	font-size: 33px;
	font-weight: 400;
	line-height: 1.15;
	color: inherit;
}

/*
 * Nel template la mappa viene prima dei recapiti, quindi occupa la colonna di
 * sinistra. `align-items: start` fa da base per la riga; è poi la colonna dei
 * recapiti a chiedere di centrarsi, qui sotto.
 */
.dg-contatti__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 48px;
}

/*
 * L'altezza della riga la detta la mappa, che è la più alta: i recapiti sono
 * poche righe e centrandoli si allineano al centro della mappa invece di
 * restare appesi in cima.
 */
.dg-contatti__info {
	align-self: center;
	text-align: center;
}

/*
 * Il titolo è un contenitore flex — icona e testo affiancati — e `text-align`
 * sul genitore non tocca la disposizione dei suoi figli: a centrarlo è
 * `justify-content`, che va chiesto a parte.
 */
.dg-contatti__info .dg-contatti__label {
	justify-content: center;
}

/* Senza mappa non c'è una seconda colonna da affiancare. */
.dg-contatti--no-map .dg-contatti__grid {
	grid-template-columns: 1fr;
}

.dg-contatti__block + .dg-contatti__block {
	margin-top: 32px;
}

/*
 * `margin: 0 0 8px` con la sola classe non basterebbe: Twenty Twenty stila
 * `.entry-content h2` con margini generosi e specificità classe+tag. Il reset
 * dei titoli in cima al file elenca i componenti uno per uno, e questo ci è
 * stato aggiunto.
 *
 * `align-items: baseline` no: allineerebbe l'icona alla riga del testo facendola
 * sembrare più in basso. Con `center` sta a metà della prima riga.
 */
.dg-contatti__label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	font-family: var(--dg-font-heading, serif);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.25;
	color: inherit;
}

/*
 * L'unica icona che non segue il colore del testo: qui fa da segnale, e
 * l'accento la distingue dal titolo che le sta accanto. Il `flex: 0 0 auto`
 * che le impedisce di stringersi ce l'ha già `.dg-icon`.
 */
.dg-contatti__icon {
	color: var(--dg-teal, #52CEBF);
}

.dg-contatti__value {
	margin: 0 0 8px;
	font-family: var(--dg-font-body, sans-serif);
	font-size: 16px;
	line-height: 1.7;
	color: var(--dg-grey);
}

.dg-contatti__value:last-child {
	margin-bottom: 0;
}

/*
 * Il link resta del colore del testo: l'azzurro di default stonerebbe in un
 * elenco di recapiti. Niente hover né transizione, come il resto del file:
 * resta il solo outline da tastiera.
 */
.dg-contatti__link {
	color: inherit;
	text-decoration: none;
}

.dg-contatti__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/*
 * L'iframe arriva dal campo ACF con width e height fissi addosso: il rapporto
 * sul contenitore più il 100% qui sotto li scavalcano, così la mappa si adatta
 * invece di sbordare sul telefono.
 */
.dg-contatti__map {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 22px;
	background: var(--dg-light, #EEEDED);
}

.dg-contatti__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Newsroom ---------- */

.dg-news {
	padding: 170px 24px;
	background: var(--dg-white, #FFFFFF);
	color: var(--dg-black, #1D1D1B);
}

.dg-news--grey {
	background: var(--dg-light, #EEEDED);
}

.dg-news--dark {
	background: var(--dg-black, #1D1D1B);
	color: var(--dg-white, #FFFFFF);
}

.dg-news__inner {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

.dg-news__head {
	margin-bottom: 50px;
}

.dg-news__title {
	margin: 0;
	font-family: var(--dg-font-heading, serif);
	font-size: 33px;
	font-weight: 400;
	line-height: 1.15;
	color: inherit;
}

.dg-news__desc {
	margin: 16px 0 0;
	max-width: 720px;
	font-family: var(--dg-font-body, sans-serif);
	font-size: 16px;
	line-height: 1.7;
	color: var(--dg-grey, #616160);
}

.dg-news--dark .dg-news__desc {
	color: var(--dg-white, #FFFFFF);
}

/* ---------- Frecce ai lati ---------- */

.dg-news__viewport {
	position: relative;
}

/*
 * Le frecce stanno a cavallo dei bordi del carosello, centrate in verticale.
 * Sporgono di metà larghezza: esattamente quanto il padding laterale della
 * sezione, quindi restano dentro la pagina senza generare scroll orizzontale.
 */
.dg-news__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--dg-light, #EEEDED);
	border-radius: 50%;
	background: var(--dg-white, #FFFFFF);
	color: var(--dg-black, #1D1D1B);
	cursor: pointer;
}

.dg-news__arrow--prev {
	left: 0;
	transform: translate(-50%, -50%);
}

.dg-news__arrow--next {
	right: 0;
	transform: translate(50%, -50%);
}

.dg-news__arrow:focus-visible {
	outline: 2px solid var(--dg-black, #1D1D1B);
	outline-offset: 3px;
}

/* Il JS disabilita la freccia a fine corsa. */
.dg-news__arrow:disabled {
	visibility: hidden;
}

/* ---------- Track ---------- */

/*
 * Quante card stanno in vista lo decide lo shortcode: la larghezza di ogni
 * colonna è il totale meno i gap, diviso per le card visibili.
 */
.dg-news__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--dg-news-per-view, 3) - 1) * 24px) / var(--dg-news-per-view, 3));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.dg-news__track::-webkit-scrollbar {
	display: none;
}

.dg-news__track:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.dg-news__item {
	display: flex;
	margin: 0;
	scroll-snap-align: start;
}

/* ---------- Card ---------- */

.dg-news-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border-radius: 22px;
	background: var(--dg-light, #EEEDED);
	color: var(--dg-black, #1D1D1B);
	text-align: left;
}

.dg-news-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px;
}

.dg-news-card__title {
	margin: 0;
	font-family: var(--dg-font-heading, serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25;
	color: inherit;
}

.dg-news-card__link {
	color: inherit;
	text-decoration: none;
}

/* Estende l'area cliccabile a tutta la card. */
.dg-news-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.dg-news-card__link:focus-visible::after {
	outline: 2px solid currentColor;
	outline-offset: -3px;
}

/* Stesso filo verde delle card servizi: vedi .dg-card__rule. */
.dg-news-card .dg-news-card__rule {
	width: 20%;
	height: 0;
	margin: 16px 0 0;
	border: 0;
	border-top: 2px solid var(--dg-teal, #52CEBF);
	background: none;
}

.dg-news-card .dg-news-card__rule::before,
.dg-news-card .dg-news-card__rule::after {
	content: none;
}

.dg-news-card__excerpt {
	margin: 12px 0 0;
	font-family: var(--dg-font-body, sans-serif);
	font-size: 16px;
	line-height: 1.7;
	color: var(--dg-grey, #616160);
}

/* Stessa CTA delle card servizi: vedi .dg-card__cta. */
.dg-news-card__cta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 24px;
	font-family: var(--dg-font-heading, serif);
	font-size: 14px;
	line-height: 1;
	color: inherit;
}

/* ---------- Footer ---------- */

.dg-news__footer {
	margin-top: 40px;
	text-align: center;
}

.dg-news__cta {
	display: inline-block;
	padding: 14px 28px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-family: var(--dg-font-heading, serif);
	font-size: 14px;
	line-height: 1;
	color: inherit;
	text-decoration: none;
}

.dg-news__cta:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- Newsletter ---------- */

.dg-newsletter {
	background: var(--dg-white, #FFFFFF);
	color: var(--dg-black, #1D1D1B);
}

.dg-newsletter--grey {
	background: var(--dg-light, #EEEDED);
}

.dg-newsletter--dark {
	background: var(--dg-black, #1D1D1B);
	color: var(--dg-white, #FFFFFF);
}

/*
 * Sezione a tutta larghezza: nessun max-width e nessun padding, così il
 * pannello arriva al bordo dello schermo. La metà vuota parte dal bordo
 * opposto. La card è posizionata in assoluto sulla linea di stacco fra le due
 * metà, quindi l'inner fa da riferimento.
 */
.dg-newsletter__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	box-sizing: border-box;
}

/* Variante rientrata nel contenitore, per quando serve. */
.dg-newsletter--contained .dg-newsletter__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Metà sinistra deliberatamente vuota: fa respirare il pannello. */
.dg-newsletter__spacer {
	min-height: 1px;
}

.dg-newsletter--reverse .dg-newsletter__spacer {
	order: 2;
}

.dg-newsletter__panel {
	position: relative;
	min-height: 520px;
	overflow: hidden;
	box-sizing: border-box;
	background: var(--dg-light, #EEEDED);
	isolation: isolate;
}

/* A tutta larghezza il pannello tocca il bordo: gli angoli tondi stonano. */
.dg-newsletter--contained .dg-newsletter__panel {
	min-height: 440px;
	border-radius: 8px;
}

.dg-newsletter__image {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* A cavallo delle due metà: il 50% dell'inner è la linea di stacco. */
.dg-newsletter__card {
	position: absolute;
	top: 50%;
	left: 42%;
	z-index: 1;
	transform: translate(-50%, -50%);
	width: 650px;
	max-width: calc(100% - 48px);
	box-sizing: border-box;
	padding: 32px;
	border-radius: 22px;
	background: var(--dg-light);
	color: var(--dg-black, #1D1D1B);
	text-align: left;
}

.dg-newsletter__title {
	margin: 0;
	font-family: var(--dg-font-heading, serif);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.25;
	color: inherit;
}

.dg-newsletter__desc {
	margin: 12px 0 0;
	font-family: var(--dg-font-body, sans-serif);
	font-size: 16px;
	line-height: 1.6;
	color: inherit;
}

.dg-newsletter__cta {
	display: inline-block;
	margin-top: 24px;
	padding: 14px 32px;
	border-radius: 999px;
	background: var(--dg-black, #1D1D1B);
	font-family: var(--dg-font-heading, serif);
	font-size: 14px;
	line-height: 1;
	color: var(--dg-white, #FFFFFF);
	text-decoration: none;
}

.dg-newsletter__cta:focus-visible {
	outline: 2px solid var(--dg-black, #1D1D1B);
	outline-offset: 3px;
}

/* ---------- Banner ---------- */

.dg-banner {
	padding: 0px 24px 170px;
	color: var(--dg-white, #FFFFFF);
}

/* Il box rientra nel contenitore: l'immagine non arriva al bordo pagina. */
.dg-banner__box {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 64px 48px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--dg-black, #1D1D1B);
	isolation: isolate;
	/* Altezza di default (`medium`). */
	min-height: 300px;
}

/* Variante a tutta larghezza, se dovesse servire altrove. */
.dg-banner--full {
	padding-left: 0;
	padding-right: 0;
}

.dg-banner--full .dg-banner__box {
	max-width: none;
	border-radius: 0;
}

.dg-banner--h-small .dg-banner__box {
	min-height: 220px;
}

.dg-banner--h-large .dg-banner__box {
	min-height: 420px;
}

.dg-banner__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* L'opacità del velo arriva dallo shortcode. */
.dg-banner__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(29, 29, 27, var(--dg-banner-overlay, .6));
}

.dg-banner__inner {
	position: relative;
	width: 100%;
}

.dg-banner--center .dg-banner__inner {
	text-align: center;
}

.dg-banner__title {
	margin: 0;
	font-family: var(--dg-font-heading, serif);
	font-size: 33px;
	font-weight: 400;
	line-height: 1.2;
	color: inherit;
}

.dg-banner__desc {
	margin: 16px 0 0;
	max-width: 700px;
	font-family: var(--dg-font-body, sans-serif);
	font-size: 16px;
	line-height: 1.7;
	color: inherit;
}

.dg-banner--center .dg-banner__desc {
	margin-left: auto;
	margin-right: auto;
}

.dg-banner__cta {
	display: inline-block;
	margin-top: 32px;
	padding: 14px 32px;
	border-radius: 999px;
	background: var(--dg-white, #FFFFFF);
	font-family: var(--dg-font-heading, serif);
	font-size: 14px;
	line-height: 1;
	color: var(--dg-black, #1D1D1B);
	text-decoration: none;
}

.dg-banner__cta:focus-visible {
	outline: 2px solid var(--dg-white, #FFFFFF);
	outline-offset: 3px;
}

/* ---------- Tablet ---------- */

@media (max-width: 900px) {
	.dg-hero {
		padding: 32px 24px;
		min-height: 520px;
	}

	.dg-hero__title {
		font-size: 40px;
	}

	.dg-double__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.dg-double--reverse .dg-double__col--main {
		order: 0;
	}

	.dg-double__col--aside {
		padding-top: 0;
	}

	.dg-services__inner {
		padding: 32px;
	}

	/*
	 * La griglia torna nel flusso. Fuori da esso il pannello non conta le card
	 * nella propria altezza: su desktop lo stacco sotto è calcolato a mano nel
	 * tema, ma qui le card si allungano e sfonderebbero la sezione successiva.
	 */
	.dg-services__grid {
		position: static;
		width: auto;
		transform: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dg-news__track {
		--dg-news-per-view: 2;
	}

	.dg-team {
		padding: 64px 24px;
	}

	.dg-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dg-partner {
		padding: 64px 24px;
	}

	.dg-partner__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dg-contatti {
		padding: 64px 24px;
	}

	/* A questa larghezza la mappa affiancata diventa un francobollo. */
	.dg-contatti__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.dg-newsletter__inner {
		grid-template-columns: 1fr;
	}

	/* Su una colonna la metà vuota non serve più. */
	.dg-newsletter__spacer {
		display: none;
	}

	/*
	 * Senza la metà vuota non c'è più una linea di stacco su cui stare a
	 * cavallo: la card torna centrata sul pannello.
	 */
	.dg-newsletter__card {
		left: 50%;
	}

	.dg-banner__box {
		padding: 48px 32px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
	/* Su un telefono in verticale 420px sono già oltre metà schermo. */
	.dg-hero {
		padding: 32px 24px;
		min-height: 420px;
	}

	.dg-hero.dg-hero--h-small {
		min-height: 260px;
	}

	.dg-hero.dg-hero--h-medium {
		min-height: 340px;
	}

	.dg-hero__title {
		font-size: 32px;
	}

	.dg-hero__desc {
		margin-top: 16px;
		font-size: 16px;
	}

	.dg-hero__cta {
		margin-top: 24px;
	}

	.dg-double,
	.dg-services,
	.dg-faq,
	.dg-quote,
	.dg-news {
		padding: 64px 24px;
	}

	.dg-double__title,
	.dg-services__title,
	.dg-faq__title,
	.dg-news__title,
	.dg-banner__title {
		font-size: 26px;
	}

	/*
	 * Titoli e citazioni sono la parte più esposta: una parola lunga (un URL,
	 * un nome composto) su 375px manderebbe la pagina in scroll orizzontale.
	 */
	.dg-hero__title,
	.dg-double__title,
	.dg-services__title,
	.dg-card__title,
	.dg-faq__title,
	.dg-faq__question,
	.dg-news__title,
	.dg-news-card__title,
	.dg-newsletter__title,
	.dg-banner__title,
	.dg-partner__title,
	.dg-partner-card__name,
	.dg-contatti__title,
	.dg-contatti__label,
	.dg-contatti__value,
	.dg-quote .dg-quote__text > p {
		overflow-wrap: break-word;
	}

	.dg-double__inner {
		gap: 24px;
	}

	.dg-services__head,
	.dg-faq__head,
	.dg-news__head {
		margin-bottom: 32px;
	}

	.dg-services__inner {
		padding: 24px;
	}

	.dg-services__grid {
		grid-template-columns: 1fr;
	}

	/* Il tocco ha bisogno di più area della domanda in sé. */
	.dg-faq__summary {
		gap: 16px;
		padding: 20px 0;
	}

	.dg-faq__question {
		font-size: 18px;
	}

	/*
	 * La virgoletta decorativa su desktop sborda a sinistra del testo. Sotto i
	 * 530px quello sbordo esce dallo schermo e genera scroll orizzontale,
	 * quindi qui torna nel flusso, sopra la citazione. Il margine negativo
	 * recupera lo spazio vuoto sotto la linea di base del glifo.
	 */
	.dg-quote__mark {
		position: static;
		font-size: 96px;
	}

	.dg-quote__text {
		margin-top: -20px;
	}

	/* La regola desktop è `.dg-quote .dg-quote__text > p`: va pareggiata. */
	.dg-quote .dg-quote__text > p {
		font-size: 20px;
	}

	.dg-news__track {
		--dg-news-per-view: 1;
	}

	.dg-team__grid {
		grid-template-columns: 1fr;
	}

	.dg-partner__grid {
		grid-template-columns: 1fr;
	}

	.dg-partner-card {
		padding: 24px;
	}

	/* Su una colonna stretta il 4/3 ruba mezzo schermo: la mappa si accorcia. */
	.dg-contatti__map {
		aspect-ratio: 1 / 1;
	}

	/*
	 * A tutta larghezza il ritratto 3/4 diventerebbe altissimo: su una colonna
	 * la foto si accorcia e resta leggibile senza scrollare.
	 */
	.dg-team-card__photo {
		aspect-ratio: 4 / 3;
	}

	/*
	 * Sui viewport stretti il padding laterale non basta a contenere la
	 * sporgenza: le frecce rientrano sopra le card.
	 */
	.dg-news__arrow {
		width: 40px;
		height: 40px;
	}

	.dg-news__arrow--prev {
		left: 6px;
		transform: translate(0, -50%);
	}

	.dg-news__arrow--next {
		right: 6px;
		transform: translate(0, -50%);
	}

	.dg-news-card__body {
		padding: 20px;
	}

	.dg-newsletter__panel {
		min-height: 420px;
	}

	.dg-newsletter__card {
		padding: 24px;
	}

	.dg-newsletter__title {
		font-size: 20px;
	}

	.dg-banner {
		padding: 40px 24px;
	}

	.dg-banner__box {
		padding: 40px 24px;
	}

	/* Sotto l'immagine di sfondo il testo ha bisogno di tutta l'altezza. */
	.dg-banner--h-large .dg-banner__box {
		min-height: 340px;
	}
}