/* ==========================================================================
   Блок «О каталоге» — текстовый блок с фотографией веера образцов
   Стоит и на общем каталоге, и на страницах подразделов
   Figma: 141:2545 — десктоп 1440 × 304 (от y = 2434)
          275:4897 — мобильный 343 × 663 + картинка под текстом
   ========================================================================== */

.catalog-about {
    position: relative;
    /* фотография в макете свисает ниже блока и там же обрезается */
    overflow: hidden;
    /* снизу 96px — в макете под текстом остаётся свободное поле,
       в котором и лежит веер образцов */
    padding: 56px 0 96px;
}

.catalog-about__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.catalog-about__title {
    flex-shrink: 0;
    width: 312px;
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-800);
}

.catalog-about__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 0;
    min-width: 0;
}

.catalog-about__lead {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-grey-800);
}

.catalog-about__cols {
    display: flex;
    gap: 24px;
}

.catalog-about__cols p {
    flex: 1 1 0;
    min-width: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-500);
}

/* Веер образцов и узор под ним прижаты к левому краю экрана
   и в макете уходят за него */
.catalog-about__photo,
.catalog-about__decor {
    position: absolute;
    max-width: none;
    pointer-events: none;
}

.catalog-about__photo {
    top: 112px;
    left: calc(-58px + var(--container-offset));
    width: 458px;
    height: 305px;
    object-fit: cover;
}

/* в макете фигура отражена по горизонтали */
.catalog-about__decor {
    top: 142px;
    left: calc(-44px + var(--container-offset));
    width: 358px;
    height: 400px;
    transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   Планшет: текст в две колонки уже не помещается рядом с заголовком
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .catalog-about__inner {
        flex-direction: column;
        gap: 24px;
    }

    .catalog-about__title {
        width: auto;
    }
}

/* --------------------------------------------------------------------------
   Мобильная версия — картинка уходит под текст
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    /* снизу оставлено место под веер образцов */
    .catalog-about {
        padding-bottom: 162px;
    }

    .catalog-about__title {
        max-width: 312px;
        font-size: 28px;
        line-height: 1.1;
    }

    .catalog-about__cols {
        flex-direction: column;
    }

    .catalog-about__photo {
        top: auto;
        bottom: -31.6px;
        left: -61px;
        width: 268px;
        height: 178.622px;
    }

    .catalog-about__decor {
        top: auto;
        bottom: -104.6px;
        left: -52.81px;
        width: 209.485px;
        height: 234.061px;
    }
}

/* --------------------------------------------------------------------------
   Широкий вариант — страница подраздела каталога
   Заголовок там 424px вместо 312px, а фотография и ромб опущены ниже:
   текста в блоке больше
   Figma: 190:4459 — десктоп 1320 × 290 (от y = 2518)
          275:6281 — мобильный 404 × 1084
   -------------------------------------------------------------------------- */

.catalog-about--wide .catalog-about__title {
    width: 424px;
}

.catalog-about--wide .catalog-about__photo {
    top: 194px;
}

.catalog-about--wide .catalog-about__decor {
    top: 224px;
}

@media (max-width: 1023px) {
    .catalog-about--wide .catalog-about__title {
        width: auto;
    }
}

@media (max-width: 767px) {
    /* текста здесь больше, поэтому и поле под ним другое: 150px вместо 162 */
    .catalog-about--wide {
        padding-bottom: 150px;
    }

    .catalog-about--wide .catalog-about__title {
        max-width: 312px;
    }

    /* на мобильном фотография и ромб снова прижаты к низу блока,
       но свисают ниже, чем на общем каталоге */
    .catalog-about--wide .catalog-about__photo {
        top: auto;
        bottom: -35.6px;
        left: -45px;
    }

    .catalog-about--wide .catalog-about__decor {
        top: auto;
        bottom: -108.6px;
        left: -36.81px;
    }
}

/* --------------------------------------------------------------------------
   SEO-текст подборки (новый формат): готовый HTML из поля термина —
   абзацы и маркированные списки. Выводится вместо двух колонок.
   -------------------------------------------------------------------------- */

.catalog-about__body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--c-grey-500);
}

.catalog-about__body > :first-child {
    margin-top: 0;
}

.catalog-about__body > :last-child {
    margin-bottom: 0;
}

.catalog-about__body p {
    margin: 0 0 12px;
}

.catalog-about__body ul,
.catalog-about__body ol {
    margin: 12px 0;
    padding-left: 22px;
}

.catalog-about__body li {
    margin-bottom: 8px;
}

.catalog-about__body a {
    color: var(--c-red-500);
}

/* --------------------------------------------------------------------------
   SEO-подборка: выравниваем в столбик — заголовок в одну строку сверху,
   описание на всю ширину под ним. Иначе заголовок висел узкой колонкой слева
   и блок смотрелся неровно (ТЗ-правка).
   -------------------------------------------------------------------------- */

.catalog-about--seo .catalog-about__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

.catalog-about--seo .catalog-about__title,
.catalog-about--seo .catalog-about__text {
    width: 100%;
}

/* текст идёт на всю ширину контейнера; чтобы он не наезжал на веер образцов
   в левом нижнем углу, оставляем снизу поле под картинку */
.catalog-about--seo {
    padding-bottom: 120px;
}

@media (max-width: 767px) {
    .catalog-about--seo {
        padding-bottom: 150px;
    }
}