/* Prana Veda · every inner page (rooms, retreats, Sanctuary, About us, Good to know…): what they add to site.css.
   Load after site.css: <link rel="stylesheet" href="/pages.css" />. Same tokens, the one radius (--r), the same reveals.
   The opening (.open: title, one line, a jump row, one photo), chips (.chips / .chip-i, as on the booking page), the
   photo slider (.slider, driven by /slider.js), a photo beside rows (.feature, .rows / .row), a quiet one-row card
   (.book) and the close (.shut). Media rules at the END. Started as the rooms page's own (2026-11-01), shared 2026-11-04. */

.section { padding-block: clamp(48px, 6vw, 80px); } /* this page's bands: ~48–80px (Mimosa, 2026-10-25) */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the opening: one title, one line, a quiet jump row; one photo beside */
.open { padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 80px); }
.open__in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.open__text { display: grid; gap: 18px; justify-items: start; }
.open h1 { font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4rem); }
.open .lede { text-wrap: pretty; }
.open__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.jump a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 0.92rem; text-decoration: none; transition: background 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease); }
.jump a:hover { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* chips: a few facts, each an icon and a word; data-tip shows a little more on hover or focus */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip-i { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: linear-gradient(180deg, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.18)), color-mix(in srgb, var(--paper-2) 70%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge); color: var(--ink); font-size: 0.86rem; line-height: 1.2; } /* glass, as on the jump bar */
.band .chip-i { background: linear-gradient(180deg, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.18)), color-mix(in srgb, var(--paper-2) 70%, var(--sand) 30%); }
.chip-i .mark { width: 15px; height: 15px; color: var(--accent-ink); }
.chip-i[data-tip] { cursor: help; }
.chip-i[data-tip]::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); padding: 6px 10px; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: 0.8rem; white-space: nowrap; pointer-events: none; opacity: 0; translate: 0 4px; transition: opacity 160ms var(--ease), translate 160ms var(--ease); z-index: 3; }
.chip-i[data-tip]:hover::after, .chip-i[data-tip]:focus-visible::after { opacity: 1; translate: 0 0; }

/* the photo slider: a strip moved by translate inside a clipped frame; arrows on hover (always on touch), dots */
.slider { position: relative; overflow: clip; background: var(--paper-2); }
.slides { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.slides img { flex: 0 0 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: 3 / 2; object-fit: cover; -webkit-user-drag: none; }
.slide-btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -19px; padding: 0; border: 0; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--ink); box-shadow: var(--glass-edge), var(--glass-lift); cursor: pointer; opacity: 0; transition: opacity 200ms var(--ease), background var(--t-quick) var(--ease), color var(--t-quick) var(--ease); } /* frosted glass at the photo's edge, never over its middle */
.slide-btn--prev { left: 10px; } .slide-btn--next { right: 10px; }
.slide-btn .mark { width: 18px; height: 18px; }
.slider:hover .slide-btn:not(:disabled), .slide-btn:focus-visible { opacity: 1; }
.slide-btn:hover { background: var(--accent); color: var(--on-accent); }
.slide-btn:disabled { opacity: 0 !important; pointer-events: none; }
.dots { position: absolute; left: 50%; bottom: 10px; z-index: 2; display: flex; gap: 6px; padding: 5px 8px; border-radius: 999px; background: rgb(24 18 8 / 0.18); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25); translate: -50% 0; pointer-events: none; } /* the dots ride in a small glass capsule */
.dots i { width: 6px; height: 6px; border-radius: 999px; background: rgb(255 255 255 / 0.55); box-shadow: 0 0 4px rgb(0 0 0 / 0.25); transition: width 220ms var(--ease), background 220ms var(--ease); }
.dots i.is-on { width: 18px; background: #fff; }

/* Verpflegung & Garten: their food beside six rows that read across; the garden; the cookbook as one quiet row */
.feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.feature + .feature { margin-top: clamp(40px, 6vw, 72px); }
.feature__photo { position: sticky; top: calc(var(--nav-h) + 24px); }
.feature__photo .slider { border-radius: var(--r); }
.feature--garden { align-items: center; }
.feature--garden .feature__photo { position: static; order: 2; }
.feature__text { display: grid; gap: 12px; }
.feature__text h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.feature__text p { color: var(--ink-2); max-width: 46ch; font-size: clamp(1.02rem, 1rem + 0.2vw, 1.12rem); text-wrap: pretty; }
.rows { display: grid; margin: 0; padding: 0; list-style: none; }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.row:first-child { padding-top: 0; }
.row:last-child { border-bottom: 0; padding-bottom: 0; }
.row h3 { font: 500 1.02rem/1.4 var(--text); color: var(--ink); margin-bottom: 4px; }
.row p { color: var(--ink-2); text-wrap: pretty; }
.row__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--paper-2); color: var(--accent-ink); }
.row__icon .mark { width: 19px; height: 19px; }
.book { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; margin-top: clamp(40px, 6vw, 72px); padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.4vw, 28px); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.book h3 { font-size: 1.3rem; margin-bottom: 4px; }
.book p { color: var(--ink-2); max-width: 70ch; text-wrap: pretty; }

/* the close */
.shut__in { display: grid; justify-items: center; gap: 22px; text-align: center; }
.shut .title { max-width: 20ch; }

/* the jump bar (data-jumpbar, /jumpbar.js): the page's places as a glass segmented bar that stays under the header,
   each with its icon; a thumb slides to the one you're in. It takes no room of its own: it sits on the seam between the
   opening and the first section, then holds just under the header. */
.jumpbar { --bar: 48px; position: sticky; top: calc(var(--nav-h) + 10px + var(--bar) / 2); z-index: 40; display: flex; justify-content: center; height: 0; padding-inline: var(--gutter); }
.jumpbar__in { position: relative; display: flex; gap: 2px; height: var(--bar); padding: 4px; translate: 0 -50%; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-lift); }
.jumpbar__in a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; color: var(--ink); font-size: 0.92rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: color var(--t-quick) var(--ease); }
.jumpbar__in a:hover { color: var(--accent-ink); }
.jumpbar__in a[aria-current="true"] { color: var(--accent-ink); }
.jumpbar__in .mark { width: 17px; height: 17px; color: var(--accent-ink); }
.jumpbar__thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--w, 0px); translate: var(--x, 0px) 0; border-radius: 999px; background: linear-gradient(180deg, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.6)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 1px 2px rgb(60 50 20 / 0.12), 0 4px 12px -4px rgb(60 50 20 / 0.25); opacity: 0; transition: translate var(--t-move) var(--ease), width var(--t-move) var(--ease), opacity var(--t-quick) var(--ease); }
.jumpbar.is-on .jumpbar__thumb { opacity: 1; }
.jumpbar.is-still .jumpbar__thumb { transition: none; }
html:has(.jumpbar) { scroll-padding-top: calc(var(--nav-h) + 72px); } /* anchors land below the bar */

/* ═══════════ Media rules ═══════════ */
@media (max-width: 900px) {
  .open__in, .feature { grid-template-columns: minmax(0, 1fr); }
  .feature__photo { position: static; }
  .feature--garden .feature__photo { order: 0; }
}
@media (max-width: 640px) {
  .book { grid-template-columns: auto minmax(0, 1fr); }
  .book .more { grid-column: 2; }
}
@media (hover: none) {
  .slide-btn:not(:disabled) { opacity: 1; }
}
@media (max-width: 520px) {
  .jumpbar { --bar: 44px; padding-inline: 10px; }
  .jumpbar__in a { gap: 6px; padding: 0 11px; font-size: 0.86rem; }
  .jumpbar__in .mark { width: 15px; height: 15px; }
}
@media (prefers-color-scheme: dark) {
  .chip-i, .band .chip-i { background: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02)), color-mix(in srgb, var(--paper-2) 70%, transparent); }
  .jumpbar__thumb { background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.07)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 4px 12px -4px rgb(0 0 0 / 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .jumpbar__thumb { transition: opacity var(--t-quick) var(--ease); } /* it moves at once; only the fade stays */
}

/* the 404 page: one main button, the rest quiet, the other language below */
.nf__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.nf__other { color: var(--ink-2); font-size: 0.95rem; }
.nf__other a { color: var(--accent-ink); }