/* =============================================================================
   patterns.css: page-level compositions reused across areas.
   ========================================================================== */
@layer patterns {

/* Vertical rhythm */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-6); }

/* Horizontal group that wraps */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.cluster--end { justify-content: flex-end; }
.cluster--between { justify-content: space-between; }

/* Main + aside: one column, two at >= 75rem (main 2/3, aside 1/3) */
.split { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 75rem) { .split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }

/* Card grid */
.grid-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }

/* Key/value facts */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.facts dt { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-2); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 35.99rem) { .facts { grid-template-columns: 1fr; gap: 0; } .facts dd { margin-bottom: var(--space-3); } }

/* Form actions row: primary last on desktop, full width on phone */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
@media (max-width: 35.99rem) { .actions > .btn { flex: 1 1 100%; } }

/* Help page / menu page blocks */
.help-block + .help-block { margin-top: var(--space-6); }
.legal-note { font-size: var(--text-sm); color: var(--color-text-muted); max-width: var(--measure); }
.concierge { padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-surface-sunken); }

/* Demo blocks on /menu (component check list) */
.demo-list { display: grid; gap: var(--space-3); }


/* Error pages (views/errors) */
.error-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--space-5) var(--gutter); }
.error-page__card { width: min(34rem, 100%); padding: var(--space-6); }
.error-page__wordmark { margin: 0 0 var(--space-4); font-size: 1.375rem; font-weight: var(--weight-bold); color: var(--color-brand); }
.error-page__logo { display: block; height: 1.5rem; width: auto; aspect-ratio: 10000 / 2446; }
.error-page__title { margin: 0 0 var(--space-3); font-size: var(--text-xl); line-height: var(--leading-tight); }
.error-page__text { margin: 0 0 var(--space-3); font-size: var(--text-md); line-height: var(--leading-tight); }
.error-page__code { margin: var(--space-5) 0 0; font-size: var(--text-xs); }

}