/*
Theme Name: Isabella in Tuscany
Theme URI: https://isabellaintuscany.com
Author: Isabella
Author URI: https://isabellaintuscany.com
Description: Tema custom per isabellaintuscany.com — due case private in affitto a Castelmuzio, Val d'Orcia. Nessun framework/page builder, struttura leggera basata su Underscores. Palette crema/verde salvia/terracotta, font Cormorant Garamond + Jost.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: isabella-in-tuscany
*/

/* =====================================================================
   0. DESIGN TOKENS — variabili CSS
   Unica fonte di verità per colori, font, spaziature. Modificare qui
   per cambiare l'aspetto di tutto il sito.
   ===================================================================== */
:root {
	/* Colori — palette confermata, non modificare senza indicazione del cliente */
	--color-bg: #F7F3EA;          /* crema caldo, mai bianco puro */
	--color-bg-alt: #EFE9DA;      /* variante leggermente più scura per alternare sezioni */
	--color-green-dark: #5C6E4F;  /* verde salvia/oliva — primario */
	--color-green-light: #8A9A7B;
	--color-accent: #C17A5D;      /* terracotta polveroso — accento definitivo */
	--color-accent-dark: #A6634A;
	--color-text: #3A3A32;        /* quasi nero, mai #000 puro */
	--color-text-light: #6B6B5F;
	--color-white: #FFFDF8;
	--color-border: rgba(58, 58, 50, 0.12);

	/* Tipografia */
	--font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--fs-base: 1.125rem;      /* 18px */
	--fs-sm: 0.9375rem;       /* 15px */
	--fs-lg: 1.375rem;        /* 22px */
	--fs-h1: clamp(2.75rem, 5vw + 1rem, 5rem);
	--fs-h2: clamp(2.1rem, 3vw + 1rem, 3.25rem);
	--fs-h3: clamp(1.6rem, 2vw + 1rem, 2.25rem);
	--fs-h4: 1.4rem;

	--lh-body: 1.75;
	--lh-heading: 1.15;

	/* Spaziature — molto whitespace, sezioni ariose */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 7rem;
	--space-2xl: 10rem;

	--container-width: 1240px;
	--container-narrow: 760px;
	--radius: 2px; /* spigoli quasi vivi, non moderni/arrotondati */

	--transition: 0.35s ease;

	/* Grana fotografica leggera, sovrapposta alle foto (hero, card, tile) per
	   togliere quella piattezza "stock photo" — rumore SVG generato al volo,
	   nessun file immagine da scaricare. Un solo posto dove è definita. */
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	/* Correzione colore leggera applicata a tutte le foto del sito (hero,
	   card, tile): toglie la piattezza da "foto caricata così com'è" senza
	   snaturare i colori reali della casa — più contrasto, saturazione
	   appena accentuata, punto di nero un filo più profondo. */
	--photo-grade: saturate(1.1) contrast(1.06) brightness(0.98);
}

/* =====================================================================
   1. RESET essenziale
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: 300;
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

figure { margin: 0; }

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition);
}
a:hover, a:focus { color: var(--color-accent-dark); }

ul, ol { padding-left: 1.25em; }

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

/* Stato focus visibile per accessibilità — non rimuovere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-green-dark);
	color: var(--color-white);
	padding: 0.75em 1.25em;
	z-index: 1000;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

/* =====================================================================
   2. TIPOGRAFIA
   ===================================================================== */
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4 {
	font-family: var(--font-heading);
	font-weight: 500;
	line-height: var(--lh-heading);
	color: var(--color-text);
	margin: 0 0 0.5em;
	letter-spacing: 0.01em;
}

h1, .h1 { font-size: var(--fs-h1); font-weight: 400; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 400; }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }

.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-green-dark);
	margin-bottom: var(--space-sm);
}

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

.lede {
	font-size: var(--fs-lg);
	font-weight: 300;
	color: var(--color-text-light);
}

.serif-quote {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-green-dark);
}

/* =====================================================================
   3. LAYOUT
   ===================================================================== */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-md);
}

.container--narrow { max-width: var(--container-narrow); }

.section {
	padding-block: var(--space-xl);
}

.section--alt { background-color: var(--color-bg-alt); }

.full-bleed {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

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

/* Fade-in leggero allo scroll — nessuna animazione aggressiva */
.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Variante "mask" — invece di sfumare tutto il blocco, tiene il blocco
   sempre visibile e "scopre" solo la foto al suo interno con una tenda che
   si apre dal basso: usata sulle sezioni fotografiche fisse della home
   (le due case, la chiusura), riusa lo stesso toggle .is-visible aggiunto
   da main.js, nessun JS in più. */
.reveal--mask { opacity: 1; transform: none; }
.reveal--mask .home-house__media,
.reveal--mask .home-closing__media {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.1s cubic-bezier(.22,.61,.36,1);
}
.reveal--mask.is-visible .home-house__media,
.reveal--mask.is-visible .home-closing__media {
	clip-path: inset(0 0 0 0);
}

/* =====================================================================
   4. HEADER / NAVIGAZIONE
   ===================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--color-bg);
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--transition), border-color var(--transition);
}
/* .is-scrolled viene aggiunta da assets/js/main.js dopo un piccolo scroll:
   un'ombra sottile invece di un cambio di colore, per dare profondità senza
   introdurre un'altra tinta. */
.site-header.is-scrolled {
	border-bottom-color: var(--color-border);
	box-shadow: 0 8px 24px rgba(58,58,50,0.06);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-sm);
	gap: var(--space-md);
}

.site-logotype {
	font-family: var(--font-heading);
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--color-text);
	line-height: 1;
}
.site-logotype span { color: var(--color-accent); }
.site-logotype img { max-height: 56px; width: auto; }

.main-navigation ul {
	list-style: none;
	display: flex;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
}

.main-navigation a {
	color: var(--color-text);
	font-size: var(--fs-sm);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.main-navigation a:hover { color: var(--color-accent); }

.menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--color-border);
	padding: 0.5em 0.75em;
	cursor: pointer;
}

@media (max-width: 780px) {
	.menu-toggle { display: inline-block; }
	.main-navigation {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-border);
	}
	.main-navigation.is-open { display: block; }
	.main-navigation ul { flex-direction: column; gap: 0; padding: var(--space-sm) var(--space-md); }
	.main-navigation li { border-bottom: 1px solid var(--color-border); }
	.main-navigation a { display: block; padding: 0.9em 0; }
}

/* =====================================================================
   5. HERO
   ===================================================================== */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh; /* unità più stabile su mobile, dove 100vh salta con la barra degli indirizzi */
	display: flex;
	align-items: flex-end;
	color: var(--color-white);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--photo-grade);
}
/* Grana leggera su ogni foto hero (home, proprietà, indice proprietà) —
   dipinta sopra la foto (::before, positioned) e sotto il velo scuro
   (::after, definito dopo): niente z-index, basta l'ordine nel foglio. */
.hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.45;
	mix-blend-mode: overlay;
	pointer-events: none;
	background-image: var(--grain);
}
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(58,58,50,0.05) 0%, rgba(58,58,50,0.55) 100%);
}

/* Zoom lento e continuo sulla foto di sfondo — su ogni hero del sito, non
   solo in home, così l'effetto "wow" è coerente su tutte le pagine.
   Rispetta prefers-reduced-motion tramite il reset globale in cima al file. */
.hero__media img {
	animation: iit-kenburns 24s ease-in-out infinite alternate;
}
@keyframes iit-kenburns {
	from { transform: scale(1.06); }
	to   { transform: scale(1.16) translate(-1.2%, -1%); }
}

.hero__scroll-cue {
	position: absolute;
	right: var(--space-md);
	bottom: var(--space-md);
	z-index: 1;
	width: 1px;
	height: 46px;
	background: rgba(255,253,248,0.4);
	overflow: hidden;
}
.hero__scroll-cue::after {
	content: "";
	position: absolute;
	left: 0;
	top: -100%;
	width: 100%;
	height: 100%;
	background: var(--color-white);
	animation: iit-scrollcue 2.4s ease-in-out infinite;
}
@keyframes iit-scrollcue {
	0%   { top: -100%; }
	60%  { top: 100%; }
	100% { top: 100%; }
}

.hero__content {
	position: relative;
	padding-block: var(--space-lg);
	max-width: 46em;
}
.hero__content h1 { color: var(--color-white); }
.hero__content .lede { color: rgba(255,253,248,0.9); }

/* Riga sopra al titolo (posizione/tagline): stessa tipografia di .eyebrow
   nel resto del sito, solo ricolorata per stare su una foto scura e con un
   trattino guida davanti invece del semplice margine — un dettaglio in più
   che si vede anche da fermi, non solo nell'animazione dell'hero. */
.hero__eyebrow {
	color: var(--color-white);
	opacity: 0.9;
	padding-left: 2.4em;
	position: relative;
}
.hero__eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 1.8em;
	height: 1px;
	background: var(--color-white);
	opacity: 0.75;
}

/* =====================================================================
   6. BOTTONI / LINK-BOTTONE
   ===================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.9em 2em;
	border: 1px solid currentColor;
	color: var(--color-text);
	font-size: var(--fs-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover, .btn:focus { background-color: var(--color-green-dark); border-color: var(--color-green-dark); color: var(--color-bg); }

.btn--primary {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-white);
}
.btn--primary:hover, .btn--primary:focus {
	background-color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: var(--color-white);
}

.btn--ghost-light {
	color: var(--color-white);
	border-color: rgba(255,253,248,0.7);
}
.btn--ghost-light:hover { background-color: var(--color-white); color: var(--color-text); }

/* =====================================================================
   7. INTRO ISABELLA (home) / TEASER PROPRIETÀ
   ===================================================================== */
.intro-isabella {
	display: grid;
	gap: var(--space-lg);
	align-items: center;
}
@media (min-width: 900px) {
	.intro-isabella { grid-template-columns: 0.9fr 1.1fr; }
}
.intro-isabella__portrait img { width: 100%; }

.property-teasers {
	display: grid;
	gap: var(--space-lg);
}
@media (min-width: 780px) {
	.property-teasers { grid-template-columns: repeat(2, 1fr); }
}

.property-teasers--single {
	max-width: 460px;
	margin-inline: auto;
}
@media (min-width: 780px) {
	.property-teasers--single { grid-template-columns: 1fr; }
}

.property-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}
.property-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
.property-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.3;
	mix-blend-mode: overlay;
	pointer-events: none;
	background-image: var(--grain);
}
.property-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--photo-grade);
	transition: transform 1.2s ease;
}
.property-card:hover .property-card__media img { transform: scale(1.04); }

/* =====================================================================
   7b. HOME — LE DUE CASE (griglia fotografica asimmetrica)
   Pesca i post "property" già compilati (vedi template-parts/home-house-tile.php):
   nessun contenuto duplicato da scrivere per la home. Sfalsata via
   nth-child invece di card gemelle, per rompere la simmetria da "template".
   ===================================================================== */
.houses-head { max-width: 34em; margin-bottom: var(--space-lg); }

.home-houses {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	/* Senza questo, Grid stira di default ogni tile all'altezza della riga
	   più alta (align-items:stretch): lo sfalsamento sotto, fatto con un
	   margin-top sulla tile pari, allungherebbe anche il contenitore della
	   tile dispari oltre la sua foto, spingendo il testo (in fondo al
	   contenitore) fuori dall'immagine. Con "start" ogni tile resta alta
	   esattamente quanto la propria foto. */
	align-items: start;
}
@media (min-width: 700px) {
	.home-houses {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-lg);
	}
	.home-houses > *:nth-child(even) { margin-top: clamp(var(--space-xl), 12vw, 9rem); }
}

.home-house { position: relative; display: block; }
.home-house__media {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
.home-house__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--photo-grade);
	transition: transform 1.2s ease;
}
.home-house:hover .home-house__media img { transform: scale(1.05); }
.home-house__badge {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 1;
	background: rgba(247,243,234,0.92);
	color: var(--color-text);
	font-size: var(--fs-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.5em 0.9em;
}
.home-house__media::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.45;
	mix-blend-mode: overlay;
	pointer-events: none;
	background-image: var(--grain);
}
.home-house__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(20,18,12,0.75) 100%);
}
.home-house__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: var(--space-md);
	pointer-events: none;
}
.home-house__info a { pointer-events: auto; }
.home-house__name { font-size: var(--fs-h4); color: var(--color-white); margin: 0; }
.home-house__name a { color: inherit; }
.home-house__location {
	margin: 0.35em 0 0;
	font-size: var(--fs-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255,253,248,0.85);
}
.home-house__teaser {
	margin: 0.6em 0 0;
	max-width: 26em;
	font-size: var(--fs-sm);
	color: rgba(255,253,248,0.92);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.5s ease, opacity 0.4s ease 0.05s;
}
.home-house:hover .home-house__teaser,
.home-house:focus-within .home-house__teaser { max-height: 6em; opacity: 1; }

/* =====================================================================
   7c. HOME — STRISCIA NUMERI
   Tipografica, non a "card": tre numeri separati da un filo verticale
   sottile invece di riquadri con sfondo, per restare coerente con
   l'impaginazione arieggiata del resto del sito.
   ===================================================================== */
.home-facts {
	background-color: var(--color-green-dark);
	color: var(--color-bg);
	padding-block: var(--space-lg);
}
.home-facts__inner {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-md);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.home-fact { padding-inline: var(--space-lg); text-align: center; position: relative; }
.home-fact + .home-fact::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 2.2em;
	background: rgba(247,243,234,0.3);
}
.home-fact__value {
	display: block;
	font-family: var(--font-heading);
	font-style: italic;
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	color: var(--color-white);
}
.home-fact__label {
	display: block;
	margin-top: 0.3em;
	font-size: var(--fs-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.82;
}

/* =====================================================================
   7d. HOME — CHIUSURA (foto piena pagina prima del modulo di contatto)
   Il bottone punta a #get-in-touch nel footer: nessun modulo duplicato,
   riusa quello che c'è già in fondo a ogni pagina.
   ===================================================================== */
.home-closing {
	position: relative;
	min-height: 55vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-white);
}
.home-closing__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.home-closing__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-grade); }
.home-closing__media::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.45;
	mix-blend-mode: overlay;
	pointer-events: none;
	background-image: var(--grain);
}
.home-closing__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20,18,12,0.45);
}
.home-closing__content { position: relative; z-index: 1; padding: var(--space-lg) var(--space-md); }
.home-closing h2 { color: var(--color-white); max-width: 16em; margin-inline: auto; }
.home-closing .btn { margin-top: var(--space-md); }

.property-card__location {
	font-size: var(--fs-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

/* =====================================================================
   8. PAGINA PROPRIETÀ SINGOLA
   ===================================================================== */
/* Nessun override di altezza qui: anche l'hero delle proprietà è a schermo
   intero come tutte le altre, vedi .hero in sezione 5. */

.breadcrumbs {
	font-size: var(--fs-sm);
	color: var(--color-text-light);
	margin: 0;
}
.breadcrumbs a { color: var(--color-text-light); }
.breadcrumbs a:hover { color: var(--color-accent); }

.property-header {
	text-align: center;
	max-width: 46em;
	margin-inline: auto;
}

.property-strengths {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	text-align: center;
}
.property-strengths li {
	padding: var(--space-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.property-strengths li::before {
	content: "";
	width: 32px;
	height: 2px;
	background-color: var(--color-accent);
	margin-bottom: var(--space-sm);
}
.property-strengths .strength__label {
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	color: var(--color-text);
}

.amenities-grid {
	display: grid;
	gap: var(--space-sm);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.amenity-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35em;
	padding: var(--space-md) var(--space-sm);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	text-align: center;
}
.amenity-card__icon {
	display: inline-flex;
	width: 28px;
	height: 28px;
	color: var(--color-accent);
}
.amenity-card__icon svg { width: 100%; height: 100%; }
.amenity-card__label {
	font-size: var(--fs-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-light);
}
.amenity-card__value {
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	color: var(--color-text);
}

.property-legal {
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	font-size: var(--fs-sm);
	color: var(--color-text-light);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-lg);
}

.property-map iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* =====================================================================
   Carosello immagini — riusa il blocco Galleria nativo di Gutenberg
   (nessun campo/plugin aggiuntivo: si inserisce come un blocco Galleria
   normale ovunque nell'editor di contenuto — Home, About, Proprietà — e
   diventa automaticamente uno scorrimento orizzontale con snap).
   WordPress gestisce già srcset/lazy-loading sulle immagini del blocco.
   ===================================================================== */
.carousel-wrap {
	position: relative;
}

.entry-content .wp-block-gallery,
.carousel-wrap .wp-block-gallery {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	gap: var(--space-sm);
	margin-top: var(--space-md);
	padding-bottom: var(--space-xs);
	scrollbar-width: none;
}
.entry-content .wp-block-gallery::-webkit-scrollbar,
.carousel-wrap .wp-block-gallery::-webkit-scrollbar {
	display: none;
}

.entry-content .wp-block-gallery .wp-block-image,
.carousel-wrap .wp-block-gallery .wp-block-image {
	flex: 0 0 auto;
	width: clamp(240px, 60vw, 420px);
	scroll-snap-align: start;
	margin: 0;
}
.entry-content .wp-block-gallery .wp-block-image img,
.carousel-wrap .wp-block-gallery .wp-block-image img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	transition: transform 0.8s ease;
}
.entry-content .wp-block-gallery .wp-block-image:hover img,
.carousel-wrap .wp-block-gallery .wp-block-image:hover img {
	transform: scale(1.03);
}

.carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border: 1px solid var(--color-border);
	background-color: var(--color-white);
	color: var(--color-text);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--transition), color var(--transition);
}
.carousel-arrow:hover { background-color: var(--color-text); color: var(--color-white); }
.carousel-arrow--prev { left: -8px; }
.carousel-arrow--next { right: -8px; }
@media (max-width: 780px) {
	.carousel-arrow { display: none; } /* su mobile lo scroll a dito basta */
}

/* =====================================================================
   8b. BLOCCHI NATIVI DI GUTENBERG (Home, About, Contatti...)
   Il tema affida le pagine "libere" ai blocchi core di WordPress invece che
   a campi ACF: qui gli stili per farli combaciare col design system.
   ===================================================================== */

/* Classi colore generate dalla palette registrata in inc/setup.php
   (add_theme_support 'editor-color-palette'). WordPress le genera già in
   automatico dal 6.x in poi; queste sono una rete di sicurezza esplicita. */
.has-crema-background-color { background-color: #F7F3EA; }
.has-crema-scuro-background-color { background-color: #EFE9DA; }
.has-verde-salvia-background-color { background-color: #5C6E4F; }
.has-verde-salvia-chiaro-background-color { background-color: #8A9A7B; }
.has-terracotta-background-color { background-color: #C17A5D; }
.has-testo-scuro-background-color { background-color: #3A3A32; }
.has-bianco-caldo-background-color { background-color: #FFFDF8; }
.has-crema-color { color: #F7F3EA; }
.has-crema-scuro-color { color: #EFE9DA; }
.has-verde-salvia-color { color: #5C6E4F; }
.has-verde-salvia-chiaro-color { color: #8A9A7B; }
.has-terracotta-color { color: #C17A5D; }
.has-testo-scuro-color { color: #3A3A32; }
.has-bianco-caldo-color { color: #FFFDF8; }

/* Contenitore del contenuto Gutenberg per le pagine "libere" (Home, About,
   Contatti...): i blocchi "normali" restano contenuti come il resto del
   sito, i blocchi larghi/pieni (.alignwide/.alignfull) restano liberi di
   sfondare, gestiscono già da soli l'allineamento. */
.page-blocks > * + * {
	margin-top: var(--space-xl);
}
.page-blocks > :where(:not(.alignwide):not(.alignfull)) {
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-inline: var(--space-md);
}

/* Blocco Cover — usato come hero (Home, o ovunque serva una foto a piena
   larghezza con testo sopra). Il blocco gestisce già da solo altezza,
   overlay (dim) e allineamento full-width; qui aggiungiamo un gradiente
   scuro dal basso — più cinematografico di un velo piatto, lascia vedere
   più foto in alto e il testo resta leggibile in basso — più tipografia
   e larghezza del testo. Il gradiente si somma al dim scelto nel blocco,
   non lo sostituisce: funziona con qualsiasi impostazione. */
.wp-block-cover {
	margin-block: 0;
	overflow: hidden;
}
.wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(58,58,50,0) 40%, rgba(58,58,50,0.7) 100%);
}
.wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	max-width: 46em;
	margin-inline: auto;
	padding-inline: var(--space-md);
}
.wp-block-cover.is-position-bottom-left .wp-block-cover__inner-container,
.wp-block-cover.is-position-bottom-center .wp-block-cover__inner-container,
.wp-block-cover.is-position-bottom-right .wp-block-cover__inner-container {
	padding-bottom: var(--space-xl);
}
.wp-block-cover .wp-block-heading,
.wp-block-cover p:not(.has-text-color) {
	color: var(--color-white);
}
.wp-block-cover .wp-block-heading:first-child {
	font-size: var(--fs-h1);
	letter-spacing: 0.01em;
}

/* Blocchi Citazione/Pull-quote — usati per le recensioni ospiti o per una
   frase di Isabella messa in risalto. */
.wp-block-quote,
.wp-block-pullquote {
	border: none;
	padding: var(--space-md);
	background-color: var(--color-bg-alt);
	text-align: center;
}
.wp-block-quote p:first-of-type::before,
.wp-block-pullquote p:first-of-type::before {
	content: "\201C";
	display: block;
	font-family: var(--font-heading);
	font-size: 3rem;
	line-height: 1;
	font-style: normal;
	color: var(--color-accent);
	margin-bottom: 0.05em;
}
.wp-block-quote p,
.wp-block-pullquote p {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 1.4vw + 1rem, 1.6rem);
	font-style: italic;
	color: var(--color-green-dark);
	line-height: 1.4;
}
.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block;
	margin-top: var(--space-sm);
	font-style: normal;
	font-size: var(--fs-sm);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text-light);
}

/* Blocco Gruppo usato a piena larghezza per una fascia con sfondo colorato
   (es. la sezione recensioni): la fascia sfonda, ma il suo contenuto resta
   centrato e leggibile come nel resto del sito, non steso su tutto lo schermo. */
.wp-block-group.alignfull {
	padding-block: var(--space-xl);
}
.wp-block-group.alignfull > :where(:not(.alignwide):not(.alignfull)) {
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-inline: var(--space-md);
}
.wp-block-group.alignfull > * + * {
	margin-top: var(--space-md);
}

/* Blocco Media & Testo — foto a tutta altezza affiancata a un blocco di
   testo: la sezione "banner immagine + testo" richiesta, riutilizzabile
   quante volte serve, alternando i lati con l'opzione "Invert" del blocco. */
.wp-block-media-text {
	margin-block: 0;
}
.wp-block-media-text .wp-block-media-text__media {
	overflow: hidden;
}
.wp-block-media-text .wp-block-media-text__media img {
	height: 100%;
	object-fit: cover;
	filter: var(--photo-grade);
	transition: transform 1s ease;
}
/* Leggero zoom al passaggio del mouse su tutto il blocco (non solo sulla
   foto): stesso linguaggio hover delle card proprietà, applicato al corpo
   testo+foto di ogni pagina libera (About, Contatti...). */
.wp-block-media-text:hover .wp-block-media-text__media img {
	transform: scale(1.045);
}

/* Stesso trattamento su una foto singola inserita nel corpo di una pagina
   (blocco Immagine "nudo", fuori da una Galleria): grana/grade coerenti col
   resto del sito e uno zoom leggero al passaggio del mouse. */
.page-blocks .wp-block-image,
.entry-content .wp-block-image {
	overflow: hidden;
}
.page-blocks .wp-block-image img,
.entry-content .wp-block-image img {
	filter: var(--photo-grade);
	transition: transform 1s ease;
}
.page-blocks .wp-block-image:hover img,
.entry-content .wp-block-image:hover img {
	transform: scale(1.04);
}
.wp-block-media-text .wp-block-media-text__content {
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media (max-width: 600px) {
	.wp-block-media-text .wp-block-media-text__content {
		padding: var(--space-md) var(--space-sm);
	}
}

/* Blocco Bottoni — stessa estetica dei bottoni .btn usati nel resto del tema. */
.wp-block-button__link {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--radius);
	padding: 0.9em 2em;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--color-accent);
	color: var(--color-white);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--color-accent-dark);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid currentColor;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--color-green-dark);
	border-color: var(--color-green-dark);
	color: var(--color-bg);
}

/* =====================================================================
   9. BLOG
   ===================================================================== */
.post-list {
	display: grid;
	gap: var(--space-lg);
}
@media (min-width: 780px) {
	.post-list { grid-template-columns: repeat(2, 1fr); }
}

.post-card__media { aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: var(--space-sm); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }

.post-card__meta, .entry-meta {
	font-size: var(--fs-sm);
	color: var(--color-text-light);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.entry-content { max-width: var(--container-narrow); margin-inline: auto; }
.entry-content > * + * { margin-top: 1.25em; }
.entry-content img { margin-block: var(--space-sm); }
.entry-content blockquote {
	border-left: 3px solid var(--color-accent);
	padding-left: var(--space-sm);
	font-family: var(--font-heading);
	font-style: italic;
	font-size: var(--fs-lg);
	color: var(--color-green-dark);
}

.pagination {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

/* =====================================================================
   10. FORM CONTATTI
   ===================================================================== */
.contact-form { max-width: var(--container-narrow); margin-inline: auto; }
.form-row { margin-bottom: var(--space-sm); }
.form-row label {
	display: block;
	margin-bottom: 0.4em;
	font-size: var(--fs-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-light);
}
.form-row input,
.form-row select,
.form-row textarea {
	width: 100%;
	padding: 0.85em 1em;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--color-accent); }

/* Honeypot anti-spam — invisibile a persone, visibile ai bot */
.form-row--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-notice { padding: 1em 1.25em; margin-bottom: var(--space-sm); border-left: 3px solid; }
.form-notice--success { border-color: var(--color-green-dark); background: var(--color-bg-alt); }
.form-notice--error { border-color: var(--color-accent); background: var(--color-bg-alt); }

.contact-details { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.contact-details a { color: var(--color-text); }
.contact-details a:hover { color: var(--color-accent); }

/* =====================================================================
   11. FOOTER
   ===================================================================== */
.site-footer {
	background-color: var(--color-green-dark);
	color: var(--color-bg);
	/* Niente padding qui: se c'è la fascia chiara del form (.footer-cta) deve
	   partire a filo dal bordo superiore, senza una striscia scura sopra.
	   Lo spazio per la parte scura (logo/menu/copyright) è su .footer-main. */
}
.footer-main {
	padding-block: var(--space-lg) var(--space-md);
}
.site-footer a { color: var(--color-bg); }
.site-footer a:hover { color: var(--color-accent); }

.site-footer .site-logotype { color: var(--color-bg); }
.site-footer .site-logotype span { color: var(--color-accent); }

/* Il form di contatto resta nello stesso verde scuro di tutto il footer —
   niente fascia di un verde diverso: un solo colore, un bordo sottile a
   separare le due parti invece di un cambio di tinta. */
.footer-cta {
	padding-block: var(--space-xl);
	margin-bottom: var(--space-lg);
	border-bottom: 1px solid rgba(247,243,234,0.15);
}
.footer-cta .eyebrow { color: var(--color-bg); opacity: 0.75; }
.footer-cta h2 { color: var(--color-bg); }
.footer-cta .form-row label {
	color: var(--color-bg);
	opacity: 0.75;
}
.footer-cta .form-notice--success { border-color: var(--color-bg); background: rgba(247,243,234,0.08); color: var(--color-bg); }
.footer-cta .form-notice--error { border-color: var(--color-accent); background: rgba(247,243,234,0.08); color: var(--color-bg); }

.footer-grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: 1fr;
	margin-bottom: var(--space-lg);
}
@media (min-width: 780px) {
	.footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}

.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5em; }

.footer-bottom {
	border-top: 1px solid rgba(247,243,234,0.2);
	padding-top: var(--space-sm);
	font-size: var(--fs-sm);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-xs);
	opacity: 0.85;
}

/* =====================================================================
   12. COOKIE BANNER (placeholder GDPR — sostituibile con Iubenda)
   ===================================================================== */
.cookie-banner {
	position: fixed;
	left: var(--space-sm);
	right: var(--space-sm);
	bottom: var(--space-sm);
	max-width: 640px;
	margin-inline: auto;
	background-color: var(--color-text);
	color: var(--color-bg);
	padding: var(--space-sm) var(--space-md);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm) var(--space-md);
	z-index: 999;
	box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { font-size: var(--fs-sm); margin: 0; flex: 1 1 260px; }
.cookie-banner .btn { padding: 0.6em 1.4em; }

/* =====================================================================
   13. UTILITY
   ===================================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.alignwide { max-width: var(--container-width); margin-inline: auto; }
.alignfull { width: 100vw; position: relative; left: 50%; margin-left: -50vw; }