/* css/guest-occasion.css — the occasion pages (guest-track design return
   2026-09, board S6; S9 governs, Groups is its exemplar):
   /stay/groups/ /stay/weddings/ /stay/retreats/ /stay/pet-friendly/ /stay/monthly/.
   Loaded after main.css and guest.css. The bodies are on the shared families
   (.page-hero, .search, .home-area/.home-grid, .steps, .plan-box, .table--facts,
   .disclosure--faq, .links-onward, .ending); this file holds only the page
   layout the families leave to the page (.occ-*). Tokens only.
   Order: hero, search, homes, the page's own middle, plan block (the gold of
   its screen), homes at a glance, FAQ, more ways to stay, the ending. */

/* ── hero: the second column (lead, pet line, monthly person path) ─────── */
.occ-hero__side { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.occ-hero__line { max-width: 62ch; margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-gray-600); }
.occ-hero__ctas { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); }
@media (min-width: 560px) {
  .occ-hero__ctas { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); }
}

/* ── section heads ─────────────────────────────────────────────────────── */
.occ-h2 {
  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);
}
.occ-head { margin: 0 0 var(--space-md); }
.occ-head .occ-h2 { margin-bottom: var(--space-xs); }
.occ-head .home-area__meta { margin: var(--space-xs) 0 0; }
.occ-head__sub { margin: 0; line-height: var(--leading-normal); color: var(--color-gray-600); }
@media (min-width: 1024px) {
  .occ-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-lg); }
  .occ-head .occ-h2 { margin-bottom: 0; }
  .occ-head .home-area__meta { margin: 0; white-space: nowrap; }
}

/* ── search: under the hero (lifted over the band from 768px) ──────────── */
@media (min-width: 1024px) {
  .occ-search > .search { max-width: calc(var(--container-xl) - var(--space-18) * 2); margin-left: auto; margin-right: auto; }
}
/* monthly: the calendar search is secondary, under its own head */
.occ-cal { padding-top: var(--space-md); }
@media (min-width: 768px) {
  .occ-cal { padding-top: var(--space-2xl); }
}

/* ── homes: meta line (data spans); the aria-live count line shows only
   when it carries a filter and its "Show all" button ─────────────────── */
@media (min-width: 768px) {
  .occ .occ-homes { padding-top: var(--space-2xl); }
}
.occ-count { margin: 0 0 var(--space-md); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-gray-600); }
.occ-count:not(:has(button)) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.occ-note { max-width: 64ch; margin: var(--space-md) 0 0; line-height: var(--leading-normal); color: var(--color-gray-600); }
@media (min-width: 1024px) {
  .occ-note { margin-top: var(--space-lg); }
}

/* ── the page's own middle: prose, then steps (weddings, retreats) or the
   who-stays cards (monthly); 5 / 7 columns from 1024px ────────────────── */
.occ-prose p { max-width: 64ch; margin: 0 0 var(--space-3); line-height: var(--leading-normal); color: var(--color-gray-600); }
.occ-prose p:last-child { margin-bottom: 0; }
.occ-prose a { color: var(--color-primary-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.occ-prose a:hover { color: var(--color-text); }
.occ-mid__aside { min-width: 0; }
.occ-who__h { margin: var(--space-lg) 0 var(--space-3); }
.occ-who { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.occ-who__card { padding: var(--space-md); box-shadow: none; }
.occ-who__title { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: var(--leading-snug); color: var(--color-charcoal); }
.occ-who__card p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-gray-600); }
@media (min-width: 700px) {
  .occ-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .occ-mid--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: start; }
  .occ-mid--split .occ-who__h { margin-top: 0; }
  .occ-who { gap: var(--space-md); }
  .occ-who__card { padding: var(--space-lg); }
  /* the owner step register across, as .svc-steps runs on services */
  .occ-mid--split .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
  .occ-mid--split .steps > li {
    display: flex; flex-direction: column; gap: var(--space-sm);
    padding: var(--space-6) var(--space-5) var(--space-2) 0; border-bottom: 0; border-right: 1px solid var(--color-bg-alt);
  }
  .occ-mid--split .steps > li + li { padding-left: var(--space-5); }
  .occ-mid--split .steps > li:last-child { border-right: 0; }
  .occ-mid--split .steps__n { font-size: var(--text-3xl); }
  .occ-mid--split .steps__text { font-size: var(--text-sm); }
}

/* ── plan block ─────────────────────────────────────────────────────────── */
.occ #plan { scroll-margin-top: var(--space-20); }

/* ── FAQ and more ways to stay: head left, rows right from 1024px ──────── */
@media (min-width: 1024px) {
  .occ-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-2xl); align-items: start; }
  .occ-split > .occ-h2 { margin: 0; }
}