/* The room viewer (js/room-media.js): a room's photos and videos, opened from "Know more" on its title card.
   Black ground, white type, the site's own tokens and button. Everything visual reads from the --rmv-* set below, so a
   restyle is a token change, not a rewrite. */
.rmv{
  --rmv-bg:var(--ground); --rmv-ink:var(--ink); --rmv-soft:var(--soft); --rmv-line:var(--line);
  --rmv-pad:var(--gut); --rmv-thumb-w:48px; --rmv-thumb-h:64px; --rmv-hit:44px;
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--rmv-bg);color:var(--rmv-ink);overflow:hidden;overscroll-behavior:contain}
.rmv::backdrop{background:var(--rmv-bg)}
.rmv[open]{animation:rmv-in .32s var(--ease) both}
@keyframes rmv-in{from{opacity:0}to{opacity:1}}
html.viewer-open,html.viewer-open body{overflow:hidden}

.rmv-in{display:flex;flex-direction:column;height:100%;
  padding:calc(var(--rmv-pad)*.7 + var(--sat)) calc(var(--rmv-pad) + var(--sar)) calc(var(--rmv-pad)*.7 + var(--sab)) calc(var(--rmv-pad) + var(--sal))}

/* head: the room's name and line (the card's type, smaller), Close on the right */
.rmv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex:none}
.rmv-name{font-family:var(--serif);font-stretch:125%;text-transform:uppercase;font-weight:800;font-size:clamp(26px,3.6vw,52px);line-height:.95;letter-spacing:.06em;margin:0}
.rmv-line{margin:12px 0 0;max-width:52ch;font-size:clamp(15px,1.2vw,18px);line-height:1.45;color:var(--rmv-soft)}
.rmv-close{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:var(--rmv-hit);padding:0 2px 0 12px;margin:-6px -2px 0 0;
  background:none;border:0;color:var(--rmv-ink);cursor:pointer}
.rmv-x{font-family:var(--sans);font-size:28px;font-weight:300;line-height:1;letter-spacing:0;transform:translateY(-1px)}
@media (hover:hover){.rmv-close:hover .rmv-x{opacity:.7}}

/* stage: the current photo or video, whole (never cropped), as large as the space allows */
.rmv-stage{position:relative;flex:1 1 auto;min-height:0;margin:clamp(14px,2.4vh,28px) 0;display:flex;align-items:center;justify-content:center;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.rmv-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.rmv-item{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:var(--rmv-bg)}
.rmv-frame{position:relative;flex:none}
.rmv-frame .rmv-item{width:100%;height:100%;max-width:none;max-height:none}
.rmv-item.in{animation:rmv-in .28s var(--ease) both}
.rmv-play{position:absolute;left:12px;bottom:12px;min-height:var(--rmv-hit);padding:0 14px;background:var(--rmv-bg);border:1px solid var(--rmv-line);color:var(--rmv-ink);cursor:pointer}
@media (hover:hover){.rmv-play:hover{border-color:var(--rmv-soft)}}
.rmv-play[hidden]{display:none}
.rmv-empty{margin:0;color:var(--rmv-soft);font-size:17px}

/* foot: previous / thumbnails / next on the left, Book now on the right */
.rmv-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px}
.rmv-nav{display:flex;align-items:center;gap:12px;min-width:0}
.rmv-arrow{flex:none;width:var(--rmv-hit);height:var(--rmv-hit);display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--rmv-line);color:var(--rmv-ink);font-family:var(--sans);font-size:20px;line-height:1;cursor:pointer;transition:border-color .15s}
@media (hover:hover){.rmv-arrow:hover{border-color:var(--rmv-soft)}}
.rmv-thumbs{display:flex;gap:8px;margin:0;padding:4px;list-style:none;overflow-x:auto;scrollbar-width:none;min-width:0}
.rmv-thumbs::-webkit-scrollbar{display:none}
.rmv-thumbs li{flex:none}
.rmv-thumb{position:relative;display:block;width:var(--rmv-thumb-w);height:var(--rmv-thumb-h);padding:0;border:0;background:var(--raise);cursor:pointer;opacity:.5;transition:opacity .15s}
.rmv-thumb img{display:block;width:100%;height:100%;object-fit:cover}
@media (hover:hover){.rmv-thumb:hover{opacity:.8}}
.rmv-thumb[aria-current="true"]{opacity:1;outline:1px solid var(--rmv-ink);outline-offset:2px}
.rmv-thumb[aria-current="true"]:focus-visible{outline-width:2px}
.rmv-thumb.is-video::after{content:"";position:absolute;left:50%;top:50%;margin:-7px 0 0 -5px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--rmv-ink);filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}
.rmv .rmv-book{flex:none;min-height:var(--rmv-hit);padding:0 20px;font-size:16px;width:auto}

@media (max-width:640px){
  .rmv{--rmv-thumb-w:40px;--rmv-thumb-h:54px}
  .rmv-line{margin-top:8px}
  .rmv-foot{flex-direction:column;align-items:stretch;gap:14px}
  .rmv-nav{justify-content:space-between}
  .rmv .rmv-book{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .rmv[open],.rmv-item.in{animation:none}
  .rmv-arrow,.rmv-thumb{transition:none}
}
.rmv:focus,.rmv:focus-visible{outline:none}