/* person-card.css */
/* ЕДИНЫЙ модуль карточки человека (.person в .team-grid): судьи / менторы / организаторы.
   ОДИН источник стилей — и страница редакции (/hackathons/<slug>/), и кабинет участника
   (/apply, /me) подключают ЭТОТ файл, поэтому карточки ОДИНАКОВЫ (а не «похожи»): размеры,
   сетка, наведение мыши. Раньше у каждой страницы была своя инлайн-копия и они разъезжались
   (180/240/72 на /apply против 200/260/76 на редакции — разный hover/размер).

   Адаптивность: .team-grid — flexbox (flex-wrap + justify-content:center: ряд переносится, неполный
   ряд ЦЕНТРИРУЕТСЯ). .person — flex:0 0 190px;max-width:100% (ФИКСИРОВАННАЯ ширина, БЕЗ роста/сжатия:
   одинокая карточка неполного ряда НЕ раздувается шире соседей — прежний flex:1 1 растягивал её
   flex-grow'ом до max-width, «жирный» 4-й судья). 190px подобрана так, чтобы 3 карточки влезали в
   ряд узкого контейнера /apply (.card в .wrap 680px → ~634px), как в проде; grid тут не подходит —
   он прижимает неполный ряд ВЛЕВО, ломая центрирование. Наведение (LVHA + transition) на внешних ссылках — реакция на
   hover/visited/active с плавностью. Переменные (--cyan/--line/--muted/--pink) даёт :root
   каждой страницы (Signal-тема). Подключать ПЕРЕД /card-link.css (его :hover-правила сильнее). */

.team-group{margin-top:26px}
.team-group h3{font-family:'Space Grotesk',Inter,sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem;color:var(--cyan);text-align:center;margin:0 0 14px}
/* Карточки центрируются в ряду (неполный ряд не липнет влево — justify-content:center) + переносятся. */
.team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
/* ФИКСИРОВАННАЯ ширина карточки (flex:0 0 — БЕЗ grow/shrink): в полном ряду карточки не сжимаются, а
   одинокая карточка неполного ряда НЕ раздувается flex-grow'ом до max-width (был «жирный» 4-й судья).
   Все карточки одного размера при любом числе в ряду. max-width:100% — не переполнять узкий экран. */
/* ФОТО — ОСНОВНОЙ ЭЛЕМЕНТ (решение владельца 2026-08-08): было 76px, стало 128px, как в
   карточках команд и в предпросмотре ника. Ширину карточки трогать НЕ понадобилось: при 190px
   и полях по 16px внутри остаётся 158px — лицо 128px помещается с запасом. (Сперва я поднял её
   до 208px, сославшись на нехватку места; арифметика этого не подтверждает — правка откачена,
   чтобы карточки судей не разъехались с сеткой без причины. Связь стережёт
   tests/person-photo-size.test.mjs: лицо обязано помещаться внутрь карточки с её полями.) */
.person{flex:0 0 190px;max-width:100%;padding:16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);text-align:center}
/* Дефолтная рамка аватара ПРИГЛУШЕНА (rgba .30, как .place .avatar на пьедестале) — «дымка»;
   на наведении карточки она загорается до сплошной cyan + глоу (правило ниже). */
.person .avatar{width:128px;height:128px;border-radius:50%;object-fit:cover;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;border:2px solid rgba(59,91,255,.30);background:rgba(59,91,255,.12);color:var(--cyan);font-family:'Space Grotesk',sans-serif;font-weight:800;transition:border-color .15s ease,box-shadow .15s ease}
/* Лицо-ссылка: сам аватар кликабелен в личную страницу (как клик по карточке). Прозрачная обёртка,
   аватар центрируется как раньше (margin:0 auto). card-link.css поднимает a:not(.stretched-link) над
   плашкой (z-index:2) → клик по кружку доходит до ссылки, а наведение зажигает рамку. */
.person .avatar-link{display:block;text-decoration:none}
.person .pname{font-weight:800;margin:.2em 0;text-transform:uppercase}
.person .pname a{color:inherit;text-decoration:none}
.person .pname a:hover{color:var(--cyan)}
.person .pregalia{color:var(--muted);font-size:.84rem;line-height:1.45;margin:.3em 0}
/* align-items:center → каждая ссылка по ширине своего текста (а не на всю карточку),
   чтобы клик по пустому месту открывал карточку человека (card-link), а не ссылку. */
.person .links{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:8px;font-size:.8rem;word-break:break-word}
/* URL в карточках людей реагируют на наведение/клик/посещение (порядок LVHA) + плавность. */
.person .links a{color:var(--cyan);transition:color .15s ease,text-shadow .15s ease}
.person .links a:visited{color:#86a7c4}
.person .links a:hover{color:#fff;text-shadow:0 0 10px var(--cyan)}
.person .links a:active{color:var(--pink)}
/* Страна — отдельной строкой ПОД социальными ссылками (📍 + текст), приглушённо. */
.person .pcountry{margin-top:6px;color:var(--muted);font-size:.78rem;font-weight:700}
.person .pcountry::before{content:"📍 "}
/* НАВЕДЕНИЕ — единый источник правды для карточек людей (судьи / менторы / организаторы) ВЕЗДЕ:
   • карточка ПО УМОЛЧАНИЮ под «дымкой» (opacity:.55), как участники на пьедестале;
   • при наведении/фокусе на карточку дымка пропадает (opacity:1) И ВСЯ КАРТОЧКА ВСПЫХИВАЕТ —
     подъём + glow + cobalt-рамка (тот же эффект, что card-link у судей с cert_id на странице
     редакции; через модуль работает и БЕЗ card-link — у планируемых судей в /me/apply cert_id нет);
   • кругляшок-аватар загорается ОТДЕЛЬНО — на наведении НА САМ КРУЖОК (или клавиатурном фокусе),
     как у команд (.member … .avatar), а НЕ на наведение на весь квадрат карточки. */
.person{opacity:.55;transition:opacity .25s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease}
/* Вспышка ТОЛЬКО на наведении мыши + КЛАВИАТУРНОМ фокусе (:has(:focus-visible)). Мышиный клик НЕ
   оставляет карточку залипшей: :focus-visible не срабатывает на мышином фокусе (в т.ч. когда ссылка
   открылась в новой вкладке и фокус остался на ней), в отличие от прежнего :focus-within. :hover —
   ОТДЕЛЬНЫМ правилом, чтобы он уцелел в старых движках без :has. */
.person:hover{opacity:1;transform:translateY(-4px) scale(1.01);border-color:var(--cyan);box-shadow:var(--shadow-cyan,0 0 28px rgba(59,91,255,.48)),var(--shadow-pink,0 0 28px rgba(255,176,32,.52))}
.person:has(:focus-visible){opacity:1;transform:translateY(-4px) scale(1.01);border-color:var(--cyan);box-shadow:var(--shadow-cyan,0 0 28px rgba(59,91,255,.48)),var(--shadow-pink,0 0 28px rgba(255,176,32,.52))}
/* z-index поднимает аватар над stretched-link-плашкой card-link, иначе на странице редакции :hover
   кружка перехватывает прозрачная плашка ссылки и аватар не загорается от наведения на сам кружок. */
.person .avatar{position:relative;z-index:2}
.person .avatar:hover{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(59,91,255,.18),0 0 18px rgba(59,91,255,.45)}
.person:has(:focus-visible) .avatar{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(59,91,255,.18),0 0 18px rgba(59,91,255,.45)}
/* Уважаем prefers-reduced-motion: «дымка→проявление», вспышка-глоу и рамка остаются, без движения. */
@media (prefers-reduced-motion:reduce){.person,.person .avatar{transition:opacity .25s ease,box-shadow .18s ease,border-color .18s ease}.person:hover{transform:none}.person:has(:focus-visible){transform:none}}

/* Доп-строки «человек-квадрата» командного модуля (/me, /find-team): проф-роли (что человек выбрал),
   ник в Discord и ссылка на наш Discord-канал (дубль из шапки). На странице редакции этих элементов нет —
   правила безвредны (нет соответствующих узлов), но живут в ЕДИНОМ источнике вместе с самой карточкой. */
.person .proles{color:var(--cyan);font-size:.78rem;font-weight:700;margin:.2em 0}
.person .pdiscord{color:var(--muted);font-size:.82rem;margin:.15em 0}
/* GitHub-логин участника с эмблемой (пара к Discord) — маленький тег-ссылка на профиль. */
.person .pgithub{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:.82rem;margin:.15em 0;text-decoration:none}
.person .pgithub:hover{color:var(--cyan)}
.person .pgithub .gh-ico{width:12px;height:12px;flex:none}
.person .pcommunity{display:inline-block;margin-top:8px;font-size:.78rem;font-weight:700;color:var(--cyan);transition:text-shadow .15s ease}
.person .pcommunity:hover{text-shadow:0 0 10px var(--cyan)}