/* Editorial room showcase */
.rooms {
  position: relative;
  min-height: 860px;
  grid-template-columns: minmax(0, 58%) minmax(420px, 42%);
  background:
    radial-gradient(circle at 80% 20%, rgba(112, 31, 47, .32), transparent 34%),
    #171110;
  overflow: hidden;
}

.rooms::before {
  content: "ROOMS";
  position: absolute;
  z-index: 0;
  right: -20px;
  bottom: -22px;
  font: 400 clamp(90px, 12vw, 190px)/.8 Georgia, serif;
  letter-spacing: -.06em;
  color: rgba(255, 255, 255, .025);
  pointer-events: none;
}

.roomsVisual {
  min-height: 860px;
  overflow: hidden;
}

.roomsVisual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 65%, rgba(23, 17, 16, .44)),
    linear-gradient(0deg, rgba(15, 9, 8, .72), transparent 42%);
  pointer-events: none;
}

.roomsVisual img {
  transform: scale(1.035);
  transition: transform 1.4s cubic-bezier(.2, .75, .2, 1), filter .8s ease;
  filter: saturate(.88) contrast(1.04);
}

.rooms:hover .roomsVisual img {
  transform: scale(1.075);
  filter: saturate(1) contrast(1.02);
}

.roomBadge {
  z-index: 2;
  right: 34px;
  bottom: 34px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  flex-direction: column;
  gap: 3px;
  text-align: center;
  background: rgba(72, 17, 28, .88);
  border: 1px solid rgba(229, 193, 122, .65);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .025), 0 22px 60px rgba(0, 0, 0, .35);
  backdrop-filter: blur(12px);
}

.roomBadge::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px dashed rgba(226, 188, 112, .34);
  border-radius: 50%;
}

.roomBadge b { font-size: 45px; line-height: .9; }
.roomBadge span { color: rgba(255, 255, 255, .72); }

.roomVisualMeta {
  position: absolute;
  z-index: 3;
  left: 40px;
  bottom: 38px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: white;
}

.roomVisualMeta i {
  width: 42px;
  height: 1px;
  background: var(--gold);
}

.roomVisualMeta span {
  font: 600 8px/1.5 Arial, sans-serif;
  letter-spacing: .23em;
}

.roomVisualMeta small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, .56);
  letter-spacing: .12em;
}

.roomsCopy {
  position: relative;
  z-index: 1;
  padding: 92px clamp(38px, 5vw, 82px) 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rooms h2 {
  font-size: clamp(47px, 4.1vw, 70px);
  letter-spacing: -.035em;
}

.roomsCopy > p:not(.eyebrow) {
  max-width: 460px;
  margin: 26px 0 29px;
  color: #cfc3ba;
  font-size: 16px;
}

.roomTypes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 26px;
}

.roomType {
  position: relative;
  min-height: 116px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .025);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.roomType:hover,
.roomType.featured {
  transform: translateY(-3px);
  border-color: rgba(211, 171, 91, .55);
  background: linear-gradient(135deg, rgba(105, 29, 44, .42), rgba(255, 255, 255, .025));
}

.roomType small {
  display: block;
  margin-bottom: 13px;
  color: var(--gold);
  font-size: 7px;
  letter-spacing: .22em;
}

.roomType strong {
  display: block;
  font: 400 28px/1 Georgia, serif;
  color: #f3e8dc;
}

.roomType span {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, .52);
  font-size: 8px;
  letter-spacing: .1em;
}

.amenities {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 0 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .1);
}

.amenities span {
  min-height: 54px;
  padding: 18px 12px;
  border-right: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 9px;
  color: rgba(255, 255, 255, .68);
}

.amenities span:nth-child(3n) { border-right: 0; }
.amenities span:nth-last-child(-n+3) { border-bottom: 0; }

.roomActionRow {
  display: flex;
  align-items: center;
  gap: 22px;
}

.roomActionRow .outlineButton {
  min-width: 215px;
  border-color: rgba(216, 177, 99, .62);
  background: linear-gradient(135deg, #6b1e2e, #42111c);
  box-shadow: 0 14px 36px rgba(44, 8, 16, .28);
  transition: transform .25s ease, background .25s ease;
}

.roomActionRow .outlineButton:hover { transform: translateY(-2px); background: #711f31; }
.roomActionRow small { color: rgba(255, 255, 255, .45); font-size: 7px; line-height: 1.6; letter-spacing: .13em; }

@media (max-width: 1000px) {
  .rooms { grid-template-columns: 1fr; }
  .roomsVisual { min-height: 620px; }
  .roomsCopy { padding: 80px 7vw 90px; }
}

@media (max-width: 600px) {
  .roomsVisual { min-height: 470px; }
  .roomBadge { width: 112px; height: 112px; right: 20px; bottom: 24px; }
  .roomBadge b { font-size: 34px; }
  .roomVisualMeta { left: 22px; bottom: 26px; }
  .roomsCopy { padding: 68px 22px 76px; }
  .roomTypes { grid-template-columns: 1fr; }
  .roomType { min-height: 100px; }
  .amenities { grid-template-columns: 1fr 1fr; }
  .amenities span:nth-child(3n) { border-right: 1px solid rgba(255, 255, 255, .08); }
  .amenities span:nth-child(2n) { border-right: 0; }
  .amenities span:nth-last-child(-n+3) { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .amenities span:nth-last-child(-n+2) { border-bottom: 0; }
  .roomActionRow { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .roomsVisual img, .roomType, .roomActionRow .outlineButton { transition: none; }
  .rooms:hover .roomsVisual img, .roomType:hover { transform: none; }
}