/*
Theme Name: Villa Hélène
Theme URI: https://villahelene.it
Author: Villa Hélène / Lorenzo Berta
Author URI: https://villahelene.it
Description: Tema custom per Villa Hélène — tenuta privata sul Lago d'Iseo. Multilingue IT/EN tramite Polylang. Pensato per matrimoni privati, eventi corporate e soggiorni esclusivi.
Version: 1.3.54
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: villa-helene
*/

:root {
  --ivory: #F4EFE6;
  --paper: #FAF7F1;
  --ink: #1F1B16;
  --ink-soft: #2C2620;
  --stone: #9A9285;
  --olive: #6B7155;
  --olive-deep: #4A4F3D;
  --line: #D9D2C4;
  --gold: #A08246;

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Manrope', -apple-system, sans-serif;
  --label: 'Archivo', sans-serif;

  --container: 1400px;
  --container-narrow: 1100px;
  --gutter: clamp(1.5rem, 4vw, 4rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

body[data-lang="en"] .t-it { display: none !important; }
body[data-lang="it"] .t-en { display: none !important; }

/* ========== Page routing system ========== */
.page-view {
  display: none;
  animation: pageIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.page-view.is-active { display: block; }

@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mark the active nav link */
nav.primary a.is-current { color: var(--olive); }
nav.primary a.is-current::after { transform: scaleX(1); transform-origin: left; }

/* ========== Typography ========== */
.label {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
}

.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h1.display { font-size: clamp(3rem, 7vw, 6rem); }
h2.display { font-size: clamp(2.4rem, 5vw, 4.4rem); }
h3.display { font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
h4.display { font-size: clamp(1.3rem, 2vw, 1.8rem); }

.display .ital { font-style: italic; font-weight: 400; }

p { font-weight: 300; color: var(--ink-soft); }

/* ========== Header ========== */
header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.4rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

header.site-header.scrolled {
  background: rgba(244, 239, 230, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 1rem var(--gutter);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(31, 27, 22, 0.10);
}

.logo {
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}

.logo--mark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.logo--mark img {
  display: block;
  height: 56px;
  width: auto;
  /* Default state (header transparent over dark hero): show light/inverted */
  filter: invert(1) brightness(0.95);
  transition: height 0.4s ease, opacity 0.3s ease, filter 0.4s ease;
}
header.site-header.scrolled .logo--mark img {
  /* Scrolled state (header over ivory): show original dark logo */
  filter: none;
  height: 44px;
}
.logo--mark:hover img {
  opacity: 0.78;
}
.logo--mark-footer img {
  height: 64px;
  filter: invert(1) brightness(0.92);
  opacity: 0.85;
}
@media (max-width: 600px) {
  .logo--mark img { height: 44px; }
  header.site-header.scrolled .logo--mark img { height: 38px; }
  .logo--mark-footer img { height: 52px; }
}

nav.primary {
  display: flex;
  gap: 2.4rem;
  align-items: center;
}

nav.primary a {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.92);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color 0.3s ease;
  cursor: pointer;
}

header.site-header.scrolled nav.primary a {
  color: var(--ink);
}

nav.primary a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--olive);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

nav.primary a:hover::after { transform: scaleX(1); transform-origin: left; }
nav.primary a:hover { color: var(--olive); }
header.site-header.scrolled nav.primary a:hover { color: var(--olive); }

nav.primary a.nav-invitation {
  font-style: italic;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(244, 239, 230, 0.92);
  padding: 6px 14px;
  border: 1px solid rgba(244, 239, 230, 0.35);
  border-radius: 1px;
  margin-left: 0.4rem;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
header.site-header.scrolled nav.primary a.nav-invitation {
  color: var(--olive);
  border-color: var(--line);
}
nav.primary a.nav-invitation::after { display: none; }
nav.primary a.nav-invitation:hover {
  background: var(--olive);
  color: var(--paper);
  border-color: var(--olive);
}
nav.primary a.nav-invitation.is-current,
header.site-header.scrolled nav.primary a.nav-invitation.is-current {
  background: var(--olive);
  color: var(--paper);
  border-color: var(--olive);
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  border-left: 1px solid rgba(244, 239, 230, 0.35);
  padding-left: 1.6rem;
  margin-left: 0.8rem;
  transition: border-color 0.3s ease;
}

header.site-header.scrolled .lang-toggle {
  border-left-color: var(--line);
}

.lang-toggle button {
  background: none;
  border: none;
  font: inherit;
  letter-spacing: inherit;
  color: rgba(244, 239, 230, 0.55);
  cursor: pointer;
  padding: 4px 2px;
  transition: color 0.3s ease;
}

.lang-toggle button.active { color: var(--paper); }
header.site-header.scrolled .lang-toggle button { color: var(--stone); }
header.site-header.scrolled .lang-toggle button.active { color: var(--ink); }
.lang-toggle button:hover { color: var(--olive); }
.lang-toggle .sep { color: rgba(244, 239, 230, 0.35); }
header.site-header.scrolled .lang-toggle .sep { color: var(--line); }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-right: -8px;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: rgba(244, 239, 230, 0.92);
  margin: 5px 0;
  transition: background 0.3s ease;
}
header.site-header.scrolled .menu-toggle span {
  background: var(--ink);
}

/* ========== Mobile menu ========== */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--ivory);
  z-index: 99;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.mobile-nav.open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav a {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--ink);
  text-decoration: none;
  font-style: italic;
  cursor: pointer;
}

/* ========== Hero (multipurpose) ========== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--gutter) clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}

.hero--shorter { min-height: 78vh; }

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, #5C5648 0%, #2C2620 60%, #1F1B16 100%);
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(160, 130, 70, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(107, 113, 85, 0.15) 0%, transparent 60%);
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(31, 27, 22, 0.3) 0%, transparent 25%, transparent 60%, rgba(31, 27, 22, 0.55) 100%);
}

.hero-bg--lighter { background: linear-gradient(135deg, #8A8170 0%, #4A4F3D 70%, #2C2620 100%); }
.hero-bg--olive { background: linear-gradient(140deg, #6B7155 0%, #4A4F3D 60%, #2C2620 100%); }
.hero-bg--stone { background: linear-gradient(140deg, #C5BCA6 0%, #8A8170 60%, #4A4F3D 100%); }

.hero-bg-note {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  font-family: var(--label);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(244, 239, 230, 0.25);
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 920px;
  color: var(--paper);
  animation: fadeUp 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}

.hero-content .label {
  color: rgba(244, 239, 230, 0.85);
  margin-bottom: 1.6rem;
  display: block;
}

.hero-content h1 {
  color: var(--paper);
  font-weight: 300;
  margin-bottom: 1.8rem;
}

.hero-sub {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  max-width: 580px;
  color: rgba(244, 239, 230, 0.92);
  margin-bottom: 2.4rem;
}

.scroll-cue {
  position: absolute;
  bottom: clamp(1.5rem, 3vh, 2.5rem);
  right: var(--gutter);
  z-index: 1;
  font-family: var(--label);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.7);
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: 12px;
}

.scroll-cue::after {
  content: '';
  display: block;
  width: 1px;
  height: 50px;
  background: rgba(244, 239, 230, 0.5);
  animation: scrollLine 2.4s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scrollLine {
  0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 0.9; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== Sections ========== */
section {
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
  position: relative;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
}

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

.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(3rem, 7vh, 5.5rem);
}

.section-head .label { padding-top: 8px; }
.section-head h2 { max-width: 14ch; }

/* ========== Intro ========== */
.intro {
  background: var(--ivory);
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.intro-text { max-width: 540px; }
.intro-text .label { display: block; margin-bottom: 1.4rem; }
.intro-text h2 { margin-bottom: 1.8rem; }
.intro-text p {
  font-size: 1.02rem;
  line-height: 1.8;
  margin-bottom: 1.2rem;
  color: var(--ink-soft);
}

/* Estate signature at bottom of intro */
.intro-text .estate-signature {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--olive-deep);
  letter-spacing: 0.01em;
}

.estate-signature-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--olive);
  padding-bottom: 1px;
  font-style: italic;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.estate-signature-link:hover {
  color: var(--olive);
  border-color: var(--ink);
}

.intro-image {
  aspect-ratio: 4/5;
  background: linear-gradient(140deg, #C5BCA6 0%, #8A8170 100%);
  position: relative;
  overflow: hidden;
}

.intro-image::after {
  content: 'OLIVE GROVE · WESTERN SHORE';
  position: absolute;
  bottom: 1.4rem;
  left: 1.4rem;
  font-family: var(--label);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: rgba(244, 239, 230, 0.85);
  text-transform: uppercase;
}

.intro-image::before {
  content: 'IMAGE PLACEHOLDER';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(244, 239, 230, 0.45);
}

/* ========== Path sections (Events / Stays preview cards on home) ========== */
.path-section {
  padding-top: clamp(5rem, 11vh, 8rem);
  padding-bottom: clamp(5rem, 11vh, 8rem);
}

.path-section--events { background: var(--paper); }
.path-section--stays {
  background: var(--ivory);
  border-top: 1px solid var(--line);
}

.path-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.path-grid--reverse .path-image-block { order: 2; }
.path-grid--reverse .path-text-block { order: 1; }

.path-image-block {
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, #4A4F3D 0%, #2C2620 100%);
  position: relative;
  overflow: hidden;
}

.path-section--stays .path-image-block {
  background: linear-gradient(135deg, #C5BCA6 0%, #8A8170 100%);
}

.path-image-block::before {
  content: attr(data-img-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(244, 239, 230, 0.45);
  text-transform: uppercase;
  text-align: center;
  padding: 2rem;
  max-width: 80%;
  margin: auto;
  line-height: 1.7;
}

.path-section--stays .path-image-block::before {
  color: rgba(31, 27, 22, 0.45);
}

.path-image-block .img-caption {
  position: absolute;
  bottom: 1.4rem;
  left: 1.4rem;
  font-family: var(--label);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: rgba(244, 239, 230, 0.85);
  text-transform: uppercase;
  z-index: 2;
}

.path-section--stays .path-image-block .img-caption {
  color: rgba(31, 27, 22, 0.7);
}

.path-text-block { max-width: 540px; }
.path-text-block .label { display: block; margin-bottom: 1.4rem; }
.path-text-block h2 { margin-bottom: 1.8rem; }
.path-text-block p {
  font-size: 1.02rem;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}

.path-meta {
  margin: 2rem 0 2.4rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
}

.path-meta div {
  font-family: var(--label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}

.path-meta-label {
  display: block;
  margin-bottom: 4px;
}

.path-meta strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-top: 4px;
}

.path-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink);
  transition: gap 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  cursor: pointer;
}

.path-link:hover {
  gap: 22px;
  color: var(--olive);
  border-color: var(--olive);
}

.path-link .arrow {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0;
  font-style: italic;
}

/* ========== Gallery ========== */
.gallery {
  background: var(--ivory);
  padding: clamp(5rem, 12vh, 9rem) 0 clamp(5rem, 12vh, 9rem);
  overflow: hidden;
}

.gallery .section-head {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

.gallery-viewport { position: relative; }

.gallery-strip {
  display: flex;
  gap: clamp(0.8rem, 1.5vw, 1.4rem);
  overflow-x: auto;
  padding: 0 var(--gutter) 1rem;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--olive) var(--paper);
}

.gallery-strip::-webkit-scrollbar { height: 4px; }
.gallery-strip::-webkit-scrollbar-track { background: var(--paper); }
.gallery-strip::-webkit-scrollbar-thumb { background: var(--olive); border-radius: 2px; }

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(244, 239, 230, 0.92);
  border: 1px solid var(--line);
  color: var(--olive-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  line-height: 1;
  padding: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.4s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.gallery-arrow:hover {
  background: var(--olive);
  color: var(--paper);
  border-color: var(--olive);
  transform: translateY(-50%) scale(1.05);
}
.gallery-arrow--prev { left: clamp(0.5rem, 2vw, 2rem); }
.gallery-arrow--next { right: clamp(0.5rem, 2vw, 2rem); }
.gallery-arrow.is-hidden { opacity: 0; pointer-events: none; }
.gallery-arrow .arrow-glyph { display: block; margin-top: -2px; }

.gallery-item {
  flex: 0 0 auto;
  width: clamp(280px, 38vw, 540px);
  aspect-ratio: 4/5;
  position: relative;
  scroll-snap-align: start;
  overflow: hidden;
  background: linear-gradient(140deg, #5C5648 0%, #2C2620 100%);
}

.gallery-item:nth-child(2) { background: linear-gradient(140deg, #8A8170 0%, #4A4F3D 100%); }
.gallery-item:nth-child(3) { background: linear-gradient(140deg, #C5BCA6 0%, #6B7155 100%); aspect-ratio: 16/10; }
.gallery-item:nth-child(4) { background: linear-gradient(140deg, #4A4F3D 0%, #1F1B16 100%); }
.gallery-item:nth-child(5) { background: linear-gradient(140deg, #6B7155 0%, #2C2620 100%); aspect-ratio: 16/10; }
.gallery-item:nth-child(6) { background: linear-gradient(140deg, #DDD5C2 0%, #8A8170 100%); }

.gallery-item::before {
  content: attr(data-img-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(244, 239, 230, 0.45);
  text-transform: uppercase;
  text-align: center;
  padding: 1.5rem;
  line-height: 1.7;
}

.gallery-caption {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  right: 1.2rem;
  font-family: var(--label);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: rgba(244, 239, 230, 0.92);
  text-transform: uppercase;
  z-index: 2;
}

.gallery-footer {
  max-width: var(--container);
  margin: 3rem auto 0;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}

.gallery-footer .gallery-meta {
  font-family: var(--label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}

.gallery-footer .gallery-link {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
  transition: gap 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.gallery-footer .gallery-link:hover {
  color: var(--olive);
  gap: 18px;
}

/* ========== The Estate (dark strip) ========== */
.estate-strip {
  background: var(--ink);
  color: var(--paper);
}

.estate-strip h2 { color: var(--paper); }
.estate-strip p { color: rgba(244, 239, 230, 0.82); }

.estate-strip .section-head .label {
  color: rgba(244, 239, 230, 0.6);
}

.estate-link {
  color: var(--paper);
  text-decoration: none;
  font-style: italic;
  font-family: var(--serif);
  font-size: 1.08em;
  border-bottom: 1px solid rgba(244, 239, 230, 0.35);
  padding-bottom: 1px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.estate-link:hover {
  color: #DDD2A8;
  border-color: rgba(244, 239, 230, 0.85);
}

.estate-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.estate-text p {
  font-size: 1.02rem;
  line-height: 1.8;
  margin-bottom: 1.2rem;
  max-width: 50ch;
}

.estate-stats {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(244, 239, 230, 0.18);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.estate-stats .stat-label {
  font-family: var(--label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.55);
  margin-bottom: 6px;
}

.estate-stats .stat-value {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--paper);
  line-height: 1.3;
}

.estate-stats .stat-value em {
  font-style: italic;
  color: rgba(244, 239, 230, 0.75);
  font-size: 1rem;
  display: block;
  margin-top: 4px;
}

/* ========== Location ========== */
.location { background: var(--ivory); }

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.location-text { max-width: 480px; }
.location-text .label { display: block; margin-bottom: 1.4rem; }
.location-text h2 { margin-bottom: 1.8rem; }
.location-text p { font-size: 1.02rem; line-height: 1.8; margin-bottom: 1.4rem; }

.proximity {
  margin-top: 2.4rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}

.proximity-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 1.4rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.proximity-item:last-child { border-bottom: none; }

.proximity-item .pcode {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--olive);
}

.proximity-item .pname {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
}

.proximity-item .ptime {
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--stone);
  text-transform: uppercase;
}

.map-frame {
  aspect-ratio: 4/5;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #DDD5C2, #C5BCA6);
  position: relative;
  overflow: hidden;
}

.map-frame::before {
  content: 'MAP PLACEHOLDER · Lake Iseo region';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--label);
  font-size: 9px;
  letter-spacing: 0.28em;
  color: rgba(31, 27, 22, 0.45);
  text-transform: uppercase;
}

/* ========== Inquiry ========== */
.inquiry {
  background: var(--olive-deep);
  color: var(--paper);
  text-align: center;
  padding: clamp(6rem, 14vh, 10rem) var(--gutter);
}

.inquiry .label { color: rgba(244, 239, 230, 0.75); margin-bottom: 1.8rem; display: inline-block; }

.inquiry h2 {
  color: var(--paper);
  font-weight: 300;
  margin-bottom: 1.8rem;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}

.inquiry p {
  color: rgba(244, 239, 230, 0.85);
  max-width: 540px;
  margin: 0 auto 3rem;
  font-size: 1.02rem;
  line-height: 1.8;
}

.inquiry-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  padding: 18px 36px;
  border: 1px solid var(--paper);
  background: transparent;
  transition: background 0.4s ease, color 0.4s ease, gap 0.4s ease;
  cursor: pointer;
}

.inquiry-cta:hover {
  background: var(--paper);
  color: var(--olive-deep);
  gap: 24px;
}

.inquiry-meta {
  margin-top: 3rem;
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(244, 239, 230, 0.65);
  text-transform: uppercase;
}

.inquiry-meta a {
  color: rgba(244, 239, 230, 0.9);
  text-decoration: none;
  margin: 0 12px;
  border-bottom: 1px solid rgba(244, 239, 230, 0.3);
  padding-bottom: 2px;
}

/* ========== Footer ========== */
footer {
  background: var(--ink);
  color: rgba(244, 239, 230, 0.7);
  padding: 3.5rem var(--gutter) 2rem;
}

.footer-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(244, 239, 230, 0.15);
}

.footer-brand .logo { color: var(--paper); }
.footer-brand p {
  margin-top: 1.4rem;
  max-width: 320px;
  color: rgba(244, 239, 230, 0.65);
  font-size: 0.92rem;
  line-height: 1.7;
}

.footer-col h5 {
  font-family: var(--label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 1.2rem;
}

.footer-col a, .footer-col p {
  display: block;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: rgba(244, 239, 230, 0.7);
  text-decoration: none;
  margin-bottom: 0.6rem;
  cursor: pointer;
}

.footer-col a:hover { color: var(--paper); }

.footer-col--estate {
  border-left: 1px solid rgba(244, 239, 230, 0.12);
  padding-left: 2rem;
}

.footer-estate-link {
  display: block;
  text-decoration: none;
  padding-top: 4px;
}

.footer-estate-link .estate-name {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(244, 239, 230, 0.92);
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.footer-estate-link .estate-tag {
  display: block;
  font-family: var(--label);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.55);
  transition: color 0.3s ease;
}

.footer-estate-link:hover .estate-name { color: #DDD2A8; }
.footer-estate-link:hover .estate-tag { color: rgba(244, 239, 230, 0.85); }

.footer-bottom {
  max-width: var(--container);
  margin: 2rem auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.5);
}

/* ========== Reveal animation ========== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ========== Page-specific: Inner page hero (smaller) ========== */
.page-hero {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(8rem, 18vh, 12rem) var(--gutter) clamp(3rem, 7vh, 5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(160, 130, 70, 0.12) 0%, transparent 60%);
}

.page-hero-content {
  position: relative;
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.page-hero .label {
  color: rgba(244, 239, 230, 0.7);
  margin-bottom: 1.4rem;
  display: inline-block;
}

.page-hero h1 {
  color: var(--paper);
  font-weight: 300;
  margin-bottom: 1.4rem;
  font-size: clamp(2.6rem, 6vw, 5rem);
}

.page-hero .lead {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-style: italic;
  color: rgba(244, 239, 230, 0.85);
  max-width: 50ch;
  margin: 0 auto;
  line-height: 1.5;
}

/* ========== Page-specific: Estate page (storia famiglia) ========== */
.estate-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  margin-bottom: clamp(4rem, 10vh, 7rem);
}

.estate-page-grid--reverse > :nth-child(1) { order: 2; }
.estate-page-grid--reverse > :nth-child(2) { order: 1; }

.estate-page-grid .text-block { max-width: 540px; }
.estate-page-grid .text-block .label { display: block; margin-bottom: 1.4rem; }
.estate-page-grid .text-block h2 { margin-bottom: 1.8rem; }
.estate-page-grid .text-block p { font-size: 1.02rem; line-height: 1.8; margin-bottom: 1.2rem; }

.estate-page-grid .image-block {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
}

.estate-page-grid .image-block.tall { aspect-ratio: 3/4; }
.estate-page-grid .image-block.wide { aspect-ratio: 4/3; }

.image-block.bg-1 { background: linear-gradient(140deg, #C5BCA6 0%, #8A8170 100%); }
.image-block.bg-2 { background: linear-gradient(140deg, #8A8170 0%, #4A4F3D 100%); }
.image-block.bg-3 { background: linear-gradient(140deg, #5C5648 0%, #2C2620 100%); }
.image-block.bg-4 { background: linear-gradient(140deg, #DDD5C2 0%, #6B7155 100%); }

.image-block::before {
  content: attr(data-img-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(244, 239, 230, 0.5);
  text-transform: uppercase;
  text-align: center;
  padding: 2rem;
  line-height: 1.7;
}

.image-block.bg-4::before, .image-block.bg-1::before {
  color: rgba(31, 27, 22, 0.45);
}

.image-block .img-caption {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  font-family: var(--label);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: rgba(244, 239, 230, 0.85);
  text-transform: uppercase;
}
.image-block.bg-4 .img-caption,
.image-block.bg-1 .img-caption { color: rgba(31, 27, 22, 0.7); }

/* Big editorial pull quote */
.pull-quote {
  background: var(--paper);
  padding: clamp(4rem, 10vh, 7rem) var(--gutter);
  text-align: center;
}

.pull-quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 3.5vw, 3rem);
  line-height: 1.3;
  color: var(--ink);
  max-width: 28ch;
  margin: 0 auto;
}

.pull-quote cite {
  display: block;
  margin-top: 2.2rem;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--olive);
  font-style: normal;
}

.pull-quote cite::before {
  content: '—';
  margin-right: 8px;
  color: var(--stone);
}

/* Values row (3 small cards) */
.values-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: 3rem;
}

.value-card {
  border-top: 1px solid var(--olive);
  padding-top: 1.6rem;
}

.value-card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--olive);
  margin-bottom: 0.6rem;
  display: block;
}

.value-card h4 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.8rem;
}

.value-card p {
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ========== Page-specific: Events page ========== */
.event-format {
  padding: clamp(4rem, 10vh, 7rem) var(--gutter);
}

.event-format--01 { background: var(--ivory); }
.event-format--02 { background: var(--paper); }
.event-format--03 { background: var(--ivory); }

.event-format-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.event-format-grid--reverse > :nth-child(1) { order: 2; }
.event-format-grid--reverse > :nth-child(2) { order: 1; }

.event-format .image-block { aspect-ratio: 4/5; }

.event-format .text-block {
  max-width: 540px;
  padding-top: clamp(1rem, 4vh, 3rem);
}

.event-format .text-block .number {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--olive);
  display: block;
  margin-bottom: 0.6rem;
}

.event-format .text-block h3 {
  margin-bottom: 1.6rem;
}

.event-format .text-block p {
  font-size: 1.02rem;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}

.event-format-meta {
  margin: 1.8rem 0;
  padding: 1.2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
}

.event-format-meta div {
  font-family: var(--label);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}

.event-format-meta strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-top: 4px;
}

/* ========== Page-specific: Stays page (3 suites) ========== */
.suites-intro { background: var(--ivory); }

.suite-card {
  padding: clamp(4rem, 10vh, 7rem) var(--gutter);
}

.suite-card--01 { background: var(--paper); }
.suite-card--02 { background: var(--ivory); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.suite-card--03 { background: var(--paper); }

.suite-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.suite-grid--reverse > :nth-child(1) { order: 2; }
.suite-grid--reverse > :nth-child(2) { order: 1; }

.suite-card .image-block { aspect-ratio: 4/5; }

.suite-card .text-block { max-width: 540px; padding-top: clamp(1rem, 3vh, 2rem); }

.suite-card .text-block .number {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--olive);
  display: block;
  margin-bottom: 0.6rem;
  letter-spacing: 0.04em;
}

.suite-card .text-block h3 { margin-bottom: 1rem; }

.suite-card .text-block .tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
  line-height: 1.4;
}

.suite-card .text-block p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.suite-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem 2rem;
  margin: 1.8rem 0;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.suite-specs div {
  font-family: var(--label);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}

.suite-specs strong {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-top: 4px;
}

/* ========== Page-specific: By Invitation ========== */
.invitation-page {
  background: var(--ivory);
  padding: clamp(4rem, 10vh, 7rem) var(--gutter);
}

.invitation-grid {
  max-width: var(--container-narrow);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 8vw, 6rem);
  align-items: start;
}

.invitation-text { max-width: 480px; }
.invitation-text .label { display: block; margin-bottom: 1.4rem; }
.invitation-text h2 { margin-bottom: 1.8rem; }
.invitation-text p { font-size: 1.02rem; line-height: 1.8; margin-bottom: 1.2rem; }

.invitation-form {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(2rem, 4vw, 3.5rem);
}

.invitation-form h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.invitation-form .form-intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.96rem;
  color: var(--stone);
  margin-bottom: 2rem;
  line-height: 1.5;
}

.form-field {
  margin-bottom: 1.4rem;
}

.form-field label {
  display: block;
  font-family: var(--label);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 0.5rem;
}

.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 0.6rem 0;
  font-family: var(--sans);
  font-size: 0.96rem;
  font-weight: 300;
  color: var(--ink);
  outline: none;
  transition: border-color 0.3s ease;
}

.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-bottom-color: var(--olive);
}

.form-field textarea {
  min-height: 90px;
  resize: vertical;
  font-family: var(--sans);
}

.form-field input::placeholder, .form-field textarea::placeholder {
  color: var(--stone);
  font-style: italic;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--olive);
  border: none;
  padding: 14px 32px;
  margin-top: 1.4rem;
  cursor: pointer;
  transition: background 0.3s ease, gap 0.3s ease;
}

.form-submit:hover {
  background: var(--olive-deep);
  gap: 22px;
}

/* ========== PLACEHOLDER MARKER (visible reminder of what to fill in) ========== */
.placeholder-note {
  background: rgba(160, 130, 70, 0.08);
  border-left: 2px solid var(--gold);
  padding: 1rem 1.4rem;
  margin: 1.4rem 0;
  font-family: var(--label);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive-deep);
  line-height: 1.7;
}

.placeholder-note::before {
  content: '⌖ ';
  color: var(--gold);
}

/* ========== Responsive ========== */
@media (max-width: 900px) {
  nav.primary { display: none; }
  .menu-toggle { display: block; }

  .section-head { grid-template-columns: 1fr; gap: 1rem; }
  .intro-grid, .estate-grid, .location-grid, .path-grid,
  .estate-page-grid, .event-format-grid, .suite-grid, .invitation-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .path-grid--reverse .path-image-block,
  .path-grid--reverse .path-text-block,
  .estate-page-grid--reverse > :nth-child(1),
  .estate-page-grid--reverse > :nth-child(2),
  .event-format-grid--reverse > :nth-child(1),
  .event-format-grid--reverse > :nth-child(2),
  .suite-grid--reverse > :nth-child(1),
  .suite-grid--reverse > :nth-child(2) { order: 0; }

  .estate-stats, .values-row, .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-col--estate { border-left: none; padding-left: 0; padding-top: 1rem; border-top: 1px solid rgba(244, 239, 230, 0.12); }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
  .scroll-cue { display: none; }

  .gallery-footer { flex-direction: column; gap: 1.4rem; align-items: flex-start; }
  .suite-specs { grid-template-columns: 1fr; }
}

/* ========== Preview banner ========== */
.preview-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--gold);
  color: white;
  padding: 8px 16px;
  text-align: center;
  font-family: var(--label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body { padding-top: 32px; }
header.site-header { top: 32px; }

/* Hero with photo background: keep the gradient as a tint overlay */
.hero-bg
.hero-bg
.hero-bg

/* Gallery item dynamic orientation classes (replace nth-child rules) */
.gallery-item
.gallery-item

/* Gallery captions need a subtle gradient when image is dark/varied */
.gallery-item
.gallery-item
.gallery-item

/* Image-block (estate page, events page, suites page) caption legibility */
.image-block
.path-image-block


/* === Photo integration === */
.has-photo::before { display: none !important; }
.photo-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(31, 27, 22, 0.5) 100%);
  pointer-events: none;
  z-index: 1;
}
.has-photo .img-caption,
.has-photo .gallery-caption { z-index: 2; }
.gallery-item--landscape { aspect-ratio: 16/10; }
.gallery-item--portrait  { aspect-ratio: 4/5; }
/* ============================================================
   WORDPRESS-SPECIFIC OVERRIDES
   ============================================================ */

/* Polylang language switcher: styled to match original toggle */
.pll-parent-menu-item .sub-menu,
.lang-switcher-pll {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.lang-switcher-pll li {
  margin: 0;
}
.lang-switcher-pll a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  padding: 0.3rem 0.5rem;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.lang-switcher-pll a:hover {
  color: var(--ink);
}
.lang-switcher-pll li.current-lang a,
.lang-switcher-pll a.current-lang {
  color: var(--ink);
  font-weight: 500;
}
.lang-switcher-pll li.current-lang a::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--ink);
  margin-top: 2px;
}

/* WordPress nav menu adapted to original navigation */
nav.primary ul {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
nav.primary ul li {
  margin: 0;
}
nav.primary ul li a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  position: relative;
  padding: 0.4rem 0;
  transition: color 0.3s var(--ease);
}
nav.primary ul li a:hover {
  color: var(--ink);
}
nav.primary ul li.current-menu-item > a,
nav.primary ul li.current_page_item > a {
  color: var(--ink);
}
nav.primary ul li.current-menu-item > a::after,
nav.primary ul li.current_page_item > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
}

/* Mobile menu nav as WP menu */
.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-nav ul li {
  margin: 0;
}

/* Custom logo (WP customizer-driven) sizing */
.custom-logo-link {
  display: block;
  line-height: 0;
}
.custom-logo {
  max-height: 56px;
  width: auto;
  height: auto;
}

/* WP body classes safety: no margin reset interference */
body.wp-singular,
body.wp-admin-bar-showing { 
  /* Account for admin bar when logged in */
}
body.admin-bar #header {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar #header {
    top: 46px;
  }
}

/* Hide Polylang's <select> on mobile when we use a custom one */
.pll-switcher-select {
  display: none;
}

/* Rimuovi il gradient di default dei .gallery-item quando c'è foto inline,
   altrimenti la foto si vede sotto un velo verde/grigio. */
.gallery-item[style*="background-image"] {
	background-color: transparent !important;
}
.gallery-item[style*="background-image"]:nth-child(n) {
	background-image: var(--vh-bg, none);
}

/* ----- Mobile menu: tap target più ampio e z-index sopra al header ----- */
.mobile-nav.open {
	z-index: 200 !important;  /* sopra all'header che è 100 */
}

.mobile-nav a {
	padding: 0.6rem 1.4rem;
	display: inline-block;
	min-height: 44px;
	min-width: 44px;
	line-height: 1.4;
	pointer-events: auto;
}

.mobile-lang {
	margin-top: 1.5rem;
}

/* Quando mobile-nav è aperto, il toggle deve restare cliccabile e sopra */
body .menu-toggle {
	position: relative;
	z-index: 201;
}

/* Su mobile, ridurre l'aspect ratio delle immagini per non occupare troppo verticalmente */
@media (max-width: 768px) {
	.intro-image[style*="background-image"],
	.path-image-block[style*="background-image"],
	.image-block[style*="background-image"] {
		aspect-ratio: 16/11 !important;
		min-height: 280px;
	}
}

/* ============================================================
   FIX v1.0.3 — Mobile zoom prevention
   ============================================================ */

/* Su mobile, gli elementi cliccabili devono avere font-size minimo 16px
   altrimenti Android Chrome e iOS Safari zoomano automaticamente al tap.
   Manteniamo il design "label" piccolo via transform: scale, così visivamente
   resta uguale ma il browser misura una taglia di sicurezza. */
@media (max-width: 900px) {
	.mobile-nav a,
	.lang-toggle button,
	.lang-toggle a,
	nav.primary a,
	button,
	a[href^="tel:"],
	a[href^="mailto:"],
	input,
	select,
	textarea {
		font-size: 16px !important;
	}
	
	/* Le label visive piccole le mantengo piccole, ma non sono cliccabili
	   quindi non causano zoom */
	.label {
		font-size: 11px !important;
	}
}

/* Bonus: evita tap-highlight blu/grigio standard di Android su tutti
   gli elementi interattivi (più pulito esteticamente) */
a, button {
	-webkit-tap-highlight-color: transparent;
}

/* ============================================================
   FIX v1.0.4 — Logo Villa Hélène + logo Pedonier nel footer
   ============================================================ */

/* Il logo Villa Hélène è dorato; il CSS originale aveva un filter invert
   che lo rendeva color cyan su sfondo scuro (per loghi B/N). Per un logo
   dorato come questo, lo lasciamo nel suo colore originale sempre. */
.logo--mark img,
header.site-header.scrolled .logo--mark img {
	filter: none !important;
}

/* Aspect ratio del logo header */
.logo--mark img {
	height: 56px !important;
	width: auto;
}
header.site-header.scrolled .logo--mark img {
	height: 44px !important;
}
@media (max-width: 600px) {
	.logo--mark img { height: 44px !important; }
	header.site-header.scrolled .logo--mark img { height: 38px !important; }
}

/* Logo Villa Hélène nel footer: dimensione e niente invert */
.logo--mark-footer img {
	height: 84px !important;
	width: auto;
	filter: none !important;
	max-width: 100%;
}

/* Logo Pedonier nel footer: bianco su sfondo scuro, dimensione contenuta */
.footer-pedonier-logo-link {
	display: block;
	margin-bottom: 0.9rem;
	line-height: 0;
}
.footer-pedonier-logo {
	display: block;
	max-width: 140px;
	width: 100%;
	height: auto;
	opacity: 0.92;
	transition: opacity 0.3s ease;
}
.footer-pedonier-logo-link:hover .footer-pedonier-logo {
	opacity: 1;
}

/* ============================================================
   FIX v1.0.6 — Anti-overflow orizzontale mobile + coerenza foto
   ============================================================ */

/* GLOBAL: blocco assoluto dell'overflow orizzontale.
   Se un elemento sfora, viene tagliato invece di forzare lo scroll
   orizzontale dell'intero documento. */
html, body {
	overflow-x: hidden;
	max-width: 100vw;
}

/* Tutte le immagini non devono mai eccedere il container */
img {
	max-width: 100%;
	height: auto;
}

/* Cambio breakpoint mobile da 768 → 900 per allinearmi con il CSS originale */
@media (max-width: 900px) {

	/* Aspect-ratio uniforme per TUTTI i blocchi foto su mobile,
	   così l'hero e le foto sotto hanno la stessa "altezza relativa"
	   e non c'è più la sensazione di sfasamento dimensionale. */
	.intro-image[style*="background-image"],
	.path-image-block[style*="background-image"],
	.image-block[style*="background-image"] {
		aspect-ratio: 16/11 !important;
		min-height: 240px;
		max-height: 60vh;
		width: 100% !important;
	}

	/* Hero: altezza ragionevole su mobile (non occupa tutto lo schermo) */
	.hero {
		min-height: 80vh;
		max-height: 100vh;
	}

	/* Gallery strip: contenitore con scroll orizzontale isolato.
	   Se non isolato, il browser propaga lo scroll al documento. */
	.gallery-strip-wrap {
		max-width: 100vw;
		overflow: hidden;
		position: relative;
	}
	.gallery-strip {
		max-width: 100%;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.gallery-item {
		scroll-snap-align: start;
	}

	/* Sezioni full-bleed: bloccato il bordo destro così non sforano */
	section, header, footer, .container, .container-narrow,
	.intro-grid, .path-grid, .estate-grid, .location-grid,
	.estate-page-grid, .event-format-grid, .suite-grid, .footer-grid {
		max-width: 100vw;
		overflow-x: hidden;
	}

	/* Header fixed: forza il riferimento al viewport, non al documento.
	   Questo previene il "salto" dell'header quando c'è overflow nel body. */
	header.site-header {
		left: 0 !important;
		right: 0 !important;
		width: 100vw;
		max-width: 100vw;
		box-sizing: border-box;
	}

	/* Menu toggle: garantito visibile a destra del viewport */
	.menu-toggle {
		display: block;
		position: relative;
		z-index: 105;
	}
}

/* ============================================================
   v1.1.0 — HERO CAROUSEL
   ============================================================ */

/* Wrapper carousel: deve avere position relative per posizionare slide e dots */
.hero-carousel {
	position: relative;
	overflow: hidden;
	/* preservo eventuali stili .hero esistenti */
}

/* Container delle slide */
.hero-slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Singola slide: copre l'intero hero, default nascosta */
.hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
	will-change: opacity;
}

.hero-slide.is-active {
	opacity: 1;
	z-index: 1;
}

/* Il contenuto (titolo, label, lead) deve stare SOPRA le slide */
.hero-carousel .hero-content {
	position: relative;
	z-index: 10;
}

/* Dots: pulsanti circolari centrati in basso */
.hero-dots {
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.7rem;
	z-index: 20;
	padding: 0.5rem 1rem;
}

.hero-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1px solid rgba(244, 239, 230, 0.7);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: all 0.4s var(--ease, ease);
	-webkit-tap-highlight-color: transparent;
	/* Touch area generosa (44x44) anche se visualmente piccolo */
	position: relative;
}
.hero-dot::after {
	content: '';
	position: absolute;
	inset: -16px;
	/* Area cliccabile invisibile, garantisce tap target sufficiente */
}

.hero-dot:hover {
	background: rgba(244, 239, 230, 0.5);
	border-color: rgba(244, 239, 230, 0.95);
}

.hero-dot.is-active {
	background: rgba(244, 239, 230, 0.95);
	border-color: rgba(244, 239, 230, 0.95);
	width: 28px;
	border-radius: 12px;
}

@media (max-width: 600px) {
	.hero-dots {
		bottom: 1.5rem;
		gap: 0.5rem;
	}
	.hero-dot {
		width: 8px;
		height: 8px;
	}
	.hero-dot.is-active {
		width: 22px;
	}
}

/* ============================================================
   v1.2.0 — CAROUSEL GENERICO + EVENTS CAROUSEL + GOOGLE MAPS
   ============================================================ */

/* --- Carousel base riusabile (pattern .vh-*) --- */
.vh-carousel {
	position: relative;
	overflow: hidden;
}
.vh-slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.vh-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
	will-change: opacity;
}
.vh-slide.is-active {
	opacity: 1;
	z-index: 1;
}

/* Dots base */
.vh-dots {
	display: flex;
	gap: 0.6rem;
	z-index: 20;
	justify-content: center;
}
.vh-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1px solid rgba(244, 239, 230, 0.7);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: all 0.4s ease;
	-webkit-tap-highlight-color: transparent;
	position: relative;
}
.vh-dot::after {
	content: '';
	position: absolute;
	inset: -14px;
}
.vh-dot:hover {
	background: rgba(244, 239, 230, 0.5);
}
.vh-dot.is-active {
	background: rgba(244, 239, 230, 0.95);
	border-color: rgba(244, 239, 230, 0.95);
	width: 26px;
	border-radius: 12px;
}

/* --- Events carousel (3 categorie) --- */
/* Il wrapper .image-block.events-image-carousel mantiene aspect-ratio
   del CSS originale (.image-block). Dentro c'è il carousel inner. */
.events-image-carousel-inner {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.events-image-carousel-inner .vh-slides {
	position: absolute;
	inset: 0;
}
.events-image-carousel-inner .img-caption {
	z-index: 5;
}
.events-image-carousel-inner .vh-dots {
	position: absolute;
	bottom: 1rem;
	left: 0;
	right: 0;
	width: 100%;
	justify-content: center;
	gap: 0.5rem;
}
.events-image-carousel-inner .vh-dot {
	width: 8px;
	height: 8px;
}
.events-image-carousel-inner .vh-dot.is-active {
	width: 22px;
}

/* Fix per il caso .image-block che adesso contiene un carousel:
   rimuoviamo il background gradient placeholder originale */
.image-block.events-image-carousel {
	background: none !important;
}
.image-block.events-image-carousel::before,
.image-block.events-image-carousel::after {
	display: none !important;
}

/* --- Google Maps --- */
.location-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: stretch;
}
.location-map {
	position: relative;
	min-height: 380px;
	border-radius: 2px;
	overflow: hidden;
	background: var(--paper);
	box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.location-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 380px;
	filter: grayscale(0.15) contrast(0.95);
}

@media (max-width: 900px) {
	.location-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.location-map {
		min-height: 320px;
	}
	.location-map iframe {
		min-height: 320px;
	}
}

/* ============================================================
   v1.2.1 — Fix mobile: spazio sopra hero + ordine path-grid
   ============================================================ */

@media (max-width: 900px) {

	/* Hero: più respiro tra header (logo) e prima frase
	   (era troppo attaccato su mobile). */
	.hero,
	.hero-carousel {
		padding-top: 5rem;
	}
	.hero-content,
	.hero-carousel .hero-content {
		padding-top: 2rem;
	}

	/* Path sections (Volume primo · Eventi + Volume secondo · Soggiorni):
	   su mobile mostrare prima il TESTO e poi la FOTO, per entrambe le sezioni.
	   Su desktop il layout 2-colonne rimane invariato. */
	.path-grid,
	.path-grid--reverse {
		display: flex;
		flex-direction: column;
	}
	.path-grid .path-text-block,
	.path-grid--reverse .path-text-block {
		order: 1;
	}
	.path-grid .path-image-block,
	.path-grid--reverse .path-image-block {
		order: 2;
		margin-top: 1.5rem;
	}
}

/* ============================================================
   v1.2.2 — Fix mobile inquiry-meta + Maps link esterno
   ============================================================ */

/* Inquiry meta: email · telefono. Su mobile uno sotto l'altro centrato. */
.inquiry-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	flex-wrap: wrap;
}
@media (max-width: 600px) {
	.inquiry-meta {
		flex-direction: column;
		gap: 0.4rem;
		text-align: center;
	}
	.inquiry-meta > span {
		/* Nascondo il "·" separatore quando vado in colonna */
		display: none;
	}
}

/* Link "Apri su Google Maps" sotto la mappa */
.location-map {
	display: flex;
	flex-direction: column;
}
.location-map iframe {
	flex: 1 1 auto;
}
.location-map-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9rem 1rem;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--mono, monospace);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.3s ease;
}
.location-map-link:hover {
	background: #2c2620;
}
.location-map-link .arrow {
	font-family: var(--sans);
	font-size: 0.9rem;
}

/* ============================================================
   v1.2.3 — Frecce navigazione carousel + altezza events su mobile
   ============================================================ */

/* Frecce prev/next sui carousel — semi-trasparenti, hover più visibili */
.vh-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 25;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: rgba(31, 27, 22, 0.5);
	color: rgba(244, 239, 230, 0.95);
	font-size: 28px;
	font-family: 'Cormorant Garamond', serif;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.3s ease, background 0.3s ease, transform 0.3s ease;
	-webkit-tap-highlight-color: transparent;
	padding-bottom: 4px;
}
.vh-arrow:hover {
	opacity: 1;
	background: rgba(31, 27, 22, 0.85);
}
.vh-arrow--prev {
	left: 1rem;
}
.vh-arrow--next {
	right: 1rem;
}

@media (max-width: 600px) {
	.vh-arrow {
		width: 38px;
		height: 38px;
		font-size: 24px;
		opacity: 0.85;
	}
	.vh-arrow--prev { left: 0.5rem; }
	.vh-arrow--next { right: 0.5rem; }
}

/* Eventi: foto un po' meno alte (più orizzontali) su mobile, 
   così il carousel non occupa una schermata intera */
@media (max-width: 900px) {
	.image-block.events-image-carousel,
	.events-image-carousel {
		aspect-ratio: 4/3 !important;
		min-height: 280px;
		max-height: 55vh;
	}
}

/* ============================================================
   v1.2.5 — Aspect ratio orizzontale per carousel eventi
   ============================================================ */

/* I carousel eventi devono ospitare foto orizzontali (cene, allestimenti,
   scene panoramiche). Aspect ratio 3:2 (orizzontale) invece di 4:5
   (verticale) di default per le altre image-block del sito. */
.image-block.events-image-carousel {
	aspect-ratio: 3/2 !important;
	max-height: 70vh;
}

/* Su mobile, foto leggermente più "alte" perché lo schermo è più stretto */
@media (max-width: 900px) {
	.image-block.events-image-carousel,
	.events-image-carousel {
		aspect-ratio: 4/3 !important;
		min-height: 240px;
		max-height: 50vh;
	}
}

/* Per essere sicuri che background-position non clippi il soggetto centrale,
   permetto a Lorenzo di aggiungere classi specifiche per ogni slide:
   .vh-slide.focus-top, .vh-slide.focus-bottom, .vh-slide.focus-left, etc.
   Le applico opzionalmente se servono. Per ora default è center center. */
.vh-slide.focus-top    { background-position: center top !important; }
.vh-slide.focus-bottom { background-position: center bottom !important; }
.vh-slide.focus-left   { background-position: left center !important; }
.vh-slide.focus-right  { background-position: right center !important; }

/* ============================================================
   v1.3.0 — Carousel Soggiorni + visibilità toggle IT/EN
   ============================================================ */

/* Stays carousel: aspect-ratio verticale (4/5) come originale, perché
   le foto camera/suite sono spesso ritratti (mostrano l'altezza). */
.image-block.stays-image-carousel {
	aspect-ratio: 4/5 !important;
	max-height: 80vh;
}

.stays-image-carousel-inner {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.stays-image-carousel-inner .vh-slides {
	position: absolute;
	inset: 0;
}
.stays-image-carousel-inner .img-caption {
	z-index: 5;
}
.stays-image-carousel-inner .vh-dots {
	position: absolute;
	bottom: 1rem;
	left: 0;
	right: 0;
	width: 100%;
	justify-content: center;
	gap: 0.5rem;
}
.stays-image-carousel-inner .vh-dot {
	width: 8px;
	height: 8px;
}
.stays-image-carousel-inner .vh-dot.is-active {
	width: 22px;
}

.image-block.stays-image-carousel {
	background: none !important;
}
.image-block.stays-image-carousel::before,
.image-block.stays-image-carousel::after {
	display: none !important;
}

@media (max-width: 900px) {
	.image-block.stays-image-carousel {
		aspect-ratio: 3/4 !important;
		min-height: 320px;
		max-height: 70vh;
	}
}

/* ============================================================
   Toggle IT/EN sempre visibile (anche su Su Invito col plugin)
   ============================================================ */

/* Z-index molto alto per garantire che l'header e il toggle siano
   sopra qualsiasi cosa renderizzata dal plugin o dal content */
header.site-header {
	z-index: 1000;
}
.lang-toggle {
	z-index: 1001;
}

/* Su sfondi chiari (pagine generic come Su Invito quando si scrolla
   verso il content paper), il toggle non scrolled era troppo trasparente.
   Aumento il contrasto del color avorio chiaro per essere leggibile
   anche su sfondo chiaro nei primi pixel della pagina. */
.lang-toggle button {
	color: rgba(120, 100, 75, 0.85) !important;
}
.lang-toggle button.active {
	color: var(--ink) !important;
}
header.site-header.scrolled .lang-toggle button {
	color: var(--stone) !important;
}
header.site-header.scrolled .lang-toggle button.active {
	color: var(--ink) !important;
}

/* Quando l'header è su sfondo scuro (es. hero non scrolled in homepage),
   il toggle diventa avorio chiaro come prima */
body.home header.site-header:not(.scrolled) .lang-toggle button,
.hero ~ header.site-header:not(.scrolled) .lang-toggle button {
	color: rgba(244, 239, 230, 0.7) !important;
}
body.home header.site-header:not(.scrolled) .lang-toggle button.active {
	color: var(--paper) !important;
}

/* Pagina template default (page.php — usata per Su Invito): assicura che
   il page-hero abbia altezza sufficiente perché il toggle sia su sfondo scuro */
body.vh-page-su-invito .page-hero,
body.vh-page-accedi .page-hero,
body.vh-page-richiesta-accesso .page-hero {
	min-height: 50vh;
}

/* ============================================================
   v1.3.1 — Trattino prima E dopo il nome del citato
   ============================================================ */
.pull-quote cite::after {
	content: '—';
	margin-left: 8px;
	color: var(--stone);
}

/* ============================================================
   v1.3.2 — Toggle IT/EN come link funzionanti (compat plugin)
   ============================================================ */

/* Il toggle adesso usa <a> invece di <button>, applico gli stessi stili */
.lang-toggle a {
	background: none;
	border: none;
	font: inherit;
	letter-spacing: inherit;
	color: rgba(120, 100, 75, 0.85);
	cursor: pointer;
	padding: 4px 6px;
	text-decoration: none;
	transition: color 0.3s ease;
	display: inline-block;
}

.lang-toggle a.active {
	color: var(--ink);
}

header.site-header.scrolled .lang-toggle a {
	color: var(--stone);
}
header.site-header.scrolled .lang-toggle a.active {
	color: var(--ink);
}

.lang-toggle a:hover {
	color: var(--olive);
}

/* Su home/hero scuro (header non scrolled) — toggle avorio chiaro */
body.home header.site-header:not(.scrolled) .lang-toggle a,
.hero ~ * header.site-header:not(.scrolled) .lang-toggle a {
	color: rgba(244, 239, 230, 0.7);
}
body.home header.site-header:not(.scrolled) .lang-toggle a.active {
	color: var(--paper);
}

/* ============================================================
   v1.3.4 — Hero title: "Dove prendono vita..." su nuova riga
   ============================================================ */

/* Il sub-titolo italico va a capo sotto "Villa Hélène." */
.hero h1.display .ital {
	display: block;
	margin-top: 0.4em;
}

/* Su mobile spazio più stretto */
@media (max-width: 600px) {
	.hero h1.display .ital {
		margin-top: 0.3em;
	}
}

/* ============================================================
   v1.3.6 — Foto Soggiorni: aspect 3/2 (era 4/5, troppo verticale)
   ============================================================ */
.image-block.stays-image-carousel {
	aspect-ratio: 3/2 !important;
	max-height: 70vh;
}
@media (max-width: 900px) {
	.image-block.stays-image-carousel {
		aspect-ratio: 4/3 !important;
		min-height: 280px;
		max-height: 55vh;
	}
}


/* ============================================================
   v1.3.8 — Hero BG ACF (Estate/Events/Stays) + Carousel ch3
   ============================================================ */

/* Page-hero con foto via ACF: disabilita il radial gradient dorato ::before
   per non interferire con la foto */
.page-hero--photo::before {
	display: none;
}

/* Carousel del Capitolo Terzo "Continuare" — usa stesso pattern eventi/stays */
.image-block.estate-ch3-carousel {
	background: none !important;
	aspect-ratio: 4/5;
	max-height: 80vh;
}
.image-block.estate-ch3-carousel::before,
.image-block.estate-ch3-carousel::after {
	display: none !important;
}
.estate-ch3-carousel-inner {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.estate-ch3-carousel-inner .vh-slides {
	position: absolute;
	inset: 0;
}
.estate-ch3-carousel-inner .vh-dots {
	position: absolute;
	bottom: 1rem;
	left: 0;
	right: 0;
	width: 100%;
	justify-content: center;
	gap: 0.5rem;
}
.estate-ch3-carousel-inner .vh-dot {
	width: 8px;
	height: 8px;
}
.estate-ch3-carousel-inner .vh-dot.is-active {
	width: 22px;
}

@media (max-width: 900px) {
	.image-block.estate-ch3-carousel {
		aspect-ratio: 4/3 !important;
		min-height: 280px;
		max-height: 55vh;
	}
}

/* === 3) Carousel Soggiorni: freccia destra non si vedeva.
   Forzo z-index alto e visibility per entrambe le frecce */
.vh-arrow,
.vh-arrow--prev,
.vh-arrow--next {
	z-index: 100 !important;
	display: flex !important;
	visibility: visible !important;
	opacity: 0.85;
}
.stays-image-carousel-inner .vh-arrow--prev,
.events-image-carousel-inner .vh-arrow--prev,
.estate-ch3-carousel-inner .vh-arrow--prev {
	left: 0.8rem !important;
}
.stays-image-carousel-inner .vh-arrow--next,
.events-image-carousel-inner .vh-arrow--next,
.estate-ch3-carousel-inner .vh-arrow--next {
	right: 0.8rem !important;
}
@media (max-width: 600px) {
	.stays-image-carousel-inner .vh-arrow--prev,
	.events-image-carousel-inner .vh-arrow--prev,
	.estate-ch3-carousel-inner .vh-arrow--prev {
		left: 0.4rem !important;
	}
	.stays-image-carousel-inner .vh-arrow--next,
	.events-image-carousel-inner .vh-arrow--next,
	.estate-ch3-carousel-inner .vh-arrow--next {
		right: 0.4rem !important;
	}
}

/* === 4) Menu mobile: "La Tenuta" non cliccabile per overlap col logo header.
   Aumento z-index del menu sopra il logo e do padding-top così la prima
   voce non è coperta dall'header */
.mobile-nav {
	z-index: 999 !important;
}
.mobile-nav.open {
	padding-top: 6rem;
	padding-bottom: 3rem;
	justify-content: flex-start !important;
	overflow-y: auto;
}
.mobile-nav a {
	padding: 0.8rem 1rem;
	display: block;
	min-height: 44px;
}

/* === 5) Foto La Tenuta non centrate (placeholder)
   Il .image-block dei capitoli mostra placehold.co quando vuoto.
   Forzo background-size cover + centratura coerente */
.estate-page-grid .image-block {
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* ============================================================
   v1.3.10 — Mobile order: titolo, foto, descrizione
   (per Home path + Pagina Eventi + Pagina Soggiorni)
   ============================================================ */

@media (max-width: 900px) {

	/* HOME · path-grid (Volume primo Eventi + Volume secondo Soggiorni) */
	.path-grid,
	.path-grid--reverse {
		display: flex !important;
		flex-direction: column;
		gap: 1.5rem;
	}
	.path-grid > .path-text-block,
	.path-grid--reverse > .path-text-block {
		display: contents;
	}
	.path-grid .path-text-header {
		order: 1;
	}
	.path-grid > .path-image-block,
	.path-grid--reverse > .path-image-block {
		order: 2;
	}
	.path-grid .path-text-body {
		order: 3;
	}

	/* PAGINA EVENTI · event-format-grid (Matrimoni, Brand, Gala) */
	.event-format-grid,
	.event-format-grid--reverse {
		display: flex !important;
		flex-direction: column;
		gap: 1.5rem;
	}
	.event-format-grid > .text-block,
	.event-format-grid--reverse > .text-block {
		display: contents;
	}
	.event-format-grid .text-header {
		order: 1;
	}
	.event-format-grid > .image-block,
	.event-format-grid--reverse > .image-block {
		order: 2;
	}
	.event-format-grid .text-body {
		order: 3;
	}

	/* PAGINA SOGGIORNI · suite-grid (3 suite) */
	.suite-grid,
	.suite-grid--reverse {
		display: flex !important;
		flex-direction: column;
		gap: 1.5rem;
	}
	.suite-grid > .text-block,
	.suite-grid--reverse > .text-block {
		display: contents;
	}
	.suite-grid .text-header {
		order: 1;
	}
	.suite-grid > .image-block,
	.suite-grid--reverse > .image-block {
		order: 2;
	}
	.suite-grid .text-body {
		order: 3;
	}

	/* Stili comuni per i wrapper text-header/body */
	.text-header,
	.path-text-header {
		margin-bottom: 0;
	}
	.text-body,
	.path-text-body {
		margin-top: 0;
	}
}

/* === B) Capitolo Terzo "Continuare" — aspect 3/4 per coerenza con altri capitoli */
.estate-page-grid .image-block.estate-ch3-carousel {
	aspect-ratio: 3/4 !important;
	max-height: none;
}
@media (max-width: 900px) {
	.estate-page-grid .image-block.estate-ch3-carousel {
		aspect-ratio: 3/4 !important;
		max-height: 65vh;
	}
}

/* === C) Caption multi-slide eventi — ora la .img-caption è DENTRO ogni .vh-slide
   ed eredita opacity (visibile solo quando slide è is-active) */
.vh-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.vh-slide .img-caption {
	position: absolute;
	bottom: 1.2rem;
	left: 1.2rem;
	right: 3.5rem;
	font-family: var(--label, 'JetBrains Mono', monospace);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--paper, #f4efe6);
	background: rgba(31, 27, 22, 0.55);
	padding: 0.5rem 0.8rem;
	z-index: 5;
	max-width: max-content;
	line-height: 1.3;
}
@media (max-width: 600px) {
	.vh-slide .img-caption {
		bottom: 0.8rem;
		left: 0.8rem;
		right: 3rem;
		font-size: 0.62rem;
		padding: 0.4rem 0.6rem;
	}
}

/* ============================================================
   v1.3.12 — Fix frecce dx mobile + toggle IT/EN inline
   ============================================================ */

/* === Frecce carousel (Soggiorni, Eventi, ch3) su mobile: la dx mancava
   probabilmente per width troppo grande clippata dall'overflow del container.
   Forzo dimensioni più contenute e position aggressiva */
@media (max-width: 900px) {
	.vh-arrow,
	.vh-arrow--prev,
	.vh-arrow--next {
		width: 36px !important;
		height: 36px !important;
		font-size: 1.2rem !important;
		display: flex !important;
		visibility: visible !important;
		opacity: 0.9 !important;
		z-index: 100 !important;
		align-items: center;
		justify-content: center;
	}
	.stays-image-carousel-inner .vh-arrow--prev,
	.events-image-carousel-inner .vh-arrow--prev,
	.estate-ch3-carousel-inner .vh-arrow--prev,
	.vh-carousel .vh-arrow--prev {
		left: 6px !important;
		right: auto !important;
	}
	.stays-image-carousel-inner .vh-arrow--next,
	.events-image-carousel-inner .vh-arrow--next,
	.estate-ch3-carousel-inner .vh-arrow--next,
	.vh-carousel .vh-arrow--next {
		right: 6px !important;
		left: auto !important;
	}
}

/* === Toggle IT/EN nel menu mobile: era andato a capo perché il fix v1.3.9
   ha messo display:block + padding su TUTTI gli <a> del mobile-nav.
   Eccezione: i link del lang-switcher restano inline orizzontali */
.mobile-nav .lang-toggle,
.mobile-nav .lang-switcher-pll {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 1.5rem;
	white-space: nowrap;
	list-style: none;
	padding: 0;
}
.mobile-nav .lang-switcher-pll li {
	display: inline-flex;
	margin: 0;
	padding: 0;
}
.mobile-nav .lang-switcher-pll li::after {
	content: '/';
	margin: 0 0.2rem;
	opacity: 0.4;
}
.mobile-nav .lang-switcher-pll li:last-child::after {
	display: none;
}
.mobile-nav .lang-switcher-pll a,
.mobile-nav .lang-toggle a {
	display: inline-block !important;
	padding: 0.4rem 0.6rem !important;
	min-height: auto !important;
	font-size: 0.95rem;
}

/* ============================================================
   v1.3.13 — Frecce carousel su mobile: nascoste (swipe touch JS le sostituisce)
   ============================================================ */
@media (max-width: 900px) {
	.vh-arrow,
	.vh-arrow--prev,
	.vh-arrow--next {
		display: none !important;
	}
	/* Aumento leggermente i dots su mobile per usabilità touch */
	.vh-dot {
		width: 10px !important;
		height: 10px !important;
	}
	.vh-dot.is-active {
		width: 28px !important;
	}
}

/* ============================================================
   v1.3.17 — Placeholder neutro + IT/EN mobile inline rafforzato
   ============================================================ */

/* Toggle IT/EN nel menu mobile: stesso fix v1.3.12 ma più robusto.
   Forzo whitespace nowrap su TUTTO il container del toggle */
@media (max-width: 900px) {
	.mobile-nav .lang-toggle,
	.mobile-nav .lang-switcher-pll,
	.mobile-nav ul.lang-switcher-pll {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 0.4rem !important;
		margin-top: 1.5rem !important;
		white-space: nowrap !important;
		list-style: none !important;
		padding: 0 !important;
		width: 100% !important;
	}
	.mobile-nav .lang-switcher-pll li,
	.mobile-nav .lang-toggle li {
		display: inline-flex !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 auto !important;
		white-space: nowrap !important;
	}
	.mobile-nav .lang-switcher-pll a,
	.mobile-nav .lang-toggle a {
		display: inline-block !important;
		padding: 0.4rem 0.6rem !important;
		min-height: auto !important;
		font-size: 0.95rem !important;
		white-space: nowrap !important;
	}
}

/* ============================================================
   v1.3.19 — 5 fix mobile (IT/EN, foto path, foto estate-image,
   location proximity scroll, CTA inquiry)
   ============================================================ */

/* === 1) Foto Volume primo (path-image-block) tagliata in alto su mobile.
   Cambio a contain con paper background per mostrare TUTTA la foto */
@media (max-width: 900px) {
	.path-image-block[style*="background-image"] {
		background-size: contain !important;
		background-position: center center !important;
		background-color: var(--paper) !important;
		background-repeat: no-repeat !important;
		aspect-ratio: 4/3 !important;
		min-height: 280px !important;
	}
}

/* === 2) IT/EN sfalsato + va a capo su mobile.
   Selettore CORRETTO: .mobile-lang (non .mobile-nav .lang-toggle) */
@media (max-width: 900px) {
	.mobile-lang {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 0.4rem !important;
		white-space: nowrap !important;
		margin-top: 1.5rem !important;
	}
	.mobile-lang a,
	.mobile-lang .sep {
		display: inline-block !important;
		padding: 0.4rem 0.5rem !important;
		min-height: auto !important;
		min-width: auto !important;
		font-size: 1rem !important;
		white-space: nowrap !important;
	}
	.mobile-lang .sep {
		opacity: 0.4;
		padding: 0.4rem 0.2rem !important;
	}
}

/* === 3) Foto "Costruita per ospitare" (estate-image) zoomata su mobile.
   Forzo contain per mostrare TUTTA la foto, paper background per integrare */

/* === 4) Sezione "03 Posizione" — proximity items che scrollano orizzontale */
@media (max-width: 900px) {
	.location {
		overflow-x: hidden !important;
	}
	.proximity {
		display: flex !important;
		flex-direction: column !important;
		gap: 0.5rem !important;
		width: 100% !important;
		overflow-x: hidden !important;
	}
	.proximity-item {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 0.5rem !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
		word-break: break-word !important;
	}
	.proximity-item .pcode,
	.proximity-item .pname,
	.proximity-item .ptime {
		flex-shrink: 1 !important;
		min-width: 0 !important;
		word-break: break-word !important;
	}
	.proximity-item .ptime {
		margin-left: auto !important;
		text-align: right !important;
	}
}

/* === 5) CTA "Invia una richiesta" che va a capo su mobile.
   Forzo nowrap + font adattivo (clamp) per stare in una sola riga */
.inquiry .container a,
.inquiry .container a.cta,
.inquiry-cta {
	white-space: nowrap !important;
}
@media (max-width: 600px) {
	.inquiry .container a,
	.inquiry .container a.cta,
	.inquiry-cta {
		font-size: clamp(0.8rem, 3.5vw, 1rem) !important;
		white-space: nowrap !important;
		max-width: 100% !important;
	}
}

/* ============================================================
   v1.3.20 — Foto bottiglia mobile: fix definitivo con selettore super-specifico
   ============================================================ */

/* Selettore body+section+class per superare ogni regola precedente */


/* ============================================================
   v1.3.21 — .estate-image: regola UNICA finale (sovrascrive tutte le vecchie)
   ============================================================ */


/* ============================================================
   v1.3.23 — .estate-image ora usa <img> reale (no background).
   La foto si adatta SEMPRE intera: niente zoom, niente taglio, niente bordi.
   ============================================================ */
.estate-image {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	overflow: visible;
}
.estate-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 2px;
}
@media (max-width: 900px) {
	.estate-image img {
		width: 100%;
		max-width: 480px;
		margin: 0 auto;
	}
}


/* ============================================================
   v1.3.24 — .intro-image ora usa <img> reale (no background).
   Foto sempre intera: niente zoom, niente taglio.
   ============================================================ */
.intro-image {
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	overflow: visible !important;
	aspect-ratio: auto !important;
}
.intro-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 2px;
}
@media (max-width: 900px) {
	.intro-image img {
		max-width: 480px;
		margin: 0 auto;
	}
}

/* ============================================================
   v1.3.26 — Gallery: garantisco cover + posizione personalizzabile.
   background-position arriva dall'inline style (campo ACF per ogni foto).
   ============================================================ */
.gallery-item[style*="background-image"] {
	background-size: cover !important;
	background-repeat: no-repeat !important;
	/* background-position NON forzato qui: viene dall'inline style per-foto */
}

/* ============================================================
   v1.3.27 — Fix mosaico/tiling: NESSUNA foto di sfondo si ripete mai.
   Causa del "le foto si raddoppiano/triplicano con lo zoom out".
   Regola globale catch-all su ogni elemento con background-image inline.
   ============================================================ */
[style*="background-image"] {
	background-repeat: no-repeat !important;
	background-size: cover !important;
}
/* Eccezione: intro-image ed estate-image ora usano <img>, non background.
   Se restasse un fallback, comunque non si ripete. */

/* ============================================================
   v1.3.29 — Bottone WhatsApp flottante + slide eventi fino a 15
   ============================================================ */
.vh-whatsapp-float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 9999;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0,0,0,0.22);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	text-decoration: none;
}
.vh-whatsapp-float:hover {
	transform: scale(1.08);
	box-shadow: 0 8px 26px rgba(0,0,0,0.3);
}
.vh-whatsapp-float svg {
	display: block;
}
@media (max-width: 600px) {
	.vh-whatsapp-float {
		right: 16px;
		bottom: 16px;
		width: 52px;
		height: 52px;
	}
}

/* ============================================================
   v1.3.32 — Box testo a scroll interno (Eventi + Suites home)
   Altezza fissa, scroll interno: il testo lungo non spinge giù il layout.
   ============================================================ */
.path-text-scroll {
	max-height: 300px;
	overflow-y: auto;
	padding-right: 14px;
	margin-bottom: 1rem;
	/* scrollbar discreta */
	scrollbar-width: thin;
	scrollbar-color: var(--stone) transparent;
	-webkit-overflow-scrolling: touch;
	/* sfumatura in basso per suggerire che c'è altro testo */
	mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.path-text-scroll p {
	margin-bottom: 0.9rem;
}
.path-text-scroll::-webkit-scrollbar {
	width: 6px;
}
.path-text-scroll::-webkit-scrollbar-thumb {
	background: var(--stone);
	border-radius: 3px;
}
.path-text-scroll::-webkit-scrollbar-track {
	background: transparent;
}
@media (max-width: 900px) {
	.path-text-scroll {
		max-height: 200px;
	}
}

/* ============================================================
   v1.3.35 — Paragrafi allineati a sinistra e spaziati (no centrato, no corsivo)
   ============================================================ */
/* Testo lungo dentro il box scroll (home Eventi + Suites) */
.path-text-centered p {
	text-align: left;
	margin-bottom: 1.1rem;
	line-height: 1.75;
}
.path-text-centered p:last-child {
	margin-bottom: 0;
}

/* Sezione intro testo sotto la hero (pagina Eventi) */
.page-intro-text {
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(1rem, 3vw, 2rem);
	background: var(--ivory);
}
.intro-text-centered p {
	text-align: left;
	max-width: 760px;
	margin: 0 auto 1.2rem;
	line-height: 1.8;
	font-size: 1.05rem;
	color: var(--ink-soft);
}
.intro-text-centered p:first-child {
	font-size: 1.05rem;
	font-family: var(--sans);
	font-style: normal;
	color: var(--ink-soft);
	margin-bottom: 1.2rem;
}
.intro-text-centered p:last-child {
	margin-bottom: 0;
}
@media (max-width: 900px) {
	.intro-text-centered p,
	.intro-text-centered p:first-child {
		font-size: 1rem;
	}
}

/* ============================================================
   v1.3.39 — Lettera: titolo a piena larghezza; sotto testo sx + ritratto dx
   La foto parte dalla prima riga del TESTO, non dal titolo.
   ============================================================ */
.owner-letter {
	padding: clamp(3.5rem, 8vh, 6rem) 0;
}
.owner-letter-head {
	margin-bottom: 2rem;
}
.owner-letter-grid {
	display: grid;
	grid-template-columns: 1fr clamp(280px, 32%, 420px);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.owner-letter-body p {
	text-align: left;
	margin-bottom: 1.1rem;
	line-height: 1.85;
	color: var(--ink-soft);
}
.owner-letter-body p:last-child {
	margin-bottom: 0;
}
/* Ritratto a destra, allineato in alto col testo, resta visibile scrollando */
.owner-letter-portrait {
	position: sticky;
	top: 110px;
}
.owner-letter-portrait img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 2px;
}
.owner-letter-portrait-placeholder {
	width: 100%;
	aspect-ratio: 3/4;
	background: var(--paper);
	border: 1px dashed var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--stone);
	font-family: var(--label);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
@media (max-width: 900px) {
	.owner-letter-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.owner-letter-portrait {
		position: static;
		max-width: 360px;
		margin: 0 auto;
	}
}

/* ============================================================
   v1.3.41 — Dots carousel Suite centrati su mobile (fix robusto)
   ============================================================ */
@media (max-width: 900px) {
	.stays-image-carousel-inner .vh-dots {
		left: 0 !important;
		right: 0 !important;
		transform: none !important;
		width: 100% !important;
		justify-content: center !important;
	}
}

/* ============================================================
   v1.3.43 — Capitolo Continuare: foto INTERE (contain, non zoom)
   ============================================================ */
.estate-ch3-carousel-inner .vh-slide {
	background-size: contain !important;
	background-color: var(--ivory) !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
}

/* ============================================================
   v1.3.44 — Foto Capitolo Oggi: intera (contain, non zoom)
   ============================================================ */
.image-block.img-contain {
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-color: var(--ivory) !important;
}

/* ============================================================
   v1.3.47 — Banner cookie GDPR (coerente con estetica avorio)
   ============================================================ */
.vh-cookie-banner {
	position: fixed;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	z-index: 10000;
	width: calc(100% - 44px);
	max-width: 880px;
	background: var(--ivory, #F4EFE6);
	border: 1px solid var(--line, #D9D2C4);
	box-shadow: 0 10px 40px rgba(31, 27, 22, 0.16);
	border-radius: 3px;
	padding: 1.1rem 1.3rem;
	display: flex;
	align-items: center;
	gap: 1.2rem;
	flex-wrap: wrap;
	justify-content: space-between;
}
.vh-cookie-text {
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--ink-soft, #2C2620);
	flex: 1 1 360px;
}
.vh-cookie-text a {
	color: var(--gold, #A08246);
	text-decoration: underline;
}
.vh-cookie-actions {
	display: flex;
	gap: 0.6rem;
	flex: 0 0 auto;
}
.vh-cookie-btn {
	font-family: var(--label, sans-serif);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.7rem 1.4rem;
	border-radius: 2px;
	cursor: pointer;
	border: 1px solid var(--ink, #1F1B16);
	transition: all 0.3s ease;
	min-height: 44px;
}
.vh-cookie-decline {
	background: transparent;
	color: var(--ink, #1F1B16);
}
.vh-cookie-decline:hover {
	background: rgba(31, 27, 22, 0.06);
}
.vh-cookie-accept {
	background: var(--ink, #1F1B16);
	color: var(--ivory, #F4EFE6);
}
.vh-cookie-accept:hover {
	background: var(--gold, #A08246);
	border-color: var(--gold, #A08246);
}
@media (max-width: 600px) {
	.vh-cookie-banner {
		bottom: 12px;
		padding: 1rem;
		gap: 0.8rem;
	}
	.vh-cookie-actions {
		width: 100%;
	}
	.vh-cookie-btn {
		flex: 1;
	}
	/* Il WhatsApp si alza sopra il banner SOLO mentre il banner è visibile.
	   La classe sul <body> viene aggiunta/rimossa via JS. */
	body.vh-cookie-open .vh-whatsapp-float {
		bottom: 150px;
	}
}

/* ============================================================
   v1.3.48 — Link policy nella fascia footer (discreti)
   ============================================================ */
.footer-bottom a {
	color: inherit;
	text-decoration: none;
	opacity: 0.75;
	transition: opacity 0.3s ease;
}
.footer-bottom a:hover {
	opacity: 1;
	text-decoration: underline;
}