/*
 * Card grid fixes (desktop only).
 *
 * Перенесено 2026-05-12 из WPCode-сниппета 2477 «Catalog grid fix (desktop only)».
 * После перевода сайта на этот файл — WPCode-сниппет 2477 нужно удалить.
 *
 * Это «костыль» поверх дефекта родительской темы: компоненты .catalog-block,
 * .product-block, .journal-block и т.п. сами не контролируют свои размеры.
 * Правильное решение — починить компоненты в самой теме (aspect-ratio,
 * object-fit без !important). Пока — точечный фикс через перекрытие.
 */

@media (min-width: 1200px) {

    /* Карточки каталога */
    body .catalog-block {
        max-width: 33% !important;
        max-height: 480px !important;
    }

    body .catalog-block__bg {
        max-height: 480px !important;
        object-fit: cover !important;
    }

    /* Журнальные блоки на главной */
    body .journal-block {
        max-height: 665px !important;
    }

    body .journal-block__bg {
        max-height: 665px !important;
        object-fit: cover !important;
    }

    /* Карточки товаров в каталоге */
    body .product-block {
        max-height: 600px !important;
    }

    body .product-block img,
    body .product-block__bg {
        max-height: 600px !important;
        object-fit: cover !important;
    }

    /* Картинки портфолио */
    body .portfolio-item img,
    body .portfolio-block img {
        max-height: 500px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* Картинки отзывов */
    body .review img,
    body .reviews-item img {
        max-height: 400px !important;
        width: auto !important;
        object-fit: cover !important;
    }
}

/*
 * Tablet/мобильный layout (добавлено 2026-05-15, переписано 2026-05-18).
 *
 * Проблема: parent style.css @media (max-width: 992px) делает .catalog-block
 * шириной 100% + max-width: 300px — карточка центрируется узкой колонкой,
 * вокруг пустота. На телефонах <600px — то же самое.
 *
 * Фикс: 1 карточка в ряд во всю ширину контейнера, aspect-ratio 3:2
 * (ландшафт). На главной .journal-block остаётся 2-в-ряд портрет — это
 * сознательное расхождение, см. journal-grid.css.
 */
@media (max-width: 768px) {

    body .catalog-content {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    body .catalog-block {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        position: relative !important;
        /* aspect-ratio оставляем для движков, которые его честно применяют. */
        aspect-ratio: 3 / 2;
    }

    /*
     * Safari/WebKit ИГНОРИРУЕТ aspect-ratio на flex-айтемах (.catalog-block —
     * это flex-айтем в .catalog-content). Карточка схлопывается до высоты
     * контента (~58px), фон absolute высоту не задаёт → плоская «полоска».
     * Проверено в WebKit 18.2: 363×58 (6.3:1) против 363×242 (3:2) в Chromium.
     *
     * Фикс, работающий во всех движках — padding-hack: псевдоэлемент резервирует
     * высоту 66.66% от ширины (= соотношение 3:2), а контент-обёртку кладём
     * абсолютно поверх этой коробки. От aspect-ratio высота больше не зависит.
     */
    body .catalog-block::before {
        content: '';
        display: block;
        padding-top: 66.66%;
    }

    body .wrapp-catalog-block {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: auto !important;
    }

    /* Парент держит .catalog-block__link на 230px фикс ширины (desktop default).
     * На мобиле кнопка может вылезать за карточку — фиксируем ширину под
     * карточку с симметричным запасом. */
    body .catalog-block__link.button-link-mobil,
    body .wrapp-catalog-block .catalog-block__link {
        width: auto !important;
        max-width: calc(100% - 40px) !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
}

/* Узкая мобилка (≤480): чуть плотнее gap, кнопка с меньшим запасом.
 * Высоту карточки 3:2 задаёт padding-hack из блока ≤1199 выше (padding-% сам
 * масштабируется под ширину) — дублировать aspect-ratio здесь не нужно. */
@media (max-width: 480px) {
    body .catalog-content {
        gap: 14px;
    }

    body .catalog-block__link.button-link-mobil,
    body .wrapp-catalog-block .catalog-block__link {
        max-width: calc(100% - 24px) !important;
    }
}