/* =========================================================================
   SAT Pinzolo – Alta Rendena · Componenti tema (Alpine Monolith)
   Mobile-first. Usa i token colore/spazio definiti in theme.json.
   ========================================================================= */

/* ---- Modello di box -----------------------------------------------------
   WordPress NON dichiara box-sizing globalmente: nel CSS del block library
   compare solo su singoli blocchi (.wp-block-archives, .wp-block-avatar, …).
   Senza questa regola ogni elemento del tema che mette width:100% insieme a
   del padding sborda della somma di padding e bordi, e dove il contenitore ha
   overflow:hidden (.sat-card, .sat-contact-box) l'eccedenza viene tagliata:
   è ciò che succedeva al pulsante delle card e ai campi del form contatti. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---- Scala tonale delle sezioni ------------------------------------------
   Le sezioni di una pagina si scuriscono progressivamente dall'alto verso il
   basso, come nel mockup design-contenuti/stich_homepage. La scala è definita
   una volta sola qui e riusata identica su tutte le pagine del tema. */
:root {
	--sat-tone-0: var(--wp--preset--color--surface-container-lowest);  /* #ffffff */
	--sat-tone-1: var(--wp--preset--color--surface-container-low);     /* #f5f3f7 */
	--sat-tone-2: var(--wp--preset--color--surface-container);         /* #efedf1 */
	--sat-tone-3: var(--wp--preset--color--surface-container-high);    /* #e9e7ec */
	--sat-tone-4: var(--wp--preset--color--surface-container-highest); /* #e3e2e6 */
	--sat-tone-5: var(--wp--preset--color--surface-dim);               /* #dbd9dd */
	--sat-tone-6: var(--wp--preset--color--inverse-surface);           /* #303033 */
}

/* ---- Material Symbols (icone) ------------------------------------------- */
.material-symbols-outlined,
.sat-icon {
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	vertical-align: middle;
}

/* ---- Icone messe dal CSS ------------------------------------------------
   Le sezioni che avevano un'icona la portavano dentro un blocco HTML
   personalizzato, insieme al testo: per cambiare un nome o un orario bisognava
   quindi mettere le mani nel markup. Spostando l'icona qui, in uno
   pseudo-elemento, quello che resta nel pattern è testo — cioè blocchi nativi
   che il redattore modifica dall'editor come qualsiasi altro paragrafo.

   Il nome dell'icona è una legatura del font Material Symbols: `content:
   "groups"` disegna il simbolo, non la parola, purché le legature siano
   attive. Ogni elemento dichiara la propria icona con --sat-ico. */
.sat-board__head::before,
.sat-upkeep::before,
.sat-person::before,
.sat-download::before,
.sat-warning::before,
.sat-parents__feature::before,
.sat-perk::before,
.sat-referente::before,
.sat-map__pin::before,
.sat-update-bar__item::before,
.sat-info::before,
.sat-legend__titolo::before,
.sat-sign--tabelle::before,
.sat-contact-box h2::before,
.sat-scheda__azioni .wp-block-button__link::before,
.sat-cta-card::before {
	content: var(--sat-ico, "");
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	display: inline-block;
	vertical-align: middle;
}

/* ---- Tipografia base ---------------------------------------------------- */
.sat-eyebrow {
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.75rem;
}
/* Titoletto e titolo stanno attaccati, ovunque: è la distanza di
   satpinzolo_section_head_blocks() (blockGap 0.25rem). Senza questa regola
   ogni coppia scritta a mano prendeva lo spazio del layout che la conteneva —
   24px in una colonna, 0 dove il titolo aveva un margine inline, 18px negli
   hero — e la stessa intestazione cambiava aspetto da sezione a sezione.
   L'!important serve a battere i margini inline salvati nelle pagine. */
.sat-eyebrow + .wp-block-heading,
.sat-hero__eyebrow + .wp-block-heading {
	margin-block-start: 0.25rem !important;
}
.sat-uppercase { text-transform: uppercase; letter-spacing: 0.15em; }

/* ---- Textures e decorazioni alpine -------------------------------------- */
.alpine-texture::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.04;
	pointer-events: none;
	z-index: 0;
}
.rock-texture {
	position: relative;
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10l5 2-3 8h10l-2-10 8-3-10-5 2-8-10 5z' fill='%23000' fill-opacity='0.05'/%3E%3Cpath d='M60 70l4 1-2 6h8l-1-8 6-2-8-4 1-6-8 4z' fill='%23000' fill-opacity='0.03'/%3E%3C/svg%3E");
}

/* ---- Separatore profilo montagne ----------------------------------------
   Il pattern satpinzolo/sep-mountain è un core/group alignfull (il core/html
   da solo non può essere alignfull: verrebbe tagliato a contentSize).
   Il colore del profilo NON è scritto nel pattern: un riferimento
   <!-- wp:pattern --> non può ricevere classi, quindi il separatore deduce
   la tonalità dalla sezione che lo segue. Così resta un pattern solo,
   riusabile, e riordinare le sezioni aggiorna i separatori da sé. */
.sat-sep {
	width: 100%;
	overflow: hidden;
	line-height: 0;
	display: block;
}
.sat-sep svg {
	width: 100%;
	height: clamp(48px, 8vw, 128px);
	display: block;
	fill: var(--sat-tone-1); /* fallback se :has() non è supportato */
}
/* Il block-gap di WordPress (1.5rem) fra un separatore e la sezione che lo
   segue lascerebbe passare una striscia del fondo pagina: qui va a zero.
   Vale anche attorno all'hero e alla barra avvisi — quest'ultima sparisce
   quando non ci sono avvisi, ma il suo block-gap resterebbe come uno stacco
   inspiegabile fra l'hero e la prima sezione. */
.sat-sep,
.sat-section + .sat-sep,
.sat-section + .sat-section,
.sat-hero + *,
.sat-update-bar,
.sat-update-bar + * {
	margin-block-start: 0;
}

/* La sezione che segue un separatore risale di 1px sopra di esso.
   Motivo: l'SVG ha preserveAspectRatio="none" e altezza in vw, quindi il suo
   bordo inferiore cade su un pixel frazionario e lascia passare una riga
   sub-pixel dello sfondo del separatore — cioè del tono PRECEDENTE. Fra due
   toni chiari non si nota; nell'unico passaggio chiaro→scuro della pagina
   Alpinismo Giovanile (tono-3 → tono-4) si leggeva come una linea grigia
   orizzontale. Il pixel coperto è già del colore della sezione, quindi la
   sovrapposizione non cambia nulla di visibile oltre a togliere la riga. */
.sat-sep + .sat-section {
	margin-block-start: -1px;
}

/* Il separatore porta lo sfondo della sezione che lo PRECEDE e disegna il
   profilo col colore di quella che lo SEGUE: è così che il profilo si legge
   come il passaggio da un piano all'altro invece che come un disegno appeso. */
.sat-section--tone-0 + .sat-sep { background: var(--sat-tone-0); }
.sat-section--tone-1 + .sat-sep { background: var(--sat-tone-1); }
.sat-section--tone-2 + .sat-sep { background: var(--sat-tone-2); }
.sat-section--tone-3 + .sat-sep { background: var(--sat-tone-3); }
.sat-section--tone-4 + .sat-sep { background: var(--sat-tone-4); }
.sat-section--tone-5 + .sat-sep { background: var(--sat-tone-5); }
.sat-section--tone-6 + .sat-sep { background: var(--sat-tone-6); }

.sat-sep:has(+ .sat-section--tone-0) svg { fill: var(--sat-tone-0); }
.sat-sep:has(+ .sat-section--tone-1) svg { fill: var(--sat-tone-1); }
.sat-sep:has(+ .sat-section--tone-2) svg { fill: var(--sat-tone-2); }
.sat-sep:has(+ .sat-section--tone-3) svg { fill: var(--sat-tone-3); }
.sat-sep:has(+ .sat-section--tone-4) svg { fill: var(--sat-tone-4); }
.sat-sep:has(+ .sat-section--tone-5) svg { fill: var(--sat-tone-5); }
.sat-sep:has(+ .sat-section--tone-6) svg { fill: var(--sat-tone-6); }

/* Il separatore che chiude la pagina si fonde nel footer. Il footer è un
   template part fuori da post-content, quindi non è un sibling del
   separatore: lo si riconosce dall'essere l'ultimo blocco del contenuto. */
.sat-sep:last-child svg { fill: var(--wp--preset--color--footer); }

/* Hero/contenuto attaccato all'header e footer attaccato all'ultima sezione.
   WordPress applica `:where(.wp-site-blocks) > * { margin-block-start: 1.5rem }`
   al wrapper .wp-block-template-part del footer, non al gruppo .sat-footer che
   sta dentro: azzerarlo nel markup del template part non basta, e fra l'ultimo
   profilo di montagna e il footer resterebbe una striscia di fondo pagina. */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-template-part { margin-block-start: 0; }

/* …e il footer risale di 1px sopra il separatore, per lo stesso motivo per cui
   lo fa ogni sezione: l'SVG ha preserveAspectRatio="none" e altezza in vw,
   quindi il suo bordo inferiore cade su un pixel frazionario e lascia passare
   una riga sub-pixel del fondo del separatore — cioè dell'ultima sezione.
   Sopra il footer scuro si leggeva come una linea chiara. */
.wp-site-blocks > .wp-block-template-part:last-child { margin-block-start: -1px; }

/* ---- Header / Nav glassmorphism ----------------------------------------- */
.wp-block-template-part.sat-header,
.sat-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.sat-nav {
	position: relative;
	background: rgba(255, 255, 255, 0.82);
	box-shadow: 0 10px 30px -12px rgba(0, 73, 128, 0.18);
}
/* Il blur è su uno pseudo-elemento: applicare backdrop-filter direttamente su .sat-nav
   creerebbe un containing block per i position:fixed, intrappolando l'overlay del menu mobile. */
.sat-nav::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
/* ---- Marchio SAT --------------------------------------------------------
   Gli SVG sono usati come immagini e non incorporati nel markup: tutti
   dichiarano al loro interno le classi `.st0`/`.st1` dell'esportazione da
   Illustrator, e incorporandoli nella stessa pagina si contenderebbero le
   regole — il logo bianco colorerebbe quello a colori, o viceversa.
   L'header usa `logo-sat-stemma.svg`, cioè la sola aquila con lo scudo:
   nel lockup completo (`logo-sat.svg`, 180×108) le tre righe di testo
   accanto allo stemma misurano meno di 5px con il marchio alto 2,75rem,
   quindi non si leggono e sporcano soltanto. Il footer, che ha spazio,
   tiene il lockup intero (`logo-sat-bianco.svg`).
   Lo stemma è 129,7×103 invece di 180×108: il rapporto passa da 1,67 a
   1,26 e il marchio si stringe da ~73px a ~55px, ma `width: auto` sotto
   se ne occupa da sé — nessuna regola qui dipende dalla sua larghezza. */
.sat-brand { flex: 0 0 auto; }
.sat-brand__logo { margin: 0; line-height: 0; }
.sat-brand__logo img {
	display: block;
	height: 2.75rem;
	width: auto;
}
@media (max-width: 782px) {
	/* Il nome resta anche qui. Nascondendolo, fra lo stemma e l'hamburger non
	   restava niente — la CTA sparisce già sotto i 1023px — e la barra si
	   leggeva come mezza vuota.

	   Il nome è un'opzione (`blogname`, stampata da core/site-title), quindi
	   può cambiare senza che nessuno tocchi questo foglio: la barra non deve
	   dipendere da quanto è lungo. Servono due cose e non una: `flex-shrink`
	   perché il marchio nasce `flex: 0 0 auto` e senza questo non si stringe
	   mai, e `min-width: 0` perché la dimensione minima automatica di un
	   elemento flex è il suo contenuto, che da sola rimetterebbe fuori
	   l'hamburger. Con entrambe, un nome lungo diventa dei puntini di
	   sospensione invece di far scorrere la pagina in orizzontale. */
	.sat-brand { min-width: 0; flex-shrink: 1; }
	.sat-brand .wp-block-site-title {
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.sat-brand__logo img { height: 2.25rem; }
}

.sat-nav .wp-block-site-title a,
.sat-nav .wp-block-site-title {
	color: var(--wp--preset--color--primary) !important;
	text-decoration: none;
	font-family: "Overpass", sans-serif;
	font-weight: 900;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	font-size: 1.25rem;
}
.sat-nav .wp-block-navigation {
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	/* Corpo delle voci. Sta QUI, sulla regola base condivisa, e non dentro il
	   blocco di una variante: le intestazioni sono quattro — la barra
	   predefinita di `parts/header.html` più vetro, riquadro e crinale — e
	   scritto in una sola resterebbero indietro le altre tre. Sotto i 1024px
	   questo valore è quello delle voci DENTRO l'overlay del menu, dove lo
	   spazio non manca; sopra, lo sostituisce la clamp fluida qui sotto. */
	font-size: 0.875rem;
}
/* Con Galleria e Notizie le voci di menu sono nove: spaziatura e corpo si
   restringono con la finestra invece di far andare il menu a capo. Valori
   fluidi e non a scalini, così non c'è una larghezza in cui il menu si rompe.

   Il corpo è stato alzato di circa il 9%% su richiesta (era
   `clamp(0.65rem, 0.44rem + 0.24vw, 0.8125rem)`): 11,4 px a 1440 invece di
   10,5, 12,7 px a 1920 invece di 11,6. Il pavimento della clamp è la misura
   che conta: sotto ~1370 px è lui a decidere, ed è lui a stabilire dove la
   barra deborda. Misurato con la barra più stretta, il riquadro a riposo
   (la pastiglia rientra di 1,5rem per lato): il debordo comincia a 1236 px,
   era 1205 px — la barra predefinita, il vetro e il crinale reggono fino a
   1181 px, erano 1150. Sotto i 1024 px comanda comunque l'overlay, quindi la
   fascia critica è 1024–1236 px ed era già rotta prima. I formati reali dei
   portatili — 1280, 1366, 1440, 1512, 1536, 1920 — restano tutti larghi, con
   il 1280 come il più stretto verificato. Alzare ancora il pavimento sposta
   quel numero sopra i 1280: se serve più corpo, va tolto spazio altrove
   (il nome del sito accanto al marchio occupa 353 px da solo). */
@media (min-width: 1024px) {
	.sat-nav .wp-block-navigation,
	.sat-nav .wp-block-navigation .wp-block-navigation__container {
		gap: clamp(0.55rem, -0.9rem + 1.7vw, 1.5rem);
	}
	.sat-nav .wp-block-navigation {
		font-size: clamp(0.7rem, 0.46rem + 0.28vw, 0.9rem);
		letter-spacing: clamp(0.02em, -0.13em + 0.17vw, 0.15em);
		flex-wrap: nowrap;
	}
	.sat-nav .wp-block-navigation-item__content { white-space: nowrap; }
	.sat-nav .sat-cta-pill .wp-block-button__link {
		white-space: nowrap;
		padding: 0.9rem clamp(1rem, -0.5rem + 1.7vw, 2rem);
		font-size: clamp(0.65rem, 0.44rem + 0.24vw, 0.8125rem);
	}
}
/* Le voci sono nel blu del logo, come il titolo del sito. Erano grigie
   (on-surface-variant) e il menu si leggeva come un elemento secondario. */
.sat-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); }
.sat-nav .wp-block-navigation-item__content:hover,
.sat-nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary-container);
}
.sat-nav .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	border-bottom: 2px solid var(--wp--preset--color--secondary-container);
	padding-bottom: 2px;
}
/* CTA giallo sempre visibile */
.sat-cta-pill .wp-block-button__link {
	background: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
	border-radius: 9999px;
	font-weight: 900;
	letter-spacing: 0.12em;
	/* La transizione sta sulla regola base e non sulla :hover: dichiarata solo
	   nella :hover animerebbe l'entrata e non l'uscita, perché al distacco del
	   puntatore la regola che la porta smette di applicarsi. */
	transition: transform 380ms var(--sat-curva), background 380ms var(--sat-curva);
}
.sat-cta-pill .wp-block-button__link:hover {
	background: var(--wp--preset--color--secondary-fixed);
	transform: translateY(-2px);
}

/* ---- Hero ---------------------------------------------------------------
   Questi due valori sono il ripiego, non la misura che si vede: `core/cover`
   scrive `min-height` come stile INLINE sul <div>, quindi in pagina comanda
   sempre il `minHeight` del blocco. Contano per un hero inserito dall'editor
   senza quell'attributo — ed è per questo che vanno tenuti allineati al
   markup (820 in `hero-home`, 480 in `hero-inner` e nei pattern di pagina):
   erano rimasti a 716 e 360, cioè alle altezze di prima. */
.sat-hero.wp-block-cover {
	min-height: 820px;
	align-items: center;
	justify-content: flex-start;
}
.sat-hero--small.wp-block-cover { min-height: 480px; }
.sat-hero .wp-block-cover__inner-container { max-width: 1280px; width: 100%; margin-inline: auto; }
.sat-hero__eyebrow {
	color: var(--wp--preset--color--secondary-fixed);
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.sat-hero h1, .sat-hero h2 {
	color: #fff !important;
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
	line-height: 0.92;
	letter-spacing: -0.03em;
}
.sat-btn-gold .wp-block-button__link {
	background: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
	font-weight: 900;
	box-shadow: 0 20px 40px -12px rgba(253, 208, 19, 0.5);
	/* Come per la pillola CTA: la transizione va sulla base, o l'ingrandimento
	   entra animato e torna di scatto. */
	transition: transform 380ms var(--sat-curva), box-shadow 380ms var(--sat-curva);
}
.sat-btn-gold .wp-block-button__link:hover { transform: scale(1.04); }

/* ---- Barra avvisi scorrevole -------------------------------------------- */
.sat-update-bar {
	background: var(--wp--preset--color--primary);
	color: #fff;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	padding-block: 0.75rem;
	border-block: 1px solid rgba(255, 255, 255, 0.1);
}
/* Senza avvisi attivi il Query Loop non produce nessun elemento, ma la barra è
   il suo contenitore: resterebbe una striscia blu vuota. Qui sparisce del tutto. */
.sat-update-bar:not(:has(.sat-update-bar__item)) { display: none; }

.sat-update-bar__track {
	display: inline-flex;
	align-items: center;
	gap: 3rem;
	margin: 0;
	padding-left: 100%;
	list-style: none;
	animation: sat-marquee 32s linear infinite;
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8125rem;
}
.sat-update-bar__track > li { margin: 0; }
.sat-update-bar__item { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; }
.sat-update-bar__item .wp-block-post-title {
	margin: 0;
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	line-height: inherit;
	white-space: nowrap;
}
.sat-update-bar__item { --sat-ico: "campaign"; }
.sat-update-bar__item::before { color: var(--wp--preset--color--secondary-container); }
.sat-update-bar:hover .sat-update-bar__track { animation-play-state: paused; }
@keyframes sat-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

/* ---- Card CTA colorate (4) ---------------------------------------------- */
/* Nelle card il titolo è già l'area cliccabile: la sottolineatura è rumore.
   Correzione mirata e non in theme.json elements.link, perché nei paragrafi
   la sottolineatura è l'unico segnale non cromatico che marca un link. */
/* `color: inherit` perché altrimenti la regola globale sui link riporta il
   titolo al blu primary anche sulle card blu e verde, dove deve essere bianco. */
.sat-cta-card a,
.sat-cta-card a:hover {
	text-decoration: none;
	color: inherit;
}
.sat-cta-card {
	position: relative;
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
	/* Con box-sizing:border-box la min-height comprende il padding: 16rem di
	   contenuto + 2rem sopra e sotto valevano 20rem di card. */
	min-height: 20rem;
	padding: 2rem;
	border-radius: 0.75rem;
	overflow: hidden;
	text-decoration: none;
	transition: transform 650ms var(--sat-curva), box-shadow 650ms var(--sat-curva);
	/* Lo spostamento in hover passa per --su e --zoom invece di essere scritto
	   qui dentro: il blocco "Movimento", in fondo al foglio, rimette le stesse
	   due variabili nella propria trasformazione, e due regole che si
	   contendessero `transform` con la stessa specificità si annullerebbero in
	   silenzio. Questa `transform` deve stare sulla regola BASE e non solo
	   sotto [data-moto="pieno"]: con JavaScript spento nessuno leggerebbe --su
	   e il sollevamento in hover sparirebbe del tutto. */
	transform: translateY(var(--su, 0px)) scale(var(--zoom, 1));
}
.sat-cta-card:hover { --su: -0.5rem; --zoom: 1; box-shadow: 0 30px 50px -20px rgba(0, 73, 128, 0.35); }
/* Le icone delle card sono pseudo-elementi: la card contiene solo il titolo,
   che resta un blocco modificabile dall.editor. */
/* Qui la `transform` resta esplicita: nessuna regola dell'entrata tocca lo
   pseudo-elemento, quindi non c'è contesa. Se leggesse --su, che eredita dalla
   card, l'icona si sposterebbe una seconda volta insieme alla card. */
.sat-cta-card::before { font-size: 3rem; opacity: 0.45; transition: transform 650ms var(--sat-curva); }
.sat-cta-card:hover::before { transform: scale(1.1) rotate(3deg); }
.sat-cta-card--blue { --sat-ico: "landscape"; }
.sat-cta-card--gold { --sat-ico: "badge"; }
.sat-cta-card--green { --sat-ico: "explore"; }
.sat-cta-card--outline { --sat-ico: "backpack"; }
/* L'icona segue l'argomento, non il colore: le card si riordinano dall'editor
   e il colore resta per posizione (blu, oro, verde, bianco) mentre il disegno
   deve restare quello della sezione a cui la card porta. Le icone per colore
   sopra restano come ripiego per una card senza classe d'argomento; queste,
   scritte dopo con la stessa specificità, le battono. Nell'editor la classe
   d'argomento si mette in Avanzate → Classi CSS aggiuntive. */
.sat-cta-card--attivita     { --sat-ico: "landscape"; }
.sat-cta-card--ag           { --sat-ico: "backpack"; }
.sat-cta-card--sentieri     { --sat-ico: "explore"; }
.sat-cta-card--tesseramento { --sat-ico: "badge"; }
/* Niente `position: relative` sul titolo: l'area cliccabile qui sotto è un
   ::after in position:absolute che deve ancorarsi alla CARD, e il primo
   antenato posizionato vince. Lo z-index continua a valere lo stesso perché
   la card è un contenitore flex e i suoi figli creano contesto di
   impilamento anche da statici. */
.sat-cta-card h3, .sat-cta-card .sat-cta-card__title {
	z-index: 1; margin: 0;
	font-family: "Overpass", sans-serif; font-weight: 900; font-size: 1.5rem; letter-spacing: -0.01em;
}

/* Tutta la card è cliccabile, non solo il titolo (issue #2). Il link resta
   uno solo — quello del titolo — e si "allarga" con uno pseudo-elemento che
   copre la card: niente anchor annidati, niente div reso cliccabile via JS,
   e per chi naviga da tastiera o con uno screen reader il collegamento resta
   esattamente quello di prima, con il titolo come testo del link. */
.sat-cta-card { cursor: pointer; }
.sat-cta-card .sat-cta-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}
/* Il focus da tastiera cade sul link, che è grande quanto una riga di testo:
   l'anello va disegnato attorno alla card, altrimenti non si capisce dove si
   è arrivati. */
.sat-cta-card:has(.sat-cta-card__title a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--secondary-container);
	outline-offset: 3px;
}
.sat-cta-card .sat-cta-card__title a:focus-visible { outline: none; }
.sat-cta-card--blue   { background: var(--wp--preset--color--primary-container); }
.sat-cta-card--blue, .sat-cta-card--blue h3, .sat-cta-card--blue::before { color: #fff; }
.sat-cta-card--gold   { background: var(--wp--preset--color--secondary-container); }
.sat-cta-card--gold, .sat-cta-card--gold h3, .sat-cta-card--gold::before { color: var(--wp--preset--color--on-secondary-container); }
.sat-cta-card--green  { background: var(--wp--preset--color--tertiary-container); }
.sat-cta-card--green, .sat-cta-card--green h3, .sat-cta-card--green::before { color: #fff; }
.sat-cta-card--outline {
	background: #fff;
	border: 4px solid var(--wp--preset--color--primary-container);
}
.sat-cta-card--outline h3, .sat-cta-card--outline::before { color: var(--wp--preset--color--primary-container); }

/* ---- Card attività + badge difficoltà ----------------------------------- */
.sat-card {
	background: #fff;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	transition: transform 650ms var(--sat-curva), box-shadow 650ms var(--sat-curva);
	height: 100%;
	/* Vedi .sat-cta-card: lo spostamento in hover passa per --su e --zoom, e
	   questa `transform` sta sulla base perché con JavaScript spento il
	   sollevamento sparirebbe — nessuno leggerebbe le due variabili. */
	transform: translateY(var(--su, 0px)) scale(var(--zoom, 1));
}
.sat-card:hover { --su: -0.5rem; --zoom: 1; box-shadow: 0 24px 40px -20px rgba(0, 73, 128, 0.28); }
.sat-card figure, .sat-card .wp-block-image { margin: 0; overflow: hidden; }
.sat-card figure img { width: 100%; height: 14rem; object-fit: cover; transition: transform 1400ms var(--sat-curva); }
.sat-card:hover figure img { transform: scale(1.08); }
.sat-card__body { padding: 1.75rem; }
.sat-card__body h3, .sat-card__body h4 { color: var(--wp--preset--color--on-surface); margin: 0 0 .75rem; }

.sat-badge {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: 0.25rem;
	font-family: "Overpass", sans-serif;
	font-weight: 900;
	font-size: 0.625rem;
	letter-spacing: 0.05em;
	line-height: 1.4;
}
.sat-badge--t   { background: var(--wp--preset--color--tertiary-fixed);  color: var(--wp--preset--color--on-tertiary-fixed); }
.sat-badge--e   { background: var(--wp--preset--color--tertiary-fixed);  color: var(--wp--preset--color--on-tertiary-fixed); }
.sat-badge--ee  { background: var(--wp--preset--color--primary-fixed);   color: var(--wp--preset--color--on-primary-fixed); }
.sat-badge--eea { background: var(--wp--preset--color--error-container);  color: var(--wp--preset--color--on-error-container); }
.sat-meta { color: var(--wp--preset--color--on-surface-variant); font-family: "Overpass", sans-serif; font-weight: 700; font-size: 0.75rem; }

/* Nelle card dinamiche la difficoltà stampa un badge per ogni livello e le
   Block Bindings svuotano quelli che non corrispondono: qui si nascondono.
   Stessa cosa per i meta non compilati, che lascerebbero un vuoto nel flex. */
.sat-badge:empty, .sat-meta:empty { display: none; }
.sat-card__meta { row-gap: 0.5rem; }

/* ---- Card attività: copertina con chip data e badge di stato -------------
   La data e i badge stanno SOPRA la foto, come nel mockup. Il contenitore
   della copertina è l'unico elemento posizionato: i figli si agganciano a lui
   e restano dentro il raggio di bordo della card. */
.sat-card__media { position: relative; line-height: 0; }
.sat-card__date {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: rgba(255, 255, 255, 0.94);
	border-radius: 0.625rem;
	padding: 0.4rem 0.6rem;
	text-align: center;
	line-height: 1.05;
	box-shadow: 0 2px 10px -4px rgba(0, 73, 128, 0.45);
}
.sat-card__day {
	font-family: "Overpass", sans-serif;
	font-weight: 900;
	font-size: 1.25rem;
	color: var(--wp--preset--color--primary);
	margin: 0;
}
/* ---- Micro-etichetta in maiuscoletto -------------------------------------
   La stessa idea era scritta nove volte lungo il foglio, con tre corpi
   (0.6/0.625/0.7rem) e quattro spaziature (0.08/0.1/0.12/0.14em), e due copie
   avevano perso il font-family per strada: cadevano su Public Sans mentre
   tutte le sorelle erano in Overpass. Si vedeva su una schermata sola — in
   /attivita/ convivono .sat-card__month e .sat-event-row__month, la stessa
   etichetta «MESE» sotto lo stesso numero di giorno, resa in due caratteri
   diversi.

   La definizione sta QUI, dove stava la prima delle nove: così tutti i blocchi
   che portano i delta le stanno sotto e vincono per ordine, senza doverne
   spostare nessuno. Sotto restano solo i delta veri, e l'unica deroga di
   aspetto è .sat-board__role — vedi il commento là. */
.sat-card__month,
.sat-card__meta-label,
.sat-when__label,
.sat-bank__voce,
.sat-person__role,
.sat-search__label,
.sat-datasheet__label,
.sat-event-row__month,
.sat-board__role {
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-surface-variant);
}
.sat-card__month { margin: 0; }
/* Senza data compilata le due righe restano vuote e il riquadro bianco
   galleggerebbe sulla foto senza contenuto. */
.sat-card__date:not(:has(.sat-card__day:not(:empty))) { display: none; }
.sat-card__flags {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	line-height: 1.4;
}
.sat-card__ambito {
	display: block;
	margin: 0 0 0.4rem;
}
.sat-card__ambito a { text-decoration: none; }
.sat-card__ambito:empty { display: none; }

.sat-card__meta-item { min-width: 0; }
.sat-card__meta-label { margin: 0; }
.sat-card__meta-value {
	font-family: "Overpass", sans-serif;
	font-weight: 800;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--on-surface);
	margin: 0;
}
/* Un meta non compilato nasconde anche la sua etichetta: la binding svuota il
   valore ma l'etichetta è testo statico e resterebbe lì da sola. */
.sat-card__meta-item:has(.sat-card__meta-value:empty) { display: none; }
.sat-card__meta:not(:has(.sat-card__meta-item)) { display: none; }

/* ---- Filtri a pill delle attività ---------------------------------------
   Sono link, non pulsanti: il filtro sta nell'indirizzo, quindi la pagina
   filtrata si può condividere e la paginazione se lo porta dietro. */
.sat-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.5rem;
	width: 100%;
	margin-bottom: var(--wp--preset--spacing--60);
}
/* Le pill stanno al centro ma il contenitore è largo quanto la sezione: così
   ci stanno su una riga sola invece di andare a capo a metà elenco. */
.sat-filters__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}
.sat-filter {
	display: inline-block;
	padding: 0.6rem 1.15rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--surface-container-high);
	color: var(--wp--preset--color--on-surface-variant);
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.sat-filter:hover {
	background: var(--wp--preset--color--surface-dim);
	color: var(--wp--preset--color--primary);
}
.sat-filter--on,
.sat-filter--on:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

/* Lo switch prossime/tutte non è un filtro fra tanti: è una scelta fra due
   stati, e si legge come tale — due metà di una stessa pastiglia. */
.sat-switch {
	display: inline-flex;
	padding: 0.25rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--surface-container-high);
}
.sat-switch__opt {
	padding: 0.45rem 1rem;
	border-radius: 9999px;
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--on-surface-variant);
	white-space: nowrap;
}
.sat-switch__opt--on {
	background: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
}

/* Rimando alla pagina intera dalla vista di una sola sezione. */
.sat-back {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sat-back a { color: var(--wp--preset--color--primary); text-decoration: none; }
.sat-back a:hover { text-decoration: underline; }

/* Ancora di sezione: l'header è sticky, quindi un salto a #notizie
   finirebbe sotto la barra senza questo margine di risalita. */
.sat-anchor {
	display: block;
	height: 0;
	scroll-margin-top: 6rem;
}

/* ---- Come iscriversi: i tre passi ---------------------------------------
   Il numero è un fantasma grigio dietro il titolo, come nel mockup, e la
   barra dorata a sinistra lega i tre riquadri in una sequenza. */
.sat-step {
	position: relative;
	background: var(--wp--preset--color--surface-container-low);
	border-left: 4px solid var(--wp--preset--color--secondary-container);
	border-radius: 1rem;
	padding: 1.75rem 2rem 1.75rem 5.5rem;
	margin-bottom: 1.25rem;
	overflow: hidden;
}
/* Il numero è uno pseudo-elemento e non un <span> nel markup: così il
   riquadro contiene solo blocchi nativi, modificabili dall'editor. */
.sat-step::before {
	content: attr(data-num);
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	font-family: "Overpass", sans-serif;
	font-weight: 900;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--wp--preset--color--outline-variant);
}
.sat-step--1::before { content: "01"; }
.sat-step--2::before { content: "02"; }
.sat-step--3::before { content: "03"; }
.sat-step h3 { margin-top: 0; }

.sat-when {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--on-surface-variant);
}
.sat-when p { margin: 0; }
.sat-when__label { margin-right: 0.35rem; }

.sat-bank { margin-top: 1rem; }
.sat-bank__riga { align-items: baseline; margin-bottom: 0.35rem; }
.sat-bank__voce {
	margin: 0;
	flex: 0 0 auto;
	min-width: 6rem;
}
.sat-bank__dato {
	margin: 0;
	flex: 1 1 10rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--on-surface);
}
.sat-bank__dato--iban {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	background: var(--wp--preset--color--surface-container-highest);
	padding: 0.1rem 0.4rem;
	border-radius: 0.25rem;
	word-break: break-all;
}
.sat-bank__note {
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
	font-style: italic;
	color: var(--wp--preset--color--on-surface-variant);
}

/* ---- Vantaggi del socio e CTA, colonna di destra ------------------------ */
.sat-perks {
	background: var(--wp--preset--color--primary);
	border-radius: 1.25rem;
	color: var(--wp--preset--color--on-primary);
}
.sat-perks h3 { color: #fff !important; margin-top: 0; }
/* L'icona è lo pseudo-elemento del riquadro, posizionata a sinistra: il
   contenuto sono due paragrafi normali, che si modificano dall'editor. */
.sat-perk {
	position: relative;
	padding-left: 2.15rem;
	margin-top: 1.25rem;
}
.sat-perk::before {
	position: absolute;
	left: 0;
	top: 0.1rem;
	color: var(--wp--preset--color--secondary-container);
	font-size: 1.375rem;
}
.sat-perk--assicurazione { --sat-ico: "security"; }
.sat-perk--rifugi        { --sat-ico: "cabin"; }
.sat-perk--cai           { --sat-ico: "hiking"; }
.sat-perk--rivista       { --sat-ico: "menu_book"; }
.sat-perk--convenzioni   { --sat-ico: "handshake"; }
.sat-perk__titolo {
	margin: 0 0 0.1rem;
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	color: #fff;
	font-size: 0.9375rem;
}
.sat-perk__testo {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--primary-fixed);
}
.sat-join {
	background: var(--wp--preset--color--surface-container-high);
	border-radius: 1.25rem;
}
/* "Pronto a partire?" in coda ai tre passi: una fascia larga quanto i passi,
   con il loro stesso grigio e il loro bordo dorato, testo a sinistra e pulsante a destra, che
   chiude la sequenza come invito all'azione. Si aggancia alla posizione (dopo un .sat-step) e non a
   una classe in più, così basta spostare il blocco nell'editor perché prenda
   questa forma. Il gruppo è "constrained": diventando griglia, i margini auto
   !important del core sui figli si sveglierebbero e li centrerebbero — vedi
   CLAUDE.md — quindi vanno azzerati con la stessa forza. */
.sat-step ~ .sat-join {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "titolo pulsante" "nota pulsante";
	align-items: center;
	column-gap: 1.5rem;
	row-gap: 0.25rem;
	background: var(--wp--preset--color--surface-container-low);
	border-left: 4px solid var(--wp--preset--color--secondary-container);
	border-radius: 1rem;
}
.sat-step ~ .sat-join > * {
	margin: 0 !important;
	max-width: none !important;
	text-align: left !important;
}
.sat-step ~ .sat-join > .sat-eyebrow { grid-area: titolo; font-size: 0.875rem; }
.sat-step ~ .sat-join > .wp-block-buttons { grid-area: pulsante; justify-content: flex-end; }
.sat-step ~ .sat-join > p:not(.sat-eyebrow) { grid-area: nota; }
@media (max-width: 600px) {
	.sat-step ~ .sat-join {
		grid-template-columns: 1fr;
		grid-template-areas: "titolo" "nota" "pulsante";
		row-gap: 0.75rem;
	}
	.sat-step ~ .sat-join > .wp-block-buttons { justify-content: flex-start; }
}

/* ---- Avviso scadenze ----------------------------------------------------
   È l'unico blocco della pagina che deve fermare l'occhio: sfondo d'allerta
   e barra rossa a sinistra, senza usare il rosso per il testo. */
.sat-warning {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	background: var(--wp--preset--color--error-container);
	border-left: 6px solid var(--wp--preset--color--on-error-container);
	border-radius: 1rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
}
.sat-warning { --sat-ico: "warning"; }
.sat-warning::before {
	flex: 0 0 auto;
	font-size: 2rem;
	color: var(--wp--preset--color--on-error-container);
}
.sat-warning__eyebrow { color: var(--wp--preset--color--on-error-container); margin: 0; }
.sat-warning__title { color: var(--wp--preset--color--on-error-container) !important; margin: 0; }
.sat-warning p { color: var(--wp--preset--color--on-surface); margin: 0; }

/* ---- Atto costitutivo ---------------------------------------------------
   L'ingrandimento è il lightbox nativo di core/image: l'attributo sta nel
   markup del blocco, qui c'è solo la cornice. */
.sat-atto img {
	width: 100%;
	box-shadow: 0 18px 40px -24px rgba(0, 73, 128, 0.5);
	cursor: zoom-in;
}

/* ---- Segnaletica: i due riquadri esplicativi ---------------------------
   Il segnavia bianco-rosso-bianco e l'icona della tabella sono disegnati dal
   CSS: nel pattern restano titolo e testo, cioè blocchi modificabili. */
.sat-sign {
	position: relative;
	background: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: 1rem;
	padding: 1.5rem 1.5rem 1.5rem 5.25rem;
	margin-bottom: 1.25rem;
}
/* `content` NON sta qui, sta sui due modificatori. Su .sat-sign::before
   colpirebbe anche --tabelle, che dalla regola condivisa delle icone riceve
   `content: var(--sat-ico)`: stessa specificità (0,1,1), e questa regola è
   scritta 800 righe più in basso, quindi il vuoto vincerebbe e l'icona
   sparirebbe senza nessun errore. Qui restano le tre dichiarazioni che i due
   modificatori hanno davvero in comune. */
.sat-sign::before {
	position: absolute;
	left: 1.5rem;
	top: 1.5rem;
}
.sat-sign--segnavia::before {
	content: "";
	width: 3rem;
	height: 3rem;
	border-radius: 0.375rem;
	background: #fff;
	border-top: 12px solid #ba1a1a;
	border-bottom: 12px solid #ba1a1a;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.sat-sign--tabelle { --sat-ico: "signpost"; }
.sat-sign--tabelle::before {
	font-size: 2.5rem;
	color: var(--wp--preset--color--primary);
}
.sat-sign__titolo {
	margin: 0 0 0.35rem;
	font-family: "Overpass", sans-serif;
	font-weight: 900;
	color: var(--wp--preset--color--primary) !important;
}
.sat-sign__testo {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--on-surface-variant);
}

/* ---- Legenda dei gradi di difficoltà ------------------------------------ */
.sat-legend {
	background: var(--wp--preset--color--surface-container-lowest);
	border-left: 8px solid var(--wp--preset--color--secondary-container);
	border-radius: 1.25rem;
	padding: 2rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.sat-legend__titolo {
	--sat-ico: "assignment_late";
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	font-family: "Overpass", sans-serif;
	font-weight: 900;
	color: var(--wp--preset--color--on-surface) !important;
}
.sat-legend__titolo::before {
	color: var(--wp--preset--color--secondary);
}
.sat-legend__voce { margin-bottom: 1.25rem; }
.sat-legend__voce:last-child { margin-bottom: 0; }
.sat-legend__sigla {
	flex: 0 0 auto;
	min-width: 2.75rem;
	text-align: center;
	font-size: 0.8125rem;
	margin: 0;
}
.sat-legend__nome {
	margin: 0;
	display: block;
	color: var(--wp--preset--color--primary);
	font-family: "Overpass", sans-serif;
	font-weight: 700;
}
.sat-legend__testo {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--on-surface-variant);
}

/* ---- Manutenzione sentieri: riquadri con icona a pastiglia -------------- */
/* Il riquadro è un semplice paragrafo: l'icona a pastiglia è lo pseudo-elemento,
   così il testo resta un blocco che si modifica dall'editor. */
.sat-upkeep {
	background: var(--wp--preset--color--surface-container-lowest);
	border-radius: 1rem;
	padding: 1.5rem;
	height: 100%;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--on-surface-variant);
}
.sat-upkeep::before {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 9999px;
	margin-bottom: 1rem;
	font-size: 1.375rem;
}
.sat-upkeep--blu   { --sat-ico: "forest"; }
.sat-upkeep--oro   { --sat-ico: "handyman"; }
.sat-upkeep--verde { --sat-ico: "volunteer_activism"; }
.sat-upkeep--rosso { --sat-ico: "favorite"; }
.sat-upkeep--blu::before   { background: var(--wp--preset--color--primary-fixed);   color: var(--wp--preset--color--primary); }
.sat-upkeep--oro::before   { background: var(--wp--preset--color--secondary-fixed); color: var(--wp--preset--color--secondary); }
.sat-upkeep--verde::before { background: var(--wp--preset--color--tertiary-fixed);  color: var(--wp--preset--color--tertiary); }
.sat-upkeep--rosso::before { background: var(--wp--preset--color--error-container); color: var(--wp--preset--color--on-error-container); }

/* ---- Riga referente ------------------------------------------------------
   Nomi e cognomi non sono ancora tutti disponibili: la riga esiste comunque,
   con i puntini al posto del dato, così chi rilegge la pagina vede cosa
   manca invece di non vedere niente. */
.sat-person {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	width: auto;
	background: var(--wp--preset--color--surface-container-lowest);
	border-radius: 9999px;
	padding: 0.7rem 1.25rem;
	margin: var(--wp--preset--spacing--50) 0 0;
	--sat-ico: "badge";
}
.sat-person::before { color: var(--wp--preset--color--primary); font-size: 1.25rem; }
.sat-person__role { margin: 0; }
.sat-person__name {
	margin: 0;
	font-family: "Overpass", sans-serif;
	font-weight: 800;
	font-size: 0.875rem;
	color: var(--wp--preset--color--on-surface);
}

/* ---- Riga referente + documento ----------------------------------------
   Il referente resta a sinistra come nella sezione sopra, il documento va a
   destra: sono due informazioni diverse e non vanno lette in fila. */
.sat-doc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--50);
}
.sat-doc .sat-person { margin-top: 0; }

/* ---- Link di download di un documento ----------------------------------
   Uno solo per tutto il sito: prima ogni punto in cui si offriva un PDF se lo
   disegnava da sé. La variante --off è per il documento non ancora
   disponibile, e non è un <a>: un link che non porta da nessuna parte è
   peggio di un pulsante spento. */
.sat-download {
	--sat-ico: "picture_as_pdf";
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	width: auto;
	background: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
	border-radius: 9999px;
	padding: 0.75rem 1.5rem;
	margin: 0;
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.sat-download:hover {
	background: var(--wp--preset--color--secondary);
	color: #fff;
}
.sat-download::before { font-size: 1.25rem; }
.sat-download--off,
.sat-download--off:hover {
	background: var(--wp--preset--color--surface-container-high);
	color: var(--wp--preset--color--on-surface-variant);
	cursor: not-allowed;
}
.sat-shot img { width: 100%; }

/* Elementi che devono occupare tutta la larghezza della sezione: dentro un
   gruppo constrained si fermerebbero a contentSize e finirebbero centrati.
   Per .sat-doc non è un dettaglio estetico: senza, il `space-between` non ha
   spazio in cui separare il referente dal pulsante e i due restano appaiati
   in mezzo alla riga. */
.sat-section .sat-prose,
.sat-section .sat-doc,
.sat-section .sat-filters { max-width: none; }
/* Le note sotto una tabella (Tesseramento: cosa comprendono le quote, i
   supplementi) sono larghe quanto la tabella che commentano, non strette a
   contentSize come il resto del gruppo constrained. Vale per ogni paragrafo
   che segue la tabella, così una nota aggiunta dall'editor si allinea da sé. */
.sat-section .sat-table-wrap ~ p { max-width: none; }

/* ---- Box referente (Alpinismo Giovanile) --------------------------------
   Prende il posto delle due foto affiancate del vecchio layout: nel mockup è
   il blocco giallo che chiude la sezione di apertura. */
.sat-referente {
	background: var(--wp--preset--color--secondary-container);
	border-radius: 1.5rem;
	text-align: center;
}
/* L'icona del referente è lo pseudo-elemento del riquadro: nel pattern non
   resta nessun HTML personalizzato, solo blocchi modificabili dall'editor. */
.sat-referente { --sat-ico: "hiking"; }
.sat-referente::before {
	margin: 0 auto 1rem;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.25rem;
	color: var(--wp--preset--color--secondary-container);
}
.sat-referente__role { color: var(--wp--preset--color--on-secondary-container); margin: 0; }
.sat-referente__name { color: var(--wp--preset--color--on-primary-fixed) !important; }
/* Il box può contenere più persone (Sentieri: due referenti). Il nome sta
   attaccato al ruolo — lo fa la regola titoletto/titolo — e vicino ai propri
   contatti; fra una persona e la successiva c'è più aria, così si capisce
   quale email appartiene a chi. */
.sat-referente .sat-referente__name { margin-block-end: 0; }
.sat-referente .sat-referente__name + .sat-referente__links { margin-block-start: var(--wp--preset--spacing--30); }
.sat-referente .sat-referente__links + .sat-referente__name { margin-block-start: var(--wp--preset--spacing--50); }
.sat-referente__links .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--primary);
	border-radius: 9999px;
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.8125rem;
	padding: 0.75rem 1.25rem;
	width: 100%;
	text-align: center;
	word-break: break-word;
}
.sat-referente__links .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/* ---- Info per i genitori (AG) -------------------------------------------
   Riquadro unico diviso in due: la colonna blu con le garanzie, il fondo
   chiaro con kit list e iscrizioni. Le due colonne devono avere la stessa
   altezza, quindi il blockGap fra loro è zero e i bordi li dà il contenitore. */
.sat-parents {
	border-radius: 1.5rem;
	overflow: hidden;
	background: var(--wp--preset--color--surface-container-lowest);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.sat-parents .wp-block-columns { margin-bottom: 0; }
.sat-parents__aside {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}
.sat-parents__aside h2 { color: #fff !important; }
.sat-parents__aside p { color: var(--wp--preset--color--primary-fixed); }
.sat-parents__feature {
	position: relative;
	padding-left: 2.25rem;
	margin-top: 1.5rem;
}
.sat-parents__feature::before {
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--secondary-container);
	font-size: 1.5rem;
}
.sat-parents__feature--assicurazione   { --sat-ico: "verified_user"; }
.sat-parents__feature--accompagnatori  { --sat-ico: "group"; }
.sat-parents__titolo {
	margin: 0 0 0.15rem;
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	color: var(--wp--preset--color--secondary-container);
}
.sat-parents__testo {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--primary-fixed);
	line-height: 1.5;
}
.sat-kit { padding-left: 1.1rem; }
.sat-kit li { color: var(--wp--preset--color--on-surface-variant); margin-bottom: 0.35rem; }
.sat-price {
	gap: 1rem;
	background: var(--wp--preset--color--surface-container);
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	margin: 0 0 0.75rem;
}
.sat-price__voce { margin: 0; font-weight: 700; font-size: 0.875rem; }
.sat-price__importo { margin: 0; font-weight: 900; color: var(--wp--preset--color--primary); }

/* ---- Ricerca fra i sentieri --------------------------------------------
   Un form GET con la ricerca fatta dal server: vale su tutti i sentieri e
   non solo su quelli già a schermo, e il risultato è un indirizzo che si può
   condividere. Il JavaScript del plugin (ricerca-sentieri.js) evita solo la
   ricarica: chiede la stessa pagina e ne sostituisce la tabella. */
.sat-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--wp--preset--spacing--50);
}
.sat-search__label { margin-right: 0.25rem; }
.sat-search__input {
	flex: 1 1 16rem;
	max-width: 24rem;
	background: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: 9999px;
	padding: 0.65rem 1.1rem;
	font-family: "Public Sans", sans-serif;
	font-size: 0.875rem;
	color: var(--wp--preset--color--on-surface);
}
.sat-search__input:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}
.sat-search__go {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border: 0;
	border-radius: 9999px;
	padding: 0.65rem 1.5rem;
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease;
}
.sat-search__go:hover { background: var(--wp--preset--color--primary-container); }
.sat-search__reset {
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.sat-search__reset:hover { text-decoration: underline; }
.sat-section .sat-search { max-width: none; }
/* La regione che annuncia ai lettori di schermo i risultati della ricerca
   senza ricarica: presente nel flusso per aria-live, invisibile a schermo. */
.sat-search__stato {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.sat-trails[aria-busy="true"] { opacity: .6; transition: opacity .15s ease; }

/* ---- Paginazione dei Query Loop ----------------------------------------- */
.sat-pagination {
	gap: 0.35rem;
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.8125rem;
}
.sat-pagination a,
.sat-pagination .page-numbers {
	padding: 0.45rem 0.8rem;
	border-radius: 0.5rem;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}
.sat-pagination a:hover {
	background: var(--wp--preset--color--surface-container-high);
}
.sat-pagination .current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

/* ---- Card dentro un Query Loop ------------------------------------------
   Le card della griglia hanno testi di lunghezza diversa: il corpo diventa una
   colonna flex e il pulsante finale va in fondo, così i pulsanti restano
   allineati fra loro invece di seguire l'altezza dell'estratto.

   Discendente e non figlio: `sat-cards` sta su core/post-template, che stampa
   una <ul> i cui figli diretti sono i <li class="wp-block-post">. La card è
   dentro il <li>, mai figlia della lista, quindi scritte con `>` queste regole
   non agganciavano niente (issue #12) — lo stesso inciampo già corretto per
   .sat-news-card nella #10. Il `>` resta solo fra .sat-card e .sat-card__body,
   dove il rapporto di figlio diretto è vero e vale la pena di dirlo.

   Niente `height: 100%` qui: la porta già la regola base di .sat-card, che
   aggancia; riscriverla la dichiarerebbe due volte per lo stesso elemento. */
.sat-cards .sat-card { display: flex; flex-direction: column; }
.sat-cards .sat-card > .sat-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
/* `auto` assorbe lo spazio libero e spinge il pulsante in fondo, ma vale 0
   quando spazio libero non ce n'è: nella card più alta della riga il distacco
   di 1rem che .sat-read-more porta dalla sua regola base sparirebbe e il
   pulsante finirebbe attaccato al testo. Lo rimette chi lo precede, qualunque
   blocco sia — l'estratto nelle notizie, la griglia dei meta nelle attività —
   perché il margine inferiore non è `auto` e nessuno se lo mangia. */
.sat-cards .sat-card .sat-read-more { margin-top: auto; }
.sat-cards .sat-card .sat-card__body > :has(+ .sat-read-more) { margin-bottom: 1rem; }

/* Il rovescio del contesto flex, e non è un dettaglio: il layout `constrained`
   del core dà a OGNI figlio `margin-left/right: auto !important` (più un
   max-width pari a contentSize). In flusso di blocco quei margini valgono 0 e
   nessuno se ne accorge; dentro un contenitore flex diventano margini
   automatici veri — assorbono lo spazio libero, il figlio si restringe al
   proprio contenuto e si centra. Senza queste due righe la correzione
   centrava la data delle notizie e riduceva le copertine verticali a una
   colonnina alta 14rem e larga quanto la foto. L'`!important` è obbligato: lo
   usa la regola del core, come già fa la galleria bento più sotto. */
.sat-cards .sat-card > *,
.sat-cards .sat-card > .sat-card__body > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---- Card senza copertina ------------------------------------------------
   `core/post-featured-image` non stampa nulla quando l'immagine manca: la
   card resta mozza, e prima o poi la redazione pubblicherà una notizia senza
   foto. Al suo posto va un pannello con il profilo di montagna del sito, così
   il buco diventa una scelta invece di un errore. Il selettore riconosce
   l'assenza del blocco con :has(), che il tema usa già per i separatori.

   Due selettori e non uno perché le card sono fatte in due modi. Dove la
   copertina è figlia diretta della card — notizie, rifugi, album — il pannello
   ne prende il posto nella colonna. La card attività avvolge invece la
   copertina in .sat-card__media, che è l'unico elemento posizionato e ospita
   il chip della data e i badge in assoluto: lì il pannello va DENTRO quel
   riquadro, o la data si ritroverebbe schiacciata sul bordo di un contenitore
   collassato a line-height: 0. La prima forma si tira fuori dalle card che
   hanno un .sat-card__media, o il pannello finirebbe stampato due volte.

   L'altezza è quella della copertina che sostituisce: 14rem come le notizie,
   13rem dentro .sat-card__media come le attività. Rifugi (12rem) e album
   (16rem) prendono la misura delle notizie — non c'è niente in pagina da cui
   il foglio possa dedurre la loro, e la griglia pareggia comunque l'altezza
   delle card: quello che cambia è solo dove cade la linea fra pannello e
   testo. */
.sat-cards .sat-card:not(:has(.wp-block-post-featured-image)):not(:has(.sat-card__media))::before,
.sat-cards .sat-card__media:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	height: var(--sat-pannello-h, 14rem);
	flex: 0 0 auto;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,100 L150,40 L300,90 L450,20 L600,100 L750,30 L900,90 L1050,40 L1200,100 L1200,120 Z' fill='%23ffffff' fill-opacity='0.55'/%3E%3C/svg%3E") bottom / 100% 60% no-repeat,
		linear-gradient(160deg, var(--wp--preset--color--primary-fixed) 0%, var(--wp--preset--color--surface-container-high) 100%);
}
.sat-cards .sat-card__media { --sat-pannello-h: 13rem; }
.sat-cards .wp-block-post-featured-image { margin: 0; }
.sat-cards .wp-block-post-featured-image img { width: 100%; object-fit: cover; }
.sat-cards .wp-block-post-title { margin: 0 0 .5rem; }
.sat-cards .wp-block-post-title a { text-decoration: none; }
.sat-cards .wp-block-post-excerpt { margin: 0 0 1rem; }
.sat-cards .wp-block-post-excerpt__excerpt { margin: 0; }

/* ---- Scheda dati (pagine singole di attività e rifugi) ------------------- */
.sat-datasheet {
	background: var(--wp--preset--color--surface-container-low);
	border-radius: 1rem;
	padding: 1.5rem 1.75rem;
}
/* La scheda dati su più colonne (issue #2): in una pagina larga sette righe
   impilate lasciavano mezzo schermo vuoto. Le colonne partono da tablet: su
   telefono una riga per campo resta la forma più leggibile. */
@media (min-width: 601px) {
	.sat-datasheet--cols-2,
	.sat-datasheet--cols-3 {
		display: grid;
		gap: 0 2.5rem;
	}
	.sat-datasheet--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sat-datasheet--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.sat-datasheet--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* In griglia il bordo inferiore di ogni riga farebbe da separatore anche
   sotto l'ultima riga di ciascuna colonna: lo si tiene, ma il :last-child
   che lo toglieva vale solo per la disposizione a colonna singola. */
.sat-datasheet__row {
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-block: 0.65rem;
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}
.sat-datasheet__row:last-child { border-bottom: 0; }
/* Un campo non compilato lascerebbe una riga con la sola etichetta. */
.sat-datasheet__row:has(.sat-datasheet__value:empty) { display: none; }
/* Era a 0.7rem, senza un motivo che si riuscisse a ricostruire: entra nel
   gruppo e scende a 0.625rem come le sorelle. */
.sat-datasheet__label { margin: 0; }
.sat-datasheet__value {
	margin: 0;
	font-weight: 700;
	color: var(--wp--preset--color--on-surface);
	text-align: right;
}

/* Link alle iscrizioni sotto la scheda: la binding restituisce l'anchor già
   formato, oppure niente se il campo è vuoto. Senza contenuto il paragrafo
   sparisce, così non resta un pulsante che non porta da nessuna parte. */
.sat-iscrizioni:empty { display: none; }
.sat-iscrizioni { margin-top: var(--wp--preset--spacing--50); }
.sat-iscrizioni a {
	display: inline-block;
	background: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
	border-radius: 9999px;
	padding: 1rem 2rem;
	font-family: "Overpass", sans-serif;
	font-weight: 900;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .2s ease;
}
.sat-iscrizioni a:hover { transform: scale(1.04); color: var(--wp--preset--color--on-secondary-container); }

/* ---- Riga evento in elenco (serate) ------------------------------------- */
.sat-event-row {
	background: #fff;
	border-radius: 1rem;
	padding: 1.25rem 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
	margin-block-start: 1rem;
}
.sat-event-row__date {
	text-align: center;
	/* La min-width comprende il padding: 60px di contenuto + 0.6rem per lato. */
	min-width: 80px;
	flex: 0 0 auto;
	background: var(--wp--preset--color--surface-container-low);
	border-radius: 0.75rem;
	padding: 0.6rem;
}
.sat-event-row__day {
	font-family: "Overpass", sans-serif;
	font-weight: 900;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	margin: 0;
}
/* Era a 0.6rem, peso 900 e senza font-family: cadeva su Public Sans mentre
   .sat-card__month, la stessa etichetta nella stessa schermata di /attivita/,
   era in Overpass. Metà del difetto visibile stava qui. */
.sat-event-row__month { margin: 0.2rem 0 0; }
.sat-event-row .wp-block-post-title { margin: 0; }
.sat-event-row .wp-block-post-title a { text-decoration: none; }

/* ---- Bottone outline ----------------------------------------------------
   Due usi diversi con lo stesso aspetto, che prima condividevano anche la
   geometria e per questo si rompevano a vicenda:

   1. `.sat-read-more` e `.sat-btn-outline` messo sul CONTENITORE
      `.wp-block-buttons`: pulsante a tutta larghezza in fondo a una card.
   2. `.sat-btn-outline` messo sul SINGOLO `.wp-block-button` dentro una riga
      di pulsanti: deve stare in linea con i fratelli, quindi niente
      width:100% e niente margin-top (era quello a far scendere di 1rem
      "Iscrizione online" rispetto a "Scarica il modulo").

   Il padding sottrae i 2px di bordo a quello del pulsante pieno definito in
   theme.json (1rem/2rem): così i due pulsanti di una riga hanno la stessa
   altezza esatta invece di differire di 4px. */
.sat-btn-outline .wp-block-button__link,
.sat-read-more {
	text-align: center;
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 2px solid rgba(0, 73, 128, 0.15);
	border-radius: 9999px;
	padding: calc(1rem - 2px) calc(2rem - 2px);
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
/* Uso 1 — a tutta larghezza. */
.sat-read-more,
.wp-block-buttons.sat-btn-outline .wp-block-button,
.wp-block-buttons.sat-btn-outline .wp-block-button__link {
	display: block;
	width: 100%;
}
.sat-read-more,
.wp-block-buttons.sat-btn-outline { margin-top: 1rem; }

.sat-btn-outline .wp-block-button__link:hover,
.sat-read-more:hover { background: var(--wp--preset--color--primary); color: #fff; }

/* ---- News card ---------------------------------------------------------- */
/* `height: 100%` come su .sat-card, e per lo stesso motivo. L'elemento della
   griglia è il <li> che core/post-template stampa attorno alla card, non la
   card: il <li> si stira all'altezza della riga, il riquadro bianco dentro
   restava alto quanto il suo contenuto, e due notizie con titoli di lunghezza
   diversa producevano due riquadri di altezza diversa dentro due celle
   uguali. Il troncamento qui sotto tiene il pareggio anche quando il titolo
   cresce. */
.sat-news-card {
	background: rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: 1rem;
	padding: 1.5rem;
	height: 100%;
	transition: transform 650ms var(--sat-curva), background 650ms var(--sat-curva);
	/* Vedi .sat-cta-card: --su e --zoom al posto di una `transform` esplicita,
	   sulla regola base perché senza JavaScript nessuno le leggerebbe. */
	transform: translateY(var(--su, 0px)) scale(var(--zoom, 1));
}
.sat-news-card:hover { background: rgba(255, 255, 255, 0.9); --su: -0.25rem; }
/* Niente width/height qui: il blocco immagine porta già le sue misure (180×180)
   e il layout flex della card mette la foto a sinistra e il testo a destra,
   come nel mockup. La regola che forzava `width:100%; height:12rem` mandava
   l'immagine a tutta riga e faceva collassare la card in verticale. */
.sat-news-card img { border-radius: 0.75rem; object-fit: cover; }
.sat-news-card .wp-block-post-featured-image { margin: 0; flex: 0 0 auto; }
/* Titolo ed estratto troncati a righe fisse: senza, un titolo lungo alzerebbe
   la riga della griglia e la card accanto guadagnerebbe un vuoto pari alla
   differenza. Si aggancia alle classi del core e non ne introduce di nuove
   nel namespace del tema: il pattern non ha bisogno di essere toccato.

   Le quattro dichiarazioni vanno insieme: Chrome normalizza il `display`
   calcolato a `flow-root` e il taglio funziona lo stesso, ma toglierne una
   sola lo disattiva in silenzio — l'elemento torna alto quanto il testo senza
   che niente lo segnali. */
.sat-news-card .wp-block-post-title,
.sat-news-card .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sat-news-card .wp-block-post-title { -webkit-line-clamp: 2; }
.sat-news-card .wp-block-post-excerpt__excerpt { -webkit-line-clamp: 3; }
/* Il core rende l'ancora del titolo `inline-block`. Un inline-block impagina
   le proprie righe per conto suo, quindi l'h3 ne vede UNA sola, alta quanto
   tutto il titolo: il clamp non ha righe da contare e non taglia niente. Qui
   l'ancora torna in linea e le righe tornano quelle dell'h3. */
.sat-news-card .wp-block-post-title a { display: inline; }
@media (max-width: 600px) {
	.sat-news-card img { width: 100%; height: 12rem; }
}

/* ---- Galleria bento -----------------------------------------------------
   Un solo selettore: `.wp-block-gallery.is-style-sat-bento`, lo stile blocco
   registrato in functions.php, che il redattore applica alla Galleria nativa.
   La vecchia versione statica basata su classi sat- non è più usata da nessun
   pattern ed è stata rimossa. Il core dà alla galleria un layout flex proprio: va sovrascritto
     con `display: grid`, e le sue variabili di gap azzerate perché qui il
     passo lo detta la griglia. */

.wp-block-gallery.is-style-sat-bento {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
/* I selettori del blocco portano `figure` esplicito perché il core stila le
   immagini annidate con `.wp-block-gallery.has-nested-images figure.wp-block-image img`
   (tre classi + due elementi): con un selettore più corto vincerebbero le sue
   `width:auto` / `height:auto` e le foto resterebbero alla dimensione
   intrinseca invece di riempire la cella della griglia. */

.wp-block-gallery.is-style-sat-bento figure.wp-block-image {
	margin: 0;
	border-radius: 1rem;
	overflow: hidden;
	flex-basis: auto;
}
.wp-block-gallery.is-style-sat-bento img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1400ms var(--sat-curva);
	display: block;
}
/* !important, a malincuore ma per un motivo preciso: il core dimensiona le
   figure e le immagini della galleria con regole che portano `:not(#…)`
   apposta per essere difficili da sovrascrivere
   (`.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)`
   vale un ID di specificità). Sono larghezze in percentuale pensate per la
   riga flex del core; qui il passo lo detta la griglia, quindi vanno
   neutralizzate. Senza !important servirebbe replicare l'hack dell'ID, che è
   più fragile e meno leggibile. */
.wp-block-gallery.is-style-sat-bento figure.wp-block-image {
	width: 100% !important;
	max-width: 100% !important;
}
.wp-block-gallery.is-style-sat-bento figure.wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	transition: transform 1400ms var(--sat-curva);
	display: block;
}

.wp-block-gallery.is-style-sat-bento figure.wp-block-image:hover img { transform: scale(1.05); }

/* Il riquadro grande. Nella versione statica è una classe scritta a mano;
   nel blocco è semplicemente la prima immagine, così il redattore ottiene il
   bento senza dover conoscere nessuna classe: gli basta mettere per prima la
   foto che vuole grande. */
.wp-block-gallery.is-style-sat-bento figure.wp-block-image:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
@media (min-width: 782px) {
	.wp-block-gallery.is-style-sat-bento {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 242px;
	}
}

/* ---- Sezioni generiche -------------------------------------------------- */
.sat-section { padding-block: clamp(3rem, 7vw, 6rem); }

/* I contenuti delle sezioni usano la larghezza "wide" (1280px) e non il contentSize (768px):
   un gruppo "constrained" limiterebbe i figli a contentSize; qui li lasciamo riempire la sezione. */
.sat-section .wp-block-columns,
.sat-section .sat-table-wrap,
.sat-section .wp-block-table,
.sat-section .wp-block-gallery.is-style-sat-bento,
.sat-section .sat-trails,
.sat-section .wp-block-query,
.sat-section .wp-block-post-template,
.rock-texture .wp-block-columns,
.rock-texture .sat-table-wrap {
	max-width: none;
}
.sat-section > .wp-block-group.alignwide > .wp-block-group,
.rock-texture.alignwide > .wp-block-group {
	max-width: none;
}
/* Scurimento progressivo: tone-0 in cima, tone-6 a ridosso del footer.
   Sette gradini e non cinque: le pagine più lunghe (Sentieri e Rifugi ne ha
   sei di sezioni) non entravano nella scala, e i due grigi intermedi che
   mancavano — surface-container e surface-container-high — erano già in
   theme.json senza essere usati da nessuno. */
.sat-section--tone-0 { background: var(--sat-tone-0); }
.sat-section--tone-1 { background: var(--sat-tone-1); }
.sat-section--tone-2 { background: var(--sat-tone-2); }
.sat-section--tone-3 { background: var(--sat-tone-3); }
.sat-section--tone-4 { background: var(--sat-tone-4); }
.sat-section--tone-5 { background: var(--sat-tone-5); }
.sat-section--tone-6 { background: var(--sat-tone-6); }

/* Sul fondo scuro il testo va invertito: senza questa regola i titoli
   restano blu primary (theme.json elements.heading) e diventano illeggibili. */
.sat-section--tone-6 {
	color: var(--wp--preset--color--on-inverse-surface);
}
.sat-section--tone-6 h1,
.sat-section--tone-6 h2,
.sat-section--tone-6 h3,
.sat-section--tone-6 h4 {
	color: #fff;
}
.sat-section--tone-6 p,
.sat-section--tone-6 li {
	color: var(--wp--preset--color--on-inverse-surface);
}
.sat-section--tone-6 a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--secondary-container);
}
/* Le card interne restano su fondo chiaro, come nel mockup. */
.sat-section--tone-6 .sat-card h1,
.sat-section--tone-6 .sat-card h2,
.sat-section--tone-6 .sat-card h3,
.sat-section--tone-6 .sat-card h4 {
	color: var(--wp--preset--color--on-surface);
}
.sat-section--tone-6 .sat-card p,
.sat-section--tone-6 .sat-card li {
	color: var(--wp--preset--color--on-surface-variant);
}
.sat-section--tone-6 .sat-card a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--primary);
}

/* ---- Griglie a righe: elenco sentieri e tabella quote --------------------
   Due congegni diversi, un aspetto solo. L'elenco dei sentieri è un Query
   Loop che emette <ul>/<li> (aggiungere un sentiero non richiede di toccare
   l'HTML del pattern); la tabella delle quote è un core/table vero, che la
   redazione modifica cella per cella dall'editor. Il DISEGNO però è uno —
   riquadro bianco arrotondato, testata blu maiuscoletta, zebratura, riga
   illuminata sotto il puntatore — e da qui in avanti è scritto una volta
   sola, coi due selettori affiancati. Erano due copie, e avevano già
   cominciato a divergere: la tabella aveva perso per strada il fondo bianco
   che i sentieri dichiarano, e con lui la zebratura (vedi sotto).

   Il gancio della tabella è il <figure> (.sat-table-wrap) e non la <table>:
   la className del blocco sta negli attributi JSON e sopravvive al
   salvataggio, mentre una classe scritta a mano sulla <table> rende il
   blocco NON VALIDO — la save() di core/table ricostruisce quell'attributo
   da colore, bordo e has-fixed-layout e da nient'altro, e l'editor smette
   di far modificare le celle finché non si fa il recupero.

   Le regole interne alla tabella sono qualificate
   .sat-table-wrap.wp-block-table (0,2,x) e non .sat-table-wrap (0,1,x): il
   foglio di core dichiara
   .wp-block-table td, .wp-block-table th { border: 1px solid; padding: .5em }
   a 0,1,1, e a pari specificità deciderebbe l'ordine di caricamento. */

/* Il riquadro. Il fondo è dichiarato qui e non lasciato alla sezione che
   ospita la griglia: senza di esso la zebratura non esiste, perché
   surface-container-low (#f5f3f7) è lo stesso colore di --sat-tone-1, il
   tono della sezione delle quote — contrasto misurato fra riga pari e riga
   dispari 1,00:1. Una griglia che cambia aspetto a seconda di dove la si
   mette non è una griglia, è un caso particolare.
   overflow: hidden è ciò che taglia la testata blu sul raggio degli angoli:
   per questo la tabella non ha bisogno di border-collapse: separate — che
   fra l'altro non si è mai applicato, perdendo a specificità contro il
   border-collapse: collapse di core. */
.sat-trails,
.sat-table-wrap {
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
	background: var(--wp--preset--color--surface-container-lowest);
	font-family: "Public Sans", sans-serif;
}

/* Spaziatura delle celle, comune alle due griglie. */
.sat-trails__head,
.sat-trails__row,
.sat-table-wrap.wp-block-table th,
.sat-table-wrap.wp-block-table td {
	padding: 0.9rem 1rem;
}

/* Testata blu maiuscoletta. */
.sat-trails__head,
.sat-table-wrap.wp-block-table thead th {
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-family: "Overpass", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	text-align: left;
}

/* Zebratura e riga sotto il puntatore. */
.sat-trails__body > li:nth-child(even) .sat-trails__row,
.sat-table-wrap.wp-block-table tbody tr:nth-child(even) {
	background: var(--wp--preset--color--surface-container-low);
}
.sat-trails__body > li:hover .sat-trails__row,
.sat-table-wrap.wp-block-table tbody tr:hover {
	background: var(--wp--preset--color--primary-fixed);
}

/* Prima colonna: è il nome della riga, non un dato fra gli altri. */
.sat-trails__num,
.sat-table-wrap.wp-block-table tbody td:first-child {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* ---- Solo sentieri: la griglia a sette colonne --------------------------- */
.sat-trails__head,
.sat-trails__row {
	display: grid;
	grid-template-columns: 5rem minmax(10rem, 1.4fr) 1fr 1fr 7rem 6rem 10rem;
	gap: 1rem;
	align-items: center;
}
.sat-trails__head p { margin: 0; }
.sat-trails__body { list-style: none; margin: 0; padding: 0; }
.sat-trails__body > li { margin: 0; }
/* Il layout "flow" di WordPress mette un margin-block-start a ogni figlio:
   dentro la griglia diventerebbe uno scalino sopra ogni cella. */
.sat-trails__row > *,
.sat-trails__head > *,
.sat-trails__cell { margin: 0; }
.sat-trails__num { margin: 0; }
.sat-trails__diff { gap: 0.35rem; }
/* Il nome è il titolo del post (core/post-title) e porta alla scheda del
   sentiero: stesso peso del numero, senza il sottolineato del link. */
.sat-trails__name {
	font-family: "Public Sans", sans-serif;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--on-surface);
}
.sat-trails__name a { color: inherit; text-decoration: none; }
.sat-trails__name a:hover,
.sat-trails__name a:focus-visible { color: var(--wp--preset--color--primary); text-decoration: underline; }

/* Sotto i 900px le sette colonne non ci stanno: l'intestazione sparisce e ogni
   riga diventa una scheda con le etichette davanti al valore. Qui la si può
   togliere del tutto (display: none) perché non c'è semantica tabellare da
   perdere: è un <ul> di <li>, non una <table>. Nella tabella delle quote la
   stessa mossa costerebbe le intestazioni di colonna — vedi più sotto. */
@media (max-width: 900px) {
	.sat-trails__head { display: none; }
	.sat-trails__row {
		grid-template-columns: 1fr;
		gap: 0.35rem;
		padding: 1rem 1.25rem;
	}
	.sat-trails__body > li + li .sat-trails__row {
		border-top: 1px solid var(--wp--preset--color--outline-variant);
	}
	.sat-trails__num { font-size: 1.1rem; }
	.sat-trails__name { font-size: 1.05rem; }
	/* nth-of-type conta i <p> della riga: 1 è il numero, 2 il nome (che
	   un'etichetta non la vuole: è il titolo della scheda), poi le celle. */
	.sat-trails__row > .sat-trails__cell:nth-of-type(3)::before { content: "Da: "; }
	.sat-trails__row > .sat-trails__cell:nth-of-type(4)::before { content: "A: "; }
	.sat-trails__row > .sat-trails__cell:nth-of-type(5)::before { content: "Dislivello: "; }
	.sat-trails__row > .sat-trails__cell:nth-of-type(6)::before { content: "Stato: "; }
	/* È la stessa micro-etichetta del gruppo scritto in alto, ma non può
	   entrarci: vive dentro questa media query e uscirne significherebbe
	   stamparla anche sulla tabella larga, dove le intestazioni sono le
	   celle vere. I valori sono quindi allineati a mano — se cambiano lì,
	   vanno cambiati anche qui. */
	.sat-trails__row > .sat-trails__cell::before {
		font-family: "Overpass", sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		font-size: 0.625rem;
		color: var(--wp--preset--color--on-surface-variant);
	}
}

/* ---- Solo quote: quel che core/table impone e va spento -------------------
   Il tema non dichiara bordi, li disegna core: border: 1px solid senza
   colore prende currentColor, e siccome la prima colonna è blu la griglia
   usciva blu a sinistra e quasi nera nel resto, più una barra scura da 3px
   sotto l'intestazione (thead { border-bottom: 3px solid }).
   Il margine è quello del <figure> e della <table> dentro di lui: qui il
   riquadro è il contenitore stesso. */
.sat-table-wrap.wp-block-table table,
.sat-table-wrap.wp-block-table thead,
.sat-table-wrap.wp-block-table th,
.sat-table-wrap.wp-block-table td {
	border: 0;
}
.sat-table-wrap,
.sat-table-wrap.wp-block-table table {
	margin: 0;
}

/* La colonna degli importi. Sono cifre da confrontare, non testo: in Public
   Sans le cifre hanno larghezze diverse (l'1 misura 8,56px, il 5 ne misura
   13,50) e le virgole decimali dei cinque importi cadevano a x che variavano
   di 4,47px; tabular-nums le incolonna e l'allineamento a destra fa il resto.
   width: 1% con nowrap è il modo di dire a table-layout: auto "larga quanto
   il suo contenuto": la colonna era 231,6px per un testo di ~70, e il numero
   che il lettore cerca galleggiava a sinistra di 145px di vuoto. Lo spazio
   che si libera va a Requisiti, che è la colonna che ne aveva bisogno.
   L'aggancio è :last-child, cioè "l'ultima colonna è quella numerica": chi
   ne aggiungesse una dopo gli importi si porterebbe dietro il trattamento. */
.sat-table-wrap.wp-block-table thead th:last-child,
.sat-table-wrap.wp-block-table tbody td:last-child {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}
.sat-table-wrap.wp-block-table tbody td:last-child {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* L'accento: la riga del socio ordinario. Velatura d'oro e listello sul
   fianco, l'unica enfasi di tutta la tabella.
   ATTENZIONE — l'evidenza è agganciata a tbody tr:first-child, non a una
   classe: core/table non conserva classi sulle righe, quindi il patto vive
   soltanto qui, in questo commento. LA RIGA DA EVIDENZIARE DEVE STARE PER
   PRIMA. Chi riordinasse le righe dall'editor sposterebbe l'evidenza senza
   accorgersene, e non c'è niente nel markup che glielo dica.
   Niente pastiglia "Consigliato": sarebbe testo generato da content, e in
   questo progetto il testo sta nei blocchi, dove i redattori lo cambiano. */
.sat-table-wrap.wp-block-table tbody tr:first-child {
	background: color-mix(in srgb, var(--wp--preset--color--secondary-container) 14%, transparent);
}
.sat-table-wrap.wp-block-table tbody tr:first-child:hover {
	background: color-mix(in srgb, var(--wp--preset--color--secondary-container) 26%, transparent);
}
.sat-table-wrap.wp-block-table tbody tr:first-child td:first-child {
	box-shadow: inset 4px 0 0 var(--wp--preset--color--secondary-container);
}

/* Sotto i 700px le tre colonne non si schiantano contro un bordo: si
   schiacciano. Misurato prima dell'impilamento: a 360px l'eccedenza
   orizzontale era ZERO — quindi l'overflow-x: auto che stava qui non si
   attivava mai, era un ripiego inerte, ed è stato tolto — mentre l'altezza
   cresceva dell'82%, "Requisiti" andava a quattro righe e "Studenti 18-25
   anni" si spezzava sul trattino. La risposta è la stessa dei sentieri:
   ogni riga diventa una scheda.

   MA il congegno non è lo stesso. Applicando alla <table> la ricetta dei
   sentieri — display: block su table/tbody/tr/td e thead { display: none } —
   l'albero di accessibilità misurato in Chrome passa da
   {table 1, rowgroup 1, row 6, cell 15, columnheader 3} a
   {table 1, row 5, cell 15}: le intestazioni di colonna spariscono e con
   loro l'associazione cella/intestazione. Provate le varianti una per una,
   il colpevole è esattamente thead { display: none }, non il display: block.
   Quindi la testata non si toglie, si porta fuori campo, e a impilare basta
   display: grid sul <tr>: tutti i ruoli restano al loro posto. */
@media (max-width: 700px) {
	.sat-table-wrap.wp-block-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.sat-table-wrap.wp-block-table tbody tr {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.35rem;
		padding: 1rem 1.25rem;
	}
	.sat-table-wrap.wp-block-table tbody tr + tr {
		border-top: 1px solid var(--wp--preset--color--outline-variant);
	}
	.sat-table-wrap.wp-block-table tbody td,
	.sat-table-wrap.wp-block-table tbody td:last-child {
		width: auto;
		padding: 0;
		text-align: left;
		white-space: normal;
	}
	.sat-table-wrap.wp-block-table tbody td:first-child { font-size: 1.1rem; }
	/* Le etichette di colonna tornano davanti ai valori.
	   LIMITE DA CONOSCERE: sono scritte qui, nel CSS, e non lette dalle <th>.
	   Con un core/table non c'è alternativa — il blocco non espone attributi
	   data- sulle celle e content non sa leggere il testo di un altro
	   elemento. Conseguenza pratica: RINOMINARE UN'INTESTAZIONE DALL'EDITOR
	   NON AGGIORNA L'ETICHETTA IMPILATA, va cambiata anche qui sotto.
	   Stessa limitazione dei sentieri, dichiarata perché chi rinomina la
	   trovi. */
	.sat-table-wrap.wp-block-table tbody td:nth-of-type(2)::before { content: "Requisiti: "; }
	.sat-table-wrap.wp-block-table tbody td:nth-of-type(3)::before { content: "Quota annuale: "; }
	.sat-table-wrap.wp-block-table tbody td::before {
		font-family: "Overpass", sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		font-size: 0.7rem;
		color: var(--wp--preset--color--on-surface-variant);
	}
	/* Impilata, la scheda è la riga: il listello d'oro passa dalla prima
	   cella al <tr>, o segnerebbe soltanto la prima delle tre celle. */
	.sat-table-wrap.wp-block-table tbody tr:first-child td:first-child {
		box-shadow: none;
	}
	.sat-table-wrap.wp-block-table tbody tr:first-child {
		box-shadow: inset 4px 0 0 var(--wp--preset--color--secondary-container);
	}
}

/* lista vantaggi con icone */

/* box rimando (es. sat.tn.it) */
.sat-callout {
	background: var(--wp--preset--color--primary-fixed);
	border-left: 6px solid var(--wp--preset--color--secondary-container);
	border-radius: 0.75rem;
	padding: 2rem;
}

/* Variante a numeri: fondo blu pieno e testo bianco. Sta subito dopo la regola
   base come tutte le varianti di questa famiglia — hanno la stessa
   specificità, quindi vince quella scritta dopo. */
.sat-stat {
	background: var(--wp--preset--color--primary);
	border-left-color: var(--wp--preset--color--secondary-container);
}
.sat-stat h3 { color: #fff !important; }
.sat-stat .sat-eyebrow { color: var(--wp--preset--color--primary-fixed) !important; }

/* Variante a fondo blu pieno, nel blu del logo: niente barra gialla a
   sinistra, pulsante a destra. Sta subito dopo la regola base e non altrove
   nel file: hanno la stessa specificità, quindi vince quella scritta dopo. */
.sat-callout--blue {
	background: var(--wp--preset--color--primary);
	border-left: 0;
	border-radius: 1.25rem;
	padding: clamp(2rem, 4vw, 3rem);
}
.sat-callout--blue h3 { color: #fff !important; }
.sat-callout--blue p { color: var(--wp--preset--color--primary-fixed); margin: 0; }
/* Il testo del callout non deve fermarsi a contentSize dentro il gruppo
   constrained che lo contiene, o resta stretto a metà del riquadro. */
.sat-callout--blue > .wp-block-group { max-width: none; }

/* ---- Footer ------------------------------------------------------------- */
.sat-footer {
	position: relative;
	background: var(--wp--preset--color--footer);
	color: var(--wp--preset--color--on-footer);
}
.sat-footer h2, .sat-footer h3 { color: #fff; }
.sat-footer__logo { margin: 0 0 1.25rem; line-height: 0; }
.sat-footer__logo img { display: block; width: 11rem; max-width: 100%; height: auto; }
/* `background` è in elenco anche se nessun link del footer cambia sfondo: le
   icone social sono link dentro il footer, quindi questo selettore (0,1,1) è
   più specifico del loro (.sat-social-icon, 0,1,0) e la transizione che vale
   per loro è questa. Senza `background` qui, il tondo delle icone passa all'oro
   di scatto qualunque cosa dichiari .sat-social-icon. */
.sat-footer a { color: var(--wp--preset--color--on-footer); text-decoration: none; transition: color 380ms var(--sat-curva), transform 380ms var(--sat-curva), background 380ms var(--sat-curva); }
.sat-footer a:hover { color: var(--wp--preset--color--secondary-container); }
.sat-footer > * { position: relative; z-index: 1; }

/* Il profilo di montagna che introduce il footer è l'ultimo .sat-sep della
   pagina: il footer non ne porta uno proprio, altrimenti se ne vedrebbero due. */

.sat-footer__brand { letter-spacing: 0.12em; }
.sat-footer__address { color: var(--wp--preset--color--on-footer); }

/* Titoli di colonna in oro, come nel mockup. */
.sat-footer__heading {
	color: var(--wp--preset--color--secondary-container);
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 0.5rem;
}
.sat-footer__list { list-style: none; padding-left: 0; margin: 0; }
.sat-footer__list li { margin-block: 0.6rem; }
.sat-footer__links { max-width: none; flex: 1 1 auto; }
.sat-footer__social { text-align: right; }
.sat-footer__icons { display: flex; gap: 0.75rem; margin: 0; justify-content: flex-start; }
.sat-footer__copy { color: rgba(203, 213, 225, 0.65); }

/* Credit dello studio, accanto al copyright. Su telefono va a capo da solo
   invece di stringere la riga del copyright. */
.sat-footer__credit { white-space: nowrap; }
.sat-footer__credit::before { content: "·"; margin: 0 0.5rem; opacity: 0.5; }
.sat-footer__credit a { text-decoration: none; }
.sat-footer__credit a:hover { color: var(--wp--preset--color--secondary-container); }
@media (max-width: 480px) {
	.sat-footer__credit { display: block; }
	.sat-footer__credit::before { content: none; }
}

/* Silhouette decorativa in basso a destra, appena percettibile. */
.sat-footer__ridge {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(400px, 45vw);
	opacity: 0.1;
	pointer-events: none;
	line-height: 0;
	z-index: 0;
}
.sat-footer__ridge svg { width: 100%; height: auto; display: block; fill: #fff; }

@media (min-width: 782px) {
	.sat-footer__social { text-align: right; }
	.sat-footer__icons { justify-content: flex-end; }
}

.sat-social-icon {
	width: 2.5rem; height: 2.5rem; border-radius: 9999px;
	background: rgba(255, 255, 255, 0.08);
	display: inline-flex; align-items: center; justify-content: center;
	/* Niente `transition` qui, ed è deliberato: le icone social sono link
	   dentro il footer, quindi `.sat-footer a` (0,1,1) batte `.sat-social-icon`
	   (0,1,0) e la loro transizione è quella — vedi il commento su quella
	   regola. Una dichiarazione qui non aggancerebbe nessun elemento del sito:
	   sembrerebbe di aver regolato qualcosa senza averlo fatto. */
}
.sat-social-icon:hover { background: var(--wp--preset--color--secondary-container); color: var(--wp--preset--color--footer); transform: translateY(-2px); }

/* ---- Box "Scrivici" (contatti) ------------------------------------------
   Classe propria e non .sat-card: quella ha height:100% e in una colonna
   accanto alla mappa stirava il box, lasciando sotto il pulsante Invia un
   vuoto grande quanto mezza schermata. */
.sat-contact-box {
	position: relative;
	background: var(--wp--preset--color--surface-container-low);
	border-radius: 1.25rem;
	overflow: hidden;
	padding: clamp(1.75rem, 3vw, 2.5rem);
}
/* Marcatore oro in alto, come il segnavia di un sentiero. Sta su ::before e
   l'icona del box su ::after: gli pseudo-elementi sono due e servono a due
   cose diverse — la prima versione li aveva messi tutti e due su ::before, e
   il secondo blocco annullava il primo. */
.sat-contact-box::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 5px;
	background: var(--wp--preset--color--secondary-container);
}
/* L'icona sta sopra il titolo "Scrivici": è il ::before dell'intestazione,
   che è già un blocco nativo. Su ::after del box finirebbe in fondo, e
   riportarla in cima richiederebbe di rendere flex tutto il contenitore —
   cioè cambiare il layout del form per una decorazione. */
.sat-contact-box h2 { --sat-ico: "forum"; }
.sat-contact-box h2::before {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 1.75rem;
	color: var(--wp--preset--color--primary);
}

/* ---- Form (contatti) ---------------------------------------------------- */
.sat-form { display: flex; flex-direction: column; gap: 0.35rem; }
.sat-form label {
	color: var(--wp--preset--color--on-surface-variant);
	margin-top: 0.75rem;
}
.sat-form input, .sat-form textarea, .sat-form select {
	width: 100%;
	background: var(--wp--preset--color--surface-container-highest);
	border: 2px solid transparent;
	border-radius: 0.75rem;
	padding: 0.9rem 1rem;
	font-family: "Public Sans", sans-serif;
	font-size: 1rem;
	color: var(--wp--preset--color--on-surface);
	transition: background .2s ease, border-color .2s ease;
}
.sat-form textarea { resize: vertical; min-height: 8rem; }
.sat-form input::placeholder, .sat-form textarea::placeholder {
	color: var(--wp--preset--color--outline);
}
/* A fuoco il campo si schiarisce e prende il bordo "fantasma" blu. */
.sat-form input:focus, .sat-form textarea:focus, .sat-form select:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface-container-lowest);
}
.sat-form button[type="submit"] {
	width: 100%;
	margin-top: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	cursor: pointer;
	border: 0;
}
.sat-form button[type="submit"] .material-symbols-outlined { font-size: 1.1rem; }

/* Honeypot dell'antispam: fuori dallo schermo invece che display:none, perché
   parecchi bot saltano i campi nascosti con display:none o visibility:hidden
   ma compilano tutto il resto. Chi naviga non lo vede e non ci finisce mai
   sopra col tab (tabindex="-1" nel markup). */
.sat-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Esito dell'invio, sopra il form. */
.sat-form__esito {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.1rem;
	border-radius: 0.75rem;
	border-left: 4px solid;
	font-family: "Public Sans", sans-serif;
	font-size: 0.95rem;
}
.sat-form__esito--ok {
	background: var(--wp--preset--color--tertiary-fixed);
	border-left-color: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--on-tertiary-fixed);
}
.sat-form__esito--ko {
	background: var(--wp--preset--color--error-container);
	border-left-color: var(--wp--preset--color--error);
	color: var(--wp--preset--color--on-error-container);
}

/* ---- Mappa responsive --------------------------------------------------- */
.sat-map iframe { width: 100%; min-height: 380px; border: 0; border-radius: 0.75rem; display: block; }

/* ---- Mappa smerigliata --------------------------------------------------
   Più alta della precedente, così la colonna di sinistra chiude alla stessa
   altezza del box direttivo a destra, e con la pastiglia dell'indirizzo che
   ci galleggia sopra come nel mockup. Il vetro è sulla pastiglia, non sulla
   mappa: sfocare la mappa la renderebbe illeggibile. */
.sat-map--frost { position: relative; }
/* Le tessere standard di OpenStreetMap sono colorate: le si porta ai toni
   chiari della pagina con un filtro sul solo strato delle tessere, non sul
   contenitore, così il segnaposto resta blu. Il filtro è moderato apposta —
   spinto oltre renderebbe illeggibili i nomi delle vie. */
.sat-map__canvas .leaflet-tile-pane { filter: grayscale(1) brightness(1.04) contrast(0.92); }
.sat-map__canvas {
	min-height: 30rem;
	border-radius: 1.25rem;
	overflow: hidden;
	background: var(--wp--preset--color--surface-container);
}
.sat-map__link {
	margin: 0.5rem 0 0;
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sat-map__link a { color: var(--wp--preset--color--primary); text-decoration: none; }
.sat-map__link a:hover { text-decoration: underline; }

/* Il segnaposto è disegnato qui e non è un file immagine: quello predefinito
   di Leaflet va copiato accanto alla libreria e, mancando, lascerebbe di nuovo
   una mappa senza punto — il problema da cui siamo partiti. */
.sat-map__marker span {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--wp--preset--color--primary);
	border: 3px solid #fff;
	box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.45);
}
/* Leaflet disegna i propri riquadri sopra tutto: qui vanno sotto l'header
   sticky, o scorrendo la pagina la mappa gli passa davanti. */
.sat-map .leaflet-pane,
.sat-map .leaflet-top,
.sat-map .leaflet-bottom { z-index: 2; }
.sat-map .leaflet-container { font-family: "Public Sans", sans-serif; }
.sat-map__pin {
	--sat-ico: "place";
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	width: auto;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-radius: 9999px;
	padding: 0.6rem 1.1rem;
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--on-surface);
	box-shadow: 0 8px 24px -12px rgba(0, 73, 128, 0.4);
}
.sat-map__pin::before { font-size: 1.125rem; color: var(--wp--preset--color--secondary); }

/* ---- Box informativi dei contatti ---------------------------------------
   Il filetto sta sul componente e non sulla sezione, come per .sat-sign. La
   pagina contatti è una sola sezione tone-0, cioè #ffffff, e lo sfondo del
   riquadro è surface-container-lowest, cioè anch'esso #ffffff: senza bordo,
   tre riquadri su quattro restavano delimitati dalla sola ombra al 6% di
   nero, praticamente bianco su bianco. Abbassare il tono della sezione
   avrebbe risolto qui e ripresentato il problema al prossimo riuso: è lo
   stesso difetto che rendeva invisibile la zebratura della tabella quote. */
.sat-info {
	background: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: 1rem;
	padding: 1.75rem;
	height: 100%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.sat-info--accent { border-left: 4px solid var(--wp--preset--color--secondary-container); }
.sat-info--sede   { --sat-ico: "place"; }
.sat-info--orari  { --sat-ico: "schedule"; }
.sat-info--email  { --sat-ico: "alternate_email"; }
.sat-info--social { --sat-ico: "share"; }
.sat-info::before {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--primary-fixed);
	color: var(--wp--preset--color--primary);
	font-size: 1.25rem;
	margin-bottom: 1rem;
}
.sat-info .wp-block-social-links { margin: 0; gap: 0.5rem; }
.sat-info h3 {
	font-family: "Overpass", sans-serif;
	font-weight: 800;
	font-size: 1.125rem;
	color: var(--wp--preset--color--on-surface);
	margin: 0 0 0.5rem;
}
.sat-info p { margin: 0; color: var(--wp--preset--color--on-surface-variant); font-size: 0.9rem; line-height: 1.6; }

/* ---- Direttivo ---------------------------------------------------------- */
.sat-board {
	background: var(--wp--preset--color--primary-fixed);
	border-radius: 1.25rem;
	margin-top: var(--wp--preset--spacing--40);
}
.sat-board__head {
	--sat-ico: "groups";
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	font-family: "Overpass", sans-serif;
	font-weight: 800;
	color: var(--wp--preset--color--primary) !important;
}
.sat-board__row {
	gap: 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid rgba(0, 73, 128, 0.12);
}
.sat-board__row:last-child { border-bottom: 0; }
/* Ruolo e nomi si allineano sulla PRIMA riga di testo: con due nomi
   (Referente sentieri) o con la lista dei consiglieri l'etichetta deve stare
   accanto al primo, non all'ultimo. Baseline e non flex-start, perché i due
   corpi sono diversi (0.625rem contro 0.95rem) e in alto le teste non
   coinciderebbero. Due classi apposta: battono la regola che il core genera
   da verticalAlignment (.wp-container-core-group-is-layout-… { align-items:
   flex-end }, una classe sola), che resta salvata nei contenuti esistenti. */
.sat-board .sat-board__row { align-items: baseline; }
.sat-board .sat-board__row > * { margin: 0; }
.sat-board .sat-board__role { flex-shrink: 0; }
/* L'unica deroga di aspetto al gruppo, ed è voluta: .sat-board sta su
   primary-fixed, che è azzurro, e on-surface-variant lì non si legge. */
.sat-board__role {
	margin: 0;
	color: var(--wp--preset--color--primary);
}
.sat-board__name {
	margin: 0;
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--on-primary-fixed);
	text-align: right;
}
/* Consiglieri: una riga come le altre, con al posto del nome una lista — un
   nome per voce, allineato a destra come .sat-board__name. Nell'editor si
   aggiunge un consigliere scrivendo e premendo Invio, senza duplicare gruppi. */
.sat-board .sat-board__list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}
.sat-board__list li {
	margin: 0;
	line-height: 1.5;
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--on-primary-fixed);
}

/* ---- Notizia singola (templates/single-post.html) -----------------------
   Le notizie sono spesso brevi: a riempire la pagina ci pensa il template,
   non il contenuto. Nel DOM il testo viene PRIMA della barra, così su
   telefono e per chi legge con lo screen reader si arriva subito alla
   notizia; da 900px in su la barra va a destra del testo. */
.sat-notizia {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}
/* Il layout "flow" mette un margin-block-start a ogni figlio: dentro la
   griglia diventerebbe uno scalino sopra la seconda colonna. */
.sat-notizia > * { margin: 0; }
@media (min-width: 900px) {
	.sat-notizia {
		/* Testo a sinistra, barra a destra: si legge prima la notizia, ed è
		   anche l'ordine del DOM, quindi niente posizionamenti espliciti. */
		grid-template-columns: minmax(0, 7fr) minmax(15rem, 3fr);
		gap: var(--wp--preset--spacing--70);
		align-items: start;
	}
}

/* Testo: un corpo più generoso, perché un paragrafo solo non sembri una
   didascalia; la misura resta da lettura anche nella colonna larga. */
.sat-notizia__testo {
	max-width: 44rem;
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--wp--preset--color--on-surface);
}
.sat-notizia__testo > :first-child { margin-top: 0; }

/* Precedente / successiva: due link in fondo al testo, separati da una riga. */
.sat-notizia__nav {
	max-width: 44rem;
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--outline-variant);
	gap: 1rem 2rem;
}
.sat-notizia__nav .wp-block-post-navigation-link {
	flex: 1 1 14rem;
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--primary);
}
.sat-notizia__nav a { color: inherit; text-decoration: none; }
.sat-notizia__nav a:hover,
.sat-notizia__nav a:focus-visible { text-decoration: underline; }
.sat-notizia__nav .wp-block-post-navigation-link__arrow-previous { margin-right: 0.4rem; }
.sat-notizia__nav .wp-block-post-navigation-link__arrow-next { margin-left: 0.4rem; }

/* Occhiello dell'hero: categoria e data. I link della categoria prendono il
   colore dell'occhiello invece del blu dei link. */
.sat-notizia__occhiello { font-size: 0.8rem; }
.sat-notizia__occhiello > * { margin: 0; }
.sat-notizia__occhiello a { color: inherit; text-decoration: none; }
.sat-notizia__occhiello a:hover { text-decoration: underline; }
.sat-notizia__occhiello > * + *::before {
	content: "·";
	margin-right: 0.75rem;
	opacity: 0.7;
}

/* Hero senza immagine in evidenza: il cover resterebbe una velatura chiara
   sotto un titolo bianco. Al suo posto lo stesso fondo blu con il profilo di
   montagna del sito, come il pannello delle card senza copertina. */
.sat-hero--notizia:not(:has(.wp-block-cover__image-background)),
.sat-hero--sentiero:not(:has(.wp-block-cover__image-background)),
.sat-hero--rifugio:not(:has(.wp-block-cover__image-background)) {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,100 L150,40 L300,90 L450,20 L600,100 L750,30 L900,90 L1050,40 L1200,100 L1200,120 Z' fill='%23ffffff' fill-opacity='0.12'/%3E%3C/svg%3E") bottom / 100% 45% no-repeat,
		linear-gradient(160deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-container) 100%);
}

/* La barra: un riquadro chiaro con le ultime notizie, le categorie e il
   rimando all'elenco completo. */
.sat-notizia__laterale {
	background: var(--wp--preset--color--surface-container-low);
	border-radius: 1rem;
	padding: 1.5rem 1.5rem 1.75rem;
}
.sat-notizia__laterale > * { margin-block: 0; }
.sat-notizia__laterale > * + * { margin-top: 1.25rem; }
.sat-notizia__laterale .sat-notizia__titoletto + * { margin-top: 0.75rem; }
.sat-notizia__laterale > .sat-notizia__titoletto:not(:first-child) { margin-top: 2rem; }
.sat-notizia__titoletto {
	font-family: "Overpass", sans-serif;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
}
.sat-recenti__lista { list-style: none; margin: 0; padding: 0; }
.sat-recenti__lista > li {
	margin: 0;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}
.sat-recenti__lista > li:first-child { padding-top: 0; }
.sat-recenti__lista > li:last-child { border-bottom: 0; padding-bottom: 0; }
.sat-recenti__lista > li > * { margin: 0; }
.sat-recenti__data {
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}
.sat-recenti__titolo {
	margin-top: 0.15rem !important;
	font-family: "Public Sans", sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.35;
}
.sat-recenti__titolo a { color: var(--wp--preset--color--on-surface); text-decoration: none; }
.sat-recenti__titolo a:hover,
.sat-recenti__titolo a:focus-visible { color: var(--wp--preset--color--primary); text-decoration: underline; }
.sat-recenti__vuoto { font-size: 0.9rem; color: var(--wp--preset--color--on-surface-variant); }
.sat-notizia__categorie {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.sat-notizia__categorie li { margin: 0; }
.sat-notizia__categorie a {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--outline-variant);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.sat-notizia__categorie a:hover { border-color: var(--wp--preset--color--primary); }
.sat-notizia__tutte {
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sat-notizia__tutte a { color: var(--wp--preset--color--primary); text-decoration: none; }
.sat-notizia__tutte a:hover { text-decoration: underline; }

/* ---- Sentiero singolo (templates/single-sat_sentiero.html) --------------
   Stessa impaginazione della notizia singola — riusa .sat-notizia,
   .sat-notizia__laterale, __testo, __titoletto, __tutte — con al posto delle
   ultime notizie la scheda dei campi del sentiero. Qui sotto solo ciò che è
   proprio del sentiero. */

/* Tre pezzi nel DOM: descrizione, scheda, altri sentieri. Su telefono si
   leggono in quest'ordine — la scheda subito dopo il testo, non in fondo a
   un elenco. Da 900px gli altri sentieri tornano sotto la descrizione e la
   scheda occupa la colonna destra per tutta l'altezza.
   Il rifugio (templates/single-sat_rifugio.html) ha la stessa impaginazione:
   descrizione, scheda con i sentieri per arrivarci, altri rifugi. */
@media (min-width: 900px) {
	.sat-notizia--sentiero .sat-notizia__corpo,
	.sat-notizia--rifugio .sat-notizia__corpo { grid-column: 1; grid-row: 1; }
	.sat-notizia--sentiero .sat-notizia__laterale,
	.sat-notizia--rifugio .sat-notizia__laterale { grid-column: 2; grid-row: 1 / span 2; }
	.sat-notizia--sentiero .sat-altri,
	.sat-notizia--rifugio .sat-altri { grid-column: 1; grid-row: 2; }
}

/* Occhiello «Sentiero SAT n° 358»: l'etichetta è testo del template, il
   numero arriva dal meta. Senza numero l'etichetta da sola non dice niente. */
.sat-sentiero__occhiello > * { margin: 0; }
.sat-sentiero__occhiello:has(.sat-sentiero__numero:empty) { display: none; }

/* La scheda dentro la barra: la barra ha già il suo fondo, quindi il
   riquadro di .sat-datasheet qui non si ripete. Le righe vuote le nasconde
   già la regola di .sat-datasheet__row (valore :empty). */
.sat-notizia__laterale .sat-scheda {
	background: none;
	border-radius: 0;
	padding: 0;
}
.sat-scheda .sat-datasheet__row:first-child { padding-top: 0; }
/* Il layout "flow" del gruppo aggiunge il block-gap fra le righe, che hanno
   già il loro padding: senza questo la scheda si allunga del doppio. */
.sat-scheda > * { margin-block: 0; }
.sat-scheda .sat-datasheet__value { font-size: 0.95rem; line-height: 1.4; }
/* Difficoltà: il badge colorato come nella tabella, poi il nome esteso.
   Il nome è il .sat-datasheet__value della riga: se la difficoltà non è
   indicata è vuoto, e la riga sparisce con la regola generale. */
.sat-scheda__difficolta { align-items: center; }
.sat-scheda__badge { margin: 0; justify-content: flex-end; }
.sat-scheda__badge > * { margin: 0; }
/* Pulsanti della scheda: punto di partenza (o posizione del rifugio) e
   traccia GPX. L'indirizzo arriva da una block binding sull'attributo url del
   pulsante, mentre l'etichetta resta testo modificabile dall'editor. Quando
   non c'è niente da linkare — niente GPX, niente coordinate né nome — il
   pulsante esce con href vuoto e qui sparisce; se spariscono tutti, sparisce
   anche la fila. */
/* Un pulsante per riga, largo quanto la scheda, con il testo al centro. */
.sat-scheda__azioni {
	flex-direction: column;
	align-items: stretch;
	gap: 0.5rem;
}
.sat-scheda__azioni .wp-block-button { width: 100%; }
.sat-scheda__azioni .wp-block-button:has(> .wp-block-button__link:not([href])),
.sat-scheda__azioni .wp-block-button:has(> .wp-block-button__link[href=""]) { display: none; }
.sat-scheda__azioni:not(:has(.wp-block-button__link[href]:not([href=""]))) { display: none; }
.sat-scheda__azioni .wp-block-button__link {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.65rem 1.1rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}
.sat-scheda__azioni .wp-block-button__link:hover,
.sat-scheda__azioni .wp-block-button__link:focus-visible { background: var(--wp--preset--color--primary-container); }
.sat-scheda__azioni .wp-block-button__link::before { font-size: 1.15rem; }
/* Il GPX è il pulsante secondario: stesso disegno, a filo. */
.sat-scheda__gpx .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 1.5px currentColor;
}
.sat-scheda__gpx .wp-block-button__link:hover,
.sat-scheda__gpx .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}
.sat-scheda__mappa { --sat-ico: "location_on"; }
.sat-scheda__gpx   { --sat-ico: "map"; }

/* Sentieri per arrivarci, nella scheda del rifugio: se il campo è vuoto la
   query non trova niente e il riquadro, titolo compreso, non esce. */
.sat-notizia__laterale > .sat-rifugio__sentieri { margin-top: 2rem; }
.sat-rifugio__sentieri:not(:has(.wp-block-post)) { display: none; }
.sat-rifugio__sentieri > * { margin-block: 0; }
.sat-rifugio__sentieri > * + * { margin-top: 0.5rem; }
.sat-rifugio__sentieri .sat-altri__num { flex-basis: 2.5rem; }

/* Altri sentieri: un elenco compatto sotto la descrizione, numero, nome e
   difficoltà su una riga. */
.sat-altri {
	max-width: 44rem;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--outline-variant);
}
.sat-altri > * { margin-block: 0; }
.sat-altri > * + * { margin-top: 1rem; }
.sat-altri__lista { list-style: none; margin: 0; padding: 0; }
.sat-altri__lista > li { margin: 0; border-bottom: 1px solid var(--wp--preset--color--outline-variant); }
.sat-altri__lista > li:last-child { border-bottom: 0; }
.sat-altri__voce { gap: 0.75rem; padding-block: 0.6rem; }
.sat-altri__voce > * { margin: 0; }
.sat-altri__num {
	flex: 0 0 3rem;
	font-family: "Overpass", sans-serif;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
}
.sat-altri__titolo {
	flex: 1 1 auto;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.35;
}
.sat-altri__titolo a { color: var(--wp--preset--color--on-surface); text-decoration: none; }
/* Il dato a destra della voce: la quota negli altri rifugi. */
.sat-altri__dato {
	flex: 0 0 auto;
	font-size: 0.85rem;
	color: var(--wp--preset--color--on-surface-variant);
	white-space: nowrap;
}
.sat-altri__titolo a:hover,
.sat-altri__titolo a:focus-visible { color: var(--wp--preset--color--primary); text-decoration: underline; }

/* =========================================================================
   RESPONSIVE / MOBILE
   ========================================================================= */

/* ---- Griglie su tablet ---------------------------------------------------
   Il core/post-template con columnCount:N emette
   `grid-template-columns: repeat(N, minmax(0,1fr))` senza media query, e
   WordPress collassa a una colonna sola sotto i 600px. Fra 601 e 900px
   restavano quindi 3 o 4 colonne piene, con card da ~200px. Qui si passa a
   due colonne. La regola del core sotto i 600px ha specificità quadruplicata
   e continua a vincere, quindi su telefono resta una colonna. */
@media (min-width: 601px) and (max-width: 900px) {
	.sat-query-grid .sat-cards.is-layout-grid,
	.sat-query-news .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	/* L'`!important` non è disperazione, è l'unica arma disponibile: il
	   concorrente non è una regola di questo foglio ma lo stile inline che
	   `core/cover` scrive sul <div> a partire dall'attributo `minHeight` del
	   blocco. Senza, queste due righe sono codice morto — e lo sono sempre
	   state: finché la home era 716 px il difetto non si vedeva, ma a 820 px
	   su un telefono 390×800 l'hero era 20 px PIÙ ALTO dello schermo intero e
	   la pagina si apriva sulla sola fotografia, senza niente sotto che
	   invitasse a scorrere.
	   La forma è una clamp e non un `min()` secco per non cadere nel difetto
	   opposto: il tetto è l'altezza di progetto, che non va mai superata; il
	   valore in mezzo lascia scoperto circa un quinto di schermo, abbastanza
	   perché si veda l'inizio di ciò che segue; il pavimento è la misura sotto
	   la quale il testo dentro l'hero non sta più libero dalla barra, e serve
	   sugli schermi corti veri — un telefono girato di lato. */
	.sat-hero.wp-block-cover { min-height: clamp(420px, 78vh, 820px) !important; }
	.sat-hero--small.wp-block-cover { min-height: clamp(360px, 62vh, 480px) !important; }
	.sat-cta-card { min-height: 15rem; } /* 11rem di contenuto + 2rem di padding sopra e sotto */
	.sat-hero h1, .sat-hero h2 { line-height: 1; }
}

/* La voce CTA "Iscriviti o rinnova" nel menu è nascosta sul desktop
   (sul desktop c'è già il pulsante pill nell'header). */
.sat-nav .wp-block-navigation-item.sat-menu-cta { display: none; }

/* Header compatto: hamburger blu, niente pill nell'header (la CTA va nel menu).
   Fino a 1023px e non a 600 come di default: con nove voci il menu orizzontale
   deborda dal viewport sui tablet, quindi si passa prima all'overlay. */
@media (max-width: 1023px) {
	/* forza l'overlay oltre la soglia di 600px prevista da core */
	.sat-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.sat-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.sat-nav .wp-block-site-title,
	.sat-nav .wp-block-site-title a { font-size: 1rem; }
	.sat-nav .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--primary);
		padding: 0;
	}
	/* nasconde il pulsante "Iscriviti o rinnova" nell'header su mobile
	   (.sat-nav per battere la specificità di .wp-block-buttons del core) */
	.sat-nav .sat-cta-pill { display: none; }
	/* mostra la CTA dentro l'overlay del menu, come pulsante oro */
	.sat-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.sat-menu-cta {
		display: block;
		margin-top: 1.5rem;
	}
	.sat-nav .is-menu-open .sat-menu-cta .wp-block-navigation-item__content {
		background: var(--wp--preset--color--secondary-container);
		color: var(--wp--preset--color--on-secondary-container) !important;
		border-radius: 9999px;
		padding: 0.85rem 2rem;
		font-size: 0.95rem;
	}
}

/* Overlay del menu mobile: pannello pulito a tutto schermo */
.sat-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--surface);
	padding-top: 4rem;
}
.sat-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: "Overpass", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--primary);
	font-size: 1.1rem;
}
.sat-nav .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--primary); }

/* riduci animazioni se richiesto dall'utente */
@media (prefers-reduced-motion: reduce) {
	.sat-update-bar__track { animation: none; }
	/* `animation` accanto a `transition`: fino alla issue #6 il foglio aveva
	   una sola animazione — il marquee degli avvisi, spento qui sopra per
	   nome — e la riga bastava. Ora che ce ne sono altre, spegnerle per nome
	   una a una significa dimenticarsene una il giorno che se ne aggiunge. */
	* { transition: none !important; animation: none !important; }
}

/* ---- Intestazione · variante crinale -------------------------------------
   Il bordo inferiore della barra non è dritto: sotto di essa è appeso il
   profilo di vette del tema — lo stesso di `sep-mountain`, capovolto: le x
   sono identiche (0, 150, 300 … 1200) e le ampiezze pure (20, 80, 30, 100 …),
   solo misurate verso il basso invece che verso l'alto. Scorrendo il crinale
   si appiattisce fino a lasciare il filo dritto della barra bianca.

   Tutto è agganciato a .sat-header--crinale e scritto DOPO le regole base
   .sat-header / .sat-nav: stessa specificità, decide l'ordine nel file.

   COME SI APPIATTISCE, SENZA JAVASCRIPT
   `assets/js/header.js` è condiviso da tutte le varianti e scrive solo --p
   (0 in cima, 1 oltre 140px). L'appiattimento è quindi ottenuto riducendo
   l'ALTEZZA CSS dell'SVG: con preserveAspectRatio="none" il viewBox 1200×120
   viene rimappato sul box, quindi una altezza che va a zero schiaccia il
   profilo verso y=0 — cioè verso il bordo della barra. È la stessa deformazione
   che la demo faceva in JS riscrivendo il path.
   Le altre due strade sono state scartate:
   - `transform: scaleY()` con transform-origin:top dà la stessa geometria ma
     schiaccia anche il tratto: la linea d'oro diventerebbe di spessore
     disomogeneo (sottile sui tratti orizzontali, intatta sui verticali), e
     `vector-effect="non-scaling-stroke"` non compensa una transform CSS
     applicata all'elemento <svg> stesso. Riducendo l'altezza invece la
     compensa, perché lì la deformazione è quella del viewport SVG.
   - la dissolvenza incrociata di due path sovrapposti (crinale pieno e
     crinale piatto) non è un appiattimento: nel mezzo si vedono due creste
     insieme al 50%, non una cresta che si posa.
   La curva è la stessa smoothstep della demo, t·t·(3−2t), calcolabile in
   calc() perché --p è un numero puro.

   COSA SI PERDE
   Lo sfasamento per vertice della demo — le vette più alte che cedono per
   ultime — NON c'è: una sola altezza schiaccia tutti i vertici insieme, e in
   CSS puro non si può far collassare un vertice prima di un altro senza
   riscrivere il path. Al suo posto resta uno sfasamento fra i due strati: il
   crinale di sfondo si ritira più in fretta (finisce a --p 0,69) e quello in
   primo piano si posa dopo. È un assestamento in due tempi invece che in nove,
   ma non è il sipario unico che si voleva evitare.

   Con prefers-reduced-motion header.js porta --p a 1 al primo scorrimento:
   il crinale risulta subito piatto, che è il comportamento giusto. Nessuna
   transition qui: ogni valore segue --p, aggiornata a ogni frame. */
.sat-header--crinale {
	/* Sporgenza del crinale a pagina ferma. */
	--sat-crinale-h: 3.5rem;
	/* Valore di riposo: senza, prima che header.js scriva, i calc() sarebbero
	   invalidi e il crinale non verrebbe disegnato affatto. Lo stile inline
	   scritto dal JS ha comunque la precedenza. */
	--p: 0;
	/* smoothstep(--p) e la sua versione anticipata per lo strato di sfondo. */
	--sat-crinale-e: calc(var(--p) * var(--p) * (3 - 2 * var(--p)));
	--sat-crinale-pd: clamp(0, calc(var(--p) * 1.45), 1);
	--sat-crinale-ed: calc(var(--sat-crinale-pd) * var(--sat-crinale-pd) * (3 - 2 * var(--sat-crinale-pd)));
}
/* La barra deve restare in cima allo schermo mentre si scorre, o non si vede
   niente di ciò che segue: il crinale si posa fra 0 e 140 px di scroll, e in
   140 px una barra che se ne va con la pagina è già fuori dalla finestra.
   `position: sticky` c'è già sulla regola base, ma sta su `.sat-header`, che
   il template part avvolge in un `<header class="wp-block-template-part">`
   alto esattamente quanto lui: un box sticky non può uscire dal proprio
   blocco contenitore, quindi lì dentro non ha spazio in cui scorrere e non si
   aggancia a nulla. Va portato sul contenitore, come per le altre due
   varianti. A differenza loro il crinale RESTA nel flusso: la sua barra non è
   un overlay sull'hero, è una barra che finisce a vette. */
.wp-site-blocks > .wp-block-template-part:has(> .sat-header--crinale) {
	position: sticky;
	top: 0;
	z-index: 50;
}
/* In cima la barra non ha ombra: il suo bordo è il crinale. L'ombra cresce
   mentre il crinale si ritira, così la barra non resta mai senza stacco.
   Il !important sulle spaziature è obbligato: padding-top e padding-bottom
   sono attributi del blocco e finiscono in uno stile inline sul <div>. */
.sat-header--crinale .sat-nav {
	box-shadow: 0 calc(6px * var(--sat-crinale-e)) calc(18px * var(--sat-crinale-e)) rgba(0, 73, 128, calc(0.18 * var(--sat-crinale-e)));
	padding-top: calc(1rem - 0.25rem * var(--sat-crinale-e)) !important;
	padding-bottom: calc(1rem - 0.25rem * var(--sat-crinale-e)) !important;
}
/* Il crinale sta FUORI dal flusso, appeso al bordo inferiore della barra:
   se occupasse altezza comprimerebbe le voci di menu.
   z-index negativo dentro il contesto di impilamento che .sat-header crea già
   (sticky + z-index:50): resta sotto la barra e sotto l'overlay del menu
   mobile, e sopra il contenuto della pagina, su cui deve scendere.
   pointer-events:none perché non intercetti i clic di ciò che copre. */
.sat-header--crinale .sat-crinale {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
	overflow: visible;
	/* I due SVG sono figli di `.sat-header`, che è `is-layout-flow`: WordPress
	   applica `:root :where(.is-layout-flow) > * { margin-block-start: 1.5rem }`
	   a ogni figlio che non sia il primo — e il primo è `.sat-nav`. Su un box in
	   posizione assoluta quel margine non sparisce, si SOMMA a `top: 100%`: il
	   crinale nasceva 24 px sotto il bordo della barra, e fra il filo bianco e
	   la cresta restava una fascia chiara che la faceva sembrare appoggiata
	   dentro l'hero invece che appesa al menu. */
	margin-block-start: 0;
}
/* max(1px, …) e non semplicemente 0: a --p 1 un SVG di altezza nulla non
   viene disegnato, e con lui sparirebbe anche il filo d'oro che deve restare
   a chiudere la barra. A 1px il profilo è già collassato in una riga. */
.sat-header--crinale .sat-crinale--davanti {
	height: max(1px, calc(var(--sat-crinale-h) * (1 - var(--sat-crinale-e))));
}
.sat-header--crinale .sat-crinale--dietro {
	height: max(1px, calc(var(--sat-crinale-h) * 0.82 * (1 - var(--sat-crinale-ed))));
}
.sat-header--crinale .sat-crinale--dietro path {
	fill: var(--wp--preset--color--primary-fixed);
	opacity: 0.9;
}
/* Il crinale in primo piano è del bianco della barra (stessa opacità, senza
   la sfocatura che vive sullo pseudo-elemento di .sat-nav e non può uscirne):
   letto dall'alto è la barra stessa che finisce a vette. Il filo d'oro è il
   colore secondario del tema e usa non-scaling-stroke, altrimenti il rimapping
   del viewBox lo renderebbe di spessore disomogeneo. */
.sat-header--crinale .sat-crinale--davanti path {
	fill: rgba(255, 255, 255, 0.82);
	stroke: var(--wp--preset--color--secondary-container);
	stroke-width: 1.5;
	stroke-linejoin: round;
}
/* Sopra la soglia del menu a scomparsa il marchio si compatta con la barra.
   La regola sta dentro il media query e non fuori, o batterebbe per
   specificità il 2.25rem che sotto i 782px lascia spazio al menu. */
@media (min-width: 783px) {
	.sat-header--crinale .sat-brand__logo img {
		height: calc(2.75rem - 0.4rem * var(--sat-crinale-e));
	}
}
/* Su schermo stretto il crinale sporge meno: la barra è già più bassa e una
   sporgenza intera si mangerebbe l'inizio del contenuto. */
@media (max-width: 782px) {
	.sat-header--crinale {
		--sat-crinale-h: 2.25rem;
	}
}

/* ---- Intestazione · variante riquadro ------------------------------------
   Il pattern `satpinzolo/header-riquadro`. A pagina ferma l'intestazione è una
   pastiglia bianca staccata dai bordi, con angoli molto tondi e un'ombra
   morbida che la tiene sospesa; oltre i 140 px di scroll si allarga fino ai
   bordi, appiattisce gli angoli e si posa contro il bordo superiore.

   Tutta la morfologia è scritta in funzione di `--p`, l'unica variabile che
   `assets/js/header.js` mette su `.sat-header` (0 = pagina in cima, 1 = oltre
   la soglia): margini, raggio e ombre cambiano insieme e sulla stessa scala,
   così la trasformazione si legge come un movimento unico e non come due
   stati che si scambiano. Nessuna transizione CSS, di proposito: con
   `prefers-reduced-motion` il JS porta `--p` direttamente a 1, e una
   transizione rimetterebbe dalla finestra l'animazione che l'utente ha chiesto
   di togliere.

   Il blocco sta in coda al foglio perché `.sat-header--riquadro` ha la stessa
   specificità di `.sat-header`: scritto più in alto, la base lo annullerebbe.
   -------------------------------------------------------------------------- */
/* Le due misure da cui dipende l'altezza della fascia stanno sulla RADICE e
   non su `.sat-header--riquadro`: il rientro negativo qui sotto va scritto sul
   wrapper, che è il GENITORE dell'intestazione e non ne eredita le variabili.
   Stesso motivo — e stessa forma — di `--sat-vetro-h` più avanti. */
.wp-site-blocks:has(.sat-header--riquadro) {
	/* Altezza della pastiglia. Fissa e non dettata dal contenuto: il rientro
	   negativo dev'essere pari all'altezza della fascia, e l'altezza di una
	   barra alta quanto ciò che contiene non è un numero sottraibile in CSS. */
	--sat-riq-nav: 5rem;
	/* Fascia verticale complessiva della cornice: costante, vedi sotto. */
	--sat-riq-fascia: 2.5rem;
	/* Quanta pagina l'intestazione copre: la legge la centratura ottica in
	   fondo al foglio. Vale solo per le varianti in overlay. */
	--sat-occlusione: calc(var(--sat-riq-nav) + var(--sat-riq-fascia));
}
.sat-header--riquadro {
	/* Valore di riposo se il JavaScript non è ancora passato o non arriva:
	   senza, `calc(1 - var(--p))` sarebbe invalido e l'intestazione resterebbe
	   senza stacco né raggio. Il JS scrive `--p` inline, quindi vince. */
	--p: 0;
	--sat-riq-lato: calc((1 - var(--p)) * 1.5rem);
	--sat-riq-alto: calc((1 - var(--p)) * 1.25rem);
}
/* L'elemento sticky è `.sat-header`, ma il template part lo avvolge in un
   `<header class="wp-block-template-part">` alto quanto lui: un box sticky non
   può uscire dal proprio blocco contenitore, quindi lì dentro non si
   aggancerebbe a nulla. Lo sticky va portato sul contenitore. Regola limitata
   a questa variante — le altre proposte restano come sono.

   Lo sticky da solo però non basta: la fascia continuerebbe a occupare il suo
   posto nel flusso e l'hero comincerebbe sotto di lei, che è esattamente il
   difetto segnalato («fosse un overlay sull'hero» invece di una sezione a sé).
   Il rientro negativo di pari altezza azzera il contributo al flusso: la
   pastiglia resta dov'è, con i suoi margini laterali e il suo stacco dall'alto,
   ma quello stacco è ora spazio trasparente sopra la foto.
   `pointer-events` spento sul wrapper e riacceso sulla sola pastiglia, o la
   cornice — che adesso sta sopra l'hero — ne mangerebbe i clic. */
.wp-site-blocks > .wp-block-template-part:has(> .sat-header--riquadro) {
	position: sticky;
	top: 0;
	z-index: 50;
	margin-block-end: calc(-1 * (var(--sat-riq-nav) + var(--sat-riq-fascia)));
	pointer-events: none;
}
/* La cornice è la fascia trasparente che porta lo stacco, così i margini non
   stanno sull'elemento ancorato a top: 0 e non se lo contendono.
   Il padding verticale TOTALE non cambia mai — quello che si toglie sopra
   viene restituito sotto: se l'altezza del blocco sticky variasse durante lo
   scroll si innescherebbe un ciclo scroll → reflow → scroll.
   Non intercetta i click: a riposo è il respiro attorno alla pastiglia, a fine
   corsa è lo spazio in cui cade l'ombra sopra il contenuto che scorre. */
.sat-header--riquadro .sat-header__cornice {
	padding: var(--sat-riq-alto) var(--sat-riq-lato) calc(var(--sat-riq-fascia) - var(--sat-riq-alto));
	pointer-events: none;
}
/* La pastiglia. Bianco pieno e non il vetro semitrasparente della base: qui è
   una scheda che galleggia sulla pagina, e da scorsa deve coprire nettamente
   il contenuto che le passa sotto.
   Le quattro ombre sono incrociate sulla stessa variabile — due si spengono
   mentre due si accendono — così la sospensione morbida diventa appoggio sul
   bordo senza un salto. */
.sat-header--riquadro .sat-nav {
	pointer-events: auto;
	box-sizing: border-box;
	height: var(--sat-riq-nav);
	background: var(--wp--preset--color--surface-container-lowest);
	border-radius: calc((1 - var(--p)) * 32px);
	box-shadow:
		0 18px 40px -12px rgb(0 73 128 / calc(0.26 * (1 - var(--p)))),
		0 4px 12px -4px rgb(27 27 30 / calc(0.12 * (1 - var(--p)))),
		0 1px 0 0 rgb(193 199 210 / var(--p)),
		0 6px 18px -8px rgb(0 73 128 / calc(0.16 * var(--p)));
}
/* Lo pseudo-elemento del blur è un rettangolo dietro la barra: senza raggio
   sporgerebbe dagli angoli tondi della pastiglia. */
.sat-header--riquadro .sat-nav::before {
	border-radius: inherit;
}
/* Il marchio e le voci non cambiano corpo durante lo scroll: l'altezza della
   barra deve restare quella, o la fascia sticky si muove sotto il contenuto. */
@media (max-width: 781px) {
	.wp-site-blocks:has(.sat-header--riquadro) {
		--sat-riq-nav: 4.5rem;
		--sat-riq-fascia: 1.5rem;
	}
	.sat-header--riquadro {
		--sat-riq-lato: calc((1 - var(--p)) * 0.75rem);
		--sat-riq-alto: calc((1 - var(--p)) * 0.75rem);
	}
	.sat-header--riquadro .sat-nav {
		border-radius: calc((1 - var(--p)) * 22px);
	}
}

/* ---- Intestazione · variante vetro ---------------------------------------
   Il pattern satpinzolo/header-vetro. In cima alla pagina la barra è vetro
   smerigliato — trasparente, sfocata, senza ombra — e il contenuto le passa
   sotto; scorrendo si rapprende nella stessa barra bianca solida della
   variante base.

   Il moto non è un'animazione: assets/js/header.js scrive su .sat-header una
   variabile --p che va da 0 (pagina in cima) a 1 (oltre 140px di scroll), e
   qui tutto ciò che cambia è una calc() su quel numero. Nessuna transizione
   CSS, apposta: con prefers-reduced-motion il JS porta --p direttamente a 1,
   e una transizione rimetterebbe in scena il movimento appena tolto.

   Il blocco sta in fondo al foglio perché riscrive proprietà già dichiarate
   dalle regole base .sat-header / .sat-nav: a parità di specificità decide
   l'ordine nel file, e scritto prima verrebbe annullato.
   ------------------------------------------------------------------------- */

/* Perché il contenuto passi sotto il vetro la barra deve uscire dal flusso, e
   per restare appesa in alto deve essere sticky dentro un contenitore più
   alto di lei. Il gruppo .sat-header non lo è: il suo genitore è il wrapper
   .wp-block-template-part, alto esattamente quanto lui, e uno sticky senza
   spazio in cui scorrere non si muove. Sticky e rientro negativo vanno quindi
   sul wrapper, riconosciuto con :has() perché non ha classi proprie — e solo
   quando dentro c'è questa variante. */
.wp-site-blocks:has(.sat-header--vetro) {
	--sat-vetro-h: 5rem;
	--sat-occlusione: var(--sat-vetro-h);
}
.wp-site-blocks > .wp-block-template-part:has(> .sat-header--vetro) {
	position: sticky;
	top: 0;
	z-index: 50;
	/* contributo netto al flusso zero: la barra occupa --sat-vetro-h e si
	   riprende la stessa altezza, così l'hero parte da y=0 e le scorre sotto */
	margin-block-end: calc(-1 * var(--sat-vetro-h));
}

/* Altezza fissa, e non quella del contenuto: il rientro negativo qui sopra
   dev'essere esattamente pari all'altezza della barra, e l'altezza di una
   barra alta quanto ciò che contiene non è un numero che il CSS possa
   sottrarre. */
.sat-header--vetro .sat-nav {
	box-sizing: border-box;
	height: var(--sat-vetro-h);
	/* fondo e ombra sono funzione continua di --p, non uno scatto a soglia */
	background: rgba(255, 255, 255, calc(0.06 + 0.86 * var(--p, 0)));
	box-shadow:
		inset 0 -1px 0 rgba(255, 255, 255, calc(0.34 - 0.34 * var(--p, 0))),
		0 1px 0 rgba(193, 199, 210, calc(0.7 * var(--p, 0))),
		0 10px 30px -12px rgba(0, 73, 128, calc(0.18 * var(--p, 0)));
}
/* La sfocatura resta sullo pseudo-elemento per la ragione spiegata sopra alla
   regola base: un backdrop-filter su .sat-nav creerebbe un containing block
   per i position:fixed e intrappolerebbe l'overlay del menu mobile. */
.sat-header--vetro .sat-nav::before {
	-webkit-backdrop-filter: blur(calc(16px - 2px * var(--p, 0))) saturate(calc(180% - 80% * var(--p, 0)));
	backdrop-filter: blur(calc(16px - 2px * var(--p, 0))) saturate(calc(180% - 80% * var(--p, 0)));
}

/* L'inchiostro: bianco sul vetro (sotto c'è l'hero scuro con cui si apre ogni
   pagina), il blu del tema sulla barra bianca. --ink è la voce attiva e
   l'hover, --ink-2 le voci normali e il nome del sito. */
.sat-header--vetro {
	--sat-vetro-ink: color-mix(in srgb, #ffffff calc(100% - var(--p, 0) * 100%), var(--wp--preset--color--primary-container));
	--sat-vetro-ink-2: color-mix(in srgb, rgba(255, 255, 255, 0.92) calc(100% - var(--p, 0) * 100%), var(--wp--preset--color--primary));
	--sat-vetro-ombra: 0 1px 10px rgba(11, 20, 35, calc(0.5 - 0.5 * var(--p, 0)));
}
.sat-header--vetro .sat-nav .wp-block-site-title,
.sat-header--vetro .sat-nav .wp-block-site-title a {
	color: var(--sat-vetro-ink-2) !important; /* la regola base è !important */
	text-shadow: var(--sat-vetro-ombra);
}
/* Il marchio è un logo vero, non un quadrato: la variante lo rimpicciolisce
   agendo sull'immagine, e sul vetro gli mette l'alone chiaro che lo stacca
   dalla foto — il logo è blu e oro, su una fotografia scura si perderebbe. */
.sat-header--vetro .sat-brand__logo img {
	height: calc(2.75rem - 0.5rem * var(--p, 0));
	filter: drop-shadow(0 1px calc(7px - 7px * var(--p, 0)) rgba(255, 255, 255, calc(0.9 - 0.9 * var(--p, 0))));
}
.sat-header--vetro .sat-nav .wp-block-navigation-item__content {
	color: var(--sat-vetro-ink-2);
	text-shadow: var(--sat-vetro-ombra);
}
/* La voce attiva resta riconoscibile nei due stati: qui il colore pieno, e
   la barretta oro sotto continua a metterla la regola base, che è più
   specifica di questa e non viene toccata. */
.sat-header--vetro .sat-nav .wp-block-navigation-item__content:hover,
.sat-header--vetro .sat-nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--sat-vetro-ink);
}
/* Dentro l'overlay del menu mobile il pannello è bianco e opaco: lì
   l'inchiostro chiaro sparirebbe, quindi si torna ai colori base. */
.sat-header--vetro .sat-nav .is-menu-open .wp-block-navigation-item__content,
.sat-header--vetro .sat-nav .is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
	text-shadow: none;
}
/* L'hamburger invece sta sul vetro, e segue l'inchiostro. */
.sat-header--vetro .sat-nav .wp-block-navigation__responsive-container-open {
	color: var(--sat-vetro-ink-2);
}
/* Sul vetro il pillolo oro ha un anello chiaro che lo distacca dalla foto;
   sulla barra bianca l'anello sparisce e resta l'ombra. */
.sat-header--vetro .sat-cta-pill .wp-block-button__link {
	box-shadow:
		0 0 0 calc(1.5px - 1.5px * var(--p, 0)) rgba(255, 255, 255, 0.6),
		0 10px 22px -12px rgba(114, 92, 0, calc(0.2 + 0.45 * var(--p, 0)));
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	/* senza sfocatura il vetro sarebbe illeggibile: fondo più coprente */
	.sat-header--vetro .sat-nav {
		background: rgba(255, 255, 255, calc(0.32 + 0.6 * var(--p, 0)));
	}
}
@supports not (color: color-mix(in srgb, #ffffff 50%, #000000)) {
	/* senza color-mix l'inchiostro interpolato non si calcola: barra piena e
	   colori della variante base, che è sempre leggibile. */
	.sat-header--vetro .sat-nav {
		background: rgba(255, 255, 255, 0.92);
	}
	.sat-header--vetro {
		--sat-vetro-ink: var(--wp--preset--color--primary-container);
		--sat-vetro-ink-2: var(--wp--preset--color--primary);
		--sat-vetro-ombra: none;
	}
}

@media (max-width: 782px) {
	/* sotto i 782px il nome del sito accanto al logo è già nascosto dalla
	   regola base e il menu è un overlay: la barra può essere più bassa. */
	.wp-site-blocks:has(.sat-header--vetro) {
		--sat-vetro-h: 4.5rem;
	}
	.sat-header--vetro .sat-brand__logo img {
		height: calc(2.25rem - 0.35rem * var(--p, 0));
	}
}

/* ---- Intestazioni in overlay · pagine senza copertina scura ---------------
   Vetro e riquadro escono dal flusso e si appoggiano sul contenuto: le voci
   di menu finiscono sopra la foto dell'hero, ed è lì che sono leggibili — il
   vetro perché sotto ha una fotografia scura, il riquadro perché la pastiglia
   bianca fa da sfondo al testo blu.

   Non tutte le pagine però cominciano con una copertina scura. La 404 no, e
   nemmeno una pagina costruita su `page-no-title`/`page-landing` il cui
   contenuto parta da una sezione chiara: lì il vetro non avrebbe niente su cui
   stagliarsi e il menu chiaro sparirebbe sul fondo bianco, mentre il riquadro
   coprirebbe l'inizio del testo. Su quelle pagine le due varianti partono già
   nello stato "scorso" — `--p: 1`, barra piena, inchiostro blu — e RIENTRANO
   nel flusso, così sotto di loro non finisce niente.

   La condizione non è «da qualche parte nella pagina c'è un hero» ma «il primo
   elemento sotto l'intestazione è un hero», che è la sola cosa che conta: un
   `.sat-hero` a metà pagina non copre il menu. Le due forme nella lista sono
   le due strutture che i template producono — la copertina scritta nel
   template (`page`, `single`, `single-sat_*`, `index`) è figlia diretta di
   `main`; quella che arriva dal pattern di pagina passa per `post-content`.
   Il verso è quello giusto anche in caso di dubbio: se la struttura cambiasse
   e il selettore non riconoscesse più l'hero, la barra parte solida — leggibile,
   solo non in overlay — invece di diventare invisibile.

   Il !important serve perché `--p` il JS lo scrive inline; questa regola sta in
   fondo al foglio perché deve vincere sui due blocchi di variante qui sopra. */
.wp-site-blocks:not(:has(> main > .sat-hero:first-child, > main > .wp-block-post-content > .sat-hero:first-child)) .sat-header--vetro,
.wp-site-blocks:not(:has(> main > .sat-hero:first-child, > main > .wp-block-post-content > .sat-hero:first-child)) .sat-header--riquadro {
	--p: 1 !important;
}
/* Rientro negativo tolto: la fascia torna a occupare il suo posto. Per il
   riquadro sparisce anche lo stacco sotto la pastiglia — a `--p: 1` è già
   incollata ai bordi, e quei 2,5rem sarebbero solo un vuoto sopra il testo. */
.wp-site-blocks:not(:has(> main > .sat-hero:first-child, > main > .wp-block-post-content > .sat-hero:first-child)) {
	--sat-riq-fascia: 0px;
}
.wp-site-blocks:not(:has(> main > .sat-hero:first-child, > main > .wp-block-post-content > .sat-hero:first-child)) > .wp-block-template-part:has(> .sat-header--vetro),
.wp-site-blocks:not(:has(> main > .sat-hero:first-child, > main > .wp-block-post-content > .sat-hero:first-child)) > .wp-block-template-part:has(> .sat-header--riquadro) {
	margin-block-end: 0;
	pointer-events: auto;
}

/* ---- Centratura ottica dell'hero sotto un'intestazione in overlay --------
   `core/cover` centra il contenuto nel proprio box. Ma con vetro o riquadro
   i primi 80–120 px di quel box stanno sotto la barra, quindi il testo è
   centrato in un'area che non si vede tutta e all'occhio pende in alto: su
   una pagina interna misurava 46 px di stacco sopra l'occhiello e 146 sotto
   l'ultima riga — un rapporto di 1 a 3 che si legge come un errore.

   Il rimedio è un `padding-top` pari all'occlusione. Pari, non metà: il box
   è `border-box` e la sua altezza è fissata da `min-height`, quindi il
   padding non allunga l'hero, restringe la scatola in cui il contenuto si
   centra — e un contenuto centrato in una scatola accorciata dall'alto di N
   scende di N/2, che è esattamente lo spostamento che serve.

   `--sat-occlusione` la dichiarano solo le due varianti in overlay; per la
   barra predefinita e per il crinale, che restano nel flusso e non coprono
   niente, non esiste e il fallback la porta a zero. Il selettore è lo stesso
   «primo elemento sotto l'intestazione» usato poco sopra: un hero a metà
   pagina non ha nessuna barra addosso e non va spostato. */
.wp-site-blocks > main > .sat-hero:first-child,
.wp-site-blocks > main > .wp-block-post-content > .sat-hero:first-child {
	padding-top: var(--sat-occlusione, 0px);
}


/* ---- Movimento -----------------------------------------------------------
   Il blocco sta in fondo al foglio, dopo ogni regola base dei componenti: le
   regole qui sotto riscrivono la trasformazione delle card e a parità di
   specificità decide chi è scritto per ultimo.

   Ogni regola è agganciata a [data-moto="pieno"], l'attributo che
   assets/js/moto.js scrive su <html>. Nel markup non c'è, e nell'editor a
   blocchi lo script non viene accodato: senza quel prefisso basterebbe una
   riga di `opacity: 0` per far sparire i blocchi dal canvas, dove il foglio è
   caricato lo stesso. Vale identico in pagina con JavaScript spento — quello
   che qui è "nascosto in attesa" là semplicemente non esiste. */

:root {
	/* Una curva sola e due durate per tutto il tema. La curva parte veloce e
	   si posa piano: è per questo che un movimento ampio non sembra lento.
	   --sat-passo è lo scarto fra un elemento e il successivo dello stesso
	   gruppo, moltiplicato per l'indice --i che scrive moto.js. */
	--sat-curva: cubic-bezier(.16, 1, .30, 1);
	--sat-durata: 1200ms;
	--sat-passo: 170ms;
}

/* ---- Entrata in vista ----------------------------------------------------
   Lo spostamento NON è scritto dentro `transform` ma in --su e --zoom, che la
   regola base dei componenti (.sat-card, .sat-cta-card, .sat-news-card) e
   quella dell'inclinazione rimettono ciascuna nella propria trasformazione.
   Scrivendolo direttamente qui le due regole si contenderebbero `transform` a
   parità di specificità e vincerebbe l'ultima del file: le card resterebbero
   senza entrata, in silenzio e senza niente in console.

   Niente `will-change`: i selettori da rivelare sono ventotto e su una
   pagina lunga diventano decine di elementi, cioè decine di layer di
   composizione tenuti in memoria video per una transizione che ciascuno fa
   una volta sola. Il will-change sta solo sui tre strati dell'hero e sulla
   barra di avanzamento, che si muovono a ogni fotogramma. */
[data-moto="pieno"] .sat-entra {
	--su: 34px;
	--zoom: 0.965;
	opacity: 0;
	transform: translateY(var(--su, 0px)) scale(var(--zoom, 1));
	filter: blur(6px);
	transition: opacity var(--sat-durata) var(--sat-curva),
	            transform var(--sat-durata) var(--sat-curva),
	            filter var(--sat-durata) var(--sat-curva);
	transition-delay: calc(var(--i, 0) * var(--sat-passo));
}
/* Lo stato di partenza si prende di scatto, l'arrivo si anima. Senza questa
   riga la classe `sat-entra`, che moto.js mette a pagina già disegnata, farebbe
   sfumare gli elementi DA visibile A nascosto: chi è già in vista al primo
   caricamento si vedrebbe sparire e poi tornare, che è il contrario
   dell'effetto. Il `:not()` smette di agganciare nel momento esatto in cui
   arriva `dentro`, e la transizione dichiarata qui sopra riprende valore — le
   transizioni CSS leggono la durata dallo stato di ARRIVO, quindi quella
   dell'entrata parte regolarmente.

   Vale anche per le card: la loro regola più in basso dichiara una transizione
   per `transform` che serve all'hover, e senza questa riga la card scivolerebbe
   giù di 34px in bella vista invece di trovarcisi già. */
[data-moto="pieno"] .sat-entra:not(.dentro) { transition: none; }

[data-moto="pieno"] .sat-entra.dentro {
	--su: 0px;
	--zoom: 1;
	opacity: 1;
	filter: none;
}

/* ---- Hero: apertura ------------------------------------------------------
   `sat-aperta` arriva sul <body> dopo due rAF, cioè a primo disegno fatto:
   l'apertura si vede partire da ferma invece di essere già a metà quando la
   pagina compare. L'occhiello si compatta da 0.4em a 0.2em — la spaziatura
   che la sua regola base dichiara — mentre sale: è lo stesso movimento del
   titolo letto in orizzontale.

   Gli scarti sono scritti a mano e non derivati da --i: moto.js assegna --i
   ai candidati all'entrata e alle righe del titolo, non a questi due, e un
   `calc()` su una variabile che nessuno scrive li farebbe partire insieme. */
[data-moto="pieno"] .sat-hero__eyebrow,
[data-moto="pieno"] .sat-hero .sat-btn-gold {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1100ms var(--sat-curva),
	            transform 1100ms var(--sat-curva),
	            letter-spacing 1400ms var(--sat-curva);
}
[data-moto="pieno"] .sat-hero__eyebrow {
	letter-spacing: 0.4em;
	transition-delay: 0ms;
}
[data-moto="pieno"] .sat-hero .sat-btn-gold { transition-delay: 560ms; }
[data-moto="pieno"] body.sat-aperta .sat-hero__eyebrow {
	opacity: 1;
	transform: none;
	letter-spacing: 0.2em;
}
[data-moto="pieno"] body.sat-aperta .sat-hero .sat-btn-gold {
	opacity: 1;
	transform: none;
}

/* ---- Hero: le righe del titolo salgono da dietro una mascherina ----------
   moto.js spezza l'h1 sul <br> già presente in patterns/hero-home.php e
   avvolge ogni riga in uno <span class="sat-riga"> con dentro un secondo
   <span>: la finestra sta ferma e taglia, il figlio sale. `display: block`
   serve su tutti e due, perché `overflow: hidden` su uno span inline non
   ritaglia niente.

   Il padding con margine negativo di pari misura non sposta nulla e tiene
   fuori dal taglio l'ombra del titolo (text-shadow 0 4px 24px, dalla regola
   base dell'hero) e le lettere che scendono sotto la linea di base: senza,
   la mascherina le troncherebbe con un bordo netto in mezzo alle due righe.
   Il figlio deve quindi scendere oltre il 100% della propria altezza per
   sparire davvero dietro la finestra, che ora è più alta di lui. */
/* Questa sta FUORI da [data-moto="pieno"], a differenza di tutto il resto del
   blocco, e per un motivo che vale la deroga: moto.js spezza il titolo prima
   di sapere se il movimento è acceso, e nello spezzarlo consuma il <br>. A
   movimento fermo le due righe resterebbero due span inline, cioè una riga
   sola — «SAT Pinzolo –Alta Rendena» tutto di seguito, proprio per chi ha
   chiesto meno animazioni. Le righe esistono solo se lo script le ha create,
   quindi la regola non aggancia niente nell'editor né a JavaScript spento. */
.sat-hero .sat-riga { display: block; }

[data-moto="pieno"] .sat-hero .sat-riga {
	overflow: hidden;
	padding-block: 0.12em;
	margin-block: -0.12em;
}
[data-moto="pieno"] .sat-hero .sat-riga > span {
	display: block;
	transform: translateY(125%);
	transition: transform 1400ms var(--sat-curva);
	transition-delay: calc(var(--i, 0) * 190ms);
}
[data-moto="pieno"] body.sat-aperta .sat-hero .sat-riga > span { transform: none; }

/* ---- Hero: parallasse ----------------------------------------------------
   --sy sono i pixel scorsi dentro l'hero e --uscita va da 0 (hero intero) a 1
   (hero uscito): li scrive moto.js a ogni fotogramma su .sat-hero, e ogni
   strato li moltiplica per un fattore diverso. È la differenza fra i fattori
   a leggersi come profondità, non il valore di uno solo.

   core/cover mette l'immagine in position:absolute con inset:0, cioè grande
   esattamente quanto l'hero: spostandola in giù scoprirebbe il bordo di
   sopra. La scala 1.12 le dà il 6% di margine sopra e sotto — su 820px sono
   ~49px — e il fattore 0.06 è scelto perché a fine hero lo spostamento valga
   esattamente quel margine, non un pixel di più.

   Il velo scuro (dim + gradiente) segue l'immagine con la stessa legge, o il
   tratto scoperto resterebbe senza velo. Il suo gradiente è a 90°, cioè
   orizzontale: allungarlo in verticale non lo deforma. */
[data-moto="pieno"] .sat-hero .wp-block-cover__image-background {
	transform: translateY(calc(var(--sy, 0px) * 0.06)) scale(1.12);
	will-change: transform;
}
[data-moto="pieno"] .sat-hero .wp-block-cover__background {
	transform: translateY(calc(var(--sy, 0px) * 0.06)) scaleY(1.12);
	will-change: transform;
}
[data-moto="pieno"] .sat-hero .wp-block-cover__inner-container {
	transform: translateY(calc(var(--sy, 0px) * 0.35));
	opacity: calc(1 - var(--uscita, 0) * 0.85);
	will-change: transform, opacity;
}
/* Su un hero basso lo scarto di 0.35 porta il testo oltre il bordo inferiore,
   dove la `overflow: clip` dell'hero lo taglia a metà riga. Succede dove il
   `clamp(420px, 78vh, 820px)` più in alto nel foglio accorcia l'hero, cioè su
   un telefono girato di lato: 420px di hero contro un blocco di testo alto
   240 non lasciano spazio a 147px di scarto. Il fattore ridotto ne lascia 75 e
   il testo resta dentro. Stessa condizione della regola che accorcia l'hero,
   perché è quella a creare il caso. */
@media (max-width: 781px) {
	[data-moto="pieno"] .sat-hero .wp-block-cover__inner-container {
		transform: translateY(calc(var(--sy, 0px) * 0.18));
	}
}

/* ---- Crinali: crescono entrando e derivano di lato -----------------------
   Il profilo si tira su dal bordo di sotto invece di comparire tutto intero:
   `transform-origin: bottom center` tiene fermo quel bordo, che è l'unico che
   non può muoversi — la sezione seguente ci sale sopra di 1px (vedi il
   commento a `.sat-sep + .sat-section`) per coprire la riga sub-pixel che
   l'SVG lascia avendo `preserveAspectRatio="none"` e altezza in vw.

   Quella correzione regge anche qui, ma per un motivo diverso da prima:
   `transform` fa contesto di impilamento, quindi da ora l'SVG si disegna
   SOPRA lo sfondo della sezione che lo segue invece che sotto. Il pixel
   frazionario in fondo si fonde quindi col fondo della sezione — che è
   esattamente il colore di cui l'SVG è riempito (sono le sette regole `:has()`
   più in alto nel foglio, che danno al profilo il tono della sezione
   seguente), e la fusione non si vede.

   La deriva laterale scoprirebbe una fetta di sfondo su un fianco, dove il
   profilo tocca il bordo: lo `scaleX(1.03)` allarga il disegno dell'1,5% per
   lato e la copre. Attenzione all'unità: `scaleX` scala la casella RESA, non
   le unità del viewBox, quindi quel margine vale 18px su un separatore largo
   1200 e 5,6px su un telefono da 375. È per questo che moto.js non usa
   un'ampiezza fissa ma la stessa frazione della larghezza (`DERIVA_FRAZIONE`,
   con 18px come tetto): così la copertura vale a ogni misura invece che solo
   su desktop. Il ritaglio è di .sat-sep, che ha già `overflow: hidden`. Nessun `will-change`: i separatori su una pagina
   sono una dozzina, e la deriva è la prima cosa da togliere se lo scorrimento
   cede su telefono. */
[data-moto="pieno"] .sat-sep svg {
	transform-origin: bottom center;
	transform: translateX(var(--deriva, 0px)) scaleX(1.03) scaleY(0.55);
	transition: transform 1400ms var(--sat-curva);
}
[data-moto="pieno"] .sat-sep.dentro svg {
	transform: translateX(var(--deriva, 0px)) scaleX(1.03) scaleY(1);
}

/* ---- Filetto oro sotto la testa di sezione -------------------------------
   Nessun elemento nuovo nel markup: la riga è un ::after della testa, che
   moto.js rivela come qualsiasi altro componente. Sta in position:absolute e
   non nel flusso perché nel ramo con il rimando a destra la testa di sezione
   è un contenitore flex, e uno pseudo-elemento nel flusso vi entrerebbe come
   terzo elemento spaccando lo `space-between` fra titolo e rimando; da
   assoluto ne esce, e il ramo senza rimando si comporta uguale.

   Il `position: relative` è ridondante finché la testa porta la trasformazione
   dell'entrata, che fa già da blocco contenitore, ma non dipendere da quella
   costa una riga. Il filetto vive nello stacco che la testa lascia sotto di
   sé, quindi non sposta niente. */
[data-moto="pieno"] .sat-section__head { position: relative; }
[data-moto="pieno"] .sat-section__head::after {
	content: "";
	position: absolute;
	inset-block-end: -0.75rem;
	inset-inline-start: 0;
	width: 4rem;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--secondary-container);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1250ms var(--sat-curva);
	transition-delay: 380ms;
}
[data-moto="pieno"] .sat-section__head.dentro::after { transform: scaleX(1); }

/* ---- Card: inclinazione sotto il puntatore e lampo di luce ---------------
   Queste due regole stanno DOPO `.sat-entra.dentro` di proposito:
   `[data-moto="pieno"] .sat-entra.dentro` e `[data-moto="pieno"]
   .sat-card:hover` pesano uguale (0,3,0) e decide l'ordine nel file. Scritte
   prima, il `--su: 0px` dell'entrata cancellerebbe il sollevamento in hover
   appena la card è entrata in vista — cioè sempre.

   Sono fuori dal @media qui sotto perché sono solo valori di variabili: le
   legge la trasformazione dell'entrata anche dove il puntatore non è fine, e
   là il sollevamento in hover continua a funzionare come prima. La riga delle
   news card non aggiunge niente, ripete il valore della propria regola base:
   serve solo a rimetterlo sopra al `--su: 0px` dell'entrata. */
[data-moto="pieno"] .sat-card:hover,
[data-moto="pieno"] .sat-cta-card:hover {
	--su: -10px;
	--zoom: 1.02;
}
[data-moto="pieno"] .sat-news-card:hover { --su: -0.25rem; }

/* L'inclinazione dipende dal puntatore: al tocco resterebbe accesa dopo il
   tap, con la card storta finché non si tocca altrove. moto.js scrive --rx e
   --ry, in gradi, e il limite di 6° lo impone lui — qui si legge e basta. */
@media (hover: hover) and (pointer: fine) {
	[data-moto="pieno"] .sat-card,
	[data-moto="pieno"] .sat-cta-card {
		/* Le stesse --su e --zoom dell'entrata: la card le rimette nella
		   propria trasformazione insieme all'inclinazione, invece di
		   sovrascriverle. La `transform` sull'entrata resta più in alto nel
		   file e a parità di specificità perde: è voluto. */
		transform: perspective(900px)
		           rotateX(var(--rx, 0deg))
		           rotateY(var(--ry, 0deg))
		           translateY(var(--su, 0px))
		           scale(var(--zoom, 1));
		transition: transform 650ms var(--sat-curva),
		            box-shadow 650ms var(--sat-curva),
		            opacity var(--sat-durata) var(--sat-curva),
		            filter var(--sat-durata) var(--sat-curva);
		transition-delay: calc(var(--i, 0) * var(--sat-passo));
	}
	[data-moto="pieno"] .sat-card:hover {
		box-shadow: 0 34px 60px -24px rgba(0, 73, 128, 0.45);
	}
	[data-moto="pieno"] .sat-cta-card:hover {
		box-shadow: 0 40px 70px -24px rgba(0, 73, 128, 0.5);
	}
	[data-moto="pieno"] .sat-cta-card:hover::before {
		transform: scale(1.18) rotate(4deg);
	}

	/* Il lampo di luce attraversa la card da sinistra a destra. È un ::after
	   della card, che è libero: quello già in uso — l'area cliccabile della
	   issue #2 — sta su un discendente (`.sat-cta-card__title a::after`), non
	   sulla card. Niente z-index, così il lampo passa SOTTO il titolo, che ha
	   z-index 1: sopra, sbianca il testo mentre transita. `pointer-events:
	   none` perché l'area cliccabile è più in alto e il lampo non deve
	   toglierle il clic. Solo sulle tre card colorate: sulla quarta, che è
	   bianca con il bordo, un lampo bianco non si vedrebbe. */
	[data-moto="pieno"] .sat-cta-card--blue::after,
	[data-moto="pieno"] .sat-cta-card--gold::after,
	[data-moto="pieno"] .sat-cta-card--green::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(105deg,
		            transparent 35%,
		            rgba(255, 255, 255, 0.42) 50%,
		            transparent 65%);
		transform: translateX(-120%);
		transition: transform 1300ms var(--sat-curva);
		pointer-events: none;
	}
	[data-moto="pieno"] .sat-cta-card--blue:hover::after,
	[data-moto="pieno"] .sat-cta-card--gold:hover::after,
	[data-moto="pieno"] .sat-cta-card--green:hover::after {
		transform: translateX(120%);
	}
}

/* ---- Barra di avanzamento della lettura ----------------------------------
   L'elemento lo stampa moto.js come primo figlio del <body> e ne aggiorna
   --letto da 0 a 1. Si tira in orizzontale con una scala invece che con la
   larghezza: la larghezza è una proprietà di layout e la ricalcolerebbe a
   ogni fotogramma. Lo z-index sta sopra il 50 dell'intestazione, che è
   sticky, o la barra le scorrerebbe dietro. */
[data-moto="pieno"] .sat-avanzamento {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--wp--preset--color--secondary-container);
	transform: scaleX(var(--letto, 0));
	transform-origin: left center;
	z-index: 60;
	pointer-events: none;
	will-change: transform;
}

/* ---- Movimento spento ----------------------------------------------------
   Con `prefers-reduced-motion: reduce` moto.js scrive data-moto="fermo": non
   c'è nessun [data-moto="pieno"], quindi tutto quello che sta qui sopra non
   aggancia niente e non resta niente di nascosto. Restano da fermare le
   animazioni e le transizioni che il tema aveva già per conto suo — il marquee
   degli avvisi prima di tutto, che è l'unica animazione infinita del foglio.

   Basta il carattere jolly, e non serve nominare il marquee: `!important`
   vince a prescindere dalla specificità, ed è lo stesso ragionamento per cui
   il blocco `prefers-reduced-motion` più in alto ha smesso di spegnere le
   animazioni una per nome. Non c'è nemmeno una riga per la barra di
   avanzamento: moto.js non la stampa a movimento fermo e la RIMUOVE dal
   documento se il movimento viene spento a pagina aperta (`togliBarra()`),
   quindi non esiste uno stato in cui un `.sat-avanzamento` e questo attributo
   coesistano — una regola per nasconderla sarebbe irraggiungibile. */
[data-moto="fermo"] * {
	transition: none !important;
	animation: none !important;
}