/* ============================================================
   Aube — Layout primitives (containers, grid, sections)
   Replaces Bootstrap grid.
   ============================================================ */

/* Containers ----------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-default);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }
.container--bleed { max-width: 100%; padding-inline: 0; }

/* Section ------------------------------------------------- */
.section {
    padding-block: var(--section-pad-y);
    position: relative;
}
.section--lg { padding-block: var(--section-pad-y-lg); }
.section--tight { padding-block: clamp(2rem, 4vw, 4rem); }
.section--inverse {
    background: var(--color-surface-inverse);
    color: var(--color-text-on-inverse);
}
.section--inverse h1,
.section--inverse h2,
.section--inverse h3,
.section--inverse h4 { color: var(--color-text-on-inverse); }
.section--muted { background: var(--color-surface-muted); }
.section--bordered + .section--bordered { border-top: 1px solid var(--color-border); }

/* Stack — vertical rhythm */
.stack > * + * { margin-block-start: var(--space, var(--space-lg)); }
.stack--xs > * + * { --space: var(--space-xs); }
.stack--sm > * + * { --space: var(--space-sm); }
.stack--md > * + * { --space: var(--space-md); }
.stack--lg > * + * { --space: var(--space-lg); }
.stack--xl > * + * { --space: var(--space-xl); }
.stack--2xl > * + * { --space: var(--space-2xl); }
.stack--3xl > * + * { --space: var(--space-3xl); }

/* Cluster — horizontal flex with wrap */
.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}
.cluster--sm { gap: var(--space-sm); }
.cluster--lg { gap: var(--space-lg); }
.cluster--xl { gap: var(--space-xl); }
.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.cluster--baseline { align-items: baseline; }
.cluster--start { align-items: flex-start; }

/* Grid — auto-fit responsive */
.grid {
    display: grid;
    gap: var(--space-xl);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.grid--6 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.grid--gap-sm { gap: var(--space-md); }
.grid--gap-lg { gap: var(--space-2xl); }

/* Split — 2-column with breakpoint */
.split {
    display: grid;
    gap: var(--space-2xl);
    grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
    .split { grid-template-columns: 1fr 1fr; align-items: center; }
    .split--40-60 { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
    .split--60-40 { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
    .split--reverse > :first-child { order: 2; }
    .split--reverse > :last-child { order: 1; }
}

/* Sidebar layout */
.with-sidebar {
    display: grid;
    gap: var(--space-2xl);
    grid-template-columns: 1fr;
}
@media (min-width: 64rem) {
    .with-sidebar { grid-template-columns: minmax(0, 1fr) 18rem; }
    .with-sidebar--left { grid-template-columns: 18rem minmax(0, 1fr); }
}

/* Center child fully */
.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Aspect-ratio wrappers */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-phone  { aspect-ratio: 9 / 19.5; }
.aspect-tablet { aspect-ratio: 4 / 5.4; }
.aspect-desktop{ aspect-ratio: 16 / 10; }

/* Visibility helpers */
.hide-on-mobile { display: none; }
@media (min-width: 48rem) { .hide-on-mobile { display: revert; } }

.hide-on-desktop { display: revert; }
@media (min-width: 48rem) { .hide-on-desktop { display: none; } }

/* Text alignment */
.text-center { text-align: center; }
.text-start  { text-align: start; }
.text-end    { text-align: end; }

/* Spacing utilities (use sparingly, prefer stack/cluster) */
.mt-xs { margin-block-start: var(--space-xs); }
.mt-sm { margin-block-start: var(--space-sm); }
.mt-md { margin-block-start: var(--space-md); }
.mt-lg { margin-block-start: var(--space-lg); }
.mt-xl { margin-block-start: var(--space-xl); }
.mt-2xl { margin-block-start: var(--space-2xl); }
.mt-3xl { margin-block-start: var(--space-3xl); }
.mb-0 { margin-block-end: 0; }