/* Pagine /rooms/ e /alloggi/ — testata con foto + elenco delle tre camere.
   Valori presi dagli stili calcolati del sito vivo
   (docs/research/components/pagina-rooms.spec.md e CSS del tema Augustine). */

/* ------------------------------------------------------------- testata */
/* Sul sito vivo e' .qodef-page-title. Stesse regole e stessi nomi di
   pagina-testo.css: e' un blocco comune a tutte le pagine interne e al primo
   giro di pulizia va spostato in base.css. */
.testata-pagina{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:520px;
  background-color:#fafafa;
  background-position:center 0;
  background-repeat:no-repeat;
  background-size:cover;
}
.testata-pagina__titolo{
  margin:0;
  font-family:var(--display);
  font-size:72px;
  font-weight:400;
  line-height:79.992px;
  letter-spacing:-2.88px;
  text-align:center;
  color:var(--bianco);
}
/* le due foto di testata: 2023-07-MG_7255-e1690358478817.webp 1800x700,
   2020-11-h1-img1.webp 1200x446 (la stessa della privacy policy) */
.testata-pagina--rooms{
  height:515px;              /* /rooms/ e' 5px piu' bassa delle altre pagine */
  background-image:url(/assets/img/2023-07-MG_7255-e1690358478817.webp);
}
.testata-pagina--alloggi{background-image:url(/assets/img/2020-11-h1-img1.webp)}

/* --------------------------------------------------------- elenco camere */
.camere{padding-bottom:120px}          /* lo spaziatore in coda alla pagina */
.camere__interno{padding-top:125px;padding-bottom:45px}

.camere__elenco{
  display:grid;
  grid-template-columns:repeat(3,1fr);  /* sopra i 1440px il tema ne mostra 3 */
  column-gap:30px;
  row-gap:30px;
}

/* --------------------------------------------------------------- la foto */
.camere__foto{
  position:relative;
  display:block;
  overflow:hidden;
}
.camere__foto img{
  width:100%;
  height:auto;
  transform:scale(1.03);
  transition:transform .8s cubic-bezier(.4,0,.2,1);
}
.camere__foto:hover img,
.camere__foto:focus-visible img{transform:scale(1.001)}

/* ------------------------------------------------------------ il testo */
.camere__testo{margin-top:30px;margin-bottom:65px}

.camere__nome{
  margin:0;
  font-family:var(--display);
  font-size:46px;
  font-weight:400;
  line-height:59.8px;
  letter-spacing:-1.38px;
  color:var(--nero);
  word-wrap:break-word;
}
.camere__nome a{
  position:relative;
  z-index:1;
  transition:color .2s ease-out;
}
.camere__nome a:hover{color:var(--accento)}

/* riga «Ospiti: 1-2 PERSONE   Grandezza: 17 M²» */
.camere__dati{
  display:flex;
  flex-wrap:wrap;
  margin:5px 0 0;
}
.camere__dato:not(:last-child){margin-right:21px}
.camere__valore{
  font-family:var(--corpo);
  font-size:14px;
  font-weight:500;
  letter-spacing:1.96px;      /* .14em di 14px */
  text-transform:uppercase;
  color:var(--accento);
}

.camere__estratto{margin:15px 0 0}

/* --------------------------------- collegamento testuale con filo sotto */
.camere__azione{margin:25px 0 0}
.camere__link{
  position:relative;
  display:inline-block;
  vertical-align:middle;
  font-family:var(--corpo);
  font-size:12px;
  font-weight:600;
  line-height:36px;           /* 3em */
  letter-spacing:3.6px;       /* .3em */
  text-transform:uppercase;
  color:var(--nero);
  /* nell'originale il testo sta in uno span inline-block: la riga viene 40.5px
     e il testo scende di 4.5px. Qui si ottiene lo stesso riquadro senza lo span. */
  height:39px;
  padding-top:3px;
}
.camere__link::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:4px;
  display:inline-block;
  width:96%;
  height:1px;
  background-color:currentColor;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
/* il filo si ritira da sinistra e si ridisegna: e' l'animazione del tema */
.camere__link:hover::after{
  transform-origin:100% 50%;
  transform:scaleX(0);
  animation:camere-filo .5s .2s forwards;
}
@keyframes camere-filo{
  from{transform-origin:0 50%;transform:scaleX(0)}
  to{transform-origin:0 50%;transform:scaleX(1)}
}

/* ---------------------------------------- fascia con il bottone Booking */
/* Nell'originale la fascia e' una griglia di tre colonne da 380px senza
   respiro laterale: il bottone parte a x=540, non e' centrato in pagina. */
.camere-prenota{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:var(--griglia);
  margin-inline:auto;
}
/* il blocco parte dalla seconda colonna e si prende anche la terza: non e' piu'
   un bottone solo, ma azione + alternativa + prova */
.camere-prenota__blocco{
  grid-column:2 / 4;
  padding:10px;
}
/* il bottone pieno del sito vivo e' piu' stretto di .bottone: padding 6px 41px */
.bottone.camere-prenota__bottone{
  position:relative;
  padding:6px 41px;
  text-align:center;
}
.bottone--pieno.camere-prenota__bottone{border-color:transparent}
/* il filo verde resta all'azione primaria: era il segno del bottone pieno */
.bottone--pieno.camere-prenota__bottone::after{      /* il filo verde sotto al bottone */
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  display:inline-block;
  width:100%;
  height:1px;
  background-color:var(--accento);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.bottone.camere-prenota__bottone:hover{
  background:var(--accento);
  border-color:var(--accento);
  color:var(--bianco);
}
.bottone--pieno.camere-prenota__bottone:hover::after{
  transform-origin:100% 50%;
  transform:scaleX(0);
  animation:camere-filo .5s .2s forwards;
}

/* ------------------------------------------------------------- /alloggi/ */
/* La pagina non ha altro che questo capoverso: 100px di respiro sopra e sotto. */
.alloggi{padding:100px 0}
.alloggi__testo{margin:10px 0}

/* ====================================================== schermi piu' stretti */
/* Le soglie sono quelle del tema: 1440 e 768 per le colonne, 1024 per la fascia
   del titolo, 768 e 680 per i corpi tipografici. */

@media (max-width:1440px){
  .camere__elenco{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:1024px){
  .testata-pagina,
  .testata-pagina--rooms{height:400px}
}

@media (max-width:768px){
  .testata-pagina__titolo{font-size:65px;line-height:72.22px;letter-spacing:-2.6px}
  .camere__elenco{grid-template-columns:1fr}
  .camere-prenota{grid-template-columns:1fr}
  .camere-prenota__blocco{grid-column:1}
}

@media (max-width:680px){
  .testata-pagina__titolo{font-size:50px;line-height:55.55px;letter-spacing:-2px}
  .camere__nome{font-size:40px;line-height:52px;letter-spacing:-1.2px}
}