/* ==========================================================================
   BASE.CSS — Design system condiviso
   Usato identico da imarehouse.it e dominohouse.it.
   I colori e i dettagli di brand arrivano da theme.css (caricato DOPO).
   Non inserire qui nulla di specifico di un singolo brand.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Scala tipografica fluida — min su mobile 360px, max su desktop 1440px */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-lg: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.75rem);
  --fs-2xl: clamp(2.25rem, 1.7rem + 2.7vw, 4rem);
  --fs-3xl: clamp(2.75rem, 1.9rem + 4.2vw, 5.5rem);

  /* Spaziatura — scala 4px */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Ritmo verticale delle sezioni */
  --section-y: clamp(4rem, 3rem + 5vw, 8rem);

  /* Larghezze */
  --w-container: 78rem;
  --w-narrow: 46rem;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

  /* Raggi */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Ombre — calde, mai grigio neutro */
  --shadow-sm: 0 1px 2px rgb(40 32 24 / 6%), 0 2px 6px rgb(40 32 24 / 4%);
  --shadow-md: 0 4px 12px rgb(40 32 24 / 8%), 0 12px 32px rgb(40 32 24 / 6%);
  --shadow-lg: 0 8px 24px rgb(40 32 24 / 10%), 0 24px 64px rgb(40 32 24 / 10%);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 640ms;

  /* Altezza header sticky — usata per scroll-margin e offset hero */
  --header-h: 4.5rem;

}

@media (min-width: 60rem) {
  :root {
    --header-h: 5.5rem;
  }
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

img {
  height: auto;
  /* Evita il "flash" bianco mentre la foto carica */
  background-color: var(--c-surface-2);
}

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

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--c-text-strong);
  scroll-margin-top: calc(var(--header-h) + var(--sp-6));
}

h1 {
  font-size: var(--fs-3xl);
}

h2 {
  font-size: var(--fs-2xl);
}

h3 {
  font-size: var(--fs-lg);
  line-height: 1.2;
}

h4 {
  font-size: var(--fs-md);
  line-height: 1.3;
}

p {
  text-wrap: pretty;
}

/* Occhiello sopra i titoli di sezione */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
}

.lead {
  font-size: var(--fs-md);
  color: var(--c-text-muted);
  max-width: 42ch;
}

.muted {
  color: var(--c-text-muted);
}

/* Filetto decorativo sotto i titoli */
.rule {
  width: 3rem;
  height: 1px;
  background: var(--c-accent);
  border: 0;
  margin: var(--sp-5) 0;
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Le ancore del menu non devono finire sotto l'header fisso */
section[id],
[id]:not(body) {
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}

.section--tint {
  background: var(--c-surface);
}

.section__head {
  max-width: var(--w-narrow);
  margin-bottom: var(--sp-7);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head--center .rule {
  margin-inline: auto;
}

.section__head--center .lead {
  margin-inline: auto;
}

.stack > * + * {
  margin-top: var(--sp-4);
}

/* --------------------------------------------------------------------------
   5. ACCESSIBILITÀ
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-text-strong);
  color: var(--c-bg);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. BOTTONI
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.875rem 1.75rem;
  min-height: 3rem;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  text-wrap: balance;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--c-accent);
  color: var(--c-accent-contrast);
  border: 1px solid var(--c-accent);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--c-accent-strong);
  border-color: var(--c-accent-strong);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  color: var(--c-text-strong);
  border: 1px solid var(--c-border-strong);
}

.btn--outline:hover {
  background: var(--c-text-strong);
  color: var(--c-bg);
  border-color: var(--c-text-strong);
}

/* Variante da usare sopra le foto */
.btn--ghost-light {
  background: rgb(255 255 255 / 12%);
  color: #fff;
  border: 1px solid rgb(255 255 255 / 55%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn--ghost-light:hover {
  background: #fff;
  color: var(--c-text-strong);
  border-color: #fff;
}

.btn--sm {
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem;
  font-size: var(--fs-xs);
}

.btn--block {
  width: 100%;
}

/* Link testuale con freccia */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-accent);
  padding-block: var(--sp-1);
  transition: color var(--dur-fast) var(--ease);
}

.link-arrow:hover {
  color: var(--c-accent-strong);
}

/* La freccia scorre con transform, non animando `gap`: `gap` è una proprietà
   di layout e forzerebbe un reflow a ogni frame. */
.link-arrow svg {
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  /* La barra deve CRESCERE della notch, non comprimere il proprio contenuto:
     con box-sizing: border-box un padding-top ruberebbe altezza utile. */
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  /* In orizzontale su iPhone la notch invade il lato: il gutter del container
     da solo non basta. */
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  transition:
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

/* Stato iniziale: trasparente sopra la hero */
.header:not(.is-stuck):not(.is-open) {
  background: linear-gradient(to bottom, rgb(0 0 0 / 28%), transparent);
}

.header:not(.is-stuck):not(.is-open) .header__inner {
  color: #fff;
}

/* Sopra la hero il logo deve restare tutto bianco: l'accento di brand è
   troppo scuro per leggersi sulla foto. Torna colorato quando l'header
   diventa opaco. */
.header:not(.is-stuck):not(.is-open) .brand-accent {
  color: inherit;
}

.header.is-stuck,
.header.is-open {
  background: var(--c-bg);
  border-bottom-color: var(--c-border);
  box-shadow: var(--shadow-sm);
  color: var(--c-text-strong);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
}

.header__brand {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}

.header__brand-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.header__brand-tag {
  font-size: 0.5625rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Navigazione desktop */
.nav {
  display: none;
}

@media (min-width: 62rem) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
  }
}

.nav__link {
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  padding-block: var(--sp-2);
}

.nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

.nav__link:hover::after,
.nav__link[aria-current="true"]::after {
  transform: scaleX(1);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Selettore di lingua IT | EN */
.lang {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

.lang__opt {
  padding: var(--sp-2) var(--sp-1);
  text-decoration: none;
  opacity: 0.65;
  transition: opacity var(--dur-fast) var(--ease);
}

.lang__opt:hover {
  opacity: 1;
}

.lang__opt.is-current {
  opacity: 1;
  font-weight: 600;
}

.lang__sep {
  width: 1px;
  height: 0.75em;
  background: currentColor;
  opacity: 0.3;
}

.header__cta {
  display: none;
}

@media (min-width: 48rem) {
  .header__cta {
    display: inline-flex;
  }
}

/* Bottone hamburger */
.burger {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-full);
  flex-shrink: 0;
}

@media (min-width: 62rem) {
  .burger {
    display: none;
  }
}

.burger__box {
  display: grid;
  gap: 5px;
  width: 20px;
}

.burger__bar {
  height: 1.5px;
  width: 100%;
  background: currentColor;
  border-radius: var(--r-full);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease);
}

.header.is-open .burger__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.header.is-open .burger__bar:nth-child(2) {
  opacity: 0;
}

.header.is-open .burger__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Menu mobile */
.mobile-nav {
  position: fixed;
  /* Deve partire sotto l'header comprensivo di notch */
  inset: calc(var(--header-h) + env(safe-area-inset-top)) 0 auto;
  z-index: 99;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5) 0 calc(var(--sp-6) + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top));
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease-out),
    visibility 0s linear var(--dur);
}

.mobile-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

@media (min-width: 62rem) {
  .mobile-nav {
    display: none;
  }
}

.mobile-nav__link {
  display: block;
  padding: var(--sp-3) 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  text-decoration: none;
  color: var(--c-text-strong);
  border-bottom: 1px solid var(--c-border);
  transition: color var(--dur-fast) var(--ease);
}

.mobile-nav__link:hover {
  color: var(--c-accent);
}

.mobile-nav .btn {
  margin-top: var(--sp-5);
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  padding-top: calc(var(--header-h) + var(--sp-5));
  padding-bottom: var(--sp-6);
  isolation: isolate;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Tre veli sovrapposti. Quello orizzontale da sinistra è il più importante:
   tiene leggibile il testo anche sulle foto chiare (es. la hero di Domino)
   senza dover scurire tutta l'immagine. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgb(28 22 18 / 68%) 0%, rgb(28 22 18 / 38%) 38%, transparent 68%),
    linear-gradient(to top, rgb(28 22 18 / 72%) 0%, rgb(28 22 18 / 22%) 48%, transparent 72%),
    linear-gradient(to bottom, rgb(28 22 18 / 38%) 0%, transparent 28%);
}

/* Sulle viewport strette il testo occupa tutta la larghezza:
   lì serve un velo pieno, non direzionale. */
@media (max-width: 47.99rem) {
  .hero__media::after {
    background:
      linear-gradient(to top, rgb(28 22 18 / 78%) 0%, rgb(28 22 18 / 45%) 55%, rgb(28 22 18 / 25%) 100%),
      linear-gradient(to bottom, rgb(28 22 18 / 40%) 0%, transparent 28%);
  }
}

/* La hero è divisa in due fasce verticali: il testo in alto, il form di
   prenotazione in basso. justify-content: space-between le tiene agli
   estremi, così il form è sempre appoggiato al fondo del primo schermo. */
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
}

.hero__content {
  max-width: 34rem;
}

.hero__booking {
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
}

.hero__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 92%);
  margin-bottom: var(--sp-4);
  text-shadow: 0 1px 10px rgb(28 22 18 / 55%);
}

/* Nella hero il titolo è più contenuto del display globale: deve convivere
   con il form nello stesso schermo. */
.hero h1 {
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.4rem);
  color: #fff;
  text-shadow: 0 2px 24px rgb(28 22 18 / 35%);
}

.hero__sub {
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  color: rgb(255 255 255 / 88%);
  max-width: 34ch;
  text-shadow: 0 1px 12px rgb(28 22 18 / 35%);
}

/* Riga di bottoni. `.actions` è quella generica, riusabile ovunque;
   `.hero__actions` esiste solo dentro la hero — non usarla altrove,
   serve a poterla selezionare senza ambiguità. */
.actions,
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* Con il form appoggiato al fondo della hero non c'è più spazio per
   l'indicatore di scroll: resta nascosto. */
.hero__scroll {
  display: none;
}

/* Schermi bassi (laptop poco alti, telefoni corti, mobile in orizzontale):
   il form deve restare visibile per intero, quindi si sacrifica il testo —
   titolo più piccolo, sottotitolo e bottone secondario nascosti, meno respiro.
   Soglia a 50rem (800px) per coprire anche i telefoni sui 780px di altezza. */
@media (max-height: 50rem) {
  .hero {
    padding-top: calc(var(--header-h) + var(--sp-3));
  }

  .hero h1 {
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  }

  .hero__sub,
  .hero .hero__actions {
    display: none;
  }

  .hero__eyebrow {
    margin-bottom: var(--sp-2);
  }
}

/* --------------------------------------------------------------------------
   9. WIDGET PRENOTAZIONE (Smoobu)
   -------------------------------------------------------------------------- */

/* La card vive dentro la hero (.hero__booking). Ha sfondo proprio, così
   resta leggibile sopra la foto. */
.booking__card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1rem, 0.7rem + 1.4vw, 2rem);
}

.booking__title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-3);
  text-align: center;
}

/* Contenitore dell'iframe Smoobu.
   --smoobu-h è lo spazio RISERVATO prima che il widget carichi: serve a non
   far saltare il layout. Sono le altezze reali misurate sul motore Smoobu
   (form a colonna su mobile, in riga da tablet in su). Se il widget cambia
   e viene tagliato, alza questi valori: l'iframe può crescere oltre il
   min-height, non restringersi sotto. */
.booking__widget {
  /* Altezza a cui Smoobu ridimensiona il proprio iframe da collassato:
     ~206px sotto i 62rem, ~99px sopra. Riserviamo esattamente quella, così
     non resta bianco morto sotto il form. È solo un pavimento: se Smoobu
     cresce (calendario aperto, risultati) l'iframe supera il min-height. */
  --smoobu-h: 13.5rem;
  min-height: var(--smoobu-h);
}

@media (min-width: 62rem) {
  .booking__widget {
    --smoobu-h: 6.75rem;
  }
}

/* Il form Smoobu inietta un <iframe> dentro .booking__widget. Forziamo
   larghezza piena e max-width: 100% così non sfora mai in orizzontale,
   qualunque larghezza fissa provi a imporre lo script. */
.booking__widget,
.booking__widget iframe {
  max-width: 100%;
}

.booking__widget iframe {
  display: block;
  width: 100%;
  min-height: var(--smoobu-h);
  border: 0;
}

/* Smoobu assegna all'iframe una larghezza fissa (1000px) via style inline,
   che vince persino sul selettore per id: serve !important per riportarlo a
   piena larghezza del contenitore. */
#booking-tool-iFrame-allApartments {
  width: 100% !important;
  max-width: 100% !important;
}

/* Placeholder visibile finché l'iframe non è stato incollato.
   Si nasconde da solo quando dentro .booking__widget c'è un <iframe>. */
.booking__placeholder {
  display: grid;
  place-content: center;
  gap: var(--sp-3);
  text-align: center;
  min-height: var(--smoobu-h);
  padding: var(--sp-6) var(--sp-4);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.booking__widget:has(iframe) .booking__placeholder {
  display: none;
}

/* --------------------------------------------------------------------------
   10. GRIGLIE E MEDIA
   -------------------------------------------------------------------------- */

/* Blocco testo + immagine affiancati */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--reverse .split__media {
    order: -1;
  }
}

.split__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Riquadro statistiche sotto il testo della struttura */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}

.facts__value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

.facts__label {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* --------------------------------------------------------------------------
   11. CARD CAMERE
   -------------------------------------------------------------------------- */

/* Con 4 camere una griglia a 3 colonne lascia una card orfana:
   restiamo su 2 colonne, che rendono anche le foto più grandi. */
.rooms {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: 1fr;
}

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

.room {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}

.room:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.room__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.room__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.room:hover .room__media img {
  transform: scale(1.045);
}

/* Velo elegante in basso sulla foto, per far respirare il badge */
.room__media::after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(to top, rgb(28 22 18 / 42%), transparent);
  pointer-events: none;
}

.room__badge {
  position: absolute;
  z-index: 1;
  top: var(--sp-4);
  left: var(--sp-4);
  padding: 0.375rem 0.875rem;
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 92%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-strong);
}

.room__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-5);
}

.room__name {
  margin-bottom: var(--sp-3);
}

.room__desc {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-5);
}

/* Riga dei dati essenziali: ospiti, letto, superficie… */
.room__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  padding-top: var(--sp-4);
  margin-top: auto;
  border-top: 1px solid var(--c-border);
}

.room__spec {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.room__spec svg {
  flex-shrink: 0;
  color: var(--c-accent);
}

.room__spec span {
  min-width: 0;
  overflow-wrap: break-word;
}

.room__spec b {
  font-weight: 600;
  color: var(--c-text-strong);
  font-variant-numeric: tabular-nums;
}

.room__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-5);
  margin-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}

/* Elenco dotazioni dentro la card */
.room__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

/* Niente `white-space: nowrap`: una dotazione dal nome lungo deve andare
   a capo dentro la card, non sfondarla. */
.chip {
  max-width: 100%;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-full);
  background: var(--c-surface-2);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   12. SERVIZI
   -------------------------------------------------------------------------- */

/* 6 servizi: 3 colonne su desktop danno due righe piene, 4 ne lascerebbero
   due orfane sulla seconda riga. */
.amenities {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: 1fr;
}

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

@media (min-width: 62rem) {
  .amenities {
    grid-template-columns: repeat(3, 1fr);
  }
}

.amenity {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}

.amenity:hover {
  border-color: var(--c-accent);
  transform: translateY(-3px);
}

.amenity__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-full);
  background: var(--c-surface-2);
  color: var(--c-accent);
}

.amenity__title {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-text-strong);
}

.amenity__text {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* Elenco secondario, in due colonne su desktop */
.amenities-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}

.amenities-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.amenities-list svg {
  flex-shrink: 0;
  margin-top: 0.35em;
  color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   13. POSIZIONE
   -------------------------------------------------------------------------- */

.places {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.place {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}

.place__name {
  min-width: 0;
  font-size: var(--fs-base);
  color: var(--c-text-strong);
}

/* Puntini di guida tra nome e distanza */
.place__dots {
  flex: 1;
  height: 1px;
  margin-bottom: 0.35em;
  border-bottom: 1px dotted var(--c-border-strong);
}

.place__dist {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--c-accent);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   14. GALLERY
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 48rem) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
  }
}

@media (min-width: 75rem) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 1 / 1;
  background: var(--c-surface-2);
}

/* Alcune celle diventano verticali per rompere la griglia */
.gallery__item--tall {
  aspect-ratio: 1 / 1;
}

@media (min-width: 48rem) {
  .gallery__item--tall {
    grid-row: span 2;
    aspect-ratio: auto;
  }
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur) var(--ease);
}

.gallery__item:hover img {
  transform: scale(1.06);
  filter: brightness(0.92);
}

/* --------------------------------------------------------------------------
   15. LIGHTBOX
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgb(20 16 13 / 96%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.lightbox.is-open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter);
  color: rgb(255 255 255 / 80%);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 var(--gutter) var(--sp-6);
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-md);
}

.lightbox__btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 10%);
  color: #fff;
  transition: background-color var(--dur-fast) var(--ease);
}

.lightbox__btn:hover {
  background: rgb(255 255 255 / 22%);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.lightbox__nav--prev {
  left: var(--sp-2);
}

.lightbox__nav--next {
  right: var(--sp-2);
}

@media (min-width: 62rem) {
  .lightbox__nav--prev {
    left: var(--sp-5);
  }

  .lightbox__nav--next {
    right: var(--sp-5);
  }
}

/* --------------------------------------------------------------------------
   16. CONTATTI
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
}

@media (min-width: 62rem) {
  .contact {
    grid-template-columns: 1fr 1fr;
  }
}

.contact__list {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.contact__row {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.contact__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-full);
  background: var(--c-surface-2);
  color: var(--c-accent);
}

.contact__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-1);
}

.contact__value {
  min-width: 0;
  font-size: var(--fs-md);
  color: var(--c-text-strong);
  text-decoration: none;
  overflow-wrap: break-word;
  transition: color var(--dur-fast) var(--ease);
}

a.contact__value:hover {
  color: var(--c-accent);
}

/* Nei contatti la foto affianca una colonna di testo più alta: la lasciamo
   riempire tutta l'altezza invece di lasciare un vuoto sotto. */
@media (min-width: 62rem) {
  .contact .split__media img {
    height: 100%;
    min-height: 26rem;
    aspect-ratio: auto;
  }
}

.map-embed {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  min-height: 22rem;
  height: 100%;
  background: var(--c-surface-2);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 22rem;
  border: 0;
  filter: saturate(0.85);
}

/* --------------------------------------------------------------------------
   17. CTA FINALE
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.cta__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(28 22 18 / 62%);
}

.cta h2 {
  color: #fff;
}

.cta__text {
  margin: var(--sp-4) auto 0;
  max-width: 44ch;
  color: rgb(255 255 255 / 88%);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  background: var(--c-footer-bg);
  color: var(--c-footer-text);
  padding-top: var(--sp-8);
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
}

.footer__grid {
  display: grid;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--c-footer-border);
}

@media (min-width: 48rem) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.footer__brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-footer-strong);
}

.footer__brand-tag {
  margin-top: var(--sp-1);
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.7;
}

.footer__text {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  max-width: 34ch;
  opacity: 0.8;
}

.footer__title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-footer-strong);
  margin-bottom: var(--sp-4);
}

.footer__list {
  display: grid;
  gap: var(--sp-3);
}

.footer__list a {
  font-size: var(--fs-sm);
  text-decoration: none;
  opacity: 0.8;
  overflow-wrap: break-word;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.footer__list a:hover {
  opacity: 1;
  color: var(--c-footer-strong);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  font-size: var(--fs-xs);
  /* 0.65 faceva scendere il testo sotto 4.5:1 sul fondo scuro del footer */
  opacity: 0.8;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.footer__legal a {
  text-decoration: none;
}

.footer__legal a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   19. ANIMAZIONI DI INGRESSO
   -------------------------------------------------------------------------- */

/* Applicato via JS (IntersectionObserver). Se JS non parte, .reveal resta
   invisibile: per questo la classe viene aggiunta a <html> solo con JS attivo. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Ritardi a cascata per gruppi di card */
.js .reveal[data-delay="1"] { transition-delay: 80ms; }
.js .reveal[data-delay="2"] { transition-delay: 160ms; }
.js .reveal[data-delay="3"] { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .btn:hover,
  .room:hover,
  .amenity:hover {
    transform: none;
  }

  .room:hover .room__media img,
  .gallery__item:hover img {
    transform: none;
  }
}

/* Blocca lo scroll del body quando menu o lightbox sono aperti.
   `overflow: hidden` da solo NON basta su iOS Safari: serve position: fixed,
   con l'offset di scroll conservato da site.js in --scroll-lock-y e
   ripristinato alla chiusura. */
.is-locked {
  position: fixed;
  top: calc(var(--scroll-lock-y, 0px) * -1);
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}