/* ============================================================
   SNS Valley View — Room detail page
   New in build 1g (docs/builds/1g-room-pages.md). Not ported from the
   design handoff — no room detail page exists there — but built entirely
   from tokens, breakpoints, and component patterns the handoff and prior
   builds already established: --pad-x, the 1024px/680px edges, .btn,
   .room__meta, .overline, and the header's -80px overlay pull (hero.css).
   See docs/DECISIONS.md for the sub-hero height and sizes derivations.
   ============================================================ */

/* ------------------------------------------------------------
   Sub-page hero
   Roughly half the homepage hero's height (hero.css: 880/700/560px) at
   every breakpoint — tall enough to read as a full establishing image with
   the room name over it, short enough that it frames the room rather than
   opening a site the way the homepage hero does. See docs/DECISIONS.md.
   ------------------------------------------------------------ */
.room-hero {
  position: relative;
  height: 440px;
  margin-top: -80px; /* pulls the header over the image, same as .hero */
  overflow: hidden;
}

.room-hero__media,
.room-hero__scrim,
.room-hero__inner { position: absolute; inset: 0; }

.room-hero__media { overflow: hidden; }
.room-hero__media .responsive-image,
.room-hero__media .responsive-image__real,
.room-hero__media .responsive-image__blur {
  width: 100%;
  height: 100%;
}
.room-hero__media .responsive-image__real,
.room-hero__media .responsive-image__blur {
  object-fit: cover;
  filter: brightness(0.85) saturate(0.95);
}

/* Static, unlike the homepage hero's animated heroScrim — this page
   doesn't carry the letter-dissolve/pan choreography CLAUDE.md reserves
   for the homepage hero (that's a homepage-only signature move, not a
   requirement here), so there's no need for this scrim to lift to a
   "clear frame" moment the way heroScrim does.
   Five stops, tuned against real measurement, not a guess: sampled
   rendered pixel colour behind the header/back-link/title/price text
   (glyphs hidden first, so the sample is clean background, not a glyph
   edge) against all four rooms' photos at all three breakpoints. Two
   earlier, lighter versions of this gradient both left real gaps —
   .room-hero__back's fixed ~104-130px position lands at a DIFFERENT
   percentage of hero height at each breakpoint (24-41% across
   320-440px), so a narrow dark band near the top wasn't enough; the
   flat 0.55 plateau through 40% here covers its worst case (mobile,
   ~41%) directly. Likewise the bottom plateau starts at 85%, not 100%,
   because a linear ramp to a single dark point at the very bottom
   still left the title/price band under-covered on some photos (a
   bright window or sky directly behind the gold price text broke
   4.5:1 on Alpine Cabin at 2560px specifically). See docs/DECISIONS.md
   for the measurement methodology and full per-room numbers. */
.room-hero__scrim {
  background: linear-gradient(
    to bottom,
    rgba(9, 9, 9, 0.62) 0%,
    rgba(9, 9, 9, 0.55) 40%,
    rgba(9, 9, 9, 0.32) 55%,
    rgba(9, 9, 9, 0.88) 85%,
    rgba(9, 9, 9, 0.88) 100%
  );
}

/* padding-top clears the header, which sits on top of this box via the
   same -80px overlay pull .hero uses: 24px header padding + the logo's
   two-line stack (~39px) + 24px padding again is ~87px of real header
   content, so 104px leaves a clean gap rather than crowding it — measured
   against the rendered header, not assumed. See docs/DECISIONS.md. */
.room-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 104px 48px 40px;
  text-align: center;
}

.room-hero__back {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-cream-70);
}
.room-hero__back:hover { color: var(--c-cream); }

.room-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.room-hero__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--c-cream);
}

.room-hero__price {
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--c-gold);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   Gallery
   3 columns from 680px up — every room ships exactly 3 gallery photos
   (rooms.templ), so a fixed 3-column grid needs no auto-fit heuristics.
   Below 680px, 1 column. See roomGallerySizes (room.templ) for the sizes
   string this shape assumes.
   ------------------------------------------------------------ */
.room-gallery {
  padding: 80px var(--pad-x) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.room-gallery__figure {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
}
.room-gallery__figure .responsive-image,
.room-gallery__figure .responsive-image__real,
.room-gallery__figure .responsive-image__blur {
  width: 100%;
  height: 100%;
}
.room-gallery__figure .responsive-image__real,
.room-gallery__figure .responsive-image__blur {
  object-fit: cover;
}

/* ------------------------------------------------------------
   Description + amenities + CTA
   Two columns from 1024px up — copy left, reserve panel right — the same
   stack-below-1024px shape as .experience and .booking__inner.
   ------------------------------------------------------------ */
.room-detail {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  align-items: start;
  padding: 64px var(--pad-x) 96px;
}

.room-detail__desc {
  max-width: 560px;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-cream-55);
}

/* Reuses .room__meta (rooms.css) rather than a second copy of the same
   tag-list rule set — same visual language, same purpose (a short list of
   verified amenity tags), just a longer max-width column here. */
.room-detail__amenities { max-width: 560px; }

.room-detail__cta {
  padding: 28px 24px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-hair);
}

.room-detail__cta-label {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--c-gold);
}

/* cream-55 ("body" tier), not cream-45 ("sub") — cream-45 measures 4.05:1
   against --c-bg-card, short of WCAG AA's 4.5:1 for body text (verified
   via Lighthouse's color-contrast audit, not assumed); cream-55 clears it
   at 5.45:1. See docs/DECISIONS.md. */
.room-detail__cta-copy {
  margin: 12px 0 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-cream-55);
}

/* width: 100% on both — .btn is display: inline-block (base.css), which
   sizes to its own content; "Call +91 74487 99800" at this button's
   padding and letter-spacing is wider than the 360px CTA column (and
   wider still once that column stacks to full mobile width), so without
   this it overflows its container instead of wrapping. Same fix
   booking.css already applies to .btn--solid for the same reason. */
.room-detail__cta-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.room-detail__cta-links .btn {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .room-hero { height: 360px; }
  .room-gallery { padding: 64px var(--pad-x) 0; }
  .room-detail {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 56px var(--pad-x) 72px;
  }
}

@media (max-width: 680px) {
  .room-hero { height: 320px; }
  .room-hero__inner { padding: 104px 24px 28px; }
  .room-gallery { padding: 48px var(--pad-x) 0; }
  .room-detail { padding: 40px var(--pad-x) 56px; }
  .room-detail__cta-links .btn { min-height: 44px; }
}

@media (min-width: 680px) {
  .room-gallery { grid-template-columns: repeat(3, 1fr); }
}

/* No prefers-reduced-motion block: unlike the homepage hero, nothing on
   this page animates on its own — the sub-hero's scrim is static and
   ResponsiveImage's blur-to-real reveal (responsive-image.css) is a paint-
   order occlusion, not a CSS transition or animation. */