/* =============================================================================
   Section: #rooms (חדרי אירוח) — hover/focus-swap name-list → shared image stage
   --------------------------------------------------------------------------
   Layout : Two panes. Names list (right side in RTL, the inline-start column)
            + a shared image stage. Hover/focus/tap/keyboard a name reveals its
            room image via a clip-path inset wipe; all panels stack in one grid
            cell, only .is-active is visible.
   Rules  : Logical properties only. Every color/space/font from tokens.css.
            RTL-first. prefers-reduced-motion → instant swap, no wipe.
   Class set (BEM-ish):
     .rooms                 section root  (also carries [data-rooms-stage])
     .rooms__container      max-width wrapper
     .rooms__layout         the two-pane grid
     .rooms__list           the names column   (role=tablist)
     .rooms__trigger        one name button    ([data-rooms-trigger])
     .rooms__trigger-name   room title text
     .rooms__trigger-desc   one-line description
     .rooms__stage          the image stage (right/visual pane)
     .rooms__panel          one stacked image cell ([data-rooms-panel])
   ========================================================================== */

.rooms {
  position: relative;
  background-color: var(--bg);
  color: var(--fg);
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
  isolation: isolate;
  overflow: clip;
}

.rooms__container {
  max-inline-size: var(--container-wide);
  margin-inline: auto;
}

/* The section already renders a .section-header above; spacing handled there.
   This local container only needs to push the layout below the header. */
.rooms .section-header {
  margin-block-end: var(--space-12);
}

/* ---------------------------------------------------------------------- *
 *  TWO-PANE LAYOUT                                                        *
 *  In RTL the first grid column sits on the right (inline-start) → names. *
 * ---------------------------------------------------------------------- */
.rooms__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--space-6), 4vw, var(--space-16));
  align-items: stretch;
}

/* ---------------------------------------------------------------------- *
 *  NAMES LIST (inline-start pane)                                         *
 * ---------------------------------------------------------------------- */
.rooms__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-self: center;
  margin: 0;
  padding: 0;
}

.rooms__trigger {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  inline-size: 100%;
  text-align: start;
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--border);
  padding-block: var(--space-4);
  padding-inline: var(--space-2);
  cursor: pointer;
  color: var(--fg-muted);
  transition:
    color var(--dur-base) var(--ease-out-cinema),
    padding-inline-start var(--dur-base) var(--ease-out-cinema),
    transform var(--dur-fast) var(--ease-out-cinema),
    background-color var(--dur-base) var(--ease-out-cinema);
}

/* Press feedback: unified site-wide press-scale (2026-06-15 — was 0.99). */
.rooms__trigger:active {
  transform: scale(0.98);
}

.rooms__trigger:last-child {
  border-block-end: 0;
}

.rooms__trigger-name {
  font-family: var(--font-display-he);
  font-size: clamp(var(--text-md), 2.2vw, var(--text-xl));
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: inherit;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

/* Brass index numeral — kept LTR via isolate per §4 bidi rule. */
.rooms__trigger-num {
  font-family: var(--font-display-en);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  color: var(--brass);
  unicode-bidi: isolate;
  opacity: 0.55;
  transition: opacity var(--dur-base) var(--ease-out-cinema);
}

.rooms__trigger-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  margin: 0;
  max-block-size: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-block-size var(--dur-slow) var(--ease-out-cinema),
    opacity var(--dur-slow) var(--ease-out-cinema);
}

/* Hover / focus / active states ---------------------------------------- */
.rooms__trigger:hover,
.rooms__trigger:focus-visible {
  color: var(--ink-deep);
  outline: none;
}

.rooms__trigger:focus-visible {
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.rooms__trigger.is-active {
  color: var(--ink-deep);
  padding-inline-start: var(--space-4);
  background-color: var(--bg-alt);
  border-radius: var(--radius-sm);
}

.rooms__trigger.is-active .rooms__trigger-num {
  opacity: 1;
}

.rooms__trigger.is-active .rooms__trigger-name {
  font-weight: var(--fw-medium);
}

.rooms__trigger.is-active .rooms__trigger-desc {
  max-block-size: 6rem;
  opacity: 1;
  margin-block-start: var(--space-2);
}

/* ---------------------------------------------------------------------- *
 *  IMAGE STAGE (visual pane) — stacked panels, clip-path wipe reveal      *
 * ---------------------------------------------------------------------- */
.rooms__stage {
  position: relative;
  display: grid;
  /* All panels occupy the same single cell. */
  grid-template-areas: "stack";
  aspect-ratio: 4 / 5;
  inline-size: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--ink-medium);
  box-shadow: var(--shadow-strong);
}

.rooms__panel {
  grid-area: stack;
  margin: 0;
  inline-size: 100%;
  block-size: 100%;
  /* Hidden default: clipped to nothing from the inline-start edge. */
  clip-path: inset(0 0 0 100%);
  opacity: 0;
  transition:
    clip-path var(--dur-deluxe) var(--ease-out-cinema),
    opacity var(--dur-deluxe) var(--ease-out-cinema);
  pointer-events: none;
}

.rooms__panel.is-active {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

.rooms__panel picture,
.rooms__panel img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Subtle Ken-Burns drift on the active image for "premium" feel. */
.rooms__panel img {
  transform: scale(1.04);
  transition: transform var(--dur-cinema) var(--ease-out-cinema);
}
.rooms__panel.is-active img {
  transform: scale(1);
}

/* ---------------------------------------------------------------------- *
 *  RESPONSIVE — stack vertically; names become a horizontal scroller above *
 * ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  .rooms__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  /* Stage first (visual), names scroller below — order via grid source flow. */
  .rooms__stage {
    aspect-ratio: 4 / 3;
    order: -1;
  }

  .rooms__list {
    flex-direction: row;
    gap: var(--space-2);
    align-self: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-block-end: var(--space-2);
  }

  .rooms__trigger {
    flex: 0 0 auto;
    inline-size: auto;
    border-block-end: 0;
    border-radius: var(--radius-btn);
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    background-color: var(--bg-alt);
    scroll-snap-align: start;
  }

  .rooms__trigger:last-child {
    border-block-end: 0;
  }

  .rooms__trigger.is-active {
    padding-inline-start: var(--space-4);
    background-color: var(--cocoa);
    color: var(--fg-on-dark);
  }

  .rooms__trigger.is-active .rooms__trigger-num {
    color: var(--brass-glow);
  }

  /* On mobile the one-liner would jitter the horizontal scroller — hide it. */
  .rooms__trigger-desc,
  .rooms__trigger.is-active .rooms__trigger-desc {
    display: none;
  }

  .rooms__trigger-name {
    font-size: var(--text-base);
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------- *
 *  REDUCED MOTION — instant swap, no wipe, no drift                       *
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rooms__panel {
    transition: none;
    /* Hidden panels collapse instantly. */
    clip-path: inset(0 0 0 100%);
  }
  .rooms__panel.is-active {
    clip-path: inset(0 0 0 0);
  }
  .rooms__panel img,
  .rooms__panel.is-active img {
    transform: none;
    transition: none;
  }
  .rooms__trigger,
  .rooms__trigger-desc {
    transition: none;
  }
  .rooms__trigger:active {
    transform: none;
  }
}

/* ====================================================================== *
 *  DOOR ENTRY (2026-06-11) — replaces the two-pane gallery on the home    *
 *  page. The #rooms section now shows a centered door image that links    *
 *  to the /rooms/dist/ sub-app (Constitution §2.1, third route — the      *
 *  phantom.land curved image wall). Clicking it navigates with no         *
 *  animation today; the future door-opening MP4 seam is documented in     *
 *  index.html (#rooms) + rooms/src/intro/README.md.                       *
 *                                                                          *
 *  LEGACY: the .rooms__container / .rooms__layout / .rooms__list /         *
 *  .rooms__stage / .rooms__panel / .rooms__trigger rules ABOVE are now     *
 *  orphaned (the markup they styled was removed). Kept on disk per §2.1    *
 *  rule 6 ("vanilla legacy preserved") so a revert is one markup swap;     *
 *  js/rooms-gallery.js self-no-ops without [data-rooms-stage].            *
 * ====================================================================== */
.rooms__door-wrap {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-8);
}

.rooms__door {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: var(--ink-deep);
  cursor: pointer;
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  transition:
    transform var(--dur-base) var(--ease-out-cinema),
    filter var(--dur-base) var(--ease-out-cinema);
}

.rooms__door picture,
.rooms__door img {
  display: block;
}

.rooms__door img {
  inline-size: auto;
  block-size: clamp(22rem, 52vh, 34rem);
  max-inline-size: 90vw;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px color-mix(in srgb, var(--ink-deep) 22%, transparent));
  transition: transform var(--dur-base) var(--ease-out-cinema);
}

/* Hover/focus: the door eases forward a touch — an invitation to enter. */
.rooms__door:hover img,
.rooms__door:focus-visible img {
  transform: translateY(-6px) scale(1.015);
}

.rooms__door:active img {
  transform: translateY(-2px) scale(1.005);
}

.rooms__door:focus-visible {
  /* Was `outline: var(--focus-ring)` — invalid (the token is a box-shadow,
     not an outline shorthand), so the door had NO visible focus ring. Fixed
     to the unified offset ring token (2026-06-15 unify pass). */
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.rooms__door-cue {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brass-deep);
  border-block-end: 1px solid color-mix(in srgb, var(--brass) 55%, transparent);
  padding-block-end: var(--space-1);
  transition: color var(--dur-base) var(--ease-out-cinema);
}

.rooms__door:hover .rooms__door-cue,
.rooms__door:focus-visible .rooms__door-cue {
  color: var(--brass);
}

@media (prefers-reduced-motion: reduce) {
  .rooms__door,
  .rooms__door img {
    transition: none;
  }
  .rooms__door:hover img,
  .rooms__door:focus-visible img,
  .rooms__door:active img {
    transform: none;
  }
}

/* ====================================================================== *
 *  DOOR-OPENING TRANSITION (2026-06-11, v4 — opaque cropped clip IN PLACE)  *
 *  js/rooms-door.js plays the producer's door clip RIGHT WHERE THE DOOR     *
 *  SITS in the #rooms section — NOT a fullscreen player. The clip is an     *
 *  OPAQUE H.264 MP4 (door.mp4), cropped tight to the casing so there's NO   *
 *  white background box, opening onto a BLACK void that STAYS black (you    *
 *  enter the dark gallery). It's layered over the still cut-out, which is   *
 *  hidden once the clip renders (no "two doors"). On `ended`/skip an        *
 *  ink-deep veil fades in, then we navigate to /rooms/dist/; the black void *
 *  + the sub-app's ink-deep boot make the handoff seamless. reduced-motion  *
 *  / modified click / playback failure → plain navigation (no overlay).     *
 * ====================================================================== */

/* While playing, the link is the positioning context for the video overlay. */
.rooms__door.is-playing {
  position: relative;
}

/* Once the video is actually rendering, hide the still cut-out + the cue so the
   ONLY door on screen is the video's (no "two doors"). The still image stays
   visible until then (covers the decode-start; same closed-door first frame). */
.rooms__door.is-video-ready picture,
.rooms__door.is-video-ready .rooms__door-cue {
  opacity: 0;
}

/* The video sits ON TOP of the still door <picture>, same box, same fit, so it
   lines up with the cut-out underneath (hidden once it plays). The clip is
   opaque (a tight rectangle: casing + door + black void). */
.rooms__door .rooms-door__video {
  position: absolute;
  inset-block-start: var(--space-3); /* matches the figure's top padding */
  inset-inline: 0;
  margin-inline: auto;
  block-size: clamp(22rem, 52vh, 34rem); /* same as .rooms__door img */
  inline-size: auto;
  max-inline-size: 90vw;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

/* Skip link — minimal-editorial: ivory-on-page text + brass underline that
   grows on hover (the site's link grammar). Anchored under the door. */
.rooms__door .rooms-door__skip {
  position: absolute;
  inset-block-end: calc(-1 * var(--space-8));
  inset-inline: 0;
  margin-inline: auto;
  inline-size: max-content;
  z-index: 2;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brass-deep);
  padding-block-end: var(--space-1);
  pointer-events: auto;
  transition: color var(--dur-base) var(--ease-out-cinema);
}

.rooms__door .rooms-door__skip::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: var(--brass);
  transform: scaleX(0.4);
  transform-origin: inline-end;
  transition: transform var(--dur-base) var(--ease-out-cinema);
}

.rooms__door .rooms-door__skip:hover,
.rooms__door .rooms-door__skip:focus-visible {
  color: var(--brass);
  outline: none;
}

.rooms__door .rooms-door__skip:hover::after,
.rooms__door .rooms-door__skip:focus-visible::after {
  transform: scaleX(1);
}

/* Ink-deep veil — fades the whole page out at the end of the clip, then
   navigation lands on the sub-app's matching ink-deep boot (no flash). */
.rooms-door-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink-deep);
  opacity: 0;
  transition: opacity 0.56s var(--ease-out-cinema, ease);
  pointer-events: none;
}

.rooms-door-veil.is-on {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .rooms-door-veil {
    transition: none;
  }
}