/* css/guest-guides.css — the travel-guides hub and the guest blocks inside
   the travel guides (guest-track design return 2026-09, boards S7 and S11;
   S9 governs). Loaded after guest.css on /stay/guides/ and on the twelve
   travel guides that carry guest blocks. Tokens and the families in
   css/main.css / css/guest.css only; this file places them.

   The guides still load the legacy stack (components, layout, cards,
   content, stay, article-refresh) after main.css, so the article body keeps
   its styling at token level (Q-03). That stack no longer reaches the
   families or the guide hero here (the legacy guard, main.css section 8).

   Contents
     1. hub: hero + jump row, guide groups, featured homes
     2. guide: hero (back link, mono meta), labelled rail/grid blocks
     3. guide: inline ending (--inline, outline button), related, closing band */

/* ── 1. Hub ───────────────────────────────────────────────────────────── */

/* hero: one column at every width (the lead sits under the title) */
.page-hero--guides { padding-bottom: 0; }
.page-hero--guides .page-hero__inner { grid-template-columns: minmax(0, 1fr); }
.page-hero--guides .page-hero__lead { max-width: 52ch; }
.guides-jump { margin-top: var(--space-md); }
.guides-jump .chip { font-size: var(--text-sm); }
.guides-jump .chip span { color: var(--color-primary-dark); }

/* a group: heading, then its guide cards (1 column; 2 from 700px);
   from 1024 the heading sits in its own column beside the cards */
.guides-group { padding-top: var(--space-2xl); scroll-margin-top: var(--space-20); }
.guides-group__title {
  margin: 0 0 var(--space-md); 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);
}
.guides-group__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 700px) {
  .guides-group__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .guides-group { padding-top: 0; }
  .guides-group__inner {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-2xl); align-items: start;
    padding: var(--space-2xl) 0; border-top: 1px solid var(--color-border);
  }
  .guides-group__title { margin: 0; }
  .guides-featured + .guides-group .guides-group__inner { border-top: 0; }
}
/* the last group before the ending keeps the section rhythm */
.guides-group:last-of-type { padding-bottom: var(--space-2xl); }
@media (min-width: 1024px) {
  .guides-group:last-of-type { padding-bottom: var(--space-xl); }
}

/* a guide card: one link, title + one line, arrow at the right */
.card--guide { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-md) var(--space-5); }
.card--guide .card__text { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.card--guide .card__name,
.card--guide .card__meta { display: block; }
.card--guide .card__arrow { flex: none; font-size: var(--text-xl); line-height: 1; color: var(--color-primary-dark); }

/* featured homes: a white band under the Halifax group; phone rail, 3-up grid */
.guides-featured { margin-top: var(--space-2xl); }
.guides-featured .kicker { margin-bottom: var(--space-xs); }
.guides-featured > .container > .guides-featured__title {
  margin: 0 0 var(--space-md); 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);
}
@media (min-width: 768px) {
  .guides-featured { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
  /* three homes: 3-up from 768 (no 2 + 1 orphan on tablets) */
  .guides-featured .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .guides-featured { margin-top: 0; }
}

/* ── 2. Guide: hero ───────────────────────────────────────────────────── */

/* left-aligned in the article column; the back link is a text link, the
   meta a mono line (icons off) */
.article-hero { padding: var(--space-xl) 0 var(--space-md); }
/* the hero sits on the article column (layout.css .container--narrow) */
.article-hero > .container { max-width: var(--max-width-narrow); padding-inline: var(--space-lg); }
.article-hero .article-hero__title { margin: 0 0 var(--space-sm); font-size: var(--text-display-lg); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.guide-back {
  display: inline-flex; align-items: center; min-height: var(--touch-target-min);
  font-size: var(--text-sm); font-weight: 700; color: var(--color-primary-dark);
  text-decoration: underline; text-underline-offset: 3px;
}
.guide-back:hover { color: var(--color-text); }
.guide-back:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.article-meta {
  justify-content: flex-start; gap: var(--space-xs) var(--space-md); padding: 0; border: 0; margin-bottom: 0;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-gray-600);
}
.article-meta svg { display: none; }
.article-meta .article-meta__category { padding: 0; background: none; border-radius: 0; font-size: inherit; font-weight: 400; letter-spacing: inherit; color: inherit; }
.article-hero .article-hero__image { margin-top: var(--space-lg); }
/* the wedding and remote-work hero photos are portrait sources: one 16:9 band */
.article-hero .article-hero__image img { aspect-ratio: 16 / 9; object-fit: cover; }
/* wedding and remote-work guides: the meta row sits under the hero image */
.article-hero + .container--narrow > .article-meta { padding-top: var(--space-md); }
.article-hero + article.section,
.article-hero + .container--narrow + .section { padding-top: var(--space-lg); }

/* ── 2. Guide: labelled rail and grid ─────────────────────────────────── */

.guide-homes { margin: var(--space-xl) 0; }
.guide-homes__head { margin: 0 0 var(--space-md); }
.guide-homes__head .kicker { margin-bottom: var(--space-xs); }
.guide-homes__head .guide-homes__title {
  margin: 0;
  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);
}
.guide-homes .rail,
.guide-homes .home-grid { margin-bottom: 0; }

/* the rail near the top: bleeds to the screen edge on phones (the article
   column's gutter, layout.css .container--narrow: --space-lg at every
   phone width), then 3 compact cards across the column from 768 (name,
   sleeps · bedrooms, go line; the place stays in the alt text). The grid's
   phone rail (guest.css bleeds it by the 20px .container gutter) takes the
   same gutter here. */
@media (max-width: 767px) {
  .guide-homes .rail {
    margin-left: calc(var(--space-lg) * -1); margin-right: calc(var(--space-lg) * -1);
    padding-left: var(--space-lg); padding-right: var(--space-lg); scroll-padding-inline: var(--space-lg);
  }
}
@media (max-width: 699px) {
  .guide-homes .home-grid--phone-rail {
    margin-left: calc(var(--space-lg) * -1); margin-right: calc(var(--space-lg) * -1);
    padding-left: var(--space-lg); padding-right: var(--space-lg); scroll-padding-inline: var(--space-lg);
  }
}
@media (min-width: 768px) {
  .guide-homes .rail { gap: var(--space-3); padding-left: 0; padding-right: 0; scroll-padding-inline: 0; }
  .guide-homes .rail > .card { flex-basis: calc((100% - var(--space-3) * 2) / 3); }
  .guide-homes .rail .card__body { padding: var(--space-3) var(--space-3) 0; }
  .guide-homes .rail .card__name { font-size: var(--text-lg); }
  .guide-homes .rail .card__place { display: none; }
  .guide-homes .rail .card__facts { font-size: var(--text-sm); font-weight: 400; color: var(--color-gray-600); }
  .guide-homes .rail .card__go { font-size: var(--text-sm); }
}

/* one home (the wine guide): one card across the column */
@media (min-width: 700px) {
  .guide-homes--grid:not(.guide-homes--wide) .home-grid { grid-template-columns: minmax(0, 1fr); }
}
/* the one grid breaks out to the page container from 1024 (S7: the one
   place a guide leaves its column) */
@media (min-width: 1024px) {
  .guide-homes--wide { margin-left: calc(50% - min(var(--container-xl) / 2 - var(--space-10), 50vw - var(--space-10))); margin-right: calc(50% - min(var(--container-xl) / 2 - var(--space-10), 50vw - var(--space-10))); }
}

/* ── 3. Guide: inline ending, related, closing band ───────────────────── */

/* inline ending (Cape Breton aside, wine / wedding / South Shore / remote
   boxes): .ending--inline with an outline button, so the page's one gold
   stays the closing band. The family carries the whole look. */

/* related articles: .card--link tiles, text only */
.guide-related > .container > .guide-related__title {
  margin: 0 0 var(--space-lg); text-align: left; max-width: none;
  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);
}
.guide-related__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.guide-related .card--link .card__body { gap: var(--space-xs); padding: var(--space-md) var(--space-5); }
.guide-related .card--link .kicker { margin: 0; }
.guide-related .card--link .card__name { font-size: var(--text-xl); }
@media (min-width: 768px) {
  .guide-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
  .guide-related .card--link .card__name { font-size: var(--text-lg); }
}