/**
 * Purbodix 2.0 — Responsive Grid System
 * Mobile-first, 8px base grid, 5 breakpoints.
 */

/* ─── Container ───────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-2);  /* 16px mobile */
    padding-right: var(--space-2);
}

@media (min-width: 768px) {
    .container {
        padding-left: var(--space-3);  /* 24px tablet */
        padding-right: var(--space-3);
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: var(--space-4);  /* 32px desktop */
        padding-right: var(--space-4);
    }
}

/* ─── Content Grid (Main + Sidebar) ───────────────────────────────── */
.content-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .content-grid {
        grid-template-columns: 1fr var(--sidebar-width);
        gap: var(--space-4);
    }
}

/* ─── Main 3-Column Layout (News Layout) ──────────────────────────── */
.grid-layout-main {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid-layout-main {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-layout-main {
        grid-template-columns: 2fr 1.5fr 1.5fr;
        gap: var(--space-4);
    }
}

/* ─── 2-Column Layout (Spanning 2 of 3) ───────────────────────────── */
.grid-layout-2col {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid-layout-2col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Article Grid (Card Grid) ────────────────────────────────────── */
.article-grid__items {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .article-grid__items {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
}

@media (min-width: 1024px) {
    .article-grid__items {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Two-column grid (for category pages) */
.article-grid--two .article-grid__items {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .article-grid--two .article-grid__items {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Hero Grid ───────────────────────────────────────────────────── */
.hero__grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .hero__grid {
        grid-template-columns: 60% 1fr;
        gap: var(--space-3);
    }
}

.hero__secondary {
    display: flex;
    flex-direction: column;
}

@media (min-width: 480px) and (max-width: 1023px) {
    .hero__secondary {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }
}

/* ─── Footer Grid ─────────────────────────────────────────────────── */
.footer__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    }
}

/* ─── Flex Utilities ──────────────────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* ─── Spacing Utilities ───────────────────────────────────────────── */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* ─── Visibility ──────────────────────────────────────────────────── */
.hide-mobile {
    display: none;
}
@media (min-width: 1024px) {
    .hide-mobile { display: block; }
    .hide-desktop { display: none; }
}

/* ─── Sidebar (Desktop Only) ──────────────────────────────────────── */
.sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .sidebar {
        display: block;
        position: sticky;
        top: calc(var(--header-height) + var(--space-3));
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ─── Mobile: Adjust body for bottom nav ──────────────────────────── */
@media (max-width: 1023px) {
    body {
        padding-bottom: var(--mobile-nav-height);
    }
}