/* ═══════════════════════════════════════════════════════════════════════════
   ARGENTARIO HOME — foglio di stile del design "Organic"
   ---------------------------------------------------------------------------
   I token (colori, spazi, raggi, ombre, caratteri) stanno in design-base.css,
   che viene caricato prima di questo file. Qui i token si applicano al markup
   reale di Astra, Gutenberg, Contact Form 7 e MotoPress Hotel Booking.
   Ordine dei blocchi: fondamenta, testata, contenuti, home, moduli, mappa, coda.
   Nessuna regola usa !important tranne le tre segnalate nel testo.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ========================================================================
   1 · FONDAMENTA E TIPOGRAFIA
   ======================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   FONDAMENTA E TIPOGRAFIA — sistema "Organic"
   I token stanno in design-base.css; qui si applicano al markup vero.
   ═══════════════════════════════════════════════════════════════════════ */

/* La tavolozza di Astra, ridichiarata sui token del design.
   Astra la stampa in un solo :root (0,1,0) e poi la usa in decine di regole
   proprie: colore dei link, bordi dei campi, fondo di .site-content, barra
   di testata, fascia sotto il piè di pagina. Riscrivere le nove variabili
   costa nove righe; rincorrere le regole che le usano costerebbe il foglio
   intero. Questo blocco esce dopo nel sorgente, quindi vince a parità. */
:root {
	--ast-global-color-0: var(--color-accent-700); /* link e stati attivi: l'accento pieno su sabbia sta a 3:1, troppo poco per il testo */
	--ast-global-color-1: var(--color-accent-600); /* hover dei link */
	--ast-global-color-2: var(--color-text);       /* titoli e marchio */
	--ast-global-color-3: var(--color-neutral-800);/* testo corrente */
	--ast-global-color-4: var(--color-bg);         /* fondo pagina, barra di testata, fascia sotto il footer */
	--ast-global-color-5: var(--color-surface);    /* fondo dei campi di modulo */
	--ast-global-color-6: var(--color-neutral-900);
	--ast-global-color-7: var(--color-neutral-300);/* bordi sottili: alimenta anche --ast-border-color */
	--ast-global-color-8: var(--color-neutral-900);
}

/* ── Corpo pagina ────────────────────────────────────────────────────── */

/* Astra scrive due volte body{background:#fff} in main.min.css: stessa
   specificità, vinciamo per ordine, ma la classe rende la cosa esplicita. */
body.ast-plain-container {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	/* Fluida sul serio: 16px sul telefono, 17,5 a 1200, 19,5 su un Full HD.
	   Prima si fermava a 17px già a 1100px e da lì in su non cambiava più
	   niente, per quanto grande fosse lo schermo. Tutte le misure in `ch`
	   e in `em` del foglio crescono con questa. */
	font-size: clamp(16px, 0.22vw + 14.9px, 19.5px);
	line-height: 1.65;
	text-wrap: pretty;
}

/* Astra impone lo stack di sistema anche ai controlli. Qui passa solo la
   famiglia: dimensioni, bordi e forme restano alle aree pulsanti e moduli.
   (select non è nell'HTML servito ma il calendario MotoPress ne genera due
   a runtime, .datepick-month-year, sulla pagina disponibilità.) */
button,
input,
select,
textarea {
	font-family: var(--font-body);
}

/* Astra colora la selezione di blu e forza il testo a bianco: rimettiamo
   l'accento velato e il testo al suo colore. */
::selection {
	background: color-mix(in srgb, var(--color-accent) 30%, transparent);
	color: var(--color-text);
}

/* Unico segnale di focus del sistema. Vale per link, pulsanti e skip link;
   i campi di modulo, dove Astra spegne l'outline, li riprende l'area moduli. */
:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* ── Titoli ──────────────────────────────────────────────────────────── */

/* Astra dimensiona i titoli con .entry-content :where(h1) — specificità
   zero — quindi basta un selettore normale. Il peso 600 arriva invece dal
   tag nudo (h1,h2,…{font-weight:600}) e va riportato a 400: Caprasimo ha
   un solo peso e il finto grassetto del browser la impasta.
   h4 sta nel gruppo per completezza: nessuna pagina ne ha uno oggi, ma la
   sua misura Astra (20px) coincide già con quella del design. Sotto l'h4
   il font display non va usato: h5/h6 restano ad Astra. */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
header.entry-header h1.entry-title {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	color: var(--color-text);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.entry-content h1 {
	font-size: clamp(34px, 1.6vw + 27px, 58px);
	line-height: 1.1;
}

.entry-content h2 {
	font-size: clamp(26px, 1.15vw + 26px, 46px);
	line-height: 1.12;
}

.entry-content h3 {
	font-size: clamp(20px, 0.75vw + 18px, 32px);
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* Titolo di pagina (tutte le pagine tranne la home, che non lo stampa).
   Da battere: header.entry-header .entry-title{font-weight:600;font-size:32px}. */
header.entry-header h1.entry-title {
	font-size: clamp(32px, 1.6vw + 27px, 58px);
	line-height: 1.1;
	margin-bottom: var(--space-6);
}

/* ── Ritmo verticale delle pagine lunghe ─────────────────────────────── */

/* Nelle pagine di testo i blocchi sono figli diretti di .entry-content, che
   non è un contenitore "is-layout-flow": nessuno dà un margine superiore ai
   titoli, e un h2 finirebbe appiccicato al paragrafo precedente. La home ha
   invece le sue fasce .arg-sezione e il ritmo lo porta l'area home. */
body:not(.home) .entry-content h2 {
	margin-top: clamp(36px, 5vw, 56px);
	margin-bottom: var(--space-4);
}

body:not(.home) .entry-content h3 {
	margin-top: clamp(24px, 3.4vw, 34px);
	margin-bottom: var(--space-3);
}

body:not(.home) .entry-content > :first-child {
	margin-top: 0;
}

/* Larghezza leggibile. Astra allarga ogni figlio di .entry-content a 1200px:
   giusto per gallerie e calendario, illeggibile per i termini e le condizioni.
   La misura sta sull'articolo intero, titolo compreso, invece che sui singoli
   blocchi: il titolo resta allineato al testo e la colonna si centra nello
   schermo. Ancorata a sinistra com'era, su un Full HD lasciava cinquecento
   pixel vuoti a destra. In `ch` e non in px, così cresce col corpo del testo. */
body:not(.home) .ast-article-single {
	max-width: 66ch;
	margin-inline: auto;
}

/* Quel che ha bisogno di più aria del testo esce dalla colonna restando
   centrato sullo schermo: il margine sinistro al 50% porta il bordo in mezzo
   alla colonna, la traslazione di mezza larghezza lo rimette in mezzo. */
body:not(.home) .entry-content[data-ast-blocks-layout] > .wp-block-gallery {
	width: min(1160px, 90vw);
	margin-left: 50%;
	transform: translateX(-50%);
}

/* Su schermi grandi cresce anche il contenitore, altrimenti la pagina resta
   un francobollo in mezzo al vuoto. Sotto i 1440px non cambia nulla. */
.site-content > .ast-container,
#masthead .ast-primary-header-bar .site-primary-header-wrap {
	max-width: clamp(1240px, calc(1240px + (100vw - 1440px) * 0.3), 1440px);
}

/* ── Testo corrente ──────────────────────────────────────────────────── */

.entry-content {
	overflow-wrap: break-word; /* indirizzi e email lunghe non sfondano lo schermo del telefono */
}

.entry-content p {
	margin-bottom: var(--space-6);
	color: var(--color-neutral-800);
}

/* Elenchi numerati. Quelli puntati li ridisegna l'area "contenuti" con un
   pallino proprio; qui resta solo l'ol, che oggi non compare in nessuna
   pagina ma erediterebbe altrimenti il rientro di 3em di Astra. */
.entry-content ol.wp-block-list {
	margin: 0 0 var(--space-6);
	padding-left: 1.35em;
	color: var(--color-neutral-800);
}

.entry-content ol.wp-block-list li {
	margin-bottom: var(--space-2);
}

.entry-content ol.wp-block-list li:last-child {
	margin-bottom: 0;
}

.entry-content ol.wp-block-list li::marker {
	color: var(--color-accent);
}


/* ========================================================================
   2 · TESTATA E NAVIGAZIONE
   ======================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   TESTATA E NAVIGAZIONE
   Astra tiene nella testata due alberi completi e paralleli, #ast-desktop-header
   e #ast-mobile-header: marchio e menu sono duplicati nel sorgente, quindi ogni
   regola va scritta perché valga per il ramo giusto (o per entrambi).
   Il menu del sito è piatto, cinque voci, nessun sottomenu: qui non c'è CSS per
   .sub-menu. Il menu mobile è di tipo "dropdown" (data-type="dropdown"), non
   off-canvas: .ast-mobile-popup-drawer non esiste nel DOM di nessuna pagina.
   ═══════════════════════════════════════════════════════════════════════════ */

#masthead {
	/* Altezza della barra. Nell'artboard la nav è alta circa 61px (34px di
	   pulsante più 13.2px di respiro sopra e sotto); 64px è la stessa misura
	   arrotondata a un'area comoda da toccare. Astra ne dà 80. */
	--arg-testata-h: clamp(64px, 1.55vw + 45px, 84px);

	background-color: var(--color-bg);
	font-family: var(--font-body);
}

/* Fondo sabbia e nessuna riga di separazione: nel design la testata si dissolve
   nella pagina e il contrasto lo fanno i pannelli, non le fasce a tutta
   larghezza. L'ID basta a battere .ast-primary-header-bar (0,1,0),
   .ast-header-break-point .ast-primary-header-bar (0,2,0) e le regole gemelle
   su .main-header-bar. */
#masthead .ast-primary-header-bar,
#masthead .main-header-bar {
	background-color: var(--color-bg);
	border-bottom-width: 0;
}

/* Il min-height sta su due elementi diversi: sul desktop è il contenitore
   interno, sul mobile la barra stessa (che porta entrambe le classi). */
#masthead .ast-primary-header-bar .site-primary-header-wrap,
#masthead .ast-mobile-header-wrap .ast-primary-header-bar {
	min-height: var(--arg-testata-h);
}

/* Il padding verticale del marchio (1em sopra e sotto) serviva a fare altezza:
   ora l'altezza la dà la barra, e il marchio si limita a centrarsi. */
#masthead.ast-logo-title-inline .ast-site-identity {
	padding-block: 0;
}

/* ── Marchio ─────────────────────────────────────────────────────────────── */

/* Astra dà al titolo 26px e peso 600 (h1,…,.site-title,.site-title a); il
   design lo vuole nel font display e peso 400. Alzato di un sesto l'8 settembre
   2026, quando sotto è comparso lo slogan: il nome deve restare la voce più
   forte delle due, altrimenti il blocco si legge come due righe alla pari. */
#masthead .site-title {
	font-size: clamp(21px, 0.4vw + 16.2px, 28px);
	line-height: 1.15;
	margin: 0;
}

/* — lo slogan sotto il nome —
   Piccolo, spaziato e in maiuscoletto: accompagna il marchio senza competerci.
   Il testo non è «blogdescription» ma la stringa «marchio-slogan», sostituita
   dal filtro astra_site_description nel functions.php. */
#masthead .ast-site-identity .site-description {
	margin: 3px 0 0;
	font-family: var(--font-body);
	font-size: clamp(10.5px, 0.09vw + 9.2px, 12.5px);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--color-neutral-600);
}

/* Sotto i 545px Astra impila intestazione e menu: lo slogan resta, ma senza
   la spaziatura fra le lettere, che a quella misura fa solo rumore. */
@media (max-width: 544px) {
	#masthead .ast-site-identity .site-description {
		letter-spacing: 0.05em;
	}
}

#masthead .ast-site-identity .site-title a {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	letter-spacing: -0.02em;
	color: var(--color-text);
}

#masthead .ast-site-identity .site-title a:hover,
#masthead .ast-site-identity .site-title a:focus {
	color: var(--color-accent-700);
}

/* ── Menu desktop ────────────────────────────────────────────────────────── */

/* Voci a 14px come nell'artboard. Lo stacco fra una voce e l'altra è --space-4
   (17.6px): metà per lato sul link, così l'ultima voce resta a filo della
   colonna di contenuto senza margini negativi. */
#ast-desktop-header .ast-builder-menu-1 .main-header-menu .menu-link {
	padding-inline: var(--space-2);
	/* 14px fissi su un Full HD sono minuscoli: da 15 a 18 con la larghezza. */
	font-size: clamp(15px, 0.28vw + 11.6px, 18px);
}

#ast-desktop-header .ast-builder-menu-1 .menu-item > .menu-link {
	color: var(--color-text);
}

/* La riga alta 80px è ciò che tiene su la barra ed è anche l'area cliccabile
   della voce: va riportata alla nuova altezza, non tolta. Il selettore di Astra
   vale (0,5,0) per via di :not(:has(…)), quindi qui serve l'ID più il body. */
body.ast-desktop #ast-desktop-header .ast-primary-header-bar .main-header-menu > .menu-item {
	line-height: var(--arg-testata-h);
}

/* Terracotta scuro e non --color-accent pieno: sul fondo sabbia il terracotta
   pieno sta a 3:1, sotto la soglia di leggibilità per un testo di 14px. */
#ast-desktop-header .ast-builder-menu-1 .menu-link:hover,
#ast-desktop-header .ast-builder-menu-1 .menu-link:focus,
#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link {
	color: var(--color-accent-700);
}

/* Pagina corrente: cambia anche il peso, così il segnale non è affidato al solo
   colore (l'<a> porta comunque aria-current="page"). */
#ast-desktop-header .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link {
	color: var(--color-accent-700);
	font-weight: 600;
}

/* ── Pulsante del menu mobile ────────────────────────────────────────────── */

/* Astra colora bottone e fill degli SVG con l'azzurro di sistema
   (--ast-global-color-0) da due selettori ad attributo: vanno pareggiati. */
#ast-mobile-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal {
	padding: var(--space-1) var(--space-2);
	color: var(--color-text);
	background: transparent;
	border: 0;
	border-radius: 999px;
}

#ast-mobile-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:hover,
#ast-mobile-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:focus {
	color: var(--color-accent-700);
	/* stessa ricetta di .btn-ghost:hover del design */
	background: color-mix(in srgb, var(--color-accent) 10%, transparent);
	/* Astra su :focus rimette un bordo punteggiato: qui il segnale è l'outline */
	border: 0;
}

#ast-mobile-header [data-section="section-header-mobile-trigger"] .mobile-menu-toggle-icon .ast-mobile-svg {
	fill: currentColor;
}

/* ── Pannello del menu mobile ────────────────────────────────────────────── */

/* Il pannello è in posizione assoluta e copre il contenuto, quindi deve essere
   opaco. Nel sistema il contrasto lo fanno i pannelli in --color-surface sul
   fondo sabbia: niente ombra, basta la tinta. Il fondo bianco di Astra è
   cablato (#ffffff), non passa da una variabile. */
#ast-mobile-header .ast-mobile-header-content {
	padding-block: var(--space-2);
	background-color: var(--color-surface);
	border-bottom-left-radius: var(--radius-lg);
	border-bottom-right-radius: var(--radius-lg);
	overflow: hidden;
}

/* Astra ridipinge di bianco anche la lista e i singoli link del menu mobile:
   senza spegnerli restano voci bianche su pannello crema. */
#ast-mobile-header .ast-builder-menu-mobile .main-navigation .main-header-menu,
#ast-mobile-header .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link {
	background-color: transparent;
}

/* Righe alte abbastanza per il dito e allineate ai 20px di margine della barra
   (gli stessi di .ast-container, così il menu resta a filo del contenuto).
   16px e non 14px: qui la voce è un bersaglio da toccare, non una riga di nav. */
#ast-mobile-header .main-navigation ul .menu-item .menu-link {
	padding: var(--space-3) 20px;
	font-size: 16px;
	line-height: 1.35;
	color: var(--color-text);
}

#ast-mobile-header .main-navigation .menu-item > .menu-link:hover,
#ast-mobile-header .main-navigation .menu-item > .menu-link:focus,
#ast-mobile-header .main-navigation .menu-item:hover > .menu-link,
#ast-mobile-header .main-navigation .menu-item.current-menu-item > .menu-link {
	color: var(--color-accent-700);
	background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

#ast-mobile-header .main-navigation .menu-item.current-menu-item > .menu-link {
	font-weight: 600;
}

/* ── Fuoco da tastiera ───────────────────────────────────────────────────── */

/* Astra usa un outline punteggiato "thin" ereditando il colore; il sistema ha
   un solo segnale di accessibilità, il filetto pieno da 2px in terracotta. */
#masthead a:focus-visible,
#masthead button:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Il link di salto sta fuori da .site (è il primo figlio di body), quindi il
   selettore non va ancorato al contenitore. Resta invisibile finché non prende
   il fuoco, ma quando
   compare deve essere del sistema. Si tocca solo l'aspetto: clip, left e top
   sono il meccanismo che lo mostra e restano quelli di Astra. */
a.skip-link:focus {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-accent-700);
	background-color: var(--color-surface);
	border-radius: 999px;
	box-shadow: var(--shadow-md);
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* ── Movimento ───────────────────────────────────────────────────────────── */

/* Le transizioni non le abbiamo aggiunte noi: Astra mette transition:all .2s
   linear su link, marchio e voci di menu. Vanno comunque disinnescate. */
@media (prefers-reduced-motion: reduce) {
	#masthead a,
	#masthead a *,
	#masthead .ast-site-identity,
	#masthead .menu-link,
	#ast-scroll-top {
		transition: none;
	}
}


/* ========================================================================
   3 · CONTENUTI, ELENCHI, FOTO
   ======================================================================== */

/* ═══ Contenuti e immagini ═══════════════════════════════════════════════
   Testo redazionale dei blocchi Gutenberg: link, elenchi, foto e gallerie.
   ═════════════════════════════════════════════════════════════════════ */

/* — link nel testo —
   Astra spegne la sottolineatura con "a, a:focus, a:hover, a:visited" (0,1,1)
   e colora i link di blu: il :not() qui vale (0,2,1) e vince in tutti gli
   stati senza !important. L'esclusione tiene fuori i pulsanti, che sono un
   componente a sé. */
.entry-content a:not(.wp-block-button__link) {
	color: var(--color-accent-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content a:not(.wp-block-button__link):hover,
.entry-content a:not(.wp-block-button__link):focus {
	color: var(--color-accent-600);
}

/* Astra mette "outline: thin dotted" su a:focus, quindi anche al clic del
   mouse; il sistema vuole l'anello solo da tastiera. */
.entry-content a:not(.wp-block-button__link):focus {
	outline: none;
}

.entry-content a:not(.wp-block-button__link):focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* — elenchi puntati —
   Sono il corpo di /la-casa/, /disponibilita/ e /termini-e-condizioni/.
   Astra li rientra di 3em ("ol, ul { margin: 0 0 1.5em 3em }") e lascia il
   pallino di sistema: qui diventano i punti tondi oliva del design, con il
   pallino allineato al margine del testo e la voce rientrata di 22px
   (10px di pallino + 12px di stacco, le stesse misure dei punti del
   quartiere nell'artboard). */
.entry-content ul.wp-block-list {
	margin-block: 0 var(--space-6);
	margin-inline-start: 0;
	padding-inline-start: 22px;
	color: var(--color-neutral-800);
	/* Stringa vuota e non "none": così Safari continua ad annunciare
	   l'elenco e il numero di voci a chi usa uno screen reader. */
	list-style-type: "";
}

.entry-content ul.wp-block-list > li {
	position: relative;
}

.entry-content ul.wp-block-list > li + li {
	margin-block-start: var(--space-2);
}

.entry-content ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	inset-inline-start: -22px;
	top: 0.55em; /* centro ottico della prima riga, con interlinea fra 1,55 e 1,65 */
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-accent-2-500);
}

/* — foto —
   Lo "slavato caldo" è la firma del sistema: senza filtro le foto saltano
   fuori dal fondo sabbia. Vale per la foto dell'hero e per quelle in
   galleria, che sono tutte figure.wp-block-image. */
.entry-content figure.wp-block-image img {
	filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94);
}

/* — galleria (6 foto in home, 23 in /la-casa/) —
   Il core calcola la larghezza delle celle da --wp--style--unstable-gallery-gap
   ("width: calc(33.33333% - var(...) * .66667)"), mentre il gap visibile
   arriva da un'altra regola: le due misure vanno tenute uguali, altrimenti
   le tre colonne non stanno più su una riga. Da qui la variabile unica. */
.entry-content .wp-block-gallery.has-nested-images {
	--arg-galleria-gap: clamp(12px, 2.2vw, 28px);
	--wp--style--unstable-gallery-gap: var(--arg-galleria-gap);

	gap: var(--arg-galleria-gap);
	margin-block: clamp(24px, 4vw, 36px);
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image {
	/* Tutte le foto caricate sono 1024×684: fissare qui il rapporto tiene le
	   righe regolari anche se un domani ne entra una di formato diverso, e
	   riserva lo spazio prima che il lazy loading carichi l'immagine. */
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: clamp(16px, 2.4vw, var(--radius-lg));
	/* Tinta di attesa sotto le 23 foto in lazy loading di /la-casa/. */
	background: var(--color-neutral-300);
}

/* — movimento —
   Astra dichiara "transition: all .2s linear" su ogni a (0,0,1): questa
   regola (0,1,1) la spegne per chi ha chiesto meno animazioni. */
@media (prefers-reduced-motion: reduce) {
	.entry-content a {
		transition: none;
	}
}


/* ========================================================================
   4 · HOME: HERO, FASCE, SCHEDE, PULSANTI
   ======================================================================== */

/* ==========================================================================
   HOME — hero, fasce, schede, pulsanti.
   Sistema "Organic": i token stanno in design-base.css, qui si usano e basta.
   Tutte le classi .arg-* esistono solo sulla home; i pulsanti Gutenberg sono
   invece stilati per tutto .entry-content, perché sono lo stesso componente
   su ogni pagina.
   ========================================================================== */

/* Base comune delle tre zone della home. Il ritmo verticale lo porta il
   padding inferiore delle fasce, non i margini fra blocchi. */
.entry-content .arg-hero,
.entry-content .arg-sezione,
.entry-content .arg-cta {
	font-family: var(--font-body);
	color: var(--color-text);
}

/* Gutenberg dà 24px di stacco a ogni figlio di un gruppo `is-layout-flow`
   (`:root :where(.is-layout-flow) > *`, 0,1,0). Qui lo spazio lo decidiamo
   noi elemento per elemento. */
.entry-content .arg-hero > *,
.entry-content .arg-hero__testo > *,
.entry-content .arg-sezione > *,
.entry-content .arg-punti > *,
.entry-content .arg-punto > *,
.entry-content .arg-cta > * {
	margin-block: 0;
}


/* --- hero ---------------------------------------------------------------- */

.entry-content .arg-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(32px, 4.4vw, 56px);
	align-items: center;
	padding-block: clamp(28px, 6vw, 88px) clamp(36px, 5vw, 56px);
}

.entry-content p.arg-hero__occhiello {
	margin: 0 0 20px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-700);
}

.entry-content .arg-hero__testo h1 {
	margin: 0 0 24px;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp(40px, 5.6vw, 68px);
	line-height: 1.08;
	letter-spacing: -0.028em;
	color: var(--color-text);
	text-wrap: balance;
}

.entry-content .arg-hero__testo p:not(.arg-hero__occhiello) {
	max-width: 46ch;
	margin: 0 0 32px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--color-neutral-800);
}

.entry-content .arg-hero__testo .wp-block-buttons {
	margin: 0;
}

/* Foto hero: raggio grande (2 × --radius-lg), l'unica con ombra media. */
.entry-content figure.arg-hero__media {
	margin: 0;
	border-radius: clamp(28px, 5vw, 56px);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	aspect-ratio: 4 / 5;
}

.entry-content figure.arg-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 860px) {
	.entry-content .arg-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	/* A tutta larghezza il 4/5 occuperebbe quasi tutto lo schermo, e i file
	   caricati sono 3:2: il 4/3 ritaglia molto meno. */
	.entry-content figure.arg-hero__media {
		aspect-ratio: 4 / 3;
	}
}


/* --- fasce di contenuto --------------------------------------------------- */

.entry-content .arg-sezione {
	padding-block: clamp(0px, 3vw, 24px) clamp(48px, 9vw, 80px);
}

/* Occhiello di fascia: 13px maiuscoletto in terracotta scura. Serve almeno
   (0,2,0) per battere `.entry-content p{margin-bottom:1.6em}` (0,1,1). */
.entry-content .arg-sezione > p.arg-occhiello {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-700);
}

.entry-content .arg-sezione > h2 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp(30px, 4vw, 40px);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--color-text);
	text-wrap: balance;
}

.entry-content .arg-sezione > p:not(.arg-occhiello):not(.arg-nota) {
	max-width: 56ch;
	font-size: 17px;
	line-height: 1.65;
	color: var(--color-neutral-800);
}

/* Distanze prese dall'artboard: mezzo passo fra un titolo e il suo testo,
   un passo e mezzo fra un blocco di testo e la griglia che segue. */
.entry-content .arg-sezione > p.arg-occhiello + h2 { margin-block-start: 20px; }
.entry-content .arg-sezione > h2 + p { margin-block-start: 16px; }
.entry-content .arg-sezione > p + .arg-punti { margin-block-start: 36px; }
.entry-content .arg-sezione > p.arg-occhiello + .arg-punti { margin-block-start: 28px; }
.entry-content .arg-sezione > p + ul.wp-block-list { margin-block-start: 28px; }

/* Fascia crema: --color-surface, la stessa tinta delle schede del design.
   Il blocco è largo 1200px dentro .ast-container, quindi il colore arriva ai
   bordi dello schermo con l'ombra allargata; il clip-path la taglia sopra e
   sotto. box-shadow non genera scroll orizzontale, quindi è sicuro. */
.entry-content .arg-sezione.arg-sezione--crema {
	background-color: var(--color-surface);
	box-shadow: 0 0 0 100vmax var(--color-surface);
	clip-path: inset(0 -100vmax);
	padding-block: clamp(44px, 7vw, 68px) clamp(48px, 9vw, 80px);
}

.entry-content .arg-sezione--crema > h2 + p { margin-block-start: 12px; }


/* --- griglie di punti e schede -------------------------------------------- */

.entry-content .arg-punti {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
}

@media (min-width: 860px) {
	.entry-content .arg-punti {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 44px 40px;
	}
}

.entry-content .arg-punto__titolo {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--color-text);
}

.entry-content .arg-punto p {
	margin: 0;
	line-height: 1.6;
	color: var(--color-neutral-800);
}

.entry-content .arg-punto .arg-punto__titolo + p { margin-block-start: 12px; }

/* Colonne senza scheda ("Perché qui"): il pallino colorato dell'artboard,
   che nel markup non esiste come elemento. */
.entry-content .arg-sezione:not(.arg-sezione--crema) .arg-punto::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	margin-bottom: 18px;
	border-radius: 50%;
	background-color: var(--color-accent);
}

.entry-content .arg-sezione:not(.arg-sezione--crema) .arg-punto:nth-child(2)::before {
	background-color: var(--color-accent-2-500);
}

.entry-content .arg-sezione:not(.arg-sezione--crema) .arg-punto__titolo {
	font-size: clamp(23px, 2.4vw, 27px);
}

.entry-content .arg-sezione:not(.arg-sezione--crema) .arg-punto p {
	font-size: 16px;
}

/* Schede dentro la fascia crema: fondo sabbia, altrimenti si appiattirebbero
   sul loro sfondo. Ombra piccola, l'unica del design oltre a quella dell'hero. */
.entry-content .arg-sezione--crema .arg-punti {
	gap: 20px;
}

.entry-content .arg-sezione--crema .arg-punto {
	padding: 24px 24px 26px;
	border-radius: var(--radius-lg);
	background-color: var(--color-bg);
	box-shadow: var(--shadow-sm);
}

.entry-content .arg-sezione--crema .arg-punto__titolo {
	font-size: clamp(20px, 2vw, 22px);
}

.entry-content .arg-sezione--crema .arg-punto p {
	font-size: 15px;
}

/* Occhiello di scheda: più piccolo e più spaziato di quello di fascia, e in
   terracotta piena invece che scura. */
.entry-content .arg-punti .arg-punto > p.arg-occhiello {
	margin: 0 0 8px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
}

@media (min-width: 860px) {
	.entry-content .arg-sezione--crema .arg-punti { gap: 28px; }
}


/* --- elenco del quartiere -------------------------------------------------
   Nell'artboard è una griglia 2×2 di voci con pallino oliva; qui la stessa
   forma applicata alla lista puntata reale. */

.entry-content .arg-sezione > ul.wp-block-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-content .arg-sezione > ul.wp-block-list > li {
	position: relative;
	margin: 0;
	padding-inline-start: 22px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-neutral-800);
}

.entry-content .arg-sezione > ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: calc(0.75em - 5px);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-accent-2-500);
}

@media (min-width: 700px) {
	.entry-content .arg-sezione > ul.wp-block-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 24px;
	}
}


/* --- galleria della fascia crema ------------------------------------------
   Il core ricalcola la larghezza delle celle a partire da
   --wp--style--unstable-gallery-gap: va cambiata quella, non solo `gap`.
   La dichiarazione del core sta in uno <style> stampato NEL BODY, cioè dopo
   questo foglio, quindi qui serve specificità, non ordine. */

.entry-content .arg-sezione--crema .wp-block-gallery.has-nested-images {
	--wp--style--unstable-gallery-gap: 20px;
	gap: 20px;
	margin-block-start: clamp(28px, 4vw, 40px);
}

/* Con .is-cropped l'immagine riempie la figure: le proporzioni si danno qui
   e gli angoli si arrotondano sul contenitore, non sull'img. */
.entry-content .arg-sezione--crema .wp-block-gallery figure.wp-block-image {
	aspect-ratio: 4 / 3;
	border-radius: clamp(16px, 3vw, 28px);
	overflow: hidden;
}

/* Lo "slavato caldo" (.washed del design) vale per ogni figure.wp-block-image
   ed è dichiarato una volta sola nell'area "contenuti": la foto della hero e
   quelle della galleria portano entrambe quella classe. */


/* --- nota di servizio ------------------------------------------------------ */

.entry-content p.arg-nota {
	max-width: 60ch;
	margin: 28px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-neutral-700);
}

.entry-content p.arg-nota a {
	color: var(--color-accent-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content p.arg-nota a:hover,
.entry-content p.arg-nota a:focus {
	color: var(--color-accent-600);
}


/* --- fascia di invito all'azione -------------------------------------------
   È il riquadro oliva chiaro dell'artboard. Lì conteneva un modulo sulla
   colonna destra; qui c'è solo un pulsante, quindi il contenuto è centrato
   invece che allineato a sinistra su un riquadro largo 1200px. */

.entry-content .arg-cta {
	margin-block: clamp(40px, 7vw, 72px) clamp(48px, 9vw, 80px);
	padding: clamp(36px, 6vw, 56px) clamp(24px, 4vw, 64px);
	border-radius: clamp(28px, 4.5vw, 56px);
	background-color: var(--color-accent-2-100);
	text-align: center;
}

.entry-content .arg-cta > * {
	margin-inline: auto;
}

.entry-content .arg-cta > h2 {
	max-width: 22ch;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp(26px, 3.4vw, 34px);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--color-text);
	text-wrap: balance;
}

.entry-content .arg-cta > p:not(.arg-nota) {
	max-width: 56ch;
	margin-block-start: 14px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--color-neutral-800);
}

.entry-content .arg-cta > .wp-block-buttons {
	margin-block-start: 24px;
	justify-content: center;
}

.entry-content .arg-cta > p.arg-nota {
	margin-block-start: 18px;
}


/* --- pulsanti Gutenberg ----------------------------------------------------
   Il .btn del design: pillola, font dei titoli, terracotta piena per il
   primario. Da battere: `.wp-block-button .wp-block-button__link` di Astra
   (0,2,0) e `a:where(.wp-block-button__link){border-radius:4px;box-shadow:…}`
   (0,0,1), entrambe nel <head>; il core stampa invece
   `:root :where(.wp-element-button,.wp-block-button__link)` (0,1,0). */

.entry-content .wp-block-buttons {
	gap: 12px;
}

.entry-content .wp-block-button .wp-block-button__link.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	box-shadow: none;
	background-color: var(--color-accent);
	color: var(--color-bg);
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
}

.entry-content .wp-block-button .wp-block-button__link.wp-element-button:hover,
.entry-content .wp-block-button .wp-block-button__link.wp-element-button:focus {
	background-color: var(--color-accent-600);
	border-color: transparent;
	color: var(--color-bg);
}

.entry-content .wp-block-button .wp-block-button__link.wp-element-button:active {
	background-color: var(--color-accent-700);
}

/* Focus da tastiera: è l'unico segnale di accessibilità del design. */
.entry-content .wp-block-button .wp-block-button__link.wp-element-button:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Secondario (.is-style-outline): il .btn-secondary del design.
   Qui la specificità serve davvero. Astra arriva a (0,4,0) per la geometria e
   a (0,6,0) per l'hover; il core stampa la variante `is-style-outline--1`
   in uno <style> dentro il body, cioè DOPO questo foglio. Da qui le catene
   lunghe: sono la via senza !important. */
.entry-content .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	padding: 14px 26px;
	border: 1px solid var(--color-divider);
	border-radius: 999px;
	box-shadow: none;
	background-color: transparent;
	color: var(--color-text);
}

.entry-content .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover,
.entry-content .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:focus {
	border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
	background-color: color-mix(in srgb, var(--color-text) 7%, transparent);
	color: var(--color-text);
}

.entry-content .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:active {
	background-color: color-mix(in srgb, var(--color-text) 14%, transparent);
}

/* Il design non dichiara nessuna transizione: questa è un'aggiunta, quindi
   sparisce a chi ha chiesto meno movimento. */
@media (prefers-reduced-motion: no-preference) {
	.entry-content .wp-block-button .wp-block-button__link.wp-element-button {
		transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
	}
}


/* ========================================================================
   5 · MODULO DI CONTATTO E CALENDARIO
   ======================================================================== */

/* ==========================================================================
   AREA — Modulo di contatto (Contact Form 7) e calendario (MotoPress)
   Selettori verificati sul markup vivo di /contatti/ e /disponibilita/.
   Il foglio del tema figlio esce dopo astra, contact-form-7, datepick e
   mphb: a parità di specificità vince quest'ultimo.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. MODULO DI CONTATTO — /contatti/
   -------------------------------------------------------------------------- */

/* Il modulo è il pannello d'invito della pagina: stessa tinta e stesso raggio
   del riquadro CTA del design. Larghezza contenuta perché la colonna del
   contenuto arriva a 1200px e campi larghi così sono illeggibili.
   (0,3,0) per battere .entry-content[data-ast-blocks-layout] > * di Astra. */
.entry-content[data-ast-blocks-layout] > .wpcf7 {
	max-width: 780px;
	/* A sinistra come il titolo e i paragrafi della pagina: centrato nei 1200px
	   della colonna resterebbe scollegato dal testo che lo introduce. */
	margin-inline: 0 auto;
	margin-bottom: clamp(32px, 6vw, 56px);
	padding: clamp(24px, 5vw, 48px);
	background: var(--color-accent-2-100);
	border-radius: clamp(28px, 6vw, 56px);
}

/* Griglia a 6 colonne: ogni campo dichiara colonna d'inizio e ampiezza, così
   l'ordine visivo coincide sempre con l'ordine del DOM (e con quello di
   tabulazione). Sotto i 640px resta tutto a colonna singola. */
.wpcf7 form.wpcf7-form {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-4) var(--space-3);
	accent-color: var(--color-accent); /* tinta dei controlli nativi: datepicker, spinner del numero */
}

.wpcf7 form.wpcf7-form > * {
	grid-column: 1 / -1;
}

/* Il markup di CF7 chiude il <p> del turnstile con un <div>: il parser lascia
   due <p> vuoti e un <br> orfano, che come celle della griglia aprirebbero
   righe fantasma. */
.wpcf7 form.wpcf7-form > p:empty,
.wpcf7 form.wpcf7-form > br,
.wpcf7 .cf7-cf-turnstile > br {
	display: none;
}

/* Il campo trappola antispam resta nel DOM e nascosto com'è (style inline con
   clip): display:contents toglie solo la riga di griglia del suo <p>. */
.wpcf7 form.wpcf7-form > p:has(> .cf7apps-honeypot-wrap) {
	display: contents;
}

@media (min-width: 640px) {
	.wpcf7 form.wpcf7-form > p:has(> label > [data-name="nome"]) { grid-column: 1 / span 3; }
	.wpcf7 form.wpcf7-form > p:has(> label > [data-name="email"]) { grid-column: 4 / span 3; }
	.wpcf7 form.wpcf7-form > p:has(> label > [data-name="telefono"]) { grid-column: 1 / span 3; }
	.wpcf7 form.wpcf7-form > p:has(> label > [data-name="checkin"]) { grid-column: 1 / span 2; }
	.wpcf7 form.wpcf7-form > p:has(> label > [data-name="checkout"]) { grid-column: 3 / span 2; }
	.wpcf7 form.wpcf7-form > p:has(> label > [data-name="ospiti"]) { grid-column: 5 / span 2; }
}

/* — etichette — */
.wpcf7 form.wpcf7-form > p > label {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-text);
}

/* CF7 separa etichetta e campo con un <br>: lo spazio lo diamo noi. */
.wpcf7 form.wpcf7-form > p > label > br {
	display: none;
}

/* Arrivo, partenza e ospiti stanno sulla stessa riga con etichette di lunghezza
   diversa: se una va a capo, il suo campo scende e la riga si disallinea. Il <p>
   riempie la cella, l'etichetta diventa una colonna e il campo si appoggia in
   basso con margin-top:auto, così i tre campi restano su una linea qualunque
   cosa facciano le etichette — anche quando è la larghezza dello schermo a
   mandarle a capo. */
.wpcf7 form.wpcf7-form > p:has(> label > .wpcf7-form-control-wrap) {
	display: flex;
}

.wpcf7 form.wpcf7-form > p > label:has(> .wpcf7-form-control-wrap) {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.wpcf7 form.wpcf7-form > p > label > .wpcf7-form-control-wrap {
	margin-top: auto;
	padding-top: 6px;
}

/* — campi — */
.wpcf7 input.wpcf7-form-control:not([type=submit]),
.wpcf7 textarea.wpcf7-form-control {
	width: 100%;
	height: auto;
	min-height: 48px;
	padding: 12px 18px;
	font-family: var(--font-body);
	font-size: 16px; /* sotto i 16px iOS ingrandisce la pagina al focus */
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text);
	caret-color: var(--color-accent);
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: 999px;
	box-shadow: none;
}

.wpcf7 textarea.wpcf7-form-control {
	/* Il campo nasce con rows="10", cioè circa 250px: in un modulo di otto righe
	   diventa il baricentro della pagina. L'altezza la fissiamo qui, il
	   visitatore la allarga col resize. */
	height: 150px;
	min-height: 140px;
	padding: 14px 18px;
	border-radius: 20px;
	resize: vertical;
}

.wpcf7 input.wpcf7-form-control::placeholder,
.wpcf7 textarea.wpcf7-form-control::placeholder {
	color: var(--color-neutral-600);
	opacity: 1;
}

.wpcf7 input.wpcf7-form-control:not([type=submit]):hover,
.wpcf7 textarea.wpcf7-form-control:hover {
	border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.wpcf7 input.wpcf7-form-control:not([type=submit]):focus,
.wpcf7 textarea.wpcf7-form-control:focus {
	color: var(--color-text);
	border-color: var(--color-accent);
	box-shadow: none;
	outline: none;
}

.wpcf7 input.wpcf7-form-control:not([type=submit]):focus-visible,
.wpcf7 textarea.wpcf7-form-control:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Campo non valido: CF7 gira aria-invalid a "true" e aggiunge .wpcf7-not-valid. */
.wpcf7 input.wpcf7-form-control[aria-invalid="true"],
.wpcf7 textarea.wpcf7-form-control[aria-invalid="true"],
.wpcf7 input.wpcf7-form-control.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--color-accent-600);
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	padding-inline: 18px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-accent-700);
}

/* — consenso privacy — */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
	display: block;
	margin: 0;
}

/* CF7 infila due spazi attorno all'etichetta della casella. */
.wpcf7 .wpcf7-list-item-label::before,
.wpcf7 .wpcf7-list-item-label::after {
	content: none;
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item > label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-neutral-800);
	cursor: pointer;
}

/* Astra colora la casella nativa con background e altezza 1.2em/1.4em: la
   ridisegniamo per intero, il segno di spunta è un SVG (in var() non si può
   mettere dentro un data URI, la tinta è --color-bg letterale). */
.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 20px;
	min-width: 20px;
	height: 20px;
	margin: 2px 0 0;
	padding: 0;
	background: var(--color-surface) no-repeat center / 13px 13px;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"]:hover {
	border-color: var(--color-accent);
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"]:checked {
	background-color: var(--color-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f5ead8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4 6.4 11.8 13 4.6'/%3E%3C/svg%3E");
	border-color: var(--color-accent);
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* — Turnstile — */
/* Il contenitore porta uno style inline margin-bottom:-15px: qui l'!important
   è l'unico modo di batterlo. Le misure dell'iframe non si toccano. */
.wpcf7 .cf7-cf-turnstile {
	margin: 0 !important;
}

/* — pulsante d'invio — */
/* CF7 tiene il pulsante disabilitato finché non si spunta la privacy: lo
   stato disabilitato deve vedersi. */
.wpcf7 input.wpcf7-submit {
	width: 100%;
	min-height: 52px;
	padding: 14px 30px;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
	color: var(--color-bg);
	background: var(--color-accent);
	border: 1px solid transparent;
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
}

.wpcf7 input.wpcf7-submit:hover,
.wpcf7 input.wpcf7-submit:focus {
	color: var(--color-bg);
	background: var(--color-accent-600);
	border-color: transparent;
}

.wpcf7 input.wpcf7-submit:active {
	background: var(--color-accent-700);
}

/* L'anello di sistema è in --color-accent: sopra un pulsante già terracotta
   non si vedrebbe, qui usiamo il gradino scuro della stessa scala. */
.wpcf7 input.wpcf7-submit:focus-visible {
	outline: 2px solid var(--color-accent-700);
	outline-offset: 3px;
}

.wpcf7 input.wpcf7-submit:disabled,
.wpcf7 input.wpcf7-submit:disabled:hover {
	background: var(--color-accent);
	opacity: 0.45;
	cursor: not-allowed;
}

@media (min-width: 640px) {
	.wpcf7 form.wpcf7-form > input.wpcf7-submit {
		grid-column: 1 / span 3;
		width: auto;
		justify-self: start;
	}
}

/* Lo spinner lo inserisce il JS di CF7 subito dopo il pulsante: senza questo
   occuperebbe una riga della griglia anche da invisibile. */
.wpcf7 form.wpcf7-form > .wpcf7-spinner {
	display: none;
}

.wpcf7 form.wpcf7-form.submitting > .wpcf7-spinner {
	display: block;
	margin: 0;
	justify-self: start;
	align-self: center;
	background-color: var(--color-accent);
}

@media (min-width: 640px) {
	.wpcf7 form.wpcf7-form.submitting > .wpcf7-spinner {
		grid-column: 4 / -1;
	}
}

/* — messaggi di esito — */
/* La palette non ha un rosso: l'errore usa il ramo terracotta, la conferma
   quello oliva. Il bordo colorato di CF7 resta ma senza spessore. */
.wpcf7 form .wpcf7-response-output {
	margin: var(--space-2) 0 0;
	padding: var(--space-3) var(--space-4);
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-accent-800);
	background: var(--color-accent-100);
	border: 0;
	border-radius: var(--radius-lg);
}

.wpcf7 form.sent .wpcf7-response-output {
	color: var(--color-accent-2-800);
	background: var(--color-accent-2-200);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	color: var(--color-accent-800);
	background: var(--color-accent-200);
}


/* --------------------------------------------------------------------------
   2. CALENDARIO DISPONIBILITÀ — /disponibilita/
   Il calendario lo disegna datepick via JS: le classi interne esistono solo a
   runtime. Sono quelle dichiarate in jquery.datepick.css e in mphb.css.
   -------------------------------------------------------------------------- */

/* Scheda che contiene il calendario: stessa tinta e stesso raggio delle schede
   del design, senza ombra. */
.entry-content[data-ast-blocks-layout] > .mphb_sc_availability_calendar-wrapper {
	/* datepick scrive sul .datepick una larghezza in linea calcolata sui due mesi
	   (462px): un riquadro fisso più largo gli lascerebbe intorno un vuoto. */
	width: fit-content;
	max-width: 100%;
	margin-inline: 0 auto;
	margin-bottom: clamp(28px, 5vw, 44px);
	padding: clamp(18px, 4vw, 32px);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
}

/* MotoPress espone lo stato delle date come variabili: ridefinirle qui
   ricolora anche i mezzi giorni, che sono dei gradienti a 45° costruiti sulle
   stesse variabili. Libero = oliva, occupato = rosso mattone e barrato; fuori
   stagione e passato restano neutri, perché non sono "occupato" ma "fuori dal
   calendario". All'ospite serve sapere una cosa sola: se la data è libera. */
.mphb-calendar {
	--mphb-available-date-bg: var(--color-accent-2-300);
	--mphb-available-date-color: var(--color-accent-2-800);
	--mphb-booked-date-bg: var(--color-occupato-300);
	--mphb-booked-date-color: var(--color-occupato-800);
	--mphb-not-available-date-bg: var(--color-occupato-300);
	--mphb-not-available-date-color: var(--color-occupato-800);
	--mphb-out-of-season-date-bg: var(--color-neutral-300);
	--mphb-out-of-season-date-color: var(--color-neutral-800);
	--mphb-unselectable-date-color: var(--color-neutral-600);
	--mphb-selected-date-bg: var(--color-accent);
	--mphb-selected-date-color: var(--color-bg);
}

/* datepick disegna un riquadro bianco bordato di #444. */
.mphb-calendar .datepick {
	width: 100%;
	/* Il JS scrive style="width:462px" sull'elemento: su un telefono da 390px
	   uscirebbe dallo schermo. Il massimo vince sulla larghezza in linea senza
	   dover ricorrere a !important. */
	max-width: 100%;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-text);
	background: transparent;
	border: 0;
	border-radius: 0;
}

/* — barra di navigazione dei mesi — */
.mphb-calendar .datepick-nav {
	float: none;
	width: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
	font-size: 14px;
	font-weight: 400;
	color: var(--color-text);
	background: transparent;
}

.mphb-calendar .datepick-nav .datepick-cmd {
	float: none;
	width: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--color-text);
	background: transparent;
	border: 1px solid var(--color-divider);
	border-radius: 999px;
}

.mphb-calendar .datepick-nav .datepick-cmd:hover {
	color: var(--color-text);
	background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.mphb-calendar .datepick-nav .datepick-cmd:active {
	background: color-mix(in srgb, var(--color-text) 14%, transparent);
}

.mphb-calendar .datepick-nav .datepick-cmd:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.mphb-calendar .datepick-nav .datepick-cmd.datepick-disabled {
	color: var(--color-text);
	background: transparent;
	opacity: 0.45;
	cursor: default;
}

/* — i due mesi affiancati — */
/* Senza data-monthstoshow la regola responsive del plugin non si applica e i
   mesi restano float:left larghi 15em: la larghezza gliela diamo noi. */
.mphb-calendar .datepick-month-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 44px);
}

.mphb-calendar .datepick-month {
	float: none;
	width: auto;
	border: 0;
	text-align: center;
}

@media (max-width: 640px) {
	.mphb-calendar .datepick-month-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* — intestazione del mese — */
/* Il primo mese ha due <select> (mese e anno), il secondo è testo semplice:
   la regola deve reggere entrambi. */
.mphb-calendar .datepick-month-header {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	/* Altezza fissa e non minima: il primo mese ha due select alti 44px, il
	   secondo una riga di testo alta 24px, e con min-height le due griglie dei
	   giorni partirebbero da quote diverse. */
	height: 48px;
	padding: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--color-text);
	background: transparent;
}

.mphb-calendar .datepick-month-header select.datepick-month-year {
	height: auto;
	min-height: 34px;
	padding: 4px 12px;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 17px;
	line-height: 1.2;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-divider);
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
}

.mphb-calendar .datepick-month-header select.datepick-month-year:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* — griglia dei giorni — */
.mphb-calendar .datepick-month table {
	width: 100%;
	/* mphb.css dà alla tabella height:100%: dentro la griglia dei due mesi
	   l'altezza della riga finiva per essere quella della sola tabella e
	   l'ultima settimana usciva dal riquadro. */
	height: auto;
	table-layout: fixed;
	border: 0;
	margin: 0;
}

.mphb-calendar .datepick-month thead {
	border-bottom: 1px solid var(--color-divider);
}

.mphb-calendar .datepick-month th {
	padding: 0 0 8px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-600);
	background: transparent;
	border: 0;
}

.mphb-calendar .datepick-month th span {
	padding: 0;
	color: inherit;
}

.mphb-calendar .datepick-month td {
	padding: 2px;
	vertical-align: middle;
	background: transparent;
	border: 0;
}

/* Niente color né background qui: le tinte di stato del plugin stanno a
   specificità più bassa e verrebbero sovrascritte. */
.mphb-calendar .datepick-month td .mphb-date-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	min-height: 2.5em;
	padding: 0;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	border-radius: 999px;
}

/* Il colore da solo non basta a chi non distingue il rosso dal verde, e sono
   una persona su dodici fra gli uomini: la data occupata è anche barrata,
   come sui calendari dei portali. */
.mphb-calendar .datepick-month td .mphb-booked-date,
.mphb-calendar .datepick-month td .mphb-not-available-date {
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
	text-decoration-color: color-mix(in srgb, var(--color-occupato-800) 55%, transparent);
}

/* Giorni dei mesi vicini: datepick li dipinge di bianco (o di grigio se
   cadono di sabato o domenica). */
.mphb-calendar .datepick-month td .mphb-extra-date {
	background: transparent;
	color: transparent;
}

/* Il plugin li porta a opacity .15, qui sparirebbero del tutto. */
.mphb-calendar .datepick-month td .mphb-past-date {
	color: var(--color-neutral-500);
	background: transparent;
	opacity: 0.45;
}

/* Oggi: il colore di fondo resta quello della disponibilità, il giorno lo
   segna un anello terracotta. */
.mphb-calendar .datepick-month td .datepick-today {
	box-shadow: inset 0 0 0 2px var(--color-accent);
	font-weight: 700;
}

/* Velo di caricamento fra un mese e l'altro: bianco su fondo sabbia stacca
   troppo. La rotella del plugin resta. */
.mphb-calendar.mphb-loading .datepick:before {
	background-color: color-mix(in srgb, var(--color-surface) 72%, transparent);
}


/* --------------------------------------------------------------------------
   3. Movimento — solo se il visitatore non ha chiesto di ridurlo.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.wpcf7 input.wpcf7-form-control:not([type=submit]),
	.wpcf7 textarea.wpcf7-form-control,
	.wpcf7 .wpcf7-acceptance input[type="checkbox"],
	.wpcf7 input.wpcf7-submit,
	.mphb-calendar .datepick-nav .datepick-cmd {
		transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
	}
}


/* ========================================================================
   6 · MAPPA DEL QUARTIERE (OpenStreetMap + Leaflet)
   ======================================================================== */

/* Leaflet è servito dal tema (`vendor/leaflet/`) e i tasselli dal nostro
   dominio: qui si tratta solo di rivestirlo. Il suo foglio esce prima del
   nostro, quindi a parità di specificità vinciamo per ordine. */

.entry-content[data-ast-blocks-layout] > .arg-mappa {
	/* Più larga della colonna di lettura e centrata sullo schermo: stessa
	   uscita della galleria, spiegata nelle fondamenta. */
	width: min(1000px, 90vw);
	max-width: none;
	margin-block: clamp(24px, 4vw, 36px);
	margin-left: 50%;
	transform: translateX(-50%);
}

.arg-mappa__tela {
	position: relative;
	height: clamp(280px, 44vw, 440px);
	border-radius: var(--radius-lg);
	overflow: hidden;
	/* Tinta di attesa mentre i tasselli arrivano, e fondo delle zone senza
	   tassello: Leaflet ci metterebbe il suo grigio #ddd. */
	background-color: var(--color-surface);
}

/* Il ritaglio agli angoli taglierebbe anche l'anello di fuoco: portandolo
   dentro il bordo resta visibile. */
.arg-mappa__tela:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

/* Immagine di riserva: stessa inquadratura della vista iniziale. */
.arg-mappa__tela img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.leaflet-container {
	font-family: var(--font-body);
	background-color: var(--color-surface);
}

/* ── Comandi di ingrandimento ────────────────────────────────────────────── */

/* Il riquadro ha angoli da 28px: Leaflet stacca i comandi di 10px dal bordo e
   finirebbero addosso alla curva. */
.arg-mappa .leaflet-control-zoom {
	margin: 16px;
}

/* Leaflet li disegna bianchi con bordo grigio e testo #333. */
.arg-mappa .leaflet-bar {
	border: 0;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
}

.arg-mappa .leaflet-bar a,
.arg-mappa .leaflet-bar a:hover {
	width: 34px;
	height: 34px;
	line-height: 34px;
	color: var(--color-text);
	background-color: var(--color-bg);
	border-bottom-color: var(--color-divider);
	font-family: var(--font-body);
}

.arg-mappa .leaflet-bar a:hover,
.arg-mappa .leaflet-bar a:focus {
	color: var(--color-accent-700);
	background-color: var(--color-accent-100);
}

.arg-mappa .leaflet-bar a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

.arg-mappa .leaflet-bar a.leaflet-disabled {
	color: var(--color-neutral-500);
	background-color: var(--color-neutral-200);
}

/* ── Etichette dei due punti ─────────────────────────────────────────────── */

/* Leaflet disegna il fumetto bianco con bordo grigio e una punta triangolare
   fatta di bordi: la punta va ricolorata a parte, non basta il fondo. */
.arg-mappa .leaflet-tooltip.arg-mappa__etichetta {
	padding: 5px 11px;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	color: var(--color-text);
	background-color: var(--color-bg);
	border: 1px solid var(--color-divider);
	border-radius: 999px;
	box-shadow: var(--shadow-sm);
}

.arg-mappa .leaflet-tooltip.arg-mappa__etichetta::before {
	display: none;
}

/* Sotto i 545px una riga sola sporgerebbe fuori dal riquadro: l'etichetta va
   a capo invece di essere tagliata — ma solo se serve davvero.
   `width: max-content` non è un vezzo: Leaflet mette i tooltip dentro un
   `.leaflet-pane` largo zero, quindi un elemento in posizione assoluta con
   `white-space: normal` si stringe sulla parola più lunga e va a capo a ogni
   spazio. Con `max-content` la larghezza parte da quella della riga intera e
   `max-width` la fa piegare solo quando eccede. */
@media (max-width: 544px) {
	.arg-mappa .leaflet-tooltip.arg-mappa__etichetta {
		width: max-content;
		max-width: 10em;
		white-space: normal;
		text-align: center;
	}
}

/* ── Velo del primo tocco (solo telefoni) ────────────────────────────────── */

/* Con un dito solo una mappa trascinabile intrappola lo scorrimento della
   pagina: il trascinamento si accende al primo tocco e questo lo dice. */
.arg-mappa__velo {
	position: absolute;
	inset: 0;
	z-index: 900;
	display: flex;
	/* In alto e non in basso: sul telefono la fascia bassa della mappa è
	   occupata dall'etichetta della fermata dell'autobus, che è il dato per cui
	   la mappa esiste. In alto restano liberi i 60px sopra l'etichetta della
	   metropolitana, e i comandi di ingrandimento stanno a destra. */
	align-items: flex-start;
	/* A sinistra, non al centro: a 360px la pillola è larga 217px su 305 e
	   centrata andrebbe a sbattere contro i comandi di ingrandimento, che
	   stanno in alto a destra. Così il margine è lo stesso a ogni larghezza. */
	justify-content: flex-start;
	padding: 16px;
	background-color: color-mix(in srgb, var(--color-bg) 26%, transparent);
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.arg-mappa__velo:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

/* Sopra la mappa una scritta nuda non si legge: sta su una pillola. */
.arg-mappa__velo-testo {
	padding: 8px 16px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-text);
	background-color: var(--color-bg);
	border-radius: 999px;
	box-shadow: var(--shadow-sm);
}

/* ── Didascalia ──────────────────────────────────────────────────────────── */

.arg-mappa .arg-mappa__nota {
	margin-top: var(--space-3);
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-neutral-700);
	text-align: left;
}

.arg-mappa .arg-mappa__nota a {
	color: var(--color-accent-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.arg-mappa .arg-mappa__nota a:hover,
.arg-mappa .arg-mappa__nota a:focus {
	color: var(--color-accent-600);
}


/* ========================================================================
   7 · PIÈ DI PAGINA, SCHERMI PICCOLI, CODA
   ======================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   PIÈ DI PAGINA · SCHERMI PICCOLI · SCHEMA COLORE
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Schema colore ──────────────────────────────────────────────────────── */

/* Il sistema "Organic" è disegnato in una sola versione, chiara: non esiste
   una variante scura approvata e qui non se ne inventa una (il perché è nella
   nota di consegna). La dichiarazione serve comunque: senza color-scheme, in
   tema scuro il browser annerisce di sua iniziativa i controlli di sistema —
   i due campi data e il campo numero di /contatti/, gli spinner, le barre di
   scorrimento — che finirebbero neri sopra il fondo sabbia. */
:root {
	color-scheme: light;
}


/* ── Piè di pagina ──────────────────────────────────────────────────────── */

/* Del piè di pagina disegnato (tre colonne su neutral-900) il sito ha soltanto
   la riga di copyright del footer builder di Astra. Qui si porta ciò che
   esiste: la fascia scura, il testo in neutral-400, i link in accent-300. Le
   tre colonne sono una modifica del footer builder, non di questo foglio. */
.site-below-footer-wrap[data-section="section-below-footer-builder"] {
	background-color: var(--color-neutral-900);
	/* Astra ci appoggia sopra una hairline #D1D5DB: su fondo scuro è un graffio. */
	border-top-width: 0;
	padding-top: clamp(30px, 6vw, 52px);
	padding-bottom: clamp(26px, 5vw, 44px);
}

/* La griglia interna è limitata a 1200px ma non ha padding orizzontale: sotto
   i 1240px il testo arriverebbe a filo dello schermo. */
.site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row {
	padding-left: clamp(20px, 5vw, 28px);
	padding-right: clamp(20px, 5vw, 28px);
}

.ast-footer-copyright p {
	font-size: clamp(15px, 0.15vw + 13.2px, 17px);
	line-height: 1.75;
	color: var(--color-neutral-400);
}

.ast-footer-copyright p a {
	color: var(--color-accent-300);
	text-decoration: none;
	text-underline-offset: 3px;
}

.ast-footer-copyright p a:hover,
.ast-footer-copyright p a:focus-visible {
	color: var(--color-accent-200);
	text-decoration: underline;
}

/* Il focus del sistema è l'accento pieno: su neutral-900 si vede troppo poco. */
.site-below-footer-wrap a:focus-visible {
	outline: 2px solid var(--color-accent-300);
	outline-offset: 3px;
}


/* ── Bottone "torna in alto" ────────────────────────────────────────────── */

/* Non è nel disegno, ma Astra lo stampa su tutte le pagine e anche da telefono
   (data-on-devices="both"). Prende i colori del sistema al posto del blu;
   larghezza, altezza e centratura dell'icona restano quelle di Astra, che le
   calcola in em sul line-height. */
#ast-scroll-top {
	/* Astra lo dimensiona in em sul suo font-size (2.1em = 31px): troppo poco
	   per un bersaglio da toccare. */
	width: 44px;
	height: 44px;
	line-height: 44px;
	background-color: var(--color-accent);
	color: var(--color-bg);
	border-radius: 999px;
	box-shadow: var(--shadow-md);
}

#ast-scroll-top:hover {
	background-color: var(--color-accent-600);
}

/* Astra mette un bordo punteggiato su :focus, che sposta di 1px il bottone
   anche al clic del mouse: lo sostituisce il focus-visible del sistema. */
#ast-scroll-top:focus {
	border-style: none;
}

#ast-scroll-top:focus-visible {
	outline: 2px solid var(--color-accent-700);
	outline-offset: 2px;
}


/* ── Schermi piccoli ────────────────────────────────────────────────────── */

/* Punti di rottura allineati a quelli di Astra (921.99 e 544), più 768 per il
   passaggio a colonna unica e 480 per la galleria. Il prefisso
   .ast-plain-container — classe fissa del body — serve solo ad alzare la
   specificità sopra le regole di base scritte negli altri blocchi: le media
   query da sole non ne aggiungono. */

@media (max-width: 921.98px) {

	/* Tipografia fluida. La scala del disegno (h1 42→68, h2 40) è pensata per
	   una colonna da 1200px; qui scende con la larghezza e si ricongiunge ai
	   valori desktop proprio a 922px, dove il 5.2vw dell'h1 vale 48px. */
	.ast-plain-container .entry-content .arg-hero h1 {
		font-size: clamp(32px, calc(5.4vw + 10px), 48px);
	}

	/* Solo gli h2 di fascia: quelli dentro .arg-punto hanno la loro misura. */
	.ast-plain-container .entry-content > h2,
	.ast-plain-container .entry-content .arg-sezione > h2,
	.ast-plain-container .entry-content .arg-cta > h2 {
		font-size: clamp(26px, calc(3vw + 15px), 40px);
	}

	.ast-plain-container .ast-article-single header.entry-header .entry-title {
		font-size: clamp(26px, calc(1.6vw + 18px), 32px);
	}

	/* Fra la barra di testata e il titolo Astra lascia pochissimo: sulla home
	   il respiro lo dà il padding della hero, sulle altre pagine serve qui. */
	.ast-plain-container .ast-article-single > header.entry-header {
		padding-top: clamp(10px, 3vw, 22px);
	}

	/* Tre colonne diventano due. */
	.ast-plain-container .entry-content .arg-punti {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}

	.ast-plain-container .entry-content .arg-hero {
		gap: clamp(24px, 5vw, 40px);
	}
}

@media (max-width: 767.98px) {

	/* La hero passa a colonna unica, nell'ordine del sorgente: prima il testo,
	   poi la foto. */
	.ast-plain-container .entry-content .arg-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* Il disegno taglia la foto hero 4/5 verticale, ma i file caricati sono
	   1024×684, cioè 3:2 orizzontali: a piena larghezza di telefono un ritaglio
	   così stretto butta via metà stanza. Si allarga a 4/3. Le due dichiarazioni
	   coprono sia il caso in cui il rapporto sta sulla figure sia quello in cui
	   sta sull'immagine. */
	.ast-plain-container .entry-content .arg-hero__media,
	.ast-plain-container .entry-content .arg-hero__media img {
		aspect-ratio: 4 / 3;
	}

	.ast-plain-container .entry-content .arg-hero__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Calendario di MotoPress. Le larghezze fluide del plugin sono agganciate a
	   data-monthstoshow, attributo che il calendario inline non ha: senza questa
	   regola i due mesi restano due blocchi fissi da 15em affiancati. Le classi
	   datepick nascono a runtime e non compaiono nell'HTML servito. */
	.mphb_sc_availability_calendar-wrapper .datepick-month {
		float: none;
		width: 100%;
		margin: 0 0 16px;
	}

	/* iOS ingrandisce la pagina quando un campo sotto i 16px prende il fuoco:
	   i 14px del sistema valgono da tablet in su. */
	.entry-content .wpcf7 input.wpcf7-form-control:not([type="submit"]),
	.entry-content .wpcf7 textarea.wpcf7-form-control {
		font-size: 16px;
	}
}

@media (max-width: 544px) {

	/* Una colonna sola per le griglie di schede. */
	.ast-plain-container .entry-content .arg-punti {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/* Con l'h1 della hero a 32px e gli h2 di fascia a 26px, i 27px dei titoli
	   di scheda appiattirebbero la gerarchia. */
	.ast-plain-container .entry-content .arg-punto__titolo {
		font-size: 21px;
	}

	/* Il ritmo del disegno (72–88px sotto ogni fascia) è troppo su uno schermo
	   alto 700px; resta il rapporto di circa 1:4 fra rientro e stacco. */
	.ast-plain-container .entry-content .arg-sezione {
		padding-top: 10px;
		padding-bottom: 44px;
	}

	.ast-plain-container .entry-content .arg-hero {
		padding-top: 16px;
		padding-bottom: 32px;
	}

	/* Riquadro CTA: 56px di raggio su un pannello largo 320 sono un quarto della
	   sua larghezza, e 56px di padding verticale ne mangiano mezzo schermo. */
	.ast-plain-container .entry-content .arg-cta {
		padding: 32px 22px;
		border-radius: var(--radius-lg);
	}

	.ast-plain-container .entry-content .arg-hero__media {
		border-radius: var(--radius-lg);
	}

	/* Galleria: due colonne strette stanno meglio con una gronda più corta. La
	   variabile entra anche nel calcolo della larghezza delle celle, quindi si
	   cambia lei e non solo il gap, altrimenti le celle non tornano. */
	.entry-content .wp-block-gallery.has-nested-images,
	.entry-content .arg-sezione--crema .wp-block-gallery.has-nested-images {
		--wp--style--unstable-gallery-gap: 12px;
		gap: 12px;
	}

	/* Il modulo di /contatti/ torna a colonna unica, se il blocco moduli lo ha
	   messo su due colonne; inerte se è rimasto a flusso. */
	.entry-content .wpcf7-form {
		grid-template-columns: minmax(0, 1fr);
	}

	/* I link della riga di copyright: da inline-block prendono un'area di tocco
	   decente senza uscire dal flusso della frase. */
	.ast-footer-copyright p a {
		display: inline-block;
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

@media (max-width: 479.98px) {

	/* Il core scende a due colonne sotto i 600px: a 360px sono riquadri da
	   150×100, in cui una stanza non si vede. Una colonna sola.
	   Il :not(#individual-image) del core vale un ID: si batte allungando la
	   catena con .entry-content, non con !important. */
	.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
		width: 100%;
	}
}

@media (max-width: 400px) {

	/* Due pulsanti affiancati non ci stanno mai: meglio due bersagli pieni che
	   due mezzi andati a capo. */
	.entry-content .wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.entry-content .wp-block-buttons > .wp-block-button > .wp-block-button__link {
		display: block;
		width: 100%;
	}
}


/* ── Movimento ──────────────────────────────────────────────────────────── */

/* Il disegno non dichiara nessuna transizione: queste sono un'aggiunta, quindi
   valgono solo per chi non ha chiesto di ridurre il movimento. */
@media (prefers-reduced-motion: no-preference) {

	.ast-footer-copyright p a,
	#ast-scroll-top {
		transition: color 0.18s ease, background-color 0.18s ease;
	}
}
/* --- selettore di lingua -----------------------------------------------------
   È l'ultima voce del menu, aggiunta da argentario_selettore_lingua(). Non è un
   elenco di pagine ma un gruppo di sigle: qui perde il comportamento da voce di
   menu e diventa una fila di pillole piccole. */

.arg-lingue > .arg-lingue__gruppo {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.main-header-menu .arg-lingue > .arg-lingue__gruppo,
.ast-mobile-popup-drawer .arg-lingue > .arg-lingue__gruppo {
	padding-inline: 8px;
}

.arg-lingue__voce {
	padding: 4px 7px;
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1;
	color: var(--color-neutral-700);
	text-decoration: none;
}

.arg-lingue__voce:hover,
.arg-lingue__voce:focus {
	background: color-mix(in srgb, var(--color-text) 8%, transparent);
	color: var(--color-text);
}

/* La lingua corrente non è un link su cui tornare: si vede che è quella. */
.arg-lingue__voce.is-attiva {
	background: var(--color-accent);
	color: var(--color-bg);
}

.arg-lingue__voce:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Nel menu del telefono le voci sono impilate: le sigle stanno su una riga
   propria, con un filo sopra che le stacca dalle pagine. */
@media (max-width: 921px) {
	.ast-mobile-popup-drawer .arg-lingue {
		border-top: 1px solid var(--color-divider);
		padding-top: 10px;
		margin-top: 6px;
	}
	.arg-lingue__voce { font-size: 14px; padding: 8px 12px; }
}