/* ==========================================================================
   Scheda camera — /room/petra/, /room/fos/, /room/xylo/
   Un solo foglio per le tre schede: cambia solo il contenuto dei frammenti.
   I valori vengono dal CSS del sito vivo (tema Augustine + plugin
   augustine-core) e sono stati verificati sugli screenshot a 1440px:
   fascia alta 75vh, colonna dei contenuti 710px, barra laterale 320px,
   spazio fra le due 70px dentro il contenitore da 1140px.
   Dipende da base.css (variabili, .contenitore, .bottone, azzeramento).
   ========================================================================== */

.camera{
  --meteo-cifra:#ccc1bd;   /* il grande numero della temperatura */
  --mappa-fondo:#e8eaee;   /* il riquadro della mappa */
  position:relative;
  /* respiro prima del footer: era il padding-bottom di #qodef-page-inner */
  padding-bottom:100px;
}

/* --------------------------------------------------------------- testata */
/* immagine a tutta larghezza con il nome della camera sovrapposto */
.camera-testata{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:75vh;
  margin-bottom:72px;
  overflow:hidden;
}
.camera-testata__foto{
  position:absolute;
  inset:0;
}
.camera-testata__foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.camera-testata__nome{
  position:relative;
  z-index:5;
  margin:0;
  font-family:var(--display);
  font-size:72px;
  font-weight:400;
  line-height:79.99px;      /* 1.111em */
  letter-spacing:-2.88px;   /* -0.04em */
  color:var(--bianco);
}

/* ------------------------------------------------------- impianto a due colonne */
.camera__corpo{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:70px;
  align-items:start;
  /* 123px = 70 (margine sotto le colonne) + 20 (blocco camera) + 33 (stacco
     sopra «Altre stanze»): nell'originale erano tre margini in fila */
  margin-bottom:123px;
}

/* ------------------------------------------------------------ dati in testa */
.camera__dati{
  font-family:var(--display);
  font-size:58px;
  font-weight:400;
  line-height:69.6px;       /* 1.2em */
  letter-spacing:-2.32px;   /* -0.04em */
  color:var(--nero);
}
.camera__dato{margin:0}

/* --------------------------------------------------------------- descrizione */
.camera__contenuto{margin-top:17px}
/* padding 10px: era quello della colonna Elementor, porta il testo a 690px */
.camera-descrizione{padding:10px}
.camera-descrizione p{
  margin:10px 0;
  font-family:'Roboto',var(--corpo);
  font-size:16px;
  font-weight:400;
  line-height:29.92px;
  color:var(--testo-tenue);
}

/* --------------------------------------------------------------- galleria */
.camera-galleria{position:relative;padding:10px}
.camera-galleria__vista{
  position:relative;
  /* senza JavaScript resta una striscia che si trascina con il dito */
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}
.camera-galleria.e-attiva .camera-galleria__vista{
  overflow:hidden;
  scroll-snap-type:none;
}
.camera-galleria__pista{display:flex}
.camera-galleria.e-attiva .camera-galleria__pista{
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.camera-galleria__diapositiva{
  flex:0 0 100%;
  max-width:100%;
  scroll-snap-align:start;
}
.camera-galleria__apri{
  display:block;
  width:100%;
  cursor:zoom-in;
}
.camera-galleria__apri img{width:100%;height:auto}

.camera-galleria__freccia{
  display:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:1;
  width:25px;
  height:25px;
  align-items:center;
  justify-content:center;
  color:rgba(237,237,237,.9);
  transition:color .2s ease-out;
}
.camera-galleria.e-attiva .camera-galleria__freccia{display:inline-flex}
.camera-galleria__freccia:hover{color:var(--accento)}
/* 10px dal bordo della striscia, che sta 10px dentro il blocco */
.camera-galleria__freccia--indietro{left:20px}
.camera-galleria__freccia--avanti{right:20px}
.camera-galleria__freccia svg{width:25px;height:25px}

/* --------------------------------------------------------------- prenota */
/* riga a tre colonne: il blocco parte dalla seconda, come nell'originale, ma
   ora occupa anche la terza perche' non contiene piu' un bottone solo. */
.camera-prenota{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.camera-prenota__cella{grid-column:2 / 4;padding:10px}
.camera-prenota__bottone{
  padding:6px 41px;
  text-align:center;
}
/* il pieno non ha bordo a vista: e' il verde a fare la forma */
.bottone--pieno.camera-prenota__bottone{border-color:transparent}
.camera-prenota__bottone:hover{
  background:var(--accento);
  border-color:var(--accento);
  color:var(--bianco);
}

/* --------------------------------------------------------------- titoli interni */
/* nell'originale erano h5: qui la gerarchia e' corretta, la misura resta */
.camera__titolo{
  font-family:var(--display);
  font-size:34px;
  font-weight:400;
  line-height:43.86px;      /* 1.29em */
  letter-spacing:-0.68px;   /* -0.02em */
  color:var(--nero);
  margin:0;
}

/* stacco in piu' fra i blocchi: solo la scheda Fos ne aveva due, fatti con
   lo spaziatore di Elementor (50px) piu' i 20px di margine del widget */
.camera-stacco{margin-top:70px}

/* --------------------------------------------------------------- servizi */
.camera-servizi{margin-top:88px}
.camera-servizi .camera__titolo{margin:0 0 24px}
.camera-servizi__elenco{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin:0 -10px;
}
.camera-servizi__voce{
  width:50%;
  padding:16px 10px;
}
.camera-servizi__contenuto{
  display:inline-flex;
  align-items:center;
}
.camera-servizi__icona{
  flex-shrink:0;
  width:30px;
  margin-right:30px;
  color:var(--accento);
}
.camera-servizi__icona svg{
  display:block;
  width:100%;
  height:auto;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-miterlimit:10;
}
.camera-servizi__nome{font-size:18px}

/* «Mostra piu' servizi»: <details> senza JavaScript.
   Aperto, il comando sparisce — e' quello che faceva il tema. */
.camera-servizi__altri{display:block}
.camera-servizi__mostra{
  display:inline-block;
  position:relative;
  margin:20px 0 15px;
  font-family:var(--corpo);
  font-size:12px;
  font-weight:600;
  line-height:36px;         /* 3em */
  letter-spacing:3.6px;     /* 0.3em */
  text-transform:uppercase;
  color:var(--nero);
  cursor:pointer;
  list-style:none;
}
.camera-servizi__mostra::-webkit-details-marker{display:none}
.camera-servizi__mostra::after{
  content:'';
  position:absolute;
  left:0;
  bottom:4px;
  width:96%;
  height:1px;
  background-color:currentColor;
}
.camera-servizi__altri[open] .camera-servizi__mostra{display:none}
/* di sicurezza: alcuni browser tengono in vita il riquadro chiuso */
.camera-servizi__altri:not([open]) .camera-servizi__elenco{display:none}

/* --------------------------------------------------------------- informazioni */
.camera-info{margin-top:65px}
.camera-info__blocco{margin-bottom:75px}
.camera-info__blocco:last-child{margin-bottom:0}
.camera-info__blocco .camera__titolo{margin:0 0 22px}
.camera-info__testo{margin:0}
.camera-info__elenco{font-size:18px}
/* 31.4px: passo misurato sul sito vivo. Li' il glifo del segno di spunta
   arrivava da Material Icons e alzava la riga; qui l'icona e' un SVG. */
.camera-info__elenco li{line-height:31.4px;margin-bottom:11px}
.camera-info__elenco li:last-child{margin-bottom:0}
.camera-info__spunta{
  width:18px;
  height:18px;
  margin-right:23px;
  vertical-align:-3px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* --------------------------------------------------------------- mappa */
.camera-mappa{margin-top:73px}
.camera-mappa .camera__titolo{margin:0 0 36px}
/* l'originale caricava Google Maps in JavaScript: qui resta un riquadro
   della stessa altezza (412px) che porta alla scheda su Google Maps,
   senza chiamate a terzi e senza consenso da chiedere */
.camera-mappa__riquadro{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  height:412px;
  padding:20px;
  background-color:var(--mappa-fondo);
  text-align:center;
  color:var(--testo-forte);
}
.camera-mappa__riquadro svg{
  width:34px;
  height:34px;
  fill:none;
  stroke:var(--accento);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.camera-mappa__indirizzo{margin:0;font-size:18px}
.camera-mappa__azione{
  font-size:11px;
  font-weight:600;
  letter-spacing:3.3px;
  text-transform:uppercase;
  color:var(--accento);
  text-decoration:underline;
  text-underline-offset:5px;
}

/* --------------------------------------------------------------- barra laterale */
.camera-meteo{
  margin-top:25px;
  padding:68px 40px 62px;
  border:1px solid var(--linea);
  text-align:center;
}
.camera-meteo .camera__titolo{margin:0 0 58px}
.camera-meteo__gradi{
  margin:0;
  font-family:var(--display);
  font-size:110px;
  font-weight:400;
  line-height:121px;        /* 1.1em */
  letter-spacing:-3.3px;    /* -0.03em */
  color:var(--meteo-cifra);
}
/* il grado: come nell'azzeramento del tema (75%, line-height 0 perche' non
   allarghi la riga) piu' l'alzata di 0.2em del widget meteo */
.camera-meteo__grado{
  position:relative;
  top:-.2em;
  font-size:75%;
  line-height:0;
  vertical-align:baseline;
}
.camera-meteo__cielo{
  margin:14px 0 0;
  font-size:18px;
  line-height:33.66px;
  color:var(--testo);
  text-transform:capitalize;
}
.camera__promo{margin-top:25px}
.camera__promo img{width:100%;height:auto}

/* --------------------------------------------------------------- altre stanze */
.camera-correlate__titolo{
  margin:0 0 33px;
  font-family:var(--display);
  font-size:58px;
  font-weight:400;
  line-height:69.6px;
  letter-spacing:-2.32px;
  color:var(--nero);
}
.camera-correlate__elenco{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0 50px;
}
.camera-correlate__scheda{position:relative}
.camera-correlate__foto{
  display:block;
  position:relative;
  overflow:hidden;
  margin-bottom:27px;
}
.camera-correlate__foto img{
  width:100%;
  height:auto;
  transform:scale(1.03);
  transition:transform .8s cubic-bezier(.4,0,.2,1);
}
.camera-correlate__scheda:hover .camera-correlate__foto img{transform:scale(1.001)}
.camera-correlate__nome{
  margin:0;
  font-family:var(--display);
  font-size:27px;
  font-weight:400;
  line-height:37.8px;       /* 1.4em */
  letter-spacing:0;
  color:var(--nero);
}
.camera-correlate__scheda:hover .camera-correlate__nome a{color:var(--accento)}
/* il collegamento del titolo copre tutta la scheda: un solo link per stanza */
.camera-correlate__link::after{content:'';position:absolute;inset:0}
.camera-correlate__dati{
  display:flex;
  flex-wrap:wrap;
  margin:2px 0 0;
}
.camera-correlate__dati>:not(:last-child){margin-right:21px}
.camera-correlate__valore{
  font-family:var(--corpo);
  font-size:14px;
  font-weight:500;
  letter-spacing:1.96px;    /* 0.14em */
  text-transform:uppercase;
  color:var(--accento);
}

/* ==========================================================================
   Sovrapposizione a tutto schermo (la costruisce galleria-camera.js)
   ========================================================================== */
.lente{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:70px 80px;
  background-color:rgba(0,0,0,.92);
}
.lente[hidden]{display:none}
.lente__scena{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:100%;
  max-height:100%;
  pointer-events:none;
}
.lente__scena img{
  max-width:100%;
  max-height:calc(100vh - 190px);
  width:auto;
  height:auto;
  object-fit:contain;
}
.lente__didascalia{
  margin:18px 0 0;
  max-width:70ch;
  font-family:var(--corpo);
  font-size:14px;
  line-height:24px;
  color:#d8d8d8;
  text-align:center;
}
.lente__comando{
  position:absolute;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  color:var(--bianco);
  transition:color .2s ease-out;
}
.lente__comando:hover{color:var(--accento)}
.lente__comando svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.lente__chiudi{top:18px;right:18px}
.lente__precedente{left:14px;top:50%;transform:translateY(-50%)}
.lente__successiva{right:14px;top:50%;transform:translateY(-50%)}
.lente__conta{
  position:absolute;
  left:0;
  right:0;
  bottom:24px;
  margin:0;
  font-family:var(--corpo);
  font-size:11px;
  font-weight:600;
  letter-spacing:3.3px;
  color:#d8d8d8;
  text-align:center;
}

/* ==========================================================================
   Schermi stretti
   ========================================================================== */
@media (max-width:1024px){
  .camera-testata{height:60vh}
  .camera-testata__nome{font-size:65px;line-height:72.2px;letter-spacing:-2.6px}
  .camera__corpo{grid-template-columns:minmax(0,1fr) 280px;gap:50px}
  .camera-meteo{padding:48px 30px 42px}
  .camera-meteo .camera__titolo{margin:0 0 34px}
}

@media (max-width:768px){
  .camera{padding-bottom:70px}
  .camera-testata{height:50vh;margin-bottom:50px}
  .camera-testata__nome{font-size:50px;line-height:55.55px;letter-spacing:-2px}
  .camera__corpo{grid-template-columns:minmax(0,1fr);gap:50px;margin-bottom:60px}
  .camera__dati{font-size:45px;line-height:54px;letter-spacing:-1.8px}
  .camera__titolo{font-size:28px;line-height:36.12px}
  .camera-servizi{margin-top:63px}
  .camera-servizi__voce{width:100%}
  .camera-info{margin-top:45px}
  .camera-info__blocco{margin-bottom:61px}
  .camera-mappa{margin-top:50px}
  .camera-mappa__riquadro{height:300px}
  .camera-prenota{grid-template-columns:minmax(0,1fr)}
  .camera-prenota__cella{grid-column:1;padding:10px 0}
  .camera-correlate__titolo{font-size:45px;line-height:54px;letter-spacing:-1.8px;margin:0 0 38px}
  .camera-correlate__elenco{grid-template-columns:minmax(0,1fr);gap:50px 0}
  .lente{padding:60px 20px}
  .lente__scena img{max-height:calc(100vh - 170px)}
}

@media (max-width:480px){
  .camera-testata__nome{font-size:40px;line-height:44.44px;letter-spacing:-1.6px}
  .camera__dati{font-size:34px;line-height:40.8px;letter-spacing:-1.36px}
  .camera-meteo{padding:31px 30px 27px}
  .camera-meteo .camera__titolo{margin:0 0 3px}
  .camera-meteo__gradi{font-size:65px;line-height:71.5px}
  .lente{padding:56px 12px}
  .lente__comando{width:42px;height:42px}
}

@media (prefers-reduced-motion:reduce){
  .camera-galleria.e-attiva .camera-galleria__pista{transition:none}
  .camera-correlate__foto img{transition:none}
}