/* /services/rooms-for-rent: the few things the shared components can't do yet.
   Loaded after /css/service.css on this page only. (The Plate overlap fix that used
   to be item 1 is in service.css now, so it is gone from here.) */

/* 2 · Glance facts: one short line each, like the reference page. The "Included" fact is
   three of What's Included's own item names, one per line (a list, so it reads as one). */
.svc-glance .facts dd { font-variant-numeric: lining-nums; }
.rr-fact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15em; }
/* Sept 23 design pass. The shared label column (minmax(7rem, 0.36fr)) is a few px short of
   "PRIVATE ROOM", so that label broke over two lines at 1024–1440 while "SHARED ROOM" beside
   it held one. From 1181px the four rows share one label column sized to the longest label
   (subgrid, labels never wrap), so every value starts on the same x. Between 961 and 1180
   the two-column Glance leaves the values ~280px, which broke "Furnished Treatment / Space"
   out of its one-item-per-line list, so there the label sits above its value, as on phones. */
/* (from 1181px the shared label column in service.css does this now) */
@media (min-width: 961px) and (max-width: 1180px) {
  .svc-glance .facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--sc-2); }
}

/* 3 · The Space: the two numbered points (live 01 / 02 carry no titles, so the Tiles
   component, which needs one, can't set them). They borrow the tile's drawn rule. */
.rr-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-6); }
.rr-point { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--sc-4); }
.rr-point .tile__k { margin-top: 0.3em; }
.rr-point__x { display: grid; gap: var(--sc-3); color: var(--sc-ink); max-width: 62ch; }
.rr-point__x p { margin: 0; text-wrap: pretty; }
/* each point's first sentence is its claim (the clinic is multidisciplinary; the address
   has free parking), so it leads in the display face and the rest reads as its support */
.rr-point__x .rr-point__lead { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.3; letter-spacing: 0; text-wrap: balance; }
@media (max-width: 720px) { .rr-point { grid-template-columns: 2.25rem minmax(0, 1fr); } }

/* 4 · Pricing: the Menu component can't nest the shared room's tiers (its description
   is a <p>) or keep the live H3 text whole, so the same menu markup is written out here.
   The H3 is the leader row: name · dotted leader · price. */
.rr-rate__h { margin: 0; font-weight: 400; font-size: inherit; line-height: inherit; }
.rr-rate .menu-item__name { max-width: none; }
.rr-from { font-family: var(--sc-font-text); font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--sc-ink-soft); margin-right: 0.35em; vertical-align: 0.3em; }
.rr-rates .menu-item { padding-block: var(--sc-6); gap: var(--sc-4); }
/* each room reads in three parts: name + price, what you get (the day strip, then the
   description), who it suits. The columns close up on their own content: the rooms used
   to share rows (subgrid) so the two "who it suits" lines sat level, but that left a
   190px hole under the private room (reviewer finding); the day strips now line the two
   rooms up at the top instead, where the comparison is. */
.rr-rates .rr-rate { align-content: start; }
.rr-rate__what { display: grid; gap: var(--sc-4); align-content: start; }
.rr-rate__fit { margin: 0; color: var(--sc-ink); max-width: 56ch; text-wrap: pretty; }
.rr-rate__fit::before { content: ""; display: block; width: 2.5rem; height: 1px; margin-bottom: var(--sc-4); background: var(--rule-ink); }
/* "Shared Room · FROM $300/month" at t-xl needs ~500px. Two columns only give that from
   ~1240px up (it overflowed by 24–110px at 862–1100), and a 390 phone never does, so
   the name and price step down there; the row may wrap, never overflow. */
.rr-rate__h { flex-wrap: wrap; row-gap: 0; }
/* and at 1920 the shared menu's 5rem column gap left the shared head 1px short, so the
   price dropped a line: a slightly tighter gap and leader keep it on one line */
.rr-rates .menu-list { column-gap: clamp(2rem, 4vw, 4rem); }
.rr-rate__h .menu-item__lead { min-width: 1rem; }
@media (min-width: 1001px) and (max-width: 1239px) {
  .rr-rate .menu-item__name, .rr-rate .menu-item__price { font-size: calc(var(--sc-t-lg) * 1.15); }
}
@media (min-width: 861px) and (max-width: 1000px), (max-width: 520px) {
  .rr-rate .menu-item__name, .rr-rate .menu-item__price { font-size: var(--sc-t-lg); }
}

/* the tiers: fixed days drawn on a seven-day strip (one narrow bar per day), so 1 / 2 / 3
   reads as a share of the week before the prices do. The private room gets one row in the
   same grammar: an unbroken bar the strip's full length, "Full-time access", its price
   (aria-hidden: it restates the H3). Both rooms then read on one scale, and the private
   column no longer stops short beside the shared room's three rows. */
.rr-tiers { --day-w: 0.5rem; --day-h: 1rem; --day-gap: 3px; list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--sc-hairline); }
.rr-tier { display: flex; align-items: baseline; gap: var(--sc-3); padding-block: var(--sc-3); border-bottom: 1px solid var(--sc-hairline); }
.rr-tier__days { display: inline-flex; gap: var(--day-gap); flex: none; align-self: center; margin-right: var(--sc-2); }
.rr-tier__days i { display: block; width: var(--day-w); height: var(--day-h); border: 1px solid var(--rule-ink); background: transparent; }
.rr-tier__days i.is-on { background: var(--sc-ink); border-color: var(--sc-ink); }
.rr-tier__days--full i { width: calc(7 * var(--day-w) + 6 * var(--day-gap)); background: var(--sc-ink); border-color: var(--sc-ink); transform-origin: left center; }
.rr-tier__k { flex: none; font-size: var(--sc-t-base); color: var(--sc-ink); }
.rr-tier__v { flex: none; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .rr-tier__days i.is-on { background: transparent; transition: background-color 420ms var(--sc-ease-out); transition-delay: calc(260ms + var(--p) * 110ms); }
  .rr-tier.sc-in .rr-tier__days i.is-on { background: var(--sc-ink); }
  .rr-tier__days--full i { transform: scaleX(0); transition: transform 1100ms var(--sc-ease-out) 260ms; }
  .rr-tier.sc-in .rr-tier__days--full i { transform: none; }
}
/* narrow columns (phones, and the two-column menu at 861–1000px): a slimmer strip, and the
   private row drops its restated price (the H3 right above carries it), so no row runs past
   its column */
@media (max-width: 520px), (min-width: 861px) and (max-width: 1000px) {
  .rr-tiers { --day-w: 0.35rem; --day-gap: 2px; --day-h: 0.9rem; }
  .rr-tiers--private .menu-item__lead, .rr-tiers--private .rr-tier__v { display: none; }
}
/* the smallest phones (320): gaps and tier prices tighten so "3 fixed days ·· $650/month"
   fits the 280px column */
@media (max-width: 359px) {
  .rr-tiers { --day-w: 0.3rem; --day-h: 0.8rem; }
  .rr-tier { gap: var(--sc-2); }
  .rr-tier__days { margin-right: 0; }
  .rr-tier .menu-item__lead { min-width: 0.75rem; }
  .rr-tier__v { font-size: var(--sc-t-base); }
}
.rr-note { font-size: var(--sc-t-base); color: var(--sc-ink); max-width: 64ch; margin-top: var(--sc-6); }

/* 5 · What's included: the checklist set as a ruled inventory — the item in the display
   face, its one line under it — because each item is a named thing with a gloss. */
.rr-inc .checklist__list { gap: 0; border-top: 1px solid var(--sc-hairline-strong); }
.rr-inc .checklist__list li { display: grid; gap: var(--sc-2); padding: var(--sc-5) 0 var(--sc-5) 1.9em; border-bottom: 1px solid var(--sc-hairline); }
.rr-inc .checklist__list li::before { top: calc(var(--sc-5) + 0.85em); width: 0.8em; }
.rr-inc__t { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-lg); line-height: 1.25; letter-spacing: 0; margin: 0; }
.rr-inc__x { margin: 0; color: var(--sc-ink-soft); max-width: 52ch; text-wrap: pretty; }

/* 6 · Who: four keyed columns are ~255px at 1440, so the titles step down a size to keep
   "Acupuncturists" on one line; the approval rule reads as its display line + reason. */
.rr-who .tile__t { font-size: var(--sc-t-lg); line-height: 1.24; }
.rr-who .tile__x { color: var(--sc-ink); }
.rr-approval { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sc-4) clamp(2rem, 6vw, 7rem); align-items: end; margin-top: var(--sc-9); padding-top: var(--sc-6); border-top: 1px solid var(--rule-ink); }
.rr-approval .payoff { margin-top: 0; }
.rr-approval .prose p { color: var(--sc-ink); }
@media (max-width: 860px) { .rr-approval { grid-template-columns: minmax(0, 1fr); margin-top: var(--sc-8); } }

/* 7 · Why: four reasons as a ruled ledger (number · claim · support), not Tiles, because
   the chapter before it is Tiles and the template never repeats a device back to back. */
.rr-why { list-style: none; margin: 0; padding: 0; display: grid; }
.rr-why__row { grid-template-columns: 3.5rem minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sc-3) 0; padding-block: var(--sc-6); }
.rr-why__row > .rr-why__x { padding-left: clamp(1.5rem, 4vw, 4.5rem); }
/* the ledger closes on the same rule it opens and divides on (the tile's drawn --rule-ink
   line), not a fainter hairline (Sept 23 design pass) */
.rr-why__row:last-child { border-bottom: 1px solid var(--rule-ink); }
.rr-why__row .tile__k { margin-top: 0.55em; }
.rr-why__t { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.2; letter-spacing: 0; margin: 0; text-wrap: balance; }
.rr-why__x { margin: 0.35em 0 0; color: var(--sc-ink); max-width: 58ch; text-wrap: pretty; }
/* 861–1240: at 0.8fr the claim column is ~300–350px and the claims ran three to five lines
   at t-xl beside a four-line support; even halves keep each claim to two lines */
@media (min-width: 861px) and (max-width: 1240px) {
  .rr-why__row { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr); }
  .rr-why__row > .rr-why__x { padding-left: clamp(1.5rem, 3vw, 2.5rem); }
}
@media (max-width: 860px) {
  .rr-why__row { grid-template-columns: 2.25rem minmax(0, 1fr); padding-block: var(--sc-5); }
  .rr-why__x { grid-column: 2; margin-top: 0; }
  .rr-why__row > .rr-why__x { padding-left: 0; }
}

/* 8 · The lounge plate on phones: at the desktop height (70vh) a 390px-wide crop is
   mostly floor, so it is shorter there and slides left to keep the BWell wall logo. */
@media (max-width: 860px) {
  #why .plate { --h: 46svh !important; --pos: 14% 46% !important; }
}

/* 9 · Chapter bar on phones: the shared bar swaps its label for a hard-coded "Book"
   under 520px, but this page books nothing (every CTA is the phone), and the swap
   also leaves the link with no accessible name (full label display:none, short one
   aria-hidden). "Inquire" is as short as "Book", so the full label stays. */
@media (max-width: 520px) {
  .chbar__book .chbar__book-full { display: inline; }
  .chbar__book .chbar__book-short { display: none; }
}

/* 10 · Hero breadcrumb: photo 29 is near-white where the crumb sits (the window blind
   behind it), above where the shared scrim fades out, so the cream crumb washed out.
   On desktop the scrim climbs a little higher, and the crumb gets a soft shadow like
   the intro's (same fix as massage-therapy.css). */
@media (min-width: 861px) {
  .svc-hero__scrim { background:
    linear-gradient(to top, rgb(var(--dusk) / 0.92) 0%, rgb(var(--dusk) / 0.82) 24%, rgb(var(--dusk) / 0.62) 46%, rgb(var(--dusk) / 0.42) 66%, rgb(var(--dusk) / 0.2) 82%, rgb(var(--dusk) / 0) 95%),
    linear-gradient(to bottom, rgb(var(--dusk) / 0.5) 0%, rgb(var(--dusk) / 0) 22%); }
}
.svc-hero__crumb { text-shadow: 0 1px 10px rgb(0 0 0 / 0.55), 0 0 2px rgb(0 0 0 / 0.35); }
.svc-hero__crumb a { opacity: 0.9; }

/* 11 · Hero on phones: a 3:2 photo cover-fitted to a 390×844 screen is exactly screen-tall,
   so the only subject (the desk and green chair, 55–65% down) sat behind the H1 under the
   darkest scrim, and the top half was bare ceiling. The photo takes the top 58% instead
   and fades into the hero's dark ground, so the room fills the empty half and the type sits
   on the plain scrim below it. */
@media (max-width: 860px) {
  .svc-hero__photo img { height: 58%; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
}

/* 12 · Hero breadcrumb on phones: "For Practitioners" links to this same page, and with it
   the crumb wrapped with a dangling slash. Under 520px it shows Home / Rooms for Rent
   (the BreadcrumbList JSON-LD keeps all three levels). */
@media (max-width: 520px) {
  .svc-hero__crumb a:nth-of-type(2), .svc-hero__crumb span[aria-hidden]:nth-of-type(2) { display: none; }
}

/* 13 · Why title on phones: at the shared xl size "Choose BWell Lounge" is ~9.6em, wider than
   a phone column, so the H2 broke "Why Practitioners / Choose / BWell Lounge" with one word
   in the middle. Under 520px it steps down just enough for "Choose BWell Lounge" to hold one
   line (about 9% at 390; about 25% at 320, where a 2.05rem floor still left "Choose" alone),
   never below 1.75rem. */
@media (max-width: 520px) {
  #why .ch-head h2 { font-size: max(1.75rem, min(clamp(2.4rem, 1.4rem + 4.4vw, 5.1rem), calc((100vw - 2.5rem) / 9.7))); }
}

/* Very tall viewports (bwell.css, last block): the phone plate's 46svh would scale with them. */
@media (min-height: 2000px) and (max-aspect-ratio: 1/1) and (max-width: 860px) { #why .plate { --h: 24rem !important; } }