/*
 * Card arrow badge — круглая стрелка в правом нижнем углу карточек.
 *
 * Визуальный маркер «нажми меня». Сами карточки уже полностью кликабельны
 * (anchor оборачивает контент), поэтому badge чисто декоративный — клик
 * проходит сквозь него на родительскую ссылку (pointer-events: none).
 *
 * Применяется на:
 *   .journal-block  — 4 категорийные карточки в секции .journal на главной
 *   .catalog-block  — карточки товаров в категории (taxonomy-cat-product)
 *                     и на странице каталога (catalog-page, archive)
 *   .article-block  — карточки журнала/блога на главной и в /blog/
 *
 * Реализация — pure CSS, inline SVG через data: URL, без правок шаблонов.
 */

.journal-block,
.catalog-block,
.article-block__img {
    position: relative;
    overflow: hidden;
}

/*
 * Лёгкий zoom фона на hover — параллакс-эффект, 10% увеличение.
 * Картинка зажимается через overflow: hidden на карточке (выше),
 * чтобы скейл не вылезал за скруглённые углы.
 *
 * Длительность 0.6s — медленнее badge'а (0.4s), чтобы стрелка реагировала
 * быстрее, а фон «дышал» отдельным слоем — это и даёт параллакс-ощущение.
 */
.journal-block__bg,
.catalog-block__bg,
.article-block__img img {
    transition: transform 0.6s ease;
}

@media (hover: hover) {
    .journal-block:hover .journal-block__bg,
    .catalog-block:hover .catalog-block__bg,
    .article-block:hover .article-block__img img {
        transform: scale(1.1);
    }
}

.journal-block::after,
.catalog-block::after,
.article-block__img::after {
    content: '';
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    z-index: 2;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.35s ease,
        box-shadow 0.35s ease,
        background-size 0.3s ease;
}

/* Hover: стрелка тянется вправо, badge подсвечивается фирменным золотом,
 * чуть увеличивается, тень растёт. Cubic-bezier с лёгким overshoot —
 * стрелка как будто «защёлкивается» в новое положение. Только pointer-устройства. */
@media (hover: hover) {
    .journal-block:hover::after,
    .catalog-block:hover::after,
    .article-block:hover .article-block__img::after {
        transform: translateX(8px) scale(1.06);
        background-color: #c7b388;
        background-size: 22px 22px;
        box-shadow: 0 6px 18px rgba(199, 179, 136, 0.55);
    }
}

/*
 * Парент-стиль (themes/lc-blank-test/style.css:2305-2322 и 1480-1499) на hover
 * .catalog-block / .journal-block поднимает title на translateY, чтобы освободить
 * место для кнопки, слайдящейся снизу. Кнопки мы скрываем — без этого override
 * текст «улетал в космос» на пустое место.
 *
 * Возвращаем title в исходную позицию. Стрелка-badge берёт на себя
 * всю hover-обратную связь.
 */
.catalog-block:hover .catalog-block__title,
.catalog-block:hover .catalog-block__text,
.journal-block:hover .journal-block__title {
    transform: none !important;
}

/* Узкие экраны — чуть меньше badge, та же логика общей нижней линии */
@media (max-width: 600px) {
    .journal-block::after,
    .catalog-block::after,
    .article-block__img::after {
        width: 38px;
        height: 38px;
        right: 16px;
        bottom: 16px;
        background-size: 17px 17px;
    }
}

/*
 * ─── Layout: title и стрелка на одной нижней линии ───────────────────────
 *
 * Парент держит .wrapp-journal-title и .wrapp-catalog-block как flex column
 * с justify-content: flex-end, плюс центрирует title (text-align: center,
 * align-items: center у catalog-wrappr). При появлении стрелки в правом
 * нижнем углу возникали две проблемы:
 *   1. Огромный title в центре карточки + маленькая стрелка в углу —
 *      «разговор разных людей», не выровнены по вертикали.
 *   2. На мобилке центрированный title упирался в стрелку и обрезался
 *      («Гладкие панел[И]»).
 *
 * Решение: title уходит к левому краю карточки, резервирует справа
 * padding под кружок, стрелка ставится на тот же bottom, что padding
 * обёртки — title-baseline и arrow-baseline совпадают. Read как одна
 * композиция.
 *
 * Применяется только к .journal-block и .catalog-block — у .article-block
 * текст под картинкой (не накладывается), там стрелка и так чисто.
 */
.wrapp-journal-title,
.wrapp-catalog-block {
    align-items: flex-start !important;
    text-align: left !important;
    padding: 24px !important;
}

.journal-block__title,
.catalog-block__title {
    text-align: left !important;
    margin: 0 !important;
    padding-right: 64px;
    /* Парент text использует огромный 32px — на узких карточках это
     * избыточно. Снимаем фикс и даём шрифту дышать до 28px max. */
    line-height: 1.1;
    /* Гарантированная читаемость белого заголовка независимо от фона карточки:
     * у товаров-комплектующих фото сняты на СВЕТЛОМ фоне (профили на белом),
     * и верхние строки многострочного заголовка попадают на прозрачную часть
     * градиента. Лёгкая тень держит текст читаемым в любом случае. */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

@media (max-width: 600px) {
    .wrapp-journal-title,
    .wrapp-catalog-block {
        padding: 16px !important;
    }
    .journal-block__title,
    .catalog-block__title {
        /* 24px (парент) на узкой карточке даёт 2–3 строки и упирается в стрелку.
         * 20px — заголовок компактнее, реже переносится, не наезжает на badge. */
        font-size: 20px !important;
        line-height: 1.15 !important;
        /* badge ≤600: width 38 + right 16 → правый край 54px от края карточки.
         * Резервируем 56px, чтобы последняя строка гарантированно не задевала стрелку. */
        padding-right: 56px;
    }
}

/* Самые узкие телефоны (≤380, напр. iPhone SE / mini): ещё на шаг компактнее. */
@media (max-width: 380px) {
    .journal-block__title,
    .catalog-block__title {
        font-size: 18px !important;
        line-height: 1.15 !important;
    }
}

/*
 * Скрываем парентовые кнопки внутри карточек — их функция теперь у стрелки.
 * Карточки уже полностью обёрнуты в <a>, клик по любой точке ведёт на target.
 * Кнопки дублируют логику и визуально перетягивают внимание со стрелки.
 *
 * Покрываем все варианты:
 *   .catalog-block__link              — кнопка «Подробнее» в карточках каталога
 *   .catalog-block__link.button-orange/.button-link-mobil — её desktop/mobile варианты
 *   .journal-block__link              — кнопка «Перейти в каталог» в журнал-карточках
 *                                        на главной (4 категорийные тайла)
 */
.catalog-block .catalog-block__link,
.catalog-block .catalog-block__link.button-orange,
.catalog-block .catalog-block__link.button-link-mobil,
.journal-block .journal-block__link {
    display: none !important;
}