/* Start:/local/templates/burburo/components/bitrix/catalog.section.list/index-section-list/style.css?17732380494729*/
/* --- ОСНОВНАЯ СЕТКА (12 колонок) --- */
.categories__list {
    --columns: 12;
    display: grid;
    grid-gap: 12px;
    grid-template-columns: repeat(var(--columns), [col] 1fr);
    grid-template-rows: repeat(2, [row] 110px);
    grid-auto-flow: dense;
    margin-top: 24px;
}

/* --- СТИЛЬ КАРТОЧКИ --- */
.cat-item {
    grid-column: span 2;
    background-color: var(--bg-color, var(--somber-sky));
    border-radius: var(--radius-sm);
    padding: 8px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 1;
}

.cat-item:active,
:where(html[data-input=mouse]) .cat-item:hover {
    background-color: var(--ozone-hover);
    transform: translateY(-6px);
}

:where(html[data-input=mouse]) .cat-item:hover .cat-item__img {
    transform: scale(1.1) translate(10px);
}

.cat-item__title {
    position: relative;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    max-width: 60%;
    color: rgb(21 46 84 / 80%);
    z-index: 3;

    @media (width >=768px) {
        font-size: 13px;
        font-weight: 400;
    }
}

.cat-item__subtitle {
    display: block;
}

.cat-item__footer {
    display: grid;
    gap: 8px;
    margin-top: auto;
}

/* --- ХАРАКТЕРИСТИКИ (ИКОНКИ) --- */
.cat-item__type-list {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    z-index: 3;
}

.cat-item__type {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #7c869d;
    white-space: nowrap;
}

.cat-item__type svg {
    flex-shrink: 0;
}

.cat-item__sticker {
    --stick-bg: #ea3921ba;
    --stick-color: #fff;
    align-items: center;
    color: var(--stick-color);
    display: flex;
    font-size: 12px;
    width: fit-content;
    line-height: 22px;
    max-width: 100%;
    padding: 0 8px;
    pointer-events: none;
    position: relative;
    user-select: none;
    z-index: 1;
}

.cat-item__sticker:after,
.cat-item__sticker:before {
    content: "";
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 12px var(--stick-bg);
    inset: 0;
    opacity: .2;
    position: absolute;
    transform: skew(-12deg);
    z-index: -1;
}

.cat-item__sticker:after {
    background-color: var(--stick-bg);
    box-shadow: none;
    opacity: 1;
}

/* --- КАРТИНКИ --- */
.cat-item__img {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    z-index: 2;
    width: 100%;
    height: 100%;
    justify-content: flex-end;
    pointer-events: none;
    transition: .2s ease;
}

.cat-item__img img {
    object-fit: contain;
    object-position: bottom right;
    height: 100%;
}

/* --- МОДИФИКАТОРЫ РАЗМЕРОВ --- */
.cat-item--w2 { grid-column: span 2; }
.cat-item--w3 { grid-column: span 3; }
.cat-item--w4 { grid-column: span 4; }

.cat-item--h2 { grid-row: span 2; }

/* Custom styles for taller/wider blocks if needed */
.cat-item--h2 {
    padding: 16px;
    border-radius: 16px;
}

.cat-item--h2 .cat-item__title {
    font-size: 17px;
    font-weight: 600;
}

/* --- АДАПТИВНОСТЬ --- */

@media (max-width: 1024px) {
    .cat-item {
        grid-column: span 4;
    }

    /* 3 в ряд - scaling down larger blocks */
    .cat-item--w2 { grid-column: span 8; }
    .cat-item--w3 { grid-column: span 8; }
    .cat-item--w4 { grid-column: span 12; }
}

@media (max-width: 768px) {
    .categories__list {
        gap: 12px;
        grid-auto-rows: 100px;
    }

    .cat-item {
        grid-column: span 6;
    }

    /* 2 в ряд */
    .cat-item--w2 {
        grid-column: span 12;
    }

    .cat-item__title {
        font-size: 14px;
        max-width: 80%;
    }
}

@media (max-width: 480px) {
    .categories__list {
        grid-template-columns: repeat(2, 1fr);
        /* Жестко 2 колонки */
        grid-auto-rows: 120px;
        gap: 10px;
    }

    .cat-item {
        grid-column: span 1 !important;
        padding: 12px;
    }

    .cat-item--w2 {
        grid-column: span 2 !important;
    }

    .cat-item--h2 {
        grid-row: span 1;
    }

    /* На мобилках лучше в один ряд */

    .cat-item__title {
        font-size: 13px;
        max-width: 100%;
    }

    .cat-item__type-list {
        gap: 4px;
    }

    .cat-item__type {
        font-size: 10px;
        padding: 3px 6px;
    }

    .cat-item__type svg {
        width: 10px;
        height: 10px;
    }
}
/* End */
/* /local/templates/burburo/components/bitrix/catalog.section.list/index-section-list/style.css?17732380494729 */