/*
 * HelpSafe Law
 *
 * LAYOUT
 *
 * Базовая геометрия сайта:
 * - контейнер;
 * - основная область;
 * - sidebar;
 * - сетки страниц;
 * - вертикальный ритм;
 * - служебные layout-классы.
 *
 * ВАЖНО:
 * Визуальные компоненты находятся в content.css и law.css.
 * Здесь не задаём оформление отдельных карточек.
 */


/* ============================================================
   1. ОСНОВНОЙ КОНТЕЙНЕР
   ============================================================ */

.container {
    width: min(1180px, calc(100% - 48px));

    margin-left: auto;
    margin-right: auto;
}


/*
 * Если в шаблоне используется более узкий контейнер,
 * он позволит комфортно читать длинные юридические тексты.
 */

.container--narrow {
    width: min(860px, calc(100% - 48px));

    margin-left: auto;
    margin-right: auto;
}


/*
 * Широкая область.
 *
 * Используется для таблиц, больших сеток,
 * поиска и других элементов, которым нужен простор.
 */

.container--wide {
    width: min(1320px, calc(100% - 48px));

    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   2. ОСНОВНАЯ ОБЛАСТЬ САЙТА
   ============================================================ */

.site-main {
    width: 100%;

    min-width: 0;
}


/* ============================================================
   3. СТАНДАРТНАЯ СТРАНИЦА
   ============================================================ */

.page-layout {
    width: 100%;

    padding: 64px 0 90px;
}


/*
 * Верхняя часть страницы.
 *
 * Удобно использовать там, где есть:
 * хлебные крошки;
 * заголовок;
 * описание.
 */

.page-layout__header {
    margin-bottom: 42px;
}


/* ============================================================
   4. ОСНОВНАЯ СЕТКА С КОНТЕНТОМ
   ============================================================ */

.content-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    align-items: start;

    gap: 58px;
}


/*
 * Вариант без sidebar.
 */

.content-layout--full {
    grid-template-columns: minmax(0, 1fr);
}


/*
 * Основной текст.
 */

.content-layout__main {
    min-width: 0;
}


/*
 * Правая колонка.
 */

.content-layout__sidebar {
    min-width: 0;
}


/* ============================================================
   5. ЮРИДИЧЕСКАЯ СТРАНИЦА
   ============================================================ */

.law-layout {
    width: 100%;

    padding: 54px 0 90px;
}

.law-layout__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    align-items: start;

    gap: 58px;
}

.law-layout__main {
    min-width: 0;
}

.law-layout__sidebar {
    min-width: 0;
}


/*
 * Узкая юридическая статья.
 *
 * Полезно для материалов, где sidebar не нужен.
 */

.law-layout--narrow {
    width: min(860px, calc(100% - 48px));

    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   6. ВЕРТИКАЛЬНЫЕ ОТСТУПЫ
   ============================================================ */

.content-section {
    padding: 72px 0;
}

.content-section--small {
    padding: 48px 0;
}

.content-section--large {
    padding: 100px 0;
}


/*
 * Если две секции идут подряд и одна уже имеет
 * собственный фон, не создаём двойной отступ.
 */

.content-section + .content-section {
    margin-top: 0;
}


/* ============================================================
   7. ГРУППА КОНТЕНТА
   ============================================================ */

.content-group {
    margin-bottom: 38px;
}

.content-group:last-child {
    margin-bottom: 0;
}


/* ============================================================
   8. ВНУТРЕННИЕ СЕТКИ
   ============================================================ */

.layout-grid {
    display: grid;

    gap: 18px;
}

.layout-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.layout-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.layout-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* ============================================================
   9. FLEX-КОНТЕЙНЕРЫ
   ============================================================ */

.layout-flex {
    display: flex;
}

.layout-flex--between {
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.layout-flex--center {
    align-items: center;
    justify-content: center;
}

.layout-flex--start {
    align-items: flex-start;
}

.layout-flex--wrap {
    flex-wrap: wrap;
}


/* ============================================================
   10. ЗАГОЛОВОК + ДЕЙСТВИЕ
   ============================================================ */

.section-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 34px;
}

.section-bar__content {
    min-width: 0;
}

.section-bar__action {
    flex: 0 0 auto;
}


/* ============================================================
   11. SIDEBAR
   ============================================================ */

.sidebar {
    position: relative;
}

.sidebar__widget {
    margin-bottom: 24px;

    padding: 23px;

    border: 1px solid rgba(38, 36, 36, 0.08);
    border-radius: 14px;

    background: #ffffff;
}

.sidebar__widget:last-child {
    margin-bottom: 0;
}

.sidebar__title {
    margin: 0 0 15px;

    color: #262424;

    font-size: 16px;
    font-weight: 850;

    line-height: 1.3;
}


/* ============================================================
   12. СТАНДАРТНЫЕ СПИСКИ
   ============================================================ */

.layout-list {
    display: flex;
    flex-direction: column;

    gap: 9px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* ============================================================
   13. РАЗДЕЛИТЕЛЬ
   ============================================================ */

.layout-divider {
    width: 100%;
    height: 1px;

    margin: 34px 0;

    background: rgba(38, 36, 36, 0.08);
}


/* ============================================================
   14. ПУСТОЕ ПРОСТРАНСТВО
   ============================================================ */

.layout-spacer--small {
    height: 18px;
}

.layout-spacer--medium {
    height: 32px;
}

.layout-spacer--large {
    height: 54px;
}


/* ============================================================
   15. WORDPRESS ALIGNMENT
   ============================================================ */

.alignleft {
    float: left;

    margin:
        0 28px 20px 0;
}

.alignright {
    float: right;

    margin:
        0 0 20px 28px;
}

.aligncenter {
    display: block;

    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   16. WORDPRESS CONTENT WIDTH
   ============================================================ */

.wp-block {
    max-width: 100%;
}


/* ============================================================
   17. ТАБЛИЦЫ
   ============================================================ */

.table-wrapper {
    width: 100%;

    margin: 28px 0;

    overflow-x: auto;

    border: 1px solid rgba(38, 36, 36, 0.08);
    border-radius: 12px;

    background: #ffffff;
}

.table-wrapper table {
    width: 100%;

    border-collapse: collapse;

    min-width: 620px;
}

.table-wrapper th,
.table-wrapper td {
    padding: 13px 15px;

    border-bottom: 1px solid rgba(38, 36, 36, 0.07);

    text-align: left;

    vertical-align: top;
}

.table-wrapper th {
    color: #343a38;

    background: #f5f8f6;

    font-size: 13px;
    font-weight: 800;
}

.table-wrapper td {
    color: #626a67;

    font-size: 13px;
    line-height: 1.55;
}

.table-wrapper tr:last-child td {
    border-bottom: 0;
}


/* ============================================================
   18. МОБИЛЬНЫЕ СЕТКИ
   ============================================================ */

@media (max-width: 1050px) {

    .content-layout,
    .law-layout__grid {
        grid-template-columns:
            minmax(0, 1fr)
            260px;

        gap: 38px;
    }

    .layout-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 800px) {

    .container,
    .container--narrow,
    .container--wide,
    .law-layout--narrow {
        width: min(100% - 36px, 680px);
    }

    .page-layout {
        padding: 50px 0 70px;
    }

    .law-layout {
        padding: 45px 0 70px;
    }

    .content-layout,
    .law-layout__grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .content-layout__sidebar,
    .law-layout__sidebar {
        width: 100%;
    }

    .content-section {
        padding: 60px 0;
    }

    .content-section--large {
        padding: 75px 0;
    }

    .layout-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section-bar {
        align-items: flex-start;
    }
}


@media (max-width: 560px) {

    .container,
    .container--narrow,
    .container--wide,
    .law-layout--narrow {
        width: calc(100% - 28px);
    }

    .page-layout {
        padding: 40px 0 58px;
    }

    .law-layout {
        padding: 36px 0 58px;
    }

    .content-section {
        padding: 50px 0;
    }

    .content-section--small {
        padding: 36px 0;
    }

    .content-section--large {
        padding: 60px 0;
    }

    .section-bar {
        display: block;

        margin-bottom: 27px;
    }

    .section-bar__action {
        margin-top: 13px;
    }

    .layout-grid--2,
    .layout-grid--3,
    .layout-grid--4 {
        grid-template-columns: 1fr;
    }

    .layout-flex--between {
        align-items: flex-start;
        flex-direction: column;
    }

    .alignleft,
    .alignright {
        float: none;

        display: block;

        margin:
            0 auto 20px;
    }

    .sidebar__widget {
        padding: 20px;
    }
}


/* ============================================================
   19. PRINT
   ============================================================ */

@media print {

    .container,
    .container--narrow,
    .container--wide,
    .law-layout--narrow {
        width: 100%;
        max-width: none;
    }

    .content-layout,
    .law-layout__grid {
        display: block;
    }

    .content-layout__sidebar,
    .law-layout__sidebar {
        display: none;
    }

    .page-layout,
    .law-layout,
    .content-section {
        padding: 0;
    }

    .layout-divider {
        margin: 20px 0;
    }
}