/*
=========================================================
SAKAVETS FLAT DESIGN V1
Единая система плоской компоновки публичного сайта
=========================================================
*/

/* ------------------------------------------------------
   1. ОБЩАЯ ПУБЛИЧНАЯ ОБЛАСТЬ
   ------------------------------------------------------ */

body > main.container {
    width: min(1500px, calc(100% - 40px));
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;

    /*
    Bootstrap .my-4 оставляем по вертикали,
    но убираем лишние горизонтальные внутренние отступы.
    */
    padding-left: 0;
    padding-right: 0;
}


/* ------------------------------------------------------
   2. FLAT PAGE
   Используем на постепенно переводимых страницах
   ------------------------------------------------------ */

.sak-flat-page {
    width: 100%;
    margin: 0;
    padding: 0 0 64px;
}


/* ------------------------------------------------------
   3. ЗАГОЛОВОК СТРАНИЦЫ
   Это НЕ карточка.
   ------------------------------------------------------ */

.sak-flat-hero {
    width: 100%;
    margin: 0;
    padding: 18px 0 32px;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.sak-flat-hero h1 {
    margin-top: 0;
}


/* ------------------------------------------------------
   4. ОБЫЧНАЯ СЕКЦИЯ
   ------------------------------------------------------ */

.sak-flat-section {
    width: 100%;
    margin: 0;
    padding: 28px 0;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}


/* Разделитель между крупными смысловыми блоками */

.sak-flat-section + .sak-flat-section {
    border-top: 1px solid rgba(255,255,255,.10);
}


/* ------------------------------------------------------
   5. ФОРМЫ / ФИЛЬТРЫ
   Оболочка формы больше не является карточкой.
   ------------------------------------------------------ */

.sak-flat-form,
.sak-flat-filters {
    width: 100%;

    margin: 0;
    padding: 24px 0;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}


/* Сами input/select остаются визуальными элементами */

.sak-flat-form input,
.sak-flat-form select,
.sak-flat-form textarea,
.sak-flat-filters input,
.sak-flat-filters select,
.sak-flat-filters textarea {
    border-radius: 12px;
}


/* ------------------------------------------------------
   6. НАСТОЯЩАЯ КАРТОЧКА КОНТЕНТА
   Проект / курс / мероприятие / новость и т.п.
   ------------------------------------------------------ */

.sak-content-card {
    border-radius: 18px;

    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);

    box-shadow: 0 8px 28px rgba(0,0,0,.16);
}


/* ------------------------------------------------------
   7. МОБИЛЬНАЯ КОМПОНОВКА
   ------------------------------------------------------ */

@media (max-width: 900px) {

    body > main.container {
        width: calc(100% - 28px);
        max-width: none;

        padding-left: 0;
        padding-right: 0;
    }

    .sak-flat-page {
        padding-bottom: 48px;
    }

    .sak-flat-hero {
        padding: 12px 0 24px;
    }

    .sak-flat-section {
        padding: 22px 0;
    }

    .sak-flat-form,
    .sak-flat-filters {
        padding: 18px 0;
    }

}


/* Очень узкие телефоны */

@media (max-width: 390px) {

    body > main.container {
        width: calc(100% - 22px);
    }

}


/* ------------------------------------------------------
   ВАЖНО
   Намеренно НЕ переопределяем глобально:

   .card
   .card-body
   .panel
   .hero
   .container

   Они используются в admin, LMS и старых интерфейсах.
   ------------------------------------------------------ */