/* ==========================================================================
   reviews.css - Hunter Huon Valley · Reviews page (/reviews/)
   Page-specific styles only. Header, footer, nav, hero shell, split, stars,
   review highlight (<mark>), closing band, buttons, bands and reveal all come
   from base.css + home.css. Every value here references tokens.css - no hex.
   ========================================================================== */

/* --- Active nav state (matches contact.css) ------------------------------
   Reviews is the current page. Copper hairline underline in the primary nav
   (Copper as accent/underline only), Copper text in the mobile menu, and a
   solid off-white in the footer column. */
.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 · Compact hero ----------------------------------------------------
   Reuses the homepage .hero shell (media / scrim / content from home.css) but
   trimmed to a subpage height so it never competes with the 90svh opener. The
   sub-line wraps freely (unlike the homepage's nowrap sub), so it uses its own
   class rather than .hero__sub. */
.hero.reviews-hero {
  min-height: 420px;
  min-height: max(420px, 60vh);
}
/* Flat variant: no photo/scrim, just the signature Forest band with the
   off-white hero copy sitting straight on it (Rev 4, was Olive). */
.hero.reviews-hero--flat {
  min-height: 0;
  background: var(--c-forest);
}
.hero.reviews-hero--flat .hero__content {
  padding-block-end: var(--space-2xl);
}
.reviews-hero__sub {
  color: var(--color-text-on-dark-alt);
  max-width: 52ch;
  margin-block-start: var(--space-sm);
}

/* --- 2 · Aggregate band --------------------------------------------------
   Thin Forest band, centred (one of two centred blocks on the page; the other
   is the shared closing CTA). Three figures with large numerals over small,
   tracked-out labels, then a single quiet note line. */
.aggregate { padding-block: var(--space-2xl); }
.aggregate__inner { text-align: center; }
.aggregate__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg) clamp(2rem, 8vw, 5rem);
}
.aggregate__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}
.aggregate__num {
  font-size: var(--fs-stat);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: var(--ls-h2);
  color: var(--color-text-on-dark);
  font-variant-numeric: tabular-nums;
}
.aggregate__label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-on-dark-alt);
}
.aggregate__note {
  margin-block-start: var(--space-xl);
  margin-inline: auto;
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-alt);
}

/* --- 3 + 4 · Intro lead and featured quotes ------------------------------
   §3 (intro copy) and F1 share one Olive section so no two adjacent bands
   repeat: Forest → Olive(intro+F1) → split(F2) → Olive(F3) → split(F4). The
   intro sits above the first big quote, separated by a full-bleed hairline. */
.rev-lead__intro { max-width: var(--measure); }
.rev-lead__intro h2 { margin-block-end: var(--space-md); }
.rev-lead__intro p + p { margin-block-start: var(--space-md); }

.rev-rule {
  height: var(--divider-w);
  margin-block: var(--space-2xl);
  background-color: color-mix(in srgb, var(--c-oak) 15%, transparent);
}

/* A featured quote: set at h2 scale, weight 300, left-aligned. Used on the
   Olive bands and inside the photo-splits alike. */
.rev-feature { margin: 0; }
.rev-feature__quote {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-light);
  max-width: 22ch;
}
.split__body .rev-feature__quote { max-width: none; }

/* Featured quote with an INSET photo: the whole section is one Olive band and
   the image sits contained inside the container with rounded corners, so the
   Olive wraps around it (echoing the homepage "Take a deep breath" block)
   rather than the photo bleeding to the section edge. Image left, quote right,
   or the other way round on the --reverse variant. */
.feature-split__grid {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  /* Roughly equal columns so the tall portrait reads large next to the short
     quote; the section height follows the photo. */
  .feature-split__grid { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
  /* Reverse variant: quote left, photo right, so consecutive splits alternate
     down the page. Placed by grid column rather than DOM order, so the markup
     keeps media-then-quote and the single-column mobile stack is unaffected. */
  .feature-split--reverse .feature-split__media { grid-column: 2; grid-row: 1; }
  .feature-split--reverse .feature-split__body  { grid-column: 1; grid-row: 1; }
}
.feature-split__media {
  border-radius: var(--radius);
  overflow: hidden;
  /* Cap + centre so a tall portrait stays a sensible size (and doesn't run
     full-height on wide phones/tablets); Olive frames it on every side. */
  max-width: 480px;
  margin-inline: auto;
}
.feature-split__media img { display: block; width: 100%; height: auto; }
.feature-split__body { margin: 0; }
.feature-split__body .rev-feature__quote { max-width: none; }
.rev-feature__cite {
  margin-block-start: var(--space-md);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}
/* Marker-pen highlight - Sandstone behind Forest text, matching the homepage
   review cards. Applies to featured and cluster quotes. */
.rev-feature__quote mark,
.cluster__quote mark {
  background-color: var(--color-highlight-bg);
  color: var(--color-highlight-text);
  padding: 0 0.15em;
  border-radius: var(--radius-sm);
}

/* --- 5 · Themed clusters -------------------------------------------------
   Small-caps eyebrow, an h2, one framing line, then five quote blocks in two
   columns (one on mobile). Quotes are not cards - space and a hairline only. */
.cluster__head {
  max-width: 46rem;
  margin-block-end: var(--space-xl);
}
.cluster__head h2 { margin-block: var(--space-sm) var(--space-md); }
.cluster__framing { color: inherit; opacity: 0.92; }

.cluster__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-2xl);
}
@media (min-width: 900px) {
  .cluster__grid { grid-template-columns: 1fr 1fr; }
}
.cluster__item {
  padding-block: var(--space-lg);
  border-top: var(--divider-w) solid color-mix(in srgb, var(--c-oak) 15%, transparent);
}
.cluster__quote {
  margin-block: var(--space-sm) var(--space-md);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  max-width: none;
}
.cluster__cite {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  max-width: none;
}
/* On light cluster bands, the muted meta reads as Olive rather than Sandstone. */
.band--light .cluster__cite,
.band--light-alt .cluster__cite { color: var(--color-text-on-light-2); }

/* --- 6 · The wall --------------------------------------------------------
   45 short quotes on a light band, Forest text, Olive meta. Three columns on
   desktop, two at 900px, one below. Progressive reveal: 15 shown, +15 per
   click. All 45 are in the HTML; the clamp is applied by JS so no-JS shows
   everything. Reveal animates opacity only - never height - so nothing above
   the button shifts. */
.wall__head {
  max-width: 46rem;
  margin-block-end: var(--space-xl);
}
.wall__head h2 { margin-block-end: var(--space-sm); }
.wall__framing { color: var(--color-text-on-light-2); }

.wall__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-2xl);
}
@media (min-width: 900px) {
  .wall__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
  .wall__grid { grid-template-columns: repeat(3, 1fr); }
}
.wall__item {
  padding-block: var(--space-md);
  border-top: var(--divider-w) solid var(--border-on-light);
}
.wall__quote {
  font-size: var(--fs-body);
  line-height: 1.6;
  max-width: none;
}
.wall__cite {
  margin-block-start: var(--space-2xs);
  font-size: var(--fs-small);
  color: var(--color-text-on-light-2);
  max-width: none;
}
/* Focus target when a "show more" batch moves focus to the first new item. */
.wall__item:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

/* Reveal animation for newly shown items (opacity only). Guarded by .js so a
   no-JS page never hides anything. */
.js .wall__item.is-revealing { opacity: 0; }
.js .wall__item.is-revealed {
  opacity: 1;
  transition: opacity var(--dur-reveal) var(--ease-out);
}

.wall__more-wrap {
  margin-block-start: var(--space-xl);
  display: flex;
  justify-content: center;
}
.wall__cabins {
  margin-block-start: var(--space-xl);
  font-size: var(--fs-small);
  color: var(--color-text-on-light-2);
  max-width: none;
}

/* --- 7 · Link-out --------------------------------------------------------
   Text links only, no logos. The Copper underline appears on hover rather than
   sitting persistently, so the three read as quiet type until touched. */
.rev-linkout__body { max-width: var(--measure); }
.rev-linkout__body h2 { margin-block-end: var(--space-md); }
.rev-linkout__links {
  margin-block-start: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  max-width: none;
}
.rev-ext {
  border-bottom-color: transparent;
  font-weight: var(--fw-medium);
}
.rev-ext:hover,
.rev-ext:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* --- Reduced motion ------------------------------------------------------
   Sits last so it wins at equal specificity; no !important (site rule). */
@media (prefers-reduced-motion: reduce) {
  .js .wall__item.is-revealing,
  .js .wall__item.is-revealed {
    opacity: 1;
    transition: none;
  }
}