/* Stili della pagina "Camere". */

.rooms-page {
  --rooms-green: var(--color-text);
  --rooms-mint: var(--color-surface-warm-alt);
  --rooms-dark: var(--color-text);
  background: var(--color-surface-warm-alt);
  color: var(--rooms-dark)
}

.rooms-heading span,
.rooms-experience-intro>span {
  color: var(--color-text);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 800
}

.rooms-primary,
.rooms-search button,
.room-card-body>a,
.rooms-experience-copy>a {
  background: var(--rooms-green);
  color: var(--color-on-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  font-size: .75rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex
}

/* La barra resta dove sta, in cima alla pagina: prima si fermava sotto il
   bordo alto e scorreva insieme al contenuto, coprendo fotografie e titoli
   di tutto quello che le passava sotto. */
.rooms-finder {
  background: var(--color-surface-warm-alt);
  border-radius: 20px;
  width: min(1160px,100% - 72px);
  margin: 34px auto 54px;
  padding: 22px 26px;
  box-shadow: 0 18px 50px #11111126
}

.rooms-amenities {
  border-bottom: 1px solid var(--color-accent);
  grid-template-columns: repeat(4,1fr);
  margin-bottom: 20px;
  padding-bottom: 20px;
  display: grid
}

.rooms-amenities div {
  border-right: 1px solid var(--color-accent);
  color: var(--color-text);
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 7px 18px;
  font-size: .78rem;
  font-weight: 700;
  display: flex
}

.rooms-amenities div:last-child {
  border: 0
}

.rooms-amenities svg {
  width: 25px;
  color: var(--rooms-green)
}

.rooms-search {
  grid-template-columns: 1.35fr repeat(3,1fr) .7fr;
  align-items: end;
  gap: 14px;
  display: grid
}

.rooms-search-title {
  align-items: center;
  gap: 12px;
  display: flex
}

.rooms-search-title svg {
  color: var(--rooms-green);
  width: 32px
}

.rooms-search-title span {
  flex-direction: column;
  display: flex
}

.rooms-search-title strong {
  font-size: .92rem
}

.rooms-search-title small {
  color: var(--color-text);
  margin-top: 4px
}

.rooms-search label {
  color: var(--color-text);
  text-transform: uppercase;
  flex-direction: column;
  gap: 7px;
  font-size: .66rem;
  font-weight: 800;
  display: flex
}

.rooms-search input,
.rooms-search select {
  border: 1px solid var(--color-accent);
  background: var(--color-surface-warm-alt);
  height: 43px;
  color: var(--rooms-dark);
  border-radius: 7px;
  padding: 0 10px;
  font: 500 16px "Encode Sans Expanded",Arial,sans-serif
}

.rooms-search button {
  height: 43px;
  padding: 0 18px
}

.rooms-list {
  width: min(1180px,100% - 48px);
  margin: 0 auto;
  padding: 18px 0 92px;
  scroll-margin-top: 30px
}

.rooms-heading {
  grid-template-columns: 1.25fr .75fr;
  align-items: end;
  gap: 70px;
  margin-bottom: 32px;
  display: grid
}

.rooms-heading h1,
.rooms-heading h2,
.rooms-experience h2 {
  letter-spacing: -.03em;
  color: var(--rooms-dark);
  margin: 10px 0 0;
  font: 600 clamp(2.2rem,3.8vw,3.6rem)/1.08 Playfair Display,Georgia,serif
}

.rooms-heading>p {
  color: var(--color-text);
  margin: 0;
  line-height: 1.75
}

.rooms-grid {
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
  display: grid
}

.room-card {
  border: 1px solid var(--color-accent);
  background: var(--color-surface-warm-alt);
  border-radius: 15px;
  transition: transform .25s,box-shadow .25s;
  overflow: hidden;
  box-shadow: 0 9px 26px #11111114
}

.room-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 35px #11111124
}

.room-card-image {
  height: 245px;
  position: relative
}

.room-card-image img {
  object-fit: cover;
  width: 100%;
  height: 100%
}

.room-card-image>span {
  background: var(--rooms-green);
  color: var(--color-on-dark);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: .67rem;
  font-weight: 800;
  position: absolute;
  top: 15px;
  left: 15px
}

.room-card-body {
  padding: 22px
}

.room-card h3 {
  margin: 0;
  font: 600 1.45rem Playfair Display,Georgia,serif
}

.room-card p {
  color: var(--color-text);
  margin: 11px 0 18px;
  font-size: .82rem;
  line-height: 1.65
}

.room-card-meta {
  border-top: 1px solid var(--color-accent);
  color: var(--color-text);
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  font-size: .72rem;
  display: flex
}

.room-card-meta span {
  align-items: center;
  gap: 5px;
  display: flex
}

.room-card-meta svg {
  width: 17px;
  color: var(--rooms-green)
}

.room-card-meta strong {
  color: var(--rooms-green);
  font-size: 1rem
}

.room-card-body>a {
  width: 100%;
  margin-top: 17px;
  padding: 13px
}

/* Nella scheda resta un solo pulsante: prende tutta la riga. */
.room-card-actions {
  grid-template-columns: minmax(0,1fr);
  gap: 10px;
  width: 100%;
  margin-top: 17px;
  display: grid
}

.room-card-actions>a,
.room-card-actions>button {
  min-width: 0;
  min-height: 44px;
  padding: 11px 8px;
  border: 1px solid var(--rooms-green);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: .72rem;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  display: flex
}

.rooms-experience {
  background: var(--rooms-mint);
  border-radius: 24px;
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: 66px;
  width: min(1180px,100% - 48px);
  margin: 0 auto 90px;
  padding: 52px;
  display: grid
}

.rooms-experience-copy>p {
  color: var(--color-text);
  margin: 20px 0;
  line-height: 1.75
}

.rooms-experience ul {
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid
}

.rooms-experience li {
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  font-weight: 700;
  display: flex
}

.rooms-experience li svg {
  width: 22px;
  color: var(--rooms-green)
}

.rooms-experience-image {
  height: 430px;
  position: relative
}

.rooms-experience-image>img {
  object-fit: cover;
  border-radius: 18px;
  width: 100%;
  height: 100%
}

@media (max-width:950px) {
  .rooms-search {
    grid-template-columns: 1fr 1fr 1fr
  }

  .rooms-search-title,
  .rooms-search button {
    grid-column: 1/-1
  }

  .rooms-heading {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .rooms-grid {
    grid-template-columns: 1fr 1fr
  }

  .rooms-grid .room-card:last-child {
    grid-column: 1/-1
  }

  .rooms-experience {
    grid-template-columns: minmax(0,1fr);
    gap: 35px
  }
}

@media (max-width:650px) {
  .rooms-finder {
    width: calc(100% - 32px);
    margin: 20px auto 38px;
    padding: 18px
  }

  .rooms-amenities {
    grid-template-columns: 1fr 1fr;
    gap: 14px
  }

  .rooms-amenities div {
    border: 0;
    justify-content: flex-start;
    padding: 4px
  }

  .rooms-search {
    grid-template-columns: 1fr 1fr
  }

  /* Le colonne della griglia partono dalla larghezza naturale del contenuto:
     un campo data con il testo a 16px e piu largo di mezzo schermo, quindi
     la data di partenza, il menu degli ospiti e il pulsante finivano fuori
     dal riquadro e restavano tagliati. */
  .rooms-search-title,
  .rooms-search label {
    min-width: 0
  }

  .rooms-search input,
  .rooms-search select,
  .rooms-search button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%
  }

  /* Sotto i 430px due campi data affiancati non bastano: "02/09/2026" nel
     nostro carattere, largo, veniva troncato a meta. Una voce per riga. */
  @media (max-width:430px) {
    .rooms-search {
      grid-template-columns: 1fr
    }
  }

  .rooms-search label:last-of-type {
    grid-column: 1/-1
  }

  .rooms-grid {
    grid-template-columns: 1fr
  }

  .rooms-grid .room-card:last-child {
    grid-column: auto
  }

  .rooms-list {
    width: calc(100% - 32px);
    padding-bottom: 62px
  }

  .rooms-heading {
    margin-bottom: 24px
  }

  .rooms-experience {
    width: calc(100% - 24px);
    margin-bottom: 60px;
    padding: 30px 22px
  }

  .rooms-experience ul {
    grid-template-columns: 1fr
  }

  .rooms-experience-image {
    height: 320px
  }

  .room-card-image {
    height: 230px
  }
}

/* Le due fotografie di chiusura: un dettaglio del bagno e il balcone sul
   mare. Restano chiare, senza veli scuri sopra: la didascalia sta sotto
   l'immagine, dove si legge sempre. */
.rooms-dettagli {
  width: min(1180px,100% - 48px);
  margin: 0 auto;
  padding: 0 0 96px
}

.rooms-dettagli-testo {
  max-width: 620px;
  margin: 0 0 26px
}

.rooms-dettagli-testo>span {
  color: var(--color-text);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 800
}

.rooms-dettagli-testo h2 {
  letter-spacing: -.03em;
  color: var(--rooms-dark);
  margin: 10px 0 0;
  font: 600 clamp(1.8rem,2.6vw,2.4rem)/1.12 Playfair Display,Georgia,serif
}

.rooms-dettagli-griglia {
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  display: grid
}

.rooms-dettagli-griglia figure {
  margin: 0
}

.rooms-dettagli-griglia img {
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 18px;
  width: 100%;
  display: block;
  box-shadow: 0 12px 32px #1111111a
}

.rooms-dettagli-griglia figcaption {
  color: var(--color-text);
  margin-top: 12px;
  font-size: .82rem;
  font-weight: 700
}

@media (max-width: 760px) {
  .rooms-dettagli {
    padding-bottom: 64px
  }

  .rooms-dettagli-griglia {
    grid-template-columns: 1fr;
    gap: 18px
  }
}

/* Adattamento al telefono: la fotografia della sezione esperienza era alta
   330px e le schede tenevano le spaziature del desktop. */
@media (max-width: 680px) {
  .rooms-page {
    padding-bottom: 44px
  }

  .rooms-experience-image,
  .rooms-experience-image>img {
    height: 210px;
    min-height: 210px;
    max-height: 210px
  }

  .rooms-experience,
  .rooms-dettagli,
  .rooms-list {
    padding-top: 28px;
    padding-bottom: 28px
  }

  .rooms-grid,
  .rooms-dettagli-griglia {
    gap: 14px
  }

  .room-card-body {
    padding: 20px 18px
  }

  .rooms-experience-copy h2,
  .rooms-dettagli-testo h2,
  .rooms-heading h2 {
    font-size: 25px
  }
}

/* ==================================================================
 * Palette della pagina Camere
 *
 * Gli override sono tutti vincolati a .rooms-page: la home e le altre
 * pagine conservano la propria palette. Le dichiarazioni importanti
 * neutralizzano soltanto i precedenti override globali gia importanti.
 * ================================================================== */

.rooms-page {
  --rooms-green: #2f7d6b;
  --rooms-green-hover: #286b5c;
  --rooms-sage-light: #dde6da;
  --rooms-sage-soft: #e9efe7;
  --rooms-mint: var(--color-surface-secondary);
  --rooms-dark: var(--color-text);
  background: var(--color-surface)!important;
  color: var(--rooms-dark)
}

.rooms-page .rooms-finder {
  background: var(--rooms-sage-soft)
}

.rooms-page .rooms-search input,
.rooms-page .rooms-search select {
  background-color: var(--color-surface)
}

.rooms-page .room-card {
  background: var(--rooms-sage-light)
}

.rooms-page .rooms-experience {
  background: var(--rooms-sage-soft)!important
}

.rooms-page .rooms-search button,
.rooms-page .room-card-actions>a,
.rooms-page .room-card-actions>button,
.rooms-page .rooms-experience-copy>a {
  background: var(--rooms-green)!important;
  border-color: var(--rooms-green);
  color: var(--color-on-dark)!important
}

.rooms-page .rooms-search button:hover,
.rooms-page .room-card-actions>a:hover,
.rooms-page .rooms-experience-copy>a:hover {
  background: var(--rooms-green-hover)!important;
  border-color: var(--rooms-green-hover);
  color: var(--color-on-dark)!important
}

.rooms-page .rooms-search button:focus-visible,
.rooms-page .room-card-actions>a:focus-visible,
.rooms-page .rooms-experience-copy>a:focus-visible {
  background: var(--rooms-green-hover)!important;
  color: var(--color-on-dark)!important;
  outline: 3px solid var(--rooms-green-hover);
  outline-offset: 3px
}

.rooms-page .room-card-actions>button:disabled {
  cursor: not-allowed
}

@media (max-width: 680px) {
  .rooms-page h1 {
    font-size: clamp(26px, 7.2vw, 32px)
  }

  .rooms-page h2 {
    font-size: clamp(22px, 6.2vw, 26px);
    line-height: 1.18
  }
}

/* ------------------------------------------------------------------
 * Telefono: le schede delle camere.
 *
 * Ogni scheda era alta 560px — fotografia da 245, testo, riga dei dati
 * e bottone — e le camere sono quattro: da sole due schermate e mezza.
 * La fotografia scende a 175px e il testo si stringe: la scheda resta
 * intera in mezzo schermo e si confrontano due camere per volta.
 * ------------------------------------------------------------------ */
@media (max-width: 680px) {
  .room-card-image {
    height: 175px
  }

  .room-card-body {
    padding: 16px 16px 18px
  }

  .room-card h3 {
    font-size: 1.25rem
  }

  .room-card p {
    margin: 8px 0 12px;
    line-height: 1.55
  }

  .room-card-meta {
    padding-top: 12px
  }

  .room-card-actions {
    margin-top: 12px
  }

  /* Il riquadro verde con l'elenco di quello che c'e' in camera. */
  .rooms-experience-image,
  .rooms-experience-image>img {
    height: 160px;
    min-height: 160px;
    max-height: 160px
  }

  .rooms-experience li {
    padding: 7px 0
  }

  /* Il riempimento del riquadro era di 52px per lato: su 390px di
     schermo si mangiava un quarto della larghezza. */
  .rooms-experience {
    gap: 20px;
    margin-bottom: 34px;
    padding: 24px 20px
  }

  .rooms-experience-copy>p {
    margin: 12px 0
  }

  .rooms-experience ul {
    gap: 10px;
    margin-bottom: 18px
  }
}

/* ==================================================================
 * La sezione "Tutto cio' che serve per stare bene".
 *
 * Il titolo sta tutto su una riga sola, per la larghezza intera del
 * riquadro, sul telefono come sul computer: la misura del carattere
 * segue la larghezza del contenitore (cqw) e si ferma a 3.6rem, cosi'
 * la riga non va mai a capo e non deborda. Il `min()` in vw serve ai
 * browser che non conoscono le unita' di contenitore.
 *
 * Sotto il titolo, testo e fotografia sono due colonne della stessa
 * altezza: paragrafo, elenco e bottone si distribuiscono dentro
 * l'altezza della fotografia, senza sporgere ne' lasciare vuoti.
 * ================================================================== */
.rooms-experience {
  container-type: inline-size
}

.rooms-experience-intro {
  grid-column: 1/-1;
  min-width: 0
}

/* La misura di base regge la lingua piu' lunga, il tedesco: 21.8 volte
   la misura del carattere. Le altre lingue, piu' corte, la alzano. */
.rooms-page .rooms-experience h2 {
  white-space: nowrap;
  font-size: min(4.4vw,3.6rem);
  font-size: min(4.4cqw,3.6rem)
}

.rooms-page:lang(it) .rooms-experience h2,
.rooms-page:lang(en) .rooms-experience h2 {
  font-size: min(5.3vw,3.6rem);
  font-size: min(5.3cqw,3.6rem)
}

.rooms-page:lang(fr) .rooms-experience h2 {
  font-size: min(4.9vw,3.6rem);
  font-size: min(4.9cqw,3.6rem)
}

@media (min-width: 951px) {
  .rooms-experience {
    grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
    align-items: stretch;
    row-gap: 26px
  }

  .rooms-experience-copy {
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    display: flex
  }

  .rooms-experience-copy>p {
    margin-top: 0
  }

  .rooms-experience-copy>a {
    align-self: flex-start
  }

  .rooms-experience-image {
    height: 100%;
    min-height: 360px
  }
}

/* ==================================================================
 * Scheda della camera: il tasto "Info" e la finestra che apre.
 *
 * Le voci sono una quarantina per camera: dentro la scheda avrebbero
 * allungato la griglia di tre schermate. Si aprono percio' in una
 * finestra sopra la pagina, la stessa idea del visore della galleria,
 * cosi la griglia resta ferma e il testo si legge largo.
 *
 * L'apertura e' una sola animazione: lo sfondo sfuma, il riquadro sale
 * di 28px e cresce dal 96%. I gruppi entrano poi uno dopo l'altro, a
 * 70ms di distanza, per dare il tempo di capire come e' diviso quello
 * che si sta leggendo. Con "riduci movimento" attivo compare tutto
 * insieme, senza spostamenti.
 * ================================================================== */

/* I due tasti stanno affiancati: la richiesta di disponibilita' resta
   il tasto principale e prende piu' larghezza, Info le sta accanto. */
.room-card-actions {
  grid-template-columns: 1.5fr 1fr
}

.room-card-info {
  cursor: pointer;
  gap: 6px
}

.room-card-info>svg {
  flex: none
}

/* Il tasto Info e' identico all'altro: stesso verde, stesso bordo, stesso
   comportamento al passaggio del mouse e alla messa a fuoco da tastiera. */
.rooms-page .room-card-actions>button:hover {
  background: var(--rooms-green-hover)!important;
  border-color: var(--rooms-green-hover);
  color: var(--color-on-dark)!important
}

.rooms-page .room-card-actions>button:focus-visible {
  background: var(--rooms-green-hover)!important;
  color: var(--color-on-dark)!important;
  outline: 3px solid var(--rooms-green-hover);
  outline-offset: 3px
}

/* Con la finestra aperta la pagina sotto non deve scorrere. */
html.cds-scheda-aperta {
  overflow: hidden
}

/* La scheda stampata dentro la card resta nascosta: e' la sorgente da cui
   il JavaScript copia il contenuto nella finestra. */
.room-info {
  display: none
}

.room-visore {
  --rooms-green: #2f7d6b;
  --rooms-green-hover: #286b5c;
  --rooms-sage-soft: #e9efe7;
  z-index: 220;
  background: #11111159;
  backdrop-filter: blur(8px);
  place-items: center;
  padding: 28px 20px;
  position: fixed;
  inset: 0;
  display: grid
}

.room-visore[hidden] {
  display: none
}

.room-visore-scheda {
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 26px;
  width: min(760px,100%);
  max-height: min(880px,88vh);
  overflow: hidden auto;
  box-shadow: 0 30px 90px #11111140;
  position: relative
}

/* Intestazione appiccicata in alto: scorrendo l'elenco si continua a vedere
   di quale camera si sta leggendo e il tasto per chiudere resta a portata. */
.room-visore-testa {
  background: var(--color-surface);
  border-bottom: 1px solid var(--rooms-sage-soft);
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 22px 26px 16px;
  display: grid;
  position: sticky;
  top: 0;
  z-index: 2
}

.room-visore-testa>p,
.room-info-titolo {
  margin: 0;
  font-family: var(--font-display,inherit);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15
}

.room-visore-chiudi {
  color: var(--rooms-green);
  cursor: pointer;
  background: var(--rooms-sage-soft);
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
  transition: background .18s ease, transform .18s ease
}

.room-visore-chiudi:hover {
  background: var(--rooms-green);
  color: var(--color-on-dark);
  transform: rotate(90deg)
}

.room-visore-chiudi:focus-visible {
  outline: 3px solid var(--rooms-green);
  outline-offset: 2px
}

.room-visore-corpo {
  padding: 20px 26px 30px
}

/* Il titolo copiato dalla card non serve due volte: in cima c'e' gia'. */
.room-visore-corpo .room-info-titolo {
  display: none
}

/* Le due linguette della camera doppia: standard e vista mare. */
.room-info-varianti {
  background: var(--rooms-sage-soft);
  border-radius: 999px;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 20px;
  padding: 4px;
  display: flex
}

.room-info-varianti>button {
  color: var(--rooms-green);
  cursor: pointer;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  font-size: .7rem;
  font-weight: 800;
  transition: background .22s ease, color .22s ease
}

.room-info-varianti>button[aria-selected="true"] {
  background: var(--rooms-green);
  color: var(--color-on-dark)
}

.room-info-varianti>button:focus-visible {
  outline: 3px solid var(--rooms-green);
  outline-offset: 2px
}

/* I gruppi sono righe a tutta larghezza, una sotto l'altra, divise da una
   linea sottile: prima erano riquadri affiancati e, avendo un numero di voci
   diverso l'uno dall'altro, lasciavano buchi e scalini.

   Anche le voci stanno in colonna unica. Su due colonne le frasi lunghe
   andavano a capo e le due colonne finivano sfalsate, che e' lo stesso
   disordine di prima: una voce per riga si legge dall'alto in basso senza
   scalini. La scheda diventa piu' alta e si scorre, con il titolo che resta
   fermo in cima. */
.room-info-gruppi {
  gap: 0;
  display: grid
}

.room-info-gruppo {
  border-top: 1px solid var(--rooms-sage-soft);
  padding: 18px 0
}

/* Il primo gruppo attacca all'intestazione, che ha gia' la sua linea sotto:
   senza questa regola se ne vedrebbero due appiccicate. */
.room-info-gruppo:first-child {
  border-top: 0;
  padding-top: 2px
}

.room-info-gruppo:last-child {
  padding-bottom: 0
}

.room-info-gruppo h4 {
  color: var(--rooms-green);
  letter-spacing: .1em;
  text-transform: uppercase;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: .7rem;
  font-weight: 800;
  display: flex
}

.room-info-gruppo ul {
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid
}

.room-info-gruppo li {
  padding-left: 18px;
  font-size: .9rem;
  line-height: 1.45;
  position: relative
}

/* Il pallino davanti a ogni voce e' disegnato, non un carattere: resta
   allineato alla prima riga anche quando la voce va a capo. */
.room-info-gruppo li:before {
  content: "";
  background: var(--rooms-green);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: .55em;
  left: 2px
}

/* ------------------------------------------------------------------
 * Animazioni
 * ------------------------------------------------------------------ */

@keyframes cds-scheda-sfondo {
  from { opacity: 0 }
  to { opacity: 1 }
}

@keyframes cds-scheda-entra {
  from { opacity: 0; transform: translateY(28px) scale(.96) }
  to { opacity: 1; transform: none }
}

@keyframes cds-scheda-esce {
  from { opacity: 1; transform: none }
  to { opacity: 0; transform: translateY(16px) scale(.98) }
}

@keyframes cds-scheda-voce {
  from { opacity: 0; transform: translateY(14px) }
  to { opacity: 1; transform: none }
}

.room-visore {
  animation: cds-scheda-sfondo .22s ease both
}

.room-visore-scheda {
  animation: cds-scheda-entra .42s cubic-bezier(.16,1,.3,1) both
}

.room-visore.chiude {
  animation: cds-scheda-sfondo .2s ease reverse both
}

.room-visore.chiude .room-visore-scheda {
  animation: cds-scheda-esce .2s ease both
}

/* I gruppi entrano scaglionati, e con loro la riga dei dati e le linguette.
   Il ritardo riparte a ogni cambio di variante: la classe "entra" viene
   rimessa dal JavaScript. */
.room-visore-corpo.entra .room-info-varianti,
.room-visore-corpo.entra .room-info-gruppo {
  animation: cds-scheda-voce .38s cubic-bezier(.16,1,.3,1) both
}

.room-visore-corpo.entra .room-info-gruppo:nth-child(1) { animation-delay: .06s }
.room-visore-corpo.entra .room-info-gruppo:nth-child(2) { animation-delay: .13s }
.room-visore-corpo.entra .room-info-gruppo:nth-child(3) { animation-delay: .2s }
.room-visore-corpo.entra .room-info-gruppo:nth-child(4) { animation-delay: .27s }
.room-visore-corpo.entra .room-info-gruppo:nth-child(5) { animation-delay: .34s }
.room-visore-corpo.entra .room-info-gruppo:nth-child(6) { animation-delay: .41s }

@media (prefers-reduced-motion: reduce) {
  .room-visore,
  .room-visore-scheda,
  .room-visore.chiude,
  .room-visore.chiude .room-visore-scheda,
  .room-visore-corpo.entra .room-info-varianti,
  .room-visore-corpo.entra .room-info-gruppo {
    animation: none
  }

  .room-visore-chiudi:hover {
    transform: none
  }
}

/* ------------------------------------------------------------------
 * Telefono
 * ------------------------------------------------------------------ */

@media (max-width: 680px) {
  /* I due tasti restano affiancati anche sul telefono. La colonna di Info e'
     stretta perche' la scritta e' corta: cosi a "Richiedi disponibilita"
     resta larghezza per andare a capo una volta sola. */
  .room-card-actions {
    grid-template-columns: 1fr auto;
    gap: 8px
  }

  .room-card-info {
    padding-left: 14px;
    padding-right: 14px
  }

  /* La finestra parte dal basso e arriva fino al bordo dello schermo:
     e' il gesto che ci si aspetta dal telefono. */
  .room-visore {
    place-items: end stretch;
    padding: 0
  }

  .room-visore-scheda {
    border-radius: 22px 22px 0 0;
    width: 100%;
    max-height: 92vh
  }

  .room-visore-testa {
    padding: 18px 18px 14px
  }

  .room-visore-testa>p {
    font-size: 1.25rem
  }

  .room-visore-corpo {
    padding: 16px 18px 26px
  }
}

@media (max-width: 680px) and (prefers-reduced-motion: no-preference) {
  .room-visore-scheda {
    animation-name: cds-scheda-sale
  }

  .room-visore.chiude .room-visore-scheda {
    animation-name: cds-scheda-scende
  }
}

@keyframes cds-scheda-sale {
  from { opacity: 0; transform: translateY(100%) }
  to { opacity: 1; transform: none }
}

@keyframes cds-scheda-scende {
  from { opacity: 1; transform: none }
  to { opacity: 0; transform: translateY(100%) }
}