/* Доска почёта. Токены из ideology_base.css. Префикс .hb-* — без пересечений с Bootstrap. */

/* Скрыт визуально, но доступен скринридерам */
.hb-sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Панель фильтров: годы ── */

.hb-toolbar {
    display: flex; align-items: center;
    flex-wrap: wrap; gap: var(--sp-md);
    margin-bottom: var(--sp-lg);
}

.hb-years-group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-sm); }
.hb-years-label { color: var(--muted); font-size: 14px; }
.hb-years { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs); }

.hb-chip {
    display: inline-flex; align-items: center;
    min-height: 44px;
    padding: 8px 20px;
    border: 1px solid rgba(255,255,255,.4); /* ≈3.8:1 на фоне, WCAG 1.4.11 */
    border-radius: 100px;
    background: var(--surface);
    color: var(--muted);
    font: 600 15px var(--font-body);
    cursor: pointer;
    transition: color var(--tr), border-color var(--tr), background var(--tr);
}
.hb-chip:hover { color: var(--text); border-color: var(--accent-border); }
.hb-chip.is-active { background: var(--accent); border-color: var(--accent); color: #000; }
.hb-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* «Ранее» — выпадающий список старых лет без JS */
.hb-more { position: relative; }
.hb-more summary { list-style: none; }
.hb-more summary::-webkit-details-marker { display: none; }
.hb-more summary::after { content: '▾'; margin-left: 8px; font-size: 12px; }
.hb-more[open] summary::after { content: '▴'; }
.hb-more-list {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 5;
    display: flex; flex-wrap: wrap; gap: var(--sp-xs);
    min-width: 220px; padding: var(--sp-sm);
    background: #1b1b1b;
    border: 1px solid var(--accent-border);
    border-radius: var(--r);
    box-shadow: 0 18px 36px rgba(0,0,0,.5);
}

/* ── Сетка и карточки ── */

.hb-grid {
    list-style: none; margin: 0 0 var(--sp-xl); padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-md);
}

/* Карточки не кликабельны, поэтому без подъёма и верхней линии: только лёгкая подсветка границы */
.hb-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color .3s;
    animation: fadeUp 0.6s ease both;
    /* Колонка: тело карточки растягивается, подразделение прижато к низу */
    display: flex; flex-direction: column;
}
.hb-card:hover { border-color: var(--accent-border); }

.hb-photo { aspect-ratio: 4 / 5; background: rgba(255,255,255,.04); overflow: hidden; flex: none; }
.hb-photo img {
    width: 100%; height: 100%; display: block;
    object-fit: cover;
    object-position: 50% 20%; /* не срезать верх головы на портретах */
}
.hb-photo--empty {
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.25)' stroke-width='1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")
        center / 40% no-repeat,
        rgba(255,255,255,.04);
}

.hb-body { padding: var(--sp-md); flex: 1; display: flex; flex-direction: column; }
.hb-name { font-size: 18px; font-weight: 600; line-height: 1.3; min-height: 2.6em; /* резерв под 2 строки: должность стартует на одной высоте */ margin: 0 0 var(--sp-xs); color: var(--text); letter-spacing: 0.15px; }
.hb-pos  { font-size: 15px; color: var(--muted); line-height: 1.4; margin-bottom: var(--sp-md); }
.hb-dept {
    margin-top: auto;                /* всегда внизу карточки */
    box-sizing: border-box;
    flex: none;
    /* Жёсткая высота под 2 строки (отступ + линия + 2 × line-height): блок одинаков во всех карточках */
    height: calc(var(--sp-sm) + 1px + 2 * 1.35em);
    padding-top: var(--sp-sm);
    border-top: 1px solid var(--border);
    overflow: hidden;
    font-size: 13px; line-height: 1.35; font-weight: 600; letter-spacing: 0.5px;
    text-transform: uppercase; color: var(--muted);
}

.hb-empty { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 640px; padding: var(--sp-lg) 0 var(--sp-xl); }
.hb-empty a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.hb-empty a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hb-pager { margin-bottom: var(--sp-xl); }

@media (max-width: 900px) {
    .hb-toolbar { align-items: flex-start; flex-direction: column; gap: var(--sp-sm); }
    .hb-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-sm); }
    .hb-body { padding: var(--sp-sm); }
    .hb-name { font-size: 16px; }
    .hb-dept { height: auto; min-height: calc(var(--sp-sm) + 1px + 2 * 1.35em); overflow: visible; }
}

/* Без анимации карточки сразу видны (opacity:0 больше не используется, `both` показывает финальное состояние) */
@media (prefers-reduced-motion: reduce) {
    .hb-card { animation: none; }
}