/* ==========================================================
   Единое оформление содержимого CKEditor
   ========================================================== */

/*
 * Информационные страницы:
 * .ui-wysiwyg.editor
 *
 * Описания категорий:
 * .seo__desc .editor
 *
 * Область редактирования CKEditor:
 * body.asb-editor-content
 */
.ui-wysiwyg.editor,
.seo__desc .editor,
body.asb-editor-content {
    color: #343434;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

/* Абзацы */
.ui-wysiwyg p,
.seo__desc p,
:where(body.asb-editor-content) p {
    margin: 0 0 16px;
    font-size: inherit;
    line-height: inherit;
}

/* Первый элемент не получает лишний верхний отступ */
.ui-wysiwyg.editor > :first-child,
.seo__desc .editor > :first-child,
:where(body.asb-editor-content) > :first-child {
    margin-top: 0;
}

/* Последний элемент не получает лишний нижний отступ */
.ui-wysiwyg.editor > :last-child,
.seo__desc .editor > :last-child,
:where(body.asb-editor-content) > :last-child {
    margin-bottom: 0;
}

/* Заголовок второго уровня */
.ui-wysiwyg h2,
.seo__desc h2,
:where(body.asb-editor-content) h2 {
    margin: 32px 0 16px;
    color: #343434;
    font-family: inherit;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
}

/* Заголовок третьего уровня */
.ui-wysiwyg h3,
.seo__desc h3,
:where(body.asb-editor-content) h3 {
    margin: 28px 0 14px;
    color: #343434;
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
}

/* Заголовок четвёртого уровня */
.ui-wysiwyg h4,
.seo__desc h4,
:where(body.asb-editor-content) h4 {
    margin: 24px 0 12px;
    color: #343434;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

/* Изображения не выходят за пределы текстовой области */
.ui-wysiwyg img,
.seo__desc img,
:where(body.asb-editor-content) img {
    max-width: 100%;
    height: auto;
}

/* Адаптивная типографика */
@media (max-width: 600px) {
    .ui-wysiwyg.editor,
    .seo__desc .editor,
    body.asb-editor-content {
        font-size: 15px;
        line-height: 1.55;
    }

    .ui-wysiwyg h2,
    .seo__desc h2,
    :where(body.asb-editor-content) h2 {
        font-size: 22px;
    }

    .ui-wysiwyg h3,
    .seo__desc h3,
    :where(body.asb-editor-content) h3 {
        font-size: 19px;
    }
}

/* ==========================================================
   Универсальное оформление новых страниц

   Оберните содержимое страницы в:
   <div class="asb-content">...</div>
   ========================================================== */

.asb-content {
    --asb-color-text: #343434;
    --asb-color-h2: #e75456;
    --asb-color-h3: #19989e;
    --asb-list-indent: 36px;
    --asb-list-indent-mobile: 28px;
    --asb-list-nested-indent: 32px;
    --asb-list-nested-indent-mobile: 24px;

    color: var(--asb-color-text);
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

/* Абзацы */
.asb-content p {
    margin: 0 0 16px;
    font-size: inherit;
    line-height: inherit;
}

/* Маркированные и нумерованные списки без собственных классов */
.asb-content ul:not([class]),
.asb-content ol:not([class]) {
    margin: 0 0 16px;
    padding: 0 0 0 var(--asb-list-indent);
    line-height: 1;
    list-style-position: outside;
}

.asb-content ul:not([class]) {
    list-style-type: disc;
}

.asb-content ol:not([class]) {
    list-style-type: decimal;
    counter-reset: none;
}

/* Сбрасываем оформление пунктов, заданное темой Prostore */
.asb-content ul:not([class]) > li,
.asb-content ol:not([class]) > li {
    position: static;
    margin: 0 0 8px;
    padding: 0;
}

.asb-content ul:not([class]) > li:last-child,
.asb-content ol:not([class]) > li:last-child {
    margin-bottom: 0;
}

/* Отключаем декоративные маркеры Prostore, чтобы не было двойных точек и цифр */
.asb-content ul:not([class]) > li::after,
.asb-content ol:not([class]) > li::after {
    display: none;
    content: none;
}

/* Цвет маркеров */
.asb-content ul:not([class]) > li::marker {
    color: var(--asb-color-text);
}

.asb-content ol:not([class]) > li::marker {
    color: var(--asb-color-text);
    font-weight: 600;
}

/* Вложенные списки */
.asb-content li > ul:not([class]),
.asb-content li > ol:not([class]) {
    margin-top: 8px;
    margin-bottom: 0;
}

.asb-content ul:not([class]) ul:not([class]) {
    list-style-type: circle;
}

.asb-content ol:not([class]) ol:not([class]) {
    list-style-type: lower-alpha;
}

/*
 * Списки, цвет которых связан с уровнем заголовка.
 * Использование в HTML:
 * <ul class="asb-list asb-list--h2">...</ul>
 * <ol class="asb-list asb-list--h3">...</ol>
 */
.asb-content ul.asb-list,
.asb-content ol.asb-list {
    margin: 0 0 16px;
    padding: 0 0 0 var(--asb-list-indent);
    line-height: 1;
    list-style-position: outside;
}

.asb-content ul.asb-list {
    list-style-type: disc;
}

.asb-content ol.asb-list {
    list-style-type: decimal;
    counter-reset: none;
}

.asb-content .asb-list > li {
    position: static;
    margin: 0 0 8px;
    padding: 0;
}

.asb-content .asb-list > li:last-child {
    margin-bottom: 0;
}

.asb-content .asb-list > li::after {
    display: none;
    content: none;
}

.asb-content .asb-list--h2 {
    color: var(--asb-color-text);
}

.asb-content .asb-list--h3 {
    color: var(--asb-color-text);
}

/* Цветными остаются только маркеры маркированных списков */
.asb-content ul.asb-list--h2 li::marker {
    color: var(--asb-color-h2);
}

.asb-content ul.asb-list--h3 li::marker {
    color: var(--asb-color-h3);
}

/* Нумерация всегда имеет один нейтральный цвет */
.asb-content ol li::marker {
    color: var(--asb-color-text);
    font-weight: 600;
}

.asb-content ul.asb-list ul:not([class]) {
    list-style-type: circle;
}

.asb-content ol.asb-list ol:not([class]) {
    list-style-type: lower-alpha;
}

/* Убираем лишние внешние отступы у первого и последнего элементов */
.asb-content > :first-child {
    margin-top: 0;
}

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

/* Заголовки второго уровня */
.asb-content h2 {
    margin: 32px 0 16px;
    color: var(--asb-color-h2);
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
}

/* Заголовки третьего уровня */
.asb-content h3 {
    margin: 28px 0 16px;
    color: var(--asb-color-h3);
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
}

/* Заголовки четвёртого уровня */
.asb-content h4 {
    margin: 18px 0 12px;
    color: var(--asb-color-text);
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
}

/* Изображения */
.asb-content img {
    max-width: 100%;
    height: auto;
}

/* Смартфоны */
@media (max-width: 600px) {
    .asb-content {
        font-size: 15px;
        line-height: 1;
    }

    .asb-content h2 {
        font-size: 22px;
    }

    .asb-content h3 {
        font-size: 19px;
    }

    .asb-content ul:not([class]),
    .asb-content ol:not([class]),
    .asb-content ul.asb-list,
    .asb-content ol.asb-list {
        padding-left: var(--asb-list-indent-mobile);
    }
}

/* ==========================================================
   Выноска в тексте
   ========================================================== */

/* Основной вариант — бирюзовый */
.asb-callout {
    box-sizing: border-box;
    margin: 24px 0;
    padding: 18px 20px;
    border: 1px solid #cfe5e6;
    border-left: 4px solid #19989e;
    border-radius: 8px;
    background-color: #f3f9f9;
    color: #343434;
    font-size: inherit;
    line-height: inherit;
}

/* Заголовок выноски */
.asb-callout .asb-callout__title {
    margin: 0 0 8px;
    color: #19989e;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

/* Абзацы внутри выноски */
.asb-callout p {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: inherit;
    line-height: inherit;
}

/* Убираем лишние внешние отступы у первого и последнего элементов */
.asb-callout > :first-child {
    margin-top: 0;
}

.asb-callout > :last-child {
    margin-bottom: 0;
}

/* Красный вариант для особенно важной информации */
.asb-callout--accent {
    border-color: #f1d0d1;
    border-left-color: #e75456;
    background-color: #fdf6f6;
}

.asb-callout--accent .asb-callout__title {
    color: #e75456;
}

/* Смартфоны */
@media (max-width: 600px) {
    .asb-callout {
        margin: 20px 0;
        padding: 16px;
    }

    .asb-callout .asb-callout__title {
        font-size: 17px;
    }
}

/* ==========================================================
   Текст с обтекающим изображением
   ========================================================== */

/* Общий контейнер */
.asb-paragraph {
    display: flow-root;
    font-size: 16px;
    line-height: 1.6;
}

/* Резервное завершение обтекания для старых браузеров */
.asb-paragraph::after {
    display: table;
    clear: both;
    content: "";
}

/* Изображение слева — вариант по умолчанию */
.asb-paragraph .asb-paragraph__image {
    float: left !important;
    display: block;
    width: min(40%, 560px) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 24px 14px 0;
    border-radius: 8px;
}

/* Изображение справа */
.asb-paragraph--right .asb-paragraph__image {
    float: right !important;
    margin: 0 0 14px 24px;
    display: block;
    width: min(40%, 560px) !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
}

/* Разрешаем тексту обтекать изображение */
.asb-paragraph p,
.asb-paragraph ul,
.asb-paragraph ol {
    clear: none !important;
    overflow: visible !important;
}

/* Интервалы между абзацами */
.asb-paragraph p {
    margin-top: 0;
    margin-bottom: 16px;
}

/* Интервалы у списков */
.asb-paragraph ul,
.asb-paragraph ol {
    margin-top: 0;
    margin-bottom: 16px;
}

/* Отступы списков внутри блока с обтекающим изображением */
.asb-paragraph ul:not([class]),
.asb-paragraph ol:not([class]),
.asb-paragraph ul.asb-list,
.asb-paragraph ol.asb-list {
    padding-left: 0;
    list-style-position: inside;
}

/* Отступ первого уровня считается от реального начала строки после изображения */
.asb-paragraph > ul:not([class]) > li,
.asb-paragraph > ol:not([class]) > li,
.asb-paragraph > ul.asb-list > li,
.asb-paragraph > ol.asb-list > li {
    text-indent: 16px;
}

/* Каждый вложенный уровень получает собственный дополнительный отступ */
.asb-paragraph li > ul:not([class]),
.asb-paragraph li > ol:not([class]),
.asb-paragraph li > ul.asb-list,
.asb-paragraph li > ol.asb-list {
    margin-top: 8px;
    padding-left: 0;
    list-style-position: inside;
}

.asb-paragraph li > ul:not([class]) > li,
.asb-paragraph li > ol:not([class]) > li,
.asb-paragraph li > ul.asb-list > li,
.asb-paragraph li > ol.asb-list > li {
    text-indent: var(--asb-list-nested-indent, 32px);
}

/* Смартфоны */
@media (max-width: 480px) {
    .asb-paragraph .asb-paragraph__image {
        float: none !important;
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px;
    }

    .asb-paragraph > ul:not([class]) > li,
    .asb-paragraph > ol:not([class]) > li,
    .asb-paragraph > ul.asb-list > li,
    .asb-paragraph > ol.asb-list > li {
        text-indent: 12px;
    }

    .asb-paragraph li > ul:not([class]) > li,
    .asb-paragraph li > ol:not([class]) > li,
    .asb-paragraph li > ul.asb-list > li,
    .asb-paragraph li > ol.asb-list > li {
        text-indent: var(--asb-list-nested-indent-mobile, 24px);
    }
}

/* ==========================================================
   Изображение и текст в отдельных колонках
   Без обтекания
   ========================================================== */

.asb-columns {
    --asb-columns-image-width: 33%;
    --asb-columns-gap: 25px;

    display: grid;
    grid-template-columns:
        var(--asb-columns-image-width)
        minmax(0, 1fr);
    grid-template-areas: "image content";
    gap: var(--asb-columns-gap);
    align-items: start;
}

/* Изображение */
.asb-columns__image {
    grid-area: image;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Текстовая колонка */
.asb-columns__content {
    grid-area: content;
    min-width: 0;
}

/* Убираем нижний отступ у последнего элемента */
.asb-columns__content > :last-child {
    margin-bottom: 0;
}

/* Изображение справа */
.asb-columns--right {
    grid-template-columns:
        minmax(0, 1fr)
        var(--asb-columns-image-width);
    grid-template-areas: "content image";
}

/* Смартфоны */
@media (max-width: 600px) {
    .asb-columns,
    .asb-columns--right {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "image"
            "content";
        gap: 16px;
    }
}

/* ==========================================================
   Карточки преимуществ
   ========================================================== */

.asb-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 32px;
    counter-reset: asb-benefit;
}

.asb-benefit-card {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    padding: 20px 22px 20px 64px;
    border: 1px solid #e1e7e8;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 6px 20px rgba(52, 52, 52, 0.06);
    counter-increment: asb-benefit;
}

/* Автоматическая нумерация карточек: 01, 02, 03... */
.asb-benefit-card::before {
    position: absolute;
    top: 21px;
    left: 20px;
    color: #e75456;
    content: counter(asb-benefit, decimal-leading-zero);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

.asb-benefit-card .asb-benefit-card__title {
    margin: 0 0 8px;
    color: #19989e;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.asb-benefit-card p {
    margin: 0;
    color: #343434;
    font-size: inherit;
    line-height: 1.55;
    text-align: left;
}

/* ==========================================================
   Навигация по задачам
   ========================================================== */

.asb-task-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 0 0 32px;
}

.asb-task-nav .asb-task-nav__link {
    position: relative;
    display: block;
    box-sizing: border-box;
    min-width: 0;
    padding: 15px 46px 15px 18px;
    border: 1px solid #d8e5e6;
    border-radius: 8px;
    background-color: #ffffff;
    color: #343434;
    text-decoration: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.asb-task-nav .asb-task-nav__link::after {
    position: absolute;
    top: 50%;
    right: 18px;
    color: #e75456;
    content: "\2192";
    font-size: 22px;
    line-height: 1;
    transform: translateY(-50%);
}

.asb-task-nav .asb-task-nav__question {
    display: block;
    font-weight: 700;
    line-height: 1.35;
}

.asb-task-nav .asb-task-nav__destination {
    display: block;
    margin-top: 5px;
    color: #19989e;
    font-size: 15px;
    line-height: 1.4;
}

.asb-task-nav .asb-task-nav__link:hover {
    border-color: #19989e;
    box-shadow: 0 8px 22px rgba(25, 152, 158, 0.12);
    color: #343434;
    text-decoration: none !important;
    transform: translateY(-2px);
}

.asb-task-nav .asb-task-nav__link:hover .asb-task-nav__destination {
    color: #147c81;
}

.asb-task-nav .asb-task-nav__link:focus {
    outline: 2px solid #19989e;
    outline-offset: 3px;
}

/*
 * Альтернативное оформление навигации единым блоком.
 * Добавьте к контейнеру класс asb-task-nav--panel.
 */
.asb-task-nav.asb-task-nav--panel {
    gap: 0 32px;
    padding: 8px 24px;
    border-left: 4px solid #19989e;
    border-radius: 10px;
    background: linear-gradient(135deg, #edf8f8 0%, #f7fbfb 100%);
}

.asb-task-nav--panel .asb-task-nav__link {
    padding: 17px 46px 17px 10px;
    border: 0;
    border-bottom: 1px solid #cfe3e4;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* В двухколоночном варианте у последней строки разделитель не нужен */
.asb-task-nav--panel .asb-task-nav__link:nth-last-child(-n + 2) {
    border-bottom-color: transparent;
}

.asb-task-nav--panel .asb-task-nav__link::after {
    right: 10px;
    width: 30px;
    height: 30px;
    border: 1px solid #efc7c8;
    border-radius: 50%;
    background-color: #ffffff;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.asb-task-nav--panel .asb-task-nav__link:hover {
    border-bottom-color: #cfe3e4;
    background-color: rgba(255, 255, 255, 0.55);
    box-shadow: none;
    transform: none;
}

.asb-task-nav--panel .asb-task-nav__link:nth-last-child(-n + 2):hover {
    border-bottom-color: transparent;
}

.asb-task-nav--panel .asb-task-nav__link:hover::after {
    border-color: #e75456;
    background-color: #e75456;
    color: #ffffff;
    transform: translateY(-50%) translateX(3px);
}

/* Планшеты и смартфоны */
@media (max-width: 767px) {
    .asb-benefits-grid,
    .asb-task-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .asb-benefit-card {
        padding: 18px 18px 18px 54px;
    }

    .asb-benefit-card::before {
        top: 19px;
        left: 16px;
    }

    .asb-benefit-card .asb-benefit-card__title {
        font-size: 17px;
    }

    .asb-task-nav.asb-task-nav--panel {
        gap: 0;
        padding: 6px 18px;
    }

    /* После перехода в одну колонку разделитель убирается только у последней строки */
    .asb-task-nav--panel .asb-task-nav__link:nth-last-child(-n + 2) {
        border-bottom-color: #cfe3e4;
    }

    .asb-task-nav--panel .asb-task-nav__link:last-child {
        border-bottom-color: transparent;
    }

    .asb-task-nav--panel .asb-task-nav__link:nth-last-child(-n + 2):hover {
        border-bottom-color: #cfe3e4;
    }

    .asb-task-nav--panel .asb-task-nav__link:last-child:hover {
        border-bottom-color: transparent;
    }
}