/* ============================================================
   SNS Valley View — Rooms
   Ported from design_handoff_sns_valley_view/styles.css lines 349-465.
   ============================================================ */

.rooms {
  padding: 80px var(--pad-x);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.rooms__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}

.rooms__title {
  margin: 12px 0 0;
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--c-cream);
}

.rooms__all {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-cream-40);
}
.rooms__all:hover { color: var(--c-cream); }

.rooms__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.room {
  display: flex;
  flex-direction: column;
  background: var(--c-bg-card);
  border: 1px solid var(--c-hair);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.room:hover { border-color: var(--c-gold-line); }

/* aspect-ratio, not a fixed height, so the card grows taller as it widens
   instead of the photo cropping into a wider strip of the same scene.
   3/2, not the prior 374/280 (~1.336:1, itself a leftover from a narrower
   pre-1f 3-column canvas — see git history): the 2x2 grid's much wider
   columns made that near-square ratio read very tall at 1920/2560px, and
   3/2 is a deliberate, measured replacement, not a rounder version of the
   old number. Chosen because it's Alpine Cabin's card photo's own native
   sensor ratio (alpine-cabin-1, 6000x4000) — the one card image most
   dependent on preserving what's at the top of frame (the A-frame ceiling
   apex and its pendant fixture, with almost no headroom above them in the
   source) gets object-fit:cover with zero crop at this exact ratio,
   confirmed directly (resizing to a fixed width and checking the output
   dimensions lands on 3/2 with no crop step). The other three card
   photos (native 4:3) take a modest, verified-safe crop at 3/2 — checked
   with real rendered stills, not assumed; see docs/DECISIONS.md for the
   full derivation, the rejected wider alternatives (16:10, 16:9 — both
   cut into Alpine Cabin's ceiling apex), and the resulting ~11% height
   reduction at 1280/1920/2560px. See docs/DECISIONS.md. */
.room__figure {
  position: relative;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
}
.room__figure .responsive-image,
.room__figure .responsive-image__real,
.room__figure .responsive-image__blur {
  width: 100%;
  height: 100%;
}
.room__figure .responsive-image__real,
.room__figure .responsive-image__blur {
  object-fit: cover;
  filter: brightness(0.85) saturate(0.9);
  transition: transform var(--dur-slow) var(--ease),
              filter var(--dur-slow) var(--ease);
}
.room:hover .room__figure .responsive-image__real,
.room:hover .room__figure .responsive-image__blur {
  transform: scale(1.04);
  filter: brightness(0.95) saturate(1);
}

.room__body { padding: 28px 24px; }

.room__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.room__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--c-cream);
}

.room__price {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--c-gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.room__desc {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-cream-40);
}

.room__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--c-hair);
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.room__meta li {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cream-30);
}

/* ============================================================
   Responsive
   1 column below 680px, 2 columns (a 2x2 grid at four rooms) from 680px
   up, 4 columns (one row) from 1600px up — three tiers, each an exact
   divisor of 4 rooms, so none of them ever orphans a card onto its own
   row (the reason 3 columns was rejected in 1f). Each edge is exactly
   what roomCardSizes (rooms.templ) assumes: changing a column count here
   without updating that string would silently make the browser fetch the
   wrong image width. See docs/DECISIONS.md.

   The 1600px tier exists because 2 columns alone, uncapped, means a card
   keeps growing with the viewport indefinitely — at a ~1950px browser
   window it renders at ~929px wide, distractingly large for a card. 4
   columns at that width brings it down to ~444px, back in normal card
   territory, without introducing the width cap the client explicitly
   removed in phase 1b. See docs/DECISIONS.md for the derivation.
   ============================================================ */
@media (max-width: 1024px) {
  .rooms { padding: 64px var(--pad-x); }
}

@media (max-width: 680px) {
  .rooms { padding: 48px var(--pad-x); }
  .rooms__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rooms__title { font-size: 34px; }
  .rooms__all { min-height: 44px; display: inline-flex; align-items: center; }
  .rooms__grid { grid-template-columns: 1fr; }
}

@media (min-width: 1600px) {
  .rooms__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------
   Fit-to-viewport height, 2-column and 4-column tiers only
   Width-based sizing (aspect-ratio 3/2, the column tiers above) alone
   doesn't bound a card's HEIGHT against the viewport's actual height —
   a wide-but-short browser window can still make the section taller
   than one screen even with reasonably-sized cards. max-height on
   .room__figure caps it: the card's WIDTH still comes entirely from the
   grid column (untouched), aspect-ratio still sets the *preferred*
   height, and object-fit: cover (already set) crops further within
   that same width whenever max-height is the binding constraint — a
   short viewport gets a more aggressive crop, not a narrower or
   misaligned card.

   Both values are calc(Ndvh - Mpx): M is every fixed, non-image
   pixel cost between the viewport's top and bottom edge once the
   section is scrolled fully into view — section padding (top+bottom),
   .rooms__head's height and margin-bottom, and (2-column only) one
   row's .room__body height plus the inter-row grid gap, since two
   rows share the remaining height. Measured directly against the
   rendered page, then re-verified by rendering real width/height
   combinations and checking the section's actual bounding box against
   the viewport (not assumed from the arithmetic alone) — the first
   pass's 4-column constant (447px measured, rounded to 460px) still
   left the section 10px taller than the viewport at 1920x700, so both
   constants below carry a fuller margin than the raw measurement:

     4-column (>=1600px, 1 row): 2x80px padding + 73px head +
     48px head margin + 166px body = 447px, rounded up to 480px.
     max-height: calc(100dvh - 480px).

     2-column (681-1599px, 2 rows): worst case across this tier's two
     padding regimes (80px above 1024px, 64px at/below it) and its two
     observed body-text heights (166px/185px, depending on how much a
     description wraps) is 2x80px padding + 73px head + 48px head
     margin + 2x185px body + 20px row gap = 672px total, /2 rows =
     336px each, rounded up to 350px each (700px total) for the same
     margin. Deliberately the more conservative (larger) overhead of
     the tier's two sub-cases, not an average — at the narrower
     681-1024px sub-range this slightly under-fills the available
     height rather than ever overflowing it.
     max-height: calc(50dvh - 350px).

   1024px is the same padding-change edge base.css/.rooms already use
   elsewhere; not a new number introduced here.

   min-height: 160px on both tiers is load-bearing, not decorative —
   without it, a short-AND-narrow window (e.g. 900x700, still inside
   the 2-column tier) satisfies the max-height arithmetic by crushing
   the image to a few pixels tall, technically "fitting" while showing
   nothing recognizable. min-height always wins over max-height in the
   CSS used-value algorithm, so past this floor the section is allowed
   to exceed one viewport height and become normally scrollable again —
   a graceful fallback, not a broken photo, when a window is too
   short for both constraints at once. Confirmed both ways: 900x700
   now shows a proper photo and scrolls slightly; 1920x700 (comfortably
   above the floor) still fits with zero scroll.

   Below 680px (1 column, 4 stacked cards) has no cap at all: the fixed
   overhead alone at that layout (header + 4 card bodies + 3 row gaps)
   is ~1064px, already taller than most phones' full viewport height
   before a single pixel of photo is counted — "fits one screen" is not
   achievable there without shrinking text below legible size, so
   mobile stays normally scrollable, same as it already is on every
   other section of this page. See docs/DECISIONS.md.
   ------------------------------------------------------------ */
@media (min-width: 681px) and (max-width: 1599px) {
  .room__figure {
    max-height: calc(50dvh - 350px);
    min-height: 160px;
  }
}

@media (min-width: 1600px) {
  .room__figure {
    max-height: calc(100dvh - 480px);
    min-height: 160px;
  }
}