/* Villa Coniferas — design tokens. Dal 27 settembre 2026 seguono i render del
   restyling (SPEC_RESTYLING.md): palette avorio con accento bruno, titoli e
   numeri serif, tutto il resto sans. Nessun token per box-shadow: il sito è
   piatto, niente ombre da nessuna parte. */

/* Font self-hostati (Google Fonts, licenza OFL, scaricati una volta e
   serviti da qui — nessuna richiesta a fonts.googleapis.com in produzione).
   Sottoinsieme "latin" (U+0000-00FF + estensioni) di ciascun font: copre già
   tutti gli accenti di EN/FR/ES/IT. font-display: swap perché il testo deve
   comunque comparire subito con il fallback di sistema, mai un flash bianco. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/playfair-display-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/playfair-display-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope.woff2") format("woff2");
}

:root {
  /* Palette del restyling (SPEC_RESTYLING.md, render del 27 settembre 2026).
     L'accento si usa per occhielli, numerazioni e poco altro: mai come
     colore diffuso. */
  --color-bg-primary: #F7F4EF;
  /* Fascia alternata: camere, "How it works", fascia CTA chiara, galleria
     della home. Oggi le fasce alternate esistono solo con questo colore. */
  --color-bg-alt: #EFE8DE;
  /* Superficie chiara: schede delle recensioni, campi del modulo, fascia
     dei numeri della home, domande frequenti. */
  --color-bg-card: #FAF9F5;
  /* Riquadro bianco del modulo su Enquire. */
  --color-bg-white: #FFFFFF;
  --color-bg-dark: #1C1B17;
  --color-text-primary: #23211E;
  /* 5,9:1 su --color-bg-primary e 5,3:1 su --color-bg-alt: regge anche il
     testo piccolo su entrambe le fasce. */
  --color-text-secondary: #635D55;
  --color-text-faint: #6E675F;
  --color-text-on-dark: #F7F4EF;
  --color-text-on-dark-muted: rgba(247, 244, 239, 0.72);
  --color-border: #E2DCD2;
  /* Filo più deciso: passi numerati di Retreats e Press. */
  --color-border-strong: #8C877E;
  /* Accento del restyling, più scuro e più bruno del #B5744F di prima.
     5,1:1 su --color-bg-primary e 4,6:1 su --color-bg-alt: a differenza
     del vecchio, va bene anche per il testo piccolo, e non serve più una
     variante scura per gli occhielli. */
  --color-accent: #9B5436;
  /* L'accento sui fondi scuri (occhiello del pannello di Retreats): quello
     pieno lì arriva appena a 3:1, poco per un testo da 13px. Questo è 7,6:1. */
  --color-accent-on-dark: #D9A07E;

  /* Tipografia */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Scala misurata sui render a 1440 px (SPEC_RESTYLING.md, "Tipografia"). I
     titoli grandi scendono sotto i 1024 e i 600 px: vedi main.css, in cima. */
  --font-size-hero: 5.25rem;   /* 84px — titolo della hero della home */
  --font-size-h1: 3.75rem;     /* 60px — titolo di pagina */
  --font-size-h2: 3.25rem;     /* 52px — titolo di sezione */
  --font-size-cta: 3.5rem;     /* 56px — frase in corsivo delle fasce CTA */
  --font-size-stat: 2.625rem;  /* 42px — numeri della fascia */
  --font-size-send: 2.25rem;   /* 36px — "Send an enquiry" */
  --font-size-lead: 2rem;      /* 32px — paragrafo d'apertura della home */
  --font-size-h3: 1.875rem;    /* 30px — titolo di scheda */
  --font-size-faq: 1.375rem;   /* 22px — domanda delle FAQ */
  --font-size-quote: 1.125rem; /* 18px — recensioni, corsivo */
  --font-size-body: 1.0625rem; /* 17px — testo corrente */
  --font-size-card: 1rem;      /* 16px — testo delle schede */
  --font-size-pill: 0.9375rem; /* 15px — pillole */
  --font-size-nav: 0.875rem;   /* 14px — navigazione, linguette */
  --font-size-label: 0.8125rem;/* 13px — occhielli ed etichette maiuscole */
  --font-size-legal: 0.75rem;  /* 12px — riga legale del piede */

  --line-height-tight: 1.08;
  --line-height-heading: 1.15;
  --line-height-body: 1.7;

  /* Etichette maiuscole: piccole, spaziate. La navigazione un po' meno. */
  --letter-spacing-label: 0.14em;
  --letter-spacing-nav: 0.08em;
  --font-weight-label: 500;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  /* Stacco verticale fra le sezioni: 128px a 1440, meno sotto (main.css). */
  --space-section: 8rem;

  /* Layout. Contenuto largo al massimo 1280px con 80px di margine per lato
     a 1440 (SPEC_RESTYLING.md, "Griglia e misure"). Il margine scende a 40px
     sotto i 1024 e a 24 sotto i 768: vedi .container in main.css. */
  --container-max: 1280px;
  --gutter: 24px;
  --gutter-tablet: 40px;
  --gutter-desktop: 80px;
  --grid-gap: 32px;

  /* Bordi sottili, raggi minimi sulle foto e sulle schede, pillole tonde.
     Nessuna ombra. */
  --border-width: 1px;
  --radius-sm: 2px;
  --radius: 4px;
  --radius-pill: 999px;

  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;

  --z-header: 1000;
  --z-mobile-nav: 999;
  --z-lightbox: 2000;
}

/* Villa Coniferas — fondamenta e componenti comuni (intestazione, piede,
   pulsanti, fascia CTA), poi le pagine una dopo l'altra. Dal 27 settembre 2026
   segue i render del restyling: misure in SPEC_RESTYLING.md, valide a 1440 px.
   Piatto: nessuna box-shadow, raggi di 4px su foto e schede, pillole tonde. */

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

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

body {
  margin: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* Titoli e numeri serif, tondo regolare: il peso lo dà la misura. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--line-height-heading);
  margin: 0 0 var(--space-sm);
}
h1 { font-size: var(--font-size-h1); line-height: var(--line-height-tight); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

/* I render mostrano solo il desktop. Tablet e telefono: le misure grandi
   scendono in due passi, sotto i 1024 e sotto i 600 px; il testo corrente
   resta a 17 (16 sul telefono), mai sotto. */
@media (max-width: 1023px) {
  :root {
    --font-size-hero: 4rem;     /* 64 */
    --font-size-h1: 3rem;       /* 48 */
    --font-size-h2: 2.5rem;     /* 40 */
    --font-size-cta: 2.75rem;   /* 44 */
    --font-size-lead: 1.625rem; /* 26 */
    --font-size-h3: 1.625rem;   /* 26 */
    --font-size-stat: 2.25rem;  /* 36 */
    --font-size-send: 2rem;     /* 32 */
    --space-section: 6rem;      /* 96 */
  }
}
@media (max-width: 599px) {
  :root {
    --font-size-hero: 2.625rem; /* 42 */
    --font-size-h1: 2.25rem;    /* 36 */
    --font-size-h2: 2rem;       /* 32 */
    --font-size-cta: 2rem;      /* 32 */
    --font-size-lead: 1.375rem; /* 22 */
    --font-size-h3: 1.5rem;     /* 24 */
    --font-size-faq: 1.25rem;   /* 20 */
    --font-size-stat: 2rem;     /* 32 */
    --font-size-send: 1.75rem;  /* 28 */
    --font-size-body: 1rem;     /* 16 */
    --space-section: 4rem;      /* 64 */
  }
}
/* Sotto i 360px il contenuto è largo 272px: a 36px una parola lunga
   ("Mediterranean") esce dal contenitore e fa scorrere la pagina in
   orizzontale. */
@media (max-width: 359px) {
  :root { --font-size-h1: 2rem; --font-size-hero: 2.25rem; }
}

p { margin: 0 0 var(--space-sm); }
ul, ol { margin: 0 0 var(--space-sm); padding-left: 1.2em; }

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

a {
  color: inherit;
  text-decoration-color: var(--color-border);
  text-underline-offset: 0.15em;
}
a:hover { text-decoration-color: currentColor; }

/* Occhiello: 13px, maiuscolo, spaziato, nel colore d'accento. */
.eyebrow {
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--letter-spacing-label);
  line-height: 1.4;
  text-transform: uppercase;
  margin: 0 0 var(--space-md);
}

/* Contenitore: 1280px di contenuto, 80px di margine a 1440. Il margine
   scende a 40px sotto i 1024 e a 24 sotto i 768. max-width = contenuto +
   due margini, perché con border-box il padding sta dentro la larghezza. */
.container {
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 768px) {
  .container {
    max-width: calc(var(--container-max) + 2 * var(--gutter-tablet));
    padding-inline: var(--gutter-tablet);
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: calc(var(--container-max) + 2 * var(--gutter-desktop));
    padding-inline: var(--gutter-desktop);
  }
}

/* Focus visibile ovunque — mai un outline: none senza sostituto. Sui fondi
   scuri e sulle foto il filo diventa chiaro. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.on-dark :focus-visible { outline-color: var(--color-text-on-dark); }

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 2000;
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-sm); }

/* ── Pulsanti ───────────────────────────────────────────────────────────── */
/* Due forme, con due compiti diversi (SPEC_RESTYLING.md, home punto 2):
   - pillola quando l'azione è l'unico scopo del blocco ("Check
     availability", "Plan a retreat", "Get in touch");
   - maiuscoletto sottolineato quando il link chiude un testo ("SEE THE
     VILLA", "VIEW ALL PHOTOS").
   La pillola scura è l'azione principale; la chiara, o col solo bordo,
   quella secondaria. Sui fondi scuri e sulle foto si invertono. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 32px;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--font-size-pill);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.pill--sm { min-height: 44px; padding: 0 22px; font-size: var(--font-size-nav); font-weight: 500; }
.pill--dark { background: var(--color-bg-dark); color: var(--color-text-on-dark); }
.pill--dark:hover { background: #3A3833; }
.pill--light { background: var(--color-bg-primary); color: var(--color-text-primary); }
.pill--light:hover { background: var(--color-bg-white); }
.pill--outline { background: transparent; color: var(--color-text-primary); border-color: var(--color-border-strong); }
.pill--outline:hover { border-color: var(--color-text-primary); }
/* Col solo bordo su un fondo scuro o su una foto. */
.pill--outline-on-dark { background: transparent; color: var(--color-text-on-dark); border-color: rgba(247, 244, 239, 0.6); }
.pill--outline-on-dark:hover { border-color: var(--color-text-on-dark); }
/* Sotto i 400px una pillola da 32px per lato non entra accanto a un'altra:
   il gruppo va a capo (flex-wrap su .pill-row) e la pillola si stringe. */
@media (max-width: 399px) {
  .pill { padding: 0 24px; }
}

.pill-row { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }

.link-caps,
.link-more {
  display: inline-block;
  padding-block: 4px;
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 7px;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.link-caps:hover,
.link-more:hover { text-decoration-color: currentColor; }

/* ── Intestazione ───────────────────────────────────────────────────────── */
/* Due stati dello stesso componente (SPEC_RESTYLING.md, home punto 1):
   - pagine interne: barra piena sul fondo della pagina, filo sotto, ferma
     in cima allo scorrimento;
   - home (.site-header--overlay): sopra la foto della hero, trasparente,
     logo e navigazione chiari, "ENQUIRE" chiara. Non resta in cima: sulla
     trasparenza, scorrendo, finirebbe sopra il testo. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg-primary);
  border-bottom: var(--border-width) solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  /* 27,5 + 44 della pillola + 27,5 = 99px, come nel render. */
  min-height: 99px;
  padding-block: 12px;
}
.site-header__logo {
  display: inline-flex;
  margin-right: auto;
}
.site-header__logo img,
.site-footer__logo img {
  display: block;
  /* Il logo è un lockup a due righe (corsivo + serif ad alto contrasto):
     sotto i 40px il corsivo diventa illeggibile. 40px è anche l'altezza del
     render, quindi resta uguale su ogni schermo. */
  height: 40px;
  width: auto;
}
@media (max-width: 899px) {
  .site-header__inner { min-height: 72px; gap: var(--space-md); }
}

.site-header__nav {
  display: none;
  align-items: center;
  gap: 40px;
}
.site-header__nav a {
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--letter-spacing-nav);
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 6px 5px;
  border-bottom: var(--border-width) solid transparent;
}
.site-header__nav a:hover { border-bottom-color: var(--color-border-strong); }
.site-header__nav a[aria-current="page"] { border-bottom-color: currentColor; }

/* "ENQUIRE": una pillola, l'unica voce che chiede un'azione. Scura sulle
   pagine interne; color accento sulla pagina Enquire stessa, che è il suo
   stato "pagina corrente" (le altre voci lì prendono la sottolineatura). */
.site-header__nav a.site-header__nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 24px;
  border: var(--border-width) solid var(--color-bg-dark);
  border-radius: var(--radius-pill);
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  transition: background-color var(--transition-fast);
}
.site-header__nav a.site-header__nav-cta:hover { background: #3A3833; }
.site-header__nav a.site-header__nav-cta[aria-current="page"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-primary);
  cursor: pointer;
}
.site-header__toggle-icon,
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  position: relative;
}
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.site-header__toggle-icon::before { top: -6px; }
.site-header__toggle-icon::after { top: 6px; }

@media (min-width: 900px) {
  .site-header__nav { display: flex; }
  .site-header__toggle { display: none; }
}

/* Schermi stretti. Logo (173px a 40px d'altezza) + lingue (~60px) + menu
   (44px) + due spazi: logo e pulsante non si comprimono mai; sotto i 400px
   lo spazio scende a 16px; sotto i 360px le lingue escono dalla barra —
   restano nel menu del telefono, a un tocco. */
.site-header__inner > .site-header__logo,
.site-header__toggle { flex-shrink: 0; }
@media (max-width: 399px) {
  .site-header__inner { gap: var(--space-sm); }
}
@media (max-width: 359px) {
  .site-header__inner > .lang-switch { display: none; }
}

/* Stato sopra la foto (home). Il logo è un PNG scuro su trasparente: il
   filtro lo porta al bianco senza spedire un secondo file. Solo nella
   barra: il pannello del telefono ha il fondo chiaro e il logo scuro. */
.site-header--overlay {
  position: absolute;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 0;
  color: var(--color-text-on-dark);
}
.site-header--overlay .site-header__inner .site-header__logo img { filter: brightness(0) invert(1); }
.site-header--overlay .site-header__nav a.site-header__nav-cta {
  background: var(--color-bg-primary);
  border-color: rgba(247, 244, 239, 0.6);
  color: var(--color-text-primary);
}
.site-header--overlay .site-header__nav a.site-header__nav-cta:hover { background: var(--color-bg-white); }
.site-header--overlay .site-header__toggle { border-color: rgba(247, 244, 239, 0.6); color: var(--color-text-on-dark); }
.site-header--overlay .site-header__inner > .lang-switch .lang-switch__link,
.site-header--overlay .site-header__inner > .lang-switch .lang-switch__current { color: var(--color-text-on-dark); }
.site-header--overlay .site-header__inner :focus-visible { outline-color: var(--color-text-on-dark); }
/* Il pannello del telefono resta chiaro anche sulla home. */
.site-header--overlay .mobile-nav { color: var(--color-text-primary); }

/* ── Switch lingua (intestazione, menu del telefono, piede) ─────────────── */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
}
/* Bersagli da 24px (WCAG 2.2, 2.5.8): il carattere è piccolo, cresce il link. */
.lang-switch__link,
.lang-switch__current { display: inline-block; padding-block: 3px; min-width: 24px; text-align: center; }
.lang-switch__link {
  color: var(--color-text-secondary);
  text-decoration: none;
}
.lang-switch__link:hover { color: var(--color-text-primary); text-decoration: underline; }
.lang-switch__current {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* Nel pannello del telefono, sotto ai link di navigazione */
.mobile-nav .lang-switch { margin-top: var(--space-lg); }

/* ── Menu del telefono ──────────────────────────────────────────────────── */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav);
  background: var(--color-bg-primary);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__panel {
  height: 100%;
  overflow-y: auto;
  padding: 0 var(--gutter) var(--space-xl);
  display: flex;
  flex-direction: column;
}
.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-lg);
}
.mobile-nav__close {
  width: 44px;
  height: 44px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-primary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.mobile-nav__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}
.mobile-nav__links a {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.2;
  text-decoration: none;
}
.mobile-nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
/* Enquire anche qui è una pillola scura, come nella barra. */
.mobile-nav__links a.site-header__nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  margin-top: var(--space-sm);
  padding: 0 32px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  font-family: var(--font-body);
  font-size: var(--font-size-pill);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
}
.mobile-nav__links a.site-header__nav-cta[aria-current="page"] { background: var(--color-accent); text-decoration: none; }

@media (min-width: 900px) {
  .mobile-nav { display: none !important; }
}

/* body scroll lock quando il pannello mobile è aperto (classe aggiunta da main.js) */
body.menu-open { overflow: hidden; }
body.lightbox-open { overflow: hidden; }

/* ── Lightbox condivisa (gallery.js) ───────────────────────────────────── */
.lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); }
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 25, 0.94);
}
.lightbox__dialog {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  /* Il dialog è full-bleed (per centrare il contenuto) ma senza sfondo
     proprio: senza pointer-events:none intercetterebbe comunque i click
     sul proprio padding, impedendo loro di raggiungere il backdrop
     sottostante — "click fuori per chiudere" non avrebbe mai funzionato.
     I figli diretti (bottoni, stage, didascalia) si riattivano subito sotto. */
  pointer-events: none;
}
.lightbox__dialog > * { pointer-events: auto; }
.lightbox__stage {
  max-width: 90vw;
  max-height: 78vh;
  display: flex;
}
.lightbox__stage picture { display: flex; max-width: 100%; max-height: 78vh; }
.lightbox__image {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__caption {
  color: var(--color-text-on-dark);
  opacity: 0.75;
  font-size: var(--font-size-nav);
  margin: var(--space-sm) 0 0;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--border-width) solid rgba(247, 244, 239, 0.4);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-on-dark);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.lightbox__close:hover,
.lightbox__nav:hover { border-color: var(--color-text-on-dark); }
.lightbox__close { top: var(--space-md); right: var(--space-md); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: var(--space-md); }
.lightbox__nav--next { right: var(--space-md); }
@media (max-width: 600px) {
  .lightbox__close, .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav--prev { left: var(--space-xs); }
  .lightbox__nav--next { right: var(--space-xs); }
}

/* ── Fascia CTA ─────────────────────────────────────────────────────────── */
/* Un solo partial per tutte le pagine: una frase in corsivo serif, una riga
   facoltativa sotto, una o due pillole. Scura di norma; chiara (fascia
   alternata, pillola scura) su Retreats, come nel render. */
.cta-band {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}
.cta-band--light {
  background: var(--color-bg-alt);
  color: var(--color-text-primary);
}
.cta-band__inner {
  padding-block: 128px;
  text-align: center;
}
@media (max-width: 1023px) { .cta-band__inner { padding-block: 96px; } }
@media (max-width: 599px) { .cta-band__inner { padding-block: 64px; } }
.cta-band__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--font-size-cta);
  line-height: var(--line-height-heading);
  margin: 0 0 40px;
}
.cta-band__heading:has(+ .cta-band__subtext) { margin-bottom: var(--space-md); }
.cta-band__subtext { margin: 0 0 40px; color: var(--color-text-on-dark-muted); }
.cta-band__subtext a { color: var(--color-text-on-dark); text-decoration-color: currentColor; }
.cta-band--light .cta-band__subtext { color: var(--color-text-secondary); }
.cta-band--light .cta-band__subtext a { color: var(--color-text-primary); }
.cta-band__links { justify-content: center; }

/* ── Piede di pagina ────────────────────────────────────────────────────── */
/* Tre colonne come nel render: marchio e località, pagine, contatti. Sotto,
   dopo un filo, copyright e avviso legale a sinistra, registri a destra.
   Niente etichette sopra le colonne. Lo switch della lingua, che il render
   non ha, sta nella riga in basso accanto al copyright. */
.site-footer {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}
.site-footer__main {
  display: grid;
  /* Colonne a x 80 / 514 / 840 su 1440, come nel render. */
  grid-template-columns: minmax(0, 434fr) minmax(0, 326fr) minmax(0, 520fr);
  padding-block: 72px 56px;
}
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__logo { display: inline-flex; }
.site-footer__location {
  margin: 20px 0 0;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5;
  color: var(--color-text-secondary);
}
/* Le due liste partono all'altezza del logo, non della riga di base. */
.site-footer__list {
  list-style: none;
  margin: -4px 0 0;
  padding: 0;
  font-size: var(--font-size-card);
  line-height: 24px;
}
/* Bersagli da 24px (WCAG 2.2, 2.5.8): riga di 24px più 4px sopra e sotto,
   quindi 32px da una voce all'altra, come nel render. */
.site-footer__list a {
  display: inline-block;
  padding-block: 4px;
  color: var(--color-text-primary);
  text-decoration: none;
}
.site-footer__list a:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* Riga finale, separata da un filo lungo quanto il contenuto: un
   border-top su .container sporgerebbe nei margini laterali. Il filo è uno
   sfondo largo quanto il content-box, riportato in cima al box. */
.site-footer__sub {
  padding-block: 24px 32px;
  background: linear-gradient(var(--color-border), var(--color-border)) no-repeat;
  background-origin: content-box;
  background-clip: padding-box;
  background-size: 100% var(--border-width);
  background-position: 0 -24px; /* = padding superiore */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  font-size: var(--font-size-legal);
  line-height: 18px;
  color: var(--color-text-secondary);
}
.site-footer__sub p { margin: 0; min-width: 0; }
.site-footer__legal { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); flex-shrink: 0; }
.site-footer__legal .lang-switch { font-size: var(--font-size-legal); }
/* L'avviso legale è a 12px: il link cresce fino a 24px di bersaglio. */
.site-footer__rights a { display: inline-block; padding-block: 3px; color: inherit; text-decoration: none; }
.site-footer__rights a:hover { color: var(--color-text-primary); text-decoration: underline; }
.site-footer__registry { text-align: right; }
/* Il numero nazionale è una stringa unica di 53 caratteri senza spazi: sul
   telefono non entra in una riga, e senza un punto di rottura allargherebbe
   la pagina. anywhere lo lascia andare a capo dentro il codice, e solo
   quando non ci sta. */
.site-footer__registry-national { overflow-wrap: anywhere; }

/* Sotto i 1024 due colonne: marchio sopra, pagine e contatti affiancati.
   Sotto i 600 una sola: prima i contatti (chi apre il piede dal telefono
   cerca il numero), poi le pagine, poi il marchio. */
@media (max-width: 1023px) {
  .site-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--space-lg); padding-block: 56px 40px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__sub { flex-direction: column; align-items: flex-start; }
  .site-footer__registry { text-align: left; }
}
@media (max-width: 599px) {
  .site-footer__main { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .site-footer__contact { order: 1; }
  .site-footer__pages { order: 2; }
  .site-footer__brand { order: 3; grid-column: auto; }
}

/* ── Placeholder foto ───────────────────────────────────────────────────── */
/* src è un SVG vuoto (trasparente): il grigio viene da qui, non dall'immagine.
   width/height restano gli attributi HTML reali passati da placeholderImg —
   quando arriva la foto vera, stessa proporzione, il layout non si muove. */
.placeholder-img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-border);
}

/* ── Pezzi comuni alle sezioni ──────────────────────────────────────────── */
/* Titolo di sezione a sinistra, un link o un dato a destra, allineati in
   basso ("The villa in pictures" / VIEW ALL PHOTOS, "What our guests say" /
   4.85). Sotto i 600px vanno uno sotto l'altro. */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md) var(--space-lg);
  margin-bottom: 56px;
}
.section-head__title { margin: 0; }
@media (max-width: 599px) {
  .section-head { flex-direction: column; align-items: flex-start; margin-bottom: 40px; }
}
/* Il maiuscoletto sottolineato anche su un <button> (apre la lightbox). */
button.link-caps { background: none; border: 0; padding-inline: 0; font-family: var(--font-body); cursor: pointer; }

/* ── Fascia dei numeri ──────────────────────────────────────────────────── */
/* Celle uguali con divisori verticali, un filo sopra e sotto, numero serif
   grande e etichetta maiuscola. Sulla home (--full) va da bordo a bordo, su
   superficie chiara; nelle altre pagine sta nel contenitore. Quante celle
   ci siano lo decide il contenuto: le colonne si dividono lo spazio. */
.stats-band { border-block: var(--border-width) solid var(--color-border); }
.stats-band--full { background: var(--color-bg-card); }
.stats-band__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.stat {
  margin: 0;
  padding: 48px var(--space-sm) 44px;
  text-align: center;
  border-left: var(--border-width) solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.stat:first-child { border-left: 0; }
.stat__number {
  font-family: var(--font-display);
  font-size: var(--font-size-stat);
  line-height: 1.1;
  white-space: nowrap;
}
.stat__label {
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-label);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
/* Due colonne fino a 767px: con quattro o cinque voci una riga sola non
   entra. min-width: 0 impedisce a una cifra lunga ("3 000 m²") di
   allargare la colonna invece di restarci dentro. Numero dispari di voci:
   l'ultima prende la riga intera. */
@media (max-width: 767px) {
  .stats-band__grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-left: 0; border-top: var(--border-width) solid var(--color-border); padding-block: 28px 24px; padding-inline: var(--space-xs); }
  .stat:nth-child(-n + 2) { border-top: 0; }
  .stat:nth-child(odd) { border-right: var(--border-width) solid var(--color-border); }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
}

/* ══ Home ════════════════════════════════════════════════════════════════ */

/* ── Le sezioni sotto la prima schermata ────────────────────────────────── */
/* Sulla home, galleria, recensioni e distanze non si
   disegnano finché non ci si avvicina scorrendo. Così le sei foto del
   mosaico non partono insieme alla prima foto e al titolo (MISURE.md, R2):
   il browser caricava le immagini "lazy" con migliaia di pixel d'anticipo.
   Il corsivo di Playfair invece parte al caricamento, dal 3 ottobre 2026:
   lo usa il titolo della fascia finale, che ora si disegna subito (vedi
   sotto). Sono 38 KB in più, accettati. Il contenuto resta nella pagina per i
   lettori di schermo e per la ricerca nel testo. contain-intrinsic-size è
   un'altezza provvisoria, sostituita da quella vera appena la sezione è
   stata disegnata una volta (auto). */
.home-gallery { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
.reviews { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.home-location { content-visibility: auto; contain-intrinsic-size: auto 700px; }
/* La fascia finale no: PageSpeed (3 ottobre 2026) segnalava "contrasto
   insufficiente" sui suoi due pulsanti, che in realtà sono a 14,6:1 e
   15,7:1. Era l'unica fascia del sito con content-visibility, e l'unica
   segnalata: finché la sezione non è disegnata, lo strumento legge un fondo
   sbagliato. Non rimetterla qui senza rifare PageSpeed sul dominio vero. */

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* A tutta pagina, con l'intestazione sopra (header.hbs, stato overlay). Il
   testo sta in basso a sinistra, il voto Airbnb in basso a destra. */
.hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  max-height: 1000px;
  --hero-pad: 96px;
}
@media (max-width: 767px) {
  .hero { min-height: 560px; --hero-pad: 40px; }
}
/* Ogni slide impilata sull'intero riquadro; solo .is-active è visibile
   (hero-slideshow.js le fa ruotare). */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.hero__slide.is-active { opacity: 1; z-index: 1; }
.hero__slide picture { display: block; width: 100%; height: 100%; }
.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Per-slide, dal custom property impostato su .hero__slide (site.json →
     hero.slides[].focus/focusMobile): lo stesso centraggio non tiene la
     casa in inquadratura sia sul desktop sia sul telefono. */
  object-position: var(--hero-focus, center);
}
@media (max-width: 768px) {
  .hero__image { object-position: var(--hero-focus-mobile, var(--hero-focus, center)); }
}
.hero__scrim {
  /* z-index 2: .hero__slide.is-active (z-index 1) altrimenti la copre. */
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    /* In alto: sotto l'intestazione chiara, che sulla home sta sulla foto.
       Menu e lingue sono a 13–14 px e chiedono 4,5:1: con 0,5 che si
       esauriva in 200px, sulle foto più chiare restavano sotto soglia
       (MISURE.md, R1). 0,55 all'altezza del menu, poi la foto torna piena
       entro 280px. Le foto d'interni chiare non reggono questo velo: il
       criterio per scegliere le foto della hero è in MISURE.md. */
    linear-gradient(to bottom, rgba(28, 27, 23, 0.65) 0, rgba(28, 27, 23, 0.55) 110px, rgba(28, 27, 23, 0) 280px),
    /* Dal basso: tutto il blocco di testo (occhiello, titolo, pillole) deve
       sedere su almeno 0,5. Il blocco è alto in pixel quasi uguale su ogni
       schermo, la hero no: un punto in percentuale lasciava l'occhiello
       fuori dalla zona scura sugli schermi bassi (a 1024 × 768 sta al 64%
       dell'altezza, a 360 × 640 al 71%). Quindi l'intermedio sta al più alto
       fra metà hero e 560px, e da lì sfuma in 240px. Era 0,40 al 35%, e
       l'occhiello restava su 0,28. Misura e numeri in MISURE.md, "Contrasto
       del testo sulla hero": da rifare ogni volta che cambia una foto. */
    linear-gradient(to top, rgba(28, 27, 23, 0.75) 0, rgba(28, 27, 23, 0.5) max(50%, 560px), rgba(28, 27, 23, 0) calc(max(50%, 560px) + 240px));
}
.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--hero-pad);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  color: var(--color-text-on-dark);
}
/* Velatura che segue il testo, sopra la foto e sotto le parole. Lo scrim qui
   sopra è in percentuale dell'altezza: sul telefono il titolo va su più
   righe e porta la riga piccola dove lo scrim è già quasi trasparente.
   Questa parte 64px sopra la riga piccola e arriva al fondo della hero,
   quindi sale con il testo qualunque sia la lunghezza del titolo. */
.hero__content::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--space-2xl));
  bottom: calc(-1 * var(--hero-pad));
  left: calc(50% - 50vw);
  width: 100vw;
  background: linear-gradient(to bottom, rgba(28, 27, 23, 0) 0, rgba(28, 27, 23, 0.35) var(--space-2xl), rgba(28, 27, 23, 0.35) 100%);
  pointer-events: none;
}
.hero__text { min-width: 0; }
.hero__eyebrow {
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--letter-spacing-label);
  line-height: 1.4;
  text-transform: uppercase;
  margin: 0 0 var(--space-md);
}
.hero__title {
  max-width: 900px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--font-size-hero);
  line-height: 1.02;
  color: var(--color-text-on-dark);
  margin: 0;
}
.hero__ctas { margin-top: 40px; }
.hero__rating {
  flex-shrink: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: var(--font-size-pill);
  line-height: 1.4;
  color: var(--color-text-on-dark);
}
.hero__stars { display: flex; gap: 4px; }
.hero__stars svg { width: 14px; height: 14px; }
@media (max-width: 1023px) {
  .hero__content { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .hero__rating { align-items: flex-start; }
}
@media (max-width: 599px) {
  .hero__ctas { margin-top: var(--space-lg); }
}

/* ── Paragrafo d'apertura ───────────────────────────────────────────────── */
/* Occhiello a sinistra, paragrafo serif da 32px a destra (SPEC_RESTYLING.md,
   home punto 5): non è testo corrente, è uno dei due momenti che danno il
   tono alla pagina. Colonne a x 80 e 623 su 1440. */
.home-intro {
  display: grid;
  grid-template-columns: minmax(0, 511fr) minmax(0, 737fr);
  column-gap: var(--grid-gap);
  padding-block: var(--space-section);
}
.home-intro__eyebrow { margin: 0; padding-top: 14px; }
.home-intro__lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-lead);
  line-height: 1.45;
  color: var(--color-text-primary);
}
/* Capienza e prezzo: il render non li ha, ma il prezzo si pubblica. */
.home-intro__facts {
  margin: var(--space-lg) 0 0;
  font-weight: 600;
}
@media (max-width: 1023px) {
  .home-intro { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  .home-intro__eyebrow { padding-top: 0; }
}
/* Foto aerea sotto l'etichetta, solo a due colonne (da 1024 px): riempie
   il vuoto della colonna sinistra. 3:2, larga quanto la colonna, 24 px
   sotto l'etichetta; il testo a destra occupa le due righe. Sotto i 1024
   non esiste: nascosta qui, e mai scaricata (vedi home.hbs). */
.home-intro__photo { display: none; }
@media (min-width: 1024px) {
  .home-intro { grid-template-rows: auto 1fr; row-gap: 24px; }
  .home-intro__eyebrow { grid-column: 1; grid-row: 1; }
  .home-intro__photo { display: block; grid-column: 1; grid-row: 2; align-self: start; }
  .home-intro__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius);
  }
  .home-intro__body { grid-column: 2; grid-row: 1 / span 2; }
}

/* ── Le tre schede ──────────────────────────────────────────────────────── */
/* Impaginato di prima, deciso da Giuseppe: miniatura tonda da 96px, titolo,
   testo, centrati, scheda cliccabile per intero. Colori e tipografia sono
   quelli nuovi; le colonne sono quelle della griglia a tre (405 + 32). Le
   miniature restano l'unica forma tonda del sito (SPEC_RESTYLING.md,
   punto 3): se un giorno stonano, è il primo posto dove guardare. */
.tracks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  padding-bottom: var(--space-section);
}
@media (max-width: 767px) { .tracks { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }
.track-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.track-card__thumb {
  display: block;
  flex: none;
  width: 96px;
  height: 96px;
  margin-bottom: var(--space-lg);
}
.track-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.track-card__title { font-size: var(--font-size-h3); margin: 0 0 12px; }
.track-card:hover .track-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
/* Card con un secondo link nel testo (Airbnb): la card è un <div>, il link
   del titolo la copre tutta con ::after e il link nel testo sta sopra. */
.track-card--split { position: relative; }
.track-card__link { color: inherit; text-decoration: none; }
.track-card__link::after { content: ""; position: absolute; inset: 0; }
.track-card__link:focus-visible { outline: none; }
.track-card--split:focus-within { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.track-card--split:has(.track-card__text a:focus-visible) { outline: none; }
.track-card__text a { position: relative; z-index: 1; color: inherit; text-decoration-color: currentColor; }
.track-card__text {
  margin: 0;
  font-size: var(--font-size-card);
  line-height: 26px;
  color: var(--color-text-secondary);
}

/* ── The villa in pictures ──────────────────────────────────────────────── */
/* Fascia alternata. Mosaico di sei foto su quattro colonne e due file: la
   prima alta a sinistra, la seconda larga due colonne, le altre singole.
   Il riquadro tiene le proporzioni del render (1280 × 616), quindi a ogni
   larghezza le foto restano nello stesso rapporto. */
.home-gallery {
  background: var(--color-bg-alt);
  padding-block: var(--space-section);
}
.home-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
  aspect-ratio: 1280 / 616;
}
.home-mosaic__item {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-border);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.home-mosaic__item:hover { opacity: 0.85; }
.home-mosaic__item:nth-child(1) { grid-row: 1 / 3; }
.home-mosaic__item:nth-child(2) { grid-column: 2 / 4; }
.home-mosaic__item picture,
.home-mosaic__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sul telefono il mosaico diventa una fila da scorrere, come quello della
   pagina Villa: sei foto in colonna sarebbero tre schermate di immagini. */
@media (max-width: 767px) {
  .home-mosaic {
    display: flex;
    aspect-ratio: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
  }
  .home-mosaic__item {
    flex: 0 0 80%;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
  }
}

/* ── Recensioni ─────────────────────────────────────────────────────────── */
/* Tornano nei riquadri bordati, in corsivo serif, con la virgoletta in
   accento: ribalta i punti 4 e 5 di RIFINITURE.md, per scelta del render
   del 27 settembre. Il voto complessivo sta accanto al titolo. */
.reviews { padding-block: var(--space-section); }
.reviews__head .eyebrow { margin-bottom: var(--space-sm); }
.reviews__source { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 4px; }
.reviews__source:hover { text-decoration-thickness: 2px; }
.reviews__rating {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.reviews__rating-number {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  line-height: 1;
}
.reviews__rating-text {
  font-size: var(--font-size-pill);
  color: var(--color-text-secondary);
}
.reviews__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
/* Colonne dichiarate, niente auto-fit: con quattro citazioni auto-fit ne
   metteva tre per riga in certe larghezze, lasciando la quarta sola. Solo
   1, 2 o 4 colonne. Quattro colonne da 220px chiedono 1100px di finestra
   con la barra di scorrimento di Windows: sotto, le citazioni vanno su
   righe troppo corte. */
@media (min-width: 700px) {
  .reviews__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .reviews__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.review {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 32px 32px 36px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-card);
}
.review__mark {
  display: block;
  height: 28px;
  margin-bottom: 28px;
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--color-accent);
}
.review__text { margin: 0 0 40px; }
.review__text p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--font-size-quote);
  line-height: 1.6;
}
.review__author {
  margin: auto 0 0;
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ── Benalmádena and beyond ─────────────────────────────────────────────── */
/* Titolo e testo breve a sinistra, distanze a destra (da x 732 su 1440):
   nome a sinistra, minuti in serif grande a destra, un filo fra le righe. */
.home-location {
  display: grid;
  grid-template-columns: minmax(0, 520fr) minmax(0, 628fr);
  column-gap: 132px;
  padding-block: var(--space-section);
}
.reviews + .home-location { padding-top: 0; }
.home-location__text h2 { margin-bottom: var(--space-lg); }
.home-location__intro { margin: 0; max-width: 520px; color: var(--color-text-secondary); }
@media (max-width: 1023px) {
  .home-location { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
}
.distance-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--border-width) solid var(--color-border);
}
.distance-rows__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: 22px;
  border-bottom: var(--border-width) solid var(--color-border);
}
.distance-rows__value {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  line-height: 1.2;
  white-space: nowrap;
}

/* ── Pezzi comuni alle pagine interne ───────────────────────────────────── */
/* Apertura di pagina a due colonne (Villa, Press): occhiello e titolo a
   sinistra (718px), paragrafo a destra (411px), 151px fra le due, allineati
   in basso. Sotto i 1024 una colonna sola. */
.page-intro {
  display: grid;
  grid-template-columns: minmax(0, 718fr) minmax(0, 411fr);
  column-gap: 151px;
  align-items: end;
  padding-block: 112px 72px;
}
.page-intro h1 { margin: 0; }
.page-intro__text { margin: 0; color: var(--color-text-secondary); }
@media (max-width: 1023px) {
  .page-intro { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); padding-block: 72px 48px; }
}
@media (max-width: 599px) {
  .page-intro { padding-block: 48px 40px; }
}

/* Titolo di sezione a sinistra e paragrafo a destra, a metà altezza
   ("Three spaces, one garden"). */
.split-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  column-gap: 64px;
  align-items: center;
  margin-bottom: 56px;
}
.split-head__title { margin: 0; }
.split-head__text { margin: 0; color: var(--color-text-secondary); }
@media (max-width: 1023px) {
  .split-head { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
}

/* Griglia a tre colonne: 405px con 32 di spazio a 1440. Due sotto i 1024,
   una sotto i 600. */
.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px var(--grid-gap);
}
@media (max-width: 1023px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .card-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.card-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

/* [hidden] deve vincere sui display dei componenti qui sotto. */
.villa-mosaic[hidden] { display: none; }
/* Le linguette occupano il loro spazio da subito ma restano invisibili (e
   fuori dal Tab) finché gallery.js non le rende attive: così la galleria
   non si sposta quando compaiono (MISURE.md, R3). */
.villa-tabs:not(.is-ready) { visibility: hidden; }

/* ══ La villa ═════════════════════════════════════════════════════════════ */

/* ── Galleria con linguette ─────────────────────────────────────────────── */
.villa-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.villa-tabs__tab {
  min-height: 44px;
  padding: 0 22px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-nav);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.villa-tabs__tab:hover { border-color: var(--color-border-strong); }
.villa-tabs__tab[aria-selected="true"] {
  background: var(--color-bg-dark);
  border-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

/* Mosaico: una foto grande a sinistra (due colonne per due file), quattro
   piccole a destra. Proporzioni del render: 1280 × 656. "View all photos"
   sta appoggiata in basso a destra, sull'ultima foto. */
.villa-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
  aspect-ratio: 1280 / 656;
}
.villa-mosaic__item {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-border);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.villa-mosaic__item:hover { opacity: 0.85; }
.villa-mosaic__item:first-child { grid-column: 1 / 3; grid-row: 1 / 3; }
.villa-mosaic__item picture,
.villa-mosaic__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.villa-mosaic__viewall {
  position: absolute;
  right: 16px;
  bottom: 16px;
}
/* Sul telefono: la grande sopra, a tutta larghezza, le quattro piccole in
   due file da due. La pillola resta sull'ultima foto. */
@media (max-width: 767px) {
  .villa-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    aspect-ratio: auto;
    gap: 8px;
  }
  .villa-mosaic__item { aspect-ratio: 1 / 1; }
  .villa-mosaic__item:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .villa-mosaic__viewall { right: 8px; bottom: 8px; }
}

/* ── Numeri ─────────────────────────────────────────────────────────────── */
.villa-stats { padding-top: 96px; }
.villa-stats .stat { padding-block: 56px 48px; }
@media (max-width: 767px) {
  .villa-stats { padding-top: 56px; }
  .villa-stats .stat { padding-block: 28px 24px; }
}

/* ── Tre spazi ──────────────────────────────────────────────────────────── */
.villa-spaces { padding-block: var(--space-section); }
.space-card__photo { display: block; aspect-ratio: 405 / 400; }
.space-card__text {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px var(--space-md);
  margin-top: var(--space-md);
}
.space-card__title { margin: 0; font-size: var(--font-size-h3); }
.space-card__caption { margin: 0; font-size: var(--font-size-nav); color: var(--color-text-secondary); }

/* ── Camere ─────────────────────────────────────────────────────────────── */
/* Fascia alternata. Occhiello con edificio e piano, titolo, descrizione. La
   foto è facoltativa (site.json → rooms[].photo): senza, la scheda è solo
   testo e la griglia regge lo stesso. */
.villa-rooms {
  background: var(--color-bg-alt);
  padding-block: var(--space-section);
}
.villa-rooms__title { margin: 0 0 56px; }
/* Finché le foto arrivano una camera alla volta, in una fila possono stare
   schede con e senza foto. Ogni scheda occupa quattro righe condivise con
   le altre della stessa fila (subgrid): foto, occhiello, titolo, testo.
   Una fila senza nessuna foto ha la prima riga alta zero; con una foto
   sola, il testo delle altre schede si allinea comunque al suo. Lo stacco
   fra una fila e l'altra lo dà il margine sotto il testo, perché il gap
   della griglia finirebbe anche fra le quattro righe di ogni scheda. */
.card-grid--rooms { row-gap: 0; }
.room-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  /* Una colonna che si può stringere: senza, WebKit la allargava alla
     larghezza minima della foto e sul telefono la scheda sbordava di 13px. */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  align-content: start;
}
.room-card__photo { grid-row: 1; }
.room-card__eyebrow { grid-row: 2; }
.room-card__title { grid-row: 3; }
.room-card__desc { grid-row: 4; }
.villa-rooms { padding-bottom: calc(var(--space-section) - 56px); }
@media (max-width: 599px) { .villa-rooms { padding-bottom: calc(var(--space-section) - 40px); } }
.room-card__photo { display: block; aspect-ratio: 405 / 260; margin-bottom: var(--space-md); }
.room-card__eyebrow { margin-bottom: 12px; }
.room-card__title { margin: 0 0 12px; font-size: 1.75rem; }
.room-card__desc { margin: 0 0 56px; font-size: var(--font-size-card); line-height: 26px; color: var(--color-text-secondary); }
@media (max-width: 599px) { .room-card__desc { margin-bottom: 40px; } }

/* ── Slider sul telefono: recensioni (home) e camere (Villa) ────────────── */
/* Un solo componente per le due sezioni. Sotto i 768 px le schede scorrono
   in orizzontale dentro la loro riga, una all'85% della larghezza utile, con
   la successiva che si intravede a destra; da 768 in su resta la griglia di
   ogni sezione. Lo scorrimento è tutto CSS: main.js aggiunge solo il
   contatore "1 / 4" e toglie il tabindex dove il contenitore non scorre.
   Il contenitore esce dal margine della pagina fino ai bordi dello schermo,
   così la scheda che segue non si taglia a 24 px dal bordo; la prima scheda
   parte comunque al margine della pagina (padding e scroll-padding). Lo
   spazio dopo l'ultima scheda lo dà ::after (8 px più i 16 del gap): un
   padding a destra in un contenitore che scorre non tutti i motori lo
   rispettano. */
.slider-mobile__count { display: none; }
@media (max-width: 767px) {
  .slider-mobile {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline-start: var(--gutter);
    scroll-padding-inline-start: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .slider-mobile::-webkit-scrollbar { display: none; }
  /* Il contenitore tocca i bordi dello schermo: il filo del focus va dentro. */
  .slider-mobile:focus-visible { outline-offset: -2px; }
  /* Doppia classe: deve vincere sulle griglie di .reviews__list e .card-grid. */
  .slider-mobile__track.slider-mobile__track { display: flex; gap: 16px; }
  .slider-mobile__track > * {
    /* Il 100% è la riga senza il margine sinistro: tolto anche il destro,
       resta la larghezza utile della pagina. */
    flex: 0 0 calc((100% - var(--gutter)) * 0.85);
    scroll-snap-align: start;
  }
  .slider-mobile__track::after { content: ""; flex: 0 0 calc(var(--gutter) - 16px); }
  /* Camere: senza fila non c'è stacco da dare sotto il testo. */
  .slider-mobile__track .room-card__desc { margin-bottom: 0; }
  .villa-rooms { padding-bottom: var(--space-section); }
  /* Il contatore occupa il suo spazio da subito, invisibile finché main.js
     non lo rende attivo: niente spostamenti al caricamento. Senza
     JavaScript non c'è (<noscript> in base.hbs). */
  .slider-mobile__count {
    display: block;
    margin: 24px 0 0;
    font-size: var(--font-size-label);
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
  }
  .slider-mobile__count:not(.is-ready) { visibility: hidden; }
}

/* ── Cosa è compreso / Su richiesta ─────────────────────────────────────── */
.villa-included {
  display: grid;
  grid-template-columns: minmax(0, 736fr) minmax(0, 411fr);
  column-gap: 133px;
  align-items: start;
  padding-block: var(--space-section);
}
.villa-included h2 { margin-bottom: 40px; }
@media (max-width: 1023px) {
  .villa-included { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
}
/* Elenco a due colonne, un filo sotto ogni voce e sopra la prima fila. */
.rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}
.rule-list li {
  padding-block: 14px;
  border-bottom: var(--border-width) solid var(--color-border);
}
.rule-list li:nth-child(-n + 2) { border-top: var(--border-width) solid var(--color-border); }
@media (max-width: 599px) {
  .rule-list { grid-template-columns: minmax(0, 1fr); }
  .rule-list li:nth-child(2) { border-top: 0; }
}
.on-request {
  padding: 48px 40px 40px;
  border-radius: var(--radius);
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}
.on-request__title { margin: 0 0 24px; font-size: var(--font-size-h3); }
.on-request__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-card);
  line-height: 32px;
}
.on-request__note {
  margin: var(--space-md) 0 0;
  font-size: var(--font-size-nav);
  color: var(--color-text-on-dark-muted);
}

/* ── Posizione ──────────────────────────────────────────────────────────── */
/* Senza mappa: testo a sinistra, distanze a destra, come sulla home. Con la
   mappa (--map): testo e distanze a sinistra, mappa a destra. */
.villa-location {
  display: grid;
  grid-template-columns: minmax(0, 520fr) minmax(0, 628fr);
  column-gap: 132px;
  align-items: start;
  padding-bottom: var(--space-section);
}
.villa-location__text h2 { margin-bottom: var(--space-lg); }
.villa-location__intro { margin: 0; color: var(--color-text-secondary); }
.villa-location--map { grid-template-areas: "text map" "list map"; }
.villa-location--map .villa-location__text { grid-area: text; margin-bottom: 40px; }
.villa-location--map .distance-rows { grid-area: list; }
@media (max-width: 1023px) {
  .villa-location,
  .villa-location--map { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; row-gap: var(--space-xl); }
  .villa-location--map .villa-location__text,
  .villa-location--map .distance-rows,
  .villa-location--map .map-block { grid-area: auto; margin-bottom: 0; }
}
/* Distanze con il valore in tondo, non in serif grande come sulla home. */
.distance-rows--compact .distance-rows__item { padding-block: 16px; }
.distance-rows--compact .distance-rows__value {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 600;
}
/* Blocco mappa: riquadro con il luogo al centro e "Open in Maps" in basso a
   destra. Un tono più scuro della fascia alternata, come nel render. */
.map-block {
  grid-area: map;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  height: 100%;
  border-radius: var(--radius);
  background: #E4DDD1;
}
.map-block__place {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.map-block__pin { width: 28px; height: 28px; color: var(--color-accent); }
.map-block__pin svg { width: 100%; height: 100%; }
.map-block__link { position: absolute; right: 20px; bottom: 20px; }
@media (max-width: 599px) { .map-block { min-height: 320px; } }

/* ── Domande frequenti ──────────────────────────────────────────────────── */
/* Superficie chiara, filo sopra. Titolo a sinistra, elenco a destra (da
   x 622 su 1440), un filo sopra ogni domanda e sotto l'ultima. */
.villa-faq {
  background: var(--color-bg-card);
  border-top: var(--border-width) solid var(--color-border);
  padding-block: var(--space-section);
}
.villa-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 510fr) minmax(0, 738fr);
  column-gap: var(--grid-gap);
  align-items: start;
}
.villa-faq__title { margin: 0; }
@media (max-width: 1023px) {
  .villa-faq__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
}
.faq-list { margin: 0; border-bottom: var(--border-width) solid var(--color-border); }
.faq-list__item {
  padding-block: 28px 30px;
  border-top: var(--border-width) solid var(--color-border);
}
.faq-list__item dt {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: var(--font-size-faq);
  line-height: 1.3;
}
.faq-list__item dd { margin: 0; color: var(--color-text-secondary); }

/* ── Passi numerati (Retreats "How it works", Press "What the villa offers") */
/* Un filo sopra ogni colonna, il numero in accento sopra il testo. Su
   Retreats tre colonne e numeri grandi; su Press (--grid) due per due e
   numeri più piccoli. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px var(--grid-gap);
}
.steps__item {
  padding-top: 40px;
  border-top: var(--border-width) solid var(--color-border-strong);
}
.steps__num {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: var(--font-size-stat);
  line-height: 1;
  color: var(--color-accent);
}
.steps__item p { margin: 0; }
.steps--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
.steps--grid .steps__item { padding-top: 28px; }
.steps--grid .steps__num { font-size: var(--font-size-faq); margin-bottom: 12px; }
@media (max-width: 767px) {
  .steps,
  .steps--grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .steps__item { padding-top: 28px; }
}

/* ══ Retreats & groups ════════════════════════════════════════════════════ */

/* ── Apertura divisa ────────────────────────────────────────────────────── */
/* Testo a sinistra, allineato al contenitore; foto a destra fino al bordo
   della finestra, dall'intestazione in giù. Sotto i 1024 la foto va sotto
   il testo, a tutta larghezza. */
.split-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(600px, calc(100svh - 100px), 800px);
}
.split-hero__text {
  padding: 112px 64px 96px max(var(--gutter-desktop), calc((100vw - var(--container-max)) / 2));
}
.split-hero__text h1 { margin: 0; }
.split-hero__intro { max-width: 500px; margin: 32px 0 40px; color: var(--color-text-secondary); }
.split-hero__photo { display: block; min-height: 0; }
.split-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.retreats-fork { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); margin: var(--space-lg) 0 0; }
@media (max-width: 1023px) {
  .split-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .split-hero__text { padding: 72px var(--gutter-tablet) 56px; }
  .split-hero__photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) {
  .split-hero__text { padding: 48px var(--gutter) 40px; }
}

/* ── Le tre schede ──────────────────────────────────────────────────────── */
.retreats-formats { padding-block: var(--space-section); }
.retreats-formats__title { margin: 0 0 56px; }
.format-card__photo { display: block; aspect-ratio: 405 / 420; }
.format-card__title { margin: var(--space-md) 0 12px; font-size: var(--font-size-h3); }
.format-card__num {
  margin-right: 6px;
  font-size: var(--font-size-quote);
  color: var(--color-accent);
}
.format-card__text { margin: 0; font-size: var(--font-size-card); line-height: 26px; color: var(--color-text-secondary); }

/* ── How it works ───────────────────────────────────────────────────────── */
.how-it-works {
  background: var(--color-bg-alt);
  padding-block: var(--space-section);
}
.how-it-works__title { margin: 0 0 56px; }
.how-it-works__space { margin-top: var(--space-xl); }

/* ── Numeri e blocco diviso ─────────────────────────────────────────────── */
/* I numeri stanno subito sotto la fascia alternata, come nel render. */
.retreats-stats .stats-band { border-top: 0; }
.retreats-studio { padding-block: var(--space-section); }
.split-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: var(--radius);
  overflow: hidden;
}
.split-panel--no-photo { grid-template-columns: minmax(0, 1fr); }
.split-panel__photo { display: block; min-height: 0; }
.split-panel__photo img { width: 100%; height: 100%; object-fit: cover; }
.split-panel__body {
  padding: 88px 64px 80px;
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}
.split-panel__eyebrow { color: var(--color-accent-on-dark); }
.split-panel__title { margin: 0 0 var(--space-md); font-size: 2.75rem; }
.split-panel__text { margin: 0 0 40px; color: var(--color-text-on-dark-muted); }
@media (max-width: 1023px) {
  .split-panel { grid-template-columns: minmax(0, 1fr); }
  .split-panel__photo { aspect-ratio: 16 / 10; }
  .split-panel__body { padding: 56px 40px; }
  .split-panel__title { font-size: var(--font-size-h2); }
}
@media (max-width: 599px) {
  .split-panel__body { padding: 40px 24px; }
}

/* ── Percorso A (ritiri propri): oggi non compare ────────────────────────── */
/* Senza date né istruttrice resta una riga sola; con i dati, calendario,
   istruttrice e giornata tipo. Stili pronti per quando arrivano. */
.retreats-path { padding-block: var(--space-section); }
.retreats-path h2 { margin-bottom: var(--space-md); }
.retreats-path h3 { margin-top: var(--space-xl); }
.retreats-empty {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  max-width: 60ch;
}
.retreats-empty p { margin: 0; color: var(--color-text-secondary); }
.retreats-instructor p { max-width: 70ch; }

/* "Our Pilates retreats" senza date né istruttrice: una riga, nessun pulsante. */
.retreats-soon { padding-bottom: var(--space-section); text-align: center; }
.retreats-soon p { margin: 0; color: var(--color-text-secondary); }
.retreats-soon__label {
  margin-right: var(--space-sm);
  color: var(--color-accent);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.session-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}
.session-card {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  background: var(--color-bg-card);
}
.session-card__period { font-weight: 600; margin: 0 0 4px; }
.session-card__theme { color: var(--color-text-secondary); margin: 0 0 var(--space-sm); }
.session-card__seats { font-size: var(--font-size-nav); color: var(--color-accent); margin: 0 0 4px; }
.session-card__price { margin: 0 0 var(--space-sm); }
.session-card__price span { color: var(--color-text-secondary); font-size: var(--font-size-nav); }

.day-schedule { list-style: none; margin: 0; padding: 0; }
.day-schedule li {
  padding-block: var(--space-sm);
  border-bottom: var(--border-width) solid var(--color-border);
}
.day-schedule li:first-child { padding-top: 0; }

/* ══ Enquire ══════════════════════════════════════════════════════════════ */
/* Due colonne: a sinistra (520px) titolo, sottotitolo, foto, schede e
   contatti; a destra (629px, da x 731) il modulo nella scheda bianca.
   Sotto i 1024 una colonna sola, e il modulo sale subito dopo il titolo:
   è il motivo per cui si apre questa pagina. Sul telefono la foto sparisce,
   per non spingere il modulo di un'altra schermata. */
.enquire {
  display: grid;
  grid-template-columns: minmax(0, 520fr) minmax(0, 629fr);
  grid-template-areas:
    "intro form"
    "photo form"
    "cards form"
    "contact form";
  grid-template-rows: auto auto auto 1fr;
  column-gap: 131px;
  align-items: start;
  padding-block: 104px var(--space-section);
}
.enquire__intro { grid-area: intro; }
.enquire__intro h1 { margin: 0; }
.enquire__subtitle { margin: var(--space-md) 0 var(--space-lg); color: var(--color-text-secondary); }
.enquire__photo { grid-area: photo; display: block; }
.enquire__photo img { width: 100%; height: auto; aspect-ratio: 520 / 300; object-fit: cover; border-radius: var(--radius); }
.enquire__cards { grid-area: cards; display: grid; gap: 16px; margin-top: var(--space-lg); }
.enquire__contact { grid-area: contact; margin-top: var(--space-xl); }
.enquire__contact-label {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.enquire__form { grid-area: form; }
@media (max-width: 1023px) {
  .enquire {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "photo" "form" "contact" "cards";
    grid-template-rows: none;
    padding-block: 72px var(--space-section);
  }
  .enquire__photo { margin-bottom: var(--space-xl); }
  .enquire__cards { margin-top: var(--space-xl); }
}
@media (max-width: 599px) {
  .enquire { padding-top: 48px; }
  .enquire__photo { display: none; }
}

.book-card {
  padding: 28px 28px 24px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-card);
}
.book-card__title { margin: 0 0 8px; font-size: 1.625rem; }
.book-card__text { margin: 0 0 12px; font-size: var(--font-size-card); line-height: 26px; color: var(--color-text-secondary); }

.contact-pill__icon { display: inline-flex; width: 18px; height: 18px; }
.contact-pill__icon svg { width: 100%; height: 100%; }

/* ── Il modulo ──────────────────────────────────────────────────────────── */
.enquire__form {
  padding: 58px 56px 52px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-white);
}
.enquire__form-title { margin: 0 0 32px; font-size: var(--font-size-send); }
@media (max-width: 1023px) { .enquire__form { padding: 40px 32px; } }
@media (max-width: 599px) { .enquire__form { padding: 32px 20px; } }

/* Due campi per riga; nome ed email, telefono e ospiti, arrivo e partenza.
   Tipo di soggiorno, messaggio, privacy e invio a tutta larghezza. Una
   colonna sola sotto i 600px. minmax(0, 1fr): senza, la larghezza minima
   dei campi data (Chrome ~150px più l'icona) allarga la colonna. */
.enquiry-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  text-align: left;
}
.form-row--full { grid-column: 1 / -1; }
@media (max-width: 599px) { .enquiry-form { grid-template-columns: minmax(0, 1fr); } }
.form-row { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; }
.form-row label,
.type-choice legend {
  font-size: var(--font-size-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.form-hint { text-transform: none; letter-spacing: normal; color: var(--color-text-secondary); font-weight: 400; }

/* Campi a 16px, sempre: sotto, iPhone ingrandisce la pagina quando si
   tocca un campo (RIFINITURE.md, "Verificato e a posto"). Il testo
   corrente del sito è a 17, quindi la misura qui è scritta a mano. */
.form-row input,
.form-row textarea {
  font: inherit;
  font-size: 1rem;
  padding: 0 16px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
}
.form-row input:focus-visible,
.form-row textarea:focus-visible { border-color: var(--color-accent); }
.form-row textarea { min-height: 140px; padding-block: 14px; line-height: 1.5; resize: vertical; }
/* Stessa altezza per tutti i campi di una riga, fissata e non lasciata al
   browser: i controlli nativi variano da un motore all'altro (misurato:
   date 43px in Chromium contro 41 dei campi di testo). 52 = riga da 24px +
   13 + 13 di spaziatura + i due fili. */
.form-row input:not([type="checkbox"]):not([type="radio"]) {
  height: 52px;
  line-height: 24px;
}
/* Nota sulla capienza: SOTTO il campo, collegata con aria-describedby. */
.form-note {
  margin: 0;
  font-size: var(--font-size-nav);
  color: var(--color-text-secondary);
}

/* Campi data: min-width: 0 li lascia restringere dentro la colonna;
   min-height evita che Safari iOS li schiacci a zero quando sono vuoti; il
   valore resta allineato a sinistra come negli altri campi (iOS lo centra). */
.form-row input[type="date"] {
  min-width: 0;
  width: 100%;
  min-height: 52px;
  -webkit-appearance: none;
  appearance: none;
}
.form-row input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.form-row input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}
.form-row input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Vuoto, il campo data mostra la maschera gg/mm/aaaa nel colore del testo e
   sembra già compilato: la classe is-empty (book-form.js) la porta al grigio
   dei placeholder degli altri campi. */
.form-row input[type="date"].is-empty { color: var(--color-text-secondary); }

/* Tipo di soggiorno: pillole con il pallino a sinistra, la scelta scura
   piena. Radio veri dentro un fieldset; il pallino è il radio stesso,
   ridisegnato. */
.type-choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.type-choice legend { padding: 0; margin-bottom: 12px; }
/* Colonne dichiarate, non a capo libero: con quattro pillole il flex-wrap ne
   lasciava una sola sull'ultima riga a 1024, 768 e 375 px. Due colonne
   larghe quanto la pillola più lunga di ciascuna, solo se il riquadro le
   contiene (servono 475 px in inglese, 486 in francese: la soglia è 500);
   sotto, una colonna. Con cinque pillole (quando compare "own-retreat")
   sempre una colonna: in due ne resterebbe una sola in fondo, e tre non
   ci stanno. Se le etichette cambiano, va rimisurata la soglia. */
.type-choice { container-type: inline-size; }
.type-choice__options {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  justify-items: start;
  gap: 10px;
}
@container (min-width: 500px) {
  .type-choice__options:not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(2, minmax(0, max-content));
  }
}
.type-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px 0 18px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-pill);
  line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.type-pill:hover { border-color: var(--color-border-strong); }
.type-pill input {
  flex: none;
  width: 12px;
  height: 12px;
  margin: 0;
  border: var(--border-width) solid currentColor;
  border-radius: 50%;
  color: inherit; /* gli input non ereditano il colore da soli */
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.type-pill input:checked { background: currentColor; }
.type-pill:has(input:checked) {
  background: var(--color-bg-dark);
  border-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}
/* Il fuoco da tastiera si vede sulla pillola intera, non sul pallino. */
.type-pill input:focus-visible { outline: none; }
.type-pill:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Casella del consenso: nativa, ingrandita a 20px, nel colore scuro. Il
   bersaglio è anche l'etichetta intera, cliccabile. */
.consent__row { display: flex; align-items: flex-start; gap: 12px; }
/* Il messaggio d'errore: testo scritto, con un filo a sinistra nel colore
   scuro dell'accento; non è il colore a dirlo, è la frase. */
.consent__error {
  margin: 10px 0 0 32px;
  padding-left: 12px;
  border-left: 3px solid var(--color-accent);
  font-size: var(--font-size-nav);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-primary);
}
.consent__error[hidden] { display: none; }
.consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--color-bg-dark);
  cursor: pointer;
}
.consent label { font-size: var(--font-size-nav); line-height: 1.5; cursor: pointer; }
.consent a { color: var(--color-text-primary); text-decoration: underline; text-decoration-color: currentColor; }

.enquiry-form__submit { margin: 0; }

.enquire__deposit {
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-nav);
  color: var(--color-text-secondary);
}

/* Honeypot: fuori dallo schermo e dall'albero di accessibilità (anche
   aria-hidden sul wrapper in HTML) — mai display:none, alcuni spambot lo
   individuano e lo saltano apposta. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══ Press & brands ═══════════════════════════════════════════════════════ */
/* Grande foto a tutta larghezza del contenitore, nelle proporzioni del
   render (1280 × 680). */
.press-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 680;
  object-fit: cover;
  border-radius: var(--radius);
}
@media (max-width: 599px) { .press-photo img { aspect-ratio: 4 / 3; } }

/* Titolo a sinistra, i quattro punti due per due a destra (da x 622). */
.press-offer {
  display: grid;
  grid-template-columns: minmax(0, 510fr) minmax(0, 738fr);
  column-gap: var(--grid-gap);
  align-items: start;
  padding-block: var(--space-section);
}
.press-offer__title { margin: 0; }
@media (max-width: 1023px) {
  .press-offer { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
}

/* Quattro foto verticali, didascalia maiuscola sotto. Due per riga sul
   telefono. */
.press-gallery { padding-bottom: var(--space-section); }
.press-gallery__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 767px) { .press-gallery__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-lg); } }
.press-gallery__item figure { margin: 0; }
.press-gallery__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 308 / 420;
  object-fit: cover;
  border-radius: var(--radius);
}
.press-gallery__caption {
  margin-top: 16px;
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-label);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Loghi della stampa: oggi nascosti (press.showLogos), pronti per quando
   ci saranno. */
.press-logos-section { padding-bottom: var(--space-section); }
.press-logos {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
}
.press-logos li {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-secondary);
}

/* ══ Thank you ════════════════════════════════════════════════════════════ */
.thanks-page {
  padding-block: var(--space-3xl);
  text-align: center;
  min-height: 40vh;
}
.thanks-page__text { max-width: 55ch; margin-inline: auto; color: var(--color-text-secondary); }
.thanks-page__links { justify-content: center; margin-top: var(--space-lg); }

/* ══ Legal notice ═════════════════════════════════════════════════════════ */
.legal-page { padding-block: var(--space-3xl); max-width: 70ch; }
.legal-section { margin-top: var(--space-xl); }
.legal-section h2 { font-size: 1.5rem; margin-bottom: var(--space-xs); }
.legal-section p { color: var(--color-text-secondary); margin: 0 0 4px; }
.legal-section__code { overflow-wrap: anywhere; }