/* Accommodation room list. Scoped to .accommodation-rooms-section. */

.accommodation-rooms-section {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.accommodation-rooms-header {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.accommodation-rooms-heading {
  margin: 0;
  color: #a83829;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: capitalize;
}

.accommodation-rooms-intro {
  margin: 1.25rem 0 0;
  color: #2f4055;
  font-size: 1.125rem;
  line-height: 1.7;
}

.accommodation-rooms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 1.5rem;
}

.accommodation-room-photo {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  min-height: 0;
}

.accommodation-room-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.accommodation-room-card:hover .accommodation-room-photo img {
  transform: scale(1.05);
}

.accommodation-room-body {
  padding-top: 1.25rem;
}

.accommodation-room-name {
  margin: 0;
  color: #a83829;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  transition: color 0.25s ease;
}

.accommodation-room-card:hover .accommodation-room-name {
  color: #8e2e22;
}

.accommodation-room-specs {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  color: #2f4055;
  font-size: 1rem;
  line-height: 1.6;
}

.accommodation-room-specs li + li {
  margin-top: 0.55rem;
}

.accommodation-room-spec-label {
  display: inline;
  margin-right: 0.25rem;
  color: #2f4055;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .accommodation-rooms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Top room (Elementor "Hạng phòng đầu hiện 2 ảnh"): big + small photo side by
   side (2:1), name and specs below. Its frame spans two columns; every other
   room keeps a single 4:5 photo. */
.accommodation-room-pair {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 0.75rem;
  aspect-ratio: 3 / 2;
}

.accommodation-room-pair .accommodation-room-photo {
  aspect-ratio: auto;
  height: 100%;
}

@media (min-width: 640px) {
  .accommodation-rooms-grid.has-top-pair .accommodation-room-card.is-top-pair {
    grid-column: 1 / -1;
  }

  .accommodation-room-pair {
    gap: 1.5rem;
    aspect-ratio: 2 / 1;
  }
}

@media (min-width: 1024px) {
  .accommodation-rooms-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .accommodation-rooms-heading {
    font-size: 3.25rem;
  }

  .accommodation-rooms-header {
    margin-bottom: 2.5rem;
  }

  /* Three equal columns: top room spans 2, the others 1 (2 on top, 3 below). */
  .accommodation-rooms-grid {
    --room-col-gap: 1.75rem;
    container-type: inline-size;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem var(--room-col-gap);
  }

  .accommodation-rooms-grid.has-top-pair .accommodation-room-card.is-top-pair {
    grid-column: span 2;
  }

  /* Same height as a single 4:5 card photo, so the top row lines up. */
  .accommodation-room-pair {
    gap: var(--room-col-gap);
    aspect-ratio: auto;
    height: calc((100cqw - 2 * var(--room-col-gap)) / 3 * 1.25);
  }

  .accommodation-room-name {
    font-size: 2.25rem;
  }
}