/* occasions.css: /occasions/ (P3, redesign 02/11/2026, "Arrival").
   The split stage (graphite panel with the H1 and the card, the cabin photograph right), then: the uses as big-index
   rows on porcelain (each switches the card and scrolls to it), the child seats as large fact tiles on celadon,
   celebrations on graphite beside the cabin photo (no empty half when the signed-in line is hidden), questions. */

/* ---------------------------------------------------------------- what families book us for */
.occ-index .bi-t { max-width: 18ch; }
@media (min-width: 900px) {
  .occ-index .bi-row { min-height: clamp(112px, 6rem + 2vw, 140px); }
}

/* ---------------------------------------------------------------- travelling with children: fact tiles set large */
.occ-kids-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.occ-kids-head { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; margin-bottom: var(--head-gap); }
.occ-kids-lede { max-width: 44ch; font-size: var(--fs-lede); line-height: 1.5; color: var(--text-2); }
@media (min-width: 1024px) {
  .occ-kids-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: last baseline; }
  .occ-kids-head > h2 { grid-column: 1 / span 6; }
  .occ-kids-lede { grid-column: 8 / -1; }
}
.occ-kids .fact-tiles { counter-reset: seat; border-top-color: var(--line-strong); }
.aj-site .occ-kids .pt { counter-increment: seat; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k n" "w n" "v v"; column-gap: 16px; padding-top: clamp(24px, 1rem + 1vw, 36px); padding-bottom: clamp(32px, 1.5rem + 2vw, 56px); }
.occ-kids .pt::before { content: counter(seat, decimal-leading-zero) / ""; grid-area: n; font-size: var(--fs-small); font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.aj-site .occ-kids .pt-k { grid-area: k; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.aj-site .occ-kids .pt-when { grid-area: w; font-size: var(--fs-small); }
.aj-site .occ-kids .pt-v.is-small { grid-area: v; margin-top: clamp(40px, 2rem + 3vw, 104px); font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.75rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; text-wrap: balance; }
.occ-kids-note { margin-top: 20px; font-size: var(--fs-small); color: var(--text-2); }
@media (min-width: 720px) { .occ-kids-note { justify-self: end; } }

/* ---------------------------------------------------------------- celebrations on night, beside the cabin */
.occ-cel-head { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(40px, 2rem + 2vw, 64px); margin-bottom: clamp(56px, 3rem + 3vw, 112px); }
.occ-cel-words { display: grid; align-content: end; gap: clamp(24px, 1.2rem + 1vw, 40px); min-width: 0; }
.aj-site .occ-cel-words .t-h2 { font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem); max-width: 11ch; }
.aj-site .occ-pref { max-width: 30ch; padding: 20px 0 0; border-top: 1px solid var(--line); background: none; border-radius: 0; font-size: var(--fs-statement); font-weight: 400; line-height: 1.25; letter-spacing: -0.02em; color: var(--text); }
.aj-site .occ-pref[hidden] { display: none; }
.occ-cel-photo { aspect-ratio: 3 / 2; min-width: 0; background: var(--pine); }
@media (min-width: 1024px) {
  .occ-cel-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .occ-cel-words { grid-column: 1 / span 5; padding-bottom: 8px; }
  .occ-cel-photo { grid-column: 7 / -1; aspect-ratio: 4 / 3; }
}
/* the drift needs more room than the default 115% frame: 130% tall, so the edges never show */
.occ-cel-photo > img[data-speed] { top: -15%; height: 130%; }

/* ---------------------------------------------------------------- questions: the link keeps its own width */
.aj-site .occ-questions .land-intro { justify-items: start; }

/* ============================== the stage on phones and tablets ============================== */
/* under 1024 the H1 and the lede sit in the middle of the photograph, where the stage's own scrim is clear; over this
   page's bright photograph they lost contrast. A one-colour pine wash that deepens towards the sheet keeps them on pine. */
@media (max-width: 1023px) {
  .aj-site.page-occasions .mh.has-booking .mh-scrim {
    background: linear-gradient(to bottom, var(--scrim-t) 0, color-mix(in srgb, var(--pine) 50%, transparent) 28%, color-mix(in srgb, var(--pine) 70%, transparent) 60%, var(--scrim-b) 82%, var(--pine) 100%);
  }
}