/* ==========================================================================
   Edilmutti - pagine istituzionali (Azienda e Servizi).
   Chi siamo (templates/chi-siamo.php, dal mockup Figma "Chi siamo"): testata fotografica
   centrata, blocco azienda asimmetrico, numeri su fondo beige, richiami con la foto a
   sinistra. Showroom, Certificazioni e Servizi: in fondo al file,
   una sezione ciascuna.
   ========================================================================== */

/* Paragrafo grande, usato in apertura del blocco azienda e nei numeri. */
.dg-paragrafone { margin: 0; font-size: var(--dg-h4); line-height: 1.24; }

/* ---------- Testata: foto a tutto schermo, titolo al centro, testo in basso a destra ---------- */
.dg-header--sovrapposto ~ .dg-main > .dg-apertura:first-child { margin-top: calc(-4.5rem - var(--dg-border-width)); }
@media (min-width: 1200px) {
	.dg-header--sovrapposto ~ .dg-main > .dg-apertura:first-child { margin-top: calc(-7.875rem - var(--dg-border-width)); }
}
.dg-apertura {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--altezza-barra, 0px));
	color: var(--dg-neutral-100);
	background: var(--dg-primary-900);
}
.dg-apertura__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.dg-apertura::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(var(--dg-black-rgb), .42); }
.dg-apertura__centro {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: calc(4.5rem + var(--dg-space-5));
	text-align: center;
}
@media (min-width: 1200px) { .dg-apertura__centro { padding-top: calc(7.875rem + var(--dg-space-5)); } }
.dg-apertura__titolo { max-width: 10em; margin: 0; font-weight: var(--dg-fw-medium); line-height: 1.07; letter-spacing: -.01em; }
/* Stessa scala fissa per fasce della hero della home (sezioni.css), piu' piccola sul telefono:
   il titolo e' centrato e lungo. */
.dg-apertura__titolo { font-size: 2.75rem; }
@media (min-width: 576px) { .dg-apertura__titolo { font-size: 4.375rem; } }
@media (min-width: 768px) { .dg-apertura__titolo { font-size: 5rem; } }
@media (min-width: 992px) { .dg-apertura__titolo { font-size: 5.625rem; } }
@media (min-width: 1200px) { .dg-apertura__titolo { font-size: 6.375rem; } }
@media (min-width: 1400px) { .dg-apertura__titolo { font-size: 7.25rem; } }
.dg-apertura__basso { display: flex; justify-content: flex-end; padding-block: var(--dg-space-5) var(--dg-ss-md); }
.dg-apertura__testo { max-width: 19em; margin: 0; font-size: var(--dg-fs-lg); font-weight: var(--dg-fw-medium); line-height: 1.45; }

/* ---------- Blocco azienda: due colonne sfalsate ---------- */
/* A sinistra testo in alto e foto in basso; a destra foto quadrata e testo su due colonne.
   Le due colonne hanno la stessa altezza: la foto di sinistra scende fino in fondo. */
.dg-storia { padding-block: var(--dg-ss-lg) var(--dg-ss-xl); }
.dg-storia__manifesto { max-width: 34em; margin-bottom: var(--dg-ss-lg); }
.dg-storia__griglia { display: grid; gap: var(--dg-ss-md); }
.dg-storia__sinistra,
.dg-storia__destra { display: flex; flex-direction: column; gap: var(--dg-ss-md); }
/* Sotto 992 px le colonne si sciolgono: testo, foto della sede, secondo testo, foto degli
   interni, cosi' foto e testi si alternano. */
@media (max-width: 991.98px) {
	.dg-storia__sinistra, .dg-storia__destra { display: contents; }
	.dg-storia__foto--quadrata { order: 1; }
	.dg-storia__testo--colonne { order: 2; }
	.dg-storia__foto--bassa { order: 3; }
}
@media (min-width: 992px) {
	.dg-storia__griglia { grid-template-columns: 33fr 17fr 50fr; gap: 0; }
	.dg-storia__sinistra { grid-column: 1; justify-content: space-between; }
	.dg-storia__destra { grid-column: 3; gap: var(--dg-space-6); }
}
.dg-storia__testo { margin: 0; font-size: var(--dg-fs-lg); }
@media (min-width: 768px) {
	.dg-storia__testo--colonne { column-count: 2; column-gap: var(--dg-space-5); }
}
.dg-storia__foto { margin: 0; overflow: hidden; background: var(--dg-neutral-200); }
.dg-storia__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dg-storia__foto--quadrata { aspect-ratio: 1; }
.dg-storia__foto--quadrata img { object-position: 45% 50%; }
.dg-storia__foto--bassa { aspect-ratio: 693 / 742; }
@media (min-width: 992px) { .dg-storia__foto--bassa { margin-top: var(--dg-ss-xl); } }

/* ---------- Numeri: paragrafo a sinistra, quattro riquadri a destra ---------- */
.dg-cifre { padding-block: var(--dg-ss-lg); background: var(--dg-neutral-200); }
.dg-cifre__griglia { display: grid; gap: var(--dg-ss-md); }
@media (min-width: 992px) { .dg-cifre__griglia { grid-template-columns: 50fr 9fr 41fr; gap: 0; } }
.dg-cifre__testi { display: flex; flex-direction: column; align-items: flex-start; }
.dg-cifre__testi .dg-occhiello { margin-bottom: var(--dg-space-5); }
.dg-cifre__nota { max-width: 19em; margin: var(--dg-ss-md) 0 0; font-size: var(--dg-fs-lg); }
.dg-cifre__elenco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dg-space-3); align-self: start; margin: 0; }
@media (min-width: 992px) { .dg-cifre__elenco { grid-column: 3; margin-top: var(--dg-space-4); } }
.dg-cifre__voce {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--dg-space-5);
	padding: var(--dg-space-4);
	background: var(--dg-neutral-100);
	border-radius: var(--dg-radius-md);
}
.dg-cifre__voce dt { font-size: var(--dg-fs-lg); font-weight: var(--dg-fw-normal); line-height: 1.4; }
.dg-cifre__voce dd { margin: 0; font-size: var(--dg-h4); line-height: 1.15; white-space: nowrap; }
@media (min-width: 1700px) { .dg-cifre__voce dd { font-size: var(--dg-h3); } }
@media (max-width: 575.98px) {
	.dg-cifre__voce { padding: var(--dg-space-3); }
	.dg-cifre__voce dt { font-size: var(--dg-fs-sm); }
}

/* ---------- Richiami: foto a sinistra, titolo in alto e testo con pulsante in basso ---------- */
.dg-richiami { padding-block: var(--dg-ss-xl); }
.dg-richiamo { display: grid; gap: var(--dg-space-5); }
/* Filetto che separa un richiamo dal successivo, a meta' dello spazio tra i due. */
.dg-richiamo + .dg-richiamo { margin-top: var(--dg-ss-md); padding-top: var(--dg-ss-md); border-top: var(--dg-border-width) solid rgba(var(--dg-primary-500-rgb), .2); }
@media (min-width: 992px) {
	.dg-richiamo { grid-template-columns: 1050fr 76fr 994fr; gap: 0; }
	.dg-richiamo__testi { grid-column: 3; }
}
.dg-richiamo__foto { aspect-ratio: 1050 / 753; margin: 0; overflow: hidden; background: var(--dg-neutral-200); border-radius: var(--dg-radius-lg); }
.dg-richiamo__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.dg-richiamo__testi { display: flex; flex-direction: column; justify-content: space-between; gap: var(--dg-space-5); padding-block: var(--dg-space-3) var(--dg-space-4); }
.dg-richiamo__titolo { max-width: 11em; }
.dg-richiamo__testo { max-width: 29em; margin: 0 0 var(--dg-space-5); font-size: var(--dg-fs-lg); }

/* ==========================================================================
   Pagina "Showroom" (templates/showroom.php): la testata e' .dg-apertura (sopra),
   la gallery usa gallery.css.
   ========================================================================== */

/* ---------- Introduzione: titolo a sinistra, testi e aree esposte a destra ---------- */
.dg-sala { padding-block: var(--dg-ss-lg) var(--dg-ss-md); }
.dg-sala__griglia { display: grid; gap: var(--dg-space-5); }
@media (min-width: 992px) {
	.dg-sala__griglia { grid-template-columns: 5fr 1fr 6fr; gap: 0; }
	.dg-sala__testi { grid-column: 3; }
}
.dg-sala__titolo { max-width: 9em; }
.dg-sala__testi .dg-paragrafone { margin-bottom: var(--dg-space-5); }
.dg-sala__testo { margin: 0 0 var(--dg-space-4); font-size: var(--dg-fs-lg); }
.dg-aree { display: flex; flex-wrap: wrap; gap: var(--dg-space-2); margin: var(--dg-space-5) 0 0; padding: 0; list-style: none; }
.dg-aree li { padding: var(--dg-space-1) var(--dg-space-3); font-size: var(--dg-fs-sm); border: var(--dg-border-width) solid rgba(var(--dg-primary-500-rgb), .35); border-radius: var(--dg-radius-pill); }
.dg-sala-foto { padding-block: var(--dg-space-4) var(--dg-ss-xl); }
.dg-sala-foto .dg-muratura { margin-top: 0; }

/* ---------- Visita: foto, indirizzo, telefono, orari ---------- */
.dg-visita { padding-block: var(--dg-ss-lg); background: var(--dg-neutral-200); }
.dg-visita__griglia { display: grid; gap: var(--dg-ss-md); align-items: center; }
@media (min-width: 992px) { .dg-visita__griglia { grid-template-columns: 1fr 1fr; } }
.dg-visita__foto { aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: var(--dg-radius-lg); }
.dg-visita__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dg-visita__titolo { margin-bottom: var(--dg-space-5); }
.dg-visita__info { display: grid; gap: var(--dg-space-4); margin: 0 0 var(--dg-space-5); }
@media (min-width: 576px) { .dg-visita__info { grid-template-columns: 1fr 1fr; } }
.dg-visita__info > div { padding-top: var(--dg-space-3); border-top: var(--dg-border-width) solid rgba(var(--dg-primary-500-rgb), .25); }
.dg-visita__info .dg-visita__orari { grid-column: 1 / -1; }
.dg-visita__info dt { margin-bottom: var(--dg-space-2); font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-medium); letter-spacing: .02em; text-transform: uppercase; }
.dg-visita__info dd { margin: 0; font-size: var(--dg-fs-lg); }
.dg-visita__info a { color: inherit; }
.dg-visita__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dg-space-4); }
.dg-visita__percorso { color: inherit; font-weight: var(--dg-fw-medium); }
.dg-visita__percorso:hover { color: inherit; }

/* ==========================================================================
   Pagina "Certificazioni" (templates/certificazioni.php): la testata e' .dg-apertura,
   gli impegni usano .dg-montanti (sezioni.css).
   ========================================================================== */

/* ---------- La certificazione: titolo e marchio a sinistra, testi a destra ---------- */
.dg-cert { padding-block: var(--dg-ss-lg) var(--dg-ss-xl); }
.dg-cert__griglia { display: grid; gap: var(--dg-space-5); }
@media (min-width: 992px) {
	.dg-cert__griglia { grid-template-columns: 5fr 1fr 6fr; gap: 0; }
	.dg-cert__testi { grid-column: 3; }
}
.dg-cert__titolo { max-width: 9em; }
.dg-marchio { display: flex; align-items: center; gap: var(--dg-space-4); margin-top: var(--dg-space-6); }
.dg-marchio img { width: 7rem; height: auto; border-radius: var(--dg-radius-md); }
.dg-marchio p { max-width: 16em; margin: 0; font-size: var(--dg-fs-sm); }
.dg-cert__testi .dg-paragrafone { margin-bottom: var(--dg-space-5); }
.dg-cert__testo { margin: 0 0 var(--dg-space-4); font-size: var(--dg-fs-lg); }

/* ---------- Impegni: montanti su fondo verde ---------- */
.dg-impegni { padding-block: var(--dg-ss-xl); color: var(--dg-neutral-100); background: var(--dg-primary-500); }
.dg-impegni__titolo { max-width: 12em; margin-bottom: var(--dg-ss-md); }

/* ---------- La posa da vicino: foto verticale e passi numerati ---------- */
.dg-posa { padding-block: var(--dg-ss-xl); }
.dg-posa__griglia { display: grid; gap: var(--dg-ss-md); align-items: center; }
@media (min-width: 992px) {
	.dg-posa__griglia { grid-template-columns: 4fr 1fr 7fr; gap: 0; }
	.dg-posa__testi { grid-column: 3; }
}
.dg-posa__foto { aspect-ratio: 4 / 5; margin: 0; overflow: hidden; background: var(--dg-neutral-200); border-radius: var(--dg-radius-lg); }
.dg-posa__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.dg-posa__passi { margin: var(--dg-space-5) 0 0; padding: 0; list-style: none; }
.dg-posa__passi li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--dg-space-3); padding-block: var(--dg-space-4); font-size: var(--dg-fs-lg); border-top: var(--dg-border-width) solid rgba(var(--dg-primary-500-rgb), .2); }
.dg-posa__numero { padding-top: .3em; font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-medium); color: var(--dg-neutral-500); }

/* ---------- Giudizio dei clienti: voti e attestato ---------- */
.dg-giudizio { padding-block: var(--dg-ss-lg); background: var(--dg-neutral-200); }
.dg-giudizio__griglia { display: grid; gap: var(--dg-ss-md); align-items: center; }
@media (min-width: 992px) {
	.dg-giudizio__griglia { grid-template-columns: 6fr 1fr 5fr; gap: 0; }
	.dg-attestato { grid-column: 3; }
}
.dg-giudizio__titolo { max-width: 12em; margin-bottom: var(--dg-space-4); }
.dg-giudizio__testo { max-width: 32em; margin: 0 0 var(--dg-space-5); font-size: var(--dg-fs-lg); }
.dg-voti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dg-space-3); margin: 0 0 var(--dg-space-5); }
@media (min-width: 576px) { .dg-voti { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dg-voti > div { display: flex; flex-direction: column; justify-content: space-between; gap: var(--dg-space-3); padding: var(--dg-space-3) var(--dg-space-4); background: var(--dg-neutral-100); border-radius: var(--dg-radius-md); }
.dg-voti dt { font-size: var(--dg-fs-sm); }
.dg-voti dd { margin: 0; font-size: var(--dg-h4); line-height: 1; }
.dg-voti .dg-voti__evidenza { color: var(--dg-neutral-100); background: var(--dg-primary-500); }
.dg-giudizio__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dg-space-4); }
.dg-giudizio__pdf { color: inherit; font-weight: var(--dg-fw-medium); }
.dg-giudizio__pdf:hover { color: inherit; }
.dg-attestato { margin: 0; }
.dg-attestato img { display: block; width: 100%; height: auto; border-radius: var(--dg-radius-md); box-shadow: 0 1.5rem 3rem rgba(var(--dg-black-rgb), .12); }
.dg-attestato figcaption { margin-top: var(--dg-space-3); font-size: var(--dg-fs-sm); color: var(--dg-neutral-500); }

/* ==========================================================================
   Pagina "Servizi" (templates/servizi.php): testata .dg-elenco (sezioni.css),
   introduzione .dg-sala (sopra), riquadro incentivi .dg-agevolazioni (sezioni.css).
   ========================================================================== */
.dg-elenco--servizi { padding-bottom: var(--dg-ss-md); }
.dg-elenco--servizi .dg-elenco__testata { margin-bottom: 0; }

/* Foto a tutta larghezza, senza testo sopra. */
.dg-fotone { aspect-ratio: 4 / 3; margin: 0; overflow: hidden; background: var(--dg-neutral-200); }
@media (min-width: 768px) { .dg-fotone { aspect-ratio: 21 / 9; } }
.dg-fotone img { display: block; width: 100%; height: 100%; object-fit: cover; }

.dg-sala--servizi { padding-block: var(--dg-ss-xl) var(--dg-ss-lg); }
.dg-sala--servizi .dg-sala__testo { margin: 0; }

/* Servizi: righe numerate, numero grande e tenue, titolo, testo. */
.dg-servizi { padding-bottom: var(--dg-ss-xl); }
.dg-servizi__elenco { margin: 0; padding: 0; list-style: none; border-bottom: var(--dg-border-width) solid rgba(var(--dg-primary-500-rgb), .2); }
.dg-servizio { display: grid; gap: var(--dg-space-3); padding-block: var(--dg-space-5); border-top: var(--dg-border-width) solid rgba(var(--dg-primary-500-rgb), .2); }
@media (min-width: 992px) { .dg-servizio { grid-template-columns: 2fr 4fr 6fr; gap: var(--dg-space-4); align-items: baseline; padding-block: var(--dg-space-6); } }
.dg-servizio__numero { font-size: var(--dg-h3); line-height: 1; letter-spacing: -.02em; color: var(--dg-neutral-500); }
.dg-servizio__titolo { margin: 0; font-size: var(--dg-h4); font-weight: var(--dg-fw-normal); }
.dg-servizio__testo { max-width: 36em; margin: 0; font-size: var(--dg-fs-lg); }
.dg-servizio__link { display: inline-flex; align-items: center; gap: var(--dg-space-2); margin-top: var(--dg-space-3); color: inherit; font-weight: var(--dg-fw-medium); }
.dg-servizio__link:hover { color: inherit; }
.dg-servizio__link .dg-icona { width: 1.125rem; height: 1.125rem; }

/* Il riquadro incentivi chiude la pagina prima dell'invito. */
.dg-agevolazioni--servizi { padding-bottom: var(--dg-ss-xl); }