/* ════════════════════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES — container, section rhythm, grids, sidebar split.
   Every page breathes with these; pages never define their own rhythm.
   Breakpoints: 480 / 768 / 1024 / 1280 (min-width) only.
   ════════════════════════════════════════════════════════════════════════════ */

.ao-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.ao-container--narrow { max-width: var(--container-narrow); }

/* ── Section rhythm ────────────────────────────────────────────────────────── */
.ao-section { padding-block: var(--section-pad); }
.ao-section--sm { padding-block: var(--section-pad-sm); }
.ao-section--lg { padding-block: var(--section-pad-lg); }

/* Surface variants — the only allowed section backgrounds */
.ao-section--soft { background: var(--color-bg-soft); }
.ao-ink {
  background: var(--color-ink);
  color: var(--color-on-ink);
}
.ao-ink h1, .ao-ink h2, .ao-ink h3, .ao-ink h4 { color: var(--color-on-ink); }
.ao-ink p { color: var(--color-on-ink-2); }

/* Hairline separators between adjacent sections */
.ao-section--rule { border-top: 1px solid var(--color-border); }
.ao-ink.ao-section--rule { border-top-color: var(--color-ink-border); }

/* ── Grids (mobile-first, identical logic on every page) ───────────────────── */
.ao-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .ao-grid--2sm { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .ao-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .ao-grid--3, .ao-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ao-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ao-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Main + sidebar split (contact, booking, detail pages) ─────────────────── */
.ao-split {
  display: grid;
  gap: var(--layout-sidebar-gap);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .ao-split { grid-template-columns: minmax(0, 1fr) var(--layout-sidebar-width); }
  /* Form-first split: the aside holds the page's primary action, give it room */
  .ao-split--form { grid-template-columns: minmax(0, 1fr) minmax(420px, 46%); }
  .ao-split__aside--sticky {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
  }
}

/* ── Stack — vertical flow with consistent gaps ────────────────────────────── */
.ao-stack   { display: flex; flex-direction: column; gap: var(--space-4); }
.ao-stack--sm { gap: var(--space-2); }
.ao-stack--lg { gap: var(--space-8); }

/* ── Cluster — inline groups (chips, actions, meta rows) ───────────────────── */
.ao-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.ao-cluster--center { justify-content: center; }
.ao-cluster--between { justify-content: space-between; }

/* ── Alignment / measure utilities ─────────────────────────────────────────── */
.ao-center { text-align: center; }
.ao-center > * { margin-inline: auto; }
.ao-measure { max-width: var(--measure); }

/* ── Media — responsive images never overflow ──────────────────────────────── */
.ao-media { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

/* ── Visually hidden (a11y) ────────────────────────────────────────────────── */
.ao-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}