/*
 * Sa Cruxitta: foglio di stile del tema.
 *
 * Mobile-first, cascade-first. I token arrivano da theme.json (variabili
 * --wp--preset--*) e qui ricevono alias brevi. Le sezioni del sito sono
 * gruppi dell'editor con una classe "sc-*"; dentro, i selettori sono strutturali.
 *
 * Sistema visivo, in breve:
 * - due superfici che si alternano, bianco e sabbia, più le copertine fotografiche
 *   con velatura ardesia: il ritmo della pagina nasce da qui, non da ombre o bordi;
 * - una sola voce per i titoli (Raleway) e una per il testo (Lora); DM Mono solo
 *   per date e tempi nelle pagine eventi;
 * - occhiello, titolo, testo: la stessa terna apre ogni sezione, con le stesse distanze;
 * - teal scuro per tutto ciò che è cliccabile o segnala (link, pulsanti, icone),
 *   teal chiaro solo come filetto decorativo e sui fondi scuri.
 *
 * Ordine delle parti: reset, base, layout, componenti, blocchi, sezioni, eventi, utilità.
 * Niente @layer: gli stili di WordPress non sono in un layer e avrebbero sempre la precedenza.
 */

/* -------------------------------------------------------------------------
 * Token
 * ---------------------------------------------------------------------- */

:root {
	--color-primary: var(--wp--preset--color--primary);
	--color-primary-dark: var(--wp--preset--color--primary-dark);
	--color-sky: var(--wp--preset--color--sky);
	--color-ink: var(--wp--preset--color--ink);
	--color-body: var(--wp--preset--color--body);
	--color-slate: var(--wp--preset--color--slate);
	--color-slate-dark: var(--wp--preset--color--slate-dark);
	--color-sand: var(--wp--preset--color--sand);
	--color-border: var(--wp--preset--color--border);
	--color-white: var(--wp--preset--color--white);

	--font-heading: var(--wp--preset--font-family--heading);
	--font-body: var(--wp--preset--font-family--body);
	--font-mono: var(--wp--preset--font-family--mono);

	--text-small: var(--wp--preset--font-size--small);
	--text-base: var(--wp--preset--font-size--medium);
	--text-large: var(--wp--preset--font-size--large);
	--text-h3: var(--wp--preset--font-size--x-large);
	--text-h2: var(--wp--preset--font-size--xx-large);
	--text-h1: var(--wp--preset--font-size--huge);

	--space-1: var(--wp--preset--spacing--20);
	--space-2: var(--wp--preset--spacing--30);
	--space-3: var(--wp--preset--spacing--40);
	--space-4: var(--wp--preset--spacing--50);
	--space-5: var(--wp--preset--spacing--60);
	--space-section: var(--wp--preset--spacing--70);

	--gutter: clamp(1rem, 4vw, 2.5rem);
	--content-width: var(--wp--style--global--content-size);
	--wide-width: var(--wp--style--global--wide-size);
	--measure: 62ch;
	--measure-narrow: 46rem;

	--rule: 1px solid var(--color-border);
	--radius: 0.25rem;
	--radius-pill: 999px;
	--shadow-lift: 0 18px 40px rgb(0 0 0 / 0.12);
	--shadow-text: 0 2px 24px rgb(0 0 0 / 0.4);
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;

	--eyebrow-tracking: 0.32em;
	--header-height: 5.25rem;
	--target: 2.75rem;
	--shadow-header: 0 10px 30px rgb(47 58 68 / 0.1);
}

/* Icone decorative come maschere SVG: il colore viene da background-color.
 * Sorgente: tratti 24x24, generati una volta e tenuti qui per evitare richieste. */
:root {
	--icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
	--icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
	--icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
	--icon-wifi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a15 15 0 0 1 20 0M5 12.5a10 10 0 0 1 14 0M8.5 16a5 5 0 0 1 7 0'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E");
	--icon-shuttle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='14' rx='2'/%3E%3Cpath d='M4 11h16M8 18v2M16 18v2'/%3E%3Ccircle cx='8' cy='15' r='1'/%3E%3Ccircle cx='16' cy='15' r='1'/%3E%3C/svg%3E");
	--icon-climate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18M6 6l12 12M18 6L6 18M12 3l-2 2M12 3l2 2M12 21l-2-2M12 21l2-2M3 12l2-2M3 12l2 2M21 12l-2-2M21 12l-2 2'/%3E%3C/svg%3E");
	--icon-bike: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='16' r='3.5'/%3E%3Ccircle cx='18' cy='16' r='3.5'/%3E%3Cpath d='M6 16l4-8h5l3 8M10 8H7M15 8l-2 8'/%3E%3C/svg%3E");
	--icon-garden: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-7M12 14c-4 0-7-3-7-7 4 0 7 3 7 7zm0 0c4 0 7-3 7-7-4 0-7 3-7 7z'/%3E%3C/svg%3E");
	--icon-car: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l1.5-5h11L19 13M4 13h16v5H4z'/%3E%3Ccircle cx='7.5' cy='18' r='1.5'/%3E%3Ccircle cx='16.5' cy='18' r='1.5'/%3E%3C/svg%3E");
	--icon-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 19a2 2 0 0 1 2-2h13'/%3E%3C/svg%3E");
	--icon-binoculars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='6' height='8' rx='2'/%3E%3Crect x='15' y='11' width='6' height='8' rx='2'/%3E%3Cpath d='M9 14h6M6 11V6h3v5M15 11V6h3v5'/%3E%3C/svg%3E");
	--icon-beach: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13a9 9 0 0 1 18 0zM12 4v1M12 13v8M9 21h6'/%3E%3C/svg%3E");
	--icon-linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4M3 11h18v7H3zM3 18v2M21 18v2'/%3E%3C/svg%3E");
	--icon-bbq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16a8 8 0 0 1-16 0zM12 17v4M7 21l2-4M17 21l-2-4M8 5v1M12 4v2M16 5v1'/%3E%3C/svg%3E");
	--icon-tv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='12' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
	--icon-shop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9l1-4h14l1 4M4 9h16v11H4zM10 20v-5h4v5'/%3E%3C/svg%3E");
	--icon-bath: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20v-9a6 6 0 0 1 12 0M5 11h12M9 15v2M12 15v2M15 15v2'/%3E%3C/svg%3E");
	--icon-breakfast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h11v5a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4zM16 10h2a2 2 0 0 1 0 4h-2M4 21h14'/%3E%3C/svg%3E");
	--icon-view: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='3'/%3E%3Cpath d='M12 3v1M18 9h1M5 9h1M3 16c2 0 2 1.5 4 1.5s2-1.5 4-1.5 2 1.5 4 1.5 2-1.5 4-1.5M3 20c2 0 2 1.5 4 1.5s2-1.5 4-1.5 2 1.5 4 1.5 2-1.5 4-1.5'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
 * Reset
 * ---------------------------------------------------------------------- */

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

* {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

img,
video,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

ul,
ol {
	list-style-position: outside;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
 * Base: tipografia, link, fuoco
 * ---------------------------------------------------------------------- */

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: 1.75;
	color: var(--color-body);
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	overflow-wrap: break-word;
	text-wrap: balance;
}

h1 {
	font-size: var(--text-h1);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

h2 {
	font-size: var(--text-h2);
}

h3 {
	font-size: var(--text-h3);
}

h4,
h5,
h6 {
	font-size: var(--text-large);
}

p,
li,
dd,
figcaption,
blockquote {
	overflow-wrap: break-word;
}

p {
	max-width: var(--measure);
}

/* La terna che apre ogni sezione: occhiello, titolo, testo. */
.is-style-eyebrow + :is(h1, h2, h3) {
	margin-block-start: var(--space-2);
}

:is(h1, h2, h3) + p {
	margin-block-start: var(--space-3);
}

a {
	color: var(--color-primary-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color var(--transition-fast), text-decoration-thickness var(--transition-fast);
}

a:visited {
	color: var(--color-primary-dark);
}

a:hover {
	color: var(--color-ink);
	text-decoration-thickness: 2px;
}

a:active {
	color: var(--color-slate-dark);
}

:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: var(--radius);
	box-shadow: 0 0 0 6px var(--color-white);
}

:focus:not(:focus-visible) {
	outline: none;
}

strong,
b {
	font-weight: 700;
	color: var(--color-ink);
}

em {
	font-style: italic;
}

hr {
	border: 0;
	border-block-start: var(--rule);
}

table {
	border-collapse: collapse;
	inline-size: 100%;
	font-variant-numeric: tabular-nums;
}

th,
td {
	padding: var(--space-2) var(--space-2);
	text-align: start;
	border-block-end: var(--rule);
}

th {
	font-family: var(--font-heading);
	font-size: var(--text-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink);
}

::selection {
	background: var(--color-primary);
	color: var(--color-white);
}

/* -------------------------------------------------------------------------
 * Layout: testata, navigazione, contenuto, piè di pagina
 * ---------------------------------------------------------------------- */

.site-header {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	min-block-size: var(--header-height);
	padding-inline: var(--gutter);
	background-color: var(--color-white);
	border-block-end: var(--rule);
}

/* Pulsante "Verifica disponibilità" nella testata: la stessa azione del
 * sito, sempre a portata di mano sugli schermi larghi. */
.site-header .header-cta {
	display: none;
}

.site-branding a {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-large);
	color: var(--color-ink);
	text-decoration: none;
}

.site-branding img {
	block-size: auto;
	max-block-size: 3.25rem;
	inline-size: auto;
}

/* Navigazione: pulsante + lista. Lo stato vive in aria-expanded. */
.site-nav {
	display: flex;
	align-items: center;
}

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-block-size: var(--target);
	padding: var(--space-1) var(--space-2);
	border: var(--rule);
	border-radius: var(--radius);
	background: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink);
	cursor: pointer;
}

.nav-toggle:hover {
	border-color: var(--color-primary-dark);
	color: var(--color-primary-dark);
}

.site-nav .menu {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	display: none;
	list-style: none;
	padding: var(--space-2) var(--gutter) var(--space-3);
	background: var(--color-white);
	border-block-end: var(--rule);
	box-shadow: var(--shadow-lift);
}

.nav-toggle[aria-expanded="true"] + .menu {
	display: block;
}

.site-nav li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.site-nav a {
	flex: 1 1 auto;
	display: block;
	padding: var(--space-2) 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink);
	text-decoration: none;
	border-block-end: var(--rule);
}

.site-nav a:hover,
.site-nav a:active,
.site-nav a.is-current {
	color: var(--color-primary-dark);
}

.site-nav a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
	text-decoration-color: var(--color-primary);
}

.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--target);
	block-size: var(--target);
	border: 0;
	background: transparent;
	color: var(--color-ink);
	cursor: pointer;
}

.submenu-toggle svg {
	transition: transform var(--transition-fast);
}

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

.sub-menu {
	display: none;
	flex-basis: 100%;
	list-style: none;
	padding-inline-start: var(--space-3);
}

.submenu-toggle[aria-expanded="true"] + .sub-menu {
	display: block;
}

.sub-menu a {
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--text-base);
}

/* Contenuto */
.site-main {
	min-block-size: 50vb;
}

.page-header {
	inline-size: min(var(--content-width), 100% - 2 * var(--gutter));
	margin-inline: auto;
	padding-block: var(--space-section) var(--space-4);
}

.page-header > * + * {
	margin-block-start: var(--space-2);
}

.page-header time {
	font-family: var(--font-heading);
	font-size: var(--text-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Pagine e articoli standard: una colonna di lettura. */
.entry-content {
	inline-size: min(var(--content-width), 100% - 2 * var(--gutter));
	margin-inline: auto;
	padding-block-end: var(--space-section);
}

.entry-content > * + * {
	margin-block-start: var(--space-3);
}

.entry-content > :is(h2, h3) {
	margin-block-start: var(--space-5);
}

/* Articoli: colonna di lettura stretta e centrata, foto più larga del testo. */
.single-post .page-header,
.single-post .entry-content,
.single-post .entry-footer {
	inline-size: min(var(--measure-narrow), 100% - 2 * var(--gutter));
}

.single-post .page-header {
	padding-block-end: var(--space-3);
}

.single-post .page-header .eyebrow {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-small);
	letter-spacing: var(--eyebrow-tracking);
	text-transform: uppercase;
	color: var(--color-primary-dark);
}

.single-post .entry-content {
	font-size: var(--text-large);
	line-height: 1.75;
}

.single-post .entry-content > :is(h2, h3) {
	max-width: var(--measure);
}

.single-post .entry-content > p {
	max-width: none;
}

/* Pagine a sezioni: ogni sezione gestisce la propria larghezza. */
.is-landing .entry-content {
	inline-size: 100%;
	padding-block-end: 0;
}

.is-landing .entry-content > * + * {
	margin-block-start: 0;
}

.entry-figure {
	inline-size: min(var(--content-width), 100% - 2 * var(--gutter));
	margin-inline: auto;
	margin-block-end: var(--space-4);
}

.entry-figure img {
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.entry-footer {
	inline-size: min(var(--content-width), 100% - 2 * var(--gutter));
	margin-inline: auto;
	padding-block-end: var(--space-section);
}

.entry-footer > * + * {
	margin-block-start: var(--space-3);
}

.site-footer {
	padding: var(--space-5) var(--gutter) var(--space-4);
	background: var(--color-white);
	border-block-start: var(--rule);
	font-size: var(--text-small);
}

.site-footer p {
	max-width: none;
}

.site-footer__grid,
.site-footer__meta {
	inline-size: min(var(--wide-width), 100%);
	margin-inline: auto;
}

.site-footer__grid {
	display: grid;
	gap: var(--space-4);
}

.site-footer__brand a {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-large);
	color: var(--color-ink);
	text-decoration: none;
}

.site-footer__brand img {
	block-size: auto;
	max-block-size: 2.75rem;
	inline-size: auto;
}

.site-footer__tagline {
	margin-block-start: var(--space-2);
	font-style: italic;
	font-size: var(--text-base);
}

.site-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Bersagli tattili di almeno 24px anche per i link di testo del footer. */
.site-footer a {
	display: inline-block;
	padding-block: var(--space-1);
}

.site-footer__contacts a {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-ink);
	text-decoration: none;
}

.site-footer__contacts a:hover {
	color: var(--color-primary-dark);
}

.site-footer__contacts p {
	margin-block-start: var(--space-2);
}

.site-footer__nav a {
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink);
	text-decoration: none;
}

.site-footer__nav a:hover {
	color: var(--color-primary-dark);
}

.site-footer__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-1) var(--space-3);
	margin-block-start: var(--space-4);
	padding-block-start: var(--space-3);
	border-block-start: var(--rule);
}

.site-footer__meta p {
	margin: 0;
}

@media (min-width: 56em) {
	.nav-toggle {
		display: none;
	}

	/* La testata resta in vista; l'ombra compare solo dopo il primo scorrimento. */
	.site-header {
		position: sticky;
		inset-block-start: 0;
		gap: var(--space-4);
	}

	@supports (animation-timeline: scroll()) {
		.site-header {
			animation: header-lift linear both;
			animation-timeline: scroll();
			animation-range: 0 6rem;
		}
	}

	/* Con la testata fissa, le ancore si fermano sotto di lei. */
	[id] {
		scroll-margin-block-start: calc(var(--header-height) + var(--space-3));
	}

	.site-nav {
		margin-inline-start: auto;
	}

	.site-header .header-cta {
		display: inline-flex;
		min-block-size: var(--target);
		padding-block: var(--space-1);
		flex-shrink: 0;
	}

	.site-nav .menu {
		position: static;
		display: flex;
		gap: var(--space-4);
		padding: 0;
		border: 0;
		box-shadow: none;
	}

	.site-nav li {
		flex-wrap: nowrap;
	}

	.site-nav a {
		padding: var(--space-1) 0;
		border-block-end: 0;
	}

	.submenu-toggle {
		inline-size: 1.75rem;
		block-size: 2.25rem;
	}

	.sub-menu {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		min-inline-size: 14rem;
		padding: var(--space-1) var(--space-3);
		background: var(--color-white);
		border: var(--rule);
		border-radius: var(--radius);
		box-shadow: var(--shadow-lift);
	}

	.sub-menu a {
		padding: var(--space-1) 0;
	}

	.site-footer {
		padding-block-start: var(--space-section);
	}

	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: var(--space-5);
	}
}

@keyframes header-lift {
	from {
		box-shadow: 0 0 0 rgb(47 58 68 / 0);
	}

	to {
		box-shadow: var(--shadow-header);
	}
}

/* -------------------------------------------------------------------------
 * Componenti: pulsanti, link freccia, schede, form, liste di articoli, icone
 * ---------------------------------------------------------------------- */

.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	min-block-size: 3rem;
	padding: var(--space-2) var(--space-4);
	border: 0;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: scale(0.98);
}

/* Un pulsante già visitato resta leggibile: la regola a:visited qui sotto
 * vincerebbe sul colore del pulsante e il testo sparirebbe nel fondo. */
.wp-block-button__link:visited,
.wp-element-button:visited {
	color: var(--color-white);
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	color: var(--color-white);
	background-color: var(--color-ink);
}

/* Link freccia: l'azione secondaria, ovunque uguale. */
.more,
.is-style-card > p:last-child > a,
.wp-block-latest-posts__post-title {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.more::after,
.is-style-card > p:last-child > a::after {
	content: "\2192" / "";
	transition: transform var(--transition-fast);
}

.more:hover::after,
.is-style-card > p:last-child > a:hover::after {
	transform: translateX(0.25em);
}

/* Scheda: liste di articoli e stile di blocco "Scheda". Un bordo, niente ombra a riposo. */
.card,
.is-style-card {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	background: var(--color-white);
	border: var(--rule);
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.card:hover,
.is-style-card:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: var(--shadow-lift);
}

.card > a:first-child,
.is-style-card > .wp-block-image {
	overflow: hidden;
}

.card > a:first-child img,
.is-style-card > .wp-block-image img {
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 600ms ease;
}

.card:hover > a:first-child img,
.is-style-card:hover > .wp-block-image img {
	transform: scale(1.04);
}

.card > div,
.is-style-card > :not(.wp-block-image) {
	padding-inline: var(--space-3);
}

.card > div {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--space-1);
	padding-block: var(--space-3);
}

.is-style-card > .wp-block-image + * {
	padding-block-start: var(--space-3);
}

.is-style-card > :last-child {
	padding-block-end: var(--space-3);
	margin-block-start: auto;
}

.card h2,
.is-style-card h3 {
	font-size: var(--text-large);
}

.card h2 a {
	color: inherit;
	text-decoration: none;
}

.card h2 a:hover {
	color: var(--color-primary-dark);
}

.card time {
	font-family: var(--font-heading);
	font-size: var(--text-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.card .more {
	margin-block-start: auto;
}

.posts-grid {
	display: grid;
	gap: var(--space-4);
	inline-size: min(var(--content-width), 100% - 2 * var(--gutter));
	margin-inline: auto;
	padding-block-end: var(--space-section);
}

/* Paginazione e navigazione fra articoli: i blocchi core producono già le classi. */
.pagination,
.post-navigation {
	inline-size: min(var(--content-width), 100% - 2 * var(--gutter));
	margin-inline: auto;
	padding-block: var(--space-4);
	font-family: var(--font-heading);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--target);
	min-block-size: var(--target);
	padding-inline: var(--space-2);
	border: var(--rule);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--color-primary-dark);
	color: var(--color-white);
	border-color: var(--color-primary-dark);
}

.post-navigation .nav-links {
	display: grid;
	gap: var(--space-3);
}

.post-navigation a {
	display: grid;
	text-decoration: none;
}

.post-navigation .nav-label {
	font-size: var(--text-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-body);
}

.post-navigation .nav-title {
	font-weight: 700;
}

/* Form: contatti e ricerca. */
.contact-form,
.search-form {
	display: grid;
	gap: var(--space-3);
}

.contact-form fieldset {
	display: grid;
	gap: var(--space-3);
	border: 0;
}

.contact-form legend {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.contact-form label,
.search-form label {
	display: block;
	margin-block-end: var(--space-1);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink);
}

.contact-form :is(input, select, textarea),
.search-form input {
	inline-size: 100%;
	min-block-size: 3rem;
	padding: var(--space-2);
	border: var(--rule);
	border-radius: var(--radius);
	background: var(--color-sand);
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.contact-form :is(input, select, textarea):focus-visible,
.search-form input:focus-visible {
	border-color: var(--color-primary-dark);
	background: var(--color-white);
	box-shadow: none;
	outline-offset: 0;
}

.contact-form textarea {
	resize: vertical;
}

.contact-form > button {
	justify-self: start;
}

.contact-form .hp {
	position: absolute;
	inset-inline-start: -200vw;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

.form-note {
	font-size: var(--text-small);
}

.form-status {
	max-width: none;
	padding: var(--space-2) var(--space-3);
	border-inline-start: 4px solid var(--color-primary-dark);
	background: var(--color-sand);
	font-weight: 700;
	color: var(--color-ink);
}

.form-status.is-error {
	border-color: var(--color-slate-dark);
}

/* Icone: paragrafi con classe "icon icon-<nome>". Decorative, il testo resta. */
.icon {
	position: relative;
	padding-inline-start: 2.25rem;
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-ink);
}

.icon::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.15em;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	background-color: var(--color-primary-dark);
	mask: var(--icon) center / contain no-repeat;
	-webkit-mask: var(--icon) center / contain no-repeat;
}

.icon a {
	text-decoration: none;
	color: inherit;
}

.icon a:hover {
	color: var(--color-primary-dark);
}

.icon-pin { --icon: var(--icon-pin); }
.icon-phone { --icon: var(--icon-phone); }
.icon-mail { --icon: var(--icon-mail); }
.icon-wifi { --icon: var(--icon-wifi); }
.icon-shuttle { --icon: var(--icon-shuttle); }
.icon-climate { --icon: var(--icon-climate); }
.icon-bike { --icon: var(--icon-bike); }
.icon-garden { --icon: var(--icon-garden); }
.icon-car { --icon: var(--icon-car); }
.icon-book { --icon: var(--icon-book); }
.icon-binoculars { --icon: var(--icon-binoculars); }
.icon-beach { --icon: var(--icon-beach); }
.icon-linen { --icon: var(--icon-linen); }
.icon-bbq { --icon: var(--icon-bbq); }
.icon-tv { --icon: var(--icon-tv); }
.icon-shop { --icon: var(--icon-shop); }
.icon-bath { --icon: var(--icon-bath); }
.icon-breakfast { --icon: var(--icon-breakfast); }
.icon-view { --icon: var(--icon-view); }

@media (min-width: 40em) {
	.posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact-form fieldset {
		grid-template-columns: repeat(2, 1fr);
	}

	.post-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.post-navigation .nav-next {
		text-align: end;
	}
}

@media (min-width: 64em) {
	.posts-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Blocchi core: stili di blocco e aggiustamenti
 * ---------------------------------------------------------------------- */

/* Occhiello: riga piccola in teal scuro, preceduta da un filetto teal. */
.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-small);
	letter-spacing: var(--eyebrow-tracking);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}

.is-style-eyebrow::before {
	content: "";
	flex: 0 0 2rem;
	block-size: 2px;
	background: var(--color-primary);
}

/* Frase in evidenza: corsivo grande con un filetto teal a sinistra. */
.is-style-statement {
	max-width: var(--measure-narrow);
	padding-inline-start: var(--space-3);
	border-inline-start: 3px solid var(--color-primary);
	font-size: var(--text-large);
	font-style: italic;
	line-height: 1.6;
	color: var(--color-ink);
	text-wrap: pretty;
}

.is-style-statement strong {
	font-style: normal;
	font-weight: 700;
}

/* Galleria "Mosaico": la prima foto grande, due medie, tutte le altre in
 * miniatura. Niente scorrimento e niente foto nascoste: ogni scatto è in pagina
 * e si apre a schermo intero. Stessa specificità delle regole core. */
.wp-block-gallery.has-nested-images.is-style-mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-2);
}

.wp-block-gallery.has-nested-images.is-style-mosaic figure.wp-block-image:not(#individual-image) {
	inline-size: auto;
	margin: 0;
	grid-column: span 1;
	overflow: hidden;
}

.wp-block-gallery.has-nested-images.is-style-mosaic figure.wp-block-image:not(#individual-image) img {
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	cursor: zoom-in;
	transition: transform 600ms ease;
}

.wp-block-gallery.has-nested-images.is-style-mosaic figure.wp-block-image:not(#individual-image):hover img {
	transform: scale(1.04);
}

.wp-block-gallery.has-nested-images.is-style-mosaic figure.wp-block-image:not(#individual-image):first-child {
	grid-column: span 4;
}

.wp-block-gallery.has-nested-images.is-style-mosaic figure.wp-block-image:not(#individual-image):first-child img {
	aspect-ratio: 3 / 2;
}

.wp-block-gallery.has-nested-images.is-style-mosaic figure.wp-block-image:not(#individual-image):is(:nth-child(2), :nth-child(3)) {
	grid-column: span 2;
}

.wp-block-gallery.has-nested-images.is-style-mosaic figure.wp-block-image:not(#individual-image):is(:nth-child(2), :nth-child(3)) img {
	aspect-ratio: 4 / 3;
}

/* Galleria "Striscia scorrevole": una riga che scorre a scatti, senza JavaScript.
 * Le regole core usano :not(#individual-image) per pesare come un id: qui lo stesso. */
.wp-block-gallery.is-style-strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(78%, 26rem);
	gap: var(--space-2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--space-2);
	padding-block-end: var(--space-2);
	scrollbar-width: thin;
	scrollbar-color: var(--color-primary-dark) var(--color-sand);
}

.wp-block-gallery.has-nested-images.is-style-strip figure.wp-block-image:not(#individual-image) {
	inline-size: auto;
	margin: 0;
	scroll-snap-align: start;
}

.wp-block-gallery.has-nested-images.is-style-strip figure.wp-block-image:not(#individual-image) img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	cursor: zoom-in;
}

/* Copertine: altezza dal contenuto, testo chiaro, occhiello chiaro. */
.wp-block-cover {
	min-block-size: auto;
	padding: var(--space-section) var(--gutter);
}

.wp-block-cover :is(h1, h2, h3, p),
.wp-block-cover .icon {
	color: var(--color-white);
}

.wp-block-cover .is-style-eyebrow {
	color: var(--color-white);
}

.wp-block-cover .is-style-eyebrow::before {
	background: var(--color-sky);
}

.wp-block-cover .icon::before {
	background-color: var(--color-white);
}

.wp-block-cover a:not(.wp-block-button__link) {
	color: var(--color-white);
}

.wp-block-cover :focus-visible {
	box-shadow: 0 0 0 6px var(--color-slate-dark);
}

/* Ultimi articoli: griglia di schede uguali a quelle del blog.
 * Specificità sopra le regole core ".wp-block-latest-posts.columns-3 li". */
.wp-block-latest-posts {
	display: grid;
	gap: var(--space-4);
	list-style: none;
	padding: 0;
}

.wp-block-latest-posts.is-grid {
	grid-template-columns: 1fr;
}

.wp-block-latest-posts.is-grid > li,
.wp-block-latest-posts.wp-block-latest-posts__list > li {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	inline-size: auto;
	margin: 0;
	background: var(--color-white);
	border: var(--rule);
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.wp-block-latest-posts.is-grid > li:hover,
.wp-block-latest-posts.wp-block-latest-posts__list > li:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: var(--shadow-lift);
}

.wp-block-latest-posts__featured-image img {
	inline-size: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.wp-block-latest-posts > li > :not(.wp-block-latest-posts__featured-image) {
	padding-inline: var(--space-3);
}

.wp-block-latest-posts > li > :last-child {
	padding-block-end: var(--space-3);
}

.wp-block-latest-posts__post-title {
	display: block;
	margin-block-start: var(--space-2);
	font-size: var(--text-large);
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-transform: none;
	color: var(--color-ink);
}

.wp-block-latest-posts__post-title:hover {
	color: var(--color-primary-dark);
}

.wp-block-latest-posts__post-date {
	font-family: var(--font-heading);
	font-size: var(--text-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wp-block-latest-posts__post-excerpt {
	font-size: var(--text-small);
}

.wp-block-table figcaption {
	font-size: var(--text-small);
}

@media (min-width: 40em) {
	.wp-block-latest-posts.is-grid.columns-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.wp-block-latest-posts.is-grid.columns-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Sezioni del sito
 * ---------------------------------------------------------------------- */

/* Ogni sezione a tutta larghezza porta il proprio respiro. */
.wp-block-group.alignfull {
	padding: var(--space-section) var(--gutter);
}

.wp-block-group.alignfull.sc-footer {
	padding: 0;
}

/* Le superfici si alternano: la seconda di due sezioni uguali diventa sabbia. */
.sc-cards,
.sc-rules,
.sc-amenities + .sc-amenities {
	background: var(--color-sand);
}

/* Copertina della home e delle case vacanza. */
/* Copertina della home e delle case vacanza: la fotografia intera, senza
 * velatura. Il titolo poggia su una scia scura che parte da sinistra e si
 * spegne prima della metà, così il soggetto della foto resta pulito. */
.sc-hero {
	min-block-size: clamp(26rem, 82vb, 48rem);
	display: flex;
	align-items: flex-end;
}

/* Sugli schermi stretti la foto è tagliata in verticale e il titolo sta in
 * basso, sull'acqua: la scia sale dal fondo. Sui larghi parte da sinistra. */
.sc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgb(14 74 92 / 0.72), rgb(14 74 92 / 0.3) 45%, rgb(14 74 92 / 0) 75%);
	pointer-events: none;
}

.sc-hero h1 {
	max-width: 14ch;
	font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);
	text-shadow: var(--shadow-text);
}

/* Barra delle località e del pulsante, sotto la fotografia. */
.wp-block-group.alignfull.sc-hero-bar {
	position: relative;
	z-index: 2;
	padding-block: 0;
}

.sc-hero-bar > .wp-block-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	padding: var(--space-3) var(--space-3);
	background: var(--color-white);
	border-block-start: 3px solid var(--color-primary);
}

.sc-hero-bar > .wp-block-group > * {
	margin: 0;
}

.sc-hero-bar .icon {
	color: var(--color-ink);
}

.sc-hero-bar .icon::before {
	background-color: var(--color-primary-dark);
}

.sc-hero-bar .wp-block-buttons {
	flex: 1 1 100%;
}

.sc-hero-bar .wp-block-button {
	inline-size: 100%;
}

.sc-hero-bar .wp-block-button__link {
	inline-size: 100%;
}

/* Introduzioni di pagina: colonna stretta e centrata, titoli centrati, testo a sinistra. */
.sc-page-intro {
	text-align: center;
}

.sc-page-intro > .wp-block-group {
	max-width: var(--measure-narrow);
}

.sc-page-intro .is-style-eyebrow,
.sc-reviews .is-style-eyebrow {
	max-width: none;
	justify-content: center;
}

.sc-page-intro p:not(.is-style-eyebrow) {
	max-width: none;
	text-align: start;
}

.sc-page-intro h1 + p {
	margin-block-start: var(--space-4);
}

/* Fotografia a tutta larghezza. */
.sc-photo img {
	inline-size: 100%;
	max-block-size: 70vb;
	object-fit: cover;
}

/* "I nostri alloggi": titolo grande e presentazione accanto alla foto della
 * veranda, poi i due territori con la loro foto, poi la frase di chiusura. */
.sc-intro h2 {
	max-width: 14ch;
	font-size: var(--text-h1);
}

.sc-intro .wp-block-columns + .wp-block-columns,
.sc-intro .wp-block-columns + .is-style-statement {
	margin-block-start: var(--space-5);
}

.sc-intro .wp-block-image {
	margin: 0;
}

.sc-intro .wp-block-image img {
	inline-size: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.sc-intro-places .wp-block-image img {
	aspect-ratio: 16 / 9;
}

.sc-intro-places .wp-block-image + p {
	margin-block-start: var(--space-3);
}

/* Affiancata al testo, la foto della veranda prende tutta l'altezza della riga. */
@media (min-width: 782px) {
	.sc-intro-lead .wp-block-column:has(> .wp-block-image) {
		display: flex;
	}

	.sc-intro-lead .wp-block-image,
	.sc-intro-lead .wp-block-image img {
		block-size: 100%;
	}

	.sc-intro-lead .wp-block-image img {
		aspect-ratio: auto;
		min-block-size: 24rem;
	}
}

/* Schede degli alloggi: il filetto teal in testa è lo stesso della barra del hero. */
.sc-cards .wp-block-columns {
	align-items: stretch;
}

.sc-cards .is-style-card,
.sc-cards .is-style-card:hover {
	border-block-start: 3px solid var(--color-primary);
}

.sc-cards .is-style-card > p:first-of-type {
	font-family: var(--font-heading);
	font-size: var(--text-small);
	letter-spacing: 0.04em;
	color: var(--color-ink);
}

/* Fianco a fianco, le tre schede allineano luogo e descrizione anche
 * quando un titolo va a capo. */
@media (min-width: 782px) {
	.sc-cards .is-style-card h3 {
		min-block-size: 2.4em;
	}
}

/* Recensioni: il widget Trustindex sotto il titolo. */
.sc-reviews {
	text-align: center;
}

.sc-reviews .wp-block-shortcode {
	margin-block-start: var(--space-4);
	text-align: start;
}

/* Servizi inclusi: griglia di icone e etichette. */
.sc-amenities .amenities {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4) var(--space-3);
	margin-block-start: var(--space-4);
}

.sc-amenities .amenities > * {
	margin: 0;
}

.sc-amenities .amenities .icon {
	padding-inline-start: 0;
	padding-block-start: 3rem;
	font-size: var(--text-small);
	text-align: center;
}

.sc-amenities .amenities .icon::before {
	inset-inline: 0;
	inset-block-start: 0;
	margin-inline: auto;
	inline-size: 2.5rem;
	block-size: 2.5rem;
}

/* Servizi su fotografia: la griglia diventa una scheda bianca. */
.wp-block-cover.sc-amenities .amenities {
	padding: var(--space-4) var(--space-3);
	background: var(--color-white);
}

.wp-block-cover.sc-amenities .amenities .icon {
	color: var(--color-ink);
}

.wp-block-cover.sc-amenities .amenities .icon::before {
	background-color: var(--color-primary-dark);
}

/* Invito a prenotare. */
.sc-cta h2 {
	max-width: 16ch;
}

.sc-cta .wp-block-buttons {
	margin-block-start: var(--space-3);
}

/* Contatti: recapiti e form. Sugli schermi larghi i recapiti diventano una
 * colonna a sinistra, su sabbia, e il form prende il resto. */
.sc-contact .wp-block-columns {
	margin-block-end: var(--space-4);
	padding-block-end: var(--space-4);
	border-block-end: var(--rule);
}

.sc-contact .icon {
	font-size: var(--text-base);
}

@media (min-width: 56em) {
	.sc-contact > .wp-block-group {
		display: grid;
		grid-template-columns: minmax(16rem, 1fr) 2fr;
		gap: var(--space-5);
		align-items: start;
	}

	.sc-contact .wp-block-columns {
		flex-direction: column;
		gap: var(--space-2);
		margin: 0;
		padding: var(--space-4) var(--space-3);
		border: 0;
		border-block-start: 3px solid var(--color-primary);
		background: var(--color-sand);
	}

	.sc-contact .wp-block-column {
		flex-basis: auto;
	}
}

/* Camere e case: galleria e testo affiancati, lato alternato, un filetto fra l'una e l'altra. */
.sc-lodging {
	scroll-margin-block-start: var(--space-3);
}

@media (min-width: 56em) {
	.sc-lodging {
		scroll-margin-block-start: calc(var(--header-height) + var(--space-3));
	}
}

.sc-lodging + .sc-lodging {
	padding-block-start: 0;
}

.sc-lodging + .sc-lodging > .wp-block-group {
	padding-block-start: var(--space-section);
	border-block-start: var(--rule);
}

.sc-lodging .wp-block-columns {
	align-items: flex-start;
}

.sc-lodging .lodging-note {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-small);
	letter-spacing: 0.04em;
	color: var(--color-primary-dark);
}

.sc-lodging .lodging-note em {
	display: inline-block;
	padding: 0.2em 0.6em;
	border: 1px solid var(--color-primary);
	font-style: normal;
}

.sc-lodging :is(h2, h3) + .lodging-note {
	margin-block-start: var(--space-2);
}

/* Tariffe: un pannello sabbia con il filetto teal, etichette a sinistra e
 * cifre in DM Mono a destra. */
.sc-lodging .lodging-price {
	margin-block-start: var(--space-4);
	padding: var(--space-2) var(--space-3) 0;
	border-block-start: 3px solid var(--color-primary);
	background: var(--color-sand);
	font-family: var(--font-heading);
	font-size: var(--text-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink);
}

.sc-lodging .lodging-price strong {
	font-weight: 700;
}

.sc-lodging .lodging-price .price {
	display: block;
	padding-block: var(--space-1) var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--text-large);
	letter-spacing: 0;
	text-transform: none;
}

.sc-lodging .lodging-price + ul {
	margin: 0;
	padding: 0 var(--space-3) var(--space-2);
	background: var(--color-sand);
}

.sc-lodging .lodging-price + ul li {
	display: flex;
	justify-content: space-between;
	gap: var(--space-2);
	padding-block: var(--space-1);
	border-block-start: var(--rule);
}

.sc-lodging .lodging-price + ul .price {
	font-family: var(--font-mono);
	font-size: var(--text-small);
	white-space: nowrap;
}

.sc-lodging ul {
	list-style: none;
}

.sc-lodging .wp-block-buttons {
	margin-block-start: var(--space-3);
}

/* Fascia di località e testo che la segue. */
.sc-place {
	padding-block: var(--space-4);
}

.sc-place h2 {
	color: var(--color-white);
}

.sc-place .is-style-eyebrow {
	color: var(--color-white);
}

.sc-place .is-style-eyebrow::before {
	background: var(--color-sky);
}

.sc-place-text {
	padding-block-end: var(--space-4);
}

.sc-place-text p {
	max-width: 78ch;
	font-size: var(--text-large);
	line-height: 1.7;
}

.sc-place-text p strong {
	font-weight: 600;
}

/* Regole della casa. */
.sc-rules h2 + .wp-block-columns {
	margin-block-start: var(--space-4);
}

.sc-rules h3 {
	font-size: var(--text-large);
}

.sc-rules ul {
	list-style: none;
}

.sc-rules li::before {
	content: "\00b7" / "";
	margin-inline-end: var(--space-1);
	font-weight: 700;
	color: var(--color-primary-dark);
}

.sc-rules h3 + :is(p, ul) {
	margin-block-start: var(--space-2);
}

/* Blog in fondo alle pagine degli alloggi: testo, tre schede, pulsante. */
.sc-blog p {
	max-width: var(--measure-narrow);
}

.sc-blog .wp-block-latest-posts {
	margin-block-start: var(--space-4);
}

.sc-blog .wp-block-buttons {
	margin-block-start: var(--space-4);
}

/* Piè di pagina (pattern): niente respiro proprio, lo dà il footer. */
.wp-block-group.sc-footer > .wp-block-group {
	inline-size: auto;
}

.sc-footer p {
	margin: 0;
}

@media (min-width: 50em) {
	.sc-hero {
		align-items: center;
	}

	.sc-hero::before {
		background: linear-gradient(to right, rgb(14 74 92 / 0.62), rgb(14 74 92 / 0.28) 40%, rgb(14 74 92 / 0) 66%);
	}

	/* La barra galleggia sul bordo inferiore della fotografia. */
	.sc-hero-bar > .wp-block-group {
		margin-block-start: calc(-1 * var(--space-5));
		padding-inline: var(--space-4);
		box-shadow: var(--shadow-lift);
	}

	.sc-hero-bar .wp-block-buttons {
		flex: 0 0 auto;
		margin-inline-start: auto;
	}

	.sc-hero-bar .wp-block-button,
	.sc-hero-bar .wp-block-button__link {
		inline-size: auto;
	}

	.sc-hero-bar .wp-block-button__link {
		min-block-size: 3.5rem;
		padding-inline: var(--space-5);
	}

	.sc-amenities .amenities {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Camere e case si alternano: pari con il testo a sinistra. */
	.sc-lodging:nth-child(even of .sc-lodging) .wp-block-columns {
		flex-direction: row-reverse;
	}

	.sc-intro .wp-block-column:first-child {
		position: sticky;
		inset-block-start: var(--space-4);
	}
}

/* -------------------------------------------------------------------------
 * Eventi: stesse voci del sito, più DM Mono per date e tempi
 * ---------------------------------------------------------------------- */

.sc-ev.alignfull {
	padding-block: var(--space-5);
}

.sc-ev hgroup p {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-small);
	letter-spacing: var(--eyebrow-tracking);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}

.sc-ev hgroup p::before {
	content: "";
	flex: 0 0 2rem;
	block-size: 2px;
	background: var(--color-primary);
}

.sc-ev hgroup p + :is(h1, h2) {
	margin-block-start: var(--space-2);
}

.sc-ev hgroup + p {
	margin-block-start: var(--space-3);
}

.sc-ev time,
.sc-ev small,
.sc-ev .flag {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

/* Intestazione: gradiente profondo e titolo grande. */
.sc-ev-header {
	padding-block: var(--space-section);
	color: var(--color-white);
}

.sc-ev-header :is(h1, p, small, a) {
	color: inherit;
}

.sc-ev-header hgroup p {
	color: var(--color-white);
}

.sc-ev-header hgroup p::before {
	background: var(--color-sky);
}

.sc-ev-header h1 span {
	font-weight: 300;
	color: var(--color-sky);
}

.sc-ev-header hgroup + p {
	max-width: 46ch;
	font-size: var(--text-large);
	line-height: 1.5;
}

.sc-ev-header small {
	display: inline-block;
	margin-block-start: var(--space-2);
	font-size: var(--text-small);
	letter-spacing: 0.04em;
}

.sc-ev-header a {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-underline-offset: 0.35em;
	text-decoration-color: var(--color-sky);
}

.sc-ev-header a:hover {
	text-decoration-thickness: 2px;
}

.sc-ev-header :focus-visible {
	box-shadow: 0 0 0 6px var(--color-slate-dark);
}

/* Schede in evidenza: le stesse schede del resto del sito. */
.sc-ev-highlights ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--space-3);
	list-style: none;
	margin-block-start: var(--space-4);
}

.sc-ev-highlights article {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	padding: var(--space-3);
	background: var(--color-white);
	border: var(--rule);
	border-block-start: 3px solid var(--color-primary);
}

.sc-ev-highlights article > p:first-child {
	font-size: var(--text-small);
	color: var(--color-primary-dark);
}

.sc-ev-highlights article h3 {
	margin-block-start: var(--space-1);
	font-size: var(--text-large);
}

.sc-ev-highlights article h3 + p {
	margin-block-start: var(--space-1);
	margin-block-end: var(--space-2);
}

.sc-ev-highlights article b {
	font-family: var(--font-heading);
	font-size: var(--text-small);
	color: var(--color-primary-dark);
}

.sc-ev-highlights article p {
	font-size: var(--text-small);
}

.sc-ev-highlights .tag {
	align-self: flex-start;
	margin-block-start: auto;
	padding: var(--space-2) 0 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}

.sc-ev-highlights .tag.is-on::before {
	content: "\2713\00a0" / "";
}

/* Distanze: tabella senza griglia, solo filetti orizzontali, e nota in evidenza. */
.sc-ev-distances .wp-block-table :is(th, td) {
	border: 0;
	border-block-end: var(--rule);
	padding-inline: 0;
}

.sc-ev-distances td:first-child {
	font-weight: 700;
	color: var(--color-ink);
}

.sc-ev-distances td:last-child {
	font-family: var(--font-mono);
	font-size: var(--text-small);
	color: var(--color-primary-dark);
	white-space: nowrap;
	text-align: end;
}

.sc-ev-distances th:last-child {
	text-align: end;
}

.sc-ev-distances .callout {
	padding: var(--space-3) var(--space-4);
}

.sc-ev-distances .callout p {
	max-width: none;
	color: inherit;
}

.sc-ev-distances .callout strong {
	color: inherit;
}

/* Calendario: mese, giorno, voci. */
.sc-ev-calendar h3 {
	margin-block-start: var(--space-5);
	padding-block-end: var(--space-1);
	border-block-end: 2px solid var(--color-primary);
}

.sc-ev-calendar ol {
	list-style: none;
}

.sc-ev-calendar ol > li {
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	gap: var(--space-2);
	padding-block: var(--space-2);
	border-block-end: var(--rule);
}

.sc-ev-calendar ol > li:last-child {
	border-block-end: 0;
}

.sc-ev-calendar time {
	font-size: var(--text-h3);
	line-height: 1;
	text-align: end;
	color: var(--color-ink);
}

.sc-ev-calendar time small {
	display: block;
	margin-block-start: 0.35rem;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--color-primary-dark);
}

.sc-ev-calendar ul {
	list-style: none;
}

.sc-ev-calendar ul li {
	font-size: var(--text-small);
	line-height: 1.6;
}

.sc-ev-calendar ul li + li {
	margin-block-start: var(--space-1);
}

.sc-ev-calendar ul small {
	font-size: 0.75rem;
	color: var(--color-body);
	white-space: nowrap;
}

.sc-ev-calendar .flag {
	display: inline-block;
	padding: 0 0.5rem;
	border: 1px solid var(--color-primary-dark);
	border-radius: var(--radius-pill);
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
	white-space: nowrap;
	vertical-align: 1px;
}

.sc-ev-calendar .notice {
	padding: var(--space-2) var(--space-3);
	border-inline-start: 3px solid var(--color-primary);
	background: var(--color-sand);
	font-size: var(--text-small);
}

/* Note finali. */
.sc-ev-notes {
	background: var(--color-sand);
}

.sc-ev-notes p:not(.is-style-eyebrow) {
	max-width: 70ch;
}

.sc-ev-notes p + p {
	margin-block-start: var(--space-2);
}

@media (min-width: 40em) {
	.sc-ev-calendar ol > li {
		grid-template-columns: 4rem 1fr;
	}
}

/* -------------------------------------------------------------------------
 * Utilità
 * ---------------------------------------------------------------------- */

.sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.skip-link:focus-visible {
	position: fixed;
	inset-block-start: var(--space-2);
	inset-inline-start: var(--space-2);
	z-index: 100;
	inline-size: auto;
	block-size: auto;
	margin: 0;
	padding: var(--space-2) var(--space-3);
	clip: auto;
	background: var(--color-ink);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	text-decoration: none;
}