/*
Theme Name: DESEN Child
Theme URI: https://www.desen.it/
Description: Child theme a blocchi (FSE) di Twenty Twenty-Five per lo studio DESEN, progettazione e costruzione stampi per il settore calzaturiero, Barbarano Mossano (VI).
Author: Studio DESEN
Author URI: https://www.desen.it/
Template: twentytwentyfive
Version: 1.85.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: desen-child
Tags: full-site-editing, block-patterns, block-styles, editor-style, wide-blocks, translation-ready
*/

/* Gli stili globali vivono in theme.json.
   Qui solo CSS che theme.json non può esprimere. */

/* --------------------------------------------------------------------------
   Nessuno stacco tra header, contenuto e footer

   Il blockGap globale (1.5rem) vale anche tra i blocchi di primo livello:
   header, main e footer risultano separati da una fascia in cui si vede il
   fondo pagina. Header e footer hanno gia' bordo e spaziatura proprie, quindi
   lo stacco va azzerato e le sezioni si toccano.
   -------------------------------------------------------------------------- */

.wp-site-blocks > * {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   Header sticky
   -------------------------------------------------------------------------- */

.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* La barra di amministrazione è fissa in cima solo sopra i 600px: li' l'header
   si ferma sotto di essa. Sotto i 600px la barra e' in position:absolute e
   scorre via con la pagina, quindi l'header deve tornare a top:0 o resta
   sospeso a meta' schermo. Le soglie (600 / 782) sono quelle del core. */
@media screen and (min-width: 601px) {
	.admin-bar .wp-site-blocks > header {
		top: 46px;
	}
}

@media screen and (min-width: 783px) {
	.admin-bar .wp-site-blocks > header {
		top: 32px;
	}
}

.wp-site-blocks > header > .wp-block-group.has-line-background-color {
	/* Grigio della barra: piu' scuro del fondo pagina, ricavato mescolando
	   "line" e "muted" invece di introdurre un colore fuori palette. */
	--desen-header-bg: color-mix( in srgb, var(--wp--preset--color--line) 44%, var(--wp--preset--color--muted) );

	background-color: var(--desen-header-bg) !important;
}

/* --------------------------------------------------------------------------
   Header sospeso a pillola

   La barra esce dal flusso e galleggia sopra la pagina: l'hero parte dal
   bordo superiore e le si vede sotto. Sulle altre pagine il contenuto
   guadagna in cima lo spazio che la barra occuperebbe.
   -------------------------------------------------------------------------- */

:root {
	--desen-header-h: 72px;   /* altezza della barra */
	--desen-header-top: 24px; /* distanza dal bordo superiore */
}

.wp-site-blocks > header {
	position: fixed;
	inset: var(--desen-header-top) 0 auto 0;
	background: transparent !important;
	border: none !important;
	pointer-events: none;   /* il vuoto ai lati non intercetta i clic */
}

.wp-site-blocks > header > .wp-block-group.has-line-background-color {
	pointer-events: auto;
	box-sizing: border-box;

	width: auto;
	margin-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right) !important;
	min-height: var(--desen-header-h);

	border-radius: 15px;
	border: 1px solid rgba(255, 255, 255, 0.45) !important;
	box-shadow: 0 10px 30px rgba(14, 20, 32, 0.12);

	padding-block: 0 !important;
	padding-inline: 1.75rem !important;
	display: flex;
	align-items: center;
}

/* Logo tipografico: la larghezza segue la finestra, come nel riferimento
   dove occupa circa il 13% della larghezza. */
.wp-site-blocks > header .wp-block-site-logo img {
	width: clamp( 7rem, 10vw, 10.5rem );
	height: auto;
}

/* Icona del menu ridisegnata: tre tratti da 2px, piu' larghi di quelli del
   core (che sono alti 1,5 e larghi 14 su 24). Le barre sono tre gradienti
   sul pulsante: nessun elemento aggiunto al markup, e seguono currentColor. */
.wp-site-blocks > header .wp-block-navigation__responsive-container-open {
	flex: 0 0 auto;
	width: 42px;
	height: 28px;
	color: var(--wp--preset--color--navy);

	background-image:
		linear-gradient( currentColor, currentColor ),
		linear-gradient( currentColor, currentColor ),
		linear-gradient( currentColor, currentColor );
	background-size: 100% 2px;
	background-position: left top, left center, left bottom;
	background-repeat: no-repeat;
}

/* L'icona originale del blocco lascia il posto ai tratti disegnati sopra. */
.wp-site-blocks > header .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.wp-site-blocks > header > .wp-block-group.has-line-background-color > .wp-block-group {
	width: 100%;
}

/* Le pagine interne non hanno un hero da far passare sotto la barra. Lo
   spazio per la pillola non va messo sopra il contenuto — lascerebbe una
   fascia del colore di fondo — ma dentro la prima sezione, che cosi'
   arriva fino al bordo superiore con il proprio colore. */
body:not( .home ) .wp-site-blocks > main > .alignfull:first-child {
	padding-top: calc(
		var(--wp--preset--spacing--70) + var(--desen-header-h) + var(--desen-header-top) * 2
	) !important;
}

@media ( max-width: 782px ) {
	:root {
		--desen-header-h: 64px;
		--desen-header-top: 12px;
	}

	.wp-site-blocks > header > .wp-block-group.has-line-background-color {
		/* La larghezza calcolata si sommava ai margini laterali ereditati dal
		   desktop e la barra usciva a destra: qui i margini sono simmetrici. */
		width: auto;
		margin-inline: 0.75rem !important;
		padding-inline: 1.25rem !important;
	}

	.wp-site-blocks > header .wp-block-site-logo img {
		width: 7.5rem;
	}

	.wp-site-blocks > header .wp-block-navigation__responsive-container-open {
		width: 34px;
		height: 22px;
	}
}
/* --------------------------------------------------------------------------
   Effetto vetro sull'header

   Il fondo passa da opaco a semitrasparente e il contenuto che scorre sotto
   viene sfocato. La regola sta in un @supports: dove backdrop-filter non e'
   disponibile il fondo resta quello pieno definito in theme.json, cosi' il
   testo della nav non finisce mai sopra l'hero senza stacco.
   -------------------------------------------------------------------------- */

@supports ( backdrop-filter: blur(1px) ) or ( -webkit-backdrop-filter: blur(1px) ) {
	.wp-site-blocks > header > .wp-block-group.has-line-background-color {
		/* La classe preset di WordPress dichiara il fondo con !important:
		   per scavalcarla serve altrettanto. */
		background-color: rgba(255, 255, 255, 0.22) !important;
		-webkit-backdrop-filter: blur(18px) saturate(1.5);
		backdrop-filter: blur(18px) saturate(1.5);
	}
}

/* Chi ha chiesto meno trasparenza a livello di sistema torna al fondo pieno. */
@media ( prefers-reduced-transparency: reduce ) {
	.wp-site-blocks > header > .wp-block-group.has-line-background-color {
		background-color: var(--desen-header-bg) !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* --------------------------------------------------------------------------
   Pannello del menu mobile

   Pannello scuro ancorato a destra, che lascia intravedere la pagina sotto.
   Le voci sono allineate a sinistra e impilate dall'alto.
   -------------------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 200;

	/* Il core allinea le voci con align-items: var(--navigation-layout-
	   justification-setting), che la nav desktop imposta a flex-end. Ridefinire
	   la variabile qui e' piu' pulito che rincorrere la specificita' delle sue
	   regole, che annidano quattro classi. */
	--navigation-layout-justification-setting: flex-start;

	/* Rientro unico del pannello: da qui derivano sia il margine delle voci
	   sia quello della X di chiusura, che il core posiziona a right:0 dentro
	   l'area con questo padding. Un solo valore, nessuna deriva tra i due. */
	--desen-menu-inset: var(--wp--preset--spacing--50);

	/* Il pannello copre l'intero schermo. Le dichiarazioni del core hanno la
	   stessa specificita' ma arrivano piu' avanti nella pagina: senza
	   !important vincerebbero loro. */
	/* left e right a zero, larghezza automatica: con width:100% il padding
	   laterale si sommava alla larghezza (il core non dichiara border-box su
	   questo elemento) e il pannello sporgeva oltre il viewport, portandosi
	   fuori schermo il pulsante di chiusura ancorato al suo bordo destro. */
	box-sizing: border-box !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;

	/* Fondo traslucido con sfocatura di cio' che sta sotto: il pannello
	   lascia intuire la pagina invece di coprirla. Il fondo pieno resta come
	   ripiego dove backdrop-filter non e' disponibile. */
	background-color: var(--wp--preset--color--navy) !important;
	color: var(--wp--preset--color--white) !important;

	text-align: left;
}

@supports ( backdrop-filter: blur(1px) ) or ( -webkit-backdrop-filter: blur(1px) ) {
	.wp-block-navigation__responsive-container.is-menu-open {
		background-color: color-mix( in srgb, var(--wp--preset--color--navy) 46%, transparent ) !important;
		-webkit-backdrop-filter: blur( 26px ) saturate( 1.3 );
		backdrop-filter: blur( 26px ) saturate( 1.3 );
	}
}

/* Il core impone padding: clamp(1rem, <root padding>, 20rem) con tre classi.
   Da quando il root padding vale 5rem le voci risultavano molto rientrate:
   qui la specificita' pareggia quella del core e il rientro torna misurato. */
.wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay ) {
	/* In basso si aggiunge l'area sicura: su iPhone la barra di sistema
	   coprirebbe l'ultima voce. env() vale 0 dove non serve. */
	padding: var(--desen-menu-inset) var(--desen-menu-inset)
		calc( var(--desen-menu-inset) + env( safe-area-inset-bottom, 0px ) ) !important;
}

/* inset:0 misura il viewport senza la barra del browser mobile, che finisce
   quindi a coprire il fondo del pannello. svh e' l'altezza "piccola":
   quella con l'interfaccia del browser visibile, cioe' il caso peggiore. */
.wp-block-navigation__responsive-container.is-menu-open {
	height: 100vh;
	height: 100svh;
	bottom: auto !important;
}

/* La X e' in position:absolute con right:0, ma il suo riferimento e' il
   dialogo interno, che non copre tutta la larghezza del pannello: restava
   percio' molto piu' staccata dal bordo di quanto lo siano le voci.
   Portando il dialogo a tutta larghezza i due margini coincidono, perche'
   entrambi nascono dal padding del pannello (--desen-menu-inset). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	/* Il dialogo e' position:relative: era lui il riferimento della X, e non
	   coprendo tutta la larghezza del pannello la teneva piu' staccata dal
	   bordo delle voci. Reso statico, il riferimento diventa il pannello. */
	position: static !important;
	width: 100% !important;
	margin-inline: 0 !important;
}

/* Ancorata al bordo interno del pannello: right:0 coincide con il padding,
   cioe' con lo stesso --desen-menu-inset da cui partono le voci. */
/* Il pulsante di chiusura e' ancorato al viewport, non al dialogo interno:
   con il pannello a tutto schermo i due coincidono, e cosi' la posizione
   non dipende da quale antenato faccia da riferimento. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed !important;
	top: var(--desen-menu-inset) !important;
	right: var(--desen-menu-inset) !important;
	left: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	z-index: 10;
	color: var(--wp--preset--color--white) !important;

	/* Un contorno tenue: cosi. il pulsante resta individuabile anche quando
	   sotto passa una zona chiara della pagina. */
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	border-radius: 50%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

@media screen and ( min-width: 601px ) {
	.admin-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: calc( var(--desen-menu-inset) + 46px ) !important;
	}
}

/* Spazio in alto per staccare le voci dal pulsante di chiusura: la X sta a
   --desen-menu-inset dal bordo ed e' alta 2,75rem, quindi le voci partono
   sotto di essa con un margine proprio. */
.wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay )
	.wp-block-navigation__responsive-container-content {
	padding-top: calc( 2.75rem + var(--wp--preset--spacing--70) );
	min-height: 100%;
}
/* Voci impilate dall'alto, non centrate. */
.wp-block-navigation__responsive-container.is-menu-open:where( :not( .disable-default-overlay ) )
	.wp-block-navigation__responsive-container-content {
	justify-content: flex-start;
	/* Il core dichiara gap:inherit sulla lista: il passo si imposta qui. */
	gap: 25px;
}

/* Lista e voci a larghezza piena: senza questo ogni li si dimensiona sul
   proprio testo e le voci risultano scalate l'una rispetto all'altra. */
.wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay )
	.wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay )
	.wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	align-self: stretch;
	align-items: flex-start;
	width: 100%;
}

/* Voci piu' grandi: nel pannello sono il solo contenuto e vanno toccate.
   La specificita' ricalca quella del core, che azzera il padding. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-item__content {
	font-size: 40px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	padding-block: 0;
}

/* Su fondo accento la voce corrente non puo' colorarsi di accento:
   si distingue con una sottolineatura. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.current-menu-item .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Voce sotto il puntatore in accento, come la pagina corrente.
   :focus-visible e non :focus: all'apertura il core sposta il fuoco sulla
   prima voce, che con :focus appariva subito evidenziata. Cosi' l'evidenza
   resta per chi naviga da tastiera e non compare aprendo col dito o col
   mouse. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-item__content:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}
/* Il pulsante di chiusura eredita il colore del pannello. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--white);
}

/* --------------------------------------------------------------------------
   Il vetro va disattivato mentre il menu mobile e' aperto

   backdrop-filter crea un containing block per i discendenti in position:fixed.
   Il pannello del menu e' fixed: con il filtro attivo sull'header si dimensiona
   sull'header stesso invece che sul viewport, e il menu risulta inutilizzabile.
   -------------------------------------------------------------------------- */

.wp-site-blocks > header > .wp-block-group:has( .is-menu-open ) {
	background-color: var(--desen-header-bg) !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
/* --------------------------------------------------------------------------
   Hero a tutta altezza (home)

   L'hero occupa lo schermo meno l'header, cosi' il primo scroll avviene
   ancora dentro la fascia navy. L'altezza dell'header e' data dal logo (4rem)
   piu' le due spaziature (spacing|40) piu' il bordo inferiore.

   100svh e' l'altezza "piccola" del viewport: su mobile tiene conto della
   barra del browser, che con 100vh farebbe sporgere l'hero oltre lo schermo.
   -------------------------------------------------------------------------- */

.desen-hero {
	background-image: url( 'assets/images/hero.jpg' );
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;

	min-height: 100vh;
	min-height: 100svh;

	/* Il contenuto resta centrato verticalmente nello spazio guadagnato.
	   Il layout constrained continua a limitare la larghezza dei figli. */
	display: flex;
	flex-direction: column;
	justify-content: center;
}


/* Il layout constrained del core dichiara margin-left/right:auto sui figli.
   In una colonna flex i margini automatici scavalcano l'allineamento e
   centrano gli elementi piu' stretti del contenitore: titolo e paragrafo
   restavano a sinistra solo perche' larghi quanto il limite di contenuto.
   Il selettore qui e' piu' specifico di quello del core. */
.wp-site-blocks .desen-hero > * {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
	align-self: stretch;
}

/* --------------------------------------------------------------------------
   Fascia del titolo e introduzione senza stacco

   Il blockGap del layout constrained applica un margine superiore a
   .wp-block-post-content: tra la fascia navy del titolo e quella
   dell'introduzione compariva una riga di fondo chiaro. Le due fasce
   devono leggersi come una sola.
   -------------------------------------------------------------------------- */

main > .wp-block-post-content {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   Pulsanti dell'hero

   Entrambi in stile contorno e di pari dimensione: al passaggio del mouse
   si riempiono di bianco con il testo navy. Lo stile "outline" del core usa
   un bordo da 2px e nessun fondo: qui cambia solo il comportamento in hover.
   -------------------------------------------------------------------------- */

.desen-btn .wp-block-button__link {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--white) !important;
	border-color: var(--wp--preset--color--accent);
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.desen-btn .wp-block-button__link:hover,
.desen-btn .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--navy) !important;
	border-color: var(--wp--preset--color--white);
}

/* I pulsanti partono dal bordo sinistro, come il testo dell'hero. */
.desen-hero .wp-block-buttons {
	justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   Logo tipografico nel footer

   Misure ricavate dalle schermate di riferimento: 235px su desktop e il 70%
   della larghezza su schermi stretti (395px su una finestra da 562px).
   min() tiene il valore piu' piccolo dei due: sotto i 336px di finestra
   comanda la percentuale, sopra il tetto fisso.
   -------------------------------------------------------------------------- */

.desen-footer-logo img {
	width: min( 70vw, 235px );
	height: auto;
}

/* Il PNG ha 150px di trasparente a sinistra su 2191 di larghezza (6,85%):
   la "D" partiva percio' rientrata rispetto al testo sotto. Lo scostamento
   negativo vale la stessa percentuale della larghezza resa, quindi resta
   corretto a qualunque dimensione. */
.desen-footer-logo img {
	margin-inline-start: -6.85%;
}

/* La figure non deve tagliare l'immagine spostata. */
.desen-footer-logo {
	overflow: visible;
}

/* --------------------------------------------------------------------------
   Nota sull'uso di strumenti di IA

   Deve restare leggibile ma defilata: piu' chiara del testo secondario,
   senza scendere sotto un contrasto che la renda inaccessibile.
   -------------------------------------------------------------------------- */

.desen-disclaimer {
	color: color-mix( in srgb, var(--wp--preset--color--line) 62%, var(--wp--preset--color--navy) ) !important;
	max-width: 44rem;

	/* Il layout constrained centra i blocchi piu. stretti della colonna con
	   margin-inline:auto: qui il testo deve invece partire dal bordo sinistro,
	   come il resto del footer. */
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* --------------------------------------------------------------------------
   Footer su fondo navy

   Il logo tipografico e' un PNG nero: su fondo scuro sparirebbe. Il filtro lo
   porta a bianco pieno senza dover produrre un secondo file.
   -------------------------------------------------------------------------- */

.wp-site-blocks > footer .desen-footer-logo img {
	filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   Carosello "I nostri lavori"

   Scorrimento orizzontale nativo, senza JavaScript ne' librerie: si trascina
   col dito su mobile e con il trackpad su desktop, e ogni scorrimento si
   aggancia alla foto successiva. Le immagini restano immagini normali nel
   DOM, quindi leggibili dai motori di ricerca e dagli screen reader.
   -------------------------------------------------------------------------- */

.desen-carousel {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 0;

	/* Spazio sotto per la barra di scorrimento, dove il sistema la mostra. */
	padding-bottom: var(--wp--preset--spacing--20);

	/* Su Firefox la barra resta sottile invece che a tutta altezza. */
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--line) transparent;
}

.desen-carousel .desen-slide {
	flex: 0 0 auto;
	width: min( 80vw, 32rem );
	scroll-snap-align: start;
	margin: 0;
}

.desen-carousel .desen-slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Chi ha chiesto meno animazioni non subisce lo scorrimento morbido. */
@media ( prefers-reduced-motion: no-preference ) {
	.desen-carousel {
		scroll-behavior: smooth;
	}
}

/* --------------------------------------------------------------------------
   Frecce del carosello

   Sotto la fila, allineate a destra, in cerchi a contorno: non si
   sovrappongono piu' alle foto. Il contenitore e' creato dallo script, quindi
   senza JavaScript non esiste e il carosello resta scorribile a mano.
   -------------------------------------------------------------------------- */

/* Griglia e non flex: la fila ha un margine negativo per uscire dal bordo
   destro, e in un contenitore flex quello spazio restava libero sulla prima
   riga — la freccia "indietro" ci finiva dentro, sopra le foto. Con la
   griglia la fila occupa da sola la prima riga e le frecce la seconda. */
.desen-carousel-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	column-gap: var(--wp--preset--spacing--20);
}

.desen-carousel-wrap > .desen-carousel {
	grid-column: 1 / -1;
	grid-row: 1;
}

.desen-carousel-wrap > .desen-arrow--prev {
	grid-column: 2;
	grid-row: 2;
}

.desen-carousel-wrap > .desen-arrow--next {
	grid-column: 3;
	grid-row: 2;
}

.desen-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-block-start: var(--wp--preset--spacing--40);

	border: 1.5px solid var(--wp--preset--color--navy);
	border-radius: 50%;
	background-color: transparent;
	color: var(--wp--preset--color--navy);

	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.desen-arrow:hover:not(:disabled),
.desen-arrow:focus-visible:not(:disabled) {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.desen-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

/* --------------------------------------------------------------------------
   Settori in home: una riga sola, ma non sul telefono

   La griglia e' a quattro colonne fisse, cosi' su desktop i settori restano
   allineati su un'unica riga. Sotto i 782px quattro colonne darebbero riquadri
   da poche decine di pixel e titoli spezzati su piu' righe: qui si passa a due,
   e sotto i 480px a una sola.
   -------------------------------------------------------------------------- */

@media ( max-width: 781px ) {
	.desen-settori {
		grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important;
	}
}

@media ( max-width: 479px ) {
	.desen-settori {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* --------------------------------------------------------------------------
   Fasce a tutta larghezza accostate

   Due sezioni alignfull consecutive sono separate dal blockGap globale, e in
   quello spazio compare il fondo pagina: tra la fascia navy dei lavori e
   quella grigia dei settori si vedeva una riga chiara. Le fasce colorate
   devono toccarsi; lo spazio interno di ciascuna resta il loro padding.
   -------------------------------------------------------------------------- */

.wp-block-post-content > .alignfull + .alignfull,
main > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   Settori in home: risposta al passaggio del mouse

   Solo dove esiste un puntatore vero: su touch l'hover resterebbe "appiccicato"
   dopo il tocco. La foto si avvicina appena dentro il proprio riquadro, che la
   ritaglia, e l'etichetta passa all'accento.
   -------------------------------------------------------------------------- */

@media ( hover: hover ) and ( min-width: 783px ) {
	.desen-settori .wp-block-image {
		overflow: hidden;
	}

	.desen-settori .wp-block-image img {
		transition: transform 0.45s ease;
	}

	.desen-settori > .wp-block-group:hover .wp-block-image img {
		transform: scale( 1.05 );
	}

	/* Su fondo navy l'accento avrebbe un contrasto di circa 2,5:1 sul testo:
	   l'etichetta resta bianca e si sottolinea, che si vede e si legge. */
	.desen-settori > .wp-block-group p {
		transition: text-decoration-color 0.25s ease;
		text-decoration: underline transparent;
		text-underline-offset: 0.25em;
	}

	.desen-settori > .wp-block-group:hover p {
		text-decoration-color: currentColor;
	}
}

/* Chi ha ridotto le animazioni vede il colore cambiare, non l'immagine muoversi. */
@media ( prefers-reduced-motion: reduce ) {
	.desen-settori .wp-block-image img,
	.desen-settori > .wp-block-group:hover .wp-block-image img {
		transition: none;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Servizi a fisarmonica

   Il blocco Dettagli usa <details>/<summary> nativi: apertura, tastiera e
   annuncio dello stato sono gestiti dal browser. Qui si vestono soltanto.
   -------------------------------------------------------------------------- */

.desen-servizio > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);

	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);

	transition: color 0.2s ease;
}

/* Il triangolino di sistema sparisce: al suo posto un segno costruito qui,
   che possiamo allineare e colorare. */
.desen-servizio > summary::-webkit-details-marker {
	display: none;
}

.desen-servizio > summary::after {
	content: "";
	flex: 0 0 auto;
	margin-inline-start: auto;
	width: 0.75em;
	height: 0.75em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg ) translate( -0.15em, -0.15em );
	transition: transform 0.25s ease;
}

.desen-servizio[open] > summary::after {
	transform: rotate( -135deg ) translate( -0.15em, -0.15em );
}

@media ( hover: hover ) {
	.desen-servizio > summary:hover {
		color: var(--wp--preset--color--accent);
	}
}

/* Il core applica un contorno su :focus, che scatta anche col mouse: al clic
   compariva un riquadro attorno alla voce. Qui resta solo per chi arriva
   da tastiera, dove serve davvero a sapere dove ci si trova. */
.desen-servizio > summary:focus:not( :focus-visible ) {
	outline: none;
}

.desen-servizio > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

/* Il contenuto si stacca dal sommario, non ci si appoggia. */
.desen-servizio[open] > *:not( summary ):first-of-type {
	margin-block-start: var(--wp--preset--spacing--40);
}

@media ( prefers-reduced-motion: reduce ) {
	.desen-servizio > summary,
	.desen-servizio > summary::after {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Immagine di apertura verticale su schermi stretti

   Il rendering orizzontale, ritagliato in un riquadro alto e stretto, perde
   quasi tutto lo stampo. Qui subentra la versione 9:16, con la velatura
   ruotata: verticale invece che laterale, perche' su mobile il testo occupa
   la parte bassa e non la sinistra.
   -------------------------------------------------------------------------- */

@media ( max-width: 781px ) {
	.desen-hero {
		background-image: url( 'assets/images/hero-mobile.jpg' );
		background-position: center top;
	}
}

/* --------------------------------------------------------------------------
   Comparsa del testo di apertura

   Lo stato iniziale e' dichiarato qui, non aggiunto da JavaScript: il
   contrassegno .desen-reveal-on viene scritto nel <head> prima del primo
   disegno, quindi il testo nasce gia' trasparente. Applicandolo da uno script
   di fine pagina, il titolo verrebbe prima mostrato e poi nascosto, e
   l'effetto sarebbe uno sfarfallio invece di una comparsa.

   Senza JavaScript il contrassegno non c'e' e il testo resta visibile.
   -------------------------------------------------------------------------- */

.desen-reveal-on .desen-hero > h1,
.desen-reveal-on .desen-hero > p,
.desen-reveal-on .desen-hero > .wp-block-buttons {
	opacity: 0;
	transform: translateY( 0.9rem );
	transition:
		opacity 1.1s cubic-bezier( 0.22, 0.61, 0.36, 1 ),
		transform 1.1s cubic-bezier( 0.22, 0.61, 0.36, 1 );
	will-change: opacity, transform;
}

.desen-reveal-on .desen-hero > h1.is-revealed,
.desen-reveal-on .desen-hero > p.is-revealed,
.desen-reveal-on .desen-hero > .wp-block-buttons.is-revealed {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.desen-reveal-on .desen-hero > h1,
	.desen-reveal-on .desen-hero > p,
	.desen-reveal-on .desen-hero > .wp-block-buttons {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Contorno di messa a fuoco solo da tastiera

   theme.json e il core dichiarano il contorno su :focus, che il browser
   assegna anche a un semplice clic: dopo aver cliccato una voce di menu
   restava un riquadro attorno. Qui il contorno sparisce quando il fuoco NON
   arriva da tastiera; :focus-visible continua a mostrarlo a chi naviga con
   il tabulatore, dove e' l'unico modo di sapere dove ci si trova.
   -------------------------------------------------------------------------- */

.wp-site-blocks a:focus:not( :focus-visible ),
.wp-site-blocks button:focus:not( :focus-visible ),
.wp-site-blocks .wp-element-button:focus:not( :focus-visible ),
.wp-site-blocks summary:focus:not( :focus-visible ) {
	outline: none;
}

/* --------------------------------------------------------------------------
   Pannelli che si aprono (Cosa facciamo)

   Tre riquadri affiancati: quello attivo si allarga e mostra il testo, gli
   altri restano strisce con il solo titolo scritto in verticale. Il
   meccanismo e' il flex-grow, animato: nessun JavaScript.

   Senza puntatore (touch) i pannelli restano impilati e aperti: un'apertura
   legata all'hover, sul telefono, resterebbe bloccata al primo tocco.
   -------------------------------------------------------------------------- */

.desen-panels {
	align-items: stretch;
}

/* A tutta larghezza solo su desktop: il core annulla il padding laterale
   sugli alignfull soltanto quando il contenitore porta .has-global-padding,
   che qui non c'e', quindi i margini negativi vanno dichiarati. Su schermi
   stretti i pannelli restano dentro i margini del sito. */
@media ( min-width: 783px ) {
	.desen-panels {
		margin-inline:
			calc( var(--wp--style--root--padding-left) * -1 )
			calc( var(--wp--style--root--padding-right) * -1 ) !important;
		max-width: none !important;
		width: auto;
	}
}

.desen-panels .desen-panel {
	min-height: 32rem;
}

@media ( hover: hover ) and ( min-width: 783px ) {
	.desen-panels {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		padding-inline: 0 !important;
	}

	/* Altezza fissa per l'intera fila: senza, aprendo un pannello il testo
	   si ricompone su meno righe, i due chiusi ne guadagnano, e l'altezza
	   complessiva della sezione cambia a ogni passaggio del mouse. */
	.desen-panels {
		height: 32rem;
	}

	.desen-panels .desen-panel {
		cursor: pointer;
		flex: 1 1 0;
		min-width: 0;
		height: 100%;
		min-height: 0 !important;
		overflow: hidden;
		transition: flex-grow 0.55s cubic-bezier( 0.22, 0.61, 0.36, 1 );
	}

	/* Il pannello scelto resta aperto: lo stato lo tiene panels.js. */
	.desen-panels .desen-panel.is-active {
		flex-grow: 4;
	}

	/* Il contenuto si appoggia in basso, allineato a sinistra. */
	.desen-panels .desen-panel .wp-block-cover__inner-container {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		height: 100%;
		text-align: left;
	}

	/* Il layout constrained centra i figli con margin-inline:auto. */
	.desen-panels .desen-panel .wp-block-cover__inner-container > * {
		margin-inline: 0 auto !important;
		max-width: 34rem;
	}

	/* Titolo in verticale finche' il pannello e' stretto, nel flusso del
	   contenuto come prima. writing-mode non e' animabile: il passaggio
	   resta netto, ma una breve dissolvenza lo rende meno brusco. */
	.desen-panels .desen-panel__titolo {
		writing-mode: vertical-rl;
		transform: rotate( 180deg );
		margin-block: auto 0;
		white-space: nowrap;
		transition: opacity 0.3s ease;
	}

	.desen-panels .desen-panel.is-active .desen-panel__titolo {
		writing-mode: horizontal-tb;
		transform: none;
	}

	/* Claim e descrizione solo nel pannello aperto. */
	.desen-panels .desen-panel__testo {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s ease 0.15s;
	}

	.desen-panels .desen-panel.is-active .desen-panel__testo {
		opacity: 1;
		visibility: visible;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.desen-panels,
	.desen-panels .desen-panel,
	.desen-panels .desen-panel__testo,
	.desen-panels .desen-panel > .wp-block-cover__image-background {
		transition: none;
	}

	.desen-panels .desen-panel:hover > .wp-block-cover__image-background {
		transform: translateX( -50% );
	}
}

/* --------------------------------------------------------------------------
   Pannelli su schermi stretti

   Non si aprono al tocco: diventano una fila che scorre, con le stesse frecce
   del carosello dei lavori. Le schede sono piu' larghe di prima, cosi' la
   fotografia si legge e il testo resta comodo.
   -------------------------------------------------------------------------- */

@media ( max-width: 782px ) {
	.desen-panels {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		gap: var(--wp--preset--spacing--30);

		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--line) transparent;
	}

	.desen-panels .desen-panel {
		flex: 0 0 auto;
		width: min( 84vw, 26rem );
		min-height: 30rem;
		scroll-snap-align: start;
	}

	/* Arrivati in fondo, l'ultima scheda si fermava a filo del bordo mentre
	   le altre lasciano intravedere la successiva. Questo spazio finale
	   ripristina la stessa cornice. E' un elemento vuoto invece di un
	   padding perche' i contenitori a scorrimento, in flex, ignorano il
	   padding finale in diversi browser. */
	.desen-panels::after {
		content: "";
		flex: 0 0 calc( 100% - min( 84vw, 26rem ) - var(--wp--preset--spacing--30) );
	}

	/* Il contenuto si appoggia in basso, come nella versione desktop. */
	.desen-panels .desen-panel .wp-block-cover__inner-container {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		height: 100%;
		text-align: left;
	}

	/* Il layout constrained centra i figli con margin-inline:auto. */
	.desen-panels .desen-panel .wp-block-cover__inner-container > * {
		margin-inline: 0 auto !important;
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	.desen-panels {
		scroll-behavior: smooth;
	}
}

/* Su schermi stretti la sezione dei pannelli mantiene lo stacco inferiore:
   nel contenuto il padding e' a zero per far combaciare le fasce su desktop. */
@media ( max-width: 782px ) {
	/* Il blocco dichiara padding-bottom:0 inline, e uno stile inline vince sul
	   foglio: qui serve !important per riportare lo stacco su mobile. */
	.wp-block-post-content > .alignfull:has( .desen-panels ) {
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}
}

/* --------------------------------------------------------------------------
   Testo dei pannelli allineato al resto della pagina

   I pannelli arrivano ai bordi dello schermo, quindi il loro padding interno
   (2rem) non coincide con il margine del sito: il testo partiva piu' a
   sinistra rispetto ai paragrafi delle altre sezioni. Qui il rientro del
   primo pannello vale quanto il margine laterale del sito, cosi' le due
   colonne di testo si allineano.
   -------------------------------------------------------------------------- */

@media ( min-width: 783px ) {
	.desen-panels .desen-panel:first-child {
		padding-left: var(--wp--style--root--padding-left) !important;
	}
}
/* Collegamento che copre l'intero pannello: creato da panels.js, resta sotto
   il testo ma sopra l'immagine, cosi' tutta la scheda porta ai servizi. */
.desen-panel__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	text-decoration: none;
}

.desen-panel__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: -6px;
}
/* --------------------------------------------------------------------------
   Voci secondarie del menu (Privacy, Cookie, social)

   Stanno nello stesso menu delle altre: il blocco navigation non prevede un
   secondo elenco nel pannello. La classe le distingue, e qui vengono nascoste
   sulla barra desktop e rimpicciolite dentro il pannello mobile.
   -------------------------------------------------------------------------- */

/* Le voci secondarie compaiono solo dentro il pannello: fuori di esso
   (per esempio nell'editor) restano nascoste. */
.wp-block-navigation__responsive-container:not( .is-menu-open ) .desen-nav-sec {
	display: none;
}

.is-menu-open .desen-nav-sec .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: color-mix( in srgb, var(--wp--preset--color--line) 78%, transparent ) !important;
}

/* Le voci secondarie sono un elenco fitto: il passo della lista (1,5rem)
   e il padding delle voci vanno annullati, lasciando pochi millimetri.
   La prima resta invece staccata dal gruppo principale. */
.is-menu-open .desen-nav-sec .wp-block-navigation-item__content {
	padding-block: 0 !important;
}

/* Tra il pannello e la lista ci sono due contenitori del core (il wrapper
   del pulsante e il dialogo) che non si estendono in altezza: senza questo,
   il margine automatico delle voci secondarie non ha spazio da assorbire e
   il gruppo resta attaccato alle voci principali. */
.is-menu-open .wp-block-navigation__responsive-close,
.is-menu-open .wp-block-navigation__responsive-dialog,
.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* La lista occupa tutta l'altezza e il primo elemento secondario assorbe
   lo spazio libero: il gruppo Privacy/Cookie/social finisce in fondo. */
.is-menu-open .wp-block-navigation__container {
	flex: 1 1 auto;
	min-height: 0;
}

/* La prima voce secondaria e' quella che segue una voce principale:
   :first-of-type guarda il tipo di elemento, non la classe, e con tutte le
   voci in <li> non corrispondeva a nulla. Il margine automatico assorbe lo
   spazio libero e spinge il gruppo al piede del pannello. */
.is-menu-open .wp-block-navigation-item:not( .desen-nav-sec ) + .desen-nav-sec {
	margin-block-start: auto !important;
	padding-top: var(--wp--preset--spacing--60);
}

.is-menu-open .desen-nav-sec + .desen-nav-sec {
	margin-block-start: -15px;
}

/* Instagram non ha ancora un profilo: il blocco rende un <a> senza href, che
   non e' un link ne' per il browser ne' per uno screen reader. Qui perde anche
   l'aspetto interattivo, cosi' nessuno prova a cliccarlo. */
.is-menu-open .desen-nav-social .wp-block-navigation-item__content:not( [href] ) {
	cursor: default;
	opacity: 0.65;
}

/* Su schermi stretti il testo dell'hero si appoggia in basso, come su
   desktop: l'immagine verticale tiene il soggetto nella meta' superiore. */
@media ( max-width: 782px ) {
	.desen-hero {
		justify-content: flex-end;
		padding-bottom: clamp( 2.5rem, 8vh, 5rem ) !important;
	}

	/* Nella parte bassa dell'immagine verticale il fondo e' scuro: qui il
	   testo scuro del desktop sparirebbe, quindi passa al bianco. */
	.desen-hero > h1,
	.desen-hero > p {
		color: var(--wp--preset--color--white) !important;
	}

	/* Misure ricavate dal riferimento: il titolo vale il 5,9% della larghezza
	   e sta su tre righe, il paragrafo il 3,4%. */
	.desen-hero > h1 {
		font-size: clamp( 1.5rem, 5.9vw, 2.25rem ) !important;
		line-height: 1.15;
		margin-block-end: 0;
	}

	.desen-hero > p {
		font-size: clamp( 0.9375rem, 3.4vw, 1.125rem ) !important;
		line-height: 1.5;
		margin-block-start: 0.85rem;
	}

	/* I due pulsanti restano affiancati invece di impilarsi. */
	.desen-hero .wp-block-buttons {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--20);
		margin-block-start: 1.5rem !important;
	}

	.desen-hero .wp-block-button__link {
		white-space: nowrap;
		padding-block: 0.65rem;
		padding-inline: 0.9rem;
		font-size: clamp( 0.8125rem, 3.1vw, 1rem );
	}
}

/* --------------------------------------------------------------------------
   Hero: proporzioni ricavate dal mockup

   Le misure sono espresse in vw perche' nel riferimento sono proporzionali
   alla finestra: il titolo vale il 3,05% della larghezza, il paragrafo
   l'1,45%, e la colonna di testo il 52%. I clamp fissano i limiti su schermi
   molto piccoli e molto grandi.
   -------------------------------------------------------------------------- */

@media ( min-width: 783px ) {
	/* Il blocco di testo si appoggia in basso invece di stare al centro:
	   nel riferimento i pulsanti chiudono intorno al 90% dell'altezza. */
	.desen-hero {
		justify-content: flex-end;
		padding-bottom: clamp( 3rem, 10vh, 7rem ) !important;
	}

	.desen-hero > p,
	.desen-hero > .wp-block-buttons {
		max-width: 52vw;
	}

	/* Due righe esatte: l'interruzione dopo "progettati" e' nel contenuto, e
	   il titolo non ha limite di larghezza, cosi' ciascuna riga non va mai a
	   capo da sola. Sotto i ~1150px di finestra il corpo scende quanto basta
	   perche' la riga piu' lunga ci stia ancora. */
	.desen-hero > h1 {
		max-width: none !important;
		font-size: min( 60px, 5.2vw ) !important;
		line-height: 1.12;
		margin-block-end: 0;
	}

	.desen-hero > p {
		font-size: clamp( 1rem, 1.45vw, 1.375rem ) !important;
		line-height: 1.55;
		margin-block-start: 1.25rem;
	}

	.desen-hero > .wp-block-buttons {
		margin-block-start: 2.5rem !important;
	}

	/* Pulsanti piu' contenuti, come nel riferimento. */
	.desen-hero .wp-block-button__link {
		padding-block: 0.6rem;
		padding-inline: 1.1rem;
		font-size: clamp( 0.875rem, 1.25vw, 1.0625rem );
	}
}

/* L'interruzione dopo "produzione." serve solo nella versione verticale:
   su desktop il paragrafo scorre su due righe piene. display:none su un <br>
   ne annulla l'effetto senza doverlo togliere dal contenuto. */
@media ( min-width: 783px ) {
	.desen-br-mobile {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Servizi aperti: testo a sinistra, fotografia a destra

   Il pannello di <details> non ha un contenitore proprio su cui costruire una
   griglia: cambiare il display dell'elemento details compromette l'apertura
   nativa in alcuni browser. La fotografia viene percio' fatta scorrere a
   destra e il testo le si dispone accanto.
   -------------------------------------------------------------------------- */

@media ( min-width: 783px ) {
	.desen-servizio > figure.wp-block-image {
		float: right;
		width: 34%;
		margin: 0 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
	}

	.desen-servizio > figure.wp-block-image img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* Il testo non deve superare la colonna di sinistra. */
	.desen-servizio > p {
		max-width: 60ch;
	}

	/* La fotografia esce dal flusso: senza questo, il filetto del servizio
	   successivo risalirebbe accanto a essa. */
	.desen-servizio::after {
		content: "";
		display: block;
		clear: both;
	}
}

/* Nel riferimento i pannelli seguono la testata quasi senza stacco: il
   blockGap della sezione (3rem) va ridotto. Il layout constrained lo
   applica come margine superiore al blocco successivo. */
/* Margini della sezione: 85px sopra, 20px tra testata e pannelli. */
.wp-block-post-content > .alignfull:has( .desen-panels ) {
	padding-top: 85px !important;
}

.wp-block-post-content > .alignfull:has( .desen-panels ) > .desen-panels {
	margin-block-start: 20px !important;
}

/* Due cause di rientro sul gruppo della testata: il padding globale, che si
   somma a quello della sezione, e il limite di larghezza del layout
   constrained, che lo centra dentro i 96rem mentre l'hero resta allineato
   a sinistra. Qui il gruppo torna a tutta larghezza e parte dal bordo. */
.wp-block-post-content > .alignfull:has( .desen-panels ) > .wp-block-group:first-child {
	padding-inline: 0 !important;
	max-width: none !important;
	margin-inline: 0 !important;
}

/* --------------------------------------------------------------------------
   Testata di "Cosa facciamo" su due colonne

   Titolo a sinistra, introduzione a destra. La sezione si riconosce da cio'
   che contiene (:has), cosi' non serve aggiungere classi al contenuto.
   -------------------------------------------------------------------------- */

@media ( min-width: 783px ) {
	.wp-block-post-content > .alignfull:has( .desen-panels ) > .wp-block-group:first-child {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--70);
		align-items: start;
	}

	/* Il titolo occupa la colonna di sinistra. La larghezza in caratteri
	   determina l'andata a capo: "Dal progetto allo" / "stampo finito". */
	.wp-block-post-content > .alignfull:has( .desen-panels ) > .wp-block-group:first-child > h2 {
		grid-column: 1;
		grid-row: 1;
		margin-block: 0;
		max-width: 18ch;

		/* Il layout constrained dichiara margin-inline:auto sui figli: con una
		   larghezza massima, quel margine centra il titolo dentro la colonna
		   invece di lasciarlo al bordo. */
		margin-inline: 0 auto !important;
	}

	/* L'introduzione occupa la colonna di destra, allineata in alto. */
	.wp-block-post-content > .alignfull:has( .desen-panels ) > .wp-block-group:first-child > p:last-child {
		grid-column: 2;
		grid-row: 1;
		margin-block: 0;
		max-width: 56ch;
		margin-inline: 0 auto !important;
	}
}

/* --------------------------------------------------------------------------
   Sezione "Dove lavoriamo": schede

   Quattro schede chiare su fondo grigio, con immagine, titolo e descrizione.
   La testata segue lo schema dell'altra sezione: titolo a sinistra,
   introduzione a destra.
   -------------------------------------------------------------------------- */

.desen-card {
	border-radius: 14px;
	overflow: hidden;
}

.desen-card .wp-block-image {
	margin-block: 0;
}

.desen-card .wp-block-image img {
	border-radius: 10px;
	display: block;
	width: 100%;
}

.desen-card h3 {
	margin-block: var(--wp--preset--spacing--20) 0;
}

@media ( hover: hover ) {
	.desen-card .wp-block-image img {
		transition: transform 0.45s ease;
	}

	.desen-card:hover .wp-block-image img {
		transform: scale( 1.04 );
	}
}

@media ( min-width: 783px ) {
	/* Testata su due colonne, allineata al bordo come le altre sezioni. */
	.desen-testata {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--70);
		align-items: start;

		padding-inline: 0 !important;
		max-width: none !important;
		margin-inline: 0 !important;
	}

	.desen-testata > h2 {
		grid-column: 1;
		margin-block: 0;
		max-width: 18ch;
		margin-inline: 0 auto !important;
	}

	.desen-testata > p {
		grid-column: 2;
		margin-block: 0;
		max-width: 56ch;
		margin-inline: 0 auto !important;
	}
}

/* --------------------------------------------------------------------------
   Fondo della sezione e vetro delle schede

   Il grigio del riferimento e' piu' carico di "line": si ottiene mescolandolo
   con "muted", senza introdurre una tinta fuori palette. Le schede sono in
   vetro: bianco semitrasparente con sfocatura di cio' che scorre sotto.
   -------------------------------------------------------------------------- */

.desen-sezione-settori {
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--line) 74%,
		var(--wp--preset--color--muted)
	) !important;
}

.desen-card {
	border: 1px solid rgba( 255, 255, 255, 0.55 );
	box-shadow: 0 8px 24px rgba( 14, 20, 32, 0.08 );
}

@supports ( backdrop-filter: blur(1px) ) or ( -webkit-backdrop-filter: blur(1px) ) {
	.desen-card {
		background-color: rgba( 255, 255, 255, 0.22 ) !important;
		-webkit-backdrop-filter: blur( 16px ) saturate( 1.4 );
		backdrop-filter: blur( 16px ) saturate( 1.4 );
	}
}

/* Chi ha ridotto la trasparenza a livello di sistema torna al fondo pieno. */
@media ( prefers-reduced-transparency: reduce ) {
	.desen-card {
		background-color: var(--wp--preset--color--surface) !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* --------------------------------------------------------------------------
   Galleria "I nostri lavori"

   Foto piu' alte che larghe, con angoli arrotondati. La fila parte allineata
   al titolo e prosegue oltre il bordo destro dello schermo, cosi' si capisce
   che continua.
   -------------------------------------------------------------------------- */

/* La fila occupa l'intera larghezza dello schermo: scorrendo, le foto
   passano fino al bordo sinistro invece di sparire contro il margine.
   Il padding sinistro le allinea al titolo in partenza, e lo stesso valore
   come scroll-padding mantiene quell'allineamento a ogni aggancio.
   Nessun padding a destra: arrivati in fondo, l'ultima foto si ferma a
   filo del bordo dello schermo. */
.desen-sezione-lavori .desen-carousel {
	margin-inline:
		calc( var(--wp--style--root--padding-left) * -1 )
		calc( var(--wp--style--root--padding-right) * -1 ) !important;
	max-width: none !important;
	gap: 1.9rem !important;
	padding-inline: var(--wp--style--root--padding-left) 0;
	scroll-padding-inline-start: var(--wp--style--root--padding-left);
}

.desen-sezione-lavori .desen-carousel .desen-slide {
	width: clamp( 15rem, 24.8vw, 22rem ) !important;
}

.desen-sezione-lavori .desen-carousel .desen-slide img {
	aspect-ratio: 9 / 10 !important;
	border-radius: 20px;
}

/* La galleria si stacca dal titolo. */
.desen-sezione-lavori > .desen-carousel-wrap {
	margin-block-start: var(--wp--preset--spacing--60) !important;
}

/* Titolo e fila allineati al bordo sinistro della pagina. */
.desen-sezione-lavori > .desen-lavori-titolo,
.desen-sezione-lavori > .desen-carousel-wrap {
	max-width: none !important;
	margin-inline: 0 !important;
}

/* La fila sporge oltre il bordo destro della sezione: senza questo la pagina
   intera guadagnerebbe uno scorrimento orizzontale. clip, a differenza di
   hidden, non crea un contenitore di scorrimento. */
.desen-sezione-lavori {
	overflow-x: clip;
}

/* L'interruzione del titolo vale solo su desktop: su mobile il titolo sta
   su tre righe con andate a capo proprie. */
@media ( max-width: 782px ) {
	.desen-br-desktop {
		display: none;
	}
}

/* Note di lavoro provvisorie: da togliere a sito completato. */
.desen-nota-lavori {
	font-style: italic;
	opacity: 0.75;
	margin-block-start: var(--wp--preset--spacing--30) !important;
}

/* ==========================================================================
   RIDISEGNO HOME (settembre 2026)

   Regole in coda al foglio: prevalgono sulle versioni precedenti degli stessi
   elementi, che restano sopra solo come storico del percorso.
   ========================================================================== */

/* --- Hero: sfondo blu, testo bianco, foto nel riquadro a destra --------- */

.desen-hero {
	position: relative;
	background-image: url( 'assets/images/sfondo-blu.jpg' ) !important;
	background-size: cover !important;
	background-position: center right !important;
}

.desen-hero > h1,
.desen-hero > p {
	color: var(--wp--preset--color--white) !important;
}

/* L'interruzione forzata del titolo non serve piu': le andate a capo del
   riferimento nascono dalla larghezza della colonna. */
.desen-br-desktop {
	display: none;
}

@media ( min-width: 783px ) {
	.desen-hero {
		justify-content: center !important;
		padding-bottom: var(--wp--preset--spacing--70) !important;
	}

	/* Titolo su tre righe: "Stampi per calzatura," / "progettati e costruiti" /
	   "internamente.", come nel riferimento. */
	.desen-hero > h1 {
		font-size: min( 60px, 4.1vw ) !important;
		max-width: 46vw !important;
	}

	.desen-hero > p,
	.desen-hero > .wp-block-buttons {
		max-width: 38vw !important;
	}

	/* La foto esce dal flusso: il testo resta a sinistra con la sua larghezza,
	   il riquadro si posiziona a destra centrato in verticale. */
	.desen-hero > .desen-hero-foto {
		position: absolute;
		top: 50%;
		right: 9.5vw;
		width: 28vw;
		max-width: 28rem;
		margin: 0 !important;
		transform: translateY( -45% );
	}

	.desen-hero > .desen-hero-foto img {
		display: block;
		width: 100%;
		aspect-ratio: 5 / 7;
		object-fit: cover;
		border-radius: 14px;
	}
}

@media ( max-width: 782px ) {
	/* Su telefono resta il solo testo: la foto accanto non avrebbe spazio. */
	.desen-hero > .desen-hero-foto {
		display: none;
	}

	.desen-hero {
		background-position: 70% center !important;
	}
}

/* --- Barra: vetro scuro con logo e icona chiari ------------------------- */

.wp-site-blocks > header > .wp-block-group.has-line-background-color {
	background-color: rgba( 14, 20, 32, 0.38 ) !important;
	border-color: rgba( 255, 255, 255, 0.18 ) !important;
}

.wp-site-blocks > header .wp-block-site-logo img {
	filter: brightness( 0 ) invert( 1 );
}

.wp-site-blocks > header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--white);
}

/* --- Dove lavoriamo: fondo bianco, schede grigio chiaro pieno ----------- */

.desen-sezione-settori {
	background-color: var(--wp--preset--color--white) !important;
}

.desen-card {
	background-color: color-mix( in srgb, var(--wp--preset--color--line) 55%, var(--wp--preset--color--white) ) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* --- Riquadro di contatto ----------------------------------------------- */

.desen-sezione-cta {
	background-color: var(--wp--preset--color--white);
	padding-block: var(--wp--preset--spacing--40) !important;
}

.desen-cta-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp( 18rem, 30vw, 28rem );
	padding: clamp( 2rem, 4.5vw, 4.5rem ) clamp( 1.5rem, 3vw, 3rem ) !important;
	max-width: none !important;
	margin-inline: 0 !important;

	border-radius: 14px;
	background-color: var(--wp--preset--color--ink);
	background-image: url( 'assets/images/sfondo-blu.jpg' );
	background-size: cover;
	background-position: center right;
}

.desen-cta-card > * {
	margin-inline: 0 auto !important;
	max-width: none;
}

.desen-cta-card > h2 {
	margin-block: 0;
}

.desen-cta-card > p {
	max-width: 30rem;
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	line-height: 1.3;
}

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

.wp-site-blocks > footer .wp-block-column:first-child p {
	font-size: var(--wp--preset--font-size--lg) !important;
	color: var(--wp--preset--color--white) !important;
	max-width: 32rem;
	line-height: 1.45;
}

/* --- Barra che si nasconde scorrendo verso il basso --------------------- */

.wp-site-blocks > header {
	transition: transform 0.35s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

/* Sale oltre il bordo superiore: altezza della barra piu' la sua distanza
   dall'alto, cosi' sparisce del tutto, ombra compresa. */
.desen-header-nascosto .wp-site-blocks > header {
	transform: translateY( calc( -100% - var(--desen-header-top) - 12px ) );
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-site-blocks > header {
		transition: none;
	}
}

/* --- Comparsa allo scroll (home) ---------------------------------------- */

.desen-reveal-on .desen-scroll {
	opacity: 0;
	transform: translateY( 2rem );
	transition:
		opacity 0.9s cubic-bezier( 0.22, 0.61, 0.36, 1 ),
		transform 0.9s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.desen-reveal-on .desen-scroll.is-revealed {
	opacity: 1;
	transform: none;
}

/* I pannelli si aprono con flex-grow: la transizione di comparsa non deve
   sostituire quella di apertura, quindi le due vengono sommate. */
.desen-reveal-on .desen-panels > .desen-panel.desen-scroll {
	transition:
		opacity 0.9s cubic-bezier( 0.22, 0.61, 0.36, 1 ),
		transform 0.9s cubic-bezier( 0.22, 0.61, 0.36, 1 ),
		flex-grow 0.55s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

@media ( prefers-reduced-motion: reduce ) {
	.desen-reveal-on .desen-scroll {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Riquadri di contatto nelle pagine interne: stessa resa di quello in home.
   Il titolo segue la dimensione h2 del tema, come in home. */
.desen-cta-card .wp-block-button__link {
	white-space: nowrap;
}

/* Titoli e testi dei riquadri di contatto sempre bianchi, qualunque colore
   abbia il blocco nel contenuto. */
.desen-cta-card h2,
.desen-cta-card p {
	color: var(--wp--preset--color--white) !important;
}

/* --- Angoli arrotondati tra l'hero e la sezione successiva -------------- */

/* La sezione sale sopra il fondo dell'hero: dietro gli angoli arrotondati
   si vede lo sfondo blu invece del bianco della pagina. */
.wp-block-post-content > .alignfull:has( .desen-panels ) {
	position: relative;
	z-index: 1;
	margin-top: -40px !important;
	border-radius: 40px 40px 0 0;
	background-color: var(--wp--preset--color--white);
	overflow: hidden;
}

@media ( max-width: 782px ) {
	.wp-block-post-content > .alignfull:has( .desen-panels ) {
		margin-top: -24px !important;
		border-radius: 24px 24px 0 0;
	}
}

/* --- Schede dei settori interamente cliccabili -------------------------- */

/* Il link dell'immagine si estende su tutta la scheda: un solo collegamento
   (niente doppioni per chi usa tastiera o screen reader), ma l'area
   cliccabile comprende anche titolo e descrizione. */
.desen-card {
	position: relative;
	cursor: pointer;
}

.desen-card .wp-block-image a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.desen-card .wp-block-image a:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
	border-radius: 14px;
}

/* L'hero e' alto quanto lo schermo, ma la sezione successiva risale di 40px:
   il bordo curvo entrava nella prima schermata. L'hero guadagna la stessa
   misura, cosi' la curva parte appena sotto il bordo inferiore e si vede solo
   iniziando a scorrere. */
.desen-hero {
	min-height: calc( 100vh + 40px ) !important;
	min-height: calc( 100svh + 40px ) !important;
}

@media ( max-width: 782px ) {
	.desen-hero {
		min-height: calc( 100vh + 24px ) !important;
		min-height: calc( 100svh + 24px ) !important;
	}
}