/* ==========================================================================
   PAGINA APPARTAMENTO — At Home
   Stili specifici per le pagine appartamento (Mestre, Mogliano).
   Mobile-first. Solo var(), nessun valore hardcoded oltre alle strutture.
   ========================================================================== */

/* Offset per lo sticky header sulle sezioni ancorate */
.galleria,
.mappa,
.prenotazione {
  scroll-margin-top: 70px;
}

@media (min-width: 768px) {
  .galleria,
  .mappa,
  .prenotazione {
    scroll-margin-top: 80px;
  }
}

/* --------------------------------------------------------------------------
   HERO APPARTAMENTO
   Centrato verticalmente, ancorato a sinistra — allineato all'hero homepage.
   -------------------------------------------------------------------------- */
.appart-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--colore-bg-scuro);
}

/* Sfondo: immagine a copertura totale */
.appart-hero__sfondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Slide singola — stessa logica dell'hero homepage */
.appart-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.appart-hero__slide--attiva {
  opacity: 1;
}

.appart-hero__slide--uscente {
  animation: heroSlideOut 1.1s ease forwards;
}

.appart-hero__slide--entrante {
  animation: heroSlideIn 1.2s ease forwards;
}

.appart-hero__immagine {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.06);
}

.appart-hero__slide--attiva .appart-hero__immagine {
  animation: heroKenBurns 7s ease-out forwards;
}

/* Gradiente overlay — z-index: 1 per stare sopra le slide */
.appart-hero__sfondo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(12, 22, 25, 0.78) 0%,
    rgba(12, 22, 25, 0.38) 55%,
    rgba(12, 22, 25, 0.15) 100%
  );
}

/* Contenuto: centrato verticalmente e orizzontalmente come hero homepage */
.appart-hero__contenuto {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  color: var(--colore-pietra);
}

.appart-hero__label {
  color: var(--colore-vetro);
  margin-bottom: var(--space-sm);
}

.appart-hero__titolo {
  font-family: var(--font-display);
  font-weight: var(--peso-regular);
  font-size: var(--dim-h1-mobile);
  line-height: var(--interlinea-stretta);
  color: var(--colore-pietra);
  margin-bottom: var(--space-md);
}

/* Descrizione breve sotto il titolo */
.appart-hero__descrizione {
  color: var(--colore-pietra);
  opacity: 0.8;
  line-height: var(--interlinea-corpo);
  margin-bottom: var(--space-xl);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   INFO — descrizione e dotazioni
   Griglia a 1 colonna su mobile, 2 colonne da tablet in su.
   -------------------------------------------------------------------------- */
.appart-info {
  background-color: var(--colore-bg-scuro);
}

/* Nella pagina dettaglio la vicinanze segue la mappa (Color 2) */
.mappa + .vicinanze {
  background-color: var(--colore-sfondo);
}

.appart-info__griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

/* Stacco visivo tra il titoletto label e il contenuto sottostante */
.appart-info__testo .label,
.appart-info__dotazioni .label,
.galleria__dotazioni .label {
  margin-bottom: var(--space-sm);
}

/* --------------------------------------------------------------------------
   DESCRIZIONE A 2 COLONNE — nuova struttura senza "leggi tutto"
   Intestazione centrata come la hero, descrizione affiancata in 2 blocchi.
   -------------------------------------------------------------------------- */
.appart-info__intestazione {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.appart-info__intestazione .label {
  margin-bottom: var(--space-md);
}

.appart-info__intestazione h2 {
  font-family: var(--font-display);
  font-weight: var(--peso-light);
  font-size: var(--dim-h2-mobile);
  line-height: var(--interlinea-titolo);
  color: var(--colore-pietra);
}

@media (min-width: 768px) {
  .appart-info__intestazione h2 {
    font-size: var(--dim-h2);
  }
}

.appart-info__descrizione-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 768px) {
  .appart-info__descrizione-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
}

.appart-info__blocco p {
  font-family: var(--font-body);
  font-size: var(--dim-body);
  line-height: var(--interlinea-corpo);
  color: var(--colore-laguna);
  opacity: 0.65;
  margin: 0;
}

/* --------------------------------------------------------------------------
   DESCRIZIONE ESPANDIBILE — "Leggi tutto / Riduci"
   -------------------------------------------------------------------------- */
.desc-espandibile__testo {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  transition: max-height 0.4s ease;
}

.desc-espandibile__testo--aperto {
  -webkit-line-clamp: unset;
  display: block;
}

.desc-espandibile__extra {
  display: none;
  margin-top: var(--space-md);
  color: var(--colore-laguna);
  opacity: 0.75;
  line-height: var(--interlinea-corpo);
}

.desc-espandibile__extra--visibile {
  display: block;
}

.desc-espandibile__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-md);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--dim-label);
  font-weight: var(--peso-medium);
  color: var(--colore-laguna);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  padding: 0;
  transition: opacity var(--transition-base);
}

.desc-espandibile__btn:hover {
  opacity: 0.6;
}

.desc-espandibile__btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.desc-espandibile__btn--aperto svg {
  transform: rotate(180deg);
}

/* Respiro tra il titolo h2 e il paragrafo di descrizione */
.appart-info__testo h2 {
  margin-bottom: var(--space-lg);
}

/* --------------------------------------------------------------------------
   DOTAZIONI — lista amenità con icona SVG
   -------------------------------------------------------------------------- */
.dotazioni-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.dotazioni-lista__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--colore-laguna);
  opacity: 0.8;
}

.dotazioni-lista__item svg {
  width: 20px;
  height: 20px;
  color: var(--colore-salvia);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   GALLERIA — griglia foto con lightbox
   Sfondo scuro (laguna). Griglia masonry-style: 2 colonne mobile,
   3 colonne desktop, primo item featured (doppia larghezza).
   Supporta fino a 12 foto. Ogni item apre il lightbox.
   -------------------------------------------------------------------------- */
.galleria {
  background-color: var(--colore-bg-scuro);
}

.galleria__intestazione {
  margin-bottom: var(--space-2xl);
}

.galleria__intestazione .label {
  color: var(--colore-salvia);
  margin-bottom: var(--space-md);
}

.galleria__intestazione h2 {
  color: var(--colore-pietra);
  font-weight: var(--peso-light);
}

/* Griglia 2 colonne su mobile, 3 su desktop */
.galleria__griglia {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

/* Ogni item è un pulsante cliccabile che apre il lightbox */
.galleria__item {
  overflow: hidden;
  border-radius: var(--radius-base);
  position: relative;
  background-color: rgba(255,255,255,0.04);
}

.galleria__item img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* Primo item: featured — occupa 2 colonne su desktop */
.galleria__item--featured {
  grid-column: span 2;
}

.galleria__item--featured img {
  aspect-ratio: 16 / 9;
}

/* --------------------------------------------------------------------------
   GALLERIA — layout con carosello + dotazioni affiancati su desktop
   -------------------------------------------------------------------------- */
.galleria__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.galleria__dotazioni {
  color: var(--colore-pietra);
}

.galleria__dotazioni .label {
  color: var(--colore-salvia);
}

.galleria .dotazioni-lista__item {
  color: var(--colore-pietra);
}

/* --------------------------------------------------------------------------
   CAROSELLO GALLERIA
   -------------------------------------------------------------------------- */
.carosello {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: rgba(255,255,255,0.04);
  user-select: none;
}

.carosello__viewport {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.carosello__traccia {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carosello__slide {
  flex-shrink: 0;
  margin: 0;
  /* La larghezza viene impostata in px da main.js */
}

.carosello__slide img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

.carosello__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--colore-pietra);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base);
  z-index: 2;
}

.carosello__btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.carosello__btn--prev { left: var(--space-sm); }
.carosello__btn--next { right: var(--space-sm); }

.carosello__btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.carosello__btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

.carosello__contatore {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-sm);
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   MAPPA — embed Google Maps
   -------------------------------------------------------------------------- */
.mappa__indirizzo {
  font-style: normal;
  font-family: var(--font-body);
  font-weight: var(--peso-medium);
  font-size: var(--dim-label);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  color: var(--colore-accento);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xl);
}

.mappa__embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mappa__embed iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}

@media (min-width: 768px) {
  .mappa__embed iframe {
    height: 450px;
  }
}

/* --------------------------------------------------------------------------
   PRENOTAZIONE — sezione scura con CTA
   -------------------------------------------------------------------------- */
.prenotazione {
  background-color: var(--colore-sfondo);
  color: var(--colore-laguna);
}

.prenotazione .label {
  color: var(--colore-salvia);
  margin-bottom: var(--space-md);
}

.prenotazione h2 {
  color: var(--colore-laguna);
}

.prenotazione p {
  color: var(--colore-laguna);
  opacity: 0.7;
}

.prenotazione .btn--primario {
  margin-top: var(--space-xl);
  background-color: var(--colore-vetro);
  color: var(--colore-bg-scuro);
}

.prenotazione .btn--primario:hover {
  background-color: var(--colore-pietra);
  color: var(--colore-bg-scuro);
}

/* --------------------------------------------------------------------------
   COME SI DORME — configurazione camere
   Sfondo chiaro (pietra), cards con icona letto + dettagli.
   -------------------------------------------------------------------------- */
.come-si-dorme {
  background-color: var(--colore-bg-seczione);
  padding-top: var(--space-xl);
}

.come-si-dorme__intestazione {
  margin-bottom: var(--space-2xl);
}

.come-si-dorme__intestazione .label {
  color: var(--colore-salvia);
  margin-bottom: var(--space-md);
}

.come-si-dorme__intestazione h2 {
  color: var(--colore-laguna);
  font-weight: var(--peso-light);
}

.camere-lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.camera {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: var(--border-standard);
  border-radius: var(--radius-lg);
  background-color: var(--colore-bg-card);
}

.camera__icona {
  width: 22px;
  height: 22px;
  color: var(--colore-salvia);
  flex-shrink: 0;
  margin-top: 2px;
}

.camera__icona svg {
  width: 100%;
  height: 100%;
}

.camera__nome {
  font-family: var(--font-body);
  font-weight: var(--peso-medium);
  font-size: var(--dim-body);
  color: var(--colore-laguna);
  margin: 0 0 var(--space-xs) 0;
}

.camera__dettaglio {
  font-family: var(--font-body);
  font-size: var(--dim-label);
  color: var(--colore-laguna);
  opacity: 0.55;
  margin: 0;
}

/* --------------------------------------------------------------------------
   FORM PRENOTAZIONE — richiesta disponibilità
   Sfondo scuro (laguna). Campi chiari su scuro.
   -------------------------------------------------------------------------- */
.prenotazione__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.form-gruppo {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-gruppo--doppio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-gruppo label {
  font-family: var(--font-body);
  font-weight: var(--peso-medium);
  font-size: var(--dim-label);
  text-transform: uppercase;
  letter-spacing: var(--spaziatura-label);
  color: var(--colore-laguna);
  opacity: 0.6;
}

.form-gruppo input,
.form-gruppo select,
.form-gruppo textarea {
  font-family: var(--font-body);
  font-size: var(--dim-body);
  color: var(--colore-pietra);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 12px var(--space-md);
  transition: border-color var(--transition-base), background-color var(--transition-base);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.form-gruppo input::placeholder,
.form-gruppo textarea::placeholder {
  color: rgba(240, 238, 234, 0.3);
}

.form-gruppo input:focus,
.form-gruppo select:focus,
.form-gruppo textarea:focus {
  border-color: var(--colore-salvia);
  background-color: rgba(255, 255, 255, 0.09);
}

.form-gruppo select option {
  background-color: #1F3035;
  color: var(--colore-pietra);
}

.form-gruppo textarea {
  resize: vertical;
  min-height: 110px;
}

.prenotazione__submit {
  margin-top: var(--space-sm);
}

.prenotazione__nota {
  font-family: var(--font-body);
  font-size: var(--dim-label);
  color: var(--colore-laguna);
  opacity: 0.4;
  margin-top: var(--space-md);
  line-height: var(--interlinea-base);
}

/* --------------------------------------------------------------------------
   LIGHTBOX — overlay foto a schermo intero
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background-color: rgba(12, 22, 25, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

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

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90vw;
  max-height: 90vh;
  margin: 0;
}

.lightbox__immagine {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-base);
  transition: opacity 0.15s ease;
}

.lightbox__caption {
  font-family: var(--font-body);
  font-size: var(--dim-label);
  color: rgba(240, 238, 234, 0.45);
  margin-top: var(--space-sm);
  text-align: center;
}

.lightbox__counter {
  font-family: var(--font-body);
  font-size: var(--dim-label);
  color: rgba(240, 238, 234, 0.35);
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: 0.05em;
}

/* Pulsante chiudi — in alto a destra */
.lightbox__chiudi {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: none;
  border: none;
  color: var(--colore-pietra);
  opacity: 0.6;
  cursor: pointer;
  padding: var(--space-sm);
  transition: opacity var(--transition-base);
  line-height: 1;
}

.lightbox__chiudi:hover,
.lightbox__chiudi:focus-visible {
  opacity: 1;
}

.lightbox__chiudi svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Pulsanti prev / next */
.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(240, 238, 234, 0.08);
  border: none;
  color: var(--colore-pietra);
  cursor: pointer;
  padding: var(--space-md);
  border-radius: var(--radius-base);
  transition: background var(--transition-base);
}

.lightbox__prev { left: var(--space-lg); }
.lightbox__next { right: var(--space-lg); }

.lightbox__prev:hover,
.lightbox__next:hover,
.lightbox__prev:focus-visible,
.lightbox__next:focus-visible {
  background: rgba(240, 238, 234, 0.16);
}

.lightbox__prev svg,
.lightbox__next svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ==========================================================================
   BREAKPOINT — da 768px in su
   ========================================================================== */
@media (min-width: 768px) {

  .appart-hero {
    min-height: 80vh;
  }

  .appart-hero__titolo {
    font-size: var(--dim-h1);
  }

  /* Galleria: layout orizzontale carosello + dotazioni */
  .galleria__layout {
    grid-template-columns: 3fr 2fr;
    align-items: center;
    gap: var(--space-2xl);
  }

  .galleria__dotazioni {
    padding-left: var(--space-xl);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  /* Galleria: 3 colonne su desktop, primo item featured (2 colonne) */
  .galleria__griglia {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }

  .galleria__item--featured {
    grid-column: span 2;
  }

  /* Come si dorme: colonne per più camere */
  .camere-lista {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  /* Form prenotazione: 2 colonne per i campi data/ospiti */
  .prenotazione__form {
    grid-template-columns: 1fr 1fr;
  }

  .form-gruppo--full {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------------------
   INDICATORI SLIDER HERO APPARTAMENTO
   -------------------------------------------------------------------------- */
.appart-hero__indicatori {
  display: flex;
  gap: 6px;
  margin-top: var(--space-xl);
  justify-content: center;
}

.appart-hero__indicatore {
  height: 2px;
  width: 20px;
  background-color: rgba(255, 255, 255, 0.28);
  border-radius: 1px;
  transition: width 0.35s ease, background-color 0.35s ease;
}

.appart-hero__indicatore--attivo {
  width: 36px;
  background-color: rgba(255, 255, 255, 0.88);
}