/**
 * SYNAI Layout System 0.7.0
 * Grid, containers, breakpoints, spacing and vertical rhythm.
 */
:root {
    /* Containers */
    --synai-container-xl: 1320px;
    --synai-container-lg: 1140px;
    --synai-container-md: 960px;
    --synai-container-sm: 720px;
    --synai-container-max: var(--synai-container-xl);
    --synai-page-margin: 60px;
    --synai-grid-columns: 12;
    --synai-grid-gutter: 24px;

    /* Spacing scale */
    --synai-space-1: 4px;
    --synai-space-2: 8px;
    --synai-space-3: 12px;
    --synai-space-4: 16px;
    --synai-space-5: 24px;
    --synai-space-6: 32px;
    --synai-space-7: 40px;
    --synai-space-8: 48px;
    --synai-space-9: 64px;
    --synai-space-10: 80px;
    --synai-space-11: 96px;
    --synai-space-12: 120px;

    /* Semantic spacing */
    --synai-section-space: var(--synai-space-11);
    --synai-section-space-compact: var(--synai-space-9);
    --synai-card-padding: var(--synai-space-5);
    --synai-content-gap: var(--synai-space-6);
    --synai-control-gap: var(--synai-space-3);

    /* Width system */
    --synai-content-narrow: 720px;
    --synai-content-reading: 820px;
    --synai-content-wide: 1080px;

    /* Layering */
    --synai-z-base: 1;
    --synai-z-sticky: 100;
    --synai-z-overlay: 110;
    --synai-z-menu: 120;
    --synai-z-modal: 1000;
    --synai-z-toast: 1100;
}

/* Responsive container */
.container,
.synai-container {
    width: min(calc(100% - (var(--synai-page-margin) * 2)), var(--synai-container-max));
    margin-inline: auto;
}

.synai-container--narrow { max-width: var(--synai-content-narrow); }
.synai-container--reading { max-width: var(--synai-content-reading); }
.synai-container--wide { max-width: var(--synai-content-wide); }
.synai-container--full { width: 100%; max-width: none; }

/* Grid engine */
.synai-grid {
    display: grid;
    grid-template-columns: repeat(var(--synai-grid-columns), minmax(0, 1fr));
    gap: var(--synai-grid-gutter);
}

.synai-grid--no-gap { gap: 0; }
.synai-grid--dense { grid-auto-flow: dense; }
.synai-grid--align-start { align-items: start; }
.synai-grid--align-center { align-items: center; }
.synai-grid--align-end { align-items: end; }

/* Desktop column spans */
.synai-col-1 { grid-column: span 1; }
.synai-col-2 { grid-column: span 2; }
.synai-col-3 { grid-column: span 3; }
.synai-col-4 { grid-column: span 4; }
.synai-col-5 { grid-column: span 5; }
.synai-col-6 { grid-column: span 6; }
.synai-col-7 { grid-column: span 7; }
.synai-col-8 { grid-column: span 8; }
.synai-col-9 { grid-column: span 9; }
.synai-col-10 { grid-column: span 10; }
.synai-col-11 { grid-column: span 11; }
.synai-col-12 { grid-column: span 12; }

.synai-start-1 { grid-column-start: 1; }
.synai-start-2 { grid-column-start: 2; }
.synai-start-3 { grid-column-start: 3; }
.synai-start-4 { grid-column-start: 4; }
.synai-start-5 { grid-column-start: 5; }
.synai-start-6 { grid-column-start: 6; }
.synai-start-7 { grid-column-start: 7; }
.synai-start-8 { grid-column-start: 8; }
.synai-start-9 { grid-column-start: 9; }
.synai-start-10 { grid-column-start: 10; }
.synai-start-11 { grid-column-start: 11; }
.synai-start-12 { grid-column-start: 12; }

/* Common editorial compositions */
.synai-layout-8-4 { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.synai-layout-6-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.synai-layout-4-4-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.synai-layout-3-6-3 { grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) minmax(180px, 1fr); }

/* Vertical rhythm */
.synai-section { padding-block: var(--synai-section-space); }
.synai-section--compact { padding-block: var(--synai-section-space-compact); }
.synai-section--flush { padding-block: 0; }
.synai-stack { display: flex; flex-direction: column; gap: var(--synai-content-gap); }
.synai-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--synai-control-gap); }

/* Gap utilities */
.synai-gap-1 { gap: var(--synai-space-1); }
.synai-gap-2 { gap: var(--synai-space-2); }
.synai-gap-3 { gap: var(--synai-space-3); }
.synai-gap-4 { gap: var(--synai-space-4); }
.synai-gap-5 { gap: var(--synai-space-5); }
.synai-gap-6 { gap: var(--synai-space-6); }
.synai-gap-7 { gap: var(--synai-space-7); }
.synai-gap-8 { gap: var(--synai-space-8); }
.synai-gap-9 { gap: var(--synai-space-9); }
.synai-gap-10 { gap: var(--synai-space-10); }
.synai-gap-11 { gap: var(--synai-space-11); }
.synai-gap-12 { gap: var(--synai-space-12); }

/* Margin and padding utilities: intentionally compact, based on the approved scale. */
.synai-mt-0 { margin-top: 0; }
.synai-mt-4 { margin-top: var(--synai-space-4); }
.synai-mt-5 { margin-top: var(--synai-space-5); }
.synai-mt-6 { margin-top: var(--synai-space-6); }
.synai-mt-8 { margin-top: var(--synai-space-8); }
.synai-mt-9 { margin-top: var(--synai-space-9); }
.synai-mt-11 { margin-top: var(--synai-space-11); }
.synai-mb-0 { margin-bottom: 0; }
.synai-mb-4 { margin-bottom: var(--synai-space-4); }
.synai-mb-5 { margin-bottom: var(--synai-space-5); }
.synai-mb-6 { margin-bottom: var(--synai-space-6); }
.synai-mb-8 { margin-bottom: var(--synai-space-8); }
.synai-mb-9 { margin-bottom: var(--synai-space-9); }
.synai-mb-11 { margin-bottom: var(--synai-space-11); }
.synai-p-4 { padding: var(--synai-space-4); }
.synai-p-5 { padding: var(--synai-space-5); }
.synai-p-6 { padding: var(--synai-space-6); }
.synai-p-8 { padding: var(--synai-space-8); }
.synai-px-5 { padding-inline: var(--synai-space-5); }
.synai-py-5 { padding-block: var(--synai-space-5); }
.synai-py-9 { padding-block: var(--synai-space-9); }
.synai-py-11 { padding-block: var(--synai-space-11); }

/* Home page migrated to layout tokens without changing its content model. */
.home-section { padding-block: var(--synai-section-space); }
.home-section__heading { margin-bottom: var(--synai-space-8); gap: var(--synai-space-5); }
.home-hero__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--synai-grid-gutter); }
.home-hero__content { grid-column: span 7; }
.home-hero__visual { grid-column: span 5; }
.home-units__grid { gap: var(--synai-grid-gutter); }
.home-card-grid { gap: var(--synai-grid-gutter); }

@media (max-width: 1439px) {
    :root {
        --synai-container-max: var(--synai-container-lg);
        --synai-page-margin: 30px;
    }
}

@media (max-width: 1199px) {
    :root {
        --synai-container-max: var(--synai-container-md);
        --synai-page-margin: 24px;
        --synai-grid-columns: 8;
        --synai-grid-gutter: 20px;
        --synai-section-space: var(--synai-space-10);
    }
    .synai-col-md-1 { grid-column: span 1; }
    .synai-col-md-2 { grid-column: span 2; }
    .synai-col-md-3 { grid-column: span 3; }
    .synai-col-md-4 { grid-column: span 4; }
    .synai-col-md-5 { grid-column: span 5; }
    .synai-col-md-6 { grid-column: span 6; }
    .synai-col-md-7 { grid-column: span 7; }
    .synai-col-md-8 { grid-column: span 8; }
    .synai-layout-8-4,
    .synai-layout-3-6-3 { grid-template-columns: 1fr; }
    .home-hero__inner { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .home-hero__content { grid-column: span 5; }
    .home-hero__visual { grid-column: span 3; }
}

@media (max-width: 767px) {
    :root {
        --synai-container-max: none;
        --synai-page-margin: 16px;
        --synai-grid-columns: 4;
        --synai-grid-gutter: 16px;
        --synai-section-space: var(--synai-space-9);
        --synai-section-space-compact: var(--synai-space-8);
        --synai-card-padding: var(--synai-space-4);
    }
    .synai-col-sm-1 { grid-column: span 1; }
    .synai-col-sm-2 { grid-column: span 2; }
    .synai-col-sm-3 { grid-column: span 3; }
    .synai-col-sm-4 { grid-column: span 4; }
    .synai-layout-6-6,
    .synai-layout-4-4-4 { grid-template-columns: 1fr; }
    .home-hero__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home-hero__content,
    .home-hero__visual { grid-column: 1 / -1; }
    .home-section__heading { margin-bottom: var(--synai-space-6); }
}

@media (max-width: 575px) {
    :root {
        --synai-page-margin: 16px;
        --synai-grid-gutter: 16px;
    }
}