/* =============================================================
   LAYOUT / SITE
   
   Каркас сайта. Определяет grid-раскладку body и размещает
   ключевые блоки страницы по grid-областям.
   
   Блоки:
   - aside.top-block    → preheader
   - header.site-header → header
   - div.media-container.slider → slider
   - aside.sidebar      → sidebar
   - main.site-main     → main
   - footer.site-footer → footer
   
   До 1023px — одна колонка.
   С 1024px — сайдбар слева, main справа.
   ============================================================= */

/* ---------------------------------------------------------
   BODY — контейнер каркаса
   --------------------------------------------------------- */

body {
    display: grid;
    max-width: 1280px;
    margin-inline: auto;
}

/* Мобильный и планшет — одна колонка */
@media (max-width: 1023px) {
    body {
        grid-template-areas:
            "preheader"
            "header"
            "slider"
            "sidebar"
            "main"
            "footer";
    }
}

/* Десктоп — сайдбар + main в две колонки */
@media (min-width: 1024px) {
    body {
        grid-template-columns: min-content 1fr;
        grid-template-areas:
            "preheader preheader"
            "header    header"
            "slider    slider"
            "sidebar   main"
            "footer    footer";
    }
}

/* =============================================================
   PREHEADER — верхняя полоса (регион, телефон, режим работы)
   ============================================================= */

aside.top-block {
    grid-area: preheader;
    display: flex;
    gap: var(--space-5);
    height: 48px;
    font-size: .9375em;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
}

@media (min-width: 768px) {
    aside.top-block {
        padding: 0;
    }
}

@media (max-width: 767px) {
    aside.top-block {
        padding: 0 var(--space-5);
    }
}

span.region-items {
    color: var(--text-primary);
}

a.phone-number {
    align-self: center;
}

/* Режим работы скрываем на самых узких экранах */
@media (max-width: 540px) {
    span.work-time {
        display: none;
    }
}

/* =============================================================
   HEADER — логотип, меню, корзина
   ============================================================= */

header.site-header {
    grid-area: header;
    display: grid;
    grid-column-gap: var(--space-5);
    margin-bottom: var(--space-5);
}

@media (min-width: 768px) {
    header.site-header {
        grid-template-columns: auto 1fr auto;
        padding: 0;
    }
}

@media (max-width: 767px) {
    header.site-header {
        grid-template-columns: auto 1fr;
        padding: 0 var(--space-5);
    }
}

a.site-logo {
    display: grid;
}

a.site-logo img {
    height: 48px;
}

/* Универсальная обёртка для иконок-контролов справа */
div.control-wrapper {
    display: flex;
    justify-self: right;
    align-items: center;
    gap: var(--space-3);
}

/* ---------------------------------------------------------
   КОРЗИНА В ХЕДЕРЕ
   --------------------------------------------------------- */

a.cart {
    display: flex;
}

a.cart span.cart-total {
    align-self: center;
    white-space: nowrap;
    margin-left: var(--space-2);
}

/* ---------------------------------------------------------
   МЕНЮ — расположение в хедере
   Стили самого меню — в components/menu.css
   --------------------------------------------------------- */

@media (min-width: 768px) {
    nav.menu ul.menu-list {
        margin: 0;
    }

    .menu {
        justify-self: right;
    }
}

@media (max-width: 767px) {
    nav.menu ul.menu-list {
        margin: 0 -20px;
    }

    .menu {
        margin: 0;
    }
}

/* =============================================================
   SLIDER — баннеры на главной
   ============================================================= */

div.media-container.slider {
    grid-area: slider;
    margin-bottom: var(--space-4);
}

/* =============================================================
   SIDEBAR
   ============================================================= */

aside.sidebar {
    grid-area: sidebar;
    display: grid;
    align-self: start;
}

aside.sidebar section {
    background-color: var(--bg-page);
}

@media (min-width: 768px) {
    aside.sidebar section {
        padding: var(--space-5) var(--space-5) var(--space-5) 0;
    }
}

@media (max-width: 767px) {
    aside.sidebar section {
        padding: var(--space-5);
    }
}

/* =============================================================
   MAIN
   ============================================================= */

main.site-main {
    grid-area: main;
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-surface);
    border-radius: var(--radius-3xl);
}

@media (min-width: 768px) {
    main.site-main {
        padding: 30px;
    }
}

@media (max-width: 767px) {
    main.site-main {
        padding: var(--space-5);
    }
}

/* =============================================================
   FOOTER
   ============================================================= */

footer.site-footer {
    grid-area: footer;
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 30px;
    font-size: .9375em;
}

@media (min-width: 768px) {
    footer.site-footer {
        padding: 30px 0 var(--space-5);
    }
}

@media (max-width: 767px) {
    footer.site-footer {
        padding: 30px var(--space-5) var(--space-5);
    }
}