/*
 * Journal-блоки на главной (секция .journal): flex → CSS Grid.
 *
 * Парент держит .journal-row на flexbox с фиксированной шириной .journal-block
 * через calc()/max-width. На промежуточных вьюпортах (узкий desktop, планшет,
 * мобилка в landscape) карточки не выравниваются по ширине контейнера —
 * остаются «дыры» по бокам, последняя карточка случайно встаёт одна в ряд.
 *
 * Заменяем на CSS Grid с явными breakpoints и aspect-ratio. Поведение:
 *   >= 1200px: 3 колонки + последняя карточка во всю ширину (низкий баннер)
 *   600-1199:  2 колонки, портретные карточки
 *   <  600px:  2 колонки, портретные карточки (плотнее gap)
 *
 * aspect-ratio фиксирует портретные пропорции 3:4 независимо от вьюпорта —
 * это убирает зависимость от min-height/max-height из парента и card-grid-fixes,
 * картинки всегда выглядят одинаково.
 *
 * Загружается НЕ-deferred: журнал идёт сразу под hero, defer даёт CLS.
 */

.journal-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* отменяем парент flex */
    flex-wrap: initial;
    justify-content: initial;
}

.journal-block {
    /* Снимаем фиксированные ширины из парента (.journal-block, медиа-правила) */
    width: auto;
    max-width: none;
    min-height: 0;
    aspect-ratio: 3 / 4;
}

/* Десктоп: последняя карточка («Комплектующие») — широкий баннер во всю ширину */
@media (min-width: 1200px) {
    .journal-block:last-child {
        grid-column: 1 / -1;
        width: auto;
        max-width: none;
        aspect-ratio: 4 / 1;
        min-height: 0;
    }
}

/* Планшет и мобилка: 2 колонки, last-child становится обычной портретной карточкой.
 * Пропорции 3:2 (высота:ширина) — как у catalog-block, единый стиль карточек. */
@media (max-width: 1199px) {
    .journal-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .journal-block,
    .journal-block:last-child {
        width: auto;
        max-width: none;
        grid-column: auto;
        aspect-ratio: 2 / 3;
        min-height: 0;
    }

    /* Градиент снизу для контраста белого title на любой фотографии —
     * по аналогии с .wrapp-catalog-block в паренте (style.css:2278). */
    .wrapp-journal-title {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 50%,
            rgba(0, 0, 0, 0.75) 100%
        );
    }
}

/* Узкая мобилка: уменьшаем gap, чтобы карточки не были слишком узкими */
@media (max-width: 480px) {
    .journal-row {
        gap: 10px;
    }
}

/* ─── Контент внутри карточки (.wrapp-journal-title + .journal-block__link) ──
 * Парент держит .wrapp-journal-title с min-height: 360px на <=480 — это
 * растягивало обёртку за пределы карточки aspect-ratio 3/4 (~213px при 160px
 * ширины), кнопка визуально вылетала вниз поверх соседнего ряда.
 *
 * Парент также держит .journal-block__link с width: 230px (desktop) и
 * white-space: nowrap (через .button-orange) — текст «Перейти в каталог»
 * вылазил за карточку на узких мобилках.
 *
 * Фикс: snap wrapp по высоте карточки, кнопка вписывается с переносом текста.
 */
@media (max-width: 1199px) {
    .wrapp-journal-title {
        min-height: 0;
        padding: 20px 14px;
        gap: 12px;
    }

    .journal-block__title {
        /* !important бьёт custom-css.css:526 (26px !important на <=522px).
         * overflow-wrap: anywhere для «Комплектующие» — длинное слово
         * без естественного переноса упиралось в правый край карточки. */
        font-size: 22px !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .journal-block__link {
        width: auto;
        max-width: 100%;
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 0 auto;
        box-sizing: border-box;
        /* Парент .button-orange: padding 16px 40px + white-space: nowrap.
         * Текст «Перейти в каталог» не помещается в карточку 165-230px. */
        padding: 12px 16px;
        font-size: 14px;
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .wrapp-journal-title {
        padding: 14px 10px;
        gap: 8px;
    }

    .journal-block__title {
        font-size: 16px !important;
        line-height: 1.1 !important;
    }

    .journal-block__link {
        font-size: 12px;
        padding: 10px 8px;
    }
}