/* =========================================================================
   Kaï Consulting — Design System v2 — LAYOUT
   Container queries + grid asymétriques + utilities flex/grid
   Approach : "every layout" by Heydon Pickering + cube-css principles
   ========================================================================= */

/* =========================================================================
   1. CONTENEURS
   ========================================================================= */

.container {
    width: 100%;
    max-width: var(--max-content);
    margin-inline: auto;
    padding-inline: var(--space-gutter);
}

.container-prose {
    width: 100%;
    max-width: var(--max-prose);
    margin-inline: auto;
    padding-inline: var(--space-gutter);
}

.container-wide {
    width: 100%;
    max-width: var(--max-wide);
    margin-inline: auto;
    padding-inline: var(--space-gutter);
}

.container-full {
    width: 100%;
    padding-inline: var(--space-gutter);
}

/* =========================================================================
   2. SECTIONS — rythme vertical éditorial
   ========================================================================= */

.section {
    padding-block: var(--space-section);
}

.section-lg {
    padding-block: var(--space-section-lg);
}

.section-tight {
    padding-block: var(--sp-9);
}

.section-muted {
    background: var(--surface-muted);
}

.section-inverse {
    background: var(--ink-950);
    color: var(--ink-50);
    --fg: var(--ink-50);
    --fg-muted: var(--ink-300);
    --fg-subtle: var(--ink-400);
    --border: color-mix(in oklch, var(--ink-700) 70%, transparent);
}

/* Eyebrow + titre + intro pattern */
.section-head {
    max-width: 720px;
    margin-bottom: var(--sp-10);
}

.section-head .lead {
    margin-top: var(--sp-4);
}

/* =========================================================================
   3. STACK — espacement vertical entre frères (Every Layout)
   ========================================================================= */

.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.stack > * + * {
    margin-block-start: var(--stack-gap, var(--sp-5));
}

.stack-sm > * + * { --stack-gap: var(--sp-3); }
.stack-md > * + * { --stack-gap: var(--sp-5); }
.stack-lg > * + * { --stack-gap: var(--sp-7); }
.stack-xl > * + * { --stack-gap: var(--sp-10); }

/* =========================================================================
   4. CLUSTER — éléments horizontaux qui wrap (tags, nav, actions)
   ========================================================================= */

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--sp-3));
    align-items: var(--cluster-align, center);
    justify-content: var(--cluster-justify, flex-start);
}

.cluster-sm { --cluster-gap: var(--sp-2); }
.cluster-lg { --cluster-gap: var(--sp-5); }

/* =========================================================================
   5. SWITCHER — bascule auto colonnes ↔ stack selon largeur
   ========================================================================= */

.switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--switcher-gap, var(--sp-6));
}

.switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}

/* =========================================================================
   6. GRID AUTO-FIT — cards responsive sans media query
   ========================================================================= */

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 280px), 1fr));
    gap: var(--grid-gap, var(--sp-6));
}

.grid-2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap, var(--sp-6)); }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap, var(--sp-6)); }
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap, var(--sp-6)); }

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================================
   7. GRID ASYMÉTRIQUE — pattern éditorial 2026 (hero, sections clés)
   2/3 + 1/3 ou 1/3 + 2/3
   ========================================================================= */

.grid-asym-7-5 {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--grid-gap, var(--sp-9));
    align-items: center;
}

.grid-asym-5-7 {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--grid-gap, var(--sp-9));
    align-items: center;
}

.grid-asym-8-4 {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: var(--grid-gap, var(--sp-9));
    align-items: start;
}

@media (max-width: 900px) {
    .grid-asym-7-5,
    .grid-asym-5-7,
    .grid-asym-8-4 {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   8. BENTO GRID — services, features (style Apple/Vercel 2024+)
   ========================================================================= */

.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: var(--sp-4);
}

.bento > * {
    grid-column: span 3;
}

.bento .bento-tall    { grid-column: span 2; grid-row: span 2; }
.bento .bento-wide    { grid-column: span 4; }
.bento .bento-feature { grid-column: span 4; grid-row: span 2; }
.bento .bento-small   { grid-column: span 2; }

@media (max-width: 900px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento > *, .bento .bento-tall, .bento .bento-wide,
    .bento .bento-feature, .bento .bento-small {
        grid-column: span 2;
        grid-row: auto;
    }
}

/* =========================================================================
   9. MAGAZINE LAYOUT — articles (TOC sticky + corps + sidenote)
   ========================================================================= */

.magazine {
    display: grid;
    grid-template-columns: 200px minmax(0, 65ch) minmax(0, 1fr);
    gap: var(--sp-9);
    align-items: start;
}

.magazine > .magazine-toc {
    position: sticky;
    top: var(--sp-11);
    align-self: start;
}

.magazine > .magazine-body {
    min-width: 0;
}

.magazine > .magazine-sidenotes {
    position: sticky;
    top: var(--sp-11);
    align-self: start;
}

@media (max-width: 1100px) {
    .magazine {
        grid-template-columns: 1fr;
    }
    .magazine > .magazine-toc,
    .magazine > .magazine-sidenotes {
        position: static;
    }
}

/* =========================================================================
   10. CENTER — centrage horizontal + vertical (utility)
   ========================================================================= */

.center {
    display: grid;
    place-items: center;
}

/* =========================================================================
   11. FLOW — équivalent stack pour le contenu prose
   ========================================================================= */

.flow > * + * {
    margin-top: var(--flow-space, 1em);
}

/* =========================================================================
   12. ASPECT-RATIO utilities
   ========================================================================= */

.aspect-square    { aspect-ratio: 1; }
.aspect-video     { aspect-ratio: 16 / 9; }
.aspect-portrait  { aspect-ratio: 3 / 4; }
.aspect-card      { aspect-ratio: 4 / 5; }

/* =========================================================================
   13. ALIGNEMENT UTILITIES
   ========================================================================= */

.text-center { text-align: center; }
.text-start  { text-align: start; }
.text-end    { text-align: end; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }