/**
 * VB Custom Room Cards — Frontend CSS  v1.2
 *
 * TEMA-AGNOSTICO: font, colore testo e sfondo card sono ereditati dal tema
 * attivo tramite `inherit` e `currentColor`.
 * Sovrascrivi le variabili --vbcr-* nel tuo tema o in Elementor per
 * personalizzare colori, raggi e spaziature senza toccare questo file.
 *
 * Esempio override nel tema:
 *   :root { --vbcr-accent: #2563eb; --vbcr-cols: 2; }
 */

/* ─────────────────────────────────────────────────────────────────────────────
   VARIABILI DI DESIGN
   --vbcr-accent segue automaticamente il colore primario del tema attivo:
     1. Temi FSE / block  → --wp--preset--color--primary
     2. Elementor         → --e-global-color-primary
     3. Astra             → --ast-global-color-0
     4. OceanWP           → --ocean-links-color
     5. Generic           → --color-primary / --primary
     6. Fallback plugin   → #8b6a3e  (override via PHP inline CSS per temi classici)
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Griglia */
  --vbcr-cols:          3;
  --vbcr-gap:           1.75rem;

  /* Accent — cascata che eredita dal tema se disponibile */
  --vbcr-accent:        var(--wp--preset--color--primary,
                          var(--e-global-color-primary,
                          var(--ast-global-color-0,
                          var(--ocean-links-color,
                          var(--color-primary,
                          var(--primary,
                          #8b6a3e))))));

  --vbcr-accent-light:  var(--wp--preset--color--secondary,
                          var(--e-global-color-secondary,
                          var(--ast-global-color-1,
                          #c9a96e)));

  --vbcr-accent-dark:   var(--wp--preset--color--contrast,
                          var(--e-global-color-accent,
                          #6b4f2a));

  /* Testo: usa il colore del tema (inherit) */
  --vbcr-text:          inherit;
  --vbcr-text-muted:    currentColor;
  --vbcr-text-light:    currentColor;

  /* Sfondi: trasparente → il tema fornisce il colore */
  --vbcr-bg:            transparent;
  --vbcr-bg-soft:       rgba(0,0,0,.025);
  --vbcr-border:        rgba(0,0,0,.10);
  --vbcr-border-strong: rgba(0,0,0,.18);

  /* Card */
  --vbcr-card-radius:   12px;
  --vbcr-card-shadow:   0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --vbcr-card-shadow-h: 0 12px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --vbcr-img-ratio:     62%;

  /* Transizioni */
  --vbcr-ease:          cubic-bezier(.4,0,.2,1);
  --vbcr-dur:           240ms;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESET SCOPED — eredita tutto dal tema, imposta solo box-sizing
   ───────────────────────────────────────────────────────────────────────────── */
.vbcr-rooms,
.vbcr-detail,
.vbcr-gallery {
  /* Eredita font e colore testo dal tema */
  font-family: inherit;
  color:       inherit;
  line-height: inherit;
}

.vbcr-rooms *,
.vbcr-detail *,
.vbcr-gallery * {
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LISTING — GRIGLIA
   ───────────────────────────────────────────────────────────────────────────── */

.vbcr-rooms--grid {
  display: grid;
  grid-template-columns: repeat(var(--vbcr-cols), 1fr);
  gap: var(--vbcr-gap);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LISTING — LISTA ORIZZONTALE
   ───────────────────────────────────────────────────────────────────────────── */

.vbcr-rooms--list {
  display: flex;
  flex-direction: column;
  gap: var(--vbcr-gap);
}

.vbcr-rooms--list .vbcr-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "media body"
    "media footer";
}

.vbcr-rooms--list .vbcr-card__media {
  grid-area: media;
  border-radius: var(--vbcr-card-radius) 0 0 var(--vbcr-card-radius);
}

.vbcr-rooms--list .vbcr-card__media .vbcr-card__image {
  position: absolute;
  inset: 0;
  height: 100%;
}

.vbcr-rooms--list .vbcr-card__body  { grid-area: body; }
.vbcr-rooms--list .vbcr-card__footer { grid-area: footer; border-top: 1px solid var(--vbcr-border); }

/* ─────────────────────────────────────────────────────────────────────────────
   CARD
   ───────────────────────────────────────────────────────────────────────────── */

.vbcr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--vbcr-bg);
  border-radius: var(--vbcr-card-radius);
  box-shadow: var(--vbcr-card-shadow);
  overflow: hidden;
  transition:
    box-shadow var(--vbcr-dur) var(--vbcr-ease),
    transform  var(--vbcr-dur) var(--vbcr-ease);
}

.vbcr-card:hover {
  box-shadow: var(--vbcr-card-shadow-h);
  transform: translateY(-4px);
}

/* ── Media (immagine) ──────────────────────────────────────────────────── */

.vbcr-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  padding-bottom: var(--vbcr-img-ratio);
  background: var(--vbcr-bg-soft);
  text-decoration: none;
  flex-shrink: 0;
}

.vbcr-card__image {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* fallback esplicito + inset */
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;   /* neutralizza max-width:100% dei temi */
  max-height: none;  /* neutralizza max-height dei temi */
  object-fit: cover;
  object-position: center center; /* default — sovrascrivibile inline per camera */
  display: block;
  transition: transform 400ms var(--vbcr-ease);
}

.vbcr-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vbcr-border-strong);
}

.vbcr-card__image--placeholder svg {
  width: 48px;
  height: 48px;
  opacity: .4;
}

.vbcr-card:hover .vbcr-card__image {
  transform: scale(1.06);
}

/* Overlay gradiente leggero in fondo all'immagine */
.vbcr-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(0, 0, 0, .28) 100%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--vbcr-dur) var(--vbcr-ease);
}

.vbcr-card:hover .vbcr-card__overlay {
  opacity: 1;
}

/* ── Badge ─────────────────────────────────────────────────────────────── */

.vbcr-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--vbcr-accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* ── Body ──────────────────────────────────────────────────────────────── */

.vbcr-card__body {
  padding: 1.25rem 1.5rem .75rem;
  flex: 1;
}

.vbcr-card__type {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vbcr-accent);
  margin-bottom: .5rem;
}

.vbcr-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 .6rem;
  color: inherit;       /* usa il colore h3 del tema */
  font-family: inherit; /* usa il font heading del tema */
}

.vbcr-card__title-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--vbcr-accent), var(--vbcr-accent));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--vbcr-dur) var(--vbcr-ease);
}

.vbcr-card__title-link:hover,
.vbcr-card__title-link:focus-visible {
  background-size: 100% 1px;
  color: inherit;
}

/* Meta (occupazione ecc.) */
.vbcr-card__meta-list {
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
}

.vbcr-card__meta-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: inherit;
  opacity: .6;
}

.vbcr-meta-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--vbcr-accent-light);
}

.vbcr-card__excerpt {
  font-size: .875rem;
  line-height: 1.6;
  color: inherit;
  opacity: .7;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.vbcr-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1.5rem 1.1rem;
  border-top: 1px solid var(--vbcr-border);
  flex-wrap: wrap;
}

/* ── Prezzo ────────────────────────────────────────────────────────────── */

.vbcr-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.vbcr-price-prefix {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vbcr-text-muted);
}

.vbcr-price-amount {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--vbcr-text);
  letter-spacing: -.01em;
}

.vbcr-price-suffix {
  font-size: .72rem;
  color: var(--vbcr-text-muted);
}

.vbcr-card__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BOTTONI
   ───────────────────────────────────────────────────────────────────────────── */

.vbcr-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .55rem 1.2rem;
  border-radius: 6px;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  letter-spacing: .02em;
  transition:
    background-color var(--vbcr-dur) var(--vbcr-ease),
    color            var(--vbcr-dur) var(--vbcr-ease),
    border-color     var(--vbcr-dur) var(--vbcr-ease),
    box-shadow       var(--vbcr-dur) var(--vbcr-ease),
    transform        var(--vbcr-dur) var(--vbcr-ease);
}

.vbcr-btn:active {
  transform: scale(.97);
}

/* Solid */
.vbcr-btn--primary {
  background: var(--vbcr-accent);
  color: #fff;
  border-color: var(--vbcr-accent);
  box-shadow: 0 2px 8px rgba(139,106,62,.28);
}

.vbcr-btn--primary:hover,
.vbcr-btn--primary:focus-visible {
  background: var(--vbcr-accent-dark);
  border-color: var(--vbcr-accent-dark);
  color: #fff;
  box-shadow: 0 4px 14px rgba(139,106,62,.38);
}

/* Ghost (testo + chevron) */
.vbcr-btn--ghost {
  background: transparent;
  color: var(--vbcr-accent);
  border-color: transparent;
  padding-left: .25rem;
  padding-right: .25rem;
}

.vbcr-btn--ghost:hover,
.vbcr-btn--ghost:focus-visible {
  color: var(--vbcr-accent-dark);
  background: transparent;
}

.vbcr-btn__arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--vbcr-dur) var(--vbcr-ease);
}

.vbcr-btn--ghost:hover .vbcr-btn__arrow {
  transform: translateX(3px);
}

/* Full-width */
.vbcr-btn--full {
  width: 100%;
  justify-content: center;
}

/* Large */
.vbcr-btn--lg {
  padding: .85rem 1.75rem;
  font-size: .95rem;
  border-radius: 8px;
}

/* Focus ring accessibile */
.vbcr-btn:focus-visible {
  outline: 3px solid var(--vbcr-accent-light);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MESSAGGIO VUOTO
   ───────────────────────────────────────────────────────────────────────────── */

.vbcr-no-rooms {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--vbcr-text-muted);
  font-style: italic;
  font-size: .95rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DETTAGLIO — GALLERIA HERO
   ───────────────────────────────────────────────────────────────────────────── */

.vbcr-gallery {
  margin-bottom: 2.5rem;
  border-radius: var(--vbcr-card-radius);
  overflow: hidden;
}

.vbcr-gallery__hero {
  position: relative;
  background: var(--vbcr-bg-soft);
  overflow: hidden;
}

.vbcr-gallery__hero-img {
  display: block;
  width: 100%;
  height: 480px;
  object-fit: cover;
  transition: opacity .2s ease;
}

.vbcr-gallery__strip {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--vbcr-bg-soft);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--vbcr-border) transparent;
}

.vbcr-gallery__thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 66px;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  background: none;
  cursor: pointer;
  transition:
    border-color var(--vbcr-dur) var(--vbcr-ease),
    opacity      var(--vbcr-dur) var(--vbcr-ease);
  opacity: .7;
}

.vbcr-gallery__thumb:hover {
  opacity: 1;
  border-color: var(--vbcr-accent-light);
}

.vbcr-gallery__thumb.is-active {
  border-color: var(--vbcr-accent);
  opacity: 1;
}

.vbcr-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DETTAGLIO — LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */

.vbcr-detail__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2.5rem;
  align-items: start;
}

/* ── Header dettaglio ──────────────────────────────────────────────────── */

.vbcr-detail__type {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vbcr-accent);
  margin-bottom: .6rem;
}

.vbcr-detail__title {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 1rem;
  letter-spacing: -.02em;
}

.vbcr-detail__meta-list {
  list-style: none;
  margin: 0 0 .5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}

.vbcr-detail__meta-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--vbcr-text-muted);
}

.vbcr-detail__meta-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--vbcr-accent);
}

/* Separatore decorativo */
.vbcr-divider {
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--vbcr-accent), var(--vbcr-accent-light));
  border-radius: 2px;
  margin: 1.5rem 0;
}

/* ── Descrizione ───────────────────────────────────────────────────────── */

.vbcr-detail__description {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--vbcr-text);
}

.vbcr-detail__description p {
  margin: 0 0 1rem;
}

/* ── Features grid ─────────────────────────────────────────────────────── */

.vbcr-detail__section-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vbcr-text-muted);
  margin: 2rem 0 1rem;
  font-size: .8rem;
}

.vbcr-features-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .6rem .75rem;
}

.vbcr-features-grid__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  padding: .5rem .75rem;
  border-radius: 6px;
  background: var(--vbcr-bg-soft);
  border: 1px solid var(--vbcr-border);
}

.vbcr-check-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--vbcr-accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR PRENOTAZIONE
   ───────────────────────────────────────────────────────────────────────────── */

.vbcr-detail__sidebar {
  position: sticky;
  top: 100px;
}

.vbcr-booking-card {
  background: var(--vbcr-bg);
  border: 1.5px solid var(--vbcr-border);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vbcr-booking-card__price {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.vbcr-booking-card__price .vbcr-price-prefix {
  font-size: .72rem;
}

.vbcr-booking-card__price .vbcr-price-amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--vbcr-accent);
}

.vbcr-booking-card__divider {
  border: none;
  border-top: 1px solid var(--vbcr-border);
  margin: 0;
}

.vbcr-booking-card__note {
  font-size: .75rem;
  color: var(--vbcr-text-light);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEZIONE CORRELATE
   ───────────────────────────────────────────────────────────────────────────── */

.vbcr-detail__related {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--vbcr-border);
}

/* Heading decorato con linea centrata */
.vbcr-section-heading {
  text-align: center;
  position: relative;
  margin: 0 0 2rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.vbcr-section-heading::before,
.vbcr-section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--vbcr-border);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

/* Tablet ≤ 1100px */
@media (max-width: 1100px) {
  :root { --vbcr-cols: 2; }

  .vbcr-gallery__hero-img {
    height: 380px;
  }

  .vbcr-detail__layout {
    grid-template-columns: 1fr 280px;
    gap: 1.75rem;
  }

  .vbcr-detail__title {
    font-size: 1.9rem;
  }
}

/* Tablet ≤ 860px */
@media (max-width: 860px) {
  .vbcr-detail__layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .vbcr-detail__sidebar {
    position: static;
    order: -1;                 /* mostra booking card sopra il contenuto su mobile */
  }

  .vbcr-gallery__hero-img {
    height: 300px;
  }

  .vbcr-rooms--list .vbcr-card {
    grid-template-columns: 240px 1fr;
  }
}

/* Mobile ≤ 600px */
@media (max-width: 600px) {
  :root {
    --vbcr-cols: 1;
    --vbcr-gap: 1.25rem;
  }

  .vbcr-rooms--list .vbcr-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "body"
      "footer";
  }

  .vbcr-rooms--list .vbcr-card__media {
    border-radius: var(--vbcr-card-radius) var(--vbcr-card-radius) 0 0;
    padding-bottom: 56%;
  }

  .vbcr-gallery__hero-img {
    height: 220px;
  }

  .vbcr-gallery__thumb {
    width: 72px;
    height: 50px;
  }

  .vbcr-detail__title {
    font-size: 1.5rem;
  }

  .vbcr-card__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .vbcr-card__actions {
    flex-direction: row;
    justify-content: space-between;
  }

  .vbcr-btn--primary {
    flex: 1;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ANIMAZIONE ENTRATA CARD (opzionale, rispetta prefers-reduced-motion)
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .vbcr-card {
    animation: vbcr-fade-up .4s var(--vbcr-ease) both;
  }

  .vbcr-rooms__item:nth-child(1) .vbcr-card { animation-delay:  0ms; }
  .vbcr-rooms__item:nth-child(2) .vbcr-card { animation-delay: 60ms; }
  .vbcr-rooms__item:nth-child(3) .vbcr-card { animation-delay:120ms; }
  .vbcr-rooms__item:nth-child(4) .vbcr-card { animation-delay:180ms; }
  .vbcr-rooms__item:nth-child(5) .vbcr-card { animation-delay:240ms; }
  .vbcr-rooms__item:nth-child(6) .vbcr-card { animation-delay:300ms; }

  @keyframes vbcr-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CAROSELLO  (.vbcr-carousel)
   ───────────────────────────────────────────────────────────────────────────── */

/* Variabili specifiche carosello */
:root {
  --vbcr-carousel-gap:         24px;
  --vbcr-carousel-nav-size:    44px;
  --vbcr-carousel-nav-offset: -20px; /* frecce sporgenti dal bordo */
  --vbcr-carousel-dot-size:    8px;
  --vbcr-carousel-dot-active:  24px;
  --vbcr-carousel-ease:        cubic-bezier(.4, 0, .2, 1);
  --vbcr-carousel-dur:         500ms;
}

/* Contenitore principale — padding verticale per non tagliare ombre e bordi card */
.vbcr-carousel {
  position: relative;
  padding-top:    16px;
  padding-bottom: 16px;
}

/* Stage: il div che contiene wrapper + frecce.
   Ha position: relative → le frecce absolute si posizionano ai suoi bordi.
   Ha padding laterale → crea spazio fisico per le frecce che "sporgono" ai lati. */
.vbcr-carousel__stage {
  position: relative;
  padding: 0 calc(var(--vbcr-carousel-nav-size, 44px) / 2 + 6px);
}

/* Wrapper con clip — occupa tutto lo spazio interno allo stage (escl. padding) */
.vbcr-carousel__wrapper {
  overflow: hidden;
}

/* Track scorrevole */
.vbcr-carousel__track {
  display: flex;
  gap: var(--vbcr-carousel-gap, 24px);
  transition: transform var(--vbcr-carousel-dur) var(--vbcr-carousel-ease);
  will-change: transform;
  /* Disabilita la transition durante il resize */
}

.vbcr-carousel__track.vbcr-no-transition {
  transition: none !important;
}

/* Singola slide */
.vbcr-carousel__slide {
  flex: 0 0 auto;   /* larghezza calcolata via JS */
  min-width: 0;     /* evita overflow da contenuto lungo */
  display: flex;    /* serve per far sì che la card si allunghi all'altezza massima */
}

/* La card nella slide: height: 100% → tutte le card hanno la stessa altezza */
.vbcr-carousel__slide .vbcr-card {
  width: 100%;
  height: 100%;
  /* disabilita l'animazione fade-up per le slide — il carosello ha la sua */
  animation: none !important;
}

/* ── Immagine uniforme nelle slide ───────────────────────────────────────────
   Problema: le foto verticali (portrait) sfondano il contenitore .vbcr-card__media
   che usa padding-bottom:% come trucco aspect-ratio.
   Soluzione: nel carosello forziamo un'altezza fissa sul media container e
   lasciamo che object-fit:cover ritagli ogni immagine allo stesso rettangolo,
   indipendentemente dall'orientamento originale della foto.
   ──────────────────────────────────────────────────────────────────────────── */

.vbcr-carousel__slide .vbcr-card__media {
  padding-bottom: 0 !important; /* disabilita il trucco %-based */
  height: var(--vbcr-carousel-img-height, 220px); /* altezza fissa uniforme */
  flex-shrink: 0;
}

/* L'immagine riempie sempre il box fisso, crop centrato */
.vbcr-carousel__slide .vbcr-card__image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ── Frecce navigazione ─────────────────────────────────────────────────── */

.vbcr-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 20px)); /* circa metà della card, sopra i dots */
  z-index: 10;
  width:  var(--vbcr-carousel-nav-size, 44px);
  height: var(--vbcr-carousel-nav-size, 44px);
  border-radius: 50%;
  border: 1.5px solid var(--vbcr-border-strong);
  background: #fff;
  color: var(--vbcr-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  transition:
    background-color var(--vbcr-dur) var(--vbcr-ease),
    color            var(--vbcr-dur) var(--vbcr-ease),
    box-shadow       var(--vbcr-dur) var(--vbcr-ease),
    transform        var(--vbcr-dur) var(--vbcr-ease),
    opacity          var(--vbcr-dur) var(--vbcr-ease);
}

.vbcr-carousel__nav svg {
  width:  20px;
  height: 20px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Posizionate ai bordi dello stage (non dell'intera sezione) */
.vbcr-carousel__nav--prev {
  left: 0;
}

.vbcr-carousel__nav--next {
  right: 0;
}

.vbcr-carousel__nav:hover,
.vbcr-carousel__nav:focus-visible {
  background: var(--vbcr-accent);
  color: #fff;
  border-color: var(--vbcr-accent);
  box-shadow: 0 4px 16px rgba(0,0,0,.16);
}

.vbcr-carousel__nav:active {
  transform: translateY(calc(-50% - 20px)) scale(.93);
}

.vbcr-carousel__nav:focus-visible {
  outline: 3px solid var(--vbcr-accent-light);
  outline-offset: 3px;
}

/* Stato disabilitato (inizio/fine senza loop) */
.vbcr-carousel__nav[disabled],
.vbcr-carousel__nav.is-disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Dots paginazione ───────────────────────────────────────────────────── */

.vbcr-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.vbcr-carousel__dot {
  width:  var(--vbcr-carousel-dot-size, 8px);
  height: var(--vbcr-carousel-dot-size, 8px);
  border-radius: 20px;
  background: var(--vbcr-border-strong);
  border: none;
  padding: 0;
  cursor: pointer;
  transition:
    width            240ms var(--vbcr-carousel-ease),
    background-color 240ms var(--vbcr-carousel-ease),
    opacity          240ms var(--vbcr-carousel-ease);
  opacity: .5;
}

.vbcr-carousel__dot:hover {
  opacity: .8;
}

.vbcr-carousel__dot.is-active {
  width: var(--vbcr-carousel-dot-active, 24px);
  background: var(--vbcr-accent);
  opacity: 1;
}

.vbcr-carousel__dot:focus-visible {
  outline: 2px solid var(--vbcr-accent);
  outline-offset: 3px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Tablet/mobile: riduci padding dello stage e nascondi frecce (usa dots + swipe) */
@media (max-width: 1024px) {
  .vbcr-carousel__stage {
    padding: 0; /* frecce nascoste — nessun padding necessario */
  }

  .vbcr-carousel__nav {
    display: none;
  }
}

/* Mobile: abilita scroll nativo CSS scroll snap come fallback touch */
@media (max-width: 600px) {
  .vbcr-carousel__wrapper {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .vbcr-carousel__wrapper::-webkit-scrollbar {
    display: none;
  }

  .vbcr-carousel__track {
    transition: none; /* su mobile si usa scroll nativo */
  }

  .vbcr-carousel__slide {
    scroll-snap-align: start;
  }

  /* Su mobile i dots sono sincronizzati via JS (scroll listener sul wrapper) */
}

/* ─────────────────────────────────────────────────────────────────────────────
   ELEMENTOR EDITOR PLACEHOLDER
   ───────────────────────────────────────────────────────────────────────────── */

.vbcr-elementor-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  border: 2px dashed #d0d0d0;
  border-radius: 10px;
  color: #b0b0b0;
  gap: .5rem;
  padding: 2rem;
  text-align: center;
  font-size: .875rem;
}