/* 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-copy>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
}

.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%
}

.rooms-experience-image>div {
  background: var(--color-surface-warm-alt);
  border-radius: 12px;
  width: 150px;
  height: 105px;
  padding: 6px;
  position: absolute;
  bottom: 22px;
  right: 22px;
  box-shadow: 0 8px 22px #1113
}

.rooms-experience-image>div img {
  object-fit: cover;
  border-radius: 8px;
  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: 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
  }
}

@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
  }
}