/* ============================================
   SERRAGAMBETTA - Design System CSS
   Concept: "Radici Pugliesi"
   Mobile-first, CSS Custom Properties
   ============================================ */

/* -- Custom Properties -- */
:root {
  /* Palette Radici Pugliesi */
  --color-bg: #F4F0E9;
  --color-bg-dark: #474742;
  --color-bg-darker: #23282D;
  --color-text: #555555;
  --color-heading: #000000;
  --color-accent: #6C6F25;
  --color-accent-2: #BDAD7B;
  --color-label: #8C8C8C;
  --color-white: #FFFFFF;
  --color-bg-alt: #FDFBF7;       /* bianco caldo per sezioni alternate */
  --color-terracotta: #B8654A;    /* terra rossa pugliese: accenti, hover */
  --color-border: #E5DDD3;
  --color-olive: #6C6F25;         /* alias per --color-accent */
  --color-leaf: #A8C268;          /* verde foglia chiaro luminoso, leggibile su sfondi scuri (footer badges) */
  --color-paper: #FFFFFF;          /* alias per --color-white */
  --color-cream: #F4F0E9;         /* alias per --color-bg */
  --color-body: #555555;          /* alias per --color-text */
  --radius: var(--radius-sm); /* 0.25rem */
  --shadow-soft: var(--shadow-md); /* alias legacy */


  /* Spacing scale */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Radius scale */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Shadow scale */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);

  /* Icon scale */
  --icon-xs:  0.75rem;
  --icon-sm:  1rem;
  --icon-md:  1.25rem;
  --icon-lg:  1.5rem;
  --icon-xl:  2rem;
  --icon-2xl: 3rem;

  /* Tipografia */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-accent: 'Lora', serif;

  /* Dimensioni fluide */
  --h1-size: clamp(2.5rem, 5vw + 1rem, 7.5rem);
  --h2-size: clamp(2rem, 3vw + 0.5rem, 3.75rem);
  --h3-size: clamp(1.5rem, 2vw + 0.25rem, 2.75rem);
  --body-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --small-size: 0.875rem;

  /* Layout */
  --container-max: 1280px;
  --section-padding: clamp(4rem, 7.5vw, 8rem); /* V-006 fix: 1280px → 96px (12×8 grid) invece di 102.4px */
  --container-padding: clamp(1.25rem, 3vw, 2.5rem);

  /* Transizioni */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -- Reset & Base -- */
/* -- Focus visible (accessibilita) -- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* -- Icon utilities -- */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-md);
  height: var(--icon-md);
}
.icon-xs  { width: var(--icon-xs);  height: var(--icon-xs); }
.icon-sm  { width: var(--icon-sm);  height: var(--icon-sm); }
.icon-lg  { width: var(--icon-lg);  height: var(--icon-lg); }
.icon-xl  { width: var(--icon-xl);  height: var(--icon-xl); }
.icon-2xl { width: var(--icon-2xl); height: var(--icon-2xl); }


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

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

body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-heading);
}

/* -- Typography -- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.06em;
  color: var(--color-heading);
  line-height: 1.1;
}

h1 { font-size: var(--h1-size); margin: 0 0 var(--space-lg); }
h2 { font-size: var(--h2-size); margin: var(--space-2xl) 0 var(--space-lg); }
h3 { font-size: var(--h3-size); margin: var(--space-lg) 0 var(--space-md); }
h4 { margin: var(--space-lg) 0 var(--space-md); }

/* Rimuovi margin-top se primo figlio di section/container */
section > .container > h2:first-child,
section > .container > h3:first-child,
.section-page > .container > h2:first-child,
.page-intro + h2,
.container > .overline + h2 { margin-top: 0; }

.overline {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.font-accent {
  font-family: var(--font-accent);
  font-style: italic;
}

/* -- Layout -- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

section {
  padding: var(--section-padding) 0;
}

/* -- Buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: var(--small-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
}

.btn-primary:hover {
  background: #5a5c1f;
  color: var(--color-white);
}

.btn-outline {
  background: transparent;
  color: var(--color-heading);
  border: 1.5px solid var(--color-border);
}

.btn-outline:hover {
  border-color: var(--color-heading);
}

.btn-whatsapp {
  background: #25D366;
  color: var(--color-white);
}

.btn-whatsapp:hover {
  background: #1ebe5a;
  color: var(--color-white);
}

/* ============================================
   HEADER
   ============================================ */
/* -- Header Topbar (contatti) -- */
/* --- Topbar rimossa: contatto telefono spostato in nav-actions --- */

/* Nav phone icon */
.nav-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-phone:hover {
  background: rgba(255,255,255,0.15);
}
.nav-phone svg { flex-shrink: 0; }
.header.scrolled .nav-phone {
  color: var(--color-text);
}
.header.scrolled .nav-phone:hover {
  background: rgba(0,0,0,0.06);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  transition: all var(--transition-base);
  padding: 1.25rem 0;
}

.header.scrolled {
  background: rgba(244, 240, 233, 0.95);
  backdrop-filter: blur(10px);
  padding: 0.75rem 0;
  box-shadow: 0 1px 0 var(--color-border);
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.header.scrolled .logo {
  color: var(--color-heading);
}

/* Logo immagine (header + footer)
   - PNG trasparente (sfondo bianco originale rimosso via PIL)
   - Header iniziale (sopra hero): 64px, scrolled: 52px
   - Footer: 72px, su trasparente, reso bianco via filter trick monocromatico
   - Mobile: ridimensionamento proporzionale */
.logo img {
  height: 150px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: height var(--transition-base), filter var(--transition-fast);
}

.header.scrolled .logo img {
  height: 110px;
  filter: none;
}

.footer-brand .logo img {
  height: 200px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 0;
}

@media (max-width: 1023px) {
  /* Mobile + tablet portrait: logo piu' presente sopra hero, footer in scala */
  .logo img { height: 120px; }
  .header.scrolled .logo img { height: 96px; }
}

@media (max-width: 767px) {
  /* Solo mobile vero (no tablet portrait): footer logo ridotto per equilibrio colonne */
  .footer-brand .logo img { height: 180px; }
}

.nav-menu {
  display: none;
  list-style: none;
  gap: 2rem;
  align-items: center;
}

.nav-menu a {
  font-size: var(--small-size);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--color-white);
}

.header.scrolled .nav-menu a {
  color: var(--color-text);
}

.header.scrolled .nav-menu a:hover,
.header.scrolled .nav-menu a.active {
  color: var(--color-heading);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lang-switcher {
  position: relative;
  display: none; /* shown at >=768px */
  font-size: var(--small-size);
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-white);
  transition: color var(--transition-fast);
}

.header.scrolled .lang-switcher {
  color: var(--color-text);
}

.btn-nav-prenota {
  background: rgba(255,255,255,0.2);
  color: var(--color-white);
  border: 1.5px solid rgba(255,255,255,0.4);
  padding: 8px 20px;
  /* V-004 fix: touch target minimo 44px (iOS HIG + WCAG AA) */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.btn-nav-prenota:hover {
  background: var(--color-white);
  color: var(--color-heading);
}

.header.scrolled .btn-nav-prenota {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.header.scrolled .btn-nav-prenota:hover {
  background: #5a5c1f;
  border-color: #5a5c1f;
}

.lang-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  min-width: 120px;
  padding: 0.5rem 0;
  z-index: 100;
}

.lang-switcher:hover .lang-dropdown {
  display: block;
}

.lang-dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color-text);
  font-size: var(--small-size);
}

.lang-dropdown a:hover {
  background: var(--color-bg);
}

.lang-dropdown a.active {
  color: var(--color-accent);
  font-weight: 600;
}

/* Mobile toggle */
.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-white);
  transition: all var(--transition-fast);
}

.header.scrolled .menu-toggle span {
  background: var(--color-heading);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.12) 40%,
    rgba(0,0,0,0.03) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Mobile slideshow hero (4 foto crossfade, 20s loop, 5s per slide) */
.hero-mobile-slideshow {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-mobile-slideshow .hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: heroFade 20s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-mobile-slideshow .hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-mobile-slideshow .hero-slide:nth-child(2) { animation-delay: 5s; }
.hero-mobile-slideshow .hero-slide:nth-child(3) { animation-delay: 10s; }
.hero-mobile-slideshow .hero-slide:nth-child(4) { animation-delay: 15s; }

@keyframes heroFade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Gradient corner top-left mobile: leggibilita logo bianco + chrome
   v2: intensificato (era troppo sottile per garantire leggibilita su foto chiare) */
.hero-corner-gradient {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55vh;
  background:
    radial-gradient(
      ellipse 80% 60% at 0% 0%,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.55) 35%,
      rgba(0, 0, 0, 0.2) 65%,
      transparent 85%
    );
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 1023px) {
  /* Mobile + tablet portrait: slideshow 4 foto crossfade al posto del video desktop,
     gradient corner top-left per leggibilita logo bianco + chrome */
  .hero-desktop-picture,
  .hero-video {
    display: none;
  }
  .hero-mobile-slideshow {
    display: block;
  }
  .hero-corner-gradient {
    display: block;
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  color: var(--color-white);
}

.hero-content h1 {
  color: var(--color-white);
  font-size: clamp(2.5rem, 12vw, 4rem); /* mobile */
  margin-bottom: 0.5rem;
}

.hero-content .hero-subtitle {
  font-family: var(--font-accent);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

/* Hero video background (local MP4) */
video.hero-video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

@media (min-width: 768px) {
  video.hero-video {
    display: block;
  }
}

.hero-content .hero-welcome {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  line-height: 1.08;
  margin: 0 0 1.4rem;
  max-width: 14em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5);
}

.hero-cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hero-cta .btn {
  background: var(--color-white);
  color: var(--color-heading);
  font-weight: 600;
}

.hero-cta .btn:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

.btn-outline-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 4px;
  color: var(--color-white);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-outline-hero:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--color-white);
}

.hero-geo {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.65);
  margin-bottom: 1.5rem;
}

/* Scroll indicator (chevron animato) */
.hero-scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,0.6);
  animation: hero-bounce 2s ease infinite;
}

@keyframes hero-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(8px); }
  60% { transform: translateX(-50%) translateY(4px); }
}

/* ============================================
   INTRO SECTION (Dal 1880)
   ============================================ */
.section-intro {
  padding: var(--section-padding) 0;
}

.section-storico {
  padding: var(--section-padding) 0;
  background: var(--color-bg-alt, #f7f4f0);
}

.storico-content {
  max-width: 760px;
}

.storico-content p {
  font-size: var(--body-size);
  line-height: 1.8;
  color: var(--color-text);
}

/* K-SERRA-06: storico-grid (testo + foto) */
.storico-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
.storico-grid .storico-text p {
  font-size: var(--body-size);
  line-height: 1.8;
  color: var(--color-text);
  max-width: 60ch;
}
.storico-grid .storico-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (min-width: 768px) {
  .storico-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.intro-text p {
  font-size: var(--body-size);
  max-width: 540px;
}

.intro-image {
  border-radius: 4px;
  overflow: hidden;
}

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

.intro-year {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(5rem, 12vw, 8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-olive);
  opacity: 0.12;
  letter-spacing: -0.03em;
  margin-bottom: -0.5rem;
}
/* variante testuale (nome al posto del numero): stessa resa, adattata alla parola lunga */
.intro-year-word {
  font-size: clamp(2.2rem, 6.5vw, 4rem);
  white-space: nowrap;
  opacity: 0.14;
}

.intro-quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  line-height: 1.6;
  color: var(--color-dark);
  border-left: 3px solid var(--color-gold);
  padding-left: 1.25rem;
  margin: 1.25rem 0;
  max-width: 480px;
}

.intro-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-olive);
  text-decoration: none;
  letter-spacing: 0.02em;
  margin-top: 0.75rem;
  transition: color 0.3s ease;
}

.intro-link:hover {
  color: var(--color-terracotta);
}

/* ============================================
   MARQUEE
   ============================================ */
.section-marquee {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.marquee-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.marquee-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4);
}

.marquee-track {
  position: relative;
  z-index: 1;
  display: flex;
  white-space: nowrap;
  animation: marquee-scroll 20s linear infinite;
}

.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--color-white);
  padding: 0 2rem;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}

.marquee-dot {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4rem);
  color: var(--color-white);
  opacity: 0.4;
  padding: 0 1rem;
}

/* ============================================
   STANZE GRID
   ============================================ */
.section-stanze {
  padding: var(--section-padding) 0;
}

.stanze-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 2rem;
}

.stanza-card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
}

.stanza-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.stanza-card:hover img {
  transform: scale(1.05);
}

.stanza-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

.stanza-card-overlay h3 {
  color: var(--color-white);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.stanza-card-overlay .stanza-prezzo {
  color: rgba(255,255,255,0.8);
  font-size: 0.75rem;
}

/* ============================================
   CUCINA (dark section)
   ============================================ */
.section-cucina {
  background: var(--color-bg-dark);
  padding: var(--section-padding) 0;
}

.cucina-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.section-cucina .overline {
  color: var(--color-accent-2);
}

.section-cucina h2 {
  color: var(--color-white);
}

.section-cucina p {
  color: rgba(255,255,255,0.8);
  max-width: 480px;
}

.cucina-image {
  border-radius: 4px;
  overflow: hidden;
}

.cucina-image img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}

.cucina-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.tag-light {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 3px;
  color: rgba(255,255,255,0.7);
}

.btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  color: var(--color-white);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  margin-top: 1.5rem;
  transition: all var(--transition-fast);
}

.btn-outline-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
}

/* ============================================
   ESPERIENZE
   ============================================ */
.section-esperienze {
  padding: var(--section-padding) 0;
}

.esperienze-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.esperienza-card {
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-white);
  transition: box-shadow var(--transition-base);
}

.esperienza-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.esperienza-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.esperienza-card-body {
  padding: 1.25rem;
}

.esperienza-card-body h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.esperienza-card-body p {
  font-size: var(--small-size);
  color: var(--color-text);
}

/* ============================================
   TERRITORIO
   ============================================ */
.section-territorio {
  padding: var(--section-padding) 0;
}

.territorio-intro {
  max-width: 640px;
  margin-bottom: 2rem;
}

.territorio-location {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.territorio-map iframe {
  width: 100%;
  display: block;
}

.territorio-info p {
  margin-bottom: 1rem;
}

.territorio-indirizzo {
  margin-top: 1rem;
}

.btn-sm {
  font-size: var(--small-size);
  padding: 0.5rem 1.25rem;
}

.territorio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.territorio-card {
  background: var(--color-white);
  border-radius: 4px;
  padding: 1.5rem;
  text-align: center;
  transition: box-shadow var(--transition-base);
}

.territorio-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.territorio-card h3 {
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.territorio-card .km {
  font-size: 2rem;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--color-accent);
}

/* ============================================
   GALLERIA
   ============================================ */
.section-galleria {
  padding: var(--section-padding) 0;
}

/* Galleria foto migrate (K-SERRA-03) */
.section-galleria-migrata {
  background: var(--color-bg-alt);
}

.galleria-migrata-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 2rem;
}

.galleria-migrata-grid picture img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
  transition: opacity var(--transition-fast);
}

.galleria-migrata-grid picture:hover img {
  opacity: 0.88;
}

.dintorni-commento {
  font-style: italic;
  font-size: 0.875rem;
  color: var(--color-text-muted, #888);
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .galleria-migrata-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .galleria-migrata-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.galleria-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 2rem;
}

.galleria-item {
  display: block;
  border-radius: 4px;
  overflow: hidden;
}

.galleria-item img {
  width: 100%;
  border-radius: 4px;
  aspect-ratio: 16/9;
  object-fit: cover;
  cursor: pointer;
  transition: transform var(--transition-smooth), opacity var(--transition-fast);
}

.galleria-item:hover img {
  transform: scale(1.03);
  opacity: 0.92;
}

/* Foto verticale nella galleria (richiesta Sheila): mostrata per intero, mai tagliata */
.galleria-item--tall img {
  aspect-ratio: auto;
  object-fit: cover;
}

/* Grid asimmetrica: responsive rules consolidated in central @768/@1024 blocks */

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.active {
  opacity: 1;
  pointer-events: all;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
}

.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.lightbox-close:hover { opacity: 1; }

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 3rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
  padding: 1rem;
}

.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
.lightbox-prev:hover,
.lightbox-next:hover { opacity: 1; }

/* ============================================
   CTA SECTION (dark)
   ============================================ */
.section-cta {
  position: relative;
  background: url('../img/hero/masseria-desktop.jpg') center/cover no-repeat;
  padding: var(--section-padding) 0;
  text-align: center;
}

.section-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(35, 40, 45, 0.88);
}

.section-cta .container {
  position: relative;
  z-index: 1;
}

.section-cta h2 {
  color: var(--color-white);
  margin-bottom: 0.75rem;
}

.section-cta .cta-subtitle {
  color: rgba(255,255,255,0.7);
  margin-bottom: 2rem;
}

.cta-contacts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  margin-bottom: 2rem;
}

.cta-contacts a {
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 500;
}

.cta-contacts a:hover {
  color: var(--color-accent-2);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--color-bg-darker);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 2rem 0 1.5rem;
  color: rgba(255,255,255,0.7);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.footer-brand {
  /* allineamento ottico del top del logo con la linea base degli h5 delle altre colonne */
  padding-top: 0.25rem;
}

.footer-brand .logo {
  color: var(--color-white);
  margin-bottom: 1rem;
  display: inline-block;
}

.footer-brand p {
  font-size: var(--small-size);
  max-width: 320px;
  line-height: 1.5;
  margin-bottom: 0.4rem;
}

.footer-brand p:last-child {
  margin-bottom: 0;
}

.footer-col h5,
.footer-col .footer-section-label {
  font-family: var(--font-body);
  font-size: var(--small-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
  margin-bottom: 0.75rem;
  /* V-002 (K-SERRA-05): footer-section-label sostituisce h5 per non rompere heading hierarchy */
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 0.5rem;
}

.footer-col a {
  color: rgba(255,255,255,0.6);
  font-size: var(--small-size);
}

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

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  justify-content: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.footer-badge svg {
  flex-shrink: 0;
  stroke: var(--color-leaf);
  width: 18px;
  height: 18px;
}

.footer-bottom {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.75rem;
}

.footer-bottom .footer-legal {
  opacity: 0.6;
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.footer-social a {
  color: rgba(255,255,255,0.6);
  transition: color var(--transition-fast);
}

.footer-social a:hover {
  color: var(--color-white);
}

.footer-social svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   MOBILE DRAWER
   ============================================ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1998;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: var(--color-bg);
  z-index: 1999;
  transform: translateX(100%);
  transition: transform var(--transition-smooth);
  overflow-y: auto;
  padding: 2rem;
}

.mobile-drawer.open {
  transform: translateX(0);
}

.drawer-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.drawer-close svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-heading);
}

.mobile-drawer-nav {
  margin-top: 3rem;
  list-style: none;
}

.mobile-drawer-nav li {
  margin-bottom: 1.5rem;
}

.mobile-drawer-nav a {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--color-heading);
}

.mobile-drawer-nav a:hover {
  color: var(--color-accent);
}

.drawer-cta {
  margin-top: 2rem;
}

/* ============================================
   CAMERA A SUD (template stanza)
   ============================================ */
.stanza-hero {
  position: relative;
  height: 60vh;
  min-height: 300px;
  overflow: hidden;
  margin-top: 60px; /* offset for fixed header (scrolled state) */
}

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

.stanza-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 50%);
}

.breadcrumb {
  padding: 1rem 0;
  font-size: var(--small-size);
  color: var(--color-label);
}

.breadcrumb a {
  color: var(--color-label);
}

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

.breadcrumb span {
  margin: 0 0.5rem;
}

.stanza-content {
  padding: 2rem 0 var(--section-padding);
}

.stanza-header {
  margin-bottom: 2rem;
}

.stanza-header h1 {
  margin-bottom: 0.25rem;
}

.stanza-header .stanza-subtitle {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--color-text);
  font-size: 1.125rem;
}

.stanza-dati {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--color-white);
  border-radius: 4px;
}

.stanza-dato {
  text-align: center;
}

.stanza-dato .dato-valore {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.04em;
  color: var(--color-heading);
}

.stanza-dato .dato-label {
  font-size: 0.75rem;
  color: var(--color-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stanza-galleria {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.stanza-galleria img {
  width: 100%;
  border-radius: 4px;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.stanza-desc {
  margin-bottom: 2rem;
  max-width: 640px;
}

.stanza-servizi {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.servizio-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--color-white);
  border-radius: 4px;
  font-size: var(--small-size);
  color: var(--color-text);
}

.servizio-badge svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-accent);
}

.stanza-prezzo-box {
  background: var(--color-white);
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: center; /* mobile; reset to left at >=768px */
}

.stanza-prezzo-box .prezzo {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  letter-spacing: -0.04em;
  color: var(--color-heading);
}

.stanza-prezzo-box .prezzo-nota {
  font-size: var(--small-size);
  color: var(--color-label);
  margin-top: 0.25rem;
}

.stanza-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.stanza-nav a {
  font-size: var(--small-size);
  font-weight: 500;
  color: var(--color-text);
}

.stanza-nav a:hover {
  color: var(--color-accent);
}

/* ============================================
   PAGE HERO (internal pages)
   ============================================ */
.page-hero {
  position: relative;
  height: 40vh;
  min-height: 300px;
  overflow: hidden;
  margin-top: 60px;
}

.page-hero-short {
  height: 30vh;
  min-height: 240px;
}

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

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.05) 100%);
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.page-hero-overlay h1 {
  color: var(--color-white);
  font-size: var(--h1-size);
  /* V-005 fix: H1 usa il token --h1-size per ratio H1/H2 >= 1.15 (BP-WebDev) */
}

/* ============================================
   PAGE SECTIONS (generic internal)
   ============================================ */
.section-page {
  padding: var(--section-padding) 0;
}

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

.page-intro {
  max-width: 720px;
  margin-bottom: 3rem;
}

.page-intro .lead {
  font-size: clamp(1.125rem, 1vw + 0.875rem, 1.375rem);
  line-height: 1.7;
  color: var(--color-text);
}

/* ============================================
   SPLIT GRID (text + image alternating)
   ============================================ */
.split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.split-text h2 {
  margin-bottom: 1rem;
}

.split-text p {
  font-size: var(--body-size);
  max-width: 540px;
}

.split-image {
  border-radius: 4px;
  overflow: hidden;
}

.split-image img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}

/* ============================================
   INFO GRID (practical info cards)
   ============================================ */
.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.info-card {
  background: var(--color-white);
  border-radius: 4px;
  padding: 2rem;
  transition: box-shadow var(--transition-base);
}

.info-card-visual {
  padding: 0;
  overflow: hidden;
}

.info-card-visual img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.info-card-body {
  padding: 1.5rem;
}

.info-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.info-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.info-card p {
  font-size: var(--body-size);
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.info-card small {
  display: block;
  font-size: var(--small-size);
  color: var(--color-label);
  margin-top: 0.5rem;
}

.info-highlight {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  letter-spacing: -0.04em;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.info-grid-2 {
  grid-template-columns: 1fr;
}

/* ============================================
   CERT BADGE (cucina page)
   ============================================ */
.cert-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1.5rem;
  padding: 1.25rem 1.75rem;
  background: var(--color-white);
  border-radius: 4px;
  border-left: 4px solid var(--color-accent);
}

.cert-badge strong {
  font-size: var(--body-size);
  color: var(--color-heading);
}

.cert-badge span {
  font-size: var(--small-size);
  color: var(--color-label);
  font-family: var(--font-body);
}

/* ============================================
   TEAM GRID (chi siamo)
   ============================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.team-card {
  text-align: center;
}

.team-photo {
  width: 100%;
  height: 200px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  margin: 0 auto 1rem;
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border);
  color: var(--color-label);
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: -0.04em;
}

.team-card h3 {
  font-size: 1.125rem;
  margin-bottom: 0.125rem;
}

.team-ruolo {
  display: block;
  font-size: var(--small-size);
  color: var(--color-accent);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.team-card p {
  font-size: var(--small-size);
  color: var(--color-text);
  max-width: 280px;
  margin: 0 auto;
}

/* ============================================
   MAP (dove siamo)
   ============================================ */
.map-embed {
  margin-top: 2rem;
  border-radius: 4px;
  overflow: hidden;
}

.map-embed iframe {
  display: block;
}

.map-actions {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--color-white);
  border-radius: 4px;
}

.map-address strong {
  color: var(--color-heading);
}

.map-address small {
  color: var(--color-label);
}

.map-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================
   CONTATTI GRID (form + direct contacts)
   ============================================ */
.contatti-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

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

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-group label {
  font-size: var(--small-size);
  font-weight: 500;
  color: var(--color-heading);
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-body);
  font-size: var(--body-size);
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-white);
  color: var(--color-heading);
  transition: border-color var(--transition-fast);
  width: 100%;
  min-width: 0;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-check {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.form-check label {
  font-size: var(--small-size);
  color: var(--color-text);
  cursor: pointer;
}

/* Direct contacts sidebar */
.contatti-diretti h2,
.contatti-diretti h3 {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  /* V-003 fix: h2 sostituisce h3 per heading hierarchy, dimensione invariata */
}

.contatto-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.contatto-item svg {
  flex-shrink: 0;
  margin-top: 0.2rem;
  stroke: var(--color-accent);
}

.contatto-item a {
  font-size: var(--body-size);
  color: var(--color-heading);
  font-weight: 500;
}

.contatto-item a:hover {
  color: var(--color-accent);
}

.contatto-item span {
  font-size: var(--body-size);
  color: var(--color-text);
}

/* ============================================
   STANZA CARD DETAIL (accoglienza listing)
   ============================================ */
.stanza-card-detail {
  display: block;
  text-decoration: none;
}

.stanza-meta {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 0.25rem;
}

/* ============================================
   STANZE CAROUSEL (accoglienza - infinite scroll)
   ============================================ */
.stanze-carousel {
  overflow: hidden;
  width: 100%;
  padding: 1rem 0 2rem;
}

.stanze-carousel-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: stanze-scroll 40s linear infinite;
}

.stanze-carousel-track:hover {
  animation-play-state: paused;
}

.stanze-carousel .stanza-card {
  flex: 0 0 280px;
  aspect-ratio: auto;
  height: 400px;
}

@keyframes stanze-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ============================================
   STANZA NAV (prev/next + center)
   ============================================ */
.stanza-nav-center {
  text-align: center;
}

.stanza-nav-center a {
  font-size: var(--small-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

.stanza-nav-center a:hover {
  color: var(--color-heading);
}

/* ============================================
   TERRITORIO GRID EXTENDED (dove siamo)
   ============================================ */
.territorio-grid-extended {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

/* ============================================
   STATS BAR (homepage, ex features-grid)
   ============================================ */
.section-stats {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--color-bg-darker);
}

.stats-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 80px;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--color-white);
}

.stat-label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
  margin-top: 0.35rem;
}

.stat-divider {
  display: none; /* visible at >=768px */
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.15);
}

/* (features-grid legacy rimosso - sessione 04) */

/* ============================================
   TESTIMONIALS
   ============================================ */
.section-testimonials {
  padding: var(--section-padding) 0;
  background: var(--color-bg-alt);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.testimonial-card {
  background: var(--color-bg);
  border-radius: 4px;
  padding: 2rem;
  border: none;
  margin: 0;
}

.testimonial-stars {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 0.75rem;
}

.testimonial-stars svg {
  width: 18px;
  height: 18px;
  fill: var(--color-accent-2);
  stroke: none;
}

.testimonial-card p {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

.testimonial-card footer {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.testimonial-card footer strong {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-style: normal;
  color: var(--color-heading);
}

.testimonial-card footer span {
  font-family: var(--font-body);
  font-size: var(--small-size);
  font-style: normal;
  color: var(--color-label);
}

/* ============================================
   REVEAL ANIMATIONS
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }


/* Mobile-first base: elementi senza regola base preesistente */
.map-buttons .btn {
  width: 100%;
  justify-content: center;
}

.team-card p {
  display: none; /* visible at >=768px */
}

.contatti-diretti {
  order: -1; /* form before contacts on mobile; reset at >=768px */
}

/* ============================================
   RESPONSIVE: Tablet
   ============================================ */
@media (min-width: 768px) {
  /* Nav menu e burger gestiti separatamente sotto a 1024px:
     a 800px (tablet portrait) le 7 voci si comprimono su 2 righe per via di
     "Agricoltura e Cucina". Burger menu attivo fino a 1023px. Decisione MIA-01. */

  .intro-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .stanze-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cucina-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .esperienze-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .galleria-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .stanza-dati {
    grid-template-columns: repeat(4, 1fr);
  }

  .stanza-galleria {
    grid-template-columns: repeat(2, 1fr);
  }

  .territorio-location {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* --- New page components (tablet) --- */
  .split-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .split-grid-reverse {
    direction: rtl;
  }

  .split-grid-reverse > * {
    direction: ltr;
  }

  .info-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .info-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .info-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  .contatti-grid {
    grid-template-columns: 1.4fr 1fr;
  }

  .map-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .territorio-grid-extended {
    grid-template-columns: repeat(3, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Galleria asimmetrica */
  .galleria-asymmetric {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
  }
  .galleria-asymmetric .galleria-item:first-child {
    grid-column: 1 / -1;
  }
  .galleria-asymmetric .galleria-item:first-child img {
    aspect-ratio: 21/9;
  }

  /* Stanze carousel */
  .stanze-carousel .stanza-card {
    flex: 0 0 360px;
    height: 480px;
  }

  /* Guest stars */
  .guests-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Dove siamo: info grid 5, duo, dintorni */
  .info-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .territorio-duo {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .dintorni-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Mobile-first overrides: restore desktop values */
  .lang-switcher {
    display: block;
  }

  .hero-content h1 {
    font-size: var(--h1-size);
  }

  .stanze-grid {
    gap: 1.5rem;
  }

  .stanza-card-overlay h3 {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
  }

  .stanza-card-overlay .stanza-prezzo {
    font-size: var(--small-size);
  }

  .esperienza-card img {
    aspect-ratio: 16/10;
  }

  .cta-contacts a {
    font-size: 1.125rem;
  }

  .footer {
    padding: 3rem 0 2rem;
  }

  .page-hero {
    height: 50vh;
    min-height: 360px;
  }

  .page-hero-short {
    height: 35vh;
    min-height: 300px;
  }

  /* V-005 fix: rimosso override tablet che riduceva H1 a --h2-size */

  .split-image img {
    aspect-ratio: 4/3;
  }

  .team-grid {
    gap: 2rem;
  }

  .team-card p {
    display: block;
  }

  .stanza-nav {
    flex-direction: row;
    gap: 0;
    text-align: left;
  }

  .stanza-prezzo-box {
    text-align: left;
  }

  .contatti-diretti {
    order: 0;
  }

  .map-buttons {
    flex-direction: row;
  }

  .map-buttons .btn {
    width: auto;
    justify-content: flex-start;
  }

  .stat-divider {
    display: block;
  }

  .stats-bar {
    gap: 1.5rem 2rem;
  }

  .stat-item {
    min-width: 100px;
  }
}

/* ============================================
   RESPONSIVE: Desktop
   ============================================ */
@media (max-width: 1023px) {
  /* Sotto 1024 il <nav> e' vuoto (nav-menu nascosto). Lo collasso cosi'
     nav-actions (telefono + lang + prenota) e burger si compattano a destra
     invece di essere distanziati da space-between. */
  .header-inner > nav {
    display: none;
  }
  .nav-actions {
    margin-left: auto;
    gap: 0.5rem;
  }
}

@media (min-width: 1024px) {
  /* Nav menu testuale appare solo da 1024px in su.
     Sotto questa soglia (incluso tablet portrait 800px) usa il burger menu. */
  .nav-menu {
    display: flex;
  }
  .menu-toggle {
    display: none;
  }

  .stanze-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .esperienze-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .territorio-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .galleria-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stanza-galleria {
    grid-template-columns: repeat(3, 1fr);
  }

  /* --- New page components (desktop) --- */
  .territorio-grid-extended {
    grid-template-columns: repeat(5, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .info-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Galleria asimmetrica */
  .galleria-asymmetric {
    grid-template-columns: repeat(3, 1fr);
  }
  .galleria-asymmetric .galleria-item:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  .galleria-asymmetric .galleria-item:first-child img {
    aspect-ratio: auto;
    height: 100%;
  }
  /* Foto verticale: occupa in altezza la colonna destra (posto delle 2 orizzontali) */
  .galleria-asymmetric .galleria-item--tall {
    grid-column: 3;
    grid-row: 1 / 3;
  }
  .galleria-asymmetric .galleria-item--tall img {
    height: 100%;
  }

  /* 7th stanza card center on 3-col */
  .stanze-grid .stanza-card:nth-child(7) {
    grid-column: 2 / 3;
  }

  /* Guest stars */
  .guests-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Dove siamo: info grid 5, dintorni */
  .info-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .dintorni-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}



/* ============================================
   BOOKS (Agricoltura e Cucina)
   ============================================ */
.books-grid {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.book-card {
  flex: 0 0 auto;
  max-width: 200px;
}
.book-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform .3s;
}
.book-card:hover img {
  transform: scale(1.03);
}

/* ============================================
   ANIMALS (Chi Siamo)
   ============================================ */
.animals-grid {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.animal-card {
  text-align: center;
  max-width: 260px;
}
.animal-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius);
}
.animal-card .animal-card-alt {
  margin-top: .75rem;
}
.animal-card h3 {
  margin-top: .75rem;
  font-size: var(--body-size);
  color: var(--color-heading);
}
.animals-desc {
  text-align: center;
  color: var(--color-body);
  font-size: var(--body-size);
  max-width: 600px;
  margin: 0 auto;
}

/* ============================================
   GUEST STARS (Chi Siamo)
   ============================================ */
.guests-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.guest-card {
  background: var(--color-paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .3s;
}
.guest-card:hover {
  transform: translateY(-4px);
}
.guest-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.guest-card-body {
  padding: 1rem;
}
.guest-card-body h3 {
  font-size: var(--body-size);
  color: var(--color-heading);
  margin-bottom: .25rem;
}
.guest-card-body p {
  font-size: var(--small-size);
  color: var(--color-body);
  line-height: 1.4;
}

/* ============================================
   GUIDES & BADGES (Chi Siamo)
   ============================================ */
.guides-carousel {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 1rem 0 1.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.guide-card {
  flex: 0 0 160px;
  text-align: center;
}
.guide-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.guide-card small {
  display: block;
  margin-top: .5rem;
  font-size: .75rem;
  color: var(--color-label);
  line-height: 1.3;
}
.badges-row {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}
.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--color-heading);
  font-weight: 600;
  font-size: var(--small-size);
}
.badge-item svg {
  color: var(--color-olive);
}

/* ============================================
   CONTATTI: campi eta bambini
   ============================================ */
.form-feedback {
  padding: 1rem 1.25rem;
  border-radius: 4px;
  font-size: var(--small-size);
  font-weight: 500;
  margin-bottom: 1rem;
}
.form-feedback-ok {
  background: #E8F5E9;
  color: #2E7D32;
  border: 1px solid #A5D6A7;
}
.form-feedback-error {
  background: #FFF3E0;
  color: #E65100;
  border: 1px solid #FFCC80;
}

.eta-fields {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}
.eta-fields select {
  flex: 0 0 auto;
  min-width: 100px;
}

/* ============================================
   DOVE SIAMO: info grid 5 cols + dintorni
   ============================================ */
.info-grid-5 {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* K-SERRA-06 fix: auto-responsive per i 5 trasporti */
}

.spiagge-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--color-olive);
  color: #fff;
  border-radius: var(--radius);
  margin-bottom: 2rem;
  font-weight: 600;
}
.spiagge-banner .km {
  background: rgba(255,255,255,.2);
  padding: .25rem .75rem;
  border-radius: var(--radius);
  font-size: var(--small-size);
  white-space: nowrap;
}
/* K-SERRA-06: spiagge icona */
.spiagge-banner .spiagge-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.spiagge-banner .spiagge-icon svg {
  display: block;
}

/* K-SERRA-06: info-card con icone (trasporti dove-siamo) */
.info-grid-icons .info-card-icon {
  text-align: center;
  padding: 1.5rem 1rem;
}
.info-card-icon .info-card-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 0.75rem;
  background: var(--color-cream);
  border-radius: 50%;
  color: var(--color-olive);
}
.info-card-icon h3 {
  font-size: 1.05rem;
  margin: 0 0 .5rem;
}
.info-card-icon p {
  font-size: var(--small-size);
  color: var(--color-body);
  line-height: 1.5;
}

/* In Campagna / Il Mare - duo panels */
.territorio-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.territorio-panel h2 {
  margin: 0.5rem 0 1rem;
}
.territorio-panel p:last-child {
  color: var(--color-text);
  line-height: 1.8;
}

/* K-SERRA-06: territorio panel con foto */
.territorio-panel-img {
  background: var(--color-cream);
  border-radius: var(--radius);
  overflow: hidden;
}
.territorio-panel-img .territorio-panel-img-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.territorio-panel-img .territorio-panel-body {
  padding: 1.5rem;
}
.territorio-panel-img .territorio-panel-body .overline {
  margin-top: 0;
}
.territorio-panel-img .territorio-panel-body h2 {
  margin-top: 0.25rem;
}

.dintorni-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  /* K-SERRA-06 fix: auto-responsive, le card si dispongono in 1-2-3 colonne in base allo spazio */
}

/* K-SERRA-06: dintorni card con icona (clean, no background photo) */
.dintorni-card {
  background: var(--color-cream);
  border-radius: var(--radius);
  padding: 1.25rem;
  border: 1px solid rgba(0,0,0,.06);
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dintorni-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transform: translateY(-2px);
  border-color: rgba(108, 111, 37, 0.25);
}
.dintorni-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(108, 111, 37, 0.1);
  color: var(--color-olive);
  border-radius: 50%;
  margin-bottom: 0.75rem;
}
.dintorni-header {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.dintorni-header .km {
  background: var(--color-olive);
  color: #fff;
  padding: .2rem .6rem;
  border-radius: var(--radius);
  font-size: var(--small-size);
  font-weight: 600;
  white-space: nowrap;
}
.dintorni-header h3 {
  margin: 0;
  font-size: 1.05rem;
}
.dintorni-desc {
  margin: .75rem 0 0;
  font-size: var(--small-size);
  color: var(--color-body);
  line-height: 1.5;
}

/* K-SERRA-06: territorio-card home con icona */
.territorio-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--color-cream);
  color: var(--color-olive);
  border-radius: 50%;
  margin-bottom: 0.75rem;
}
.territorio-card-icon svg {
  display: block;
}

/* (section-video rimosso - sessione 04) */

/* ============================================
   UTILITY: scroll offset for anchor links
   ============================================ */
[id] {
  scroll-margin-top: 80px;
}

/* ============================================
   K-SERRA-07: NUOVI STILI
   ============================================ */

/* focus-top: object-position per foto con soggetto umano */
.page-hero img.focus-top,
.page-hero .focus-top {
  object-position: center top;
}
video.hero-video.focus-top {
  object-position: center top;
}

/* Text-shadow: navbar elementi (stato top-of-page, su sfondo hero) */
.header:not(.scrolled) .logo,
.header:not(.scrolled) .nav-menu a,
.header:not(.scrolled) .lang-switcher,
.header:not(.scrolled) .nav-phone,
.header:not(.scrolled) .btn-nav-prenota {
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.header:not(.scrolled) .logo img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

/* Text-shadow: hero H1 e subtitoli */
.page-hero-overlay h1,
.hero-content h1,
.hero-content .hero-subtitle,
.hero-content .hero-geo {
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ============================================
   FLOATING BUTTONS (back-to-top + WhatsApp)
   ============================================ */
.floating-btn {
  position: fixed;
  z-index: 900;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .3s, transform .3s, background .2s;
  text-decoration: none;
}
.floating-btn:hover {
  background: #5a5c1f;
  color: white;
  transform: scale(1.08);
}
.floating-btn-bottom-right {
  bottom: 1.5rem;
  right: 1.5rem;
}
.floating-btn-bottom-left {
  bottom: 1.5rem;
  left: 1.5rem;
}
#back-to-top {
  opacity: 0;
  pointer-events: none;
}
#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}
.floating-whatsapp {
  background: #25D366;
}
.floating-whatsapp:hover {
  background: #1ebe5a;
}

/* ============================================
   SWIPER OVERRIDES
   ============================================ */
.stanze-swiper,
.testimonials-swiper {
  padding-bottom: 2.5rem !important;
}
.stanze-swiper .swiper-pagination,
.testimonials-swiper .swiper-pagination {
  bottom: 0;
}
.stanze-swiper .swiper-pagination-bullet,
.testimonials-swiper .swiper-pagination-bullet {
  background: var(--color-accent);
  opacity: 0.4;
}
.stanze-swiper .swiper-pagination-bullet-active,
.testimonials-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}
.stanze-swiper .swiper-slide {
  height: auto;
}
.stanze-swiper .stanza-card {
  aspect-ratio: 3/4;
  height: auto;
}
.stanze-swiper-wrapper {
  overflow: hidden;
  position: relative;
}
.mini-swiper {
  border-radius: 4px;
  overflow: hidden;
}
.mini-swiper .swiper-slide img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}
.mini-swiper .swiper-pagination {
  bottom: 0.5rem;
}
.mini-swiper .swiper-pagination-bullet {
  background: rgba(255,255,255,0.7);
}
.mini-swiper .swiper-pagination-bullet-active {
  background: white;
}

/* Stanza CTA finale nel carosello */
.stanza-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  border: 2px dashed var(--color-border);
  aspect-ratio: 3/4;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
  color: var(--color-heading);
  transition: border-color var(--transition-base), background var(--transition-base);
  border-radius: 4px;
}
.stanza-card-cta:hover {
  border-color: var(--color-accent);
  background: white;
  color: var(--color-accent);
}
.stanza-card-cta span {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: -0.03em;
  text-align: center;
  padding: 0 1rem;
}

/* ============================================
   TAG PILL (semantici, distinti da CTA)
   ============================================ */
.tag-pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.35rem 0.9rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 3px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.03em;
}

/* ============================================
   TESTIMONIALS SCHEMA WRAP
   ============================================ */
.testimonials-source {
  font-size: 0.7rem;
  color: var(--color-label);
  font-style: normal;
  margin-top: 0.2rem;
}

/* ============================================
   LEGAL PAGES
   ============================================ */
.legal-content {
  max-width: 800px;
  margin: 0 auto;
  font-size: var(--body-size);
  line-height: 1.75;
}
.legal-content h2 {
  margin-top: var(--space-2xl);
  font-size: var(--h3-size);
}
.legal-content h3 {
  margin-top: var(--space-lg);
  font-size: 1.2rem;
}
.legal-content ul {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}
.legal-content ul li {
  margin-bottom: 0.4rem;
}
.legal-content p {
  margin-bottom: 1rem;
}

/* ============================================
   ESPERIENZE: 2x2 su desktop
   ============================================ */
@media (min-width: 1024px) {
  .esperienze-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .esperienza-card img {
    aspect-ratio: 4/3;
  }
}

/* ============================================
   ACCOGLIENZA: schede "Per il vostro soggiorno"
   layout arioso (no 5 colonne strette)
   ============================================ */
.info-grid.info-soggiorno {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .info-grid.info-soggiorno {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .info-grid.info-soggiorno {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}
.info-card-visual img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

/* info-highlight: ridimensiona da h3 a body size */
.info-highlight {
  font-family: var(--font-display);
  font-size: var(--body-size);
  letter-spacing: -0.02em;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 0.25rem;
  line-height: 1.5;
}

/* ============================================
   ACCOGLIENZA: sfondi sezioni alternati
   ============================================ */
.bg-white { background: var(--color-white) !important; }
.bg-cream  { background: var(--color-bg-alt) !important; }

/* ============================================
   GALLERIA GRID: supporto righe extra
   ============================================ */
.galleria-grid-full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 2rem;
}
.galleria-grid-full .galleria-item img {
  aspect-ratio: 4/3;
}

/* ============================================
   FOOTER LEGAL COL + SOCIAL BOTTOM
   ============================================ */
.footer-social-bottom {
  display: flex;
  gap: 1rem;
}
.footer-social-bottom a {
  color: rgba(255,255,255,0.6);
  transition: color var(--transition-fast);
}
.footer-social-bottom a:hover {
  color: var(--color-white);
}
.footer-social-bottom svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   GALLERIA MIGRATA: link lightbox
   ============================================ */
.galleria-migrata-link {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  transition: opacity var(--transition-fast);
}
.galleria-migrata-link:hover {
  opacity: 0.88;
}

/* ============================================
   STANZA CARD OVERLAY: testi ingranditi
   ============================================ */
.stanza-card-overlay h3 {
  font-size: 1.15rem;
}
.stanza-card-overlay .stanza-meta {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
}

/* ============================================
   MARQUEE: immagine piu' alta
   ============================================ */
.section-marquee {
  padding: clamp(4rem, 8vw, 6rem) 0;
}

/* ============================================
   STANZE SECTION: header col piena
   ============================================ */
.section-stanze .container > .overline,
.section-stanze .container > h2 {
  text-align: center;
}

/* ============================================
   CTA sezione: overlay piu' leggero
   ============================================ */
.cta-overlay-light::before {
  background: rgba(35, 40, 45, 0.55) !important;
}

/* ============================================
   V-011/V-012 Hotfix: .reveal e dimensioni Swiper/galleria
   --------------------------------------------
   La classe .reveal applica opacity:0 + transform finche IntersectionObserver
   non aggiunge .visible. Su wrapper di Swiper e galleria GLightbox, questo
   causa altezza 0 / contenuto invisibile.
   Inoltre Swiper inizializza prima che le immagini lazy carichino: se le
   stanza-card non hanno min-height esplicito, le slide collassano.
   ============================================ */
.stanze-swiper-wrapper.reveal,
.testimonials-swiper.reveal,
.galleria-asymmetric .galleria-item.reveal,
.galleria-grid-full .galleria-item.reveal,
.mini-swiper.reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================
   V-013 rimosso (K-SERRA-10, 2026-06-25)
   Il bypass grid CSS causava la visibilita' dei clone slides di Swiper
   loop:true (camere duplicate). Fix: le stanze-card hanno gia'
   aspect-ratio:3/4 e height:auto, quindi Swiper puo' calcolare
   le dimensioni correttamente. observer:true in main.js garantisce
   il re-init se l'elemento e' inizialmente nascosto.
   ============================================ */
.stanze-swiper .stanza-card,
.stanze-swiper .stanza-card-cta {
  height: 100%;
  min-height: 320px;
}

/* ============================================
   V-014 Swiper layout self-contained (K-SERRA-12, MIA 2026-06-25)
   Su /v2 (Aruba) lo swiper-bundle.min.css da CDN non applica display:flex
   sul .swiper-wrapper: le slide restano impilate in verticale anche a init
   avvenuto. Portiamo le regole di layout essenziali nel nostro CSS, cosi'
   il carosello funziona indipendentemente dal caricamento del CSS CDN.
   ============================================ */
.stanze-swiper .swiper-wrapper,
.testimonials-swiper .swiper-wrapper,
.mini-swiper .swiper-wrapper { display: flex !important; box-sizing: border-box; }
.stanze-swiper,
.testimonials-swiper,
.mini-swiper { overflow: hidden; }
.stanze-swiper .swiper-slide,
.testimonials-swiper .swiper-slide,
.mini-swiper .swiper-slide { flex-shrink: 0; height: auto; }

/* V-015 Scorrimento caroselli continuo e morbido (MIA 2026-06-26)
   delay:0 + speed lungo + timing lineare = flusso costante, niente scatti. */
.stanze-swiper .swiper-wrapper,
.testimonials-swiper .swiper-wrapper { transition-timing-function: linear !important; }

/* V-016 Icone esperienze + porta CTA stanze (MIA 2026-06-26) */
.esperienza-icon { display:inline-flex; color:#6C6F25; margin-bottom:.5rem; }
.esperienza-icon svg { width:36px; height:36px; }
.stanza-card-cta { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; text-align:center; }
.stanza-cta-icon { display:inline-flex; color:#6C6F25; }
.stanza-cta-icon svg { width:64px; height:64px; }

/* V-017 Chi Siamo polish (MIA 2026-06-26) */
.team-photo { width: 150px; height: 150px; }
.guest-card img { object-position: center top; height: 230px; }
.guides-swiper { overflow: hidden; padding: 1rem 0 1.5rem; }
.guides-swiper .swiper-wrapper { display: flex !important; }
.guides-swiper .swiper-slide { width: 160px; flex-shrink: 0; }
.guides-swiper .swiper-pagination { position: static; margin-top: .75rem; text-align: center; }
.guides-swiper .swiper-pagination-bullet { display:inline-block; width:8px; height:8px; border-radius:50%; background:#6C6F25; opacity:.35; margin:0 4px; cursor:pointer; }
.guides-swiper .swiper-pagination-bullet-active { opacity:1; }

/* V-018 No-empty-space rule: storia Chi Siamo a due colonne testo+immagine (MIA 2026-06-26) */
.storia-split { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; margin-top: 1.5rem; }
.storia-split .page-intro { margin: 0; }
.storia-img img { width: 100%; height: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radius, 4px); box-shadow: var(--shadow-soft); }
@media (min-width: 768px) { .storia-split { grid-template-columns: 1fr 1fr; } }


/* V-019: stack immagini nei blocchi split (riempie il vuoto accanto al testo lungo) */
.split-image-stack { display: flex; flex-direction: column; gap: 1.25rem; justify-content: center; }
.split-image-stack > img,
.split-image-stack > picture { display: block; width: 100%; }
.split-image-stack > picture > img { display: block; width: 100%; border-radius: inherit; }

/* V-020: pulsante per-stanza nella card overlay (MIA 2026-06-30)
   Allineato in basso a sinistra, sotto il testo, coerente con i btn del sito. */
.stanza-card-cta-btn {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.75);
  border-radius: 4px;
  color: var(--color-white);
  background: transparent;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  align-self: flex-start;
  pointer-events: auto;
}
.stanza-card-cta-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* ============================================
   v4 · Anti-taglio ritratti (fix "foto tagliate" desktop)
   Bias inquadratura verso il volto (parte alta) sui riquadri persone
   ============================================ */
.team-photo img,
.guest-card img { object-position: center 22%; }

/* ============================================
   v4 · Ritratti persone come il live (verticali, uniformi, niente teste tagliate)
   + gallerie con tasselli uniformi (presentazione armonica)
   ============================================ */
.team-photo { height: auto !important; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); }
.team-photo img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 12%; }
.team-grid { align-items: start; }

.guest-card img { height: auto !important; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.guests-grid { align-items: start; }

.animal-card img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; height: auto; border-radius: var(--radius); }
.animal-card { display: flex; flex-direction: column; gap: .5rem; }

/* Gallerie migrate/aggiunte: tutti i tasselli stessa proporzione */
.galleria-migrata-grid a img,
.galleria-migrata-grid a.galleria-migrata-link img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; display: block; border-radius: var(--radius); }

/* v4 · card "Per il vostro soggiorno" omogenee (stessa altezza per riga) */
.info-grid.info-soggiorno .info-card { height: 100%; display: flex; flex-direction: column; }
.info-grid.info-soggiorno .info-card .info-card-body { flex: 1; }

/* ===== V-030: Accoglienza — Prezzi e Servizi (2 colonne + icone, come live) ===== */
.prezzi-servizi-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem;
  margin-top:2rem; background:var(--color-white);
  border:1px solid var(--color-border); border-radius:8px;
  padding:2.5rem 3rem; box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.prezzi-servizi-grid .ps-left{ border-right:1px solid var(--color-border); padding-right:2.5rem; }
.prezzi-servizi-grid .ps-left p{ margin:0 0 1.1rem; line-height:1.75; }
.prezzi-servizi-grid .ps-left p:last-child{ margin-bottom:0; }
.prezzi-servizi-grid .ps-right{ display:flex; flex-direction:column; gap:1.75rem; justify-content:center; }
.prezzi-servizi-grid .ps-item{ display:flex; gap:1.1rem; align-items:flex-start; }
.prezzi-servizi-grid .ps-icon{ flex:0 0 auto; color:var(--color-olive); line-height:0; margin-top:2px; }
.prezzi-servizi-grid .ps-icon svg{ width:34px; height:34px; }
.prezzi-servizi-grid .ps-item p{ margin:0; line-height:1.6; font-size:.95rem; }
@media (max-width:768px){
  .prezzi-servizi-grid{ grid-template-columns:1fr; padding:1.75rem; gap:1.75rem; }
  .prezzi-servizi-grid .ps-left{ border-right:none; border-bottom:1px solid var(--color-border); padding-right:0; padding-bottom:1.75rem; }
}

/* ===== V-031: Chi Siamo — sezione Animali, tutte le foto su una sola riga ===== */
.animals-grid{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:1.5rem; margin-bottom:1.5rem; }
.animal-card{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.25rem; max-width:none; text-align:center; }
.animal-card img{ width:230px; height:307px; aspect-ratio:auto; object-fit:cover; border-radius:var(--radius); margin:0; }
.animal-card .animal-card-alt{ margin-top:0; }
.animal-card h3{ flex-basis:100%; width:100%; margin:.4rem 0 0; }
@media (max-width:820px){ .animal-card img{ width:40vw; height:53vw; } }

/* ===== V-031b: animali come riquadri singoli su una riga ===== */
.animals-grid{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:1.5rem; margin-bottom:1.5rem; }
.animal-photo{ width:230px; text-align:center; }
.animal-photo img{ width:230px; height:307px; object-fit:cover; border-radius:var(--radius); display:block; }
.animal-photo h3{ margin:.5rem 0 0; font-size:var(--body-size); color:var(--color-heading); }
@media (max-width:820px){ .animal-photo, .animal-photo img{ width:40vw; } .animal-photo img{ height:53vw; } }

/* ===== V-032: Chi passa da qui — slider come carosello camere ===== */
.guests-swiper{ padding-bottom:2.5rem; }
.guests-swiper .swiper-slide{ height:auto; display:flex; }
.guests-swiper .guest-card{ width:100%; margin:0; }

/* V-032b: forza flex + timing lineare anche su guests-swiper (come gli altri) */
.guests-swiper .swiper-wrapper { display: flex !important; box-sizing: border-box; transition-timing-function: linear !important; }

/* V-032c: guest cards in slider usano lo stile stanza-card (uniformi) */
.guests-swiper .swiper-slide{ height:auto; }
.guests-swiper .stanza-card{ width:100%; height:100%; }

/* ===== V-040: Attivita — sezioni con 3 foto (come live) ===== */
.attivita-sezione{ max-width:820px; margin:0 auto 1.75rem; }
.attivita-sezione h2{ margin-bottom:1rem; }
.attivita-testo p{ line-height:1.8; }
.attivita-fotogrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.attivita-fotogrid a{ display:block; overflow:hidden; border-radius:var(--radius); }
.attivita-fotogrid img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .5s ease; }
.attivita-fotogrid a:hover img{ transform:scale(1.05); }
@media (max-width:768px){ .attivita-fotogrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .attivita-fotogrid{ grid-template-columns:1fr; } }

/* ===== V-041: Attivita — sezioni split alternate (testo + collage 1 grande + 2 piccole) ===== */
.att-split{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem 3rem; align-items:center; }
.att-split .att-text h2{ margin-bottom:1rem; }
.att-split .att-text p{ line-height:1.8; }
.att-split-reverse .att-text{ order:2; }
.att-split-reverse .att-photos{ order:1; }
.att-photos{ display:flex; flex-direction:column; gap:1rem; }
.att-photos a{ display:block; overflow:hidden; border-radius:var(--radius); }
.att-photo-big img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .5s ease; }
.att-photo-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.att-photo-row img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .5s ease; }
.att-photos a:hover img{ transform:scale(1.05); }
@media (max-width:820px){ .att-split{ grid-template-columns:1fr; gap:1.5rem; } .att-split-reverse .att-text, .att-split-reverse .att-photos{ order:0; } }

/* ===== V-042: Accoglienza — Prezzi e Servizi (struttura doc Sheila) ===== */
.acc-2col{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem 3rem; margin-top:2rem; }
.acc-2col h3, .acc-block h3, .acc-media-card h3{ margin-bottom:.75rem; }
.acc-2col p, .acc-block p{ line-height:1.8; }
.acc-block{ max-width:860px; margin:2.5rem auto 0; text-align:center; }
.acc-media-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; margin-top:3rem; }
.acc-media-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); margin-bottom:1rem; }
.acc-info-list{ list-style:none; padding:0; margin:0; }
.acc-info-list li{ padding:.45rem 0; border-bottom:1px solid var(--color-border); line-height:1.5; }
.acc-info-list li:last-child{ border-bottom:none; }
@media (max-width:768px){ .acc-2col, .acc-media-grid{ grid-template-columns:1fr; gap:1.75rem; } }

/* ===== V-043: Accoglienza — Mezza pensione | Prezzi | Prenotazioni su 3 colonne con icone ===== */
.acc-3col{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem 3rem; margin-top:2.5rem; }
.acc-3col .acc-col{ text-align:center; }
.acc-3col .acc-icon{ color:var(--color-olive); display:inline-flex; margin-bottom:.6rem; }
.acc-3col .acc-icon svg{ width:42px; height:42px; }
.acc-3col h3{ margin-bottom:.75rem; }
.acc-3col p{ line-height:1.7; text-align:left; }
@media (max-width:768px){ .acc-3col{ grid-template-columns:1fr; gap:2rem; } .acc-3col p{ text-align:center; } }

/* ===== V-044: Prezzi e Servizi — foto in fondo alle colonne laterali, allineate in basso ===== */
.acc-3col{ align-items:stretch; }
.acc-3col .acc-col{ display:flex; flex-direction:column; align-items:center; }
.acc-3col .acc-col > p{ width:100%; text-align:left; }
.acc-3col .acc-col-photo{ width:100%; margin-top:auto; padding-top:1.5rem; }
.acc-3col .acc-col-photo img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius); display:block; }
@media (max-width:768px){ .acc-3col .acc-col-photo{ margin-top:1.25rem; } }

/* ===== V-045: Cucina — slider libri con controlli (frecce prev/next) ===== */
.cucina-swiper{ margin-top:2rem; padding-bottom:3rem; }
.cucina-swiper .swiper-wrapper{ display:flex !important; }
.cucina-swiper .swiper-slide{ height:auto; }
.cucina-swiper .swiper-slide a{ display:block; overflow:hidden; border-radius:var(--radius); }
.cucina-swiper .swiper-slide img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius); display:block; }
.cucina-swiper .swiper-button-prev, .cucina-swiper .swiper-button-next{ color:var(--color-olive); }
.cucina-swiper .swiper-button-prev:after, .cucina-swiper .swiper-button-next:after{ font-size:26px; font-weight:700; }
.cucina-swiper .swiper-pagination{ bottom:0; }
.cucina-swiper .swiper-pagination-bullet-active{ background:var(--color-olive); }

/* V-045b: le slide del cucina-swiper non devono restringersi (Swiper controlla la larghezza) */
.cucina-swiper .swiper-slide{ flex-shrink:0 !important; }

/* V-045c: controller frecce ben visibili (cerchio bianco) */
.cucina-swiper .swiper-button-prev, .cucina-swiper .swiper-button-next{
  color:var(--color-olive); background:rgba(255,255,255,.92); width:46px; height:46px; border-radius:50%;
  box-shadow:0 3px 12px rgba(0,0,0,.18); top:calc(50% - 1.5rem);
}
.cucina-swiper .swiper-button-prev:after, .cucina-swiper .swiper-button-next:after{ font-size:18px; font-weight:800; }
.cucina-swiper .swiper-button-disabled{ opacity:.35; }

/* V-045d: posizionamento completo dei controller (Swiper nav CSS non affidabile) */
.cucina-swiper{ position:relative; }
.cucina-swiper .swiper-button-prev, .cucina-swiper .swiper-button-next{
  position:absolute; top:50%; transform:translateY(-50%); margin:0; z-index:10;
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92);
  box-shadow:0 3px 12px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.cucina-swiper .swiper-button-prev{ left:8px; right:auto; }
.cucina-swiper .swiper-button-next{ right:8px; left:auto; }
.cucina-swiper .swiper-button-prev:after{ content:"\2039"; }
.cucina-swiper .swiper-button-next:after{ content:"\203A"; }
.cucina-swiper .swiper-button-prev:after, .cucina-swiper .swiper-button-next:after{ font-size:30px; font-weight:800; color:var(--color-olive); line-height:1; }
.cucina-swiper .swiper-button-disabled{ opacity:.35; }
.cucina-swiper .swiper-pagination{ position:absolute; left:0; right:0; bottom:2px; text-align:center; }

/* V-045e: cucina-swiper come carosello continuo (niente frecce) */
.cucina-swiper .swiper-wrapper{ transition-timing-function: linear !important; }
.cucina-swiper .swiper-button-prev, .cucina-swiper .swiper-button-next{ display:none !important; }

/* ============================================
   COOKIE BANNER - Consent Mode v2 (GDPR)
   ============================================ */
.sg-cookie{position:fixed;left:0;right:0;bottom:0;z-index:9999;padding:16px;display:flex;justify-content:center}
.sg-cookie[hidden]{display:none}
.sg-cookie-inner{background:#fff;color:#222;max-width:920px;width:100%;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.25);padding:20px 22px;border:1px solid rgba(0,0,0,.08)}
.sg-cookie-title{font-weight:600;font-size:1.05rem;margin:0 0 6px}
.sg-cookie-desc{margin:0 0 14px;font-size:.9rem;line-height:1.5;color:#555}
.sg-cookie-desc a{color:inherit;text-decoration:underline}
.sg-cookie-options{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:16px}
.sg-cookie-opt{display:flex;align-items:flex-start;gap:10px;flex:1 1 240px;min-width:200px;cursor:pointer}
.sg-cookie-opt-txt{display:flex;flex-direction:column;font-size:.82rem}
.sg-cookie-opt-txt strong{font-size:.9rem;margin-bottom:2px}
.sg-cookie-opt-txt span{color:#666}
.sg-cookie-switch{position:relative;display:inline-block;width:40px;height:22px;flex:0 0 auto;margin-top:2px}
.sg-cookie-switch input{opacity:0;width:0;height:0}
.sg-cookie-slider{position:absolute;inset:0;background:#ccc;border-radius:22px;transition:.2s}
.sg-cookie-slider:before{content:"";position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
.sg-cookie-switch input:checked+.sg-cookie-slider{background:var(--color-primary,#3a7d44)}
.sg-cookie-switch input:checked+.sg-cookie-slider:before{transform:translateX(18px)}
.sg-cookie-switch input:disabled+.sg-cookie-slider{opacity:.55}
.sg-cookie-actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:600px){.sg-cookie{padding:10px}.sg-cookie-actions .btn{flex:1 1 100%}}