/* Bento Grid для виджета "Популярные категории" */
/* c-sections c-sections-template-3 */
/* Применяется только на десктопе (>1000px) */

/* ========================================
   ДЕСКТОП: Bento Grid (min-width: 1001px)
   ======================================== */
@media all and (min-width: 1001px) {
    /* CSS Grid вместо flexbox */
    .widget.c-sections.c-sections-template-3 .widget-content .widget-items .intec-grid.intec-grid-wrap {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    /* Сброс ширины для grid-элементов */
    .widget.c-sections.c-sections-template-3 .widget-items .intec-grid > div[class*="intec-grid-item"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
    }

    /* Первый элемент - большой (2 колонки, 2 ряда) */
    .widget.c-sections.c-sections-template-3 .widget-items .intec-grid > div[class*="intec-grid-item"]:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .widget.c-sections.c-sections-template-3 .widget-items .intec-grid > div:nth-child(1) .widget-item-picture {
        padding-top: 100% !important;
    }

    .widget.c-sections.c-sections-template-3 .widget-items .intec-grid > div:nth-child(1) .widget-item-name {
        font-size: 26px;
        line-height: 32px;
        font-weight: 600;
    }

    /* Контейнер плитки - скругления и overflow */
    .widget.c-sections.c-sections-template-3 .widget-item {
        border-radius: 20px !important;
        overflow: hidden !important;
        background: #f5f5f5;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    /* Картинка внутри плитки */
    .widget.c-sections.c-sections-template-3 .widget-item-picture {
        border-radius: 0 !important;
        width: 100% !important;
        height: auto !important;
        padding-top: 100% !important;
        background-size: cover !important;
        background-position: center center !important;
        pointer-events: none;
    }

    /* Контент поверх картинки - кликабельная ссылка */
    .widget.c-sections.c-sections-template-3 .widget-item-content {
        border-radius: 0 !important;
        z-index: 20 !important;
        pointer-events: auto;
        cursor: pointer;
    }

    /* Hover эффект */
    .widget.c-sections.c-sections-template-3 .widget-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    }

    /* Текст названия */
    .widget.c-sections.c-sections-template-3 .widget-item-name {
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
    }
}

/* Планшеты 1001-1200px */
@media all and (min-width: 1001px) and (max-width: 1200px) {
    .widget.c-sections.c-sections-template-3 .widget-content .widget-items .intec-grid.intec-grid-wrap {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .widget.c-sections.c-sections-template-3 .widget-items .intec-grid > div[class*="intec-grid-item"]:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }
}

/* ========================================
   МОБИЛЬНЫЕ И ПЛАНШЕТЫ (<1000px): 
   Стандартный вид без изменений
   ======================================== */