/* =========================================================
   📄 /styles_core/front/catalog/stats_board.css
   ТОПО / Открытая строка статистики

   Важно:
   - tooltip открывается вниз, рядом со своим показателем;
   - весь stats-board находится выше поисковой панели по z-index,
     поэтому подсказка не прячется за строкой поиска.
========================================================= */

.stats-board{
    position:relative;
    z-index:50;

    display:flex;
    align-items:center;
    gap:22px;

    min-height:30px;
    margin:0 0 12px;
    padding:0;

    overflow:visible;

    border:0;
    background:transparent;
    box-shadow:none;
}

.stats-board__title{
    flex:0 0 auto;

    color:#75654e;

    font-size:11px;
    font-weight:700;
    line-height:1;
    letter-spacing:.075em;
    text-transform:uppercase;
    white-space:nowrap;
}

/* Короткая версия («Каталог» вместо «Каталог в цифрах») — по умолчанию
   скрыта, показывается только в свёрнутой мобильной шапке раздела
   (см. page_hero.css). */
.stats-board__title--short{
    display:none;
}

.stats-board__list{
    display:flex;
    align-items:center;

    min-width:0;
    margin:0;
    padding:0;

    overflow:visible;
    list-style:none;
}

.stats-board__item{
    position:relative;

    display:flex;
    align-items:center;
    gap:7px;

    min-width:0;
    min-height:30px;
    padding:0;

    overflow:visible;

    color:var(--color-fg);
    cursor:default;
    outline:none;
}

.stats-board__item + .stats-board__item{
    margin-left:14px;
}

.stats-board__item + .stats-board__item::before{
    content:"·";

    margin-right:14px;

    color:rgba(117, 101, 78, .48);
    font-size:14px;
    font-weight:700;
    line-height:1;
}

.stats-board__item:focus-visible{
    border-radius:5px;
    box-shadow:0 0 0 2px rgba(52, 181, 107, .38);
}

.stats-board__icon{
    flex:0 0 auto;

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif;
    font-size:17px;
    line-height:1;
}

.stats-board__value{
    overflow:hidden;

    font-size:18px;
    font-weight:800;
    line-height:1;
    letter-spacing:.01em;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.stats-board__tooltip{
    position:absolute;
    z-index:70;

    top:calc(100% + 9px);
    bottom:auto;
    left:50%;

    width:max-content;
    max-width:min(250px, calc(100vw - 32px));
    padding:7px 10px;

    border-radius:7px;
    background:#5b3a18;
    box-shadow:0 5px 14px rgba(35, 21, 6, .2);
    color:#fff;

    font-size:12px;
    font-weight:600;
    line-height:1.25;
    text-align:center;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-50%, -4px);

    transition:
        opacity var(--transition-base),
        transform var(--transition-base),
        visibility var(--transition-base);
}

.stats-board__tooltip::before{
    content:"";

    position:absolute;
    bottom:100%;
    left:50%;

    border:6px solid transparent;
    border-bottom-color:#5b3a18;

    transform:translateX(-50%);
}

.stats-board__item:hover .stats-board__tooltip,
.stats-board__item:focus .stats-board__tooltip{
    opacity:1;
    visibility:visible;
    transform:translate(-50%, 0);
}

@media (max-width:700px){
    .stats-board{
        gap:12px;
        min-height:28px;
        margin-bottom:10px;
    }

    .stats-board__title{
        font-size:10px;
    }

    .stats-board__item{
        gap:4px;
        min-height:28px;
    }

    .stats-board__item + .stats-board__item{
        margin-left:8px;
    }

    .stats-board__item + .stats-board__item::before{
        margin-right:8px;
    }

    .stats-board__icon{
        font-size:15px;
    }

    .stats-board__value{
        font-size:14px;
    }
}

@media (max-width:520px){
    .stats-board{
        align-items:flex-start;
        flex-direction:column;
        gap:3px;
    }

    .stats-board__list{
        width:100%;
        justify-content:space-between;
    }

    .stats-board__item + .stats-board__item{
        margin-left:4px;
    }

    .stats-board__item + .stats-board__item::before{
        margin-right:4px;
    }

    .stats-board__item:first-child .stats-board__tooltip{
        left:0;
        transform:translate(0, -4px);
    }

    .stats-board__item:first-child:hover .stats-board__tooltip,
    .stats-board__item:first-child:focus .stats-board__tooltip{
        transform:translate(0, 0);
    }

    .stats-board__item:last-child .stats-board__tooltip{
        right:0;
        left:auto;
        transform:translate(0, -4px);
    }

    .stats-board__item:last-child:hover .stats-board__tooltip,
    .stats-board__item:last-child:focus .stats-board__tooltip{
        transform:translate(0, 0);
    }
}