/* ==========================================================================
   Abyat Al Sharq — page-room.css (one page per room type, /rooms/<slug>/)
   Loaded after page-rooms.css (shared blocks). Classes prefixed .room-. Tokens from critical.css only.
   Motion: transform / translate / scale / opacity only.
   ========================================================================== */

/* ================================================================ key facts band (overlaps the hero) */
.room-facts-band { position: relative; z-index: 2; margin-top: calc(clamp(2.25rem, 1.5rem + 2.5vw, 3.25rem) * -1); }
.room-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2);
}
@media (min-width: 820px) { .room-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.room-fact { display: grid; gap: .25rem; align-content: start; padding: clamp(1rem, .8rem + .8vw, 1.5rem) clamp(1rem, .7rem + 1vw, 1.75rem); }
.room-fact:nth-child(n + 3) { border-top: 1px solid var(--line); }
.room-fact:nth-child(even) { border-inline-start: 1px solid var(--line); }
@media (min-width: 820px) {
  .room-fact:nth-child(n + 3) { border-top: 0; }
  .room-fact + .room-fact { border-inline-start: 1px solid var(--line); }
}
.room-fact dt { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-xs); color: var(--muted); }
.room-fact dt .icon { color: var(--gold-600); }
.room-fact dd { margin: 0; font-weight: 600; line-height: 1.5; color: var(--ink); }
.room-fact__big { font-family: var(--font-latin); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 600; line-height: 1.1; color: var(--gold-700); font-variant-numeric: lining-nums; }
.room-fact__unit { margin-inline-start: .3rem; font-weight: 500; color: var(--gold-700); }
.room-fact__link { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent-ink); text-decoration: none; }
.room-fact__link .icon { width: 1em; height: 1em; transition: translate .4s var(--ease-out); }
.room-fact__link:hover .icon { translate: 0 3px; }

/* ================================================================ overview + booking card */
.room-overview__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); align-items: start; }
@media (min-width: 1024px) { .room-overview__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.room-overview__main { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.room-overview__desc { font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); line-height: 1.85; color: var(--ink); }
:lang(en) .room-overview__desc { line-height: 1.5; }
.room-overview__h { margin-top: clamp(.75rem, .5rem + 1vw, 1.5rem); font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; line-height: 1.5; display: flex; align-items: center; gap: .9rem; }
.room-overview__h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.room-highlights { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem 1.5rem; }
@media (min-width: 600px) { .room-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.room-highlights li { display: flex; align-items: center; gap: .9rem; line-height: 1.6; color: var(--ink-soft); }
.room-highlights .icon-badge { width: 48px; height: 48px; }
.room-highlights .icon-badge .icon { width: 22px; height: 22px; }
.room-extras { display: grid; gap: .65rem; }
.room-extras li { display: flex; align-items: flex-start; gap: .65rem; line-height: 1.7; color: var(--ink-soft); }
.room-extras .icon { flex: none; margin-top: .25em; color: var(--success); }

.room-aside { position: relative; }
@media (min-width: 1024px) { .room-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.room-book-card {
  display: grid; gap: 1rem; padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-1);
}
.room-book-card__kicker { font-size: var(--fs-xs); font-weight: 500; color: var(--accent-ink); line-height: 1.5; }
:lang(ar) .room-book-card__kicker { letter-spacing: .12em; text-transform: uppercase; }
.room-book-card__name { margin-top: -.6rem; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; color: var(--ink); }
:lang(en) .room-book-card__name { font-weight: 600; line-height: 1.15; }
.room-book-card__facts { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: var(--fs-small); color: var(--ink-soft); }
.room-book-card__facts li { display: inline-flex; align-items: center; gap: .4rem; }
.room-book-card__facts .icon { color: var(--gold-600); }
.room-book-card__times { display: grid; gap: .6rem; margin: 0; padding-block: 1rem; border-block: 1px solid var(--line); }
.room-book-card__times dt { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-xs); color: var(--muted); }
.room-book-card__times dt .icon { color: var(--gold-600); width: 1.1em; height: 1.1em; }
.room-book-card__times dd { margin: 0; padding-inline-start: calc(1.1em + .45rem); font-weight: 600; font-size: var(--fs-small); line-height: 1.6; }
.room-book-card__note { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--fs-xs); line-height: 1.6; color: var(--muted); }
.room-book-card__note .icon { flex: none; margin-top: .15em; color: var(--gold-600); }
.room-book-card__back { justify-self: center; margin-top: .25rem; font-size: var(--fs-small); }

/* ================================================================ gallery */
.room-gallery__count { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-soft); white-space: nowrap; }
.room-gallery__count .icon { color: var(--gold-600); }
.room-gallery .frame { box-shadow: var(--shadow-1); }

/* ================================================================ other rooms */
.room-others .room-card__title { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.7rem); }

/* guests' reviews (link only) */
.room-book-card__reviews { justify-self: center; font-size: var(--fs-small); }
.room-book-card__reviews .icon:first-child { color: var(--gold-600); }