/* ==========================================================================
   FHS Italia — main.css
   Token, reset, tipografia, layout, header, footer, componenti base.

   Ordine dei blocchi (non cambiarlo: la cascata dipende da questo)
     1. Font
     2. Token
     3. Reset
     4. Tipografia
     5. Layout
     6. Bottoni e form
     7. Header
     8. Footer
     9. Utility e animazioni
   ========================================================================== */

/* 1. FONT ================================================================= */

/* Rubik variabile: un solo file per i pesi 300-900.
   `font-display: swap` — il testo è leggibile subito col fallback,
   il font subentra appena disponibile. Mai `block`: nascondere il testo
   per far arrivare un font è una scelta che paga l'utente. */
@font-face {
	font-family: 'Rubik';
	src: url('../fonts/rubik-var-latin.woff2') format('woff2');
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
	               U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
	               U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. TOKEN ================================================================ */

:root {
	/* Colore — palette del brand, dal kit "water" del vecchio sito */
	--c-abyss:    #03162E;  /* testo e fondi profondi */
	--c-navy:     #2C4E7A;  /* primario */
	--c-navy-d:   #0A2547;
	--c-tide:     #3A7CBA;  /* azzurro medio — superfici e icone */
	--c-link:     #3170AC;  /* link testuali: 5,19:1 su bianco, 4,57:1 su --c-mist */
	--c-aqua:     #85CBCE;  /* secondario */
	--c-aqua-d:   #5FB8BC;  /* variante scura — SOLO superfici, bordi, icone decorative:
	                           su bianco misura 2,32:1, NON basta per il testo */
	--c-aqua-ink: #357B80;  /* la stessa famiglia, ma leggibile: 4,89:1 su bianco,
	                           4,52:1 su --c-foam. Questo va usato per il TESTO */
	--c-aqua-l:   #D6EEEF;
	--c-foam:     #EEF8F9;  /* neutro chiaro, virato acqua */
	--c-mist:     #EDF1F4;  /* neutro grigio, virato blu */
	--c-white:    #FFFFFF;
	--c-ink:      #03162E;
	--c-ink-soft: #4A5C72;  /* testo secondario: 7.1:1 su bianco */
	--c-focus:    #FFB020;  /* unico colore caldo: massimo stacco su navy e acqua */
	--c-error:    #C0392B;

	/* Tipografia — scala fluida, nessun salto tra breakpoint */
	--f-base:    'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--fs-hero:   clamp(2.5rem, 1.5rem + 4.4vw, 5rem);
	--fs-h1:     clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
	--fs-h2:     clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
	--fs-h3:     clamp(1.2rem, 1.08rem + .6vw, 1.5rem);
	--fs-h4:     1.05rem;
	--fs-body:   clamp(1rem, .96rem + .2vw, 1.1rem);
	--fs-small:  .875rem;
	--fs-eyebrow: .78rem;

	/* Spazio — scala a passo ~1.5 */
	--s1: .5rem;  --s2: .75rem; --s3: 1rem;  --s4: 1.5rem;
	--s5: 2rem;   --s6: 3rem;   --s7: 4rem;  --s8: 6rem;
	--section-y: clamp(4rem, 8vw, 7.5rem);

	/* Layout */
	--wrap: 1240px;
	--wrap-narrow: 820px;
	--gutter: clamp(1.25rem, 5vw, 4rem);

	/* Forma */
	--radius: 14px;
	--radius-lg: 26px;
	--radius-pill: 999px;

	/* Ombre — sempre virate blu, mai nero puro */
	--sh1: 0 2px 8px rgba(3, 22, 46, .06);
	--sh2: 0 14px 36px rgba(3, 22, 46, .12);
	--sh3: 0 28px 70px rgba(3, 22, 46, .20);

	/* Movimento */
	--ease: cubic-bezier(.16, 1, .3, 1);
	--t-fast: 180ms;
	--t: 320ms;
	--t-slow: 640ms;

	/* Altezza header, letta dal JS per gli offset di scroll */
	--header-h: 72px;
}

/* 3. RESET ================================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Le ancore interne non devono finire sotto l'header sticky */
	scroll-padding-top: calc(var(--header-h) + var(--s4));
}

body {
	margin: 0;
	font-family: var(--f-base);
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--c-ink);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
	/* `clip` e non `hidden`: hidden su body rompe position:sticky */
	overflow-x: clip;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* Focus visibile ovunque. Non rimuovere: è l'unico modo di navigare
   il sito da tastiera. */
:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Salto al contenuto — primo elemento focusabile della pagina */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--s3) var(--s4);
	background: var(--c-abyss);
	color: #fff;
	text-decoration: none;
	border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

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

/* 4. TIPOGRAFIA =========================================================== */

h1, h2, h3, h4 {
	margin: 0 0 var(--s4);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.022em;
	text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -.032em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p { margin: 0 0 var(--s4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--c-navy); }

strong, b { font-weight: 600; }

/* Corpo editoriale — il contenuto migrato da Elementor finisce qui dentro */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { margin-top: var(--s6); }
.prose h3 { margin-top: var(--s5); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose img, .prose figure { border-radius: var(--radius); }
.prose figure { margin-inline: 0; }
.prose figcaption { font-size: var(--fs-small); color: var(--c-ink-soft); margin-top: var(--s2); }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--c-mist); text-align: left; }
/* Le tabelle non devono mai far scrollare la pagina in orizzontale */
.prose .table-scroll { overflow-x: auto; }

/* Occhiello — elemento firma del tema: label + trattino sopra i titoli */
.eyebrow {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin: 0 0 var(--s3);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-aqua-ink);
}
.eyebrow::before {
	content: "";
	flex: none;
	width: 26px;
	height: 2px;
	background: currentColor;
}
.eyebrow--center { justify-content: center; }

/* 5. LAYOUT =============================================================== */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
/* L'header usa un contenitore piu ampio del contenuto: il menu ha 8 voci
   e a 1240px risultava compresso contro il logo. */
.wrap--wide { max-width: 1480px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--foam { background: var(--c-foam); }
.section--mist { background: var(--c-mist); }

/* Sezione scura: usata per creare ritmo fra le fasce chiare */
.section--dark {
	position: relative;
	overflow: hidden;
	background: var(--c-abyss);
	color: #fff;
}
.section--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 15% 0%, rgba(58, 124, 186, .34), transparent 62%),
		radial-gradient(90% 80% at 92% 100%, rgba(133, 203, 206, .20), transparent 60%);
}
.section--dark > * { position: relative; }
.section--dark .eyebrow { color: var(--c-aqua); }
.section--dark .lead { color: #B9CBDD; }

.lead {
	max-width: 62ch;
	margin: 0 0 var(--s4);
	color: var(--c-ink-soft);
}

/* Full-bleed: esce dal wrap senza rompere il flusso.
   `overflow-x: clip` su body impedisce la barra orizzontale. */
.bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* 6. BOTTONI E FORM ======================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .95rem 2rem;
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--t-fast) var(--ease),
	            background var(--t-fast),
	            color var(--t-fast),
	            box-shadow var(--t-fast);
}
.btn svg { flex: none; }

.btn--primary { background: var(--c-aqua); color: var(--c-abyss); }
.btn--primary:hover { background: var(--c-aqua-d); color: var(--c-abyss); transform: translateY(-2px); box-shadow: var(--sh2); }

.btn--dark { background: var(--c-navy); color: #fff; }
.btn--dark:hover { background: var(--c-navy-d); color: #fff; transform: translateY(-2px); box-shadow: var(--sh2); }

.btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--c-abyss); transform: translateY(-2px); }

.btn--outline { border-color: var(--c-navy); color: var(--c-navy); }
.btn--outline:hover { background: var(--c-navy); color: #fff; transform: translateY(-2px); }

/* Elenco con spunte — ricorre in hero, sezioni servizio, landing */
.ticks { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: .7rem; }
.ticks li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.5; }
.ticks svg { flex: none; margin-top: 4px; color: var(--c-aqua-ink); }
.section--dark .ticks svg { color: var(--c-aqua); }
.ticks--inline { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }

/* 7. HEADER =============================================================== */

.site-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 40;
	transition: background var(--t) var(--ease), box-shadow var(--t);
}
/* Sulle pagine senza hero l'header è subito solido, altrimenti il testo
   bianco finirebbe su fondo bianco. */
body:not(.is-home):not(.has-hero) .site-header {
	position: relative;
	background: var(--c-white);
	box-shadow: var(--sh1);
}
.site-header.is-stuck {
	position: fixed;
	background: rgba(255, 255, 255, .93);
	backdrop-filter: blur(14px);
	box-shadow: var(--sh1);
}

.topbar {
	border-bottom: 1px solid rgba(255, 255, 255, .16);
	transition: opacity var(--t), max-height var(--t);
}
.site-header.is-stuck .topbar { opacity: 0; max-height: 0; overflow: hidden; border-color: transparent; }
.topbar__in {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s4);
	padding-block: .6rem;
	font-size: .83rem;
	color: rgba(255, 255, 255, .9);
}
.topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: var(--c-aqua); }
.topbar__group { display: flex; gap: var(--s4); align-items: center; }
body:not(.is-home):not(.has-hero) .topbar { border-bottom-color: var(--c-mist); }
body:not(.is-home):not(.has-hero) .topbar__in { color: var(--c-ink-soft); }
@media (max-width: 1023px) { .topbar { display: none; } }

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s5);
	padding-block: 1.35rem;
	transition: padding var(--t) var(--ease);
}
.site-header.is-stuck .navbar { padding-block: .8rem; }

.site-logo { display: flex; align-items: center; text-decoration: none; }
.site-logo img { max-height: 68px; width: auto; transition: max-height var(--t) var(--ease); }
.site-header.is-stuck .site-logo img { max-height: 52px; }
/* Il logo standard è pensato per fondo chiaro: sopra l'hero serve la variante
   bianca. Si scambiano per opacità, così non c'è flash al cambio di stato. */
.site-logo__light, .site-logo__dark { grid-area: 1 / 1; transition: opacity var(--t); }
.site-logo--swap { display: grid; }
.site-logo__dark { opacity: 0; }
.site-header.is-stuck .site-logo__light { opacity: 0; }
.site-header.is-stuck .site-logo__dark { opacity: 1; }
body:not(.is-home):not(.has-hero) .site-logo__light { opacity: 0; }
body:not(.is-home):not(.has-hero) .site-logo__dark { opacity: 1; }

/* 7b. NAVIGAZIONE ========================================================= */

.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1.1rem, 1.9vw, 2.4rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav__item { position: relative; display: flex; align-items: center; gap: .15rem; }

.nav__link {
	position: relative;
	display: block;
	padding-block: .5rem;
	font-size: .95rem;
	font-weight: 500;
	letter-spacing: .01em;
	text-decoration: none;
	color: #fff;
	transition: color var(--t-fast);
	white-space: nowrap;
}
.nav__link::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 2px;
	background: var(--c-aqua);
	transition: width var(--t-fast) var(--ease);
}
.nav__link:hover::after,
.nav__item.is-current > .nav__link::after { width: 100%; }

.site-header.is-stuck .nav__link,
body:not(.is-home):not(.has-hero) .nav__link { color: var(--c-abyss); }
.site-header.is-stuck .nav__link:hover,
body:not(.is-home):not(.has-hero) .nav__link:hover { color: var(--c-navy); }

.nav__toggle {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: transform var(--t-fast) var(--ease), background var(--t-fast);
}
.nav__item.is-open > .nav__toggle { transform: rotate(180deg); }
.site-header.is-stuck .nav__toggle,
body:not(.is-home):not(.has-hero) .nav__toggle { color: var(--c-abyss); }

.nav__submenu {
	list-style: none;
	margin: 0;
	padding: var(--s2);
	min-width: 265px;
}

.nav__cta { display: none; }

/* Azioni a destra dell'header: CTA + burger */
.navbar__actions { display: flex; align-items: center; gap: var(--s2); }

.btn--sm { padding: .62rem 1.15rem; font-size: .85rem; }

.navbar__quote { white-space: nowrap; }
/* Sotto i 1180px il bottone resterebbe schiacciato contro il menu:
   sparisce e la CTA resta comunque nel pannello mobile. */
@media (max-width: 1180px) and (min-width: 901px) { .navbar__quote { display: none; } }
@media (max-width: 420px) { .navbar__quote span { display: none; } .navbar__quote { padding: .62rem .8rem; } }

/* ── Desktop: sottomenu in dropdown ── */
@media (min-width: 901px) {
	.nav__submenu {
		position: absolute;
		top: calc(100% + 10px); left: -1rem;
		z-index: 10;
		background: var(--c-white);
		border-radius: var(--radius);
		box-shadow: var(--sh2);
		border-top: 3px solid var(--c-aqua);
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity var(--t-fast) var(--ease),
		            transform var(--t-fast) var(--ease),
		            visibility var(--t-fast);
	}
	/* Ponte invisibile fra voce e dropdown: senza, spostando il mouse verso
	   il sottomenu si attraversano 10px di vuoto e il menu si chiude. */
	.nav__item--top::after {
		content: "";
		position: absolute;
		top: 100%; left: 0; right: 0;
		height: 12px;
	}
	/* Punta che collega il dropdown alla voce di menu. */
	.nav__submenu::before {
		content: "";
		position: absolute;
		bottom: 100%; left: 1.6rem;
		border: 7px solid transparent;
		border-bottom-color: var(--c-aqua);
	}
	/* :focus-within apre il dropdown anche navigando da tastiera,
	   senza bisogno di JavaScript. */
	.nav__item--top:hover > .nav__submenu,
	.nav__item--top:focus-within > .nav__submenu,
	.nav__item--top.is-open > .nav__submenu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.nav__submenu .nav__link {
		color: var(--c-ink);
		padding: .55rem .75rem;
		border-radius: 8px;
		font-size: .875rem;
		white-space: normal;
	}
	.nav__submenu .nav__link::after { display: none; }
	.nav__submenu .nav__link:hover { background: var(--c-foam); color: var(--c-navy); }
}

/* ── Burger ── */
.nav-burger {
	display: none;
	padding: .5rem;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}
.site-header.is-stuck .nav-burger,
body:not(.is-home):not(.has-hero) .nav-burger { color: var(--c-abyss); }
.nav-burger__box { display: grid; gap: 5px; width: 26px; }
.nav-burger__bar {
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--t) var(--ease), opacity var(--t-fast);
}
body.nav-open .nav-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-burger__bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile: pannello a tutta pagina ── */
@media (max-width: 900px) {
	.nav-burger { display: block; }

	.nav {
		position: fixed;
		inset: 0;
		z-index: 45;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--s5);
		padding: var(--s8) var(--gutter) var(--s6);
		background: var(--c-abyss);
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity var(--t) var(--ease),
		            transform var(--t) var(--ease),
		            visibility var(--t);
	}
	body.nav-open { overflow: hidden; }
	body.nav-open .nav { opacity: 1; visibility: visible; transform: none; }

	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__item { flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .1); }
	.nav__link {
		flex: 1;
		color: #fff !important;
		font-size: 1.15rem;
		padding-block: .95rem;
	}
	.nav__link::after { display: none; }
	.nav__toggle { color: #fff !important; width: 44px; height: 44px; }

	/* Fisarmonica: chiusa di default, si apre col bottone. */
	.nav__submenu {
		flex-basis: 100%;
		display: grid;
		grid-template-rows: 0fr;
		padding: 0;
		transition: grid-template-rows var(--t) var(--ease);
	}
	.nav__item.is-open > .nav__submenu { grid-template-rows: 1fr; }
	.nav__submenu > * { overflow: hidden; }
	.nav__submenu .nav__link { font-size: .98rem; opacity: .82; padding-left: var(--s3); }

	.nav__cta { display: block; margin-top: var(--s4); }
	.nav__cta .btn { width: 100%; justify-content: center; }
}

/* Breadcrumb (markup generato da SEOPress) */
.breadcrumb {
	font-size: var(--fs-small);
	color: var(--c-ink-soft);
	margin-bottom: var(--s4);
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--c-navy); text-decoration: underline; }

/* 8. FOOTER =============================================================== */

.site-footer {
	background: var(--c-abyss);
	color: #94AEC6;
	font-size: .9rem;
	padding-top: var(--section-y);
}
.site-footer a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
.site-footer a:hover { color: var(--c-aqua); }
.site-footer h2, .site-footer h3 {
	color: #fff;
	font-size: .8rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin: 0 0 var(--s3);
	font-weight: 600;
}
.footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
	gap: var(--s6) var(--s5);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.footer__legal {
	margin-top: var(--s7);
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-block: var(--s4);
	font-size: .76rem;
	color: #6E8AA6;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	justify-content: space-between;
}
.footer__legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; }

.social { display: flex; gap: .75rem; list-style: none; margin: var(--s3) 0 0; padding: 0; }
.social a {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	transition: background var(--t-fast), transform var(--t-fast);
}
.social a:hover { background: var(--c-aqua); color: var(--c-abyss); transform: translateY(-2px); }

/* Mappa: placeholder click-to-load. L'iframe Google non parte finché
   Complianz non ha registrato il consenso. Requisito GDPR, non estetico. */
.map-consent {
	margin-top: var(--s3);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--radius);
	overflow: hidden;
	background: linear-gradient(150deg, #0d2742, #16385a);
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	text-align: center;
	padding: var(--s4);
}
.map-consent svg { margin: 0 auto .5rem; color: var(--c-aqua); }
.map-consent p { font-size: .78rem; color: #A9C0D6; line-height: 1.55; margin: 0; }
.map-consent iframe { width: 100%; height: 100%; border: 0; }

/* 8b. COMPONENTI CONDIVISI ================================================
   Stanno qui, e non in sections.css o blog.css, perché servono sia alle
   pagine sia al blog sia alla 404: ognuno di quei due file si carica solo
   su una parte del sito. */

/* ── Hero di pagina ── */
.page-hero { position: relative; isolation: isolate; overflow: hidden; }
.page-hero--plain {
	background: var(--c-foam);
	padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2rem, 5vw, 3.5rem);
}
.page-hero--media {
	display: grid;
	align-items: end;
	min-height: min(58svh, 520px);
	background: var(--c-abyss);
	color: #fff;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(3, 22, 46, .55) 0%,
		rgba(3, 22, 46, .72) 55%,
		rgba(3, 22, 46, .92) 100%);
}
.page-hero--media .breadcrumb,
.page-hero--media .breadcrumb a { color: #B9CBDD; }
.page-hero--media .eyebrow { color: var(--c-aqua); }
.page-hero__inner { position: relative; padding-block: clamp(2rem, 5vw, 3.5rem); }
.page-hero--media .page-hero__inner { padding-top: clamp(7rem, 16vh, 10rem); }
.page-hero__title { max-width: 22ch; margin-bottom: var(--s3); }
.page-hero--media .page-hero__title { color: #fff; }
.page-hero__sub { max-width: 58ch; font-size: 1.05rem; color: var(--c-ink-soft); }
.page-hero--media .page-hero__sub { color: #C7DAEA; }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.page-hero__search { max-width: 420px; margin-top: var(--s4); }

/* ── Card generica ── */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s4);
	margin: var(--s6) 0 0;
	padding: 0;
	list-style: none;
}
.cards--compact { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--c-mist);
	border-radius: var(--radius-lg);
	background: var(--c-white);
	box-shadow: var(--sh1);
	transition: transform var(--t) var(--ease), box-shadow var(--t);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh2); }
.card__figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-mist); }
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.card:hover .card__img { transform: scale(1.06); }
.card__body { display: flex; flex-direction: column; flex: 1; padding: var(--s4); }
.card__title { margin: 0 0 var(--s2); font-size: 1.15rem; line-height: 1.25; }
.card__text { margin: 0 0 var(--s3); font-size: .92rem; line-height: 1.6; color: var(--c-ink-soft); }

/* Il link copre tutta la card: un solo elemento tabulabile, un solo
   annuncio per lo screen reader. Il focus si mostra sulla card intera. */
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:hover { color: var(--c-navy); }
.card-link:focus-visible { outline: none; }
.card:focus-within { outline: 3px solid var(--c-focus); outline-offset: 3px; }

.card__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: auto;
	font-size: .85rem;
	font-weight: 600;
	color: var(--c-link);
}
.card__more svg { transition: transform var(--t-fast) var(--ease); }
.card:hover .card__more svg { transform: translateX(3px); }

.card--link { text-align: center; }
.card--link .card-link { display: grid; gap: .6rem; justify-items: center; padding: var(--s4); font-weight: 600; }
.card--link svg { color: var(--c-tide); }

/* ── Paginazione ── */
.pagination { margin-top: var(--s7); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: .6rem;
	border-radius: var(--radius);
	background: var(--c-foam);
	color: var(--c-navy);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: background var(--t-fast), color var(--t-fast);
}
.pagination .page-numbers:hover { background: var(--c-aqua-l); }
.pagination .page-numbers.current { background: var(--c-navy); color: #fff; }
.pagination .dots { background: none; }
.page-links { display: flex; gap: .4rem; margin-top: var(--s5); font-size: .9rem; }

/* ── Modulo di ricerca ── */
.search-form { display: flex; gap: .5rem; }
.search-form__field {
	flex: 1;
	min-width: 0;
	padding: .8rem 1rem;
	border: 1.5px solid var(--c-mist);
	border-radius: var(--radius-pill);
	background: var(--c-white);
	font-size: .95rem;
	transition: border-color var(--t-fast);
}
.search-form__field:focus { border-color: var(--c-tide); outline: none; }
.search-form__submit {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px; height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--c-navy);
	color: #fff;
	cursor: pointer;
	transition: background var(--t-fast), transform var(--t-fast);
}
.search-form__submit:hover { background: var(--c-navy-d); transform: scale(1.05); }

/* ── Stati vuoti e 404 ── */
.empty-state { margin-inline: auto; text-align: center; }
.empty-state__links {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	justify-content: center;
	margin: var(--s4) 0 0;
	padding: 0;
	list-style: none;
}
.empty-state__links a {
	display: inline-block;
	padding: .5rem 1rem;
	border-radius: var(--radius-pill);
	background: var(--c-foam);
	color: var(--c-navy);
	font-size: .9rem;
	font-weight: 500;
	text-decoration: none;
}
.empty-state__links a:hover { background: var(--c-aqua-l); }
.error-404 { padding-block: clamp(4rem, 10vw, 8rem); }
.error-404__search { max-width: 420px; margin: var(--s5) auto 0; }
.error-404__help { margin-top: var(--s6); font-size: .95rem; color: var(--c-ink-soft); }
.error-404__help a { font-weight: 600; }

/* 8c. COMPATIBILITÀ IMAGIFY ===============================================
   Imagify serve le immagini in WebP incapsulando l'<img> dentro un <picture>
   e SPOSTANDO classi e attributi dall'immagine al contenitore. Il risultato
   è che `object-fit`, `aspect-ratio` e `border-radius` finiscono sul
   <picture> — dove object-fit non ha alcun effetto — e l'immagine reale
   resta senza ritaglio, deformando la sezione.

   Queste regole ripassano il comportamento all'<img> interno. Valgono anche
   se Imagify viene disattivato: senza <picture> in pagina, non fanno nulla. */

picture.hero__img,
picture.page-hero__img,
picture.feature__img,
picture.card__img,
picture.post-card__img,
picture.lp-hero__img { display: block; }

picture.hero__img > img,
picture.page-hero__img > img,
picture.lp-hero__img > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

picture.feature__img > img,
picture.card__img > img,
picture.post-card__img > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* Le proporzioni dichiarate sul contenitore vanno ereditate dall'immagine,
   altrimenti il riquadro è alto quanto la foto originale e il CLS torna. */
picture.feature__img { aspect-ratio: 4 / 3; }
picture.card__img,
picture.post-card__img { width: 100%; height: 100%; }

/* Stessa cosa dentro la galleria e le card: lì il <picture> sta fra il
   bottone e l'immagine. */
.gallery__item > picture,
.card__figure > picture,
.post-card__figure > picture { display: block; width: 100%; height: 100%; }
.gallery__item > picture > img,
.card__figure > picture > img,
.post-card__figure > picture > img { width: 100%; height: 100%; object-fit: cover; }

/* 9. UTILITY E ANIMAZIONI ================================================= */

/* Reveal allo scroll.
   Lo stato iniziale si applica SOLO con la classe `js` sull'elemento root:
   senza JavaScript nessun contenuto resta invisibile. */
.js .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Rispetto delle preferenze di movimento.
   Vale per tutto il tema: reveal, slider, parallax, counter, Ken Burns. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	html { scroll-behavior: auto; }
	.js .reveal { opacity: 1; transform: none; }
}

/* Stampa: via header, footer, decorazioni. */
@media print {
	.site-header, .site-footer, .hero__controls, .btn, .social { display: none !important; }
	body { color: #000; background: #fff; }
	.section { padding-block: 1rem; }
}

/* ── NEWSLETTER (footer) ───────────────────────────────────────────────── */

.newsletter { margin-top: var(--s5); }
.newsletter__title {
	color: #fff;
	font-size: .8rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin: 0 0 var(--s2);
	font-weight: 600;
}
.newsletter__intro { margin: 0 0 var(--s3); font-size: .86rem; line-height: 1.55; }

.newsletter__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.newsletter__row input[type="email"] {
	flex: 1 1 12rem;
	min-width: 0;
	padding: .8rem 1rem;
	border: 1.5px solid rgba(255, 255, 255, .18);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-size: .92rem;
	transition: border-color var(--t-fast), background var(--t-fast);
}
.newsletter__row input[type="email"]::placeholder { color: #7E97AF; }
.newsletter__row input[type="email"]:focus {
	border-color: var(--c-aqua);
	background: rgba(255, 255, 255, .1);
	outline: none;
}
.newsletter__row .btn { padding-inline: 1.4rem; white-space: nowrap; }

.newsletter__consent {
	display: flex;
	gap: .55rem;
	align-items: flex-start;
	margin-top: var(--s3);
	font-size: .76rem;
	line-height: 1.5;
	cursor: pointer;
}
.newsletter__consent input {
	flex: none;
	width: 16px; height: 16px;
	margin-top: .12rem;
	accent-color: var(--c-aqua);
}
.newsletter__consent a { text-decoration: underline; }

.newsletter__note { margin: var(--s3) 0 0; font-size: .74rem; color: #6E8AA6; line-height: 1.5; }

/* Campo esca: fuori dallo schermo, non `display:none` — i bot saltano
   quello che è dichiarato nascosto, ma compilano quello che trovano. */
.newsletter__trap {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

@media (max-width: 560px) {
	.newsletter__row .btn { width: 100%; justify-content: center; }
}