/* ==========================================================================
   Layout — Container, grid, flex utilities, responsive breakpoints
   ========================================================================== */

/* ---- Container ---- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

/* ---- Site Layout (main + sidebar) ---- */
.site-layout {
    display: flex;
    gap: var(--sp-6);
    align-items: flex-start;
}

.site-layout__main {
    flex: 1;
    min-width: 0;
}

.site-layout__sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
}

/* ---- CSS Grid System ---- */
.grid {
    display: grid;
    gap: var(--sp-4);
}

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid--5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.grid--form {
    grid-template-columns: repeat(12, 1fr);
}

/* Form column spans */
.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }
.col-full { grid-column: 1 / -1; }

/* ---- Flex Utilities ---- */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }

/* ---- Responsive Breakpoints ---- */

/* Tablet: <= 1200px */
@media (max-width: 1200px) {
    .grid--5 {
        grid-template-columns: repeat(4, 1fr);
    }

    .site-layout__sidebar {
        width: 260px;
    }
}

/* Small tablet: <= 992px */
@media (max-width: 992px) {
    .grid--4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--5 {
        grid-template-columns: repeat(3, 1fr);
    }

    .site-layout {
        flex-direction: column;
    }

    .site-layout__sidebar {
        width: 100%;
    }
}

/* Mobile landscape: <= 768px */
@media (max-width: 768px) {
    .grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--4,
    .grid--5 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--form {
        grid-template-columns: repeat(2, 1fr);
    }

    .col-4  { grid-column: span 1; }
    .col-6  { grid-column: span 1; }
    .col-8  { grid-column: span 2; }
    .col-12 { grid-column: span 2; }
}

/* Mobile portrait: <= 480px */
@media (max-width: 480px) {
    :root {
        --fs-base: 0.875rem;
        --fs-4xl: 1.75rem;
        --fs-3xl: 1.5rem;
        --fs-2xl: 1.25rem;
    }

    .container {
        padding-inline: var(--sp-3);
    }

    .grid--2,
    .grid--3,
    .grid--4,
    .grid--5 {
        grid-template-columns: 1fr;
    }

    .grid--auto {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .grid--form {
        grid-template-columns: 1fr;
    }

    .col-4,
    .col-6,
    .col-8,
    .col-12 {
        grid-column: span 1;
    }
}