/* =========================================================
   📄 /styles_core/front/blocks/page_hero.css
   ТОПО / Единый заголовок раздела (кикер + H1 + лид + табло)

   Общий для каталога/словаря/свидетельств — тот же приём компоновки,
   что у гостевых ворот библиотеки (library.css: .library-gate), но
   с терракотовым акцентом сайта вместо тил-бирюзового --color-lib
   (тот цвет — опознавательный для раздела «Библиотека», здесь он
   был бы не к месту).
========================================================= */

.page-hero{
    position:relative;

    margin:0 0 18px;
    padding:1.5rem 1.9rem;

    border:1px solid var(--color-border, #d9d7cf);
    border-radius:var(--radius-lg, 1rem);
    background:var(--color-surface, #fff);
    box-shadow:var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));

    transition:padding .18s ease;
}

/*
 * Рейка «поделиться» + «свернуть» — третья колонка грида
 * .page-hero__main, а не отдельный absolute-блок поверх контента: при
 * абсолютном позиционировании (top/right от угла карточки) рейка не
 * знает реальной ширины текста и табло и на длинном заголовке или
 * широком табло наезжала на цифры. Так — обычный грид-элемент, левая
 * граница (border-left) та же, что и у .page-hero__stats-col, для
 * единообразия обеих разделительных линий.
 */
.page-hero__icon-rail{
    display:flex;
    flex-direction:column;
    align-items:center;
    /*
     * space-between, не center: кружки прижаты к верху и низу рейки —
     * «поделиться» вровень с началом табло, «свернуть» вровень с его
     * концом. При center оба кружка сбивались в кучку посередине
     * высокой рейки, а верх и низ линии-разделителя оставались пустыми
     * и линия читалась как случайный обрывок, а не как разделитель.
     */
    justify-content:space-between;
    align-self:stretch;

    padding-left:1.6rem;
    border-left:1px solid var(--color-border-subtle, #ece7dc);
}

.page-hero__share,
.page-hero__collapse{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;

    width:2rem;
    height:2rem;
    padding:0;

    --topo-icon-size:14px;

    border:1px solid var(--color-border, #d9d7cf);
    border-radius:50%;
    background:var(--color-bg, #F7EFE4);
    color:var(--color-muted, #6f6a63);

    cursor:pointer;
    transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.page-hero__share:hover,
.page-hero__collapse:hover{
    color:var(--color-fg, #3D2903);
    border-color:var(--color-muted, #6f6a63);
}
/*
 * Вращение — на обёртке иконки (.topo-icon, см. topoIconRaw() в
 * interface_icons.php), не на самом svg: значок теперь приходит из
 * общей библиотеки Орды (topoIcon('page_hero_collapse', ...)) и может
 * быть как SVG, так и запасным символом — оборачивает и то, и другое
 * один и тот же span, крутим именно его.
 */
.page-hero__collapse .topo-icon{
    transition:transform .18s ease;
}

/*
 * «Скопировано» — тот же приём, что у icon-actions__btn.is-copied
 * (expand_modal.css): галочка поверх иконки заливкой --color-accent,
 * а не подмена textContent (там значок ставится один раз из Орды и
 * не должен затираться). is-copied сюда добавляет сам topo_share.js —
 * он генерический, класс кнопки ему не важен.
 */
.page-hero__share.is-copied{
    background:var(--color-accent, #6baa75);
    border-color:var(--color-accent, #6baa75);
    color:#fff;
}
.page-hero__share.is-copied svg{
    visibility:hidden;
}
.page-hero__share.is-copied::after{
    content:'✓';
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.85rem;
    font-weight:800;
}

.page-hero__main{
    display:grid;
    grid-template-columns:1.15fr 1fr auto;
    gap:1.6rem;
    align-items:center;
}

@media (max-width:960px){
    .page-hero__main{
        grid-template-columns:1fr;
    }

    /*
     * В один столбик — рейке вертикальная линия слева уже некуда
     * прилегать (над ней в потоке текст, а не табло вплотную), меняем
     * на горизонтальную сверху и раскладываем кружки в ряд, а не
     * столбиком, как между кнопками фильтров/паспорта на тех же
     * узких экранах.
     */
    .page-hero__icon-rail{
        flex-direction:row;
        justify-content:flex-end;
        /*
         * gap не задан в десктопной .page-hero__icon-rail — там кружки
         * разъезжаются по justify-content:space-between на всю высоту
         * рейки, gap ей ни к чему. В ряд (здесь, justify-content:
         * flex-end) без gap оба кружка сводит почти вплотную; в
         * свёрнутом виде у рейки свой gap:.5rem (см. .is-collapsed
         * ниже) — тот же ставим и тут, чтобы промежуток не менялся
         * при сворачивании/развороте.
         */
        gap:.5rem;
        padding-left:0;
        padding-top:1rem;
        border-left:0;
        border-top:1px solid var(--color-border-subtle, #ece7dc);
    }

}

.page-hero__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.4rem;

    margin-bottom:.45rem;

    color:var(--color-primary);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.page-hero__dot{
    width:6px;
    height:6px;
    flex:0 0 auto;
    border-radius:50%;
    background:var(--color-primary);
}

.page-hero__title{
    margin:0;
    /* Тот же вид, когда это не h1, а div (страница конкретной записи —
       H1 там название в паспорте): межбуквенный интервал h1 из typography.css. */
    letter-spacing:-0.01em;
    /*
     * 20ch — не запас места (padding отсюда не помогал: колонка
     * заголовка достаточно широкая, чтобы «Словарь Алтайских
     * названий» всё равно уместился в одну строку даже с отступом).
     * Ограничение по числу знаков — двустрочный заголовок читается
     * весомее, чем длинная одна строка на всю колонку; 20ch держит
     * в двух строках все текущие заголовки разделов и не трогает
     * короткие («Топонимы Алтая» по-прежнему в одну).
     */
    max-width:20ch;

    font-family:var(--font-display, inherit);
    font-weight:700;
    font-size:clamp(1.5rem, 2.6vw, 2.1rem);
    line-height:1.1;
    color:var(--color-fg, #3D2903);
}

.page-hero__lead{
    max-width:56ch;
    margin:.6rem 0 0;

    color:var(--color-muted, #6f6a63);
    font-size:.88rem;
    line-height:1.5;
}

.page-hero__stats-col{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-left:1.6rem;
    border-left:1px solid var(--color-border-subtle, #ece7dc);
}

/*
 * border-left/padding-left выше рассчитаны на десктопную сетку в 3
 * колонки, где слева от табло стоит текст и черта его от текста
 * отделяет. В стопке (≤960px, развёрнутый вид — не только
 * .is-collapsed, для него свой сброс есть ниже) текста слева уже нет,
 * а черта с отступом остаются чистым наследством от десктопной
 * раскладки — ничего не разделяют, просто съедают место слева у
 * каждой строки табло.
 *
 * ВАЖНО: это правило обязано стоять ПОСЛЕ базового .page-hero__stats-col
 * выше, не до него (как было раньше, в общем @media(max-width:960px)
 * у .page-hero__main) — при равной специфичности CSS отдаёт приоритет
 * тому, что физически позже в файле, независимо от того, что одно из
 * правил в медиа-запросе, а другое нет. Стоя раньше базового, этот
 * сброс молча перебивался им и не действовал ни на одной ширине.
 */
@media (max-width:960px){
    .page-hero__stats-col{
        padding-left:0;
        border-left:0;
    }
}

/* Табло переиспользуется как есть (styles_core/front/catalog/stats_board.css) —
   здесь только даём его элементам переноситься на новую строку, если места
   в узкой правой колонке не хватит, вместо горизонтальной прокрутки. Эти
   правила касаются только .page-hero__stats-row (свёрнутый вид) — саму
   строку-табло не меняем, см. комментарий у .page-hero__stats-row ниже. */
.page-hero__stats-col .stats-board{
    flex-wrap:wrap;
    gap:8px 16px;
}
.page-hero__stats-col .stats-board__title{
    width:100%;
    margin-bottom:2px;
}
.page-hero__stats-col .stats-board__item + .stats-board__item{
    margin-left:0;
}

/*
 * Два представления одних и тех же цифр, оба уже в разметке — переключение
 * чисто CSS-видимостью, без перерисовки при сворачивании.
 */

/* Развёрнуто: столбик с иконкой-чипом слева, значением справа. */
.page-hero__stats-vertical{
    display:flex;
    flex-direction:column;
}

.stats-board-vertical__title{
    margin:0 0 .3rem;

    color:var(--color-muted, #6f6a63);
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

/* Строки уменьшены ~18% по высоте (padding .42rem→.33rem, иконка
   26px→22px — она была самым высоким элементом строки, именно она
   и держала общую высоту). */
.stats-board-vertical__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.6rem;

    padding:.33rem 0;
    border-top:1px solid var(--color-border, #d9d7cf);

    font-size:.84rem;
    color:var(--color-muted, #6f6a63);
}
.stats-board-vertical__row:first-of-type{
    border-top:none;
}

.stats-board-vertical__label{
    display:flex;
    align-items:center;
    gap:.6rem;
}

.stats-board-vertical__icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;

    width:22px;
    height:22px;
    border-radius:50%;

    background:var(--color-bg, #F7EFE4);
    font-size:.8rem;
}

.stats-board-vertical__value{
    flex:0 0 auto;

    color:var(--color-fg, #3D2903);
    font-size:1.05rem;
    font-variant-numeric:tabular-nums;
}

/*
 * Свёрнуто: та же строка-табло, что была на сайте до появления этого
 * компонента (.stats-board, styles_core/front/catalog/stats_board.css) —
 * не переработана, только показывается/прячется через .is-collapsed
 * вместо того, чтобы быть единственным видом табло.
 */
.page-hero__stats-row{
    display:none;
}

.page-hero.is-collapsed .page-hero__stats-vertical{
    display:none;
}
.page-hero.is-collapsed .page-hero__stats-row{
    display:block;
}

/* =========================================================
   СВЁРНУТО
   Текст прячется, табло растягивается на всю ширину — та же полоса,
   что была раньше, просто теперь это состояние, а не единственный вид.
========================================================= */

.page-hero.is-collapsed{
    padding:.85rem 1.9rem;
}

/*
 * Свёрнуто — тонкая полоса, двум кружкам в столбик там тесно: рейка
 * ложится на бок, кружки в ряд, а не друг над другом. Делитель
 * убирается — вертикальная линия в горизонтальной полосе уже не
 * разделитель ни от чего, верха/низа у рейки тут не осталось.
 */
.page-hero.is-collapsed .page-hero__icon-rail{
    flex-direction:row;
    gap:.5rem;
    padding-left:0;
    border-left:0;

    /*
     * padding-top/border-top тоже сбрасываем — правило из
     * @media(max-width:960px) выше (padding-top:1rem + border-top)
     * рассчитано на РАЗВЁРНУТЫЙ вид, где рейка стоит горизонтальной
     * полосой ПОД текстом (два блока друг под другом, нужен отступ и
     * разделительная линия сверху). В свёрнутом виде .page-hero__main
     * снова становится двумя колонками в ряд (см. ниже), рейка — уже
     * не «под», а «рядом» с меткой раздела: без сброса эти двое
     * молча наследовались через специфичность и сдвигали рейку вниз
     * относительно метки — на мобиле было заметно, что верхний
     * отступ у неё больше нижнего и всё съезжает по вертикали.
     */
    padding-top:0;
    border-top:0;
}

.page-hero.is-collapsed .page-hero__collapse .topo-icon{
    transform:rotate(180deg);
}

.page-hero.is-collapsed .page-hero__main{
    grid-template-columns:1fr auto;
}

.page-hero.is-collapsed .page-hero__text{
    display:none;
}

.page-hero.is-collapsed .page-hero__stats-col{
    padding-left:0;
    border-left:0;
}

/*
 * На узких экранах строка-табло (5 иконок в ряд) физически не влезает
 * без переноса, а хвостовой пункт (и всплывающая подсказка над ним)
 * перекрывал фильтры под шапкой — сами цифры на мобиле в свёрнутом
 * виде прячем. Но подпись раздела («Каталог», «Словарь»...) оставляем:
 * без неё свёрнутая шапка на мобиле превращалась в пустую карточку с
 * двумя кружками справа и ничем слева — было решительно непонятно, на
 * каком разделе сайта человек находится, пока не долистаешь до первой
 * карточки списка. Короткая метка (stats-board__title--short, без
 * «в цифрах» — не влезает и не нужно) занимает тот же пустой угол, той
 * же высотой строки, что и раньше пустовала.
 */
@media (max-width:700px){
    .page-hero.is-collapsed .page-hero__stats-row .stats-board__list{
        display:none;
    }

    .page-hero.is-collapsed .page-hero__stats-row .stats-board{
        min-height:0;
        margin:0;
    }

    .page-hero.is-collapsed .page-hero__stats-row .stats-board__title--full{
        display:none;
    }

    .page-hero.is-collapsed .page-hero__stats-row .stats-board__title--short{
        display:inline-flex;
        align-items:center;
        gap:.4rem;

        color:var(--color-primary);
    }

    .page-hero.is-collapsed .page-hero__stats-row .stats-board__title--short::before{
        content:"";
        flex:0 0 auto;

        width:6px;
        height:6px;
        border-radius:50%;
        background:var(--color-primary);
    }
}