/*
 * Token e stati interattivi. Il layout e la tipografia dei singoli widget
 * restano nel pannello di Elementor: qui solo ciò che Elementor non esprime.
 * Valori Figma riferiti a un viewport di 2048px.
 */

:root {
	--sds-brown: #702c1a;
	--sds-slate: #57707a;
	--sds-ink: #1d1d1b;
	--sds-gold: #b9935f;
	--sds-cream: #f7f1e5;
	--sds-ochre: #ae7736;
	--sds-grey: #909090;
	--sds-white: #fff;

	--sds-accent: var(--sds-brown);

	--sds-font-display: "Bethany Elingston", Georgia, serif;
	--sds-font-body: "google sans", system-ui, sans-serif;

	--sds-fs-hero: clamp(3rem, 7.32vw, 9.375rem);      /* 150 */
	--sds-fs-cta: clamp(2.75rem, 6.35vw, 8.125rem);    /* 130 */
	--sds-fs-h1: clamp(2.75rem, 5.86vw, 7.5rem);       /* 120 */
	--sds-fs-h2: clamp(2.5rem, 4.88vw, 6.25rem);       /* 100 */
	--sds-fs-h2-sm: clamp(2.25rem, 3.91vw, 5rem);      /* 80 */
	--sds-fs-quote: clamp(1.75rem, 2.93vw, 3.75rem);   /* 60 */
	--sds-fs-h3: clamp(1.625rem, 1.95vw, 2.5rem);      /* 40 */
	--sds-fs-card: clamp(1.5rem, 1.66vw, 2.125rem);    /* 34 */
	--sds-fs-lead: clamp(1.125rem, 1.17vw, 1.5rem);    /* 24 */
	--sds-fs-body: clamp(1rem, 1.07vw, 1.375rem);      /* 22 */
	--sds-fs-small: clamp(1rem, 0.98vw, 1.25rem);      /* 20 */
	--sds-fs-btn: clamp(1rem, 0.88vw, 1.125rem);       /* 18 */
	--sds-fs-meta: 1rem;                               /* 16 */

	--sds-gutter: clamp(16px, 3.32vw, 68px);
	--sds-radius-sm: 10px;
	--sds-radius: 20px;
	--sds-radius-pill: 40px;

	--sds-ease-in: cubic-bezier(0.42, 0, 1, 1);
	--sds-ease-out: cubic-bezier(0, 0, 0.58, 1);
	--sds-fast: 300ms;
	--sds-slow: 500ms;
	--sds-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
}

.sds-theme-slate {
	--sds-accent: var(--sds-slate);
}

.sds-theme-brown {
	--sds-accent: var(--sds-brown);
}

/* Hello colora i link di rosa: qui prendono l'accento, nel footer il colore del testo. */
a {
	color: var(--sds-accent);
}

.sds-footer a {
	color: inherit;
}

.sds-footer a:hover {
	color: var(--sds-gold);
}

/* Colonne del footer: stesse proporzioni della tavola, l'ultima larga quanto i contatti. */
.sds-footer__cols.e-con {
	display: grid;
	grid-template-columns: 33.9fr 25.4fr 29.4fr auto;
	align-items: start;
	column-gap: 0;
}

@media (max-width: 1024px) {
	.sds-footer__cols.e-con {
		grid-template-columns: 1fr 1fr;
		column-gap: 40px;
	}
}

@media (max-width: 767px) {
	.sds-footer__cols.e-con {
		grid-template-columns: 1fr;
	}
}

.sds-header .elementor-widget-image a,
.sds-header .elementor-widget-image img {
	display: block;
}

/* Header: il logo si riduce quando l'header resta fisso (Elementor aggiunge --effects dopo 60px). */
.sds-header.elementor-sticky {
	transition: padding var(--sds-fast) var(--sds-ease-out);
}

.sds-header .elementor-widget-image img {
	transition: width var(--sds-fast) var(--sds-ease-out);
}

/* Elementor imposta padding e larghezza del logo con regole a tre classi caricate dopo: serve una classe in più. */
.sds-header.elementor-sticky--effects.e-con {
	--padding-top: 8px;
	--padding-bottom: 8px;
}

.sds-header.elementor-sticky--effects.e-con .elementor-widget-image img {
	width: clamp(120px, 6.84vw, 140px);
}

/*
 * Menu tablet e mobile: pannello crema a tutto schermo che entra da destra.
 * Gli !important battono larghezza, left e top che Elementor scrive inline via JS.
 */
.sds-header .elementor-widget-image,
.sds-header .elementor-menu-toggle {
	position: relative;
	z-index: 2;
}

.sds-header .elementor-widget-nav-menu.elementor-element .elementor-nav-menu--dropdown.elementor-nav-menu__container {
	position: fixed;
	z-index: 1;
	inset: 0 !important;
	width: auto !important;
	max-height: none;
	margin: 0 !important;
	padding: 140px var(--sds-gutter) 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow-y: auto;
	background: var(--sds-cream);
	transform: translateX(100%);
	visibility: hidden;
	transition:
		transform var(--sds-slow) cubic-bezier(0.7, 0, 0.2, 1),
		visibility 0s linear var(--sds-slow);
}

.sds-header .elementor-widget-nav-menu.elementor-element .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
	max-height: none;
	transform: none;
	visibility: visible;
	transition-delay: 0s;
}

.sds-header .elementor-nav-menu--dropdown li {
	opacity: 0;
	translate: 32px 0;
	transition: opacity var(--sds-fast) var(--sds-ease-out), translate var(--sds-fast) var(--sds-ease-out);
}

.sds-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li {
	opacity: 1;
	translate: none;
}

.sds-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li:nth-child(1) { transition-delay: 200ms; }
.sds-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li:nth-child(2) { transition-delay: 260ms; }
.sds-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li:nth-child(3) { transition-delay: 320ms; }
.sds-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li:nth-child(4) { transition-delay: 380ms; }

.sds-header .elementor-widget-nav-menu.elementor-element .elementor-nav-menu--dropdown a.elementor-item {
	justify-content: flex-start;
	padding: 20px 0;
	font-family: var(--sds-font-display);
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	line-height: 1.2;
	color: var(--sds-ink);
	background: none;
	border-bottom: 1px solid color-mix(in srgb, var(--sds-brown) 25%, transparent);
	transition: color var(--sds-fast) var(--sds-ease-out), padding var(--sds-fast) var(--sds-ease-out);
}

.sds-header .elementor-widget-nav-menu.elementor-element .elementor-nav-menu--dropdown a.elementor-item:is(:hover, :focus-visible),
.sds-header .elementor-widget-nav-menu.elementor-element .elementor-nav-menu--dropdown a.elementor-item-active {
	padding-left: 16px;
	color: var(--sds-brown);
	background: none;
}

html.sds-menu-open {
	overflow: hidden;
}

/* Sfondo che sfuma al crema dalla sezione "Approccio integrato" in giù (main.js). */
body {
	background-color: var(--sds-white);
	transition: background-color var(--sds-fast) var(--sds-ease-out);
}

body.sds-cream {
	background-color: var(--sds-cream);
}

/* Bottone "stampato": la faccia scivola sul blocco pieno sfalsato e si riempie. */
body .elementor-widget-button .elementor-button,
body .elementor-widget-form.sds-form .elementor-field-type-submit .elementor-button[type="submit"] {
	--sds-btn-color: var(--sds-accent);
	padding: 14px 20px;
	margin: 0 6px 6px 0;
	font-family: var(--sds-font-body);
	font-size: var(--sds-fs-btn);
	line-height: 1;
	color: var(--sds-ink);
	background: var(--sds-white);
	border: 2px solid var(--sds-btn-color);
	border-radius: var(--sds-radius-sm);
	box-shadow: 6px 6px 0 0 var(--sds-btn-color);
	transition:
		transform var(--sds-fast) var(--sds-ease-in),
		box-shadow var(--sds-fast) var(--sds-ease-in),
		background-color var(--sds-fast) var(--sds-ease-in),
		color var(--sds-fast) var(--sds-ease-in);
}

body .elementor-widget-button .elementor-button:hover,
body .elementor-widget-button .elementor-button:focus-visible,
body .elementor-widget-form.sds-form .elementor-field-type-submit .elementor-button[type="submit"]:hover,
body .elementor-widget-form.sds-form .elementor-field-type-submit .elementor-button[type="submit"]:focus-visible {
	color: var(--sds-white);
	background: var(--sds-btn-color);
	box-shadow: 0 0 0 0 var(--sds-btn-color);
	transform: translate(6px, 6px);
}

body .sds-btn--gold .elementor-button {
	--sds-btn-color: var(--sds-gold);
}

/* Form contatti: campi a sola linea inferiore, come in Figma. */
.sds-form .elementor-field-group .elementor-field-textual {
	padding: 0 0 12px;
	font-family: var(--sds-font-body);
	font-size: var(--sds-fs-small);
	line-height: 1.2;
	color: var(--sds-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--sds-ink);
	border-radius: 0;
	transition: border-color var(--sds-fast) var(--sds-ease-out);
}

.sds-form .elementor-field-group .elementor-field-textual::placeholder {
	color: var(--sds-grey);
	opacity: 1;
}

.sds-form .elementor-field-group .elementor-field-textual:focus {
	border-bottom-color: var(--sds-accent);
	outline: none;
	box-shadow: 0 1px 0 0 var(--sds-accent);
}

.sds-form textarea.elementor-field-textual {
	min-height: 2.5em;
	resize: vertical;
}

/* Consenso privacy: checkbox e testo affiancati (il contenitore eredita altrimenti 60px di testo). */
.sds-form .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--sds-font-body);
	font-size: var(--sds-fs-meta);
	line-height: 1.2;
	color: var(--sds-ink);
}

.sds-form .elementor-field-type-acceptance input[type="checkbox"] {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--sds-accent);
}

/* Il bottone del form è largo quanto il testo, come in Figma (Elementor lo mette al 100%). */
.sds-form .elementor-field-type-submit {
	justify-content: flex-start;
}

body .elementor-widget-form.sds-form .elementor-field-type-submit .elementor-button[type="submit"] {
	flex-basis: auto;
	width: auto;
	text-transform: uppercase;
}

/* Sezioni con decorazioni che sbordano ai lati: niente scroll orizzontale, ma in verticale escono. */
.sds-clip-x.e-con {
	overflow-x: clip;
}

/*
 * Frecce circolari dei Nested Carousel. Elementor posiziona e colora le frecce con variabili
 * impostate nel CSS di ogni elemento (specificità 0,3,0) e carica il suo foglio dopo il nostro:
 * da qui i selettori a tre classi.
 */
.elementor-widget-n-carousel.sds-arrow.elementor-element {
	--e-n-carousel-arrow-prev-translate-x: 0px;
	--e-n-carousel-arrow-prev-translate-y: 0px;
	--e-n-carousel-arrow-next-translate-x: 0px;
	--e-n-carousel-arrow-next-translate-y: 0px;
}

.elementor-widget-n-carousel.sds-arrow.elementor-element .elementor-swiper-button {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	color: var(--sds-accent);
	background: transparent;
	border: 2px solid var(--sds-accent);
	border-radius: 50%;
	transition:
		background-color var(--sds-fast) var(--sds-ease-out),
		color var(--sds-fast) var(--sds-ease-out);
}

.elementor-widget-n-carousel.sds-arrow.elementor-element .elementor-swiper-button:hover,
.elementor-widget-n-carousel.sds-arrow.elementor-element .elementor-swiper-button:focus-visible {
	color: var(--sds-white);
	background: var(--sds-accent);
}

/* freccia.svg è un tratto che punta in basso: niente fill, e ruotata verso la direzione. */
.elementor-widget-n-carousel.sds-arrow.elementor-element .elementor-swiper-button svg {
	width: 26px;
	height: 26px;
	fill: none;
}

.sds-arrow .elementor-swiper-button-prev svg {
	transform: rotate(90deg);
}

.sds-arrow .elementor-swiper-button-next svg {
	transform: rotate(-90deg);
}

/* Carosello percorsi: card sfalsate (pari 80px più in basso), frecce in basso a destra. */
.elementor-widget-n-carousel.sds-carousel.elementor-element {
	--e-n-carousel-slide-container-height: auto;
	--e-n-carousel-arrow-prev-top-align: 100%;
	--e-n-carousel-arrow-prev-top-position: -35px;
	--e-n-carousel-arrow-prev-left-align: 100%;
	--e-n-carousel-arrow-prev-left-position: -130px;
	--e-n-carousel-arrow-next-top-align: 100%;
	--e-n-carousel-arrow-next-top-position: -35px;
	--e-n-carousel-arrow-next-right-align: 0px;
	--e-n-carousel-arrow-next-right-position: 0px;
	padding-bottom: 90px;
}

@media (min-width: 768px) {
	.sds-carousel .swiper-slide:nth-child(even) > .e-con {
		margin-top: 80px;
	}
}

.sds-decor {
	pointer-events: none;
}

/* Griglia a 3 colonne con la colonna centrale abbassata di 80px (Tipologie di percorso). */
@media (min-width: 1025px) {
	.sds-stagger.e-con {
		padding-bottom: 80px;
	}

	.sds-stagger > .e-con:nth-child(3n + 2) {
		transform: translateY(80px);
	}
}

/* Stesso ornamento capovolto (La Sedia Vuota). */
.sds-flip-y img {
	transform: scaleY(-1);
}

/* Citazioni con la virgoletta d'apertura "appesa" fuori dal margine. */
.sds-hang .elementor-heading-title {
	text-indent: -0.45em;
}

/*
 * Timeline "Formazione" (Nested Carousel): frecce ocra in alto a sinistra, linea tratteggiata
 * a tutta pagina, e le tappe fino a quella attiva in ocra (le successive in grigio).
 */
.elementor-widget-n-carousel.sds-timeline.elementor-element {
	--sds-accent: var(--sds-ochre);
	--e-n-carousel-slide-container-height: auto;
	--e-n-carousel-arrow-prev-top-align: 0%;
	--e-n-carousel-arrow-prev-top-position: 15px;
	--e-n-carousel-arrow-prev-left-align: 0%;
	--e-n-carousel-arrow-prev-left-position: 0px;
	--e-n-carousel-arrow-next-top-align: 0%;
	--e-n-carousel-arrow-next-top-position: 15px;
	--e-n-carousel-arrow-next-right-align: 100%;
	--e-n-carousel-arrow-next-right-position: -130px;
	padding-top: 90px;
}

.sds-timeline::before {
	content: "";
	position: absolute;
	top: 90px;
	right: calc(-1 * var(--sds-gutter));
	left: calc(-1 * var(--sds-gutter));
	border-top: 2px dashed var(--sds-grey);
}

.sds-timeline .swiper-slide {
	--sds-tl: var(--sds-grey);
	--sds-tl-text: var(--sds-grey);
}

.sds-timeline .swiper-slide-active,
.sds-timeline .swiper-slide:has(~ .swiper-slide-active) {
	--sds-tl: var(--sds-ochre);
	--sds-tl-text: var(--sds-ink);
}

.sds-timeline .swiper-slide > .e-con {
	padding-top: 60px;
	border-top: 3px solid var(--sds-tl);
	transition: border-color var(--sds-slow) var(--sds-ease-out);
}

.sds-timeline .sds-tl-year .elementor-heading-title,
.sds-timeline .sds-tl-title .elementor-heading-title {
	color: var(--sds-tl);
	transition: color var(--sds-slow) var(--sds-ease-out);
}

.sds-timeline .sds-tl-title .elementor-heading-title::before {
	content: "·";
	margin-inline-end: 0.4em;
}

.sds-timeline .sds-tl-desc {
	padding-inline-start: 0.9em;
	color: var(--sds-tl-text);
	transition: color var(--sds-slow) var(--sds-ease-out);
}

.sds-card--glass {
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
}

/* Marquee argomenti: main.js duplica il contenuto e imposta la durata. */
.sds-marquee {
	overflow: hidden;
}

.sds-marquee .sds-marquee__track {
	flex-wrap: nowrap;
	/* Il contenitore è una riga flex: senza flex-shrink la traccia si stringe alla larghezza dello schermo. */
	flex-shrink: 0;
	width: max-content;
	max-width: none;
	/* Lo spazio finale uguale al gap rende il giro senza scatti a -50%. */
	padding-inline-end: var(--column-gap, 60px);
	animation: sds-marquee var(--sds-marquee-duration, 50s) linear 200ms infinite;
}

.sds-marquee .sds-marquee__track > * {
	flex-shrink: 0;
}

/* Solo con il mouse: sul touch l'hover resta attivo dopo un tocco e fermerebbe il marquee. */
@media (hover: hover) {
	.sds-marquee:hover .sds-marquee__track {
		animation-play-state: paused;
	}
}

@keyframes sds-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* Accordion approcci e FAQ (Nested Accordion). */
.elementor-widget-n-accordion.sds-accordion.elementor-element {
	--n-accordion-title-normal-color: var(--sds-accent);
	--n-accordion-title-hover-color: var(--sds-accent);
	--n-accordion-title-active-color: var(--sds-accent);
	--n-accordion-item-title-distance-from-content: 0px;
	/* freccia.svg è solo un tratto: il fill che Elementor applica alle icone la riempirebbe. */
	--n-accordion-icon-normal-color: transparent;
	--n-accordion-icon-hover-color: transparent;
	--n-accordion-icon-active-color: transparent;
}

/* Elementor dà al testo del titolo una sua dimensione (16px): eredita quella del titolo. */
.elementor-widget-n-accordion.sds-accordion .e-n-accordion-item-title-text {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

.sds-accordion .e-n-accordion-item {
	border-bottom: 1px solid var(--sds-accent);
}

.sds-accordion .e-n-accordion-item-title {
	justify-content: space-between;
	padding: 20px 0;
	font-family: var(--sds-font-display);
	font-size: var(--sds-fs-h3);
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--sds-accent);
	background: transparent;
	border: 0;
	transition: padding-inline-start var(--sds-fast) var(--sds-ease-out);
}

.sds-accordion .e-n-accordion-item-title-icon svg {
	width: 24px;
	height: 24px;
	color: var(--sds-accent);
}

.sds-accordion .e-n-accordion-item-title:hover,
.sds-accordion .e-n-accordion-item-title:focus-visible,
.sds-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title {
	padding-inline-start: 40px;
}

.sds-accordion .e-n-accordion-item-title-icon {
	transition: transform var(--sds-slow) var(--sds-ease-out);
}

.sds-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
	transform: rotate(180deg);
}

/* Il contenuto aperto non ha il riquadro di default di Elementor: resta allineato al titolo rientrato. */
.elementor-widget-n-accordion.sds-accordion .e-n-accordion-item > .e-con {
	padding: 0 0 20px 40px;
	border: 0;
}

/* Su mobile il rientro di 40px della voce aperta toglie troppo spazio al testo. */
@media (max-width: 767px) {
	.sds-accordion .e-n-accordion-item-title:hover,
	.sds-accordion .e-n-accordion-item-title:focus-visible,
	.sds-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title {
		padding-inline-start: 16px;
	}

	.elementor-widget-n-accordion.sds-accordion .e-n-accordion-item > .e-con {
		padding-inline-start: 16px;
	}
}

/* Testimonianze: virgolette appese e vetro smerigliato. */
.sds-testimonial > .e-con:last-child {
	flex-grow: 1;
}

.sds-testimonial {
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
}

.sds-testimonial .elementor-heading-title {
	text-indent: -0.45em;
}

/* Card articolo (Loop Item). */
.sds-post-card.e-con {
	height: 100%;
}

.sds-post-card .elementor-widget-theme-post-featured-image {
	overflow: hidden;
}

.sds-post-card .elementor-widget-theme-post-featured-image img {
	width: 100%;
	aspect-ratio: 616 / 400;
	object-fit: cover;
	transition: transform var(--sds-fast) var(--sds-ease-out);
}

.sds-post-card:hover .elementor-widget-theme-post-featured-image img {
	transform: scale(1.05);
}

.sds-post-card .elementor-widget-theme-post-title .elementor-heading-title {
	transition: color var(--sds-fast) var(--sds-ease-out);
}

.sds-post-card:hover .elementor-widget-theme-post-title .elementor-heading-title,
.sds-post-card:focus-within .elementor-widget-theme-post-title .elementor-heading-title {
	color: var(--sds-accent);
}

/*
 * Le categorie stanno in fondo alla card, qualunque sia la lunghezza del titolo: il blocco dei
 * testi si allunga fino in fondo (i template importati prima della 1.7.2 non lo impostano).
 */
.sds-post-card > .e-con {
	flex-grow: 1;
}

.sds-post-card .sds-post-card__tags {
	margin-top: auto;
}

/* Data e tempo di lettura ([sds_post_meta]). */
.sds-post-meta {
	font-family: var(--sds-font-body);
	font-size: var(--sds-fs-meta);
	line-height: 1;
	color: var(--sds-grey);
}

.sds-single .sds-post-meta {
	font-size: var(--sds-fs-small);
}

/* Categorie dell'articolo ([sds_post_categories]). */
.sds-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

a.sds-tag {
	padding: 12px 24px;
	font-family: var(--sds-font-body);
	font-size: var(--sds-fs-small);
	line-height: 1.2;
	color: var(--sds-white);
	background: var(--sds-brown);
	border-radius: var(--sds-radius-pill);
	transition: background-color var(--sds-fast) var(--sds-ease-out);
}

a.sds-tag:hover,
a.sds-tag:focus-visible {
	color: var(--sds-white);
	background: var(--sds-ochre);
}

/* Filtro per categoria dell'archivio (Taxonomy Filter): pill grigie, attiva piena. */
.elementor-widget-taxonomy-filter.sds-pill.elementor-element .e-filter {
	gap: 10px;
}

.elementor-widget-taxonomy-filter.sds-pill.elementor-element .e-filter-item {
	padding: 12px 24px;
	font-family: var(--sds-font-body);
	font-size: var(--sds-fs-small);
	line-height: 1.2;
	color: var(--sds-grey);
	background: transparent;
	border: 1px solid var(--sds-grey);
	border-radius: var(--sds-radius-pill);
	transition:
		background-color var(--sds-fast) var(--sds-ease-out),
		border-color var(--sds-fast) var(--sds-ease-out),
		color var(--sds-fast) var(--sds-ease-out);
}

.elementor-widget-taxonomy-filter.sds-pill.elementor-element .e-filter-item:hover,
.elementor-widget-taxonomy-filter.sds-pill.elementor-element .e-filter-item:focus-visible,
.elementor-widget-taxonomy-filter.sds-pill.elementor-element .e-filter-item[aria-pressed="true"] {
	color: var(--sds-white);
	background: var(--sds-brown);
	border-color: var(--sds-brown);
}

.elementor-widget-taxonomy-filter.sds-pill.elementor-element .e-filter {
	justify-content: flex-start;
}

/* L'etichetta "Filtra per:" accanto alle pill non va a capo. */
.e-con:has(> .elementor-widget-taxonomy-filter) > .elementor-widget-text-editor {
	flex-shrink: 0;
	white-space: nowrap;
}

/* Su mobile le pill stanno su una riga che scorre, invece di occupare mezza schermata. */
@media (max-width: 767px) {
	.elementor-widget-taxonomy-filter.sds-pill.elementor-element .e-filter {
		flex-wrap: nowrap;
		margin-inline: calc(-1 * var(--sds-gutter));
		padding-inline: var(--sds-gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.elementor-widget-taxonomy-filter.sds-pill.elementor-element .e-filter-item {
		flex-shrink: 0;
	}
}

/* Articolo: immagine d'apertura con il taglio di Figma e link "Torna agli articoli". */
.sds-post-hero img {
	width: 100%;
	aspect-ratio: 1912 / 640;
	object-fit: cover;
	object-position: 50% 21%;
	border-radius: var(--sds-radius);
}

.sds-back .elementor-icon-list-item > a {
	gap: 16px;
}

.sds-back .elementor-icon-list-icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 2px solid var(--sds-brown);
	border-radius: 50%;
	transition: background-color var(--sds-fast) var(--sds-ease-out);
}

.sds-back .elementor-icon-list-icon svg {
	width: 16px;
	height: 16px;
	fill: none;
	color: var(--sds-brown);
	transform: rotate(90deg);
	transition: color var(--sds-fast) var(--sds-ease-out);
}

.sds-back a:hover .elementor-icon-list-icon {
	background: var(--sds-brown);
}

.sds-back a:hover .elementor-icon-list-icon svg {
	color: var(--sds-white);
}

/* Elenco con pallino (Icon List senza icona). */
.sds-dot-list .elementor-icon-list-item {
	gap: 16px;
}

.sds-dot-list .elementor-icon-list-item::before {
	content: "";
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border: 2px solid currentColor;
	border-radius: 50%;
	transition: background-color var(--sds-fast) var(--sds-ease-out);
}

.sds-dot-list .elementor-icon-list-item:hover::before {
	background: currentColor;
}

/* Colonna fissa durante lo scroll ("Approccio integrato"). */
@media (min-width: 1025px) {
	.sds-sticky {
		position: sticky;
		top: var(--sds-sticky-top, 140px);
		align-self: flex-start;
	}
}

/*
 * Comparsa allo scroll (main.js), in stile GSAP:
 * - i titoli grandi salgono parola per parola da sotto una maschera;
 * - le foto si scoprono dal basso e si assestano da un ingrandimento;
 * - gli altri blocchi salgono e si schiariscono.
 * Usa `translate`, `scale` e `clip-path` e mai `transform`, così non si somma alle
 * trasformazioni già presenti (colonna sfalsata, hover).
 */
.sds-reveal {
	opacity: 0;
	translate: 0 32px;
	transition:
		opacity 900ms var(--sds-ease-reveal) var(--sds-reveal-delay, 0ms),
		translate 1200ms var(--sds-ease-reveal) var(--sds-reveal-delay, 0ms);
}

.sds-reveal.is-in {
	opacity: 1;
	translate: none;
}

/* La maschera è un clip-path e non overflow: overflow sposterebbe la linea di base delle parole. */
.sds-split .sds-word {
	display: inline-block;
	clip-path: inset(-0.3em -0.3em -0.2em -0.3em);
}

.sds-split .sds-word > span {
	display: inline-block;
	translate: 0 115%;
	transition: translate 1100ms var(--sds-ease-reveal) calc(var(--sds-reveal-delay, 0ms) + var(--i) * 45ms);
}

.sds-split.is-in .sds-word > span {
	translate: none;
}

.sds-img-reveal img {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1300ms var(--sds-ease-reveal) var(--sds-reveal-delay, 0ms);
}

.sds-img-reveal.is-in img {
	clip-path: inset(0);
}

/* Dove la cornice ritaglia (foto incorniciate, card articolo) la foto si assesta anche in scala. */
:is(.sds-img-reveal.sds-photo, .sds-post-card .sds-img-reveal) img {
	scale: 1.2;
	transition:
		clip-path 1300ms var(--sds-ease-reveal) var(--sds-reveal-delay, 0ms),
		scale 1800ms var(--sds-ease-reveal) var(--sds-reveal-delay, 0ms),
		transform var(--sds-slow) var(--sds-ease-out);
}

:is(.sds-img-reveal.sds-photo, .sds-post-card .sds-img-reveal).is-in img {
	scale: var(--sds-photo-scale, 1);
}

/* Parallasse leggero delle foto incorniciate, dove il browser sa legarlo allo scroll. */
@supports (animation-timeline: view()) {
	.sds-photo {
		--sds-photo-scale: 1.1;
	}

	.sds-photo img {
		scale: var(--sds-photo-scale);
		animation: sds-parallax linear both;
		animation-timeline: view();
	}

	@keyframes sds-parallax {
		from { translate: 0 -4.5%; }
		to { translate: 0 4.5%; }
	}
}

/*
 * Card: all'hover si stringono appena, come se venissero premute. Usa `scale` perché
 * `transform` porta già lo sfalsamento della colonna e `translate` la comparsa allo scroll.
 */
.sds-stagger > .e-con,
.sds-carousel .swiper-slide > .e-con,
.sds-post-card {
	transition: scale var(--sds-fast) var(--sds-ease-out);
}

.sds-stagger > .e-con:hover,
.sds-carousel .swiper-slide > .e-con:hover,
.sds-post-card:is(:hover, :focus-within) {
	scale: 0.97;
}

/* Foto nelle cornici arrotondate: leggero ingrandimento all'hover. */
.sds-photo {
	overflow: hidden;
	border-radius: var(--sds-radius-sm);
}

.sds-photo img {
	transition: transform var(--sds-slow) var(--sds-ease-out);
}

.sds-photo:hover img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.sds-marquee .sds-marquee__track {
		animation: none;
	}

	body .elementor-widget-button .elementor-button,
	.sds-post-card .elementor-widget-theme-post-featured-image img,
	.sds-accordion .e-n-accordion-item-title,
	.sds-accordion .e-n-accordion-item-title-icon,
	.sds-header .elementor-nav-menu__container,
	.sds-header .elementor-nav-menu--dropdown li {
		transition: none;
	}

	body .elementor-widget-button .elementor-button:hover,
	.sds-post-card:hover .elementor-widget-theme-post-featured-image img,
	.sds-photo:hover img {
		transform: none;
	}

	.sds-photo img {
		scale: none;
		animation: none;
	}

	.sds-stagger > .e-con,
	.sds-carousel .swiper-slide > .e-con,
	.sds-post-card {
		scale: none;
	}
}