/* team-roster.css */
/* Ростер команды — ВИЗУАЛЬНО как подиум награждения (страница редакции /hackathons/<slug>/, секция
   Winners): те же стили/логика, что .roster/.team-name/.members/.member/.avatar/links подиума. Используется
   доской /find-team, чтобы команды выглядели «как на награждении» и много помещалось на экран. Значения
   аватара/наведения/ссылок 1:1 с подиумом (КРОМЕ размера лица — он крупнее, решение владельца 2026-08-08) (источник правды визуала — он). Переменные (--cyan/--line/--muted/
   --pink) даёт :root страницы. Кладётся в assets/ (passthrough → /assets/team-roster.css). */

/* Сетка карточек — много команд на 1 экране (адаптив: авто-перенос, тянутся/сжимаются). */
/* Ширина карточки — под перенос: кружки встают в ряд, сколько влезло, остальные переносятся.
   Раскладку на живой доске задаёт board.js (#team-board), здесь — оборонительный дефолт. */
/* min(360px,100%) вместо жёсткого 360px: на узком мобильном (≤360px) минимум колонки сжимается до
   ширины экрана, иначе карточка шире вьюпорта → горизонтальное переполнение всей страницы. */
.team-board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));gap:18px;margin-top:12px}

/* Карточка-ростер (как .roster подиума, но самостоятельная — без пьедестала). */
.roster{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04);padding:22px 18px 18px;text-align:center;display:flex;flex-direction:column;gap:6px}
.roster .team-name{font-family:'Space Grotesk',Inter,sans-serif;font-weight:800;font-size:1.1rem;margin:0 0 4px;letter-spacing:.02em}
.roster .team-meta{color:var(--muted);font-size:.8rem;font-weight:700;margin:0 0 12px}

/* Ряд кружков (как .members подиума). align-items:flex-start → кружки (аватар/слот) выровнены по ВЕРХУ
   одной линией у всех колонок; текст профиля (имя/роли/Discord/ссылки) уходит вниз и НЕ сдвигает кружки. */
.members{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;align-content:flex-start;gap:16px 10px}
/* Кружок-человек / кружок-слот — колонка (как .member подиума). Ширина ЗАПАСНАЯ — см. ⚠️ ниже. */
/* ⚠️ ЭТА ШИРИНА — ЗАПАСНАЯ, А НЕ ТА, ЧТО ВИДИТ ЧЕЛОВЕК. На живой доске колонку задаёт
   `#team-board .member{flex:0 0 165px}` из functions/member/board.js: селектор с id бьёт этот по
   специфичности, а все кружки рендерятся внутрь #team-board. Значение здесь работает только
   если кружок окажется вне доски. Держим его не уже лица — иначе на такой поверхности лицо
   вылезет за свою колонку и соседние лица налезут друг на друга. Обе ширины стережёт
   tests/person-photo-size.test.mjs — и запасную здесь, и настоящую в board.js. */
.member{display:flex;flex-direction:column;align-items:center;width:128px}
.member .who{display:flex;flex-direction:column;align-items:center;gap:8px;color:inherit;text-decoration:none}
/* ФОТО ЧЕЛОВЕКА — ОСНОВНОЙ ЭЛЕМЕНТ КАРТОЧКИ (решение владельца 2026-08-08).
   Было 60px — в полтора раза меньше, чем на пьедестале (88px, у первого места 104px), и лицо
   читалось как «бедный родственник» рядом с текстом. Стало 128px: пьедестал +45%, первое место
   +23% — ориентир владельца «точно не меньше пьедестала, лучше на 20–30% больше».
   Одинаково для участников и судей: карточка одна и та же.
   ⚠️ Фраза «4 кружка в один ряд» относилась к прежним 72px: при 128px четыре кружка требуют
   4×128+3×10 = 542px, и ряд честно переносится. Раскладку на живой доске всё равно задаёт
   board.js — здесь ширина запасная. */
.member .avatar{width:128px;height:128px;border-radius:50%;object-fit:cover;border:2px solid rgba(59,91,255,.30);display:inline-flex;align-items:center;justify-content:center;font-weight:800;background:rgba(59,91,255,.12);color:var(--cyan);font-size:1.2rem;flex:none;font-family:'Space Grotesk',Inter,sans-serif;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
/* Загорание лица ТОЛЬКО на наведении + КЛАВИАТУРНОМ фокусе (:has(:focus-visible)) — не залипает после
   мышиного клика (ссылка открывается в новой вкладке, фокус остаётся; :focus-within залипал). :hover —
   отдельным правилом (уцелеет без :has). */
.member:hover .avatar{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(59,91,255,.18),0 0 18px rgba(59,91,255,.45)}
.member: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)}
@media(prefers-reduced-motion:reduce){.member .avatar,.member:hover .avatar{transition:none;transform:none}.member:has(:focus-visible) .avatar{transition:none;transform:none}}
.member .who span.mname{font-weight:700;font-size:.92rem;text-align:center;overflow-wrap:break-word;width:100%;text-transform:uppercase}
.member .mrole{color:var(--cyan);font-size:.74rem;font-weight:700;margin-top:2px;overflow-wrap:break-word;max-width:100%}
.member .mdiscord{color:var(--muted);font-size:.74rem;margin-top:2px;word-break:break-word}
/* Ссылки человека — порядок LVHA + плавность (1:1 с подиумом). */
.member .links{display:flex;flex-direction:column;gap:3px;margin:4px 0 0;font-size:.74rem;word-break:break-word;text-align:center;max-width:130px}
.member .links a{color:var(--cyan);transition:color .15s ease,text-shadow .15s ease}
.member .links a:visited{color:#86a7c4}
.member .links a:hover{color:#fff;text-shadow:0 0 10px var(--cyan)}
.member .links a:active{color:var(--pink)}

/* Пустой слот «Vacant» + «Wanted: <role>» (кого ждёт команда). Кликабельный, когда участник может подать. */
.member.vacant .slot{width:128px;height:128px;border-radius:50%;border:2px dashed var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;color:var(--muted);transition:border-color .15s ease,box-shadow .15s ease,color .15s ease}
.member.vacant .vlabel{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-top:6px}
.member.vacant .vwanted{font-size:.74rem;font-weight:700;color:var(--cyan);margin-top:2px;overflow-wrap:break-word;max-width:100%}
/* Кнопка-форма подачи на слот: служебный кружок, перебиваем btn.css-перелив (тот же вес, позже в каскаде). */
.vacant-form{margin:0}
button.vacant-apply{display:flex;flex-direction:column;align-items:center;gap:0;background:none;border:0;border-radius:0;padding:0;margin:0;cursor:pointer;color:inherit;font:inherit}
button.vacant-apply:hover{background:none;color:inherit;animation:none}
button.vacant-apply:hover .slot,button.vacant-apply:focus-visible .slot{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 0 4px rgba(59,91,255,.18),0 0 18px rgba(59,91,255,.45)}