/* Gruppenvermietung / Group rental: only what this page adds to ../site.css, ../pages.css and ../retreat.css (the English
   page loads this same file). The yoga room's equipment and the rooms as quiet lists with hairlines (a number or a
   name, then the detail), the extras as a small price list. Media rules at the END. */

/* the yoga room: one photo beside the text */
.yoga { align-items: center; }
.yoga__photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); }
.yoga .feature__text p:not(.eyebrow) { max-width: 52ch; }
.gear__label { margin-top: 10px; }
.gear, .rlist, .extras { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.gear li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.gear b { font-weight: 500; color: var(--accent-ink); font-variant-numeric: tabular-nums; }

/* the rooms, by house */
.houses { display: grid; gap: clamp(24px, 3vw, 36px); }
.house h3 { margin-bottom: 10px; font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem); }
.house h3 span { font: 400 0.95rem/1.4 var(--text); color: var(--ink-2); }
.rlist li { display: grid; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rlist b { font-weight: 500; }
.rlist span { color: var(--ink-2); font-size: 0.95rem; }
.book > div { display: grid; gap: 8px; }

/* included, and the extras with their prices */
.incl .rows .row:first-child { padding-top: 14px; border-top: 1px solid var(--line); }
.extras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.extras li > span:first-child { display: grid; gap: 3px; }
.extras b { font-weight: 500; }
.extras small { font-size: 0.9rem; color: var(--ink-2); text-wrap: pretty; }
.extras__price { font-weight: 500; font-size: 1.1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the close: WhatsApp's mark in the ghost button */
.close .btn .mark { width: 18px; height: 18px; }