/* =============================================================
   VILLA CARDONE — Custom Stylesheet
   Stack: Bootstrap 5 + Bootstrap Icons + Abhaya Libre/Gabarito
   ============================================================= */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* ─────────────────────────────────────────────────────────────
     PALETTE — valori di default (fallback).
     A runtime questi valori possono essere sovrascritti dal pannello
     admin: includes/head.php inietta un blocco <style> con :root che
     legge data/theme.json. Le triplette *-rgb servono agli rgba().
     ───────────────────────────────────────────────────────────── */
  --vc-dark:       #C2AD75;   /* sabbia dorata profonda (tenue) — text, titoli, UI forte */
  --vc-teal:       #D8C28E;   /* sabbia dorata calda (tenue) — accenti, label, icone, link */
  --vc-light-bg:   #FAF3DF;   /* sabbia dorata chiara di fondo */
  --vc-light-bg-rgb: 250,243,223;
  --vc-border:     #EADFC0;   /* bordo sabbia dorata chiara */
  --vc-coral:      #C97B6E;   /* feather/accent coral */
  --vc-text:       #3B352B;   /* testo caldo quasi-nero */
  --vc-text-muted: #8A7A4A;   /* taupe dorato per testo secondario */
  --vc-sand-light: #F8F0D8;   /* sabbia dorata chiara per pannelli invertiti */
  --vc-sand-mid:   #DDBB72;   /* sabbia dorata media (luminosa) */

  --vc-white:      #ffffff;   /* superfici/testo chiaro (card, bottoni, testo su scuro) */
  --vc-white-rgb:  255,255,255;
  --vc-darkest:    #241C12;   /* scuro caldo profondo (sezione camere, lightbox) */
  --vc-darkest-rgb: 36,28,18;
  --vc-accent:     #A58741;   /* tinta accento per ombre/overlay/scrim dorati */
  --vc-accent-rgb: 165,135,65;
  --vc-overlay:    #000000;   /* scrim scuro per leggibilità testo su immagini */
  --vc-overlay-rgb: 0,0,0;

  --font-serif: 'Abhaya Libre', Georgia, serif;
  --font-sans:  'Gabarito', system-ui, sans-serif;
}

/* ── Base ───────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--vc-text);
  background-color: var(--vc-white);
  padding-top: 130px; /* fixed navbar height */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--vc-dark);
}

/* Material Design Icons — globally slightly larger */
.mdi { font-size: 1.15em; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-vc-dark {
  background-color: var(--vc-dark);
  color: var(--vc-white);
  border: none;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .6rem 1.6rem;
  transition: background-color .2s;
}
.btn-vc-dark:hover,
.btn-vc-dark:focus {
  background-color: var(--vc-teal);
  color: var(--vc-white);
}

.btn-vc-outline {
  background-color: transparent;
  color: var(--vc-white);
  border: 2px solid var(--vc-white);
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .6rem 1.6rem;
  transition: background-color .2s, color .2s;
}
.btn-vc-outline:hover,
.btn-vc-outline:focus {
  background-color: var(--vc-white);
  color: var(--vc-dark);
}

/* ── Navbar ─────────────────────────────────────────────────── */
#mainNavbar {
  padding-top: 10px;
  padding-bottom: 10px;
  z-index: 1030;
  transition: padding .35s ease, box-shadow .35s ease;
}

/* Three-column flex layout: left panel | logo | right panel */
.navbar-panel-left,
.navbar-panel-right {
  flex: 1 1 0;
  min-width: 0;
}

/* Logo in normal flow — its height drives the navbar height */
.navbar-logo {
  display: block;
  height: 110px;
  transition: height .35s ease;
}

/* Scrolled state — added by JS */
#mainNavbar.navbar--scrolled {
  padding-top: 6px;
  padding-bottom: 6px;
  box-shadow: 0 2px 16px rgba(var(--vc-accent-rgb),.1) !important;
}
#mainNavbar.navbar--scrolled .navbar-logo {
  height: 64px;
}

#mainNavbar .nav-link {
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--vc-text);
  padding-bottom: .2rem;
  border-bottom: 2px solid transparent;
  transition: border-color .2s, color .2s;
}
#mainNavbar .nav-link:hover,
#mainNavbar .nav-link.active {
  color: var(--vc-dark);
  border-bottom-color: var(--vc-dark);
}

.lang-switcher a {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--vc-text-muted);
  text-decoration: none;
}
.lang-switcher a.active { color: var(--vc-dark); }
.lang-switcher a:hover  { color: var(--vc-dark); }

/* ── Section helpers ────────────────────────────────────────── */
.section-icon {
  color: var(--vc-teal);
  margin-right: .5rem;
  font-size: 1.4rem;
  vertical-align: middle;
}

.section-label {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--vc-teal);
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 600px;
  /* background-image set inline via PHP img_src() */
  background-size: cover;
  background-position: center;
  background-color: var(--vc-dark); /* fallback if no image */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Scrim: warm gradient + extra dark layer to keep the hero text legible
   over the background image. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(var(--vc-overlay-rgb),.35) 0%,
      rgba(var(--vc-overlay-rgb),.20) 45%,
      rgba(var(--vc-overlay-rgb),.45) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(var(--vc-accent-rgb),.45) 0%,
      rgba(var(--vc-accent-rgb),.35) 60%,
      rgba(var(--vc-accent-rgb),.55) 100%
    );
}

.hero__content {
  position: relative;
  z-index: 2;
  color: var(--vc-white);
  max-width: 720px;
  padding: 0 1rem;
}

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600;
  color: var(--vc-white);
  line-height: 1.15;
  margin-bottom: 1.25rem;
  text-shadow: 0 0 20px rgba(var(--vc-overlay-rgb),.55);
}

.hero__subtitle {
  font-family: var(--font-sans);
  font-size: clamp(.9rem, 2vw, 1.1rem);
  font-weight: 300;
  color: rgba(var(--vc-white-rgb),.9);
  margin-bottom: 2rem;
  text-shadow: 0 0 14px rgba(var(--vc-overlay-rgb),.5);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Ospitalità section ─────────────────────────────────────── */
.section-ospitalita { padding: 6rem 0; }

.section-ospitalita img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.section-ospitalita h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 1.25rem;
}

/* ── Camere section (dark + background image) ───────────────── */
.section-camere {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  color: var(--vc-text);
  background-color: var(--vc-light-bg); /* fondo sabbia chiaro sempre presente */
}

/* Blurred background image layer (due layer per crossfade) */
.section-camere__bg {
  position: absolute;
  inset: -24px; /* compensate for blur edge */
  background-size: cover;
  background-position: center;
  filter: blur(16px) brightness(1.08) saturate(.85);
  transition: opacity .45s ease;
  will-change: opacity;
  z-index: 0;
}

/* Soft sandy veil on top of the blurred bg (keeps text legible) */
.section-camere__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--vc-light-bg-rgb), 0.78); /* segue i colori del tema (admin) */
  z-index: 1;
}

/* Content sits above both layers */
.section-camere__inner {
  position: relative;
  z-index: 2;
}

.section-camere h2,
.section-camere h3 {
  color: var(--vc-dark);
}
.section-camere p { color: var(--vc-text); }
.section-camere .section-label { color: var(--vc-text-muted); }

.section-camere h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 1rem;
}

.section-camere__subtitle {
  font-size: .92rem;
  color: var(--vc-text-muted);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.section-camere__amenities-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--vc-text-muted);
  margin-bottom: .75rem;
}

/* Amenities icons grid */
.amenities-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

.amenity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  width: 80px;
}

.amenity-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--vc-accent-rgb),.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--vc-dark);
  flex-shrink: 0;
}

.amenity-label {
  font-size: .65rem;
  text-align: center;
  color: var(--vc-text-muted);
  line-height: 1.25;
}

/* Room panel (right column of section-camere) */
.camere-room-panel {
  margin-bottom: 1rem;
}

.camere-panel__tipo {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--vc-teal);
  margin-bottom: .3rem;
}

.camere-panel__nome {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--vc-dark);
  margin-bottom: .5rem;
}

.camere-panel__desc {
  font-size: .88rem;
  color: var(--vc-text-muted);
  line-height: 1.6;
  margin-bottom: 1.1rem;
}

.camere-panel__img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  margin-bottom: 1rem;
}

/* Controls row: button + nav */
.camere-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Home room preview cards (3-column grid inside dark section) */
.home-room-card {
  background: var(--vc-white);
  color: var(--vc-text);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .25s ease;
}
.home-room-card:hover { transform: translateY(-4px); }

.home-room-card__img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.home-room-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.home-room-card__tipo {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vc-teal);
  margin-bottom: .3rem;
}

.home-room-card__nome {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--vc-dark);
  margin-bottom: .5rem;
}

.home-room-card__desc {
  font-size: .85rem;
  color: var(--vc-text-muted);
  line-height: 1.55;
  flex: 1;
}

.home-room-card__meta {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .75rem 0 1rem;
}

.home-room-card__badge {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .25rem .65rem;
  border: 1.5px solid rgba(var(--vc-accent-rgb),.25);
  color: var(--vc-dark);
  background: transparent;
}

/* Room card inside dark section (home camere, two-column layout) */
.room-card {
  background: var(--vc-white);
  color: var(--vc-text);
}

.room-card__label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vc-teal);
}

.room-card__title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--vc-dark);
  margin-bottom: .5rem;
}

.room-card__desc {
  font-size: .88rem;
  color: var(--vc-text-muted);
}

.room-card__img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

.room-card__body { padding: 1.25rem 1.5rem 1.5rem; }

/* Carousel controls inside room card */
.room-carousel-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
}

.room-carousel-controls .btn-nav {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--vc-border);
  background: var(--vc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  cursor: pointer;
  transition: background .2s;
}
.room-carousel-controls .btn-nav:hover { background: var(--vc-light-bg); }

.room-carousel-controls .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vc-border);
}
.room-carousel-controls .dot.active { background: var(--vc-dark); }

/* ── Colazione section ──────────────────────────────────────── */
.section-colazione { padding: 6rem 0; }

.section-colazione img {
  width: 100%;
  height: 380px;
  object-fit: cover;
}

.section-colazione h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
}

/* ── Servizi section ────────────────────────────────────────── */
.section-servizi {
  background-color: var(--vc-light-bg);
  padding: 6rem 0;
}

.section-servizi h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 2.5rem;
  text-align: center;
}

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

.servizio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.servizio-card:hover img { transform: scale(1.04); }

.servizio-card__label {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--vc-accent-rgb),.75) 0%, transparent 55%);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}

.servizio-card__label span {
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 700;
  color: var(--vc-white);
  line-height: 1.3;
  text-shadow: 0 0 10px rgba(var(--vc-overlay-rgb),.6);
}

.servizi-notes {
  font-size: .85rem;
  color: var(--vc-text-muted);
  margin-top: 2rem;
  text-align: center;
}
.servizi-notes p { margin-bottom: .25rem; }

/* ── CTA prenota ────────────────────────────────────────────── */
.section-cta { padding: 6rem 0; }

.section-cta img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.section-cta h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
}

/* ── Consigli turistici / social del territorio ─────────────── */
.section-turismo {
  background-color: var(--vc-light-bg);
  border-top: 1px solid var(--vc-border);
  padding: 5rem 0;
  text-align: center;
}

.section-turismo__title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: .5rem 0 1.25rem;
}

.section-turismo__intro {
  max-width: 36rem;
  margin: 0 auto 2rem;
  color: var(--vc-text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.section-turismo__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

/* Each social page is a self-explanatory card: icon + name + @handle + blurb */
.territorio-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
  max-width: 360px;
  padding: 1.25rem 1.4rem;
  background: var(--vc-white);
  border: 1px solid var(--vc-border);
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(var(--vc-accent-rgb),.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.territorio-card:hover,
.territorio-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--vc-sand-mid);
  box-shadow: 0 10px 26px rgba(var(--vc-accent-rgb),.14);
  outline: none;
}

.territorio-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  color: var(--vc-white);
  /* Instagram brand gradient */
  background: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
}

.territorio-card__body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.territorio-card__name {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--vc-dark);
  line-height: 1.2;
}

.territorio-card__handle {
  font-size: .82rem;
  font-weight: 600;
  color: var(--vc-teal);
}

.territorio-card__desc {
  font-size: .88rem;
  color: var(--vc-text-muted);
  line-height: 1.45;
  margin-top: .15rem;
}

.territorio-card__go {
  flex-shrink: 0;
  align-self: center;
  font-size: 1.3rem;
  color: var(--vc-text-muted);
  transition: color .25s ease, transform .25s ease;
}

.territorio-card:hover .territorio-card__go,
.territorio-card:focus-visible .territorio-card__go {
  color: var(--vc-dark);
  transform: translate(2px, -2px);
}

/* ── Convenzioni / vantaggi per gli ospiti ──────────────────── */
.section-convenzioni {
  background-color: var(--vc-white);
  padding: 5.5rem 0;
  text-align: center;
}

.section-convenzioni__title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: .5rem 0 1.25rem;
}

.section-convenzioni__intro {
  max-width: 40rem;
  margin: 0 auto 2.75rem;
  color: var(--vc-text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.section-convenzioni__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
}

/* Partner card: discount badge + info + how-to-redeem block */
.convenzione-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 100%;
  max-width: 420px;
  padding: 1.75rem;
  background: var(--vc-white);
  border: 1px solid var(--vc-border);
  border-radius: 16px;
  box-shadow: 0 2px 14px rgba(var(--vc-accent-rgb),.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.convenzione-card:hover {
  transform: translateY(-3px);
  border-color: var(--vc-sand-mid);
  box-shadow: 0 10px 26px rgba(var(--vc-accent-rgb),.14);
}

.convenzione-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.1rem;
}

.convenzione-card__discount {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  background: var(--vc-dark);
  color: var(--vc-white);
  padding: .4rem .8rem;
  border-radius: 10px;
}
.convenzione-card__discount-num {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
}
.convenzione-card__discount-text {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.convenzione-card__category {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vc-teal);
}

.convenzione-card__name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--vc-dark);
  margin: 0 0 .45rem;
}

.convenzione-card__desc {
  font-size: .92rem;
  color: var(--vc-text-muted);
  line-height: 1.5;
  margin-bottom: 1.1rem;
}

.convenzione-card__meta {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
}
.convenzione-card__meta li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .9rem;
  color: var(--vc-text);
  margin-bottom: .4rem;
}
.convenzione-card__meta i { color: var(--vc-teal); font-size: 1.15rem; line-height: 1.3; }
.convenzione-card__meta a { color: var(--vc-text); text-decoration: none; }
.convenzione-card__meta a:hover { color: var(--vc-dark); text-decoration: underline; }

.convenzione-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.4rem;
}
.convenzione-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  color: var(--vc-dark);
  padding: .45rem .9rem;
  border: 1px solid var(--vc-border);
  border-radius: 999px;
  transition: background-color .2s, border-color .2s, color .2s;
}
.convenzione-link:hover,
.convenzione-link:focus-visible {
  background: var(--vc-light-bg);
  border-color: var(--vc-sand-mid);
  color: var(--vc-dark);
  outline: none;
}
.convenzione-link i { font-size: 1.1rem; }
.convenzione-link__ig {
  display: inline-flex;
  width: 17px;
  height: 17px;
}
.convenzione-link__ig svg { width: 17px; height: 17px; }

.convenzione-card__redeem {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--vc-border);
}
.convenzione-card__redeem-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vc-dark);
  margin-bottom: .9rem;
}
.convenzione-card__redeem-title i { color: var(--vc-teal); font-size: 1.1rem; }

.convenzione-redeem__steps {
  margin: 0;
  padding-left: 1.15rem;
  font-size: .88rem;
  color: var(--vc-text);
  line-height: 1.45;
}
.convenzione-redeem__steps li { margin-bottom: .4rem; }
.convenzione-redeem__steps li::marker {
  color: var(--vc-teal);
  font-weight: 700;
}

.convenzione-card__coupon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 1.2rem;
}

/* Teaser card — nuove convenzioni in arrivo (es. bar) */
.convenzione-card--soon {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--vc-light-bg);
  border-style: dashed;
  box-shadow: none;
}
.convenzione-card--soon:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--vc-sand-mid);
}
.convenzione-card__soon-badge {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vc-text-muted);
  background: var(--vc-white);
  border: 1px solid var(--vc-border);
  border-radius: 999px;
  padding: .3rem .8rem;
  margin-bottom: 1rem;
}
.convenzione-card__soon-icon {
  font-size: 2.6rem;
  color: var(--vc-sand-mid);
  margin-bottom: .6rem;
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background-color: var(--vc-white);
  border-top: 1px solid var(--vc-border);
}

.footer-logo { filter: none; }

.footer-legal {
  font-size: .78rem;
  color: var(--vc-text-muted);
  line-height: 1.6;
}

.footer-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vc-dark);
}

.footer-link {
  display: block;
  font-size: .85rem;
  color: var(--vc-text-muted);
  text-decoration: none;
  margin-bottom: .4rem;
  transition: color .2s;
}
.footer-link:hover { color: var(--vc-dark); }

.footer-contact {
  font-size: .85rem;
  color: var(--vc-text);
}
.footer-contact a {
  color: var(--vc-text);
  text-decoration: none;
  transition: color .2s;
}
.footer-contact a:hover { color: var(--vc-teal); }
.footer-contact .mdi { color: var(--vc-teal); }

/* Decorative feathers at footer bottom */
.footer-feathers {
  margin-top: 2.5rem;
  height: 60px;
  background-image: url('/assets/img/feathers-decoration.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  opacity: .8;
}

/* ── Page hero (inner pages) ────────────────────────────────── */
.page-hero {
  position: relative;
  min-height: 38vh;
  background-image: url('/assets/img/hero-villa-cardone.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-hero--camera {
  /* background-image overridden inline per camera */
  min-height: 44vh;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--vc-accent-rgb),.5) 0%,
    rgba(var(--vc-accent-rgb),.45) 100%
  );
}

.page-hero__content {
  position: relative;
  z-index: 1;
  padding: 2rem 1rem;
  max-width: 680px;
}

.page-hero__content h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--vc-white);
  margin-bottom: .75rem;
  text-shadow: 0 0 20px rgba(var(--vc-overlay-rgb),.55);
}

.page-hero__subtitle {
  font-size: clamp(.9rem, 2vw, 1.05rem);
  color: rgba(var(--vc-white-rgb),.88);
  margin-bottom: 0;
  text-shadow: 0 0 14px rgba(var(--vc-overlay-rgb),.5);
}

.page-hero__tipo {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: rgba(var(--vc-white-rgb),.75);
  margin-bottom: .4rem;
}

/* ── Camere list page ───────────────────────────────────────── */
.section-camere-list { padding: 5rem 0; }

.camera-list-card {
  border: 1px solid var(--vc-border);
  overflow: hidden;
}

.camera-list-card__img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.camera-list-card:hover .camera-list-card__img { transform: scale(1.02); }

.camera-list-card__img--wide { height: 420px; }

.camera-list-card__body { padding: 1.5rem; }

.camera-list-card__tipo {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--vc-teal);
  margin-bottom: .4rem;
}

.camera-list-card__nome {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  margin-bottom: .5rem;
}
.camera-list-card__nome a {
  color: var(--vc-dark);
  text-decoration: none;
}
.camera-list-card__nome a:hover { color: var(--vc-teal); }

.camera-list-card__desc {
  font-size: .9rem;
  color: var(--vc-text-muted);
}

.camera-meta {
  font-size: .85rem;
  color: var(--vc-text-muted);
}
.camera-meta .mdi { color: var(--vc-teal); }

/* ── Camera detail page ─────────────────────────────────────── */
.section-camera-detail { padding: 5rem 0; }

.camera-slider__img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.camera-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(var(--vc-white-rgb),.85);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  cursor: pointer;
  transition: background .2s;
  z-index: 2;
}
.camera-slider__btn:hover { background: var(--vc-white); }
.camera-slider__btn--prev { left: .75rem; }
.camera-slider__btn--next { right: .75rem; }

.camera-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vc-border);
  display: inline-block;
  cursor: pointer;
  transition: background .2s;
}
.camera-slider__dot.active { background: var(--vc-dark); }

.camera-detail__heading {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  margin-bottom: .75rem;
}

.camera-detail__desc p { font-size: .95rem; line-height: 1.75; }

.regolamento-list {
  padding-left: 1.2rem;
  font-size: .88rem;
  color: var(--vc-text);
  line-height: 1.7;
}
.regolamento-list li { margin-bottom: .5rem; }

/* Booking card (sticky right) */
.camera-booking-card {
  border: 1px solid var(--vc-border);
  padding: 1.75rem;
}

.camera-booking-card__tipo {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--vc-teal);
  margin-bottom: .35rem;
}

.camera-booking-card__nome {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--vc-dark);
  margin-bottom: 1rem;
}

.camera-booking-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--vc-border);
  padding-top: 1rem;
}
.camera-booking-card__features li {
  font-size: .88rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--vc-border);
  display: flex;
  align-items: center;
  gap: .25rem;
}
.camera-booking-card__features .mdi-circle-small { font-size: 1.4rem; color: var(--vc-teal); }

/* ── Galleria page ──────────────────────────────────────────── */
.section-galleria { padding: 5rem 0; }

.galleria-categoria { margin-bottom: 4rem; }

.galleria-categoria__titolo {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
}

.galleria-item {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.galleria-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.galleria-item:hover .galleria-item__img { transform: scale(1.05); }

.galleria-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--vc-accent-rgb),.0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--vc-white);
  opacity: 0;
  transition: opacity .3s, background .3s;
}
.galleria-item:hover .galleria-item__overlay {
  opacity: 1;
  background: rgba(var(--vc-accent-rgb),.35);
}

/* ── Video cards (galleria) ─────────────────────────────────── */
.galleria-item--video {
  border: 0;
  padding: 0;
  width: 100%;
  cursor: pointer;
  background: var(--vc-darkest);
  aspect-ratio: 16 / 9;
}

/* Play badge, centred over the poster */
.galleria-video__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.galleria-video__play i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(var(--vc-overlay-rgb),.45);
  border: 2px solid rgba(var(--vc-white-rgb),.85);
  color: var(--vc-white);
  font-size: 2.2rem;
  padding-left: .12em; /* optical centring of the play glyph */
  transition: background .3s ease, transform .3s ease;
}
.galleria-item--video:hover .galleria-video__play i,
.galleria-item--video:focus-visible .galleria-video__play i {
  background: rgba(var(--vc-accent-rgb),.65);
  transform: scale(1.08);
}

/* Caption ribbon along the bottom */
.galleria-video__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.6rem .9rem .8rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--vc-white);
  text-align: left;
  pointer-events: none;
  background: linear-gradient(to top, rgba(var(--vc-overlay-rgb),.6), rgba(var(--vc-overlay-rgb),0));
}
.galleria-item--video:focus-visible {
  outline: 3px solid var(--vc-teal);
  outline-offset: 2px;
}

/* ── Contatti page ──────────────────────────────────────────── */
.section-contatti { padding: 5rem 0; }

.contatti-card {
  border: 1px solid var(--vc-border);
  padding: 1.75rem;
}

.contatti-card__titolo {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--vc-dark);
  margin-bottom: 1.25rem;
}

.contatti-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .9rem;
  color: var(--vc-text);
  margin-bottom: .85rem;
}
.contatti-item .mdi { color: var(--vc-teal); font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.contatti-item a { color: var(--vc-text); text-decoration: none; }
.contatti-item a:hover { color: var(--vc-teal); }

.contatti-map iframe { display: block; border: 1px solid var(--vc-border); }

.booking-form-card {
  border: 1px solid var(--vc-border);
  padding: 2rem;
}

.booking-form-card__titolo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--vc-dark);
  margin-bottom: 1.5rem;
}

.booking-form-card .form-label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vc-text);
  margin-bottom: .35rem;
}

.booking-form-card .form-control,
.booking-form-card .form-select {
  border-radius: 0;
  border-color: var(--vc-border);
  font-size: .9rem;
}
.booking-form-card .form-control:focus,
.booking-form-card .form-select:focus {
  border-color: var(--vc-teal);
  box-shadow: 0 0 0 .2rem rgba(var(--vc-accent-rgb),.15);
}

/* ── Flip cards (servizi) ───────────────────────────────────── */
.flip-card {
  cursor: pointer;
  aspect-ratio: 4 / 3;
  position: relative;
  /* perspective solo sulla card per il lieve rotateY */
  perspective: 800px;
}

.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.flip-card__front,
.flip-card__back {
  position: absolute;
  inset: 0;
  transition: opacity .38s ease, transform .38s ease;
  will-change: opacity, transform;
}

/* Front — reuse existing .servizio-card styles */
.flip-card__front.servizio-card {
  position: absolute;
  opacity: 1;
  transform: rotateY(0deg) scale(1);
}

/* Fronte esce: sparisce e ruota leggermente verso sinistra */
.flip-card.is-flipped .flip-card__front {
  opacity: 0;
  transform: rotateY(-12deg) scale(.97);
}

/* Back */
.flip-card__back {
  background-color: var(--vc-sand-light);
  color: var(--vc-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  text-align: center;
  /* Retro parte ruotato e invisibile */
  opacity: 0;
  transform: rotateY(12deg) scale(.97);
}

/* Retro entra: appare in posizione neutra */
.flip-card.is-flipped .flip-card__back {
  opacity: 1;
  transform: rotateY(0deg) scale(1);
}

.flip-card__back-icon {
  font-size: 2.2rem;
  opacity: .75;
  margin-bottom: .6rem;
}

.flip-card__back-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .5rem;
  line-height: 1.3;
}

.flip-card__back-desc {
  font-size: .78rem;
  font-weight: 300;
  line-height: 1.55;
  opacity: .88;
  margin-bottom: 0;
}

/* Keyboard focus ring */
.flip-card:focus-visible {
  outline: 2px solid var(--vc-teal);
  outline-offset: 3px;
}

/* ── Gallery lightbox ───────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(225, 226, 228, 0.94); /* grigio chiaro sbiadito, neutro (non segue il tema) */
  cursor: zoom-out;
}

.lightbox__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(100vw - 120px);
  max-height: calc(100vh - 80px);
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(var(--vc-overlay-rgb),.6);
}

.lightbox__video {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 120px);
  background: #000;
  box-shadow: 0 8px 40px rgba(var(--vc-overlay-rgb),.6);
}

.lightbox__spinner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 2.5rem;          /* lascia spazio alla caption */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;    /* non bloccare i controlli del video */
  z-index: 2;
}
.lightbox__spinner-ring {
  width: 52px;
  height: 52px;
  border: 3px solid rgba(var(--vc-white-rgb),.25);
  border-top-color: rgba(var(--vc-white-rgb),.9);
  border-radius: 50%;
  animation: lb-spin .8s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }

.lightbox__caption {
  margin-top: .75rem;
  color: rgba(58, 58, 63, 0.85);
  font-size: .85rem;
  text-align: center;
}

.lightbox__close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  background: rgba(58, 58, 63, 0.10);
  border: 1.5px solid rgba(58, 58, 63, 0.30);
  color: #3a3a3f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .2s;
}
.lightbox__close:hover { background: rgba(58, 58, 63, 0.22); }

.lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  background: rgba(58, 58, 63, 0.10);
  border: 1.5px solid rgba(58, 58, 63, 0.30);
  color: #3a3a3f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background .2s;
}
.lightbox__nav:hover  { background: rgba(58, 58, 63, 0.22); }
.lightbox__prev { left: .75rem; }
.lightbox__next { right: .75rem; }

@media (max-width: 575.98px) {
  .lightbox__stage {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 100px);
  }
  .lightbox__nav { display: none; }
  /* Swipe hint: full-width tap areas */
  .lightbox__prev { left: 0; width: 44px; background: transparent; border: none; }
  .lightbox__next { right: 0; width: 44px; background: transparent; border: none; }
}

/* ── Utilities ──────────────────────────────────────────────── */
.text-vc-teal  { color: var(--vc-teal) !important; }
.text-vc-dark  { color: var(--vc-dark) !important; }
.bg-vc-dark    { background-color: var(--vc-dark) !important; }
.bg-vc-light   { background-color: var(--vc-light-bg) !important; }

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 991.98px) {
  .hero { min-height: 480px; }

  .section-ospitalita,
  .section-colazione,
  .section-cta { padding: 4rem 0; }

  .section-convenzioni { padding: 4rem 0; }

  .section-ospitalita img,
  .section-colazione img,
  .section-cta img { height: 280px; }
}

@media (max-width: 575.98px) {
  .hero { min-height: 420px; }

  .amenities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem .25rem; }
  .amenity-item   { width: auto; }
  .amenity-icon   { width: 52px; height: 52px; font-size: 1.2rem; }

  .camere-panel__img { height: 220px; }
  .camere-controls   { flex-direction: column; align-items: flex-start; gap: .75rem; }

  .convenzione-card        { padding: 1.4rem; }
  .convenzione-card__coupon { align-self: stretch; }
}

/* ── Legal pages ────────────────────────────────────────────── */
.section-legal {
  padding: 4rem 0 5rem;
}

.legal-header {
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 3px solid var(--vc-coral);
}

.legal-label {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vc-coral);
  margin-bottom: .5rem;
}

.legal-header h1 {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--vc-dark);
  margin-bottom: .4rem;
}

.legal-meta {
  font-family: var(--font-sans);
  font-size: .8rem;
  color: var(--vc-text-muted);
  margin: 0;
}

/* ── Legal body typography ───────────────────────────────────── */
.legal-body {
  font-family: var(--font-sans);
  font-size: .95rem;
  line-height: 1.8;
  color: var(--vc-text);
}

.legal-body h2 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--vc-dark);
  margin-top: 2.5rem;
  margin-bottom: .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--vc-border);
}

.legal-body h3 {
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vc-teal);
  margin-top: 1.75rem;
  margin-bottom: .5rem;
}

.legal-body p  { margin-bottom: 1rem; }
.legal-body ul { padding-left: 1.4rem; margin-bottom: 1rem; }
.legal-body ul li { margin-bottom: .4rem; }
.legal-body a  { color: var(--vc-teal); text-decoration: underline; }
.legal-body a:hover { color: var(--vc-dark); }
.legal-body code {
  background: var(--vc-light-bg);
  padding: .1em .4em;
  border-radius: 3px;
  font-size: .85em;
  color: var(--vc-dark);
}

/* ── Legal table ─────────────────────────────────────────────── */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  margin: 1.25rem 0 1.5rem;
}

.legal-table th {
  background-color: var(--vc-sand-mid);
  color: var(--vc-dark);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .6rem 1rem;
  text-align: left;
}

.legal-table td {
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--vc-border);
  vertical-align: top;
}

.legal-table tr:last-child td { border-bottom: none; }
.legal-table tr:nth-child(even) td { background-color: var(--vc-light-bg); }

/* ── Legal highlight box ─────────────────────────────────────── */
.legal-highlight {
  background: var(--vc-light-bg);
  border-left: 4px solid var(--vc-coral);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  border-radius: 0 4px 4px 0;
}

.legal-highlight p { margin: 0; }

/* ── Legal notice (warning text) ────────────────────────────── */
.legal-notice {
  font-size: .85rem;
  color: var(--vc-text-muted);
  font-style: italic;
}

/* ── Navigation buttons ──────────────────────────────────────── */
.legal-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--vc-border);
}

@media (max-width: 576px) {
  .legal-header h1 { font-size: 1.8rem; }
  .legal-table { font-size: .8rem; }
  .legal-table th, .legal-table td { padding: .5rem .65rem; }
}

/* ── Accessibilità camera: nota accesso ────────────────────── */
.camera-accesso-note {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-top: 1.25rem;
  padding: .85rem 1rem;
  background-color: var(--vc-light-bg);
  border-left: 3px solid var(--vc-teal);
  border-radius: 0 6px 6px 0;
  font-size: .88rem;
  color: var(--vc-teal);
  line-height: 1.5;
}
.camera-accesso-note .mdi {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: .05rem;
}

/* ── Blur-up progressive image loading ─────────────────────── */
picture { display: contents; } /* trasparente al layout */

img[data-blup] {
  filter: blur(8px);
  transition: filter .5s ease;
}
img[data-blup].blup-loaded {
  filter: blur(0);
}

/* ── Aspect-ratio esplicito — previene CLS (layout shift) ───── */
/* Il browser riserva lo spazio prima che l'immagine sia caricata */
.camera-list-card__img       { aspect-ratio: 4 / 3; }
.camera-list-card__img--wide { aspect-ratio: 16 / 7; }
.camera-slider__img          { aspect-ratio: 4 / 3; }
.section-ospitalita img,
.section-colazione  img      { aspect-ratio: 3 / 2; }
.servizio-card img           { aspect-ratio: 3 / 2; }
.galleria-item__img          { aspect-ratio: 4 / 3; }