/* =============================================================
   Unified page column layout for the cars section.
   Loaded on: /cars, /cars/{brand}, /cars/{brand}/{model},
              /cars/{brand}/{model}/{generation}

   Every page uses the same structure and classes:

       <div class="page-layout">
           <aside class="page-sidebar-left">…</aside>
           <div class="page-main">…</div>
           <aside class="page-sidebar-right">…</aside>
       </div>
   ============================================================= */

/* Neutralize the global content container on these pages so the
   column container below is the single source of width & gutters. */
main > .container {
    max-width: none;
    padding: 0;
}

/* Column container (grid: left sidebar / main / right sidebar) */
.page-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 260px;
    gap: 12px;
    align-items: start;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 20px;
    box-sizing: border-box;
}

/* Left column (sidebar) */
.page-sidebar-left {
    position: sticky;
    top: 20px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: auto;
    min-width: 0;
    height: fit-content;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* Center column (main content) */
.page-main {
    min-width: 0;
}

/* Right column (sidebar) */
.page-sidebar-right {
    position: sticky;
    top: 20px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: auto;
    min-width: 0;
    height: fit-content;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* Tablet / mobile: collapse to a single column */
@media (max-width: 992px) {
    .page-layout {
        grid-template-columns: 1fr;
    }

    .page-sidebar-left,
    .page-sidebar-right {
        position: static;
        width: 100%;
        max-height: none;
        overflow: visible;
    }

    /* Right sidebar is supplementary — hide on mobile so it doesn't get in the way */
    .page-sidebar-right {
        display: none;
    }
}

@media (max-width: 768px) {
    .page-layout {
        padding: 10px 0;
    }
}