/*
 * Dark Atlas - Layout
 * Page-level layout grids and responsive breakpoints.
 * Depends on: tokens.css, base.css, components.css
 */

/* =========================================================
   PAGE SHELL
   ========================================================= */

.od-main {
    min-height: calc(100vh - 52px - 48px); /* viewport minus nav + footer */
}

/* Standard container */
.od-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-page-x);
}

/* =========================================================
   ARTICLE + SIDEBAR GRID  (single.php, archive.php)
   Desktop: 720px content + 300px sidebar, 48px gap
   ========================================================= */

.od-content-grid {
    display: grid;
    grid-template-columns: var(--width-article-max) var(--width-sidebar);
    gap: var(--spacing-col-gap);
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
}

.od-content-main {
    min-width: 0;
}

.od-content-sidebar {
    min-width: 0;
}

/* =========================================================
   HOMEPAGE GRID
   28 category tiles in a responsive grid
   ========================================================= */

.homepage-category-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border-default); /* grid lines via bg on gap */
    border: 1px solid var(--border-default);
    margin: var(--spacing-section) 0;
}

.homepage-category-grid .cat-tile {
    border: none; /* borders handled by grid gap */
}

/* =========================================================
   INDEX / BROWSE PAGE GRID
   Sidebar (28 categories) + main content
   ========================================================= */

.od-browse-grid {
    display: grid;
    grid-template-columns: var(--width-sidebar) 1fr;
    gap: var(--spacing-col-gap);
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
}

/* =========================================================
   TOPIC ARCHIVE LAYOUT  (taxonomy-od_topic.php)
   Sidebar (260px) + single-column article list
   ========================================================= */

.topic-body {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
}

.topic-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--spacing-col-gap);
}

.topic-sidebar,
.topic-main {
    min-width: 0;
}

/* =========================================================
   SEARCH RESULTS LAYOUT
   ========================================================= */

.search-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--spacing-col-gap);
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
}

.search-header {
    padding: var(--spacing-section) 0 24px;
}

/* =========================================================
   SECTION SPACING
   ========================================================= */

.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 20px;
}

.section-title {
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.section-link {
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-decoration: none;
}

.section-link:hover {
    color: var(--text-primary);
}

/* =========================================================
   RESPONSIVE - MOBILE  (≤ 768px)
   ========================================================= */

@media (max-width: 768px) {

    /* Hide desktop nav, show mobile nav */
    .top-nav {
        display: none;
    }

    .mobile-top-nav {
        display: flex;
    }

    /* Hide desktop footer, show mobile footer */
    .site-footer {
        display: none;
    }

    .mobile-footer {
        display: flex;
    }

    /* Container: 16px side padding on mobile */
    .od-container {
        padding: 0 16px;
    }

    /* Stack content + sidebar vertically */
    .od-content-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Sidebar moves below content on mobile */
    .od-content-sidebar {
        order: 2;
    }

    /* Category grid: 2 columns on mobile */
    .homepage-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Browse grid: single column */
    .od-browse-grid {
        grid-template-columns: 1fr;
    }

    /* Search grid: single column */
    .search-grid {
        grid-template-columns: 1fr;
    }

    /* Topic grid: single column */
    .topic-grid {
        grid-template-columns: 1fr;
    }

    /* Nav search: full width */
    .nav-search {
        width: 100%;
    }

    /* Sort bar: wrap */
    .sort-bar {
        flex-wrap: wrap;
    }
}

/* =========================================================
   RESPONSIVE - TABLET  (769px – 1100px)
   ========================================================= */

@media (min-width: 769px) and (max-width: 1100px) {
    .od-container {
        padding: 0 32px;
    }

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

    .od-content-grid {
        grid-template-columns: 1fr 260px;
    }

    .od-browse-grid {
        grid-template-columns: 240px 1fr;
    }
}