/*
	Сибириус — свой слой поверх Multiverse (html5up.net, CC BY 3.0).
	Тёмная гамма шаблона + читаемые спортивные таблицы на внутренних страницах.
	Подключается ПОСЛЕ main.css.
*/

/*
	ПАЛИТРА И КОНТРАСТ.

	Цвета текста подобраны так, чтобы каждая реально встречающаяся пара
	«текст на своём фоне» проходила WCAG AA (4.5:1 для мелкого текста).
	Раньше не проходили сразу три вещи, и axe ругался на каждой странице:

	  было #707071 на #242629 = 3.06  → стало #9a9a9b = 5.40
	  было #707071 на #1f2224 = 3.23  → стало #9a9a9b = 5.69
	  было #707071 на #2a2d31 = 2.79  → стало #9a9a9b = 4.92
	  белый на акценте #34a58e = 3.04 → тёмный текст на акценте = 6.05

	Приглушённый серый почти догнал основной, поэтому основной осветлён
	с #a0a0a1 (цвет из шаблона Multiverse) до #b8b8ba — иерархия «основной /
	второстепенный» сохранилась, а читаемость на телефоне под солнцем стала
	заметно лучше. Полоска чётных строк таблицы затемнена с #34363b до
	#303236 — на ней тоже живёт приглушённый текст (было 2.44, стало 4.57).
*/
:root {
	--sib-bg:        #242629;
	--sib-bg-alt:    #1f2224;
	--sib-bg-card:   #2a2d31;
	--sib-bg-row:    #292c30;
	--sib-bg-stripe: #303236;
	--sib-fg:        #b8b8ba;
	--sib-fg-bold:   #ffffff;
	--sib-fg-muted:  #9a9a9b;
	--sib-border:    #36383c;
	--sib-border-ctl: #4a4d52;   /* рамки полей, кнопок и чипов: 3,06:1 к фону */
	--sib-border-lt: #44464b;
	--sib-accent:    #34a58e;
	--sib-accent-lt: #3fc2a6;
	--sib-on-accent: #10151a;
	--sib-warn:      #d9a441;
	--sib-container: 76em;
}

/* Multiverse задаёт цвет текста и фон полей своими значениями — подменяем на палитру выше */
body, input, select, textarea { color: var(--sib-fg); }

/* Подсказка в поле: у Multiverse она #707071 с !important — 3,23 к фону */
::placeholder { color: var(--sib-fg-muted) !important; opacity: 1; }
::-webkit-input-placeholder { color: var(--sib-fg-muted) !important; }
::-moz-placeholder { color: var(--sib-fg-muted) !important; opacity: 1; }
:-ms-input-placeholder { color: var(--sib-fg-muted) !important; }

input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="search"], input[type="url"], input[type="date"], select, textarea,
table tbody tr:nth-child(2n + 1) { background: var(--sib-bg-stripe); }

/* Заливные кнопки: белым по акценту было 3.04 — не проходит. Тёмным по тому же акценту 6.05 */
input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary,
button.primary, .button.primary,
input[type="submit"].primary:hover, button.primary:hover, .button.primary:hover,
input[type="submit"].primary:active, button.primary:active, .button.primary:active {
	color: var(--sib-on-accent) !important;
}

.muted { color: var(--sib-fg-muted); }

/* Заголовок на ветке «данные временно недоступны»: страница обязана иметь h1
   даже когда рисовать нечего, иначе она попадает в индекс безголовой. */
.page-head__fallback { margin-bottom: .8em; }

/*
	Рамки органов управления. WCAG 1.4.11 требует 3:1 для границ, по которым
	элемент опознаётся: у шаблонной #36383c было 1,29 — поле ввода на тёмном
	фоне буквально не видно, пока в него не ткнёшь. Декоративные разделители
	(между строками, секциями) остаются прежними: к ним требование не относится.
*/
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="search"], input[type="url"], input[type="date"], select, textarea {
	box-shadow: inset 0 0 0 1px var(--sib-border-ctl);
}

input[type="submit"], input[type="reset"], input[type="button"], button, .button {
	box-shadow: inset 0 0 0 2px var(--sib-border-ctl);
}

input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary,
button.primary, .button.primary { box-shadow: none; }

/* Пустой чекбокс согласия: «коробку» рисует label:before, её тоже надо видеть. */
input[type="checkbox"] + label:before,
input[type="radio"] + label:before { box-shadow: inset 0 0 0 1px var(--sib-border-ctl); }

/*
	Уважение к системной настройке «меньше движения» — целиком, а не только
	для появления плиток: у карточек есть подъём при наведении, у фото —
	масштабирование, у модалки — плавность.
*/
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/*
	Текст для скринридеров и поисковика, невидимый глазу. Нужен там, где
	смысл заголовка передаёт картинка или табло: страница обязана иметь
	один <h1>, а рисовать его поверх дизайна незачем.
*/
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.container {
	width: 100%;
	max-width: var(--sib-container);
	margin: 0 auto;
	padding: 0 2em;
}

@media screen and (max-width: 736px) {
	.container { padding: 0 1.25em; }
}

/* ============================================================
   ГЛАВНАЯ — плитки, модалка, SEO-блок
   ============================================================ */

/*
	У нас 12 плиток — на десктопе держим сетку 4 × 3.
	Оригинальный Multiverse на 1281–1680px переходит на 3 колонки
	(12 плиток → 4 ряда по 3), нам нужна ровная 4×3.
*/
@media screen and (min-width: 1281px) {
	#main .thumb {
		width: 25%;
		height: calc((100vh - 4em) / 2.7);
		min-height: 15em;
	}
}

/* Плитка кликабельна целиком */
#main .thumb { cursor: pointer; }
#main .thumb .image:focus-visible { outline: 3px solid var(--sib-accent); outline-offset: -3px; }
#main .thumb > h2 { pointer-events: none; }

/*
	Фото плитки — настоящий <img>, а не CSS-фон (в Multiverse его подставлял
	JS). Фон грузится всегда и целиком, поэтому телефон качал все 12 картинок
	сразу; <img> умеет loading="lazy" и srcset. Кадрирование то же самое —
	object-fit: cover вместо background-size: cover.
*/
#main .thumb > .image picture { display: block; width: 100%; height: 100%; }
#main .thumb > .image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
	Появление плиток. Раньше это была связка body.is-preload + transition
	с задержкой до 2,5 с, которую снимал JS по window.load: до этого момента
	плитки были прозрачными, и LCP уезжал за 5 секунд. Теперь — CSS-анимация:
	идёт от первой отрисовки, шаг между плитками 60 мс, первая не ждёт вообще.
*/
@keyframes sib-tile-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

#main .thumb {
	animation: sib-tile-in .45s ease-out both;
	transition: none;
}

#main .thumb:nth-child(2)  { animation-delay: .06s; }
#main .thumb:nth-child(3)  { animation-delay: .12s; }
#main .thumb:nth-child(4)  { animation-delay: .18s; }
#main .thumb:nth-child(5)  { animation-delay: .24s; }
#main .thumb:nth-child(6)  { animation-delay: .30s; }
#main .thumb:nth-child(7)  { animation-delay: .36s; }
#main .thumb:nth-child(8)  { animation-delay: .42s; }
#main .thumb:nth-child(9)  { animation-delay: .48s; }
#main .thumb:nth-child(10) { animation-delay: .54s; }
#main .thumb:nth-child(11) { animation-delay: .60s; }
#main .thumb:nth-child(12) { animation-delay: .66s; }

@media (prefers-reduced-motion: reduce) {
	#main .thumb { animation: none; }
}

/*
	Шум и цветокоррекцию владелец запекает прямо в фото (Photoshop),
	поэтому сайт НЕ накладывает свой грейд/зерно — фото показывается 1:1.
	Единственный оверлей остаётся штатный из Multiverse (.thumb:after) —
	лёгкое затемнение у нижней кромки под подпись плитки.
*/

/* Скрытые источники контента модалок */
.tile-sources[hidden] { display: none !important; }

/* Карточка-модалка */
.tile-modal {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 25000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5em;
	opacity: 0;
	visibility: hidden;
	/*
		visibility гасим С ЗАДЕРЖКОЙ, равной затуханию (0s linear .3s), а
		включаем мгновенно — иначе при открытии браузер ещё кадр считает
		модалку скрытой и молча отказывается ставить фокус на крестик
		(focus() на невидимом элементе игнорируется). Плавность при закрытии
		при этом сохраняется.
	*/
	transition: opacity .3s ease, visibility 0s linear .3s;
	/*
		Пока идёт затухание, слой ещё «висит» над страницей: без этого клик
		по соседней плитке сразу после закрытия попадал в невидимый оверлей
		и терялся.
	*/
	pointer-events: none;
}

.tile-modal.is-visible {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease, visibility 0s;
}

.tile-modal__overlay {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(12, 14, 16, .78);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.tile-modal__card {
	position: relative;
	z-index: 1;
	width: 100%;
	min-width: 0; /* flex-элемент: иначе min-content контента распирает шире экрана */
	max-width: 38em;
	max-height: 88vh;
	overflow-y: auto;
	background: var(--sib-bg);
	border: solid 1px var(--sib-border);
	box-shadow: 0 1.5em 4em rgba(0, 0, 0, .55);
	transform: translateY(14px) scale(.985);
	transition: transform .3s ease;
}

.tile-modal.is-visible .tile-modal__card { transform: none; }

.tile-modal__close {
	position: absolute;
	top: .35em; right: .35em;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9em; height: 1.9em;
	padding: 0 0 .1em 0; /* оптическая центровка глифа × (у него смещён baseline) */
	font-size: 1.5em;
	line-height: 1;
	color: var(--sib-fg-bold) !important;
	background: rgba(0, 0, 0, .45);
	box-shadow: none;
	border: 0;
	cursor: pointer;
}

/* !important + класс:hover — иначе глобальный button:hover из Multiverse
   красит глиф в акцент, и крестик исчезает на акцентном фоне. */
.tile-modal__close:hover {
	background: var(--sib-accent);
	color: var(--sib-on-accent) !important;
	box-shadow: none;
}

.tile-modal__close:hover:active { background: var(--sib-accent); color: var(--sib-on-accent) !important; }
.tile-modal__close:focus { outline: none; }
.tile-modal__close:focus-visible { outline: 2px solid var(--sib-accent); outline-offset: 2px; }

.tile-modal__media {
	height: 15em;
	border-bottom: solid 1px var(--sib-border);
	overflow: hidden;
}

/* <picture> по умолчанию строчный — без этого проценты высоты у <img> не от чего считать */
.tile-modal__media picture,
.tile-modal__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.tile-modal__media img { object-fit: cover; }

.tile-modal__content { padding: 2em; }
.tile-modal__title { margin: 0 0 .75em 0; }
.tile-modal__text { margin: 0 0 1.5em 0; }
.tile-modal__actions { margin-top: .5em; }

/* Манифест (модалка плитки 1 + страница «О турнире») */
.manifest p { margin: 0 0 1.15em 0; }
.manifest p:last-of-type { margin-bottom: 0; }

.manifest__quote {
	margin: 1.6em 0 0 0;
	padding: .3em 0 .3em 1.15em;
	border-left: solid 3px var(--sib-accent);
	color: var(--sib-fg-bold);
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
}

/* Читаемая колонка текста на контентных страницах */
.prose { max-width: 44em; }
.prose .manifest__quote { font-size: 1.05em; }

/* ============================================================
   СТРАНИЦА «О ТУРНИРЕ»
   ============================================================ */

.about__block { margin: 0 0 3em 0; }
.about__block:last-child { margin-bottom: 0; }

.about__label {
	font-size: .8em;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sib-fg-muted);
	margin: 0 0 1em 0;
}

/* Девиз и Миссия — одинаковые по размеру короткие утверждения. */
.about__motto,
.about__lead {
	margin: 0;
	max-width: 42em;
	font-size: 1.2em;
	font-weight: 500;
	line-height: 1.5;
	color: var(--sib-fg-bold);
}

/* Заголовок раздела «История турнира» — крупнее меток, с отбивкой сверху. */
.about__heading {
	margin: 0 0 1.1em 0;
	padding-top: 2em;
	border-top: solid 1px var(--sib-border);
	font-size: 1.4em;
}

.about__goals {
	counter-reset: goal;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 46em;
}

.about__goals li {
	counter-increment: goal;
	position: relative;
	padding: 0 0 1.1em 2.9em;
	line-height: 1.55;
}

.about__goals li:last-child { padding-bottom: 0; }

.about__goals li::before {
	content: counter(goal);
	position: absolute;
	left: 0;
	top: .05em;
	width: 1.9em;
	height: 1.9em;
	border-radius: 50%;
	background: rgba(52, 165, 142, .14);
	color: var(--sib-accent-lt);
	font-size: .85em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media screen and (max-width: 736px) {
	.about__motto,
	.about__lead { font-size: 1.05em; }
	.about__heading { font-size: 1.2em; }
}

body.modal-open { overflow: hidden; }

/* Витрина турниров в модалке плитки «Турниры» */
.t-sec { margin-top: 1.75em; }
.t-sec:first-child { margin-top: 0; }

.t-sec__title {
	margin: 0 0 .4em 0;
	padding-bottom: .5em;
	border-bottom: solid 1px var(--sib-border);
	font-size: .75em;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sib-fg-muted);
}

.t-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: .1em 1.2em;
	padding: .6em 0;
	border-bottom: solid 1px rgba(255, 255, 255, .05);
}

.t-item:last-child { border-bottom: 0; }

.t-item__main {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .5em;
	min-width: 0;
}

.t-item__name { color: var(--sib-fg-bold); }
.t-item:hover .t-item__name { color: var(--sib-accent-lt); }

.t-item__age {
	color: var(--sib-accent-lt);
	font-size: .8em;
	letter-spacing: .04em;
	white-space: nowrap;
}

.t-item__meta {
	color: var(--sib-fg-muted);
	font-size: .82em;
	white-space: nowrap;
}

.t-sec__more { margin-top: 1em; }

/* Модалка «Команды»: лидеры по победам + география.
   Десктоп: 8 команд 4×2; мобила: 2 в ряд, показываем первые 6. */
.leaders-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .6em;
}

@media screen and (max-width: 736px) {
	.leaders-strip { grid-template-columns: repeat(2, 1fr); }
	.leaders-strip__item:nth-child(n+7) { display: none; }
}

.leaders-strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4em;
	padding: .8em .4em .7em;
	text-align: center;
	min-width: 0; /* иначе 1fr не ужимается ниже min-content и распирает модалку */
	background: var(--sib-bg-alt);
	border: solid 1px var(--sib-border);
	border-bottom: solid 1px var(--sib-border);
	border-radius: 6px;
	transition: border-color .2s ease, transform .2s ease;
}

.leaders-strip__name { overflow-wrap: break-word; max-width: 100%; }

.leaders-strip__item:hover { border-color: var(--sib-accent); transform: translateY(-2px); }
.leaders-strip__logo { width: 2.8em; height: 2.8em; object-fit: contain; }

.leaders-strip__name {
	color: var(--sib-fg-bold);
	font-size: .78em;
	line-height: 1.25;
}

.leaders-strip__year { color: var(--sib-accent-lt); }
.leaders-strip__wins { color: var(--sib-fg-muted); font-size: .7em; }

.city-list { margin: 0; padding: 0; list-style: none; }

.city-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	padding: .45em 0;
	border-bottom: solid 1px rgba(255, 255, 255, .05);
}

.city-list li:last-child { border-bottom: 0; }
.city-list__name { color: var(--sib-fg); }
.city-list__count { color: var(--sib-fg-muted); font-variant-numeric: tabular-nums; font-size: .85em; }

/* Секция live-матчей — акцент */
.t-sec--live .t-sec__title {
	color: #e0776e;
	border-bottom-color: rgba(196, 85, 77, .45);
}

/* Компактная строка матча (модалка «Матчи») */
.g-item {
	display: block;
	padding: .65em 0;
	border-bottom: solid 1px rgba(255, 255, 255, .05);
}

.g-item:last-of-type { border-bottom: 0; }

.g-item__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: .8em;
	align-items: center;
}

.g-item__team {
	color: var(--sib-fg);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.g-item__team--home { text-align: right; }
.g-item__team--away { text-align: left; }
.g-item__team.is-winner { color: var(--sib-fg-bold); font-weight: 600; }
.g-item:hover .g-item__team { color: var(--sib-accent-lt); }

.g-item__center { text-align: center; min-width: 3.2em; }

.g-item__score {
	color: var(--sib-fg-bold);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.g-item__suffix {
	color: var(--sib-accent-lt);
	font-size: .62em;
	margin-left: .2em;
	font-weight: 400;
}

.g-item__time { color: var(--sib-fg-muted); font-variant-numeric: tabular-nums; }

.g-item__meta {
	display: block;
	margin-top: .15em;
	color: var(--sib-fg-muted);
	font-size: .78em;
	text-align: center;
}

@media screen and (max-width: 736px) {
	.tile-modal { padding: .75em; }
	.tile-modal__media { height: 11em; }
	.tile-modal__content { padding: 1.5em; }
}

/* SEO-блок под плитками + футер на главной должны лежать НАД фоновыми слоями #wrapper */
.seo-block {
	position: relative;
	z-index: 5;
	background: var(--sib-bg);
	border-top: solid 1px var(--sib-border);
	padding: 4em 0 3em 0;
}

.seo-block h1 { font-size: 1.75em; }
.seo-block p { max-width: 48em; }

body.home .site-footer { position: relative; z-index: 5; }

@media screen and (max-width: 736px) {
	.seo-block { padding: 3em 0 2em 0; }
	.seo-block h1 { font-size: 1.25em; }
}

/* ============================================================
   ШАПКА / НАВИГАЦИЯ (внутренние страницы)
   ============================================================ */

/*
	Multiverse резервирует на body место под свою плавающую панель #header:
	`padding: 0 0 4em 0` в общем случае и `padding: 4em 0 0 0` на экранах
	до 736px. Панель есть только на главной. На внутренних страницах шапка
	обычная, в потоке, — и резерв превращается в пустоту: снизу под футером
	на десктопе и сверху над шапкой на мобильном.
*/
body:not(.home) { padding: 0; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(31, 34, 36, .97);
	border-bottom: solid 1px var(--sib-border);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5em;
	min-height: 4.5em;
}

.site-brand {
	display: flex;
	flex-direction: column;
	border-bottom: 0;
	line-height: 1.2;
}

.site-brand:hover { border-bottom: 0; }

.site-brand__logo {
	display: block;
	height: 1.75em;
	width: auto;
	margin-bottom: .35em;
}

/* В шапке слогана нет — убираем отступ под лого, чтобы не съезжал по вертикали. */
.site-header .site-brand__logo { margin-bottom: 0; }

.site-brand__name {
	color: var(--sib-fg-bold);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: 1.05em;
}

.site-brand--footer .site-brand__logo { height: 2em; margin-bottom: .6em; }

/* Логотип в шапке-галерее (Multiverse #header) */
#header .site-brand__logo--header {
	height: 26px;
	width: auto;
	margin: 0;
}

@media screen and (max-width: 736px) {
	#header .site-brand__logo--header { height: 22px; }
	.site-brand__logo { height: 1.5em; }
}

.site-brand__tagline {
	color: var(--sib-fg-muted);
	font-size: .7em;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 1.75em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	border-bottom: 0;
	color: var(--sib-fg);
	font-size: .8em;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: .4em 0;
	border-bottom: solid 2px transparent;
}

.site-nav__list a:hover { color: var(--sib-accent) !important; border-bottom-color: transparent; }
.site-nav__list a.is-active { color: var(--sib-fg-bold) !important; border-bottom-color: var(--sib-accent); }

.site-nav__toggle {
	display: none;
	width: 2.75em;
	height: 2.75em;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border: solid 1px var(--sib-border);
}

.site-nav__toggle span {
	display: block;
	width: 1.1em;
	height: 2px;
	margin: 3px auto;
	background: var(--sib-fg-bold);
}

@media screen and (max-width: 980px) {
	.site-nav__toggle { display: block; }

	.site-nav__list {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: .5em 2em 1.5em 2em;
		background: var(--sib-bg-alt);
		border-bottom: solid 1px var(--sib-border);
	}

	.site-nav__list.is-open { display: flex; }
	.site-nav__list li { width: 100%; }
	.site-nav__list a { display: block; padding: .9em 0; width: 100%; }
	.site-header__inner { position: static; }
	.site-header { position: relative; }
}

/* ============================================================
   СТРАНИЦА
   ============================================================ */

body.page-mode { background: var(--sib-bg); }

.page { padding: 3em 0 4em 0; min-height: 60vh; }

.breadcrumbs { margin-bottom: 2em; }

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .8em;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.breadcrumbs li + li:before { content: '/'; margin-right: .5em; color: var(--sib-fg-muted); }
.breadcrumbs a { border-bottom: 0; color: var(--sib-fg-muted); }
.breadcrumbs a:hover { color: var(--sib-accent) !important; }
.breadcrumbs span { color: var(--sib-fg); }

.page-head { margin-bottom: 2.5em; }
.page-head h1 { margin-bottom: .4em; font-size: 1.9em; }
.page-lead { color: var(--sib-fg); margin: 0; max-width: 46em; }

@media screen and (max-width: 736px) {
	.page { padding: 2em 0 3em 0; }
	.page-head h1 { font-size: 1.3em; }
}

/* Карточка */
.card {
	background: var(--sib-bg-card);
	border: solid 1px var(--sib-border);
	padding: 2em;
	margin: 0 0 2em 0;
}

.card > :last-child { margin-bottom: 0; }

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19em, 1fr));
	gap: 1.5em;
	margin-bottom: 2em;
}

/* Уведомления: «скоро», «нет данных», «данные устарели» */
.notice {
	display: flex;
	gap: 1.25em;
	align-items: flex-start;
	background: var(--sib-bg-card);
	border: solid 1px var(--sib-border);
	border-left: solid 3px var(--sib-fg-muted);
	padding: 1.75em 2em;
	margin: 0 0 2em 0;
}

.notice__icon { color: var(--sib-fg-muted); font-size: 1.5em; line-height: 1; }
.notice__title { margin: 0 0 .5em 0; font-size: 1em; }
.notice__body { color: var(--sib-fg); }
.notice__body > :last-child { margin-bottom: 0; }

.notice--soon  { border-left-color: var(--sib-accent); }
.notice--soon .notice__icon { color: var(--sib-accent); }
.notice--stale { border-left-color: var(--sib-warn); }
.notice--stale .notice__icon { color: var(--sib-warn); }
.notice--error { border-left-color: #c4554d; }
.notice--error .notice__icon { color: #c4554d; }

/* ============================================================
   ТАБЛИЦЫ — главное требование: читаемость
   ============================================================ */

.table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 2em 0;
	border: solid 1px var(--sib-border);
	background: var(--sib-bg-card);
}

.data-table {
	width: 100%;
	min-width: 44em;
	margin: 0; /* сброс table { margin-bottom: 2em } из Multiverse — иначе «пустой ряд» внутри рамки */
	border-collapse: collapse;
	font-size: .9em;
}

.data-table th,
.data-table td {
	padding: .85em 1em;
	text-align: left;
	vertical-align: middle;
	border-bottom: solid 1px var(--sib-border);
}

.data-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--sib-bg-alt);
	color: var(--sib-fg-bold);
	font-size: .8em;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: solid 2px var(--sib-border-lt);
}

.data-table tbody tr:nth-child(even) { background: var(--sib-bg-row); }
.data-table tbody tr:hover { background: rgba(52, 165, 142, .09); }
.data-table tbody tr:last-child td { border-bottom: 0; }

/* Числовые колонки */
.data-table .num { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .num--key { color: var(--sib-fg-bold); font-weight: 600; }

/* Сортируемые колонки (Зал славы: вратари по %ОБ / КН) */
.data-table th.num--sort { padding: 0; -webkit-user-select: none; user-select: none; }

/* Кнопка сортировки прикидывается заголовком столбца: у Multiverse свои
   заливка, рамка, размер и капитель для button — всё сбрасываем. */
.data-table th.num--sort .sort-btn {
	all: unset;
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: .85em 1em;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: center;
	text-transform: none;
	cursor: pointer;
}

.data-table th.num--sort .sort-btn:hover { color: var(--sib-accent-lt); }
.data-table th.num--sort .sort-btn:focus-visible { outline: 2px solid var(--sib-accent); outline-offset: -2px; }
.sort-arrow::after { content: '↕'; margin-left: .35em; opacity: .4; font-weight: 400; }
.data-table th[aria-sort="ascending"] .sort-arrow::after { content: '↑'; opacity: 1; color: var(--sib-accent-lt); }
.data-table th[aria-sort="descending"] .sort-arrow::after { content: '↓'; opacity: 1; color: var(--sib-accent-lt); }

.leaders__hint { margin: .8em 0 0 0; color: var(--sib-fg-muted); font-size: .82em; }

/* Позиция в таблице */
.data-table .pos {
	width: 3em;
	text-align: center;
	color: var(--sib-fg-muted);
	font-variant-numeric: tabular-nums;
}

/* Команда: лого + название + additional_name */
.team-cell { display: flex; align-items: center; gap: .75em; min-width: 14em; }

.team-cell__logo {
	width: 1.9em;
	height: 1.9em;
	object-fit: contain;
	flex: 0 0 auto;
	background: var(--sib-bg-alt);
	border-radius: 2px;
}

.team-cell__name { color: var(--sib-fg-bold); line-height: 1.25; }

.team-cell__additional {
	display: block;
	color: var(--sib-fg-muted);
	font-size: .8em;
	letter-spacing: .06em;
}

@media screen and (max-width: 736px) {
	.data-table { font-size: .8em; }
	.data-table th, .data-table td { padding: .7em .6em; }
	.data-table th.num--sort { padding: 0; }
	.data-table th.num--sort .sort-btn { padding: .7em .6em; }
}

/* ============================================================
   ТУРНИРЫ — фильтры, сезоны, карточки
   ============================================================ */

.filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em 2em;
	margin: 0 0 2.5em 0;
}

.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
}

/* Десктоп: типы турниров всегда в один ряд */
@media screen and (min-width: 737px) {
	.filter-chips { flex-wrap: nowrap; }
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding: .5em 1.1em;
	border: solid 1px var(--sib-border-ctl);
	border-bottom: solid 1px var(--sib-border-ctl);
	color: var(--sib-fg);
	font-size: .8em;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.chip:hover { border-color: var(--sib-accent); color: var(--sib-accent) !important; }

.chip.is-active {
	border-color: var(--sib-accent);
	background: rgba(52, 165, 142, .12);
	color: var(--sib-fg-bold) !important;
}

.chip__count {
	color: var(--sib-fg-muted);
	font-size: .85em;
	font-variant-numeric: tabular-nums;
}

.chip.is-active .chip__count { color: var(--sib-accent-lt); }

.filter-age {
	display: flex;
	align-items: center;
	gap: .8em;
	flex-shrink: 0; /* селект не сжимаем — выбранный год не должен резаться в «20…» */
	margin: 0; /* сброс form { margin-bottom: 2em } из Multiverse — иначе блок уезжает вверх */
}

.filter-age__label {
	color: var(--sib-fg-muted);
	font-size: .8em;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
	margin: 0; /* сброс label { margin-bottom: 1em } из Multiverse — центрируем с селектом */
}

.filter-age select {
	background: var(--sib-bg-alt);
	border: solid 1px var(--sib-border);
	color: var(--sib-fg-bold);
	padding: .5em 2.4em .5em .9em;
	min-width: 7em;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a0a0a1' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .9em center;
}

.filter-age select:focus {
	outline: none;
	border-color: var(--sib-accent);
	box-shadow: 0 0 0 1px var(--sib-accent);
}

.season { margin: 0 0 3em 0; }

.season__title {
	display: flex;
	align-items: baseline;
	gap: .6em;
	font-size: 1.05em;
	margin: 0 0 1.1em 0;
	padding-bottom: .6em;
	border-bottom: solid 1px var(--sib-border);
}

.season__count {
	color: var(--sib-fg-muted);
	font-size: .8em;
	font-variant-numeric: tabular-nums;
}

.t-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19em, 1fr));
	gap: 1em;
}

.t-card {
	display: flex;
	flex-direction: column;
	gap: .35em;
	padding: 1.15em 1.3em;
	background: var(--sib-bg-card);
	border: solid 1px var(--sib-border);
	border-bottom: solid 1px var(--sib-border);
	transition: border-color .2s ease, transform .2s ease;
}

.t-card:hover { border-color: var(--sib-accent); }

.t-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1em;
}

.t-card__name { color: var(--sib-fg-bold); line-height: 1.3; }

.t-card__age {
	color: var(--sib-accent-lt);
	margin-left: .25em;
}

.t-card__dates { color: var(--sib-fg); font-size: .9em; }
.t-card__place { color: var(--sib-fg-muted); font-size: .82em; }

@media screen and (max-width: 736px) {
	.filter-bar { flex-direction: column; align-items: stretch; }
	.filter-age { justify-content: space-between; }
	.t-card-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   КАРТОЧКА ТУРНИРА
   ============================================================ */

.t-head { margin: 0 0 2em 0; }

.t-head__name {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5em .7em;
	font-size: 1.9em;
	margin: 0 0 .35em 0;
}

.t-head__name .badge { font-size: .38em; }
.t-head__age { color: var(--sib-accent-lt); }

.t-head__meta { margin: 0; color: var(--sib-fg-muted); }

.t-stage { margin: 0 0 2.5em 0; }
.t-stage__title { font-size: 1em; margin-bottom: 1em; }

.data-table tr.is-muted td { opacity: .55; }

/* Расписание: дни и строки матчей */
.game-day { margin: 0 0 2.5em 0; }

.game-day__title {
	font-size: .8em;
	letter-spacing: .14em;
	color: var(--sib-fg-muted);
	margin: 0 0 .6em 0;
	padding-bottom: .5em;
	border-bottom: solid 1px var(--sib-border);
}

.game-row {
	display: grid;
	grid-template-columns: 4.5em 1fr 14em;
	gap: 1em;
	align-items: center;
	padding: .8em .9em;
	border-bottom: solid 1px rgba(255, 255, 255, .05);
	border-left: solid 2px transparent;
}

.game-row:hover { background: rgba(52, 165, 142, .07); border-left-color: var(--sib-accent); }
.game-row:last-child { border-bottom: 0; }

/* Режим с датой в первой колонке (списки без группировки по дням) */
.game-row--date { grid-template-columns: 7em 1fr 14em; }

.game-row__time {
	color: var(--sib-fg-muted);
	font-variant-numeric: tabular-nums;
	font-size: .9em;
}

.game-row__match {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: .9em;
	align-items: center;
	min-width: 0;
}

.game-row__team {
	display: flex;
	align-items: center;
	gap: .6em;
	min-width: 0;
	color: var(--sib-fg);
}

.game-row__team--home { justify-content: flex-end; text-align: right; }
.game-row__team--away { justify-content: flex-start; }
.game-row__team.is-winner .game-row__team-name { color: var(--sib-fg-bold); font-weight: 600; }

.game-row__team-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.game-row__logo {
	width: 1.8em;
	height: 1.8em;
	object-fit: contain;
	flex: 0 0 auto;
}

.game-row__score {
	color: var(--sib-fg-bold);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	min-width: 3em;
	text-align: center;
}

.game-row__suffix {
	color: var(--sib-accent-lt);
	font-size: .6em;
	margin-left: .2em;
	font-weight: 400;
}

.game-row__meta {
	color: var(--sib-fg-muted);
	font-size: .8em;
	text-align: right;
}

@media screen and (max-width: 736px) {
	.game-row { grid-template-columns: 1fr; gap: .4em; padding: .8em .6em; }
	.game-row__meta { text-align: left; }
	.game-row__match { grid-template-columns: 1fr auto 1fr; }
}

/* ============================================================
   ИГРОКИ — поиск, сетка, профиль
   ============================================================ */

input.search-input {
	background: var(--sib-bg-alt);
	border: solid 1px var(--sib-border);
	color: var(--sib-fg-bold);
	padding: .5em 1em;
	min-width: 16em;
}

.search-input:focus,
.search-year:focus {
	outline: none;
	border-color: var(--sib-accent);
	box-shadow: 0 0 0 1px var(--sib-accent);
}

.search-input::placeholder { color: var(--sib-fg-muted); }

.search-year {
	background: var(--sib-bg-alt);
	border: solid 1px var(--sib-border);
	color: var(--sib-fg-bold);
	padding: .5em 2.2em .5em .8em;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a0a0a1' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8em center;
}

.player-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
	gap: .9em;
}

.p-card {
	display: flex;
	align-items: center;
	gap: .9em;
	padding: .8em 1em;
	background: var(--sib-bg-card);
	border: solid 1px var(--sib-border);
	border-bottom: solid 1px var(--sib-border);
}

.p-card:hover { border-color: var(--sib-accent); }

.p-card__avatar {
	flex: 0 0 auto;
	width: 3em;
	height: 3em;
	border-radius: 50%;
	overflow: hidden;
	background: var(--sib-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
}

.p-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.p-card__ph { color: var(--sib-fg-muted); font-weight: 600; }

.p-card__body { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.p-card__name { color: var(--sib-fg-bold); line-height: 1.3; }
/* Названия карточек — h2 ради структуры страницы; кегль и отступы у них свои */
.team-card__name, .p-card__name, .acard__title, .vcard__title { margin: 0; font-size: 1em; letter-spacing: 0; text-transform: none; }
.p-card__meta { color: var(--sib-fg-muted); font-size: .78em; }

.player-head {
	display: flex;
	align-items: center;
	gap: 1.8em;
	margin: 0 0 2.5em 0;
}

.player-head__avatar {
	flex: 0 0 auto;
	width: 7em;
	height: 7em;
	border-radius: 50%;
	overflow: hidden;
	background: var(--sib-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	border: solid 2px var(--sib-border-lt);
}

.player-head__avatar img { width: 100%; height: 100%; object-fit: cover; }
.player-head__ph { color: var(--sib-fg-muted); font-size: 2.4em; font-weight: 600; }

.player-head__name { margin: 0 0 .25em 0; font-size: 1.7em; }
.player-head__meta { margin: 0 0 .5em 0; color: var(--sib-fg-muted); }

.player-head__team {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0;
}

.player-head__team a { border-bottom: 0; color: var(--sib-fg-bold); }
.player-head__team a:hover { color: var(--sib-accent) !important; }
.player-head__team-logo { width: 1.6em; height: 1.6em; object-fit: contain; }

.leaders__season { display: block; font-size: .78em; }

@media screen and (max-width: 736px) {
	.player-head { gap: 1.2em; }
	.player-head__avatar { width: 5em; height: 5em; }
	.player-head__name { font-size: 1.25em; }
	input.search-input { min-width: 0; width: 100%; }
}

/* ============================================================
   КАРТОЧКА МАТЧА
   ============================================================ */

.match-head { margin: 0 0 2.5em 0; }

.match-head__meta {
	margin: 0 0 1.2em 0;
	color: var(--sib-fg-muted);
	text-align: center;
}

.match-score {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1.5em;
	align-items: center;
	padding: 1.8em 1.5em;
	background: var(--sib-bg-card);
	border: solid 1px var(--sib-border);
}

.match-score__team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .7em;
	text-align: center;
	min-width: 0;
}

.match-score__logo { width: 4.5em; height: 4.5em; object-fit: contain; }

.match-score__name a { border-bottom: 0; color: var(--sib-fg-bold); }
.match-score__name a:hover { color: var(--sib-accent) !important; }

.match-score__city {
	color: var(--sib-fg-muted);
	font-size: .78em;
	margin-top: -.4em;
}
.match-score__team.is-winner .match-score__name a,
.match-score__team.is-winner .match-score__name { font-weight: 600; }

.match-score__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3em;
}

.match-score__value {
	color: var(--sib-fg-bold);
	font-size: 2.6em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	white-space: nowrap;
}

.match-score__suffix {
	color: var(--sib-accent-lt);
	font-size: .75em;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.match-section { margin: 0 0 3em 0; }
.match-section__title { font-size: 1.05em; margin-bottom: 1em; }

.match-period {
	font-size: .8em;
	letter-spacing: .14em;
	color: var(--sib-fg-muted);
	margin: 1.5em 0 .6em 0;
	padding-bottom: .4em;
	border-bottom: solid 1px var(--sib-border);
}

.protocol__row {
	display: grid;
	grid-template-columns: 3.2em 1.6em 1fr;
	gap: .8em;
	align-items: baseline;
	padding: .55em 0;
	border-bottom: solid 1px rgba(255, 255, 255, .04);
}

.protocol__row:last-child { border-bottom: 0; }

.protocol__time {
	color: var(--sib-fg-muted);
	font-variant-numeric: tabular-nums;
	font-size: .88em;
}

.protocol__icon { color: var(--sib-fg-muted); font-size: .8em; text-align: center; }
.protocol__row--goal .protocol__icon { color: var(--sib-accent-lt); }

.protocol__body { display: flex; flex-direction: column; gap: .1em; min-width: 0; }
.protocol__row--goal .protocol__main { color: var(--sib-fg-bold); }

.protocol__label {
	color: var(--sib-accent-lt);
	font-size: .78em;
	margin-left: .4em;
}

.protocol__assists,
.protocol__team { color: var(--sib-fg-muted); font-size: .8em; }

.rosters {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2em;
}

.rosters__team { font-size: .9em; margin-bottom: .8em; }
.rosters__player { border-bottom: 0; color: var(--sib-fg-bold); }
.rosters__player:hover { color: var(--sib-accent) !important; }

.data-table--roster { min-width: 0; font-size: .85em; }

@media screen and (max-width: 980px) {
	.rosters { grid-template-columns: 1fr; }
}

@media screen and (max-width: 736px) {
	.match-score { grid-template-columns: 1fr auto 1fr; padding: 1.2em .8em; gap: .8em; }
	.match-score__value { font-size: 1.8em; }
	.match-score__logo { width: 3em; height: 3em; }
}

/* Фильтр по датам + пагинация (лента матчей) */
.filter-bar--dates { margin-bottom: 2em; }

.filter-dates {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1em;
}

.filter-dates__field {
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 0;
}

.filter-dates__label {
	color: var(--sib-fg-muted);
	font-size: .8em;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.filter-dates input[type="date"] {
	background: var(--sib-bg-alt);
	border: solid 1px var(--sib-border);
	color: var(--sib-fg-bold);
	padding: .45em .8em;
	color-scheme: dark;
}

.filter-dates input[type="date"]:focus {
	outline: none;
	border-color: var(--sib-accent);
	box-shadow: 0 0 0 1px var(--sib-accent);
}

.filter-dates__reset { border-bottom: 0; font-size: .85em; }

.filter-total { margin: .8em 0 0 0; font-size: .82em; }

.pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5em;
	margin-top: 2.5em;
}

.pager__info {
	color: var(--sib-fg-muted);
	font-size: .85em;
	font-variant-numeric: tabular-nums;
}

/* Команды турнира */
.teams-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
	gap: 1em;
}

.team-card {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 1em 1.2em;
	background: var(--sib-bg-card);
	border: solid 1px var(--sib-border);
	border-bottom: solid 1px var(--sib-border);
}

.team-card:hover { border-color: var(--sib-accent); }

.team-card__logo {
	width: 3em;
	height: 3em;
	object-fit: contain;
	flex: 0 0 auto;
}

.team-card__logo--ph { background: var(--sib-bg-alt); border-radius: 4px; }

.team-card__body { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
.team-card__name { color: var(--sib-fg-bold); line-height: 1.3; }
.team-card__year { color: var(--sib-accent-lt); margin-left: .25em; }
.team-card__city { color: var(--sib-fg-muted); font-size: .78em; }
.team-card__stats { color: var(--sib-fg-muted); font-size: .74em; }

.filter-chips--sort { margin: -1em 0 2em 0; }
.team-card__note { color: var(--sib-fg-muted); font-size: .78em; }

/* Квадратный «аватар» для лого команды в шапке карточки */
.player-head__avatar--square {
	border-radius: 12px;
	background: var(--sib-bg-card);
}

.player-head__avatar--square img { object-fit: contain; padding: .5em; }

.team-card__pos {
	font-size: .78em;
	color: var(--sib-fg-muted);
}

.team-card__pos.rank {
	width: auto;
	height: auto;
	border-radius: 3px;
	padding: .15em .6em;
}

.leaders__team { color: var(--sib-fg); font-size: .9em; }

/* ============================================================
   ЗАЛ СЛАВЫ / ЛИДЕРЫ
   ============================================================ */

.hall-note {
	color: var(--sib-fg-muted);
	font-size: .9em;
	margin: 0 0 2.5em 0;
	padding-left: 1em;
	border-left: solid 2px var(--sib-border-lt);
}

.leaders { margin-bottom: 3em; }

.leaders__title {
	display: flex;
	align-items: center;
	gap: .55em;
	font-size: 1.05em;
	margin-bottom: 1.1em;
}

.leaders__title .icon { color: var(--sib-accent); }
.leaders__title .icon:before { font-size: .95em; }

/* Ячейка игрока: аватар + имя + год рождения */
.player-cell {
	display: flex;
	align-items: center;
	gap: .85em;
	min-width: 13em;
}

.player-cell__avatar {
	flex: 0 0 auto;
	width: 2.6em;
	height: 2.6em;
	border-radius: 50%;
	overflow: hidden;
	background: var(--sib-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
}

.player-cell__avatar img { width: 100%; height: 100%; object-fit: cover; }
.player-cell__ph { color: var(--sib-fg-muted); font-weight: 600; }

.player-cell__meta { display: flex; flex-direction: column; line-height: 1.25; }
.player-cell__num { color: var(--sib-fg-bold); font-weight: 700; font-size: .78em; letter-spacing: .04em; }
.player-cell__name { color: var(--sib-fg-bold); border-bottom: 0; }
.player-cell__name:hover { color: var(--sib-accent) !important; }
.player-cell__year { color: var(--sib-fg-muted); font-size: .78em; }

/* Ранг: медали для топ-3 */
.rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	font-size: .85em;
	font-variant-numeric: tabular-nums;
	color: var(--sib-fg);
}

.rank--1 { background: linear-gradient(150deg, #f6d365, #c9962f); color: #241a04; font-weight: 700; }
.rank--2 { background: linear-gradient(150deg, #e6e9ee, #a9b0bb); color: #1c1f24; font-weight: 700; }
.rank--3 { background: linear-gradient(150deg, #e2a56a, #b9713a); color: #241503; font-weight: 700; }

@media screen and (max-width: 736px) {
	.player-cell { min-width: 10em; gap: .6em; }
	.player-cell__avatar { width: 2.1em; height: 2.1em; }
}

/* ============================================================
   ВКЛАДКИ (карточка турнира)
   ============================================================ */

.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 2em 0;
	padding: 0;
	list-style: none;
	border-bottom: solid 1px var(--sib-border);
}

.tabs a {
	display: block;
	padding: .9em 1.4em;
	border-bottom: solid 2px transparent;
	color: var(--sib-fg);
	font-size: .8em;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tabs a:hover { color: var(--sib-accent) !important; }
.tabs a.is-active { color: var(--sib-fg-bold) !important; border-bottom-color: var(--sib-accent); }

@media screen and (max-width: 736px) {
	.tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.tabs a { padding: .8em 1em; }
}

/* Бейджи статусов */
.badge {
	display: inline-block;
	padding: .3em .8em;
	font-size: .7em;
	letter-spacing: .1em;
	text-transform: uppercase;
	border: solid 1px var(--sib-border-lt);
	color: var(--sib-fg);
	white-space: nowrap;
}

.badge--live     { border-color: #c4554d; color: #e0776e; }
.badge--active   { border-color: var(--sib-accent); color: var(--sib-accent-lt); }
.badge--finished { border-color: var(--sib-border-lt); color: var(--sib-fg-muted); }

/* ============================================================
   УСЛУГИ
   ============================================================ */

.svc-list { margin: 0 0 2em 0; }

.service-card {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5em 2em;
	flex-wrap: wrap;
	padding: 1.5em 1.75em;
	background: var(--sib-bg-card);
	border: solid 1px var(--sib-border);
	border-bottom: solid 1px var(--sib-border);
	margin-bottom: 1em;
}

.service-card:hover { border-color: var(--sib-border-lt); }
.service-card__body { flex: 1 1 22em; min-width: 0; }
.service-card__title { font-size: 1.1em; margin: 0 0 .5em 0; }
.service-card__desc { margin: 0; color: var(--sib-fg); }

.service-card__author {
	margin: .8em 0 0 0;
	padding-left: .9em;
	border-left: solid 2px var(--sib-accent);
	color: var(--sib-fg-muted);
	font-size: .88em;
}

.service-card__price {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.service-card__amount {
	color: var(--sib-fg-bold);
	font-size: 1.5em;
	font-weight: 600;
	white-space: nowrap;
}

.service-card__unit { color: var(--sib-fg-muted); font-size: .82em; }

.svc-order { margin-top: 2em; }
.svc-order__title { font-size: 1.1em; margin-bottom: .6em; }

.svc-contacts {
	display: flex;
	flex-wrap: wrap;
	gap: .7em;
	margin-top: 1.2em;
}

.svc-contacts .button { border-bottom: 0; }
.svc-contacts__max::before { content: 'M'; font-weight: 700; margin-right: .5em; }

/* Прайс-строки в модалке услуг */
.svc-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5em;
	padding: .7em 0;
	border-bottom: solid 1px rgba(255, 255, 255, .06);
}

.svc-row:last-child { border-bottom: 0; }
.svc-row__title { color: var(--sib-fg-bold); }
.svc-row__price { color: var(--sib-fg-bold); font-weight: 600; white-space: nowrap; text-align: right; }
.svc-row__unit { display: block; color: var(--sib-fg-muted); font-weight: 400; font-size: .78em; }

@media screen and (max-width: 736px) {
	.service-card__price { align-items: flex-start; text-align: left; }
}

/* ============================================================
   КОНТАКТЫ
   ============================================================ */

/* --- Иконки мессенджеров (WA/TG/VK/MAX) --- */
.msg-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	flex: 0 0 auto;
	border: solid 1px var(--sib-border-lt);
	border-radius: 50%;
	color: var(--sib-fg);
	line-height: 1;
	text-decoration: none;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.msg-icon::before { font-size: 1.05em; }

.msg-icon:hover {
	color: var(--sib-on-accent) !important;
	background: var(--sib-accent);
	border-color: var(--sib-accent);
}

.msg-icon__label { display: none; }
.msg-icon--max::before { content: 'M'; font-size: 1em; font-weight: 700; }

/* --- Соцсети турнира (шапка блока контактов) --- */
.contacts-social {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .6em 1.1em;
	margin-bottom: 1.6em;
	padding-bottom: 1.4em;
	border-bottom: solid 1px var(--sib-border);
}

.contacts-social__label {
	color: var(--sib-fg-muted);
	font-size: .8em;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.contacts-social__icons { display: flex; gap: .6em; }

/* --- Группы контактов --- */
.contacts-group { margin: 0; }

.contacts-group + .contacts-group {
	margin-top: 1.6em;
	padding-top: 1.6em;
	border-top: solid 1px var(--sib-border);
}

.contacts-group__title {
	color: var(--sib-fg-bold);
	font-size: 1em;
	letter-spacing: .1em;
	margin: 0 0 .3em 0;
}

.contacts-group__note { color: var(--sib-fg-muted); font-size: .9em; margin: 0 0 1.1em 0; }

.contacts-people { margin: 0; padding: 0; list-style: none; }

.contact-person { padding: .9em 0; border-bottom: solid 1px var(--sib-border); }
.contact-person:first-child { padding-top: 0; }
.contact-person:last-child { border-bottom: 0; padding-bottom: 0; }

.contact-person__name { display: block; color: var(--sib-fg-bold); font-weight: 600; }

.contact-person__role {
	display: block;
	color: var(--sib-fg-muted);
	font-size: .85em;
	margin-top: .1em;
}

.contact-person__lines {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5em 1.1em;
	margin-top: .55em;
}

.contact-person__phone {
	color: var(--sib-fg-bold);
	font-size: 1.1em;
	font-weight: 600;
	border-bottom: 0;
	white-space: nowrap;
}

.contact-person__email {
	color: var(--sib-accent-lt);
	border-bottom: 0;
	word-break: break-word;
}

.contact-person__msgs { display: flex; gap: .5em; }

/* CTA-«Заявить команду» — в самом верху страницы контактов */
.contacts-cta {
	margin-bottom: 1.8em;
	padding-bottom: 1.6em;
	border-bottom: solid 1px var(--sib-border);
}

.contacts-cta__text { color: var(--sib-fg); margin: 0 0 1em 0; }

/* ============================================================
   ФУТЕР
   ============================================================ */

.site-footer {
	background: var(--sib-bg-alt);
	border-top: solid 1px var(--sib-border);
	padding: 3.5em 0 2em 0;
	margin-top: auto;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr 1fr 1.2fr;
	gap: 3em;
}

.site-footer__title {
	font-size: .8em;
	letter-spacing: .12em;
	margin-bottom: 1.2em;
	color: var(--sib-fg-muted);
}

.site-footer__links { margin: 0; padding: 0; list-style: none; }
.site-footer__links li { margin-bottom: .6em; }
.site-footer__links a { border-bottom: 0; color: var(--sib-fg); font-size: .9em; }
.site-footer__links a:hover { color: var(--sib-accent) !important; }

.site-footer__hint { color: var(--sib-fg-muted); font-size: .82em; margin-left: .3em; }

.site-footer__social { display: flex; gap: .5em; margin: .2em 0 1em 0; }
.site-footer__social .msg-icon { width: 2.1em; height: 2.1em; }

.site-footer__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .6em; }
.site-footer__all { display: inline-block; color: var(--sib-accent-lt); font-size: .85em; border-bottom: 0; }
.site-footer__all:hover { color: var(--sib-accent) !important; }

/* Золотая звезда перед «Залом славы» */
.site-footer__hall::before {
	content: '\f005';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: var(--sib-warn);
	margin-right: .5em;
	font-size: .82em;
}

.site-brand--footer { margin-bottom: 1em; }

/* font-size .8em держим НА ДЕТЯХ, а не на контейнере: иначе em-based
   max-width/padding у `.container` сжимаются (76em×.8) и низ подвала
   становится уже и по центру — не совпадает по краям с колонками сверху. */
.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: 3em;
	margin-top: 3em;
	padding-top: 1.5em;
	border-top: solid 1px var(--sib-border);
}

.site-footer__bottom-left,
.site-footer__bottom-right { font-size: .8em; }

.site-footer__bottom p { margin: 0 0 .4em 0; }
/*
	Ссылка внутри абзаца обязана отличаться от текста не только цветом:
	акцент к серому даёт контраст 1,16 — дальтоник разницы не увидит.
	Подчёркивание с отступом читается спокойнее, чем рамка Multiverse.
*/
.site-footer__bottom a {
	border-bottom: 0;
	text-decoration: underline;
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
}

/* Немая ссылка (кредиты шаблона): без цвета и подчёркивания, чтобы не
   перетягивала внимание с ключевых ссылок. !important — против глобального a:hover. */
.link-plain,
.link-plain:hover {
	color: inherit !important;
	border-bottom: 0;
	text-decoration: underline;
	text-underline-offset: .2em;
}

.site-footer__bottom-right {
	max-width: 26em;
	text-align: right;
}

@media screen and (max-width: 736px) {
	.site-footer__bottom { flex-direction: column; gap: 1.2em; }
	.site-footer__bottom-right { max-width: none; text-align: left; }
}

@media screen and (max-width: 980px) {
	.site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 736px) {
	.site-footer__inner { grid-template-columns: 1fr; gap: 2em; }
	.site-footer { padding: 2.5em 0 1.5em 0; }
}

/* ============================================================
   ФОРМЫ (заявка команды)
   ============================================================ */

.form-row { margin-bottom: 1.5em; }

.form-row label {
	display: block;
	margin-bottom: .5em;
	color: var(--sib-fg-bold);
	font-size: .8em;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.form-row .required { color: var(--sib-accent); }

/* Согласие на обработку ПДн. Сам чекбокс рисует Multiverse (label:before),
   нам нужно лишь вернуть подписи вид обычного предложения: базовое правило
   .form-row label делает её заглавными, мелкой и в разрядку — для текста
   со ссылкой это не годится. */
.form-consent { margin-top: 2em; }

.form-consent label {
	display: inline-block;
	margin: 0;
	color: var(--sib-fg);
	font-size: .85em;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.55;
	text-transform: none;
}

.form-consent a { color: var(--sib-accent-lt); }
.form-consent .form-error { margin-left: 2.4em; }

.form-error { color: #e0776e; font-size: .85em; margin-top: .4em; }
.form-hint { margin-top: .5em; color: var(--sib-fg-muted); font-size: .85em; }
.form-actions { margin-top: 2em; }

.apply-form { max-width: 40em; }

.apply-form input[type="text"],
.apply-form input[type="tel"],
.apply-form select {
	width: 100%;
	background: var(--sib-bg-alt);
	border: solid 1px var(--sib-border);
	border-radius: 0;
	color: var(--sib-fg-bold);
	padding: .7em 1em;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.apply-form input:focus,
.apply-form select:focus {
	outline: none;
	border-color: var(--sib-accent);
	box-shadow: 0 0 0 1px var(--sib-accent);
}

.apply-form input::placeholder { color: var(--sib-fg-muted); }

/* Кастомная стрелка селекта */
.apply-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a0a0a1' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1em center;
	padding-right: 2.5em;
	cursor: pointer;
}

.apply-form select option { color: #fff; background: var(--sib-bg-alt); }

/* Honeypot — скрыт от людей, виден ботам */
.hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* --- Сетка альбомов ---
   Обложки приходят от VK всего в 130×87 и подписаны (увеличить нельзя),
   поэтому карточки держим компактными: так обложка не мылится, а сетка
   грузится мгновенно (~7 КБ на карточку). */
.agrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10.5em, 1fr));
	gap: 1em;
}

/* В модалке 4 свежих альбома — ровная сетка 2×2 (на любой ширине карточки). */
.agrid--modal { grid-template-columns: repeat(2, 1fr); }

.albums-count { margin: 0 0 1.2em 0; font-size: .9em; }

.acard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: solid 1px var(--sib-border);
	border-radius: 6px;
	overflow: hidden;
	background: var(--sib-bg-card);
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}

.acard:hover { border-color: var(--sib-accent); transform: translateY(-2px); }

.acard__cover {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;      /* фиксируем короб — никакого сдвига вёрстки (CLS) */
	background: var(--sib-bg-alt);
	overflow: hidden;
}

.acard__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.acard__count {
	position: absolute;
	right: .4em;
	bottom: .4em;
	padding: .2em .5em;
	border-radius: 1em;
	background: rgba(0, 0, 0, .66);
	color: #fff;
	font-size: .68em;
	font-weight: 600;
	white-space: nowrap;
}

.acard__body { padding: .6em .75em; }

.acard__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--sib-fg-bold);
	font-size: .85em;
	font-weight: 600;
	line-height: 1.3;
}

.acard:hover .acard__title { color: var(--sib-accent-lt); }
.acard__meta { display: block; margin-top: .25em; color: var(--sib-fg-muted); font-size: .75em; }

/* --- Страница альбома --- */
.album-head { margin-bottom: 1.5em; }
.album-head__meta { margin: 0 0 .8em 0; font-size: .9em; }
.album-head__links { display: flex; flex-wrap: wrap; gap: .6em; }
.album-head__links .button { border-bottom: 0; }

/* Сетка фото альбома */
.pgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
	gap: .6em;
}

.pgrid__item {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;      /* короб задан заранее → лениво грузим без скачков */
	background: var(--sib-bg-alt);
	border-radius: 4px;
	overflow: hidden;
	border-bottom: 0;
	cursor: zoom-in;
}

.pgrid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .25s ease, opacity .2s ease;
}

.pgrid__item:hover img { transform: scale(1.06); opacity: .92; }
.pgrid__item:focus-visible { outline: 3px solid var(--sib-accent); outline-offset: 2px; }

/* --- Лайтбокс --- */
.lbox {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 26000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s;
}

.lbox.is-visible { opacity: 1; visibility: visible; }

.lbox__overlay {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(10, 12, 14, .93);
}

.lbox__figure {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 1em;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .7em;
	pointer-events: none;   /* клик мимо фото закрывает (ловит оверлей) */
}

.lbox__img {
	max-width: 100%;
	max-height: 82vh;
	object-fit: contain;
	border-radius: 4px;
	pointer-events: auto;
	transition: opacity .15s ease;
}

/* Пока грузится следующий кадр, прячем предыдущий и крутим индикатор —
   иначе кажется, что «далее» не сработало (кадр-то на экране прежний). */
.lbox.is-loading .lbox__img { opacity: 0; }

.lbox__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 2.8em;
	height: 2.8em;
	margin: -1.4em 0 0 -1.4em;
	border: solid 3px rgba(255, 255, 255, .22);
	border-top-color: var(--sib-accent-lt);
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease, visibility .15s;
	animation: lbox-spin .8s linear infinite;
}

.lbox.is-loading .lbox__spinner { opacity: 1; visibility: visible; }

/* Текст — только для скринридеров, визуально достаточно кольца. */
.lbox__spinner-label {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@keyframes lbox-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.lbox__spinner { animation-duration: 2.4s; }
	.lbox__img { transition: none; }
}

.lbox__cap {
	display: flex;
	align-items: baseline;
	gap: 1em;
	color: var(--sib-fg);
	font-size: .82em;
	pointer-events: auto;
}

.lbox__counter { color: var(--sib-fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Кнопки: !important против глобального button:hover из Multiverse
   (иначе глиф красится в акцент и пропадает на акцентном фоне). */
.lbox__btn {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6em;
	height: 2.6em;
	padding: 0 0 .08em 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff !important;
	font-size: 1.6em;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
}

.lbox__btn:hover { background: var(--sib-accent); color: var(--sib-on-accent) !important; box-shadow: none; }
.lbox__btn:focus-visible { outline: 2px solid var(--sib-accent); outline-offset: 2px; }

.lbox__btn--close { top: .6em; right: .6em; }
.lbox__btn--prev { left: .6em; top: 50%; transform: translateY(-50%); }
.lbox__btn--next { right: .6em; top: 50%; transform: translateY(-50%); }

@media screen and (max-width: 736px) {
	/* На мобильных фото листаем свайпом — стрелки прижимаем к низу,
	   чтобы не перекрывали кадр и попадали под большой палец. */
	.agrid { grid-template-columns: repeat(2, 1fr); gap: .8em; }
	/*
		На телефоне две колонки, а не три. Дело не только в том, что фото
		крупнее и его видно: при трёх колонках в первый экран попадало
		около восемнадцати миниатюр, и самый крупный элемент экрана
		отрисовывался на шестой секунде (замерено Lighthouse на мобильном
		профиле). С двумя колонками — 1,7 с при том же наборе фото.
	*/
	.pgrid { grid-template-columns: repeat(2, 1fr); gap: .35em; }
	.lbox__img { max-height: 72vh; }
	.lbox__btn { width: 2.9em; height: 2.9em; }
	.lbox__btn--prev { left: 1.2em; top: auto; bottom: 1em; transform: none; }
	.lbox__btn--next { right: 1.2em; top: auto; bottom: 1em; transform: none; }
	.lbox__cap { flex-direction: column; align-items: center; gap: .2em; text-align: center; }
}

/* ============================================================
   ТРАНСЛЯЦИИ (видеокарточки: модалка + /broadcasts)
   ============================================================ */

.vgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13.5em, 1fr));
	gap: 1em;
}

.vgrid--page {
	grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
	gap: 1.4em;
}

.g-list { margin: 0; }

.vcard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: solid 1px var(--sib-border);
	border-radius: 6px;
	overflow: hidden;
	background: var(--sib-bg-card);
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}

.vcard:hover { border-color: var(--sib-accent); transform: translateY(-2px); }

.vcard__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--sib-bg-alt);
	overflow: hidden;
}

.vcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Кнопка play поверх обложки */
.vcard__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2.8em;
	height: 2.8em;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(0, 0, 0, .5);
	border: solid 2px rgba(255, 255, 255, .85);
	transition: background-color .2s ease, border-color .2s ease;
}

.vcard__play::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: .5em 0 .5em .82em;
	border-color: transparent transparent transparent #fff;
}

.vcard:hover .vcard__play { background: var(--sib-accent); border-color: var(--sib-accent); }

.vcard__live {
	position: absolute;
	top: .55em;
	left: .55em;
	background: #c53a3a;
	color: #fff;
	font-size: .68em;
	font-weight: 700;
	letter-spacing: .03em;
	padding: .28em .65em;
	border-radius: 1em;
}

.vcard--live { border-color: #c4554d; }

.vcard__body { padding: .7em .85em; }

.vcard__title {
	display: block;
	color: var(--sib-fg-bold);
	font-weight: 600;
	font-size: .92em;
	line-height: 1.3;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.vcard:hover .vcard__title { color: var(--sib-accent-lt); }
.vcard__meta { display: block; margin-top: .3em; color: var(--sib-fg-muted); font-size: .78em; }

/* ============================================================
   COOKIE-УВЕДОМЛЕНИЕ
   ============================================================ */

/*
	Поверх всех слоёв: на главной снизу висит панель Multiverse
	(#header, z-index 10002), плюс модалка плитки (10001) и лайтбокс (26000).
	Уведомление должно быть видно сразу, а не ждать закрытия чего-то.
*/
.cookie-notice {
	/*
		Скрыт по умолчанию: показывать или нет — решает JS по localStorage,
		а не сервер. Иначе тот, кто уже выбрал, ловил бы баннер на каждой
		странице до отработки скрипта.
	*/
	display: none;
	position: fixed;
	left: 1em;
	right: 1em;
	bottom: 1em;
	z-index: 30000;
	align-items: center;
	gap: 1.6em;
	max-width: var(--sib-container);
	margin: 0 auto;
	padding: .9em 1.3em;
	border: solid 1px var(--sib-border-lt);
	border-radius: 6px;
	background: rgba(31, 34, 36, .97);
	box-shadow: 0 .5em 2em rgba(0, 0, 0, .45);
}

.cookie-notice__text {
	margin: 0;
	color: var(--sib-fg);
	font-size: .8em;
	line-height: 1.6;
}

.cookie-notice.is-open { display: flex; }

.cookie-notice__actions {
	display: flex;
	flex-shrink: 0;
	gap: .6em;
}

.cookie-notice__actions .button { margin: 0; }

/* На главной панель #header (5em) прижата к низу экрана — встаём над ней. */
body.home .cookie-notice { bottom: 5.5em; }

@media screen and (max-width: 736px) {
	/* На узких экранах #header главной уезжает наверх — низ свободен. */
	body.home .cookie-notice { bottom: .7em; }

	.cookie-notice {
		left: .7em;
		right: .7em;
		bottom: .7em;
		flex-direction: column;
		align-items: stretch;
		gap: .9em;
		padding: 1em;
	}

	.cookie-notice__text { font-size: .78em; }

	/*
		«Только необходимые» + nowrap у .button не влезают в строку на узком
		экране — кладём кнопки друг под друга во всю ширину.
	*/
	.cookie-notice__actions { flex-direction: column; }
}

/* --- Индикация отправки заявки --- */

/*
	Статус скрыт, пока page.js не повесит на форму класс is-sending.
	Без JS кнопка остаётся на месте и форма работает как обычная —
	загрузку страницы в этом случае рисует сам браузер.
*/
.form-sending {
	display: none;
	align-items: center;
	gap: .8em;
	margin: 0;
	color: var(--sib-fg);
	font-size: .9em;
}

.apply-form.is-sending .form-actions .button { display: none; }
.apply-form.is-sending .form-sending { display: flex; }

.form-sending__spinner {
	flex-shrink: 0;
	width: 1.2em;
	height: 1.2em;
	border: solid 2px var(--sib-border-lt);
	border-top-color: var(--sib-accent);
	border-radius: 50%;
	animation: sib-spin .8s linear infinite;
}

@keyframes sib-spin { to { transform: rotate(360deg); } }