/* css/guest-region.css — the region page template (board S5; S11 at 834;
   S9 governs). One stylesheet for /stay/halifax/, /stay/st-margarets-bay/,
   /stay/south-shore/ and /stay/annapolis-valley/, loaded after main.css and
   guest.css. The pages are built on the shared families (.page-hero, .search,
   .home-area/.home-grid, .disclosure, .reviews-strip, .table, .links-onward,
   .ending); this file holds only the region layout around them. Tokens only.

   Order: answer-first hero (band from 768px) → #search (lifted over the band
   from 768px) → the homes (one .home-area per area group) → Know the area
   (topics, the hotel table inside) → the review strip → Homes at a glance →
   FAQ → Plan the rest of the trip → the ending band.

   The topic rows, the hotel table (.table--compare), the facts table's
   breakable heads and the 834 search row are the families' own (main.css,
   guest.css). */

/* ── hero: kicker + h1 left, lead + "See the N homes" right from 1024 ───── */
.region .page-hero__aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.region .page-hero__lead { font-size: var(--text-base); }
@media (min-width: 768px) {
  .region .page-hero__lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
  /* S11 at 834: the first screen carries the lead, the band and the search */
  .region .page-hero__jump { display: none; }
  .region .search--lift { margin-left: var(--space-md); margin-right: var(--space-md); }
}
@media (min-width: 1024px) {
  .region .page-hero__jump { display: inline-flex; }
  .region .search--lift { margin-left: var(--space-18); margin-right: var(--space-18); }
}

/* ── section heads: h2 + one sub line ─────────────────────────────────── */
.region-head { margin: 0 0 var(--space-md); }
.region-head__title {
  margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 500;
  line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--color-charcoal);
}
.region-head__sub { max-width: 62ch; margin: 0; line-height: var(--leading-normal); color: var(--color-gray-600); }
.region .home-area__title { margin-bottom: var(--space-xs); }
@media (min-width: 900px) {
  /* --row: title left, sub right-aligned on the title's baseline (glance) */
  .region-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-lg); }
  .region-head--row .region-head__title { margin-bottom: 0; }
  .region-head--row .region-head__sub { text-align: right; }
}
@media (min-width: 1024px) {
  /* area group heads: title 5 / sub 7 */
  .region .home-area__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: start; margin-bottom: var(--space-lg); }
  .region .home-area__head .home-area__sub { margin: var(--space-2) 0 0; }
}

/* ── the homes: one section, one .home-area per area group ──────────────── */
.region-homes { padding-top: var(--space-10); }
.region .home-area__head { margin-bottom: var(--space-md); }
.region .home-area__sub { margin-bottom: 0; }
/* groups inside one section: S5 draws them a section step apart on phones */
.region .home-area + .home-area { margin-top: var(--space-10); }
@media (min-width: 768px) {
  .region-homes { padding-top: var(--space-2xl); }
}
@media (min-width: 1024px) {
  .region .home-area + .home-area { margin-top: var(--space-2xl); }
}

/* ── Know the area and the FAQ: head 4 / rows 8 from 1024 ───────────────── */
@media (min-width: 1024px) {
  .region-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-2xl); align-items: start; }
}

/* ── Homes at a glance on phones: S5 sets the rows at --text-sm ────────── */
@media (max-width: 699px) {
  .region .table--facts table { font-size: var(--text-sm); }
}

/* ── the hotel table inside its topic: a step closer to the essay above ─── */
.region .table--compare { margin-top: var(--space-xs); }
.region .table--compare + .table__hint { margin-bottom: var(--space-sm); }

/* ── Plan the rest of the trip: three link lists ────────────────────────── */
.region-plan { display: grid; gap: var(--space-lg); margin-top: var(--space-md); }
.region-plan .kicker { margin-bottom: var(--space-xs); }
.region-plan .links-onward { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .region-plan { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-xl); }
}