/* ==========================================================================
   team.css — состав клуба.

   ОТКУДА. starco_team_concept.html; заготовка посчитана
   migrate/page_css_diff.php (из 177 правил концепта 47 уже лежали в base.css).

   ЗАЧЕМ ЭТОТ ФАЙЛ ПОДКЛЮЧАЕТ И КАРТОЧКА УЧАСТНИКА. /team/{слаг}/ просит
   ['team','team-member']: у карточки нет своего концепта, и она собрана из
   тех же блоков — тёмный .hero, светлая .section, тёмный .featured с сеткой
   .members-grid в «ещё в составе». Всё это описано ЗДЕСЬ и не дублируется
   в team-member.css; там осталось только то, чего на списке нет вовсе
   (крупный портрет и типографика биографии).

   ЧЕГО ИЗ КОНЦЕПТА ЗДЕСЬ НЕТ НАМЕРЕННО.
   • .star-grid/.star-card/.star-photo/.star-overlay/.star-number/.star-info,
     .roster-head, .roster-grid, .roster-card, .roster-index, .roster-avatar,
     .roster-name, .roster-arrow — мёртвый CSS самого концепта: в его разметке
     этих классов нет ни одного, финальная итерация свела «звёзд» и «полный
     список» в одну секцию .featured > .members-grid.
   • .mix / .mix-visual / .mix-title / .mix-tags / .quote — секция «Сцена ×
     Футбол». Это сплошная редактура без источника данных; переносить её
     значило бы зашить копирайт в шаблон. Место такого текста — тело страницы
     в админке.
   • .member-photo{opacity:0} / .has-photo / .is-loading / .photo-failed /
     @keyframes photoSpin — загрузчик портретов через api.microlink.io. В
     концепте он тянул фотографии с боевого сайта; здесь картинки лежат
     локально в files/team/ и отдаются ресайзером.
   • .btn-red:hover, .btn-outline:hover, .menu-btn svg, @keyframes marquee,
     @media(prefers-reduced-motion) и переопределения --container в
     медиазапросах — это общие компоненты, их место в base.css (по hover'ам
     кнопок и ширине бургер-иконки там пробел — см. отчёт).

   РАСХОЖДЕНИЯ С base.css у этой страницы (page_css_diff): .btn-outline,
   .header.scrolled, .marquee-track. Все три косметические — у концепта
   /team/ фон шапки rgba(4,29,61,.94) против .95 в base. Переопределять
   постранично не стал: получилась бы шапка, которая на одной странице
   чуть темнее, чем на остальных.
   ========================================================================== */

/* ------------------------------------------------- секционные примитивы -- */
/* .section/.section-title/.section-copy в base.css нет намеренно: у каждого
   из одиннадцати концептов свои clamp() и отступы, единого канона пока не
   выбрано. Здесь — значения /team/. */
.section { padding: 105px 0; }

.section-title {
	font-size: clamp(42px, 5vw, 78px);
	line-height: .94;
	letter-spacing: -.055em;
	margin: 16px 0 24px;
	font-weight: 950;
	text-transform: uppercase;
}

.section-copy {
	font-size: 18px;
	line-height: 1.7;
	color: #536176;
	max-width: 780px;
}

/* Русские фамилии длинные, а заголовки набраны в 78px с отрицательным
   трекингом: без этого блока браузер переносит «Белоцерковский» по слогам
   и рвёт имя посреди карточки. */
h1, h2, h3,
.section-title,
.member-body h3 {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
	text-wrap: balance;
}

/* ---------------------------------------------------------------- шапка -- */
/* Шапка сайта position:fixed и прозрачная, поэтому верхний padding героя
   отбивает её высоту. */
.hero {
	min-height: 820px;
	padding: 170px 0 100px;
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(circle at 80% 14%, rgba(230, 192, 76, .16), transparent 20%),
		radial-gradient(circle at 20% 70%, rgba(217, 8, 18, .15), transparent 24%),
		linear-gradient(128deg, var(--navy2), var(--navy) 47%, #0a518f);
}
/* Косая штриховка поверх градиента и выворотное слово на выпуск. */
.hero:before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(118deg, transparent 0 88px, rgba(255, 255, 255, .025) 89px 90px);
}
.hero:after {
	content: "TEAM";
	position: absolute;
	right: -35px;
	bottom: -82px;
	font-size: clamp(220px, 25vw, 430px);
	font-weight: 950;
	line-height: .75;
	letter-spacing: -.11em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, .055);
}

/* Хлебные крошки в левой колонке сетки — как на остальных страницах. */
.hero .breadcrumbs { position: relative; z-index: 2; margin-bottom: 26px; }
.intro .section-copy { margin: 0 0 22px; }

.hero-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: .88fr 1.12fr;
	gap: 70px;
	align-items: center;
}

.hero-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #cce6ff;
}
.hero-kicker strong { background: var(--red); padding: 8px 12px; border-radius: 999px; color: #fff; }

.hero h1 {
	font-size: clamp(78px, 9vw, 148px);
	line-height: .76;
	letter-spacing: -.075em;
	text-transform: uppercase;
	margin: 30px 0 34px;
	font-weight: 950;
}
.hero h1 span {
	display: block;
	color: var(--gold);
	font-size: .42em;
	line-height: 1;
	margin-top: 18px;
	letter-spacing: .025em;
}

.hero-lead { font-size: 19px; line-height: 1.65; color: rgba(255, 255, 255, .76); max-width: 650px; }
.hero-lead p { margin: 0 0 14px; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

/* ------------------------------------------------- коллаж из портретов -- */
/* В концепте портреты были фоновыми картинками с захардкоженными путями.
   Здесь это <img> внутри .portrait: во-первых, файл выбирает шаблон из базы,
   во-вторых, не нужен inline style="background-image:…" — а он мешал бы
   когда-нибудь включить CSP style-src 'self'. */
.hero-art { position: relative; min-height: 540px; }

.portrait-stack { position: absolute; inset: 0; }

.portrait {
	position: absolute;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 0 34px 70px rgba(0, 0, 0, .38);
	border: 1px solid rgba(255, 255, 255, .14);
}
.portrait img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Лица на портретах в верхней трети кадра — центрируем по ним, а не по
	   геометрическому центру. */
	object-position: center 20%;
	display: block;
}
.portrait:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(4, 29, 61, .5));
}

/* Классы p1…p4 навешивает {$star@iteration}: порядок в стопке = порядок
   featured-участников по position в админке. */
.p1 { width: 39%; height: 78%; left: 1%;  bottom: 1%; transform: rotate(-5deg); }
.p2 { width: 36%; height: 74%; left: 30%; top: 2%;    transform: rotate(3deg); }
.p3 { width: 37%; height: 72%; right: 3%; bottom: 2%; transform: rotate(-2deg); }
.p4 { width: 30%; height: 48%; right: 1%; top: 3%;    transform: rotate(5deg); z-index: -1; opacity: .9; }

.team-badge {
	position: absolute;
	left: 28%;
	bottom: 0;
	z-index: 5;
	background: var(--red);
	padding: 19px 22px;
	border-radius: 18px;
	transform: rotate(2deg);
	box-shadow: 0 18px 45px rgba(0, 0, 0, .3);
}
.team-badge b { display: block; font-size: 44px; line-height: .85; }
.team-badge span { font-size: 10px; text-transform: uppercase; letter-spacing: .13em; font-weight: 900; }

.star-note {
	position: absolute;
	right: 1%;
	top: 7%;
	z-index: 5;
	background: #fff;
	color: var(--navy);
	padding: 16px 19px;
	border-radius: 17px;
	box-shadow: var(--shadow);
	font-weight: 900;
	line-height: 1.3;
	transform: rotate(3deg);
}

/* --------------------------------------------------- светлая секция «о» -- */
.intro {
	background: linear-gradient(135deg, #fff 0%, #f8f4e9 48%, #edf5fb 100%);
	position: relative;
	overflow: hidden;
}
.intro:after {
	content: "★";
	position: absolute;
	right: -35px;
	top: -110px;
	font-size: 420px;
	color: rgba(7, 62, 120, .035);
}
.intro-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	align-items: end;
	position: relative;
	z-index: 2;
}

.intro-manifest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.manifest-card {
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: rgba(255, 255, 255, .75);
}
.manifest-card b { font-size: 26px; display: block; color: var(--navy); margin-bottom: 7px; }
.manifest-card span { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* -------------------------------------------------- тёмная секция состава */
.featured {
	background: linear-gradient(180deg, #020E20 0%, #041D3D 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.featured:before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 78% 12%, rgba(217, 8, 18, .15), transparent 20%),
		radial-gradient(circle at 13% 76%, rgba(8, 94, 162, .24), transparent 23%);
}
/* Один подъём содержимого над свечением вместо z-index на каждом блоке,
   как было в концепте. */
.featured > .container { position: relative; z-index: 2; }

.featured-head {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	align-items: end;
	margin-bottom: 28px;
}

/* .eyebrow и .empty-state в base.css рассчитаны на белый фон. */
.featured .eyebrow { color: #cce6ff; }
.featured .section-copy { color: rgba(255, 255, 255, .64); }
.featured .empty-state { color: rgba(255, 255, 255, .6); }

/* ------------------------------------------------------ фильтр и поиск -- */
/* В концепте инструменты описаны дважды: светлый вариант и переопределение
   под .featured. Используется только второй — здесь сразу конечные значения. */
.roster-tools {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 28px;
}

.search {
	flex: 1;
	min-width: 280px;
	border: 1px solid rgba(255, 255, 255, .15);
	background: rgba(255, 255, 255, .07);
	color: #fff;
	border-radius: 999px;
	padding: 15px 20px;
	outline: none;
}
.search::placeholder { color: rgba(255, 255, 255, .48); }
.search:focus { border-color: rgba(183, 220, 255, .65); }

.alpha-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .06);
	color: #cce6ff;
	border-radius: 999px;
	padding: 13px 16px;
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
	transition: .2s;
}
.alpha-btn span { font-size: 10px; opacity: .6; }
.alpha-btn:hover { border-color: rgba(255, 255, 255, .4); }
/* Активный класс ставит filter.js — именно .is-active, а не .active из
   концепта. */
.alpha-btn.is-active { background: #fff; color: var(--blue); border-color: #fff; }

/* Счётчик filter.js пишет через textContent, поэтому разметки внутри него
   нет и правила на вложенный <b> из концепта смысла не имеют. */
.roster-counter { font-size: 13px; color: rgba(255, 255, 255, .58); margin-top: 20px; }

/* ------------------------------------------------------ сетка участников */
.members-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.member-card {
	display: block;
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
	color: var(--ink);
	border: 1px solid rgba(255, 255, 255, .08);
	transition: .3s ease;
	min-width: 0;
}
.member-card:hover { transform: translateY(-6px); box-shadow: 0 28px 58px rgba(0, 0, 0, .28); }

/* ОБЯЗАТЕЛЬНО. filter.js прячет карточку свойством item.hidden, а не
   классом; браузерное [hidden]{display:none} проигрывает нашему
   display:block, и без этой строки фильтр молча перестаёт работать. */
.member-card[hidden] { display: none; }

.member-photo-wrap {
	position: relative;
	aspect-ratio: 4 / 5;
	background: linear-gradient(145deg, #0b5e9f, #071d35);
	overflow: hidden;
}
.member-photo-wrap:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 58%, rgba(4, 29, 61, .28));
	pointer-events: none;
}

/* Заглушка для участника без фотографии: инициалы из s_team.initials. */
.member-fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 64px;
	font-weight: 950;
	letter-spacing: -.08em;
	color: rgba(255, 255, 255, .28);
	background: radial-gradient(circle at 70% 20%, rgba(230, 192, 76, .2), transparent 24%);
}

.member-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	display: block;
	transition: .45s ease;
	background: #0b467d;
}
.member-card:hover .member-photo { transform: scale(1.035); }

.member-no {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--red);
	color: #fff;
	font-size: 11px;
	font-weight: 950;
	box-shadow: 0 8px 20px rgba(217, 8, 18, .3);
}

.member-body { padding: 20px 20px 18px; }
.member-body h3 { margin: 0; font-size: 23px; line-height: 1.04; letter-spacing: -.035em; color: var(--navy); }

.member-meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: center;
	margin-top: 13px;
	padding-top: 13px;
	border-top: 1px solid var(--line);
	font-size: 11px;
}
.member-meta span { color: var(--muted); font-weight: 800; }
.member-meta b { color: var(--blue); white-space: nowrap; }

/* ------------------------------------------------------------------ CTA -- */
.cta {
	padding: 84px 0;
	background: linear-gradient(125deg, var(--red), #b7080f 56%, #071d35);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.cta:after {
	content: "STARCO";
	position: absolute;
	right: -30px;
	top: -5px;
	font-size: 165px;
	font-weight: 950;
	letter-spacing: -.07em;
	color: rgba(255, 255, 255, .05);
}
.cta-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
}
.cta h2 {
	font-size: clamp(42px, 6vw, 78px);
	line-height: .9;
	letter-spacing: -.06em;
	text-transform: uppercase;
	margin: 0 0 16px;
}
.cta p { max-width: 760px; color: rgba(255, 255, 255, .76); font-size: 17px; line-height: 1.6; }

/* ------------------------------------------------------------ адаптив -- */
/* Брейкпоинты те же, что в base.css: 1180 / 820 / 560. Правила шапки,
   подвала и меню сюда не дублируются — они уже в base. */
@media (max-width: 1180px) {
	.hero-grid, .intro-grid { grid-template-columns: 1fr; }
	.hero-art { min-height: 490px; }
	.members-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
	.section { padding: 78px 0; }
	.hero { min-height: auto; padding-top: 140px; }
	.hero-grid { gap: 40px; }
	.hero-art { min-height: 405px; }
	.intro-manifest { grid-template-columns: 1fr; }
	.featured-head { flex-direction: column; align-items: start; }
	.members-grid { grid-template-columns: repeat(2, 1fr); }
	.cta-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.hero h1 { font-size: 68px; }
	.hero-lead { font-size: 16px; }
	.hero-art { min-height: 300px; }
	/* Четвёртый портрет и записка не помещаются и начинают наезжать. */
	.p4, .star-note { display: none; }
	.team-badge { left: 15%; padding: 14px 16px; }
	.team-badge b { font-size: 32px; }
	.members-grid { grid-template-columns: 1fr; }
	.member-photo-wrap { aspect-ratio: 5 / 5.7; }
	.member-body h3 { font-size: 25px; }
}