/*
Theme Name: CSD
Theme URI: https://www.centrospedizionieri.com
Author: CSD Service
Author URI: https://www.centrospedizionieri.com
Description: Tema a blocchi custom per CSD Service, spedizionieri doganali.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 8.1
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: csd
*/

/*
 * Il template-part header è avvolto da WordPress in un <header> generico
 * alto quanto il suo unico figlio: senza spazio extra, il figlio sticky
 * non ha "margine di manovra" per restare fissato durante lo scroll.
 * display:contents rimuove il wrapper dal box model così il contenitore
 * di riferimento per lo sticky torna a essere l'intera pagina.
 */
header.wp-block-template-part:has(> .site-header) {
	display: contents;
}

.site-header.is-position-sticky {
	z-index: 100;
}

.site-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--bianco);
	text-decoration: none;
}

.site-header__phone-icon {
	display: none;
}

@media (max-width: 599px) {
	.site-header__phone-text {
		display: none;
	}

	.site-header__phone-icon {
		display: inline-flex;
	}

	/* Area di tocco 44×44 px: il padding la allarga, il margine negativo di
	   pari misura lascia invariato l'ingombro. Due classi per battere
	   ".is-layout-flex > :is(*, div) { margin: 0 }" di core. */
	.site-header__actions > .site-header__phone {
		justify-content: center;
		padding: 12px;
		margin: -12px;
	}

	/* Pulsante del menu: da 24×24 a 44×44 px con lo stesso metodo. */
	.site-header .wp-block-navigation__responsive-container-open {
		padding: 10px;
		margin: -10px;
	}

	.site-header__logo {
		order: 1;
	}

	.site-header__actions {
		order: 2;
	}

	.site-header__nav {
		order: 3;
	}
}

/* "Portale clienti" resta visibile anche su telefono, sempre su una riga.
   Sotto i 400 px il padding orizzontale scende da 20 a 12 px; sotto i
   360 px non basta, e si stringono anche gli spazi fra logo, azioni e
   menu e fra icona del telefono e pulsante (da 24 a 12 px): a 320 px la
   riga misura 272 px e il pulsante ne richiede 118. */
.site-header__cta .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 399px) {
	.site-header__cta .wp-block-button__link {
		padding-left: 12px;
		padding-right: 12px;
	}
}

@media (max-width: 359px) {
	.site-header > .wp-block-group,
	.site-header__actions {
		gap: 12px;
	}
}

/* Comparsa allo scorrimento: csd.js aggiunge .is-visible quando è
   visibile almeno il 15% dell'elemento (threshold 0.15). Da usare sulle
   singole sezioni, non su contenitori di pagina intera: un elemento alto
   più di circa sei altezze e mezza dello schermo non raggiunge mai la
   soglia e resta invisibile. Per questo il post-content di
   single-servizio.html non ha js-reveal. */
.js-reveal.is-ready {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js-reveal.is-ready.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}

.services-grid {
	border-top: 1px solid var(--wp--preset--color--bordo);
	border-left: 1px solid var(--wp--preset--color--bordo);
}

.services-grid .service-card {
	position: relative;
	background-color: var(--wp--preset--color--bianco);
	border-right: 1px solid var(--wp--preset--color--bordo);
	border-bottom: 1px solid var(--wp--preset--color--bordo);
	padding: var(--wp--preset--spacing--30);
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover,
.service-card:focus-within {
	background-color: var(--wp--preset--color--nebbia);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--blu-csd);
}

.service-card__icon {
	display: block;
	width: 32px;
	height: 32px;
	margin-bottom: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--grigio);
	transition: color 0.2s ease;
}

.service-card:hover .service-card__icon,
.service-card:focus-within .service-card__icon {
	color: var(--wp--preset--color--blu-csd);
}

.service-card__link {
	color: var(--wp--preset--color--inchiostro);
	text-decoration: none;
}

.service-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.service-card__link:focus-visible {
	outline: none;
}

.service-card__link:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--blu-csd);
	outline-offset: -2px;
}

.service-card__text {
	margin: var(--wp--preset--spacing--10) 0 0;
}

.service-card__arrow {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--grigio);
	font-weight: 600;
	transition: transform 0.2s ease, color 0.2s ease;
}

.service-card:hover .service-card__arrow,
.service-card:focus-within .service-card__arrow {
	color: var(--wp--preset--color--blu-csd);
	transform: translateX(4px);
}

.service-card--all {
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-card--all a {
	text-decoration: none;
}

.aree-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--20);
}

.area-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 2px;
	text-decoration: none;
}

.area-card__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.area-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.area-card__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--navy);
	opacity: 0.68;
	transition: opacity 0.3s ease;
}

.area-card:hover .area-card__overlay,
.area-card:focus-visible .area-card__overlay {
	opacity: 0.38;
}

.area-card__content {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30);
	text-shadow: 0 1px 3px rgba(17, 26, 74, 0.45);
}

.area-card__number {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--celeste);
}

.area-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--bianco);
}

.area-card__desc {
	margin: 0;
	font-family: var(--wp--preset--font-family--source-serif);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--bianco);
}

.area-card__count {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--bianco);
}

.area-card__arrow {
	display: inline-block;
	margin-left: 0.2em;
	transition: transform 0.2s ease;
}

.area-card:hover .area-card__arrow,
.area-card:focus-visible .area-card__arrow {
	transform: translateX(4px);
}

.area-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--celeste);
	outline-offset: -2px;
}

@media (max-width: 781px) {
	.aree-grid {
		grid-template-columns: 1fr;
	}

	.area-card {
		aspect-ratio: 3 / 2;
	}

	.area-card__overlay,
	.area-card:hover .area-card__overlay,
	.area-card:focus-visible .area-card__overlay {
		opacity: 0.65;
	}
}

@media (prefers-reduced-motion: reduce) {
	.area-card__overlay,
	.area-card__arrow {
		transition: none;
	}
}

.area-band {
	--band-vignette: 0.55;
	position: relative;
	display: flex;
	align-items: center;
	min-height: 240px;
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
	overflow: hidden;
	scroll-margin-top: var(--csd-header-height, 64px);
}

.area-band__media {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.area-band__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.area-band__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--wp--preset--color--navy);
}

/* Vignettatura al centro per garantire contrasto al testo indipendentemente
   dall'opacità piatta calibrata per foto: --band-vignette agisce solo sul
   centro (dove sta il testo), l'opacità piatta smorza l'intera foto. */
.area-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(ellipse 70% 85% at 50% 50%, rgba(17, 26, 74, var(--band-vignette)), rgba(17, 26, 74, 0) 75%);
}

/* Le quattro foto hanno luminosità molto diverse. L'opacità piatta smorza
   l'intera foto ed è calibrata solo per far sembrare le fasce la stessa
   famiglia; il contrasto del testo lo garantisce --band-vignette, che scurisce
   solo il centro della fascia dove il testo è posizionato. */
.area-band--dogana {
	--band-vignette: 0.5;
}

.area-band--dogana .area-band__overlay {
	/* 0.50: caso peggiore della descrizione ≥ 4,5:1 a ogni larghezza
	   (a 0.48 scendeva a 4,42 a 430 px) */
	opacity: 0.5;
}

.area-band--consulenza {
	--band-vignette: 0.5;
}

.area-band--consulenza .area-band__overlay {
	opacity: 0.55;
}

.area-band--iva {
	--band-vignette: 0.5;
}

.area-band--iva .area-band__overlay {
	opacity: 0.34;
}

.area-band--strumenti {
	--band-vignette: 0.5;
}

.area-band--strumenti .area-band__overlay {
	/* la foto è attraversata da linee chiare: sotto 0.55 il testo vi scende
	   sotto 4,5:1 */
	opacity: 0.55;
}

.area-band__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 62ch;
	margin-inline: auto;
	text-align: center;
	text-shadow: 0 1px 3px rgba(17, 26, 74, 0.45);
}

.area-band__content .eyebrow {
	margin: 0;
	font-size: 0.875rem;
	letter-spacing: 0.14em;
}

.area-band__content h2 {
	margin: 0;
	font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem);
	line-height: 1.15;
}

.area-band__content p.area-band__desc {
	margin: 0;
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem);
	line-height: 1.5;
}

@media (max-width: 781px) {
	.area-band {
		min-height: 170px;
	}
}

.servizio-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
}

.servizio-breadcrumb a {
	color: var(--wp--preset--color--celeste);
	text-decoration: none;
}

.servizio-breadcrumb a:hover,
.servizio-breadcrumb a:focus-visible {
	text-decoration: underline;
}

.servizio-breadcrumb__sep {
	color: var(--wp--preset--color--celeste);
	opacity: 0.6;
}

.servizio-breadcrumb__current {
	color: var(--wp--preset--color--bianco);
}

.servizio-content {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

.servizio-content h2,
.servizio-content h3,
.servizio-content h4 {
	margin-top: var(--wp--preset--spacing--20);
}

.servizio-content ul,
.servizio-content ol {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding-left: var(--wp--preset--spacing--30);
}

.servizio-content li {
	line-height: 1.5;
}

.servizio-content .wp-block-table {
	overflow-x: auto;
}

/* Screenshot più larghi della colonna di testo: scorrono in orizzontale
   invece di rimpicciolire, per restare leggibili (stesso principio delle
   tabelle larghe qui sopra). */
.servizio-content .wp-block-image {
	overflow-x: auto;
}

.servizio-content .wp-block-image img {
	max-width: none;
	height: auto;
}

.servizio-content table {
	width: 100%;
	border-collapse: collapse;
}

.servizio-content table th,
.servizio-content table td {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--bordo);
	text-align: left;
}

.servizio-content table th {
	background-color: var(--wp--preset--color--nebbia);
	font-weight: 600;
}

/* Screenshot nel corpo del servizio: blocco immagine core con didascalia
   opzionale (import-contenuti.php, sintassi ![alt](src "didascalia")).
   Stacco verticale come .entry-content; didascalia allineata a sinistra
   invece che centrata (default core), a filo col testo della colonna. */
.servizio-content figure.wp-block-image {
	margin: var(--wp--preset--spacing--40) 0;
}

.servizio-content figure.wp-block-embed {
	margin: 0;
}

.servizio-content figure.wp-block-image figcaption {
	text-align: left;
}

.altri-servizi-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-top: 1px solid var(--wp--preset--color--bordo);
	border-left: 1px solid var(--wp--preset--color--bordo);
}

.altri-servizi-grid__card {
	display: block;
	color: var(--wp--preset--color--inchiostro);
	text-decoration: none;
}

.altri-servizi-grid__card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

@media (max-width: 599px) {
	.altri-servizi-grid {
		grid-template-columns: 1fr;
	}

	.altri-servizi-grid__card:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

.reading-progress {
	position: sticky;
	top: var(--csd-header-height, 64px);
	z-index: 90;
	height: 3px;
}

.reading-progress__bar {
	height: 100%;
	width: 0%;
	background-color: var(--wp--preset--color--blu-csd);
	transition: width 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
	.reading-progress__bar {
		transition: none;
	}
}

.article-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--celeste);
	font-size: var(--wp--preset--font-size--small);
}

.article-meta__sep {
	opacity: 0.6;
}

.article-meta__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--celeste);
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--x-small);
}

.article-layout {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
	max-width: 1000px;
	margin-inline: auto;
}

/* Meno di due H2: js-article-toc resta [hidden] e non riserva più spazio,
   il contenuto va ricentrato invece di restare ancorato a sinistra. */
.article-layout:has(.article-toc[hidden]) {
	justify-content: center;
}

/* Il sommario è il primo elemento sotto l'intestazione colorata della
   pagina: stesso stacco (spacing 40) delle altre sezioni su fondo chiaro
   che seguono un'intestazione. Il testo accanto ha già il padding di
   .entry-content. */
.article-layout .article-toc {
	flex: 0 0 220px;
	margin-top: var(--wp--preset--spacing--40);
}

.article-layout .entry-content {
	flex: 1 1 480px;
	min-width: 0;
	max-width: 720px;
}

@media (max-width: 1023px) {
	.article-layout {
		flex-direction: column;
	}

	.article-layout .article-toc,
	.article-layout .entry-content {
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
	}
}

.article-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.article-toc__list a {
	display: block;
	padding: 0.4rem 0 0.4rem var(--wp--preset--spacing--20);
	border-left: 2px solid var(--wp--preset--color--bordo);
	color: var(--wp--preset--color--grigio);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	line-height: 1.4;
}

.article-toc__list a:hover,
.article-toc__list a:focus-visible {
	color: var(--wp--preset--color--blu-csd);
}

.article-toc__list a.is-active {
	border-left-color: var(--wp--preset--color--blu-csd);
	color: var(--wp--preset--color--blu-csd);
	font-weight: 600;
}

.article-toc__toggle {
	display: none;
}

@media (min-width: 1024px) {
	.article-toc {
		position: sticky;
		top: calc(var(--csd-header-height, 64px) + 3px + var(--wp--preset--spacing--30));
		max-height: calc(100vh - var(--csd-header-height, 64px) - 3px - var(--wp--preset--spacing--50));
		overflow-y: auto;
	}
}

@media (max-width: 1023px) {
	.article-toc {
		width: 100%;
		border: 1px solid var(--wp--preset--color--bordo);
		border-radius: 6px;
	}

	.article-toc__toggle {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--10);
		padding: var(--wp--preset--spacing--20);
		background: none;
		border: none;
		font-family: var(--wp--preset--font-family--archivo);
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 600;
		color: var(--wp--preset--color--inchiostro);
		cursor: pointer;
	}

	.article-toc__toggle svg {
		flex-shrink: 0;
		transition: transform 0.2s ease;
	}

	.article-toc__toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.article-toc__list {
		display: none;
		padding: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
	}

	.article-toc.is-open .article-toc__list {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.article-toc__toggle svg {
		transition: none;
	}
}

.entry-content {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--source-serif);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}

.entry-content > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

.entry-content > p:first-of-type {
	font-size: var(--wp--preset--font-size--large);
}

.entry-content h2,
.entry-content h3 {
	font-family: var(--wp--preset--font-family--archivo);
	scroll-margin-top: calc(var(--csd-header-height, 64px) + 3px + var(--wp--preset--spacing--20));
}

.entry-content h2 {
	margin-top: var(--wp--preset--spacing--50);
}

.entry-content h3 {
	margin-top: var(--wp--preset--spacing--40);
}

.entry-content h2:first-child,
.entry-content h3:first-child {
	margin-top: 0;
}

.entry-content ul,
.entry-content ol {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding-left: var(--wp--preset--spacing--30);
}

.entry-content li {
	line-height: 1.6;
}

.entry-content .wp-block-table {
	overflow-x: auto;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--small);
}

.entry-content table th,
.entry-content table td {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--bordo);
	text-align: left;
}

.entry-content table th {
	background-color: var(--wp--preset--color--nebbia);
	font-weight: 600;
}

.entry-content figure.wp-block-image,
.entry-content figure.wp-block-embed {
	margin: var(--wp--preset--spacing--40) 0;
}

.riferimento-normativo p {
	margin: 0;
}

.riferimento-normativo p + p {
	margin-top: var(--wp--preset--spacing--10);
}

.related-articles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
}

.related-articles__card {
	display: flex;
	flex-direction: column;
	color: var(--wp--preset--color--inchiostro);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.related-articles__card:hover,
.related-articles__card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(17, 26, 74, 0.1);
}

.related-articles__thumb {
	display: block;
	aspect-ratio: 3 / 2;
	margin-bottom: var(--wp--preset--spacing--20);
	overflow: hidden;
	border-radius: 6px;
}

.related-articles__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.related-articles__eyebrow {
	display: inline-block;
	align-self: flex-start;
	background-color: var(--wp--preset--color--nebbia);
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--x-small);
}

.related-articles__title {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--medium);
}

.related-articles__card--cta {
	justify-content: center;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--blu-csd);
	color: var(--wp--preset--color--bianco);
}

.related-articles__cta-title {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.related-articles__cta-arrow {
	font-weight: 600;
	transition: transform 0.2s ease;
}

.related-articles__card--cta:hover .related-articles__cta-arrow,
.related-articles__card--cta:focus-visible .related-articles__cta-arrow {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.related-articles__card,
	.related-articles__cta-arrow {
		transition: none;
	}
}

@media (max-width: 781px) {
	.related-articles {
		grid-template-columns: 1fr;
	}
}

.site-footer a {
	color: var(--wp--preset--color--celeste);
}

.site-footer a:hover {
	color: var(--wp--preset--color--bianco);
}

.site-footer .wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

/* Due colonne da 600 px, quattro da 1100: sotto, la colonna dei contatti
   (190 px per l'indirizzo email a 14 px) non ci sta accanto alle altre tre
   e la pagina scorrerebbe in orizzontale. */
@media (min-width: 600px) {
	.site-footer .wp-block-columns {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

@media (min-width: 1100px) {
	.site-footer .wp-block-columns {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.3fr) minmax(0, 0.9fr) minmax(0, 1.3fr);
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	}
}

.site-footer p,
.site-footer .wp-block-list {
	font-size: 0.875rem;
	line-height: 1.5;
	/* .wp-block-column di core impone word-break: break-word e overflow-wrap:
	   break-word, che spezzano gli indirizzi email a metà parola
	   (…centrospedizionieri.co / m). Qui si riportano a normal: l'indirizzo
	   resta una stringa intera e non viene mai troncato. */
	word-break: normal;
	overflow-wrap: normal;
}

.site-footer .wp-block-list {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.site-footer .wp-block-list li {
	margin: 0;
	padding-bottom: 0.25rem;
}

/* Bersagli di almeno 24 px: la riga (21 px) più 4 px sopra e sotto. */
.site-footer a {
	display: inline-block;
	padding-block: 0.25rem;
}

/* Il titolo "Contatti" è un link: il margine negativo compensa il padding
   del bersaglio, così il titolo resta sulla riga di "Servizi" e "Azienda". */
.site-footer h2 a {
	margin-block: -0.25rem;
	color: inherit;
}

.site-footer .wp-block-column > * {
	margin-block-start: var(--wp--preset--spacing--10);
}

.site-footer .wp-block-column > :first-child {
	margin-block-start: 0;
}

/* Colonna Servizi: le undici schede su due colonne quando ciascuna può
   essere larga almeno 9,5rem (152 px), altrimenti su una. Con una soglia
   sulla finestra invece che sulla colonna, fra 600 e 780 px circa (due
   colonne del piè di pagina) le sottocolonne scenderebbero a 108 px e
   quasi ogni voce andrebbe su due righe. */
.site-footer__servizi {
	columns: 9.5rem 2;
	column-gap: var(--wp--preset--spacing--40);
}

.site-footer__servizi li {
	break-inside: avoid;
}

.hero-home {
	position: relative;
	display: flex;
	align-items: center;
	/* min-height segue il rapporto 4:5 della foto mobile (125vw) fra un
	   pavimento tarato sul contenuto reale (eyebrow+h1+testo+bottoni
	   impilati stanno in 670px da 360 a 599px; 670px lascia un margine
	   minimo senza sprecare schermo) e un tetto
	   che evita un hero abnorme sui telefoni più larghi (980px). A
	   larghezze molto strette (es. 320px) il testo va comunque a capo di
	   più righe e serve più spazio del pavimento: il contenuto vince
	   sempre sul min-height (non viene mai tagliato), qui semplicemente
	   non è lui a dettare l'altezza. Non si usa aspect-ratio: su un
	   blocco alignfull a margini negativi, combinato con min-height,
	   ricalcola la larghezza dall'altezza vincolata invece di lasciarla
	   piena, causando overflow orizzontale. */
	min-height: clamp(670px, 125vw, 980px);
	overflow: hidden;
}

@media (min-width: 782px) {
	.hero-home {
		/* rapporto 2:1 della foto desktop (50vw), stesso ragionamento */
		min-height: clamp(480px, 50vw, 800px);
	}
}

.hero-home__media {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.hero-home__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero-home__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--wp--preset--color--navy);
	opacity: 0.7;
}

.hero-home__content {
	position: relative;
	z-index: 2;
	/* Il testo parte dalla verticale del logo (griglia a 1180 px).
	   padding-inline: 0 toglie il padding del gruppo interno, che si sommava
	   a quello della fascia (48 px invece di 24 su telefono). */
	flex: 1 1 auto;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 0;
	/* .hero-home__content è un flex item di .hero-home: senza questo,
	   min-width:auto di default lo forza a non restringersi sotto il
	   min-content dei suoi discendenti: un contenuto più largo della
	   finestra (per esempio due bottoni affiancati) la sfonderebbe e
	   .hero-home (overflow:hidden) lo taglierebbe in silenzio invece di
	   mandarlo a capo. */
	min-width: 0;
}

/* Sotto i 600 px i due pulsanti sono impilati a tutta larghezza, a 16 px.
   Fra 600 e 781 px restano affiancati alla dimensione normale. */
@media (max-width: 599px) {
	.hero-home .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--10);
	}

	.hero-home .wp-block-button {
		width: 100%;
	}

	.hero-home .wp-block-button__link {
		display: block;
		font-size: var(--wp--preset--font-size--medium);
		text-align: center;
	}
}

.stats-band__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* nella griglia a 1180 px, come intestazione e contenuto */
	max-width: 1180px;
	margin-inline: auto;
	gap: var(--wp--preset--spacing--30);
	text-align: center;
}

.stats-band__item {
	padding: 0 var(--wp--preset--spacing--20);
}

.stats-band__number {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 600;
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	line-height: 1.1;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.015em;
}

.stats-band__number::before {
	content: "+";
}

.stats-band__label {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--grigio);
}

@media (max-width: 599px) {
	.stats-band__grid {
		grid-template-columns: 1fr;
		row-gap: var(--wp--preset--spacing--40);
	}
}

.azienda-split__col-media {
	padding: 0;
}

.azienda-split__media-wrap {
	position: relative;
	width: 100%;
	height: 100%;
}

.azienda-split__media {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.azienda-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.azienda-split__media-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(17, 26, 74, 0.8) 0%, rgba(17, 26, 74, 0) 50%);
	pointer-events: none;
}

@media (max-width: 781px) {
	.azienda-split__col-media {
		min-height: 320px;
	}
}

@media (min-width: 782px) {
	.azienda-split__col-media {
		min-height: 520px;
	}
}

.azienda-split__col-text {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.azienda-split__col-text > * {
	max-width: 34rem;
}

.azienda-split__badge-row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--30);
}

.azienda-split__checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	flex: 1;
}

.azienda-split__checklist li {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
}

.azienda-split__checklist svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--wp--preset--color--celeste);
}

.azienda-split__badge {
	width: 130px;
	height: auto;
	flex-shrink: 0;
}

@media (max-width: 480px) {
	/* logo AEO sotto l'elenco invece che accanto: le voci restano su una
	   riga sola da 360 px in su */
	.azienda-split__badge-row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--30);
	}

	.azienda-split__badge {
		width: 96px;
	}
}

.azienda-split__cta {
	margin-top: var(--wp--preset--spacing--30);
}

.azienda-split__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--wp--preset--color--bianco);
	color: var(--wp--preset--color--bianco);
	padding: 0.7rem 1.25rem;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.azienda-split__button::after {
	content: "→";
}

.azienda-split__button:hover,
.azienda-split__button:focus-visible {
	background-color: var(--wp--preset--color--bianco);
	color: var(--wp--preset--color--navy);
}

.azienda-split__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--bianco);
	outline-offset: 2px;
}

.approfondimenti-query .wp-block-post-template {
	display: grid;
	grid-template-columns: 3fr 2fr;
	grid-template-rows: repeat(2, auto);
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--40);
	list-style: none;
	margin: 0;
	padding: 0;
}

.approfondimenti-query .wp-block-post-template > .wp-block-post {
	margin: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.approfondimenti-query .wp-block-post-template > .wp-block-post:first-child {
	grid-column: 1;
	grid-row: 1 / 3;
}

.approfondimenti-query .wp-block-post-template > .wp-block-post:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
}

.approfondimenti-query .wp-block-post-template > .wp-block-post:nth-child(3) {
	grid-column: 2;
	grid-row: 2;
}

.approfondimenti__thumb {
	display: block;
	aspect-ratio: 3 / 2;
	margin: 0 0 var(--wp--preset--spacing--20);
	overflow: hidden;
}

.approfondimenti__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.approfondimenti-query .wp-block-post-template > .wp-block-post:first-child .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
}

.approfondimenti__excerpt {
	margin-top: var(--wp--preset--spacing--10);
}

.approfondimenti-query .wp-block-post-template > .wp-block-post:not(:first-child) .approfondimenti__thumb,
.approfondimenti-query .wp-block-post-template > .wp-block-post:not(:first-child) .approfondimenti__excerpt {
	display: none;
}

.approfondimenti-query .wp-block-post-template > .wp-block-post:not(:first-child) .eyebrow {
	display: inline-block;
	background-color: var(--wp--preset--color--nebbia);
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
}

.approfondimenti-query .wp-block-post-template > .wp-block-post:not(:first-child):hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(17, 26, 74, 0.1);
}

@media (max-width: 781px) {
	.approfondimenti-query .wp-block-post-template {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.approfondimenti-query .wp-block-post-template > .wp-block-post:first-child,
	.approfondimenti-query .wp-block-post-template > .wp-block-post:nth-child(2),
	.approfondimenti-query .wp-block-post-template > .wp-block-post:nth-child(3) {
		grid-column: 1;
		grid-row: auto;
	}

	.approfondimenti-query .wp-block-post-template > .wp-block-post:not(:first-child) .approfondimenti__thumb {
		display: none;
	}
}

.contatti-split__form {
	flex-basis: 58%;
}

.contatti-split__info {
	flex-basis: 42%;
}

.contatti-split__box p {
	margin: 0;
}

.contatti-split__box p + p {
	margin-top: var(--wp--preset--spacing--10);
}

.contatti-split__box .eyebrow {
	margin-bottom: var(--wp--preset--spacing--10);
}

.contatti-split__box h3 {
	margin-top: 0;
}

.contatti-split__mappa-box {
	margin-top: var(--wp--preset--spacing--20);
}

.contatti-mappa {
	height: 380px;
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--wp--preset--color--nebbia);
}

/* Prima del clic il riquadro contiene solo pulsante e nota: basta meno
   altezza. Al clic lo script toglie il segnaposto e il riquadro torna ai
   380 px della regola base, prima che Leaflet ne legga le dimensioni.
   Senza supporto per :has() il riquadro resta a 380 px. */
.contatti-mappa:has(.contatti-mappa__placeholder) {
	height: 240px;
}

.contatti-mappa__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	height: 100%;
	padding: var(--wp--preset--spacing--30);
	text-align: center;
}

.contatti-mappa__icona {
	color: var(--wp--preset--color--azzurro);
}

.contatti-mappa__bottone {
	display: inline-flex;
	align-items: center;
	border: none;
	background-color: var(--wp--preset--color--blu-csd);
	color: var(--wp--preset--color--bianco);
	padding: 0.6rem 1.25rem;
	border-radius: 6px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.contatti-mappa__bottone:hover,
.contatti-mappa__bottone:focus-visible {
	background-color: var(--wp--preset--color--navy);
}

.contatti-mappa__bottone:focus-visible {
	outline: 2px solid var(--wp--preset--color--blu-csd);
	outline-offset: 2px;
}

.contatti-mappa__bottone:disabled {
	opacity: 0.6;
	cursor: default;
}

.contatti-mappa__nota {
	margin: 0;
	max-width: 32ch;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--grigio);
}

.contatti-split__mappa {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wp--preset--color--blu-csd);
	font-weight: 500;
	text-decoration: none;
}

.contatti-split__mappa:hover,
.contatti-split__mappa:focus-visible {
	text-decoration: underline;
}

.contact-form__esito {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: 6px;
	margin-bottom: var(--wp--preset--spacing--30);
}

.contact-form__esito p,
.contact-form__esito ul {
	margin: 0;
}

.contact-form__esito ul {
	padding-left: 1.2em;
}

.contact-form__esito--successo {
	background-color: var(--wp--preset--color--nebbia);
	color: var(--wp--preset--color--blu-csd);
	border-left: 3px solid var(--wp--preset--color--blu-csd);
}

.contact-form__esito--errore {
	background-color: var(--wp--preset--color--nebbia);
	color: var(--wp--preset--color--inchiostro);
	border-left: 3px solid var(--wp--preset--color--inchiostro);
}

.contact-form__legenda {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--grigio);
}

/* Campo segnalato dal server: bordo e ombra di 1 px nel colore del bordo
   del riepilogo errori. L'ombra raddoppia lo spessore senza cambiare le
   dimensioni del campo. Il JS toglie aria-invalid quando si corregge. */
.contact-form__field [aria-invalid="true"] {
	border-color: var(--wp--preset--color--inchiostro);
	box-shadow: 0 0 0 1px var(--wp--preset--color--inchiostro);
}

.contact-form__trappola {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--20);
}

.contact-form__field {
	margin-bottom: var(--wp--preset--spacing--20);
}

.contact-form__field label,
.contact-form__consenso label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: 6px;
	background-color: var(--wp--preset--color--bianco);
	color: var(--wp--preset--color--inchiostro);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
}

.contact-form__field input:focus-visible,
.contact-form__field select:focus-visible,
.contact-form__field textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--azzurro);
	outline-offset: 1px;
}

.contact-form__field textarea {
	resize: vertical;
}

.contact-form__consenso {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: var(--wp--preset--spacing--20);
}

.contact-form__consenso input[type="checkbox"] {
	margin-top: 0.3rem;
	flex-shrink: 0;
}

.contact-form__consenso label {
	margin-bottom: 0;
	font-weight: 400;
}

@media (max-width: 599px) {
	.contact-form__row {
		grid-template-columns: 1fr;
	}
}

.chi-siamo__media {
	margin: 0;
}

.chi-siamo__card {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.chi-siamo__card > * {
	max-width: 34rem;
}

@media (max-width: 781px) {
	.chi-siamo__row {
		display: block;
		position: static;
		min-height: auto;
	}

	.chi-siamo__media {
		position: static;
		width: 100%;
	}

	.chi-siamo__media img {
		width: 100%;
		height: auto;
		display: block;
	}

	.chi-siamo__card {
		position: static;
		width: 100%;
		max-width: none;
		margin-left: 0;
		background-color: transparent;
		box-shadow: none;
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}
}

@media (min-width: 782px) {
	/* Un unico blocco a due colonne a filo dell'intestazione: a sinistra il
	   riquadro testo, a destra la foto, che parte esattamente dal bordo
	   destro del riquadro (nessuna sovrapposizione) e arriva al bordo
	   destro della finestra. Riquadro e foto hanno lo stesso bordo
	   superiore e inferiore: il riquadro si allunga per tutta l'altezza
	   della riga e la foto la riempie. Margine e larghezza del riquadro
	   sono variabili della riga perché il bordo sinistro della foto si
	   calcoli dagli stessi valori. */
	.chi-siamo__row {
		--chi-siamo-margine: max(var(--wp--preset--spacing--30), calc(50% - 590px));
		--chi-siamo-larghezza: min(46%, 640px);
		position: relative;
		display: flex;
		align-items: stretch;
		min-height: clamp(440px, 38vw, 600px);
		/* il fondo bianco della colonna testo arriva al bordo sinistro
		   della finestra */
		background-color: var(--wp--preset--color--bianco);
	}

	.chi-siamo__media {
		position: absolute;
		inset: 0;
		left: calc(var(--chi-siamo-margine) + var(--chi-siamo-larghezza));
		z-index: 0;
	}

	.chi-siamo__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* il logo CSD sulla facciata è al 70% della larghezza della foto:
		   ancorando lì il ritaglio resta inquadrato anche quando la foto
		   è stretta e alta (782-1024 px) */
		object-position: 70% 50%;
		display: block;
	}

	.chi-siamo__card {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: var(--chi-siamo-larghezza);
		/* il riquadro parte dalla griglia a 1180 px e il testo è a filo
		   del suo bordo sinistro, in linea con logo e titoli */
		margin-top: 0;
		margin-left: var(--chi-siamo-margine);
		padding-left: 0;
		background-color: var(--wp--preset--color--bianco);
	}

	.chi-siamo__card > * {
		/* il layout constrained centra i figli: qui vanno a sinistra */
		margin-left: 0 !important;
	}
}

.certificazioni-azienda {
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.certificazioni-azienda__logo {
	flex-shrink: 0;
	margin: 0;
}

.certificazioni-azienda__logo img {
	width: 100%;
	height: auto;
}

.certificazioni-azienda__text {
	flex: 1;
}

.certificazioni-azienda__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wp--preset--color--blu-csd);
	font-weight: 500;
	text-decoration: none;
}

.certificazioni-azienda__link:hover,
.certificazioni-azienda__link:focus-visible {
	text-decoration: underline;
}

/* Blocco AEO sulla griglia a 1180 px: logo sulla verticale del logo
   dell'intestazione, testo e link allineati a sinistra. La percentuale si
   calcola sulla larghezza di <main> al netto del suo padding laterale.
   Sotto i 600 px il blocco resta centrato (regola successiva). */
@media (min-width: 600px) {
	.certificazioni-azienda {
		padding-left: max(var(--wp--preset--spacing--30), calc(50% - 590px + var(--wp--style--root--padding-left, 0px)));
		padding-right: max(var(--wp--preset--spacing--30), calc(50% - 590px + var(--wp--style--root--padding-right, 0px)));
	}

	.certificazioni-azienda__text > * {
		margin-left: 0 !important;
	}
}

@media (max-width: 599px) {
	.certificazioni-azienda {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}
}

.sedi__box {
	height: 100%;
	background-color: var(--wp--preset--color--bianco);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--bordo);
	border-top: 3px solid var(--wp--preset--color--blu-csd);
}

.sedi__box p {
	margin: 0;
}

.sedi__box p + p {
	margin-top: var(--wp--preset--spacing--10);
}

.sedi__box .eyebrow {
	margin-bottom: var(--wp--preset--spacing--10);
}

.sedi__box h3 {
	margin-top: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.featured-article {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: 8px;
	overflow: hidden;
	color: var(--wp--preset--color--inchiostro);
	text-decoration: none;
	margin-bottom: var(--wp--preset--spacing--50);
	transition: box-shadow 0.2s ease;
}

.featured-article:hover,
.featured-article:focus-visible {
	box-shadow: 0 8px 24px rgba(17, 26, 74, 0.12);
}

.featured-article__thumb {
	display: block;
	flex: 0 0 45%;
	width: 45%;
}

.featured-article__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.featured-article__thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--blu-csd);
	padding: var(--wp--preset--spacing--30);
	text-align: center;
}

.featured-article__thumb--placeholder span {
	color: var(--wp--preset--color--bianco);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--medium);
}

.featured-article__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--40);
}

.featured-article__eyebrow {
	display: inline-block;
	align-self: flex-start;
	background-color: var(--wp--preset--color--nebbia);
	color: var(--wp--preset--color--blu-csd);
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--x-small);
}

.featured-article__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--source-serif);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	color: var(--wp--preset--color--inchiostro);
}

.featured-article__excerpt {
	margin: 0;
	font-family: var(--wp--preset--font-family--source-serif);
	color: var(--wp--preset--color--grigio);
	font-size: var(--wp--preset--font-size--medium);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.featured-article__meta {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--grigio);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.featured-article__meta-sep {
	color: var(--wp--preset--color--bordo);
}

@media (max-width: 781px) {
	.featured-article {
		flex-direction: column;
	}

	.featured-article__thumb {
		width: 100%;
		flex: none;
		aspect-ratio: 16 / 9;
	}

	.featured-article__body {
		padding: var(--wp--preset--spacing--30);
	}
}

.approfondimenti-archivio-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
}

.approfondimenti-archivio-grid__card {
	display: flex;
	flex: 0 1 calc((100% - 2 * var(--wp--preset--spacing--30)) / 3);
	flex-direction: column;
	color: var(--wp--preset--color--inchiostro);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.approfondimenti-archivio-grid__card:hover,
.approfondimenti-archivio-grid__card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(17, 26, 74, 0.1);
}

.approfondimenti-archivio-grid__thumb {
	display: block;
	aspect-ratio: 3 / 2;
	margin-bottom: var(--wp--preset--spacing--20);
	overflow: hidden;
	border-radius: 6px;
}

.approfondimenti-archivio-grid__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.approfondimenti-archivio-grid__thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--blu-csd);
	padding: var(--wp--preset--spacing--20);
	text-align: center;
}

.approfondimenti-archivio-grid__thumb--placeholder span {
	color: var(--wp--preset--color--bianco);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--wp--preset--font-size--small);
}

.approfondimenti-archivio-grid__eyebrow {
	display: inline-block;
	align-self: flex-start;
	background-color: var(--wp--preset--color--nebbia);
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--x-small);
	margin-bottom: var(--wp--preset--spacing--10);
}

.approfondimenti-archivio-grid__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.approfondimenti-archivio-grid__date {
	margin-top: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--grigio);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 781px) {
	.approfondimenti-archivio-grid__card {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.featured-article,
	.approfondimenti-archivio-grid__card {
		transition: none;
	}
}

.article-pagination {
	margin-top: var(--wp--preset--spacing--50);
}

.article-pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	flex-wrap: wrap;
}

.article-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: 6px;
	color: var(--wp--preset--color--inchiostro);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.article-pagination a.page-numbers:hover,
.article-pagination a.page-numbers:focus-visible {
	border-color: var(--wp--preset--color--blu-csd);
	color: var(--wp--preset--color--blu-csd);
}

.article-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--blu-csd);
	border-color: var(--wp--preset--color--blu-csd);
	color: var(--wp--preset--color--bianco);
}

.article-pagination .page-numbers.dots {
	border: none;
}

@media (prefers-reduced-motion: reduce) {
	.article-pagination .page-numbers {
		transition: none;
	}
}

/* Pattern servizio - Sintesi: prosa a sinistra, card riepilogo a destra.
   Le colonne si impilano sotto i 782px (comportamento nativo di wp:columns)
   e la card finisce sotto la prosa. Etichetta e valore di ogni voce non
   hanno una classe propria: sono il primo e il secondo paragrafo del
   wrapper .sintesi-servizio__voce, così restano stilizzati anche se
   l'editor riscrive il testo dopo il go-live. */
.sintesi-servizio {
	gap: var(--wp--preset--spacing--40);
}

/* align-self: start ancora la card in cima: se la prosa a sinistra è più
   alta, il riquadro NON si allunga per pareggiare la colonna.
   Bordo 1px bordo: è la convenzione del tema per le card bianche su fondo
   piatto (.sedi__box, .featured-article, .service-grid, campi form);
   l'ombra da sola non stacca abbastanza il bianco dal fondo #F6F8FC.
   font-family Archivo esplicito: il blocco core/post-content porta sempre
   la classe .entry-content (aggiunta da WordPress), che imposta il serif
   sul corpo del servizio; la card deve restare nel font di sistema, come
   fanno .entry-content h2/h3 e .related-articles__cta-title. */
.sintesi-servizio__card {
	align-self: start;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--bianco);
	border: 1px solid var(--wp--preset--color--bordo);
	box-shadow: 0 4px 14px rgba(17, 26, 74, 0.1);
	font-family: var(--wp--preset--font-family--archivo);
}

/* Etichetta della card: l'unico <p> figlio diretto (le voci sono <div>
   .sintesi-servizio__voce), così resta un'etichetta anche se l'editor
   riscrive il paragrafo e perde la classe .eyebrow. */
.sintesi-servizio__card > p {
	margin: 0 0 var(--wp--preset--spacing--20);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--wp--preset--color--blu-csd);
}

/* Occhielli della card "In sintesi" e dei riferimenti normativi a 15 px,
   come le altre etichette maiuscole delle schede. !important: nel
   contenuto delle schede la dimensione è scritta in linea. */
.sintesi-servizio__card > p.eyebrow,
.fonti-normative__testo > p.eyebrow {
	font-size: var(--wp--preset--font-size--small) !important;
}

.sintesi-servizio__voce {
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid var(--wp--preset--color--bordo);
}

.sintesi-servizio__voce:first-child,
.sintesi-servizio__card > p + .sintesi-servizio__voce {
	padding-top: 0;
}

.sintesi-servizio__voce:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.sintesi-servizio__voce > p {
	margin: 0;
}

.sintesi-servizio__voce > p:first-child {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grigio);
}

.sintesi-servizio__voce > p + p {
	margin-top: 0.25rem;
	font-weight: 500;
}

@media (max-width: 781px) {
	.sintesi-servizio__card {
		padding: var(--wp--preset--spacing--30);
	}
}

/* Pattern servizio - Passi: fascia blu-csd con 3-5 passi numerati.
   Griglia CSS invece di core/columns: serve limitare a 2 passi per riga
   sotto i 782px, mentre core/columns impila a 1 con un !important
   difficile da scavalcare. Numero, titolo e descrizione si stilano per
   posizione (1o <p>, <h3>, <h3>+<p>), così reggono le riscritture
   dell'editor. Il padding verticale della fascia sta nel markup del
   blocco; qui la spaziatura interna. font-family Archivo sul passo:
   dentro .entry-content il corpo eredita il serif (vedi
   .sintesi-servizio__card). */
.passi-servizio__griglia {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--40);
}

.passi-servizio__passo {
	font-family: var(--wp--preset--font-family--archivo);
	border-top: 2px solid var(--wp--preset--color--azzurro);
	padding-top: var(--wp--preset--spacing--30);
}

.passi-servizio__passo > p:first-child {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--celeste);
}

.passi-servizio__passo > h3 {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--medium);
	/* i titoli sono etichette brevi di 1-2 parole: senza la crenatura
	   negativa dei titoli editoriali (-0.015em di theme.json) gli spazi
	   fra le parole restano leggibili a questa dimensione. */
	letter-spacing: normal;
}

.passi-servizio__passo > h3 + p {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

@media (max-width: 781px) {
	.passi-servizio__griglia {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 359px) {
	.passi-servizio__griglia {
		grid-template-columns: 1fr;
	}
}

/* Pattern servizio - Gruppi: griglia di gruppi tematici (etichetta +
   elenco di voci), da 3 a 6 gruppi, senza card. minmax(220px,1fr) tiene
   le voci di piu parole su una riga: 3-4 gruppi riempiono una riga, 5-6
   vanno a capo (4+1, 4+2). 2 colonne sotto 782px, 1 sotto 480.
   Etichetta ed elenco stilati per posizione (> h3, > ul), font Archivo
   perché dentro .entry-content il corpo eredita il serif. Spaziatura
   verticale tenuta stretta: la griglia deve leggersi come un'unica
   tabella, non come sezioni separate. */
.gruppi-servizio__griglia {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--40);
}

.gruppi-servizio__gruppo {
	font-family: var(--wp--preset--font-family--archivo);
}

.gruppi-servizio__gruppo > h3 {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grigio);
}

.gruppi-servizio__gruppo > ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.gruppi-servizio__gruppo > ul li {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

@media (max-width: 781px) {
	.gruppi-servizio__griglia {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 479px) {
	.gruppi-servizio__griglia {
		grid-template-columns: 1fr;
	}
}

/* Pattern servizio - Fonti normative: fascia su carta con l'elenco dei
   riferimenti e filetto verticale celeste a sinistra, come il blockquote
   del tema. border-radius: 0 esplicito perché il bordo è su un lato solo
   e gli angoli devono restare vivi (nota del brief). Voci in serif come
   riferimento-normativo. ul.<classe> per battere .servizio-content ul
   (stessa specificità, vince l'ordine). */
.fonti-normative__testo > p {
	margin: 0;
}

/* L'occhiello "Riferimenti normativi" eredita il serif di .entry-content:
   torna nel carattere delle altre etichette. */
.fonti-normative__testo > p.eyebrow {
	font-family: var(--wp--preset--font-family--archivo);
	line-height: 1.4;
}

ul.fonti-normative__elenco {
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0 0 0 var(--wp--preset--spacing--30);
	list-style: none;
	border-left: 3px solid var(--wp--preset--color--celeste);
	border-radius: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.fonti-normative__elenco li {
	margin: 0;
	font-family: var(--wp--preset--font-family--source-serif);
	line-height: 1.5;
}

/* Pattern servizio - Domande frequenti: accordion con core/details
   nativo, zero JavaScript. Il triangolo di default è nascosto
   (list-style + ::-webkit-details-marker) e sostituito da una freccetta
   in ::after che ruota su [open]. Domanda in Archivo, risposta nel serif
   ereditato da .entry-content. Filetti 1px bordo fra le voci. */
.domande-frequenti__voce {
	border-top: 1px solid var(--wp--preset--color--bordo);
}

.domande-frequenti__voce:last-child {
	border-bottom: 1px solid var(--wp--preset--color--bordo);
}

.domande-frequenti__voce > summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) var(--wp--preset--spacing--20) 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 600;
	line-height: 1.4;
}

.domande-frequenti__voce > summary::-webkit-details-marker {
	display: none;
}

.domande-frequenti__voce > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--blu-csd);
	outline-offset: 2px;
}

.domande-frequenti__voce > summary::after {
	content: "";
	position: absolute;
	right: var(--wp--preset--spacing--10);
	top: 1.4em;
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid var(--wp--preset--color--blu-csd);
	border-bottom: 2px solid var(--wp--preset--color--blu-csd);
	transform: translateY(-50%) rotate(45deg);
	transition: transform 0.2s ease;
}

.domande-frequenti__voce[open] > summary::after {
	transform: translateY(-50%) rotate(225deg);
}

.domande-frequenti__voce > :not(summary) {
	max-width: 62ch;
	margin: 0 0 var(--wp--preset--spacing--20);
}

@media (prefers-reduced-motion: reduce) {
	.domande-frequenti__voce > summary::after {
		transition: none;
	}
}

/* Pattern servizio - Foto: scatto a piena larghezza, proporzione fissa
   21/9 con tetto d'altezza a 480 px per non invadere gli schermi larghi
   (16/9 sotto i 600 px, dove una fascia 21/9 sarebbe troppo sottile),
   nessun testo sovrapposto. Il WebP lo aggiunge csd_picture_sources() quando il
   file .webp esiste accanto al .jpg. */
.foto-servizio__media {
	margin: 0;
	/* width esplicito: senza, con aspect-ratio + max-height il browser
	   ricava la larghezza dall'altezza limitata (480 * 21/9 = 1120px) e la
	   foto non riempie la fascia. */
	width: 100%;
	aspect-ratio: 21 / 9;
	max-height: 480px;
	overflow: hidden;
}

@media (max-width: 599px) {
	.foto-servizio__media {
		aspect-ratio: 16 / 9;
	}
}

.foto-servizio__media picture,
.foto-servizio__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Le fasce a tutta larghezza vivono nel post_content, che nel template
   servizio è vincolato a 1180px: da lì un align:full non sfonda. Questo
   escape le riporta edge-to-edge. overflow-x: clip su <main> assorbe lo
   sfratto pari alla larghezza della scrollbar senza creare un contenitore
   di scroll (a differenza di hidden). .luogo-approvato (Operazioni
   doganali), .contenzioso (Consulenza doganale), .a-che-cosa-serve (Check-up
   doganale), .conservazione-doganale (Cassetto doganale), .come-funziona
   (Portale clienti), .chi-e-obbligato (Dichiarazioni Intrastat),
   .chi-puo-assumere-il-ruolo (Rappresentanza fiscale), .deposito-iva
   (Depositi doganali e IVA), .responsabilita-non-si-delega (Strategia
   doganale e formazione) e .criteri-e-audit (Autorizzazione AEO) sono
   fasce navy specifiche di una singola scheda, non pattern. */
main.wp-block-group {
	overflow-x: clip;
}

.servizio-content > .passi-servizio,
.servizio-content > .foto-servizio:not(.foto-servizio--contenuta),
.servizio-content > .importazione-fascia,
.servizio-content > .fonti-normative,
.servizio-content > .luogo-approvato,
.servizio-content > .contenzioso,
.servizio-content > .a-che-cosa-serve,
.servizio-content > .conservazione-doganale,
.servizio-content > .come-funziona,
.servizio-content > .chi-e-obbligato,
.servizio-content > .chi-puo-assumere-il-ruolo,
.servizio-content > .deposito-iva,
.servizio-content > .responsabilita-non-si-delega,
.servizio-content > .criteri-e-audit {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Variante opt-in del pattern csd/foto-servizio: la foto NON sfonda
   edge-to-edge, resta nella colonna di contenuto (align:wide, 1180px).
   Riduce la scala del soggetto senza ritagliarlo di più. Classe
   modificatore per singola scheda — il default del pattern resta
   full-bleed, quindi Operazioni doganali non cambia. Escludendola
   dall'escape qui sopra ricade nel flusso constrained: nessun margine
   orizzontale da annullare. */

/* Niente strisce chiare fra fasce consecutive: il blockGap globale (24 px)
   resta fra i blocchi di contenuto, non fra intestazione, blocchi a tutta
   larghezza e piè di pagina. Vale per ogni coppia di blocchi .alignfull,
   con o senza fondo. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

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

/* La fascia foto non ha padding interno: un blocco di contenuto che la
   precede le finisce appiccicato (il pattern azzera i margini verticali
   inline, da qui !important). Le diamo lo stesso stacco che c'è fra
   contenuto e fasce colorate. Contro un blocco a tutta larghezza che la
   precede resta invece a filo, come navy → foto in Operazioni doganali;
   anche sotto, contro la fascia successiva, resta a filo (regola qui
   sopra). Regola generale su .alignfull: una nuova fascia di scheda non va
   aggiunta qui. */
.servizio-content > .foto-servizio {
	margin-top: var(--wp--preset--spacing--40) !important;
}

.servizio-content > .alignfull + .foto-servizio:not(.foto-servizio--contenuta) {
	margin-top: 0 !important;
}

/* Misura delle righe del testo sciolto delle schede: circa 70 caratteri
   (62ch: l'unità ch è la larghezza dello zero, più larga della lettera
   media). margin-left batte il centramento che il layout "constrained" dà
   ai blocchi con max-width: il testo resta allineato a sinistra. */
.servizio-content > p,
.servizio-content > .has-background > .alignwide > p {
	max-width: 62ch;
	margin-left: 0 !important;
}

/* Nelle schede il sommario è già nella sintesi: il primo paragrafo sciolto
   del corpo è testo normale, non l'attacco ingrandito di
   .entry-content > p:first-of-type. */
.servizio-content > p:first-of-type {
	font-size: var(--wp--preset--font-size--medium);
}

/* Fra una fascia a tutta larghezza (colorata o foto) e il contenuto in
   colonna accanto, sopra o sotto, lo stacco è spacing-40 invece del
   blockGap (24 px), come nelle altre pagine. Esclusi i titoli, che hanno
   già un margine superiore maggiore, e la sintesi, che ha un padding
   proprio. Prima della regola fonti → domande frequenti, che a parità di
   specificità la batte e resta a 64 px. */
.servizio-content > .alignfull + :not(.alignfull, .wp-block-heading),
.servizio-content > :not(.alignfull, .sintesi-servizio) + .alignfull {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Chiusura delle schede: stessa distanza (64 px) sopra e sotto le domande
   frequenti; i riferimenti normativi, quando sono l'ultimo blocco del
   corpo, toccano la fascia "Per informazioni". */
.servizio-content > .fonti-normative + .domande-frequenti {
	margin-block-start: var(--wp--preset--spacing--50);
}

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

.servizio-content:has(> .fonti-normative:last-child) {
	padding-bottom: 0;
}

/* Link dentro la fascia passi: il colore link di default (blu-csd) è lo
   stesso del fondo. */
.passi-servizio a {
	color: var(--wp--preset--color--celeste);
	text-decoration: underline;
}

.passi-servizio a:hover,
.passi-servizio a:focus-visible {
	color: var(--wp--preset--color--bianco);
}

/* Sezione "Il luogo approvato": apertura comune e sotto due colonne, una
   per opzione. Fondo navy e testo bianco arrivano dagli attributi del
   blocco. .contenzioso (Consulenza doganale), .a-che-cosa-serve (Check-up
   doganale), .come-funziona (Portale clienti), .chi-e-obbligato
   (Dichiarazioni Intrastat), .responsabilita-non-si-delega (Strategia
   doganale e formazione) e .criteri-e-audit (Autorizzazione AEO) riusano
   lo stesso intro senza colonne: solo lead serif + paragrafo di corpo
   (.criteri-e-audit non ha il lead serif, sono tre paragrafi lineari
   dello stesso corpo). */
.luogo-approvato__intro > *,
.contenzioso__intro > *,
.a-che-cosa-serve__intro > *,
.conservazione-doganale__intro > *,
.come-funziona__intro > *,
.chi-e-obbligato__intro > *,
.deposito-iva__intro > *,
.responsabilita-non-si-delega__intro > *,
.criteri-e-audit__intro > * {
	max-width: 68ch;
}

/* Tabella su fascia navy (Cassetto doganale "Perché vanno conservati",
   Dichiarazioni Intrastat "Chi è obbligato e con quale periodicità"): gli
   stili tabella di .servizio-content danno alle intestazioni un fondo
   chiaro (nebbia) con testo che sul navy è bianco, quindi illeggibile.
   Aggancio a .has-navy-background-color invece che a una classe di scheda:
   vale per ogni fascia navy con tabella, presente e futura. */
.servizio-content .has-navy-background-color table th,
.servizio-content .has-navy-background-color table td {
	border-color: rgba(255, 255, 255, 0.25);
	color: var(--wp--preset--color--bianco);
}

.servizio-content .has-navy-background-color table th {
	background-color: rgba(255, 255, 255, 0.08);
}

/* Link nella fascia navy "A che cosa serve" (Check-up doganale): il
   colore link di default (blu-csd) sul fondo navy è illeggibile. */
.a-che-cosa-serve a {
	color: var(--wp--preset--color--celeste);
	text-decoration: underline;
}

.a-che-cosa-serve a:hover,
.a-che-cosa-serve a:focus-visible {
	color: var(--wp--preset--color--bianco);
}

.luogo-approvato__opzioni {
	margin-top: var(--wp--preset--spacing--30);
}

.luogo-approvato__opzioni h3 {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--medium);
}

/* Variante a due colonne della fascia navy "Chi può assumere il ruolo"
   (Rappresentanza fiscale): stesso stacco dal titolo di
   .luogo-approvato__opzioni. Due paragrafi per colonna, senza sottotitoli
   né lead: i quattro paragrafi della sezione riempiti su due colonne
   invece che incolonnati a 68ch a sinistra. */
.chi-puo-assumere-il-ruolo__colonne {
	margin-top: var(--wp--preset--spacing--30);
}

/* Titolo di sezione e paragrafo intro prima della griglia (Esportazione,
   Importazione): non fanno parte del pattern base, li porta la scheda. */
.gruppi-servizio > h2 {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.gruppi-servizio > p {
	max-width: 68ch;
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* Pattern servizio - Elenco descrittivo: voci "etichetta + paragrafo" su
   due colonne, senza card e senza numeri. Diverso da csd/gruppi-servizio
   (etichetta + voci brevi in elenco): qui ogni voce ha un titolo e uno o
   due periodi di testo, e regge un elenco puntato annidato nel corpo (i
   sistemi telematici di Assistenza informatica doganale). Titolo e corpo
   stilati per posizione (> h3, > p, > ul); font Archivo perché dentro
   .entry-content il corpo eredita il serif. */
.elenco-descrittivo__griglia {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--40);
}

.elenco-descrittivo__voce {
	font-family: var(--wp--preset--font-family--archivo);
}

.elenco-descrittivo__voce > h3 {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grigio);
}

.elenco-descrittivo__voce > p {
	max-width: 62ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.elenco-descrittivo__voce > p + p {
	margin-top: var(--wp--preset--spacing--20);
}

/* Elenco puntato annidato in una voce (i sistemi telematici): punto
   elenco mantenuto, indentazione e gap ereditati da .servizio-content ul,
   qui lo stacco dal titolo (o dal paragrafo) che lo precede, corpo e
   misura delle righe come il testo delle voci. */
.elenco-descrittivo__voce > ul {
	max-width: 62ch;
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.elenco-descrittivo__voce > ul li {
	line-height: 1.6;
}

@media (max-width: 781px) {
	.elenco-descrittivo__griglia {
		grid-template-columns: 1fr;
	}
}

/* H2 di sezione e paragrafo di chiusura: non fanno parte del pattern
   base, li porta la scheda attorno alla griglia (come per
   csd/gruppi-servizio). Il paragrafo di chiusura resta in Archivo come
   le voci che chiude, non nel serif ereditato da .entry-content. */
.elenco-descrittivo > h2 {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.elenco-descrittivo > p {
	max-width: 68ch;
	margin: var(--wp--preset--spacing--30) 0 0;
	font-family: var(--wp--preset--font-family--archivo);
}

/* Variante --tre-colonne: per le sezioni con 3 voci, dove due colonne
   lasciano mezza riga vuota (Assistenza informatica doganale, "Di cosa
   ci occupiamo"). Scelta per singola sezione: il default resta a due
   colonne. Sotto i 782px ricade a una colonna con la media query qui
   sopra. */
@media (min-width: 782px) {
	.elenco-descrittivo--tre-colonne .elenco-descrittivo__griglia {
		grid-template-columns: repeat(3, 1fr);
		column-gap: var(--wp--preset--spacing--40);
	}
}

/* "I due tipi di autorizzazione" (Autorizzazione AEO): logo a sinistra,
   le tre voci (.elenco-descrittivo__voce, riusata) a destra. Compare una
   sola volta nel sito, quindi composto con blocchi core nella scheda
   invece che come pattern — non c'è un secondo caso da cui astrarre
   un'API di pattern, e comporlo qui evita di mantenere un pattern con un
   solo utilizzo. */
.tipi-autorizzazione {
	gap: var(--wp--preset--spacing--40);
}

.tipi-autorizzazione__elenco {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

/* Il logo non è una foto: va contenuto in larghezza (280-360px) e
   allineato in alto rispetto al testo — il default di wp:columns
   (align-items: normal) già allinea in alto, qui serve solo azzerare il
   margine verticale che .servizio-content figure.wp-block-image dà agli
   screenshot. Selettori con .wp-block-column ripetuto per vincere quella
   regola e .servizio-content .wp-block-image img (pensata per gli
   screenshot, max-width: none) per specificità, senza !important. */
.wp-block-column.tipi-autorizzazione__logo .wp-block-image {
	margin: 0;
}

.wp-block-column.tipi-autorizzazione__logo .wp-block-image img {
	width: 320px;
	max-width: 100%;
	height: auto;
}