/* =========================================================
   ARB KHAO — rooms.css (rooms page only)
   ========================================================= */

/* price card */
.price-card { border: 1px solid var(--line); padding: clamp(28px, 4vw, 56px); background: var(--cream-2); position: relative; }
.price-card__for { margin: 6px 0 0; font-size: var(--fs-small); color: var(--c-muted); }
.price-card__big { font-weight: 200; font-size: clamp(64px, 8vw, 120px); line-height: .9; margin: 18px 0 6px; }
.price-card__big small { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; margin-left: 8px; }
.price-table { width: 100%; border-collapse: collapse; margin-top: 30px; }
.price-table th, .price-table td { text-align: left; padding: 16px 0; border-top: 1px solid var(--line); vertical-align: top; font-weight: 300; }
.price-table th { font-weight: 400; }
.price-table td:last-child { text-align: right; font-weight: 400; white-space: nowrap; padding-left: 16px; }
.note { font-size: var(--fs-small); color: var(--c-muted); margin-top: 18px; }

/* included in the rate */
.inclusions { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.inclusion { padding: 32px 28px 36px 0; border-right: 1px solid var(--line); }
.inclusion + .inclusion { padding-left: 28px; }
.inclusion:last-child { border-right: 0; }
.inclusion__img { height: clamp(240px, 24vw, 340px); overflow: hidden; margin-bottom: 24px; }
.inclusion__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.inclusion:hover .inclusion__img img { transform: scale(1.04); }
.inclusion h3 { margin: 0 0 6px; }
.inclusion .th-name { font-weight: 400; font-size: 15px; margin: 0 0 12px; }
.inclusion p { margin: 0; font-size: 14px; color: var(--c-muted); }

/* amenities */
.amenities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.amenities li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.amenities li:nth-child(odd) { padding-right: 16px; }
.amenities svg { width: 26px; height: 26px; flex: none; color: var(--brown); }

/* a day here */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.timeline li { border-top: 1px solid var(--line-light); padding: 26px 24px 0 0; position: relative; }
.timeline li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--sand); }
.timeline .when { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.timeline h3 { font-size: clamp(26px, 2.4vw, 34px); margin: 14px 0 8px; }
.timeline p { margin: 0; font-size: 14px; opacity: .82; }

@media (max-width: 1199px) {
  .inclusions { grid-template-columns: repeat(2, 1fr); }
  .inclusion:nth-child(2) { border-right: 0; }
  .inclusion:nth-child(3) { padding-left: 0; }
  .inclusion:nth-child(n+3) { border-top: 1px solid var(--line); }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
}
@media (max-width: 767px) {
  .inclusions { grid-template-columns: 1fr; }
  .inclusion__img { height: auto; aspect-ratio: 4 / 3; }
  .inclusion, .inclusion + .inclusion { padding: 28px 0; border-right: 0; }
  .inclusion + .inclusion { border-top: 1px solid var(--line); }
  .price-table td:last-child { white-space: normal; }
}
@media (max-width: 575px) {
  .amenities { grid-template-columns: 1fr; }
  .amenities li:nth-child(odd) { padding-right: 0; }
  .timeline { grid-template-columns: 1fr; }
  .price-card .pill { width: 100%; justify-content: center; }
}