/**
 * Люди города — карточки в общем стиле системы.
 *
 * ИСТОРИЯ. Раньше этот файл назывался «D&D Character Card Style»: тёмная
 * подложка, пергамент, золотые рамки, шрифт Cinzel, 3D-переворот и значки
 * редкости (ЛЕГЕНДА/ЭПИК/РЕДКИЙ). Прямое требование user 2026-08-20:
 * «карточки в общем стиле, сейчас они у нас вычурные, надо чтобы был единый
 * стиль у всей системы». Раздел про реальных людей города не должен выглядеть
 * как коллекционная игра — оформление там сообщало о человеке больше, чем
 * данные, и сообщало неправду.
 *
 * ТЕПЕРЬ: базовый .card из components/cards.css + токены дизайн-системы.
 * Никаких собственных цветов-литералов, никакой декоративной типографики.
 * Разметку строит static/js/components/heroes.js (.person-card).
 */

/* ============================================
   КОНТЕЙНЕР РАЗДЕЛА
   ============================================ */
#heroes-pane {
    overflow-y: auto;
    padding: 20px;
    background: var(--bg-secondary, var(--bg-primary));
}

/* ============================================
   ЗАГОЛОВОК
   ============================================ */
#heroes-pane .header {
    margin-bottom: 20px;
}

#heroes-pane .header.header--spaced {
    margin-top: 2rem;
}

#heroes-pane h1,
#heroes-pane h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}

#heroes-pane .subtitle {
    color: var(--text-secondary, var(--text-light));
    font-size: 0.875rem;
    font-weight: 400;
    margin: 0;
}

/* ============================================
   СЕТКА КАРТОЧЕК
   ============================================ */
#heroes-pane .cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
}

/* ============================================
   КАРТОЧКА ЧЕЛОВЕКА
   Высота НЕ фиксируется: у карточек разный объём данных, и обрезать
   описание ради ровной сетки — значит прятать содержание.
   ============================================ */
.person-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--card-padding, 16px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease,
                box-shadow 0.15s ease, border-color 0.15s ease;
    transition-delay: var(--hero-delay, 0s);
}

.person-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .person-card {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* Личность прошлого — единственная карточка с акцентной линией: это
   содержательное различие (исторический деятель, а не житель сегодня),
   а не украшение. */
.person-card--past {
    border-left: 3px solid var(--primary, var(--accent));
}

.person-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.person-card__avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary, var(--bg-secondary));
    border: 1px solid var(--border-light, var(--border-color, var(--border)));
}

.person-card__avatar--team {
    border-radius: var(--card-radius-sm, 8px);
}

.person-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.person-card__initials {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-secondary, var(--text-light));
}

.person-card__ident {
    min-width: 0;
    flex: 1 1 auto;
}

.person-card__name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 0;
    text-wrap: balance;
}

/* Чем занимается. Не звание — занятие. */
.person-card__role {
    font-size: 0.8125rem;
    color: var(--text-secondary, var(--text-light));
    margin: 2px 0 0;
    line-height: 1.35;
}

/* ============================================
   ЧИПЫ: происхождение данных и эпоха
   ============================================ */
.person-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.person-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1.6;
    color: var(--text-secondary, var(--text-light));
    background: var(--bg-tertiary, var(--bg-secondary));
    border: 1px solid var(--border-light, var(--border-color, var(--border)));
    white-space: nowrap;
}

.person-chip--past {
    color: var(--primary, var(--accent));
    border-color: color-mix(in srgb, var(--primary, var(--accent)) 35%, transparent);
    background: color-mix(in srgb, var(--primary, var(--accent)) 8%, transparent);
    font-weight: 600;
}

/* ============================================
   ТЕКСТ И ЦИТАТА
   ============================================ */
.person-card__desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0;
}

/* Цитата — чужие слова о человеке. Отбита слева линией и подписана
   источником, чтобы её нельзя было прочесть как утверждение системы. */
.person-card__quote {
    margin: 0;
    padding: 8px 0 8px 12px;
    border-left: 2px solid var(--border-light, var(--border-color, var(--border)));
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary, var(--text-light));
    font-style: italic;
}

.person-card__quote cite {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 0.75rem;
    color: var(--text-muted, var(--text-light));
}

/* ============================================
   ПОДВАЛ: упоминания, ссылки, «Подробнее»
   ============================================ */
.person-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border-light, var(--border-color, var(--border)));
}

.person-card__mentions {
    font-size: 0.75rem;
    color: var(--text-secondary, var(--text-light));
    font-variant-numeric: tabular-nums;
}

/* «Источники не приложены» — честное состояние, а не ошибка: приглушаем,
   но не прячем (по нему видно, какие карточки нечем проверить). */
.person-card__mentions--none {
    color: var(--text-muted, var(--text-light));
    font-style: italic;
}

.person-card__more {
    margin-left: auto;
    background: none;
    border: 1px solid var(--border-color, var(--border));
    border-radius: var(--card-radius-sm, 8px);
    padding: 4px 10px;
    font-size: 0.75rem;
    font-family: inherit;
    color: var(--text-secondary, var(--text-light));
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.person-card__more:hover {
    background: var(--bg-tertiary, var(--bg-secondary));
    color: var(--text-primary);
}

.person-card__more:focus-visible {
    outline: 2px solid var(--primary, var(--accent));
    outline-offset: 2px;
}

/* ============================================
   ДЕТАЛИ (раскрываются кнопкой)
   ============================================ */
.person-card__details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
}

.person-card__details[hidden] {
    display: none;
}

.person-detail h4 {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, var(--text-light));
    margin: 0 0 6px;
}

.person-list {
    margin: 0;
    padding-left: 16px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary, var(--text-light));
}

.person-list li + li {
    margin-top: 4px;
}

.person-list strong {
    color: var(--text-primary);
    font-weight: 600;
}

.person-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.person-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--card-radius-sm, 8px);
    background: var(--bg-tertiary, var(--bg-secondary));
    color: var(--text-secondary, var(--text-light));
    font-size: 0.75rem;
}

/* ============================================
   СОЦИАЛЬНЫЕ ССЫЛКИ
   ============================================ */
#heroes-pane .social-links,
.person-card .social-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

#heroes-pane .social-link,
.person-card .social-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary, var(--text-light));
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

#heroes-pane .social-link:hover,
.person-card .social-link:hover {
    color: var(--text-primary);
    border-bottom-color: currentColor;
}

#heroes-pane .social-link svg,
.person-card .social-link svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* ============================================
   МЕТА, ПУСТЫЕ СОСТОЯНИЯ, ЗАГРУЗКА
   ============================================ */
#heroes-pane .heroes-meta {
    font-size: 0.75rem;
    color: var(--text-secondary, var(--text-light));
    margin: -8px 0 16px;
    padding: 8px 12px;
    background: var(--bg-tertiary, var(--bg-secondary));
    border: 1px solid var(--border-light, var(--border-color, var(--border)));
    border-radius: var(--card-radius-sm, 8px);
}

#heroes-pane .heroes-meta strong {
    font-weight: 600;
    color: var(--text-primary);
}

#heroes-pane .info-placeholder {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary, var(--text-light));
}

#heroes-pane .info-placeholder p {
    margin-bottom: 0.5rem;
}

#heroes-pane .info-placeholder--panel {
    background: var(--card-bg, var(--bg-primary));
    border: 1px solid var(--border-color, var(--border));
    border-radius: var(--card-radius, 12px);
    padding: 2rem;
}

#heroes-pane .info-placeholder__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

#heroes-pane .info-placeholder__title--error {
    color: var(--danger);
}

#heroes-pane .info-placeholder__text {
    font-size: 0.875rem;
    color: var(--text-secondary, var(--text-light));
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.heroes-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
}

.heroes-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-light, var(--border-color, var(--border)));
    border-top-color: var(--primary, var(--accent));
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .heroes-spinner { animation-duration: 2.5s; }
}

.heroes-loading-text {
    text-align: center;
    color: var(--text-secondary, var(--text-light));
}

.heroes-loading-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.heroes-loading-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary, var(--text-light));
    margin: 0.35rem 0 0;
}

/* ============================================
   СЕКЦИЯ «ЕЩЁ ЛЮДИ ИЗ БАЗЫ ЗНАНИЙ»
   ============================================ */
.kb-highlight-section {
    margin-top: 2rem;
}

.kb-highlight-section .header {
    margin-bottom: 16px;
}

/* ============================================
   АДАПТИВ
   ============================================ */
@media (max-width: 768px) {
    #heroes-pane {
        padding: 12px;
    }

    #heroes-pane .cards-container {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #heroes-pane h1,
    #heroes-pane h2 {
        font-size: 1.125rem;
    }
}