/* =========================================================
   📄 /styles_core/front/catalog/result_card.css
   ТОПО / Единая оболочка карточек выдачи

   Используется во всех основных выдачах:
   - Топонимы;
   - Словарь / Статьи;
   - Словарь / Слова.

   ВАЖНО:
   дизайн поверхности карточки, hover и active меняется здесь один раз.
   Внутреннее содержимое карточек остаётся профильным для каждого раздела.
========================================================= */

@import url("/styles_core/front/catalog/appellatives.css");

.catalog-v2{
    --result-card-bg:rgba(255,252,247,.78);
    --result-card-bg-hover:#fffaf4;
    --result-card-bg-active:#fffaf5;

    --result-card-border:rgba(92,67,38,.10);
    --result-card-border-hover:rgba(var(--color-primary-rgb),.22);
    --result-card-border-active:rgba(var(--color-primary-rgb),.30);
    --result-card-border-active-hover:rgba(var(--color-primary-rgb),.36);

    --result-card-accent:var(--color-primary);
    --result-card-radius:12px;

    --result-card-shadow:0 3px 12px rgba(61,41,3,.025);
    --result-card-shadow-hover:0 6px 18px rgba(61,41,3,.055);
    --result-card-shadow-active:
        inset 2px 0 0 var(--result-card-accent),
        0 4px 14px rgba(61,41,3,.035);
    --result-card-shadow-active-hover:
        inset 2px 0 0 var(--result-card-accent),
        0 5px 16px rgba(61,41,3,.045);
}

/*
 * Двойной .catalog-v2 намеренный: этот файл является канонической оболочкой
 * карточки и должен иметь приоритет над локальными стилями разделов.
 */
.catalog-v2.catalog-v2 .geo-result{
    position:relative;
    margin:0;

    /*
     * Шапка на десктопе/мобиле — position:sticky (topo_header.css /
     * topo_header_mobile.css) и физически перекрывает верх страницы.
     * Без scroll-margin-top карточка, к которой ведёт прямая ссылка на
     * объект (см. object_passport/preview.js), scrollIntoView уводил
     * ровно под неё — визуально казалось, что прокрутка промахнулась
     * мимо карточки. Тот же приём и то же значение отступа, что и у
     * .object-preview / .catalog-object-side чуть выше на этой же
     * странице (passport.css) — там тот же --header-height уже учтён.
     */
    scroll-margin-top:calc(var(--header-height, 86px) + var(--space-4, 16px));

    background:var(--result-card-bg);
    border:1px solid var(--result-card-border);
    border-radius:var(--result-card-radius);

    box-shadow:var(--result-card-shadow);
    overflow:hidden;

    transition:
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.catalog-v2.catalog-v2 .geo-result:hover{
    background:var(--result-card-bg-hover);
    border-color:var(--result-card-border-hover);
    box-shadow:var(--result-card-shadow-hover);
}

.catalog-v2.catalog-v2 .geo-result.is-active{
    background:var(--result-card-bg-active);
    border-color:var(--result-card-border-active);
    box-shadow:var(--result-card-shadow-active);
}

.catalog-v2.catalog-v2 .geo-result.is-active:hover{
    background:var(--result-card-bg-active);
    border-color:var(--result-card-border-active-hover);
    box-shadow:var(--result-card-shadow-active-hover);
}

/*
 * Прямая ссылка на запись (front/js/topo_focus_list.js): запись первой и
 * выделена рамкой; остальные найденные по её названию приглушены, пока
 * человек не начнёт работать со списком.
 */
.catalog-v2.catalog-v2 .is-focus{
    border-color:rgba(var(--color-primary-rgb),.55);
    box-shadow:
        inset 3px 0 0 var(--result-card-accent),
        0 0 0 2px rgba(var(--color-primary-rgb),.18),
        0 6px 18px rgba(61,41,3,.07);
}

.catalog-v2 .has-focus-dim .geo-result:not(.is-focus){
    opacity:.48;
    filter:saturate(.55);
    transition:opacity .2s ease, filter .2s ease;
}

.catalog-v2 .has-focus-dim .geo-result:not(.is-focus):hover{
    opacity:.85;
    filter:none;
}

.catalog-v2.catalog-v2 .geo-result.is-active .geo-result-name,
.catalog-v2.catalog-v2 .geo-result.is-active .dictionary-article-card__name{
    color:var(--color-fg);
}