/* ═══════════════════════════════════════════════════════════════
   TRULLO PICCHIAGIUDA — DESIGN SYSTEM
   Direzione A · Quiet Luxury Mediterranea
   "Il lusso che non si vede. Si sente."
   Fedele alla creative direction: zero nero, materia, silenzio.
═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  /* ─ PALETTE — Direzione A, zero nero puro ─ */
  /* Bianchi e avori */
  --ivory:        #FAF7F1;
  --ivory-warm:   #F5F0E8;
  --ivory-deep:   #EEE7DA;

  /* Lini e sabbie */
  --linen:        #E8DFD0;
  --linen-mid:    #DDD3C2;
  --sand:         #CEC0A9;

  /* Pietre */
  --stone:        #B8A890;
  --stone-deep:   #9E8E78;

  /* Terra e ambra — colore di struttura/CTA */
  --terra:        #9A7052;
  --terra-warm:   #B88A62;
  --terra-deep:   #7E5A40;
  --amber:        #C8A070;

  /* Verde ulivo — colore firma, usato con parsimonia */
  --olive:        #6E7E54;
  --olive-mid:    #8A9B68;
  --olive-light:  #A8B882;
  --olive-pale:   #D0D9BC;
  --olive-wash:   #E8EDD8;

  /* Toni caldi per testi — mai nero puro */
  --ink:          #4A3E32;
  --ink-mid:      #6A5C4E;
  --ink-soft:     #8A7A6A;
  --ink-ghost:    #B0A090;

  /* ─ COLOR SYSTEM SEMANTICO ─
     Alias sul sopra: i componenti usano questi nomi, cosi' un
     ri-tinteggio della palette (in alto) si propaga ovunque senza
     toccare i singoli componenti. */
  --color-bg:          var(--ivory);
  --color-bg-soft:     var(--ivory-warm);
  --color-bg-deep:     var(--ivory-deep);
  --color-surface:     var(--ivory);
  --color-border:      var(--linen);
  --color-border-mid:  var(--linen-mid);
  --color-text:        var(--ink);
  --color-text-mid:    var(--ink-mid);
  --color-text-muted:  var(--ink-soft);
  --color-text-ghost:  var(--ink-ghost);
  --color-primary:     var(--terra);
  --color-primary-deep:var(--terra-deep);
  --color-accent:      var(--olive);

  /* ─ TIPOGRAFIA ─ */
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Jost', sans-serif;

  /* Scala tipografica responsive — clamp(min, preferito, max) */
  --text-xs:      clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem);   /* 11–12px  — microcopy, tag */
  --text-sm:      clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);  /* 12–13px  — label, eyebrow */
  --text-base:    clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);  /* 14–15px  — body */
  --text-lg:      clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);     /* 16–17px  — lede */
  --text-xl:      clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);       /* 20–24px  — h3 */
  --text-2xl:     clamp(1.5rem, 1.2rem + 1.4vw, 2rem);          /* 24–32px  — quote, sub */
  --text-3xl:     clamp(2.125rem, 1.6rem + 2.6vw, 3.625rem);    /* 34–58px  — h2 */
  --text-4xl:     clamp(3.25rem, 2.2rem + 5vw, 6.75rem);        /* 52–108px — hero title */
  --text-display: clamp(2rem, 1.5rem + 2.4vw, 3.375rem);        /* 32–54px  — display statement */

  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;
  --leading-loose:   1.9;

  --tracking-tight:  -0.5px;
  --tracking-normal: 0;
  --tracking-wide:   1.5px;
  --tracking-wider:  2.5px;
  --tracking-widest: 4px;

  /* ─ SPACING SYSTEM — scala 4px, usata per padding/margin/gap ─ */
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1.25rem;  /* 20px */
  --space-5:  1.75rem;  /* 28px */
  --space-6:  2.5rem;   /* 40px */
  --space-7:  3.5rem;   /* 56px */
  --space-8:  5.5rem;   /* 88px */

  /* ─ RITMO / LAYOUT ─ */
  --section-pad: clamp(44px, 4.6vw, 72px);
  --container-w: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --grid-gap-hairline: 2px; /* il gap "a filo" tra le card della griglia editoriale */

  /* ─ MOVIMENTO ─ */
  --ease: cubic-bezier(.16,.84,.44,1);
  --dur: 0.7s;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; border: none; background: none; cursor: pointer; }
input, select { font: inherit; }

body {
  font-family: var(--font-body) !important; /* difende il carattere firma del sito da CSS residui di temi/plugin precedenti */
  font-weight: 300;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Eredita esplicitamente il font del body su tutti gli elementi di testo
   generici: alcuni temi/plugin precedenti impostano font-family diretto
   su button/input/select, che altrimenti non erediterebbero da body. */
button, input, select, textarea, a, p, li, span, div {
  font-family: inherit;
}

/* Focus visibile — accessibilità, mai rimosso */
:focus-visible {
  outline: 1.5px solid var(--color-primary);
  outline-offset: 3px;
}

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

/* ── UTILITY LAYOUT ── */
.container { max-width: var(--container-w); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--olive-mid);
  opacity: 0.35;
  max-width: 160px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display) !important; /* stesso motivo: il contrasto Cormorant/Jost è l'identità tipografica del sito */
  font-weight: 300;
  color: var(--color-text);
}

h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
}
h2 em, h1 em { font-style: italic; color: var(--color-primary); }

h3 { font-size: var(--text-xl); font-weight: 400; line-height: var(--leading-snug); margin-bottom: var(--space-2); }

p { color: var(--color-text-mid); max-width: 620px; font-size: var(--text-base); line-height: var(--leading-relaxed); }
.lede { font-size: var(--text-lg); color: var(--color-text-mid); }

.section { padding: var(--section-pad) 0; }
.section--ivory   { background: var(--color-bg); }
.section--warm    { background: var(--color-bg-soft); }
.section--olive   { background: var(--olive-wash); }

/* ── IMMAGINI ──
   Ogni contenitore immagine ha aspect-ratio fisso e le immagini usano
   object-fit: cover, quindi caricare una foto verticale o orizzontale
   dalla Media Library non altera mai il layout. Il centro dell'immagine
   è il punto tenuto in vista di default. */
img { object-position: center; }

/* Fallback quando un'immagine non è ancora stata scelta: superficie
   neutra del tema, leggermente desaturata per non competere con le
   fotografie reali una volta caricate. */
.tp-image-placeholder { opacity: 0.9; }

.skip-link {
  position: absolute; left: -9999px; top: auto;
  background: var(--terra); color: var(--ivory); padding: 12px 20px;
  z-index: 999; font-size: 13px; letter-spacing: 1px;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ── SCROLL REVEAL ──
   Fail-safe: il contenuto è VISIBILE di default. L'opacità iniziale a zero
   si applica solo se JavaScript è attivo (classe .tp-js aggiunta in
   header.php prima del disegno della pagina). Cosi' un errore dello script
   non può lasciare intere sezioni invisibili ma ingombranti — che è ciò che
   fa apparire la pagina vuota e lunghissima. */
.reveal { opacity: 1; transform: none; }
.tp-js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.tp-js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ── BUTTONS / CTA ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 16px 34px;
  border: 1px solid transparent;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
  position: relative;
}
.btn-primary {
  background: var(--terra);
  color: var(--ivory);
}
.btn-primary:hover { background: var(--terra-deep); transform: translateY(-1px); }

.btn-ghost {
  color: var(--ivory);
  border-color: rgba(250,247,241,0.5);
}
.btn-ghost:hover { border-color: var(--ivory); background: rgba(250,247,241,0.08); }

/* magnetic hover wrapper */
.magnetic { transition: transform .35s var(--ease); will-change: transform; }
/* ═══════════════════════════════════════════════
   HEADER / NAV
═══════════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(250,247,241,0.92);
  backdrop-filter: blur(10px);
  padding: 14px var(--gutter);
  border-color: var(--linen);
}

.brand { display: flex; align-items: flex-end; gap: 14px; }
.brand-mark { flex-shrink: 0; }
.brand-name {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--ivory);
  transition: color .5s var(--ease);
  line-height: 1.1;
}
.is-scrolled .brand-name, .site-header--solid .brand-name { color: var(--ink); }
.brand-name em { font-style: italic; color: var(--terra-warm); }
.brand-place {
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(250,247,241,0.7);
  transition: color .5s var(--ease);
}
.is-scrolled .brand-place, .site-header--solid .brand-place { color: var(--stone-deep); }

.primary-nav ul { display: flex; gap: 40px; }
.primary-nav a {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(250,247,241,0.85);
  transition: color .5s var(--ease), opacity .3s;
  position: relative;
  padding-bottom: 4px;
}
.is-scrolled .primary-nav a, .site-header--solid .primary-nav a { color: var(--ink-mid); }
.primary-nav a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: currentColor;
  transition: width .35s var(--ease);
}
.primary-nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 20px; }

.header-cta {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--terra);
  padding: 11px 24px;
  transition: background .35s var(--ease);
}
.header-cta:hover { background: var(--terra-deep); }

/* Bug reale corretto: questo CTA è pensato SOLO per il menu mobile a
   schermo intero (vedi .primary-nav.mobile-open più sotto). Senza questa
   regola restava visibile anche su desktop, affiancato a .header-cta —
   due "Prenota" nella stessa navbar. Nascosto di default ovunque; lo
   mostriamo di nuovo solo dentro lo stato .mobile-open. */
.header-cta-mobile { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  z-index: 200;
}
.nav-toggle span {
  height: 1px; width: 100%; background: var(--ivory);
  transition: background .5s var(--ease), transform .35s var(--ease), opacity .35s var(--ease);
}
.is-scrolled .nav-toggle span, .site-header--solid .nav-toggle span { background: var(--ink); }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); background: var(--ink); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); background: var(--ink); }

@media (max-width: 900px) {
  .primary-nav { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }

  .primary-nav.mobile-open {
    display: flex;
    position: fixed; inset: 0;
    background: var(--ivory);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 40px;
    z-index: 150;
  }
  .primary-nav.mobile-open ul { flex-direction: column; gap: 28px; }
  .primary-nav.mobile-open a {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 30px;
    color: var(--ink);
    letter-spacing: 0;
    text-transform: none;
  }
  .primary-nav.mobile-open .header-cta-mobile {
    margin-top: 32px;
    display: inline-block;
  }
}

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}

.hero-media {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  animation: hero-settle 2.4s var(--ease) forwards;
}
@keyframes hero-settle { to { transform: scale(1); } }

.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(74,62,50,0.35) 0%, rgba(74,62,50,0.15) 40%, rgba(74,62,50,0.75) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 var(--gutter) 96px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.hero-eyebrow {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--olive-pale);
  margin-bottom: 22px;
  opacity: 0;
  animation: hero-in .9s var(--ease) .3s forwards;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(52px, 9vw, 108px);
  line-height: 0.95;
  letter-spacing: -2px;
  color: var(--ivory);
  opacity: 0;
  animation: hero-in .9s var(--ease) .5s forwards;
}
.hero-title em { font-style: italic; color: var(--olive-pale); }

.hero-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: rgba(250,247,241,0.8);
  max-width: 380px;
  margin-top: 20px;
  border-left: 1.5px solid var(--olive-light);
  padding-left: 20px;
  opacity: 0;
  animation: hero-in .9s var(--ease) .7s forwards;
}

@keyframes hero-in { to { opacity: 1; } }

.hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 22px;
  opacity: 0;
  animation: hero-in .9s var(--ease) .9s forwards;
}

@media (max-width: 760px) {
  .hero-content { flex-direction: column; align-items: flex-start; gap: 32px; padding-bottom: 64px; }
  .hero-side { align-items: flex-start; }
}

/* Base campo/pulsante booking — riusata da .booking-form nella sezione
   di prenotazione finale (l'unica vera interfaccia di booking del sito). */
.bb-field {
  padding: 22px 26px;
  border-right: 1px solid var(--linen);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bb-field label {
  font-size: 8px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--stone-deep);
}
.bb-field input, .bb-field select {
  border: none; background: transparent;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  padding: 0;
}
.bb-field input:focus, .bb-field select:focus { outline: none; }
.bb-submit {
  background: var(--olive);
  color: var(--ivory);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 0 40px;
  transition: background .35s var(--ease);
}
.bb-submit:hover { background: var(--olive-mid); }

/* ═══════════════════════════════════════════════
   INTRO / VALUE PROPOSITION
   Solo il manifesto — niente numeri qui: punteggio/recensioni/unità
   vivono un'unica volta nella sezione Recensioni più avanti.
═══════════════════════════════════════════════ */
.intro-section { padding-top: var(--section-pad); }
.intro-manifesto {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-text);
  max-width: 940px;
}
.intro-manifesto em { font-style: italic; color: var(--color-primary); }

/* ═══════════════════════════════════════════════
   STORIA — dal luogo agricolo alla dimora contemporanea
═══════════════════════════════════════════════ */
.story-section { padding: calc(var(--section-pad) - 10px) 0; }
.story-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 64px;
  align-items: center;
}
.story-copy p { font-size: 14px; margin-top: 4px; margin-bottom: 16px; }
.story-media-frame {
  aspect-ratio: 1/1;
  overflow: hidden;
  border: 1px solid rgba(110,126,84,0.2);
}
.story-media-frame img { width: 100%; height: 100%; object-fit: cover; }
.story-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.3px;
}
.story-caption-n {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--olive);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; gap: 32px; }
  .story-media { order: -1; }
}

/* ═══════════════════════════════════════════════
   EXPERIENCE / SERVIZI (Le Unità)
═══════════════════════════════════════════════ */
.units-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 56px;
  background: var(--linen);
}
.unit-card {
  background: var(--ivory-warm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background .4s var(--ease);
}
.unit-media { aspect-ratio: 5/4; overflow: hidden; position: relative; }
.unit-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter .8s var(--ease);
  filter: saturate(0.94);
}
.unit-card:hover .unit-media img { transform: scale(1.06); }
.unit-body { padding: 26px 28px 32px; }
.unit-body h3 { font-size: 23px; }
.unit-body p { font-size: 13px; max-width: none; }
.unit-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--terra);
  position: relative;
}
.unit-link::after { content: '→'; transition: transform .3s var(--ease); }
.unit-card:hover .unit-link::after { transform: translateX(5px); }

@media (max-width: 860px) {
  .units-grid { grid-template-columns: 1fr; }
}
/* Su tablet lo spazio per due colonne c'è: a colonna singola la sezione
   diventava quasi il doppio più alta del necessario. */
@media (max-width: 860px) and (min-width: 561px) {
  .units-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Esperienze — layout editoriale asimmetrico */
.experiences {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap-hairline);
  margin: var(--space-6) auto 0;
  background: var(--color-border);
  /* Allineate al contenitore come tutte le altre sezioni: a tutta larghezza
     le righe diventavano altissime e stonavano con il resto della pagina. */
  max-width: var(--container-w);
  padding: 0 var(--gutter);
}
.experience-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  background: var(--ivory);
  min-height: 240px;
}
.experience-row:nth-child(even) { grid-template-columns: 1.1fr 0.9fr; }
.experience-row:nth-child(even) .exp-media { order: 2; }

.exp-media { overflow: hidden; aspect-ratio: 16/9; }
.exp-media img, .exp-media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-copy {
  padding: var(--space-6) var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.exp-n { font-family: var(--font-display); font-size: 15px; color: var(--stone); margin-bottom: 14px; font-style: italic; }
.exp-copy h3 { font-size: 27px; }
.exp-copy p { font-size: 14px; }

@media (max-width: 780px) {
  .experience-row, .experience-row:nth-child(even) { grid-template-columns: 1fr; min-height: auto; }
  .experience-row:nth-child(even) .exp-media { order: 0; }
  .exp-media { aspect-ratio: 4/3; }
  .exp-copy { padding: 32px 28px; }
}

/* ═══════════════════════════════════════════════
   GALLERY — sequenza editoriale, non una griglia
═══════════════════════════════════════════════ */
.gallery-section { padding-bottom: calc(var(--section-pad) - 20px); }

.gallery-intro { margin-bottom: var(--space-7); }
.gallery-intro h2 { margin-bottom: 0; }

/* Immagine hero della gallery — full-bleed, il "respiro" della sezione.
   Esce dai margini del container fino ai bordi del viewport.
   Usiamo i margini negativi calcolati invece di 100vw: 100vw include la
   barra di scorrimento e farebbe sforare l'elemento oltre il viewport. */
.gallery-feature {
  position: relative;
  width: auto;
  margin-left: calc(50% - 50vw + var(--scrollbar-safe, 0px));
  margin-right: calc(50% - 50vw + var(--scrollbar-safe, 0px));
  aspect-ratio: 3/1;
  overflow: hidden;
  margin-bottom: var(--space-6);
  cursor: pointer;
}
.gallery-feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
}
.gallery-feature:hover .gallery-feature-img { transform: scale(1.015); }

@media (max-width: 760px) {
  .gallery-feature { aspect-ratio: 4/5; margin-bottom: var(--space-6); }
}

/* Mosaico asimmetrico — pattern di 7 forme che si ripete ciclicamente,
   cosi' il layout resta editoriale qualunque sia il numero di foto. */
.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 78px;
  grid-auto-flow: dense;
  gap: var(--grid-gap-hairline);
}
.gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--linen);
}
.gallery-item img, .gallery-item svg {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease), filter .5s;
  filter: saturate(0.96);
}
/* hover quasi impercettibile, come richiesto: nessun effetto vistoso */
.gallery-item:hover img, .gallery-item:hover svg { transform: scale(1.02); filter: saturate(1) brightness(1.02); }
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(74,62,50,0);
  transition: background .5s var(--ease);
}
.gallery-item:hover::after { background: rgba(74,62,50,0.05); }

/* Pattern — dominante / verticale / orizzontali medie / dettagli quadrati */
.gallery-item.gm-1 { grid-column: span 4; grid-row: span 3; } /* orizzontale dominante — architettura */
.gallery-item.gm-2 { grid-column: span 2; grid-row: span 3; } /* verticale — dettagli */
/* I successivi sono tutti quadrati da 2 colonne: tre per fascia, cosi'
   il mosaico si chiude in righe piene qualunque sia il numero di foto. */
.gallery-item.gm-3,
.gallery-item.gm-4,
.gallery-item.gm-5,
.gallery-item.gm-6,
.gallery-item.gm-7 { grid-column: span 2; grid-row: span 2; }

@media (max-width: 900px) and (min-width: 761px) {
  /* Tablet: stessa gerarchia, complessità ridotta */
  .gallery-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 118px; }
  .gallery-item.gm-1 { grid-column: span 4; grid-row: span 2; }
  .gallery-item.gm-2 { grid-column: span 2; grid-row: span 2; }
  .gallery-item.gm-3, .gallery-item.gm-4 { grid-column: span 2; grid-row: span 2; }
  .gallery-item.gm-5, .gallery-item.gm-6, .gallery-item.gm-7 { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 760px) {
  /* Mobile: non una griglia desktop compressa, ma nemmeno una colonna
     infinita. Due immagini per riga, con la dominante a piena larghezza:
     mantiene il ritmo editoriale senza chiedere sette schermate di scroll. */
  .gallery-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: var(--grid-gap-hairline);
  }
  .gallery-item,
  .gallery-item.gm-2, .gallery-item.gm-3,
  .gallery-item.gm-4, .gallery-item.gm-5, .gallery-item.gm-6, .gallery-item.gm-7 {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 1/1;
  }
  /* la dominante resta piena larghezza e orizzontale */
  .gallery-item.gm-1 { grid-column: 1 / -1; grid-row: span 1; aspect-ratio: 4/3; }
}

/* Lightbox — coerente con il design del sito, non un plugin generico */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(74,62,50,0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 88vw; max-height: 84vh; object-fit: contain; }
.lightbox-close {
  position: absolute; top: 28px; right: 32px;
  color: var(--ivory); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--ivory); font-size: 28px; padding: var(--space-3);
  font-family: var(--font-display);
  opacity: 0.8;
  transition: opacity .3s var(--ease);
}
.lightbox-nav:hover { opacity: 1; }
.lightbox-prev { left: var(--space-4); }
.lightbox-next { right: var(--space-4); }

@media (max-width: 560px) {
  .lightbox-close { top: var(--space-3); right: var(--space-3); }
}

/* ═══════════════════════════════════════════════
   TESTIMONIALS / TRUST
═══════════════════════════════════════════════ */
.testimonials-title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-6);
  max-width: 560px;
}

.trust-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  padding: 40px 0;
  border-top: 0.5px solid var(--linen);
  border-bottom: 0.5px solid var(--linen);
  margin-bottom: 56px;
}
.trust-score { display: flex; align-items: baseline; gap: 14px; }
.trust-score-n { font-family: var(--font-display); font-size: 46px; color: var(--terra); font-style: italic; }
.trust-score-txt { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); max-width: 160px; line-height: 1.5; }
.trust-item { text-align: right; }
.trust-item .n { font-family: var(--font-display); font-size: 22px; color: var(--ink); }
.trust-item .lbl { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--stone-deep); }

.testimonial-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--linen);
}
.testimonial-card {
  background: var(--ivory);
  padding: 36px 32px;
}
.testimonial-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 20px;
}
.testimonial-quote::before { content: '“'; color: var(--terra); }
.testimonial-quote::after { content: '”'; color: var(--terra); }
.testimonial-author { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--stone-deep); }

@media (max-width: 860px) {
  .testimonial-track { grid-template-columns: 1fr; }
  .trust-bar { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════
   LOCATION / INFO
═══════════════════════════════════════════════ */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 48px;
  background: var(--linen);
}
.location-media { aspect-ratio: 3/2; overflow: hidden; }
.location-media img { width: 100%; height: 100%; object-fit: cover; }
.location-info { background: var(--ivory); padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.location-list { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.location-list li {
  display: flex; justify-content: space-between; gap: 20px;
  font-size: 13px; color: var(--ink-mid);
  border-bottom: 0.5px solid var(--linen); padding-bottom: 14px;
}
.location-list li span:first-child { color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1.5px; font-size: 10px; }

@media (max-width: 780px) {
  .location-grid { grid-template-columns: 1fr; }
  .location-info { padding: 32px 28px; }
}

/* ═══════════════════════════════════════════════
   SERVIZI — elemento di supporto, peso volutamente leggero
   "Abbiamo pensato anche alle cose semplici." Niente icone, niente card:
   un elenco editoriale con un numerale Cormorant al posto di un'icona.
═══════════════════════════════════════════════ */
.services-section {
  padding: var(--space-7) 0; /* meno di --section-pad: gerarchia più bassa */
  background: var(--color-bg-soft);
}

.services-title {
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-text-mid);
  font-weight: 300;
  max-width: 520px;
  margin-bottom: var(--space-7);
}

.services-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 0.5px solid var(--color-border);
}

.service-row {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4) var(--space-5) 0;
  border-bottom: 0.5px solid var(--color-border);
}
.service-row:nth-child(odd) { border-right: 0.5px solid var(--color-border); padding-left: 0; }
.service-row:nth-child(even) { padding-left: var(--space-5); }

.service-n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-accent);
  line-height: 1;
  flex-shrink: 0;
  min-width: 34px;
}

.service-copy h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 6px;
}
.service-copy p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 420px;
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Protezione: se un plugin inserisce paragrafi o contenitori vuoti dentro
   le sezioni del tema, non devono occupare spazio e aprire buchi. */
.service-copy p:empty,
.exp-copy p:empty,
.testimonial-quote:empty,
.services-list > :empty { display: none; }

@media (max-width: 700px) {
  .services-list { grid-template-columns: 1fr; }
  .service-row:nth-child(odd) { border-right: none; padding-left: 0; }
  .service-row:nth-child(even) { padding-left: 0; }
}

/* ═══════════════════════════════════════════════
   IMMAGINI DI SFONDO OPZIONALI
   Applicate solo se l'immagine è stata caricata (.has-bg-image), cosi'
   senza foto il design resta identico. Ogni sfondo ha un velo che
   garantisce il contrasto del testo sopra qualunque fotografia.
═══════════════════════════════════════════════ */
.has-bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.has-bg-image > * { position: relative; z-index: 1; }

/* Sezioni chiare (Recensioni): velo avorio, testo scuro leggibile */
.section--ivory.has-bg-image::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: rgba(250,247,241,0.90);
}

/* Sezione prenotazione: già scura, il velo scurisce ulteriormente la foto */
.booking-cta.has-bg-image::before {
  background: rgba(74,62,50,0.82);
}

/* ── Il Luogo: immagine facoltativa accanto al manifesto ── */
.intro-layout.has-image {
  display: grid;
  grid-template-columns: 1fr 0.62fr;
  gap: var(--space-7);
  align-items: center;
}
.intro-media { aspect-ratio: 1/1; overflow: hidden; }
.intro-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .intro-layout.has-image { grid-template-columns: 1fr; gap: var(--space-6); }
  .intro-media { aspect-ratio: 4/3; }
}

/* ── Servizi: immagine facoltativa al posto del numerale ── */
.service-media {
  width: 62px; height: 62px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
}
.service-media img { width: 100%; height: 100%; object-fit: cover; }

/* ── Recensioni: ritratto facoltativo dell'ospite ── */
.testimonial-media {
  width: 52px; height: 52px;
  overflow: hidden;
  border-radius: 50%;
  margin-bottom: var(--space-4);
}
.testimonial-media img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════
   BOOKING CTA — sezione forte, elemento firma
═══════════════════════════════════════════════ */
.booking-cta {
  position: relative;
  padding: var(--section-pad) 0;
  background: var(--ink);
  overflow: hidden;
  text-align: center;
}
.booking-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 20% 20%, rgba(110,126,84,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 80%, rgba(154,112,82,0.18) 0%, transparent 60%);
}
.booking-cta .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.booking-cta .eyebrow { color: var(--olive-pale); justify-content: center; }
.booking-cta .eyebrow::after { display: none; }
.booking-cta h2 { color: var(--ivory); }
.booking-cta h2 em { color: var(--olive-pale); }
.booking-cta p { color: rgba(250,247,241,0.7); text-align: center; margin: 0 auto 40px; }

.booking-form {
  width: 100%;
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  background: rgba(250,247,241,0.06);
  border: 1px solid rgba(250,247,241,0.18);
}
.booking-form .bb-field { border-right-color: rgba(250,247,241,0.18); }
.booking-form .bb-field label { color: rgba(250,247,241,0.5); }
.booking-form .bb-field input, .booking-form .bb-field select { color: var(--ivory); }
.booking-form .bb-field select option { color: var(--ink); }

@media (max-width: 820px) {
  .booking-form { grid-template-columns: 1fr 1fr; }
  .booking-form .bb-field:nth-child(3) { border-right: none; }
  .booking-form .bb-submit { grid-column: 1 / -1; padding: 18px; }
}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.site-footer {
  background: var(--ivory-deep);
  border-top: 0.5px solid var(--linen);
  padding: 72px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.footer-brand .brand-name { color: var(--ink); font-size: 22px; }
.footer-brand p { font-size: 13px; margin-top: 14px; color: var(--ink-soft); }
.footer-col-title {
  font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--olive); margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col li { font-size: 13px; color: var(--ink-mid); }
.footer-col a:hover { color: var(--terra); }
.footer-social { display: flex; gap: 16px; margin-top: 4px; }
.footer-social a {
  width: 34px; height: 34px; border: 0.5px solid var(--stone);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 12px; transition: border-color .3s, color .3s;
}
.footer-social a:hover { border-color: var(--terra); color: var(--terra); }

.footer-bottom {
  border-top: 0.5px solid var(--linen);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy, .footer-legal { font-size: 10px; letter-spacing: 1px; color: var(--stone-deep); }
.footer-legal { display: flex; gap: 20px; }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  /* Due colonne anche sugli schermi stretti: a colonna singola il footer
     diventava alto quanto una sezione intera. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ── back to top ── */
.to-top {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--linen);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease), transform .3s var(--ease);
  z-index: 90;
  color: var(--ink);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px); }

/* ── Pagine costruite con Elementor ──
   Il canvas non applica il container editoriale del tema: la larghezza
   la decide Elementor. Le sezioni del tema inserite come widget
   mantengono comunque il proprio container interno. */
.tp-elementor-canvas { padding-top: 84px; } /* spazio per l'header fisso */
body.elementor-page .site-header { position: fixed; }

/* ═══════════════════════════════════════════════
   PAGINE INTERNE
   Stessa grammatica della home: sopratitolo, titolo in Cormorant,
   molta aria. L'intestazione con foto usa lo stesso velo dell'hero.
═══════════════════════════════════════════════ */
.page-hero {
  padding: 176px 0 var(--space-7);
  background: var(--color-bg-soft);
  position: relative;
}
.page-hero-inner { position: relative; z-index: 1; }
.page-hero-title {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

/* Variante con immagine in evidenza */
.page-hero--image { background: var(--ink); padding: 220px 0 var(--space-8); }
.page-hero-media { position: absolute; inset: 0; overflow: hidden; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(74,62,50,0.45) 0%, rgba(74,62,50,0.70) 100%);
}
.page-hero--image .page-hero-title { color: var(--ivory); }
.page-hero--image .eyebrow { color: var(--olive-pale); }
.page-hero--image .eyebrow::after { background: var(--olive-pale); }

@media (max-width: 760px) {
  .page-hero { padding-top: 132px; }
  .page-hero--image { padding: 160px 0 var(--space-7); }
}

/* Testo libero scritto nell'editor della pagina */
.page-prose { max-width: 720px; }
.page-prose p { max-width: none; margin-bottom: var(--space-4); }
.page-prose p:last-child { margin-bottom: 0; }
.page-prose h2 { font-size: var(--text-2xl); margin: var(--space-6) 0 var(--space-3); }
.page-prose h3 { margin: var(--space-5) 0 var(--space-2); }
.page-prose ul, .page-prose ol { margin: 0 0 var(--space-4) var(--space-4); }
.page-prose li { font-size: var(--text-base); color: var(--color-text-mid); margin-bottom: var(--space-2); }
.page-prose ul li { list-style: none; position: relative; padding-left: var(--space-3); }
.page-prose ul li::before { content: '—'; position: absolute; left: 0; color: var(--stone); }
.page-prose img { margin: var(--space-5) 0; }
.page-prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

/* ── TARIFFE ── */
.rates-list {
  margin-top: var(--space-6);
  border-top: 0.5px solid var(--color-border);
}
.rates-list--top { margin-top: 0; }
.rate-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 0.5px solid var(--color-border);
}
.rate-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  margin: 0 0 4px;
}
.rate-period {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
}
.rate-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  max-width: 520px;
}
.rate-price { text-align: right; white-space: nowrap; }
.rate-price-n {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  color: var(--color-primary);
  line-height: 1.1;
}
.rate-price-u {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-ghost);
}

@media (max-width: 620px) {
  .rate-row { flex-direction: column; gap: var(--space-3); }
  .rate-price { text-align: left; }
}

/* ── CONTATTI ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: var(--space-7);
  align-items: start;
}
.contact-title { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.contact-list {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.contact-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 0.5px solid var(--color-border);
  font-size: var(--text-base);
  color: var(--color-text-mid);
}
.contact-list li span:first-child {
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.contact-list a { color: var(--color-text-mid); }
.contact-list a:hover { color: var(--color-primary); }

.contact-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.btn-ghost--dark { color: var(--color-text); border-color: var(--stone); }
.btn-ghost--dark:hover { border-color: var(--color-primary); color: var(--color-primary); background: transparent; }

.contact-map { aspect-ratio: 4/3; overflow: hidden; background: var(--color-border); }
.contact-map img, .contact-map iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.contact-form { margin-top: var(--space-5); }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ── contenuto generico (page.php / single.php) ── */
.entry-content { max-width: 720px; margin: 0 auto; padding: var(--space-4) var(--gutter) var(--space-8); }
.entry-content p { max-width: none; margin-bottom: var(--space-4); }
.entry-content h2 { margin-top: var(--space-6); }
.entry-content img { margin: var(--space-5) 0; }