/* ==========================================================================
   Страница «Каталог Общий»
   Figma: 135:1174 — десктоп 1440 × 3717
          274:3969 — мобильный 375 × 5366

   Здесь только то, что есть на этой странице. Шапка страницы, хлебные
   крошки, кнопки, форма заявки и подвал берутся из общих файлов.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 блок — кадрирование фотографии
   Рамка снимка задана в процентах ровно как в макете, но внутри неё
   object-fit: cover — снимок другой пропорции из админки не растянется
   -------------------------------------------------------------------------- */

.page-hero--catalog .page-hero__bg img {
    position: absolute;
    top: -106.8%;
    left: 0;
    width: 100%;
    height: 262.52%;
    max-width: none;
}

@media (max-width: 767px) {
    .page-hero--catalog .page-hero__bg img {
        top: 0;
        left: -104.8%;
        width: 258.15%;
        height: 124.89%;
    }
}

/* ==========================================================================
   Карточка каталога — общая для блоков «по брендам», «по типу поверхности»
   и «по составу». Отличаются только верхняя часть (плашка с логотипом
   или фотография) и рамка; текст, теги и кнопка внизу везде одинаковые
   ========================================================================== */

.cat-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
    background-color: #ffffff;
    transition: box-shadow var(--transition);
}

/* Ховер нарисован у карточки бренда (135:1772); карточки остальных блоков
   устроены так же, поэтому тень у них общая */
.cat-card:hover {
    box-shadow: 0 12px 40px rgba(25, 25, 25, 0.12);
}

.cat-card__media {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    background-color: var(--c-grey-200);
}

.cat-card__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    flex: 1 1 auto;
    padding: 0 16px;
}

.cat-card__top {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cat-card__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--c-grey-800);
}

.cat-card__title {
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    overflow-wrap: break-word;
}

.cat-card__desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

/* ==========================================================================
   2 блок — Каталог по брендам
   Figma: 274:4563 — десктоп 1320 × 512 (от y = 468)
          274:4592 — мобильный 375 × 611
   ========================================================================== */

.catalog-brands {
    position: relative;
    /* узор заходит выше блока и здесь же обрезается — как в макете,
       где его закрывает фотография шапки страницы */
    overflow: hidden;
    /* нижнее поле — это отбивка до серой полосы следующего блока */
    padding: 56px 0;
}

.catalog-brands__inner {
    position: relative;
}

/* Смещения отсчитываются от края контейнера вместе с его полем:
   в макете узор отмерян от колонки текста, а не от края экрана */
.catalog-brands__pattern {
    position: absolute;
    top: -77.08px;
    right: calc(-196.59px + var(--container-pad));
    width: 803.589px;
    /* шире экрана, поэтому общий max-width для картинок здесь снимаем */
    max-width: none;
    height: 431.091px;
    transform: rotate(180deg);
    pointer-events: none;
}

.catalog-brands .section-head {
    position: relative;
    max-width: 653px;
}

.catalog-brands__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

/* Высота 374px из макета задана минимумом: карточки в ряду тянутся
   по самой высокой, а кнопка всегда прижата к низу */
.cat-card--brand {
    min-height: 374px;
    border: 1px solid var(--c-grey-300);
}

.cat-card--brand .cat-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
}

/* Размеры логотипов заданы поштучно — они из макета и у каждого бренда свои */
.cat-card__logo-mark {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
}

.cat-card__media--primatek img {
    width: 213.39px;
    height: 48px;
}

/* Растровые логотипы в макете лежат в режиме «затемнение»: белый фон
   картинки сливается с плашкой Grey 200 и остаётся только сам знак */
.cat-card__media--armor img,
.cat-card__media--finncolor img {
    max-width: none;
    mix-blend-mode: darken;
}

.cat-card__media--armor img {
    width: 310px;
    height: 230px;
}

.cat-card__media--finncolor img {
    width: 251px;
    height: 167px;
}

/* ==========================================================================
   3 блок — Каталог по типу поверхности
   Figma: 137:2180 — десктоп 1440 × 626 (от y = 1036)
          274:4730 — мобильный 375 × 674
   ========================================================================== */

.catalog-surface {
    padding: 56px 0;
    background-color: var(--c-grey-200);
}

.catalog-surface__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.catalog-surface .section-head {
    max-width: 653px;
}

/* Пояснение справа отделено вертикальной линией */
.catalog-surface__note {
    flex-shrink: 0;
    width: 448px;
    padding-left: 24px;
    border-left: 1px solid var(--c-grey-300);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-800);
}

/* ширина строки из макета — при ней текст ложится в три строки */
.catalog-surface__note p {
    max-width: 393px;
}

.catalog-surface__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

/* Пропорции кадра из макета: 424 × 200 на десктопе и 312 × 148 на мобильном
   дают одно и то же отношение сторон */
.cat-card--surface .cat-card__media {
    aspect-ratio: 424 / 200;
}

/* В макете снимок на 6% выше рамки — кадрирование сохраняем, но внутри
   рамки всё равно object-fit: cover, чтобы фото из админки не растянулось.
   Селектор именно по классу фотографии: рядом в рамке лежит ещё метка */
.cat-card--surface .cat-card__photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 106%;
    object-fit: cover;
}

/* Метка сложности — три ромба, закрашенных по уровню */
.cat-card__level {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 44px;
    height: 12px;
}

/* --------------------------------------------------------------------------
   Планшет
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
    .catalog-surface__note {
        width: auto;
        flex: 0 1 448px;
    }
}

@media (max-width: 1023px) {
    .catalog-brands__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* пояснение перестаёт помещаться рядом с заголовком */
    .catalog-surface__head {
        flex-direction: column;
        gap: 16px;
    }

    .catalog-surface__note {
        flex: 0 0 auto;
        width: 100%;
        padding-left: 0;
        border-left: 0;
    }

    .catalog-surface__note p {
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   Мобильная версия — карточки уходят в ленту, ширина остаётся макетной
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .catalog-brands__pattern {
        right: calc(-216.25px + var(--container-pad));
        width: 410.246px;
        height: 220.08px;
    }

    .catalog-brands__list,
    .catalog-surface__list {
        display: flex;
        align-items: stretch;
        gap: 12px;
        margin-left: calc(-1 * var(--container-pad));
        margin-right: calc(-1 * var(--container-pad));
        padding: 0 var(--container-pad);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .catalog-brands__list::-webkit-scrollbar,
    .catalog-surface__list::-webkit-scrollbar {
        display: none;
    }

    .cat-card {
        flex: 0 0 312px;
    }
}

/* ==========================================================================
   4 блок — Каталог по основе покрытия
   Figma: 139:2387 — десктоп 1320 × 424 (от y = 1718)
          275:4814 — мобильный 359 × 468
   ========================================================================== */

.catalog-base {
    position: relative;
    overflow: hidden;
    padding: 56px 0;
}

.catalog-base__inner {
    position: relative;
}

.catalog-base__pattern {
    position: absolute;
    top: -101px;
    right: calc(-127px + var(--container-pad));
    width: 255px;
    max-width: none;
    height: 413.994px;
    pointer-events: none;
}

.catalog-base .section-head {
    position: relative;
    max-width: 653px;
}

.catalog-base__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.cat-card--base {
    border: 1px solid var(--c-grey-300);
}

.cat-card--base .cat-card__media {
    height: 120px;
}

/* Снимок в макете почти на треть выше рамки — берётся её верхняя часть */
.cat-card--base .cat-card__photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 129.17%;
    object-fit: cover;
}

/* у одной карточки в макете взят нижний край снимка */
.cat-card--base .cat-card__media--bottom .cat-card__photo {
    top: -29.17%;
}

@media (max-width: 1023px) {
    .catalog-base__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .catalog-base__pattern {
        top: -138px;
        right: calc(-83px + var(--container-pad));
        width: 170px;
        height: 276px;
    }

    .catalog-base__list {
        display: flex;
        align-items: stretch;
        gap: 12px;
        margin-left: calc(-1 * var(--container-pad));
        margin-right: calc(-1 * var(--container-pad));
        padding: 0 var(--container-pad);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .catalog-base__list::-webkit-scrollbar {
        display: none;
    }
}