/* Zimmer & Verpflegung: only what this page adds to ../site.css and ../pages.css: the room cards (a photo slider,
   facts as chips, the book button), like the booking page's (booking.css .room), so a room looks the same here and when
   it's chosen. Media rules at the END.

   The rooms as folders (Ethan, 2026-11-04: "almost like folders coming over in waves over each other instead of just a
   simple scroll"): in each house, every room is a wide card that holds just under the jump bar while the next one slides
   up over it. Each card has a tab with its name, set a step further along, so the rooms underneath still show their tabs
   like a drawer of folders; tap a tab to bring that room back. The cards underneath settle back a touch (page.js sets
   --cover: how many rooms now lie on top). Native scrolling throughout; a card taller than the screen leaves the stack
   (.is-flow). */

.rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.room { display: grid; grid-template-rows: auto 1fr; overflow: clip; border-radius: var(--r); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.room .slider { border-radius: var(--r) var(--r) 0 0; }
.room__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(18px, 2.2vw, 24px); }
.room__name { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.85rem); }
.room__text { color: var(--ink-2); text-wrap: pretty; }
.room__book { margin-top: auto; }
.room__text { margin-bottom: 4px; }
.room__tab { display: none; }

/* the stack */
.rooms[data-stack] {
  --tab-h: 36px;
  --tab-gap: 6px;
  --stick: calc(var(--nav-h) + 10px + var(--bar, 48px) + 12px + var(--tab-h)); /* under the header, the bar, then the tab */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 56px);
  padding-top: var(--tab-h);
}
.rooms[data-stack] .room {
  --cover: 0;
  position: sticky;
  top: var(--stick);
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-rows: none;
  overflow: visible;
  border-start-start-radius: 0;
  transform-origin: 50% 0;
  scale: calc(1 - min(var(--cover), 3) * 0.03); /* each room on top sets this one back a little further */
  box-shadow: 0 0 0 1px var(--line), 0 -14px 34px -22px rgb(60 50 20 / 0.45);
}
.rooms[data-stack] .room::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgb(40 30 12); opacity: calc(min(var(--cover), 1) * 0.22); pointer-events: none; z-index: 3; }
.rooms[data-stack] .room .slider { border-radius: 0 0 0 var(--r); }
.rooms[data-stack] .room:not(:first-child) .slider { border-start-start-radius: var(--r); }
.rooms[data-stack] .room__body { padding: clamp(22px, 2.6vw, 34px); overflow: clip; } /* the card no longer clips (its tab sits outside), so the chips' tips stay inside here */
.rooms[data-stack] .room__tab {
  --tab-w: min(10.5rem, (100% - (var(--n, 4) - 1) * var(--tab-gap)) / var(--n, 4));
  position: absolute; bottom: 100%; left: calc(var(--i, 0) * (var(--tab-w) + var(--tab-gap)));
  display: flex; align-items: center; width: var(--tab-w); height: var(--tab-h); padding: 0 14px;
  border-radius: var(--r) var(--r) 0 0; background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line); clip-path: inset(-2px -2px 0 -2px); /* the ring on three sides: it opens into the card */
  font: 500 0.88rem/1 var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
  transition: color var(--t-quick) var(--ease);
}
.rooms[data-stack] .room__tab:hover { color: var(--accent-ink); }
.rooms[data-stack] .room:not(:first-child) { border-start-start-radius: var(--r); }
.rooms[data-stack] .room:first-child .room__tab { border-start-start-radius: var(--r); }
.band .rooms[data-stack] .room__tab { background: var(--surface); }

/* a card taller than the space under the bar: the rooms simply follow each other */
.rooms[data-stack].is-flow .room { position: relative; top: auto; scale: none; }
.rooms[data-stack].is-flow .room::after { opacity: 0; }

/* ═══════════ Media rules ═══════════ */
@media (max-width: 900px) {
  .rooms[data-stack] .room { grid-template-columns: minmax(0, 1fr); }
  .rooms[data-stack] .room .slider { border-radius: 0; }
  .rooms[data-stack] .room:not(:first-child) .slider { border-start-start-radius: var(--r); }
}
@media (max-width: 760px) {
  .rooms { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .rooms[data-stack] { --tab-h: 32px; --tab-gap: 4px; --bar: 44px; }
  .rooms[data-stack] .room__tab { padding: 0 10px; font-size: 0.8rem; }
  .rooms[data-stack] .room__body { padding: 18px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rooms[data-stack] .room { scale: none; } /* the folders still stack; nothing shrinks or dims */
  .rooms[data-stack] .room::after { opacity: 0; }
}