/* ==========================================================================
   relax.css — Hunter Huon Valley · Relax page
   Page-specific styles only. Header, footer, nav, hero shell, inset split,
   review-card, land-quote, buttons, bands and reveal all come from
   base.css + home.css. Every value here references tokens.css — no hex, ever.
   ========================================================================== */

/* --- Active nav state ----------------------------------------------------
   Relax is the current page. A persistent Copper hairline underline marks it
   (Copper as an accent/underline only — never a fill, never body text).
   Identical to the rule contact.css and reviews.css carry. */
.nav__link[aria-current="page"] {
  color: var(--color-text-on-dark);
  border-bottom-color: var(--color-accent);
}
.mobile-menu__list a[aria-current="page"] { color: var(--color-accent); }
.footer-col a[aria-current="page"] { color: var(--color-text-on-dark); }

/* --- 1 · Hero (photo-free, flat) -----------------------------------------
   Rebuilt to match the /reviews/ and /contact/ heroes exactly. It reuses the
   shared .hero shell but drops the photo, the gradient scrim and the
   "Check availability" button: just the signature Forest band with the
   off-white heading and sub sitting straight on it. min-height:0 lets the
   content set the height, which is what gives all three pages the same
   compact proportions. Same declarations as .hero.contact-hero. */
.hero.relax-hero--flat {
  min-height: 0;
  background: var(--c-forest);
}
.hero.relax-hero--flat .hero__content {
  padding-block-end: var(--space-2xl);
}
.relax-hero__sub {
  color: var(--color-text-on-dark-alt);
  max-width: 52ch;
  margin-block-start: var(--space-sm);
}

/* A single soft entrance, mirroring contact.css. Guarded so no-JS /
   reduced-motion users get the final state immediately. */
@media (prefers-reduced-motion: no-preference) {
  .relax-hero--flat .hero__content > * {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    animation: relax-hero-rise var(--dur-reveal) var(--ease-out) forwards;
  }
  .relax-hero--flat .hero__content h1 { animation-delay: 60ms; }
  .relax-hero__sub                    { animation-delay: 180ms; }
}
@keyframes relax-hero-rise {
  to { opacity: 1; transform: none; }
}

/* --- 2 · Centred lead ----------------------------------------------------
   §2's photo treatment, and the only centred band on the page. Eyebrow and
   heading sit at the top, a contained landscape frame sits under them, and
   the copy runs centred below that. Everything else on this page is a
   left-aligned split or row, and every other frame is a portrait, so the
   symmetry and the landscape crop together are what mark §2 as the opening
   statement rather than another content section.

   One column width governs all three blocks, so the heading, the frame and
   the copy share both edges. Earlier revisions capped the heading at 30ch and
   the copy at 56ch, which broke the H2 over three lines and the body over far
   more than it needed — narrower than the picture between them for no reason
   anyone reading it could see.
   Reverse: delete this block and the .slow-lead / .slow-figure markup. */
#slow-down { --slow-col: 820px; }

.slow-lead {
  text-align: center;
  margin-inline: auto;
  max-width: var(--slow-col);
}
.slow-lead h2 { margin-block-start: var(--space-sm); }

/* "Not massively big": the frame is capped well under the 1200px container so
   it stays a picture on the page rather than a band across it. */
.slow-figure {
  margin: var(--space-2xl) auto;
  max-width: var(--slow-col);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.slow-figure picture { display: block; width: 100%; height: 100%; }
.slow-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Overrides .prose's shared 65ch measure, which is narrower than the column
   and would leave the copy misaligned with the frame directly above it. */
#slow-down .prose--center { max-width: var(--slow-col); }

/* base.css line 87 caps every <p> on the site at 65ch. `ch` resolves against
   each element's OWN font-size, so inside this centred column the 18px body
   paragraphs got a 775px box and the 14px note a 602px box — and with the
   default margin-inline:0 all three boxes pinned to the left edge. The text
   centred inside its box, so each block sat on a different axis and none of
   them on the column's. Centre the boxes, and let the body paragraphs use the
   full column width. The note keeps a cap of its own: it is quiet, subordinate
   type, and 820px of 14px text is far too long a line to read. */
#slow-down .prose--center > *          { margin-inline: auto; }
#slow-down .prose--center > p          { max-width: none; }
#slow-down .prose--center .note-quiet  { max-width: 62ch; }

/* --- 5 · Detail row ------------------------------------------------------
   §5's photo treatment, and the deliberate opposite of §2. Three portraits
   run the full container width in a strict, evenly aligned row under the
   copy — no offset, no split — and the crop is 4:5 rather than the 2:3 used
   by §2 and the inset splits, so the two new photo sections read as clearly
   different compositions without either leaving the house style.
   Reverse: delete this block and the detail-row markup. */
.detail-row {
  margin-block-start: var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 600px) {
  .detail-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}

.detail-row__item { margin: 0; }
.detail-row__media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.detail-row__media picture { display: block; width: 100%; height: 100%; }
.detail-row__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Caption: a short Copper rule over small muted type. The rule is a 1.75rem
   stub rather than a full-width border so Copper stays an accent mark and
   never becomes a line ruling the layout. */
.detail-row__item figcaption {
  margin-block-start: var(--space-sm);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text-on-dark-alt);
}
.detail-row__item figcaption::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  margin-block-end: var(--space-xs);
  background-color: var(--color-accent);
}

/* Same stagger as the offset pair, one step per frame. */
@media (prefers-reduced-motion: no-preference) {
  .js .detail-row.reveal .detail-row__item {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    transition: opacity var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out);
  }
  .js .detail-row.reveal.is-visible .detail-row__item { opacity: 1; transform: none; }
  .js .detail-row.reveal.is-visible .detail-row__item:nth-child(2) { transition-delay: 0.10s; }
  .js .detail-row.reveal.is-visible .detail-row__item:nth-child(3) { transition-delay: 0.20s; }
}

/* §2 now sits on a light band, so the quiet note (authored for dark bands in
   home.css, where it resolves to --color-text-on-dark-alt) has to flip to the
   muted Forest secondary or it disappears into the linen. */
.band--light .note-quiet { color: var(--color-text-on-light-2); }

/* --- Flat text band (§5) --------------------------------------------
   .prose centres its block. Every other band on this site is left-aligned off
   the container gutter, so this modifier drops the auto centring and keeps the
   measure cap. Text alignment itself is untouched (still left). */
.prose--flush { margin-inline: 0; }
.prose--flush h2 { margin-block: var(--space-sm) var(--space-md); }

/* --- 3 + 7 · Pull-quotes on the Forest bands -----------------------------
   .land-quote was authored for the homepage's LIGHT band, so its blockquote
   and figcaption resolve to Forest text. On a Forest band that is invisible.
   Flip the two colour roles to their on-dark counterparts; everything else
   about the component (the 2px Copper hairline, the weight, the size, the
   middot separators) is inherited untouched. */
.band--olive .land-quote blockquote { color: var(--color-text-on-dark); }
.band--olive .land-quote figcaption { color: var(--color-text-on-dark-alt); }

/* The marker-pen highlight is scoped to .review-card__text on the homepage and
   .cluster__quote on the reviews page, so a <mark> inside .land-quote would
   fall back to the browser's default yellow. Same declarations as the
   homepage's rule, so the treatment is identical across all three pages. */
.land-quote blockquote mark {
  background-color: var(--color-highlight-bg);
  color: var(--color-highlight-text);
  padding: 0 0.15em;
  border-radius: var(--radius-sm);
}

/* --- 5 · What's already here --------------------------------------------
   Plain-text list: no grid, no icons, no rules between items. Only the line
   rhythm separates them, which is what keeps it reading as prose rather than
   a spec sheet (the homepage's ruled, icon-led amenity list is the deliberate
   contrast to this one). */
.slow-list {
  margin-block: var(--space-lg);
  max-width: var(--measure);
}
.slow-list li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-on-dark-alt);
}

/* --- 6 · In their words --------------------------------------------------
   The .review-card component is reused exactly as the homepage builds it. The
   homepage sets it in a flex marquee; here it sits in a plain three-up grid,
   so the card's flex-basis simply does not apply and each card fills its cell.
   No new component, no new card styling. */
.quotes__head { margin-block-end: var(--space-2xl); }
.quotes__head h2 { margin-block-start: var(--space-sm); }

.quotes__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 640px) {
  .quotes__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .quotes__grid { grid-template-columns: repeat(3, 1fr); }
}

.quotes__cta { margin-block-start: var(--space-xl); }