/* =========================================================
   📄 /styles_core/front/catalog/object_facts.css
   ТОПО / Каталог — факты объекта в правом паспорте

   Дизайн по эскизу:
   - ключевые метрики заметные и спокойные;
   - вторичные факты идут строками без субкарточек;
   - больше воздуха между смысловыми уровнями;
========================================================= */

/* Compact elevation / ridge pair in relief and water passports. */
.object-facts__metrics--relief .object-facts__metric,
.object-facts .object-facts__metric--height,
.object-facts .object-facts__metric--ridge{
    display:flex;align-items:center;justify-content:center;gap:8px;text-align:left;
}
.object-facts__relief-icon{width:30px;height:22px;flex:0 0 30px;color:var(--color-primary, #9a5a2c)}
.object-facts__relief-content{min-width:0}
.object-facts__metric--ridge .object-facts__metric-label{margin:0 0 3px}
.object-facts__ridge-value{font-size:.88rem;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.object-facts__ridge-value + .object-facts__ridge-value{margin-top:4px}
.object-facts__ridge-link{color:var(--color-link, #267baf);text-decoration:none}
.object-facts__ridge-link:hover,.object-facts__ridge-link:focus-visible{text-decoration:underline}
.object-facts__footnote-ref a{color:inherit;text-decoration:none}
.object-facts__footnote-ref a:hover,.object-facts__footnote-ref a:focus-visible{text-decoration:underline}
[data-object-source-number]{scroll-margin:16px}
[data-object-source-number]:focus{outline:1px solid var(--color-primary, #9a5a2c);outline-offset:3px}
@media(max-width:380px){
    .object-facts__metrics--relief .object-facts__metric{gap:4px;padding-left:5px;padding-right:5px}
    .object-facts__relief-icon{width:22px;flex-basis:22px}
}

/* =========================================================
   BASE
========================================================= */

/*
 * .object-facts — всегда корневой узел блока данных, у любого типа
 * объекта (river.php/lake.php/settlement.php/default.php/aimak.php
 * рендерят его первым тегом) — поэтому отступ перед ним задаётся тут
 * один раз и одинаково работает на всех карточках, а не только на той,
 * на которой его проверяли. Это третья, самая широкая ступень ритма
 * паспорта: имя+алт.имя вплотную (см. gap:0 у .object-preview__head) →
 * заметный, но меньший отступ перед «тип · район» (margin-top:8px у
 * .object-preview__meta) → ещё более широкий отступ перед данными —
 * иначе «тип · район» и первый факт визуально сливаются в одну кашу,
 * хотя это два разных смысловых блока.
 */
.object-facts{
    margin-top:calc(16px * var(--density));

    color:var(--color-fg);
    font-size:.88rem;
    line-height:1.38;
}

.object-facts__section,
.object-facts__section--type-card{
    display:flex;
    flex-direction:column;
    gap:0;

    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
}

.object-facts__type-title{
    display:none;
}

/* =========================================================
   METRICS
========================================================= */

.object-facts__metrics{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));

    margin:0;
    padding:calc(12px * var(--density)) 0 calc(11px * var(--density));

    border-bottom:1px solid rgba(92,67,38,.10);
}

.object-facts__metrics--two{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.object-facts__metrics--four{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    row-gap:12px;
}
.object-facts__metrics--four .object-facts__metric:nth-child(even){border-right:0}

/* Единственная заполненная метрика — на всю ширину строки, а не в
   левой трети сетки на 3 колонки (см. objectPassportFactsMetricsClass). */
.object-facts__metrics--one{
    grid-template-columns:1fr;
}

.object-facts__metric{
    min-width:0;
    padding:0 8px;

    text-align:center;
    background:transparent;
    border:0;
    border-radius:0;
}

.object-facts__metric:first-child{
    padding-left:0;
}

.object-facts__metric:last-child{
    padding-right:0;
}

.object-facts__metric:not(:last-child){
    border-right:1px solid rgba(92,67,38,.10);
}

.object-facts__metric-value{
    display:block;

    color:#2a241e;
    font-size:calc(1.08rem * var(--density));
    font-weight:900;
    line-height:1.02;
    letter-spacing:-.015em;
    white-space:nowrap;
}

/* Цифра-сноска на факт со своим источником — ведёт в общий список
   «Источники» в самом низу паспорта (см. object-toponymics__evidence),
   не в отдельную строку «Источник: ...» под каждой субкарточкой.
   Тот же приём и тот же цвет, что у object-toponymics__relation sup. */
.object-facts__footnote-ref{
    margin-left:1px;
    font-size:.62em;
    font-weight:800;
    color:var(--color-primary);
    /*
     * Было vertical-align:super — ключевое слово браузер поднимает
     * довольно резко, и на жирных крупных цифрах (font-weight:900,
     * см. .object-facts__metric-value) циферка-сноска выглядела
     * оторванной, зависшей над числом с заметным просветом. Явный
     * небольшой сдвиг вместо этого держит её у плеча числа, ближе к
     * привычному «степенному» виду.
     * Но 0.15em оказалось мало: цифра стояла почти на строке, как
     * нижний индекс. 0.6em (от её собственного кегля .62em) поднимает
     * верх сноски к верху цифр числа — обычный надстрочный индекс.
     * line-height:0 — чтобы подъём не раздвигал строку.
     */
    vertical-align:0.6em;
    line-height:0;
    white-space:nowrap;
}

.object-facts__metric-label{
    display:block;
    margin-top:calc(3px * var(--density));

    color:#817568;
    font-size:calc(.62rem * var(--density));
    font-weight:650;
    line-height:1.18;
}

/* =========================================================
   FACT ROWS
========================================================= */

.object-facts__block,
.object-facts__row{
    display:grid;
    grid-template-columns:minmax(72px, 88px) minmax(0, 1fr);
    gap:calc(12px * var(--density));
    align-items:start;

    /*
     * Верхний отступ (12px) вместо симметричных 9px — чтобы первый
     * факт стоял на том же расстоянии от строки «тип · район», что и
     * у объектов, где первым идёт блок метрик (.object-facts__metrics,
     * padding-top:12px). Иначе один и тот же паспорт «прыгал» по
     * высоте в зависимости от того, какой факт показан первым.
     */
    padding:calc(12px * var(--density)) 0 calc(9px * var(--density));

    border-bottom:1px solid rgba(92,67,38,.085);
}

.object-facts__title,
.object-facts__label{
    margin:0;
    padding-top:1px;

    color:#817568;
    font-size:calc(.70rem * var(--density));
    font-weight:750;
    line-height:1.35;
}

.object-facts__text,
.object-facts__value{
    min-width:0;

    color:#433a32;
    font-size:calc(.80rem * var(--density));
    font-weight:500;
    line-height:1.38;
}

.object-facts__text--muted{
    color:#8c8175;
}

.object-facts__grid{
    display:flex;
    flex-direction:column;
    gap:0;
}

/* =========================================================
   LISTS
========================================================= */

.object-facts__list{
    display:flex;
    flex-direction:column;
    gap:0;
}

.object-facts__item{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    gap:8px;
    align-items:start;

    padding:5px 0;
    border-bottom:1px solid rgba(92,67,38,.075);
}

.object-facts__item:last-child{
    border-bottom:0;
}

.object-facts__item-km{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:42px;
    padding:2px 5px;

    border-radius:999px;
    background:#f8f0e5;
    color:#817568;

    font-size:.64rem;
    font-weight:850;
    line-height:1.2;
    white-space:nowrap;
}

.object-facts__item-name{
    min-width:0;
    color:#433a32;
    font-size:.79rem;
    line-height:1.32;
}

/* =========================================================
   SOURCE / EMPTY
========================================================= */

.object-facts__source{
    margin-top:10px;
    padding:10px 0 0;

    border:0;
    border-top:1px solid rgba(92,67,38,.09);
    border-radius:0;
    background:transparent;
}

.object-facts__source-title{
    margin:0 0 6px;
    color:#5f4323;
    font-size:.76rem;
    font-weight:900;
    line-height:1.2;
}

.object-facts__source-text{
    margin:0;
    color:#433a32;
    font-size:.80rem;
    line-height:1.45;
}

.object-facts__source-meta{
    margin-top:7px;
    color:#8a7660;
    font-size:.69rem;
    font-style:italic;
    line-height:1.35;
}

.object-facts__empty{
    padding:8px 0;

    border:0;
    border-bottom:1px dashed rgba(92,67,38,.12);
    border-radius:0;

    background:transparent;
    color:#9a8a77;

    font-size:.79rem;
    line-height:1.35;
}

.object-facts--loading .object-facts__empty,
.object-facts--error .object-facts__empty{
    padding:8px 10px;
    border:1px dashed rgba(92,67,38,.14);
    border-radius:8px;
    background:#fffaf4;
}

/* =========================================================
   RIGHT COLUMN SAFETY
========================================================= */

.catalog-object-side .object-facts__metrics{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.catalog-object-side .object-facts__metrics--two{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.catalog-object-side .object-facts__metrics--one{
    grid-template-columns:1fr;
}

.catalog-object-side .object-facts__metric-value{
    font-size:calc(1.04rem * var(--density));
}

.catalog-object-side .object-facts__metric-label{
    font-size:calc(.60rem * var(--density));
}

/* =========================================================
   SHARE INFOGRAPHICS
========================================================= */

.object-facts__shares{
    display:flex;
    flex-direction:column;
    gap:8px;

    padding:10px 0 7px;
    border-bottom:1px solid rgba(92,67,38,.085);
}

.object-facts__share{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.object-facts__share-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:8px;
}

.object-facts__share-label{
    color:#817568;
    font-size:.69rem;
    font-weight:750;
    line-height:1.25;
}

.object-facts__share-value{
    color:#40382f;
    font-size:.79rem;
    font-weight:900;
    line-height:1.2;
    white-space:nowrap;
}

.object-facts__share-track{
    position:relative;
    overflow:hidden;

    width:100%;
    height:5px;

    border-radius:999px;
    background:rgba(92,67,38,.10);
}

.object-facts__share-fill{
    display:block;
    height:100%;

    border-radius:999px;
    background:#8eaa6b;
}

/* =========================================================
   ADAPTIVE
========================================================= */

@media (max-width:1100px){
    .object-facts__metrics{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .object-facts__metrics--two{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .object-facts__metrics--one{
        grid-template-columns:1fr;
    }
}

@media (max-width:700px){
    /*
     * Раньше тут .object-facts__metrics/-metric/-metric-label
     * перестраивались в горизонтальный ряд (значение слева, подпись
     * справа, space-between) — тот же паспорт, что на десктопе
     * показывает "362² [перенос строки] население" (значение сверху,
     * подпись под ним по центру), на мобиле превращался в "362²
     * ... население" одной строкой. Сноска-цифра при этом визуально
     * лепилась к подписи, а не к своему числу. Метрики теперь везде
     * (десктоп и мобиль) — одна и та же вертикальная раскладка из
     * базовых правил выше (.object-facts__metric-value/-metric-label),
     * ничего мобильного тут больше не переопределяем.
     */
    .object-facts__block,
    .object-facts__row{
        grid-template-columns:1fr;
        gap:3px;
    }
}




/* /styles_core/front/catalog/object_facts.css — единая схема: значение, подпись. */
.object-facts__metrics--relief .object-facts__metric,
.object-facts .object-facts__metric--height,
.object-facts .object-facts__metric--ridge{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center;
}
.object-facts__metric-key,
.object-facts__relief-content{display:contents}
.object-facts__relief-icon{display:none}
.object-facts__metrics--relief .object-facts__metric-value,
.object-facts__ridge-value{order:0}
.object-facts__metric-key .object-facts__metric-label,
.object-facts__metric--ridge .object-facts__metric-label{
    order:1;margin:calc(3px * var(--density)) 0 0;
}
[data-object-toponymics-footnotes] .object-toponymics__evidence-item{
    white-space:normal;overflow-wrap:anywhere;
}

/* /styles_core/front/catalog/object_facts.css — высота и имя вершины рядом. */
.object-facts .object-facts__summit-value{
    display:flex;align-items:baseline;justify-content:center;gap:4px;
    flex-wrap:nowrap;white-space:nowrap;
}
.object-facts__summit-value > span{white-space:nowrap}
.object-facts__summit-value .object-facts__footnote-ref{align-self:flex-start;margin-left:-3px}

/* /styles_core/front/catalog/object_facts.css — одинаковые цифры, короткие сноски. */
.object-facts--ridge .object-facts__metric-value{font-size:calc(1.04rem * var(--density))}
.object-facts__summit-value .object-facts__ridge-link{font:inherit}
[data-object-toponymics-footnotes] .object-toponymics__evidence-item{
    white-space:normal;font-size:.62rem;line-height:1.5;overflow:visible;overflow-wrap:anywhere;
}

/* /styles_core/front/catalog/object_facts.css — номера сносок внутри строки. */
[data-object-toponymics-footnotes] .object-toponymics__evidence-item[data-object-source-number]{
    list-style:none;
}
[data-object-toponymics-footnotes] .object-toponymics__evidence-item[data-object-source-number]::before{
    content:attr(data-object-source-number) ". ";
    display:inline;color:inherit;
}

/* /styles_core/front/catalog/object_facts.css — сноски без прокрутки, по левому краю. */
[data-object-toponymics-footnotes]{text-align:left}
[data-object-toponymics-footnotes] .object-toponymics__evidence-title{margin-left:0}
[data-object-toponymics-footnotes] .object-toponymics__evidence{margin:0;padding:0}
[data-object-toponymics-footnotes] .object-toponymics__evidence-item{
    white-space:normal;overflow:visible;overflow-wrap:anywhere;text-align:left;
}