/* Sezione «Le camere» della home: colonna di testo a sinistra, carosello di foto a destra.
   Misure prese dagli stili calcolati a 1440px (sec7-camere-carosello.spec.md, post-96.css). */

.camere{
  padding-top:160px;
  /* l'originale schiarisce al contrario di .sfondo-crema: bianco in alto, crema in basso */
  background-image:linear-gradient(var(--crema-basso) 0%,var(--crema-alto) 100%);
}

.camere__griglia{display:flex}
.camere__colonna{width:50%}

/* ------------------------------------------------------- colonna di testo */
/* flow-root: il margine di 28px del titolo deve restare dentro, non sommarsi al -45px */
.camere__testo{
  display:flow-root;
  margin-top:-45px;
  padding-left:8.5%;     /* 8.5% di 720px = 61.1953px */
}

/* «Le camere»: insegna grande, color cipria, sopra il gruppo occhiello + titolo */
.camere__insegna{
  margin:28px 0 0;
  padding-bottom:12%;    /* 12% di 658.805px = 79.0547px */
  font-family:var(--display);
  font-size:110px;
  font-weight:400;
  line-height:121px;
  letter-spacing:-3.3px;
  color:#ccc1bd;
}

.camere__blocco{
  /* nell'originale erano due annidamenti: 19% sulla sezione interna
     e 12% sulla colonna dentro; 12% dell'81% rimasto = 9.7192% */
  padding-left:19%;
  padding-right:9.7192%;
}

/* flow-root: i 10px sopra l'occhiello restano dentro il gruppo (altezza 105.797px) */
.camere__intestazione{display:flow-root}

/* «Scegli la tua preferita»: e' un h4 del tema, non il titolo di sezione standard */
.camere__sottotitolo{
  margin-top:-6px;
  font-size:46px;
  line-height:59.8px;
  letter-spacing:-1.38px;
}

.camere__paragrafo{
  margin:10px 0;
  font-family:'Roboto',var(--corpo);
  font-size:16px;
  font-weight:400;
  line-height:29.92px;
  color:var(--testo-tenue);
}

.camere__bottone{
  margin-top:48.4609px;  /* 20% della larghezza del bottone (242.336px) nell'originale */
  padding-block:15px;    /* qui vale la misura base del tema, non la «large» di base.css */
}

/* ----------------------------------------------------------- colonna foto */
.camere__colonna--foto{
  display:flex;
  align-items:center;    /* il carosello sta a meta' altezza della colonna */
  padding-right:80px;
}

/* --------------------------------------------------------------- carosello */
.carosello{
  position:relative;
  width:100%;
}
.carosello__vetrina{
  overflow:hidden;
  padding-bottom:30px;   /* lo spazio in cui cadono i pallini */
}
.carosello__pista{
  display:flex;
  align-items:flex-start; /* ogni foto tiene la sua altezza, come nell'originale */
  transition:transform 500ms ease-in-out;
}
/* usata dal JS per il salto muto di fine giro */
.carosello__pista--fermo-immagine{transition:none}

.carosello__lastra{
  flex:0 0 100%;
  max-width:100%;
  text-align:center;
}
/* width e height stanno nell'HTML: senza, con loading="lazy" la foto collassa a 0px */
.carosello__lastra img{width:100%;height:auto}

.carosello__freccia{
  position:absolute;
  /* meta' della pista: la vetrina ha 30px di respiro sotto che non contano */
  top:calc(50% - 15px);
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  font-size:25px;
  color:rgba(237,237,237,.9);
  z-index:1;
}
.carosello__freccia--indietro{left:10px}
.carosello__freccia--avanti{right:10px}
.carosello__freccia svg{width:1em;height:1em}

.carosello__pallini{
  position:absolute;
  left:0;
  right:0;
  bottom:5px;
  height:29.9219px;
  padding-top:15px;      /* i pallini cadono a 15px dal bordo alto della riga */
  display:flex;
  align-items:flex-start;
  justify-content:center;
  z-index:10;
}
.carosello__pallino{
  position:relative;
  width:6px;
  height:6px;
  margin:0 6px;
  border-radius:50%;
  background-color:var(--nero);
  opacity:.2;
  transition:opacity .2s ease-out;
}
/* area di tocco piu' larga del pallino, senza cambiare cio' che si vede */
.carosello__pallino::before{
  content:'';
  position:absolute;
  inset:-11px -6px;
}
.carosello__pallino[aria-current="true"]{opacity:1}
.carosello__pallino:hover{opacity:.6}
.carosello__pallino[aria-current="true"]:hover{opacity:1}

/* ------------------------------------------------------------ schermi stretti */
@media (max-width:1024px){
  .camere{padding-top:80px}
  .camere__griglia{flex-wrap:wrap}
  .camere__colonna{width:100%}

  .camere__testo{padding:0 55px}
  .camere__insegna{padding-bottom:0}
  .camere__blocco{padding:50px 0 0}
  .camere__paragrafo{margin-right:10%}

  .camere__colonna--foto{
    display:block;
    padding:130px 55px 0;
  }
}

@media (max-width:768px){
  .camere{padding-top:30px}

  .camere__testo{
    margin-top:0;
    padding:0 30px;
  }
  .camere__blocco{padding:60px 0 0}
  /* 22px sopra dal contenitore dell'originale + i 10px propri del paragrafo */
  .camere__paragrafo{margin:32px 6px 10px 0}

  .camere__colonna--foto{padding:110px 30px 0}
}

@media (max-width:680px){
  .camere__insegna{
    font-size:65px;
    line-height:71.5px;
    letter-spacing:-1.95px;
  }
  .camere__sottotitolo{
    font-size:40px;
    line-height:52px;
    letter-spacing:-1.2px;
  }
}