/* ============================================================
   KinoMod — стили темы поверх дизайн-системы (tokens.css + polish.css)
   ============================================================ */

/* ---------- Каталог: шапка ---------- */

.catalog-head { padding-block: var(--sp-4) var(--sp-8); }
.catalog-head__title {
	font-size: var(--fs-4xl);
	letter-spacing: -0.03em;
	line-height: 1.1;
}
.catalog-head__sub { color: var(--text-muted); font-size: var(--fs-lg); margin-top: var(--sp-3); }
.catalog-head__bio { margin-top: var(--sp-5); max-width: 70ch; color: var(--text-secondary); }
.catalog-head__bio p { margin-bottom: var(--sp-3); }

.catalog {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: var(--sp-10);
	align-items: start;
	padding-top: var(--sp-8);
}
@media (max-width: 1024px) { .catalog { grid-template-columns: 1fr; } }

.catalog__aside {
	position: sticky;
	top: calc(var(--header-h) + var(--sp-6));
	max-height: calc(100vh - var(--header-h) - var(--sp-10));
	overflow-y: auto;
	padding-right: var(--sp-2);
	scrollbar-width: thin;
	scrollbar-color: var(--border-strong) transparent;
}
@media (max-width: 1024px) {
	.catalog__aside { display: none; }
	.catalog__aside.is-open {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 200;
		background: var(--bg);
		overflow-y: auto;
		padding: var(--sp-6) var(--gutter) 120px;
	}
	.catalog__aside.is-open .facets { position: static; max-height: none; }
	.catalog__aside .sheet-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: var(--sp-6);
	}
	.catalog__aside .sheet-bar > h2 { font-size: var(--fs-2xl); }
	.catalog__aside .sheet-sticky {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		padding: var(--sp-4) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom));
		background: rgb(13 17 23 / 0.97);
		backdrop-filter: blur(12px);
		border-top: 1px solid var(--border);
	}
}
@media (min-width: 1025px) {
	.catalog__aside .sheet-bar,
	.catalog__aside .sheet-sticky { display: none; }
}

/* ---------- Каталог: тулбар ---------- */

.toolbar__filter { display: none; }
@media (max-width: 1024px) { .toolbar__filter { display: inline-flex; } }

.toolbar__count b { color: var(--text); font-weight: 600; }

/* ---------- Фильтры ---------- */

.facets__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--border);
	margin-bottom: var(--sp-2);
}
.facets__title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.facets__reset { color: var(--text-muted); font-size: var(--fs-sm); }
.facets__reset:hover { color: var(--rating-low); }

.facet { padding-block: var(--sp-5); border-bottom: 1px solid var(--border); }
.facet:last-child { border-bottom: 0; }

.facet__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
}
.facet__toggle .facet__title { margin: 0; }
.facet__toggle .ic { color: var(--text-muted); transition: transform var(--dur) var(--ease); flex: none; }
.facet__toggle[aria-expanded="false"] .ic { transform: rotate(-90deg); }
.facet__body { padding-top: var(--sp-4); }
.facet__body[hidden] { display: none; }
.facet__empty { color: var(--text-muted); font-size: var(--fs-md); }

.facet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.facet__label {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 5px 0;
	cursor: pointer;
	font-size: var(--fs-md);
	color: var(--text-secondary);
	transition: color var(--dur) var(--ease);
}
.facet__label:hover { color: var(--text); }
.facet__label input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.facet__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.facet__count { color: var(--text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

.facet__range { display: flex; align-items: center; gap: var(--sp-2); }
.facet__range input {
	flex: 1; min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text);
	font-size: var(--fs-md);
}
.facet__range input:focus { border-color: var(--accent); }
.facet__apply {
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface-2);
	color: var(--text);
	cursor: pointer;
	font-size: var(--fs-sm);
}

/* ---------- Чипсы активных фильтров ---------- */

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); align-items: center; }
.chips__reset { font-size: var(--fs-sm); color: var(--accent); margin-left: var(--sp-2); }
.chip a { color: var(--text-muted); display: grid; place-items: center; width: 16px; height: 16px; }
.chip a:hover { color: var(--rating-low); }

/* ---------- Списокный вид ---------- */

.film-list .film-row {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) auto;
	gap: var(--sp-5);
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--border);
	align-items: start;
	position: relative;
}
.film-row__poster { aspect-ratio: var(--poster-ratio); border-radius: var(--r-sm); overflow: hidden; display: block; }
.film-row__title { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.film-row__title a { color: var(--text); }
.film-row__title a:hover { color: var(--accent); }
.film-row__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-bottom: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--text-muted);
}
.film-row__genres {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--text-muted);
}
.film-row__genres a { color: var(--text-secondary); }
.film-row__genres a:hover { color: var(--accent); }
.film-row__desc { color: var(--text-secondary); font-size: var(--fs-md); line-height: var(--lh-normal); }
.film-row__rate {
	display: inline-grid;
	place-items: center;
	min-width: 2.4em;
	padding: 0.2em 0.45em;
	border-radius: var(--r-sm);
	font-size: var(--fs-xl);
	font-weight: 600;
	line-height: 1.1;
}
.film-row__rate--high { background: rgb(46 204 113 / 0.16); color: #2ecc71; }
.film-row__rate--mid  { background: rgb(245 166 35 / 0.18); color: #f5a623; }
.film-row__rate--below { background: rgb(255 167 38 / 0.18); color: #ffa726; }
.film-row__rate--low  { background: rgb(239 83 80 / 0.18); color: #ef5350; }
.film-row__rate--none { background: rgb(107 118 137 / 0.5); color: var(--text-secondary); }
/* в list view рейтинг только справа — на постере бейджа нет (его и не рисуем) */
.view-switch__btn {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--r-sm);
	border: 1px solid var(--border);
	color: var(--text-muted);
	background: var(--bg);
}
.view-switch__btn[aria-pressed="true"] {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--accent-subtle);
}
.view-switch__btn:hover { color: var(--accent); }
.facet__label.is-active { color: var(--accent); font-weight: 600; }

.film-row__rating { font-size: var(--fs-2xl); font-weight: 600; color: var(--text); text-align: center; }
.film-row__rating small { display: block; font-size: var(--fs-2xs); color: var(--text-muted); font-weight: 400; }
@media (max-width: 700px) {
	.film-list .film-row { grid-template-columns: 68px minmax(0, 1fr); }
	.film-row__rating { display: none; }
}

/* ---------- Мобильные фильтры ---------- */

@media (min-width: 1025px) { .catalog__aside .sheet-bar,
	.catalog__aside .sheet-sticky { display: none; } }

/* ---------- Главная: hero ---------- */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 500px at 78% 12%, rgb(74 140 255 / 0.16), transparent 65%),
		radial-gradient(700px 420px at 12% 88%, rgb(149 68 255 / 0.10), transparent 60%),
		var(--bg-alt);
}
.hero__inner { position: relative; padding-block: var(--sp-16) var(--sp-12); max-width: 900px; }
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 5px 12px;
	border-radius: var(--r-full);
	background: var(--accent-subtle);
	border: 1px solid rgb(74 140 255 / 0.25);
	color: var(--accent-hover);
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-5);
}
.hero__title {
	font-size: clamp(2rem, 5vw, var(--fs-5xl));
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.05;
	max-width: 20ch;
}
.hero__title em { font-style: normal; color: var(--accent); }
.hero__lead {
	margin-top: var(--sp-5);
	font-size: var(--fs-lg);
	color: var(--text-secondary);
	max-width: 58ch;
	line-height: var(--lh-loose);
}
.hero__stats { display: flex; flex-wrap: wrap; gap: var(--sp-10); margin-top: var(--sp-10); }

/* ---------- Главная: быстрый доступ ---------- */

.quicknav { padding-block: var(--sp-8); border-bottom: 1px solid var(--border); }
.quicknav__row {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr) auto;
	gap: var(--sp-4);
	align-items: center;
}
@media (max-width: 860px) { .quicknav__row { grid-template-columns: 1fr; } }
.quicknav__label {
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
}
.quicknav__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.qchip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 7px 14px;
	border-radius: var(--r-full);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-secondary);
	font-size: var(--fs-md);
	transition: all var(--dur) var(--ease);
}
.qchip:hover { border-color: var(--accent); color: var(--text); background: var(--accent-subtle); }
.qchip b { color: var(--text-muted); font-weight: 400; font-size: var(--fs-sm); }

/* ---------- Карточка с ролью ---------- */

.mc__role {
	font-size: var(--fs-xs);
	color: var(--accent);
	margin-top: var(--sp-1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Персона ---------- */

.person-hero { padding-block: var(--sp-4) var(--sp-10); }
.person-subtitle { font-size: var(--fs-xl); margin-bottom: var(--sp-5); }

.person-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--sp-10);
	align-items: start;
}
@media (max-width: 860px) { .person-layout { grid-template-columns: 1fr; gap: var(--sp-6); } }

.person-photo {
	aspect-ratio: var(--poster-ratio);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-md);
}
@media (max-width: 860px) { .person-photo { max-width: 180px; } }

.person-name { font-size: var(--fs-4xl); letter-spacing: -0.03em; }
.person-alt { color: var(--text-muted); font-size: var(--fs-lg); margin-top: var(--sp-1); }
.person-roles { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.role-tag {
	padding: 5px 12px;
	border-radius: var(--r-full);
	border: 1px solid rgb(74 140 255 / 0.3);
	background: var(--accent-subtle);
	color: var(--accent-hover);
	font-size: var(--fs-sm);
	font-weight: 500;
}
.role-tag--muted { border-color: var(--border); background: var(--surface); color: var(--text-secondary); }

.person-bio { margin-top: var(--sp-6); max-width: 70ch; line-height: var(--lh-loose); }

.bio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--sp-4) var(--sp-6);
	margin-top: var(--sp-8);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--border);
}
.bio-grid dt { color: var(--text-muted); font-size: var(--fs-sm); }
.bio-grid dd { margin: var(--sp-1) 0 0; color: var(--text); font-weight: 500; }

.person-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--sp-5);
	margin-top: var(--sp-8);
}

.filmography__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	flex-wrap: wrap;
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--border);
	margin-bottom: var(--sp-6);
}
.filmography__count { color: var(--text-muted); font-size: var(--fs-md); }
.filmography__filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.filmography__view-switch { margin-left: var(--sp-2); }
.ffilter {
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-radius: var(--r-full);
	background: var(--surface);
	color: var(--text-secondary);
	font-size: var(--fs-sm);
	cursor: pointer;
}
.ffilter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.pfacts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); max-width: 84ch; }
.pfacts__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }

.family { display: grid; gap: var(--sp-3); max-width: 600px; }
.family-item {
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: var(--sp-3);
	align-items: center;
	padding: var(--sp-3);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
}
.family-item__ph { aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.family-item__note { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- Каталог персон ---------- */

.persons-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--sp-6) var(--sp-4);
}

/* ---------- Фильтр по роли ---------- */

.role-filter {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--sp-3);
	margin-block: var(--sp-8);
}
.role-card {
	padding: var(--sp-4);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--text);
	transition: all var(--dur) var(--ease);
}
.role-card:hover { border-color: var(--accent); background: var(--surface-2); }
.role-card__name { font-size: var(--fs-lg); font-weight: 600; }
.role-card__count { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--sp-1); }

/* ---------- Фильмография: переключатель вида ---------- */

.filmography__view-switch {
	display: inline-flex;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	overflow: hidden;
}
.filmography__view-switch button {
	display: grid;
	place-items: center;
	width: 34px;
	height: 30px;
	background: var(--surface);
	color: var(--text-muted);
	border: 0;
	cursor: pointer;
}
.filmography__view-switch button[aria-pressed="true"] {
	background: var(--accent);
	color: #fff;
}
.filmography__view-switch button + button {
	border-left: 1px solid var(--border);
}

.filmography {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.filmography__item {
	display: grid;
	grid-template-columns: 46px 56px minmax(0, 1fr) auto;
	gap: var(--sp-4);
	align-items: center;
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--border);
}
.filmography__item:hover { background: var(--surface); }
.filmography__year { color: var(--text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.filmography__poster { aspect-ratio: 2/3; border-radius: var(--r-xs); overflow: hidden; }
.filmography__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.filmography__title { font-size: var(--fs-lg); color: var(--text); font-weight: 500; }
.filmography__title:hover { color: var(--accent); }
.filmography__role { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.filmography__role b { color: var(--accent); font-weight: 500; }
.filmography__rating { font-size: var(--fs-xl); font-weight: 700; color: var(--text); text-align: center; font-variant-numeric: tabular-nums; }
.filmography__rating small { display: block; font-size: var(--fs-2xs); color: var(--text-muted); font-weight: 400; }

/* Сетка */
.filmography--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--sp-5);
}
.filmography--grid .filmography__item {
	display: flex;
	flex-direction: column;
	border-bottom: 0;
	padding: 0;
}
.filmography--grid .filmography__year { display: none; }
.filmography--grid .filmography__poster { aspect-ratio: 2/3; }
.filmography--grid .filmography__info { margin-top: var(--sp-2); }
.filmography--grid .filmography__title { font-size: var(--fs-md); }
.filmography--grid .filmography__rating { text-align: left; margin-top: var(--sp-1); font-size: var(--fs-lg); }

@media (max-width: 640px) {
	.filmography__item { grid-template-columns: 40px minmax(0, 1fr) auto; }
	.filmography__year { display: none; }
}

/* ---------- Мобильное меню ---------- */

.mobile-menu {
	position: fixed;
	inset: var(--header-h) 0 auto;
	z-index: 45;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	padding: var(--sp-4) var(--gutter);
}
.mobile-menu__nav { display: grid; gap: var(--sp-1); }
.mobile-menu__nav a {
	padding: var(--sp-3) 0;
	color: var(--text-secondary);
	font-size: var(--fs-lg);
	border-bottom: 1px solid var(--border);
}
.mobile-menu__nav a:hover { color: var(--text); }

@media (min-width: 768px) { .mobile-menu { display: none !important; } }

/* ---------- Поиск: поповер ---------- */

.searchbox__pop {
	position: absolute;
	top: calc(100% + 8px);
	left: 0; right: 0;
	z-index: 80;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	box-shadow: var(--sh-lg);
	overflow: hidden;
	max-height: 400px;
	overflow-y: auto;
	overscroll-behavior: contain;

	/* скроллбар в дизайне сайта: тонкий, цвета из токенов (как .catalog__aside) */
	scrollbar-width: thin;
	scrollbar-color: var(--border-strong) transparent;
}
.searchbox__pop::-webkit-scrollbar { width: 8px; }
.searchbox__pop::-webkit-scrollbar-track { background: transparent; }
.searchbox__pop::-webkit-scrollbar-thumb {
	background: var(--border-strong);
	border-radius: var(--r-full);
	border: 2px solid var(--surface);
}
.searchbox__pop::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.searchbox__pop[hidden] { display: none; }
.searchbox { position: relative; margin: 0; }
@media (max-width: 767px) { .header__nav, .searchbox { display: none; } }

.suggest__item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-4);
	cursor: pointer;
	color: var(--text-secondary);
	border-left: 2px solid transparent;
}
.suggest__item:hover, .suggest__item.is-active { background: var(--surface-2); border-left-color: var(--accent); color: var(--text); }
.suggest__round {
	width: 30px; height: 30px;
	border-radius: 50%;
	flex: none;
	display: grid;
	place-items: center;
	background: var(--surface-2);
	color: var(--text-muted);
	overflow: hidden;
}
.suggest__body { min-width: 0; flex: 1; }
.suggest__name { font-size: var(--fs-md); color: var(--text); display: block; }
.suggest__meta { font-size: var(--fs-xs); color: var(--text-muted); }
.suggest__type { font-size: var(--fs-2xs); color: var(--text-muted); padding: 2px 7px; border: 1px solid var(--border); border-radius: var(--r-xs); flex: none; }

.suggest__group + .suggest__group { border-top: 1px solid var(--border); }
.suggest__label {
	padding: var(--sp-2) var(--sp-4) var(--sp-1);
	font-size: var(--fs-2xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.suggest__thumb {
	width: 30px; height: 45px;
	border-radius: var(--r-xs);
	flex: none;
	display: grid;
	place-items: center;
	background: var(--surface-2);
	color: var(--text-muted);
	overflow: hidden;
}
.suggest__thumb img, .suggest__round img { display: block; width: 100%; height: 100%; object-fit: cover; }
.suggest__name mark { background: none; color: var(--accent); font-weight: 600; }
.suggest__hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: var(--sp-1) var(--sp-4) var(--sp-2);
	font-size: var(--fs-2xs);
	color: var(--text-muted);
}
.suggest__hint span { margin: 0 var(--sp-1); }
.suggest__hint kbd {
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	line-height: 1;
	padding: 2px 5px;
	border: 1px solid var(--border);
	border-bottom-width: 2px;
	border-radius: var(--r-xs);
	background: var(--surface-2);
	color: var(--text-secondary);
}
.suggest__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-2) var(--sp-4);
	border-top: 1px solid var(--border);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--accent);
}
.suggest__foot:hover { background: var(--surface-2); color: var(--accent-hover); }
.suggest__pending {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--text-muted);
}
.suggest__pending::before {
	content: "";
	width: 12px; height: 12px;
	flex: none;
	border: 2px solid var(--border);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: km-spin 0.8s linear infinite;
}
.suggest__empty { padding: var(--sp-4) var(--sp-4) var(--sp-3); text-align: center; }
.suggest__empty-title { font-size: var(--fs-sm); color: var(--text); }
.suggest__empty-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-1); }

/* ---------- Пустые состояния ---------- */

.empty {
	display: grid;
	justify-items: center;
	gap: var(--sp-3);
	padding: var(--sp-12) var(--sp-6);
	text-align: center;
	border: 1px dashed var(--border-strong);
	border-radius: var(--r-md);
	color: var(--text-muted);
}
.empty h2, .empty h3 { color: var(--text); }
.empty p { max-width: 44ch; }
.empty--sm { padding: var(--sp-6); }
.empty a { color: var(--accent); }

.frames {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}

/* ---------- Плейсхолдер изображения ---------- */

.ph {
	display: block;
	width: 100%;
	aspect-ratio: var(--poster-ratio);
	border-radius: var(--r-md);
	background: linear-gradient(150deg, var(--surface-2), var(--surface));
}

/* ---------- Подвал ---------- */

.footer__count { color: var(--text-muted); font-size: var(--fs-xs); margin-left: var(--sp-1); }

/* ---------- Плеер трейлера ---------- */

.km-player {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	place-items: center;
	padding: var(--sp-6);
	background: rgb(0 0 0 / 0.9);
}
.km-player[hidden] { display: none; }
.km-player__frame {
	width: min(1100px, 100%);
	aspect-ratio: 16 / 9;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: #000;
	position: relative;
}
.km-player__frame iframe { width: 100%; height: 100%; border: 0; }
.km-player__close {
	position: absolute;
	top: -48px;
	right: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 8px 16px;
	border: 1px solid rgb(255 255 255 / 0.2);
	border-radius: var(--r-sm);
	background: rgb(255 255 255 / 0.1);
	color: #fff;
	cursor: pointer;
}

/* ---------- Подборки: карточки ---------- */

.lists-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--sp-4);
}
.list-card {
	position: relative;
	display: block;
	padding: var(--sp-5);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
	overflow: hidden;
	transition: all var(--dur) var(--ease);
}
.list-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(140deg, var(--accent-subtle), transparent 60%);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}
.list-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--sh-md); }
.list-card:hover::before { opacity: 1; }
.list-card__title { position: relative; font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.list-card__meta { position: relative; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------- Печать ---------- */

@media print {
	.header, .footer, .pagination, .breadcrumbs, .tabs, .read-progress,
	.catalog__aside, .toolbar, .filters-toggle { display: none !important; }
	.catalog { grid-template-columns: 1fr; }
}

/* ---------- Где смотреть ---------- */
.sources {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-4);
}
@media (max-width: 960px) { .sources { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .sources { grid-template-columns: 1fr; } }
.source {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--text);
	text-align: left;
	cursor: pointer;
	font: inherit;
	transition: border-color var(--dur, .2s) ease, transform var(--dur, .2s) ease;
}
.source:hover { border-color: var(--accent); transform: translateY(-2px); }
.source__logo {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--r-sm);
	background: var(--surface-2, var(--bg-alt));
	font-weight: 600;
	font-size: var(--fs-md);
	color: var(--text);
	flex: none;
}
.source__name { font-size: var(--fs-md); font-weight: 500; }
.source__rate { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------- Round: film/person fixes ---------- */

/* Краткое описание под жанрами — как .film-slogan в макете */
.film-tagline {
	margin-top: var(--sp-4);
	padding-left: var(--sp-4);
	border-left: 2px solid var(--accent);
	color: var(--text-secondary);
	font-style: italic;
	line-height: var(--lh-normal, 1.5);
	max-width: 70ch;
}

/* Съёмочная группа: блоки ролей 4 / 3 / 2 / 1 колонки по ширине экрана */
.crew-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-5) var(--sp-6);
}
@media (max-width: 1100px) {
	.crew-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
	.crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.crew-grid { grid-template-columns: minmax(0, 1fr); }
}
.crew-block__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px var(--sp-4);
}
/* две колонки — только когда в блоке больше 4 человек (класс ставит single-film.php);
   в узких блоках сетки из 4 и 3 колонок имена в одну колонку, иначе обрезаются */
.crew-block__list--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 801px) {
	.crew-block__list--two { grid-template-columns: minmax(0, 1fr); }
}
.crew-block__list li {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--fs-sm);
	line-height: 1.5;
}
.crew-block__list a { font-size: inherit; }
.crew-block__more {
	margin: var(--sp-1) 0 0;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

/* «В ролях»: персона без фото — нейтральный силуэт */
.ph--silhouette {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 100%;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--surface-2, var(--bg-alt, #1d222b));
	color: var(--text-muted);
}
.pc__photo .ph--silhouette,
.person-photo .ph--silhouette { aspect-ratio: auto; }
.ph__silhouette {
	width: 72%;
	height: auto;
	opacity: 0.45;
	display: block;
}

/* «Показать все (N)»: ссылка по размеру текста, а не во всю ширину сетки */
[data-expand-list] > [data-expand-more],
.pfacts > .facts__more,
a.facts__more {
	display: inline-flex;
	width: auto;
	max-width: max-content;
	justify-self: start;
	align-self: start;
	grid-column: auto;
}

/* Фильмография персоны: та же сетка, что в каталоге */
.filmography-grid { margin-top: var(--sp-5); }
.filmography__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

/* Оригинальное имя персоны под русским */
.person-alt {
	margin-top: var(--sp-1);
	color: var(--text-muted);
	font-size: var(--fs-lg);
}

/* =====================================================================
   Round: buttons, footer logo, view switch, rating badges, premieres
   ===================================================================== */

/* ---------- btn--primary: все состояния ----------
   Глобальные a:hover и .empty a перекрашивали текст ссылки-кнопки
   в синий — синий текст на синем фоне. Поднимаем специфичность. */
.btn.btn--primary,
a.btn.btn--primary,
a.btn.btn--primary:visited,
.empty a.btn.btn--primary {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.btn.btn--primary:hover,
a.btn.btn--primary:hover,
.empty a.btn.btn--primary:hover {
	background: color-mix(in srgb, var(--accent) 82%, #000);
	border-color: color-mix(in srgb, var(--accent) 82%, #000);
	color: #fff;
	text-decoration: none;
}
.btn.btn--primary:focus-visible,
a.btn.btn--primary:focus-visible {
	color: #fff;
	outline: 2px solid var(--text, #fff);
	outline-offset: 2px;
}
.btn.btn--primary:active,
a.btn.btn--primary:active {
	background: color-mix(in srgb, var(--accent) 70%, #000);
	border-color: color-mix(in srgb, var(--accent) 70%, #000);
	color: #fff;
}
.btn.btn--primary:disabled,
.btn.btn--primary[disabled],
.btn.btn--primary[aria-disabled="true"],
.btn.btn--primary.is-disabled {
	background: var(--surface-2);
	border-color: var(--border);
	color: var(--text-muted);
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}
/* ghost внутри .empty тоже не должен становиться синим */
.empty a.btn.btn--ghost { color: var(--text-secondary); }
.empty a.btn.btn--ghost:hover { color: var(--text); }

/* ---------- Логотип в подвале = как в шапке ---------- */
.footer a.logo--footer {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--text);
}
.footer a.logo--footer:hover { color: var(--text); }
.footer a.logo--footer img { width: 36px; height: 36px; flex: none; }

/* ---------- Переключатель вида — как в макете 05-films ---------- */
.view-switch {
	display: inline-flex;
	gap: 0;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	overflow: hidden;
}
.view-switch .view-switch__btn,
.view-switch button {
	display: grid;
	place-items: center;
	width: 38px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--surface);
	color: var(--text-muted);
	cursor: pointer;
}
.view-switch .view-switch__btn + .view-switch__btn,
.view-switch button + button { border-left: 1px solid var(--border); }
.view-switch .view-switch__btn:hover,
.view-switch button:hover { color: var(--text); }
.view-switch .view-switch__btn[aria-pressed="true"],
.view-switch button[aria-pressed="true"] {
	background: var(--surface-hover);
	color: var(--accent);
	border-color: var(--border);
}

/* ---------- Плашки рейтингов на странице фильма ---------- */
.film-badges .rbadge {
	display: inline-flex;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	background: none;
	line-height: 1;
	font-weight: 700;
}
.rbadge__label,
.rbadge__value {
	display: inline-flex;
	align-items: center;
	padding: 6px 9px;
}
.rbadge__label {
	font-size: var(--fs-xs);
	letter-spacing: 0.04em;
}
.rbadge__value {
	font-size: var(--fs-md);
	font-variant-numeric: tabular-nums;
}

/* КП: ярлык залит цветом уровня, значение — тонированное */
.rbadge--kp { --kp: #2ecc71; border-color: color-mix(in srgb, var(--kp) 45%, transparent); }
.rbadge--kp.rbadge--high  { --kp: #2ecc71; }
.rbadge--kp.rbadge--mid   { --kp: #9bd14b; }
.rbadge--kp.rbadge--below { --kp: #f5a623; }
.rbadge--kp.rbadge--low   { --kp: #ef5350; }
.rbadge--kp .rbadge__label { background: var(--kp); color: #0b0f14; }
.rbadge--kp .rbadge__value {
	background: color-mix(in srgb, var(--kp) 14%, transparent);
	color: var(--kp);
}

/* IMDb: фирменный жёлтый ярлык всегда; уровень — насыщенность
   значения и полоска снизу. Низкие оценки заметно «тускнеют». */
.rbadge--imdb { --im: #f5c518; border-color: color-mix(in srgb, var(--im) 40%, transparent); }
.rbadge--imdb.rbadge--high  { --im: #f5c518; }
.rbadge--imdb.rbadge--mid   { --im: #d8b03e; }
.rbadge--imdb.rbadge--below { --im: #a8925a; }
.rbadge--imdb.rbadge--low   { --im: #85796a; }
.rbadge--imdb .rbadge__label {
	background: #f5c518;
	color: #000;
	font-weight: 800;
	letter-spacing: 0;
}
.rbadge--imdb.rbadge--below .rbadge__label { filter: saturate(0.6); }
.rbadge--imdb.rbadge--low .rbadge__label   { filter: saturate(0.3) brightness(0.85); }
.rbadge--imdb .rbadge__value {
	background: #14130f;
	color: var(--im);
	box-shadow: inset 0 -2px 0 var(--im);
}

/* ---------- Главная: премьеры (макет 09-modern, две колонки) ---------- */
.premiere-modern--split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--sp-10);
	align-items: start;
}
@media (max-width: 760px) {
	.premiere-modern--split { grid-template-columns: 1fr; }
}
.premiere-modern { display: grid; gap: 0; min-width: 0; }
.premiere-modern > a {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: var(--sp-4);
	align-items: center;
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--border);
	color: inherit;
	text-decoration: none;
}
.premiere-modern > a:hover .pm__title { color: var(--accent); }
.premiere-modern .pm__poster {
	width: 56px;
	aspect-ratio: 2 / 3;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--surface);
}
.premiere-modern .pm__poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.premiere-modern .pm__body { min-width: 0; }
.premiere-modern .pm__title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.premiere-modern .pm__date { white-space: nowrap; }

/* ---------- Страница премьер: фильтр и группы по датам ---------- */
.premiere-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
}
.premiere-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.premiere-nav { display: flex; gap: var(--sp-4); }
.premiere-nav__link { color: var(--text-secondary); font-size: var(--fs-sm); }
.premiere-nav__link:hover { color: var(--accent); }
.premiere-schedule .premiere-group { margin-top: var(--sp-8); }
.premiere-schedule .premiere-group:first-child { margin-top: var(--sp-4); }
.premiere-group__date {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-2);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--border);
	font-size: var(--fs-xl);
	font-weight: 600;
}
.premiere-group__date::first-letter { text-transform: none; }
.premiere-group__count {
	font-size: var(--fs-sm);
	font-weight: 400;
	color: var(--text-muted);
}

/* ---------- Заглушка «нет изображения» (катушка из not-found.png) ----------
   Одна на всё: постеры фильмов, фото персон, «В ролях», семья, связанные. */
.ph--noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--surface-2, #1d222b);
	color: #a1a1a1;
}
.pc__photo .ph--noimg,
.person-photo .ph--noimg,
.family-item__ph .ph--noimg,
.pm__poster .ph--noimg,
.rel__poster .ph--noimg,
.film-row__poster .ph--noimg { aspect-ratio: auto; }
.ph__noimg {
	display: block;
	width: 43%;
	max-width: 128px;
	height: auto;
	opacity: 0.55;
}

/* Подвал, «Годы»: две узкие колонки рядом, без растягивания на всю ширину */
.footer__cols--years {
	grid-template-columns: repeat(2, max-content);
	column-gap: var(--sp-6);
	justify-content: start;
}

/* ---------- Коробки постеров и фото: заглушка заполняет их целиком ----------
   Заглушка (.ph--noimg) лежит поверх коробки абсолютно, с тем же радиусом,
   подложка коробки — тёмная поверхность темы. Раньше у .rel__poster был
   светлый фон #f2f3f4, а у заглушки свой радиус (.ph → --r-md), и по краям
   и в углах проступала светлая рамка. */
.mc__poster,
.film-row__poster,
.rel__poster,
.pm__poster,
.pc__photo,
.person-photo,
.family-item__ph,
.film-poster__img {
	position: relative;
	overflow: hidden;
	background: var(--surface-2, #1c2333);
}
.mc__poster > .ph--noimg,
.film-row__poster > .ph--noimg,
.rel__poster > .ph--noimg,
.pm__poster > .ph--noimg,
.pc__photo > .ph--noimg,
.person-photo > .ph--noimg,
.family-item__ph > .ph--noimg,
.film-poster__img > .ph--noimg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	aspect-ratio: auto;
	border-radius: inherit;
	box-sizing: border-box;
}

/* ============================================================
   Статьи: карточки, список, страница статьи
   ============================================================ */

.article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--sp-6);
}

.ac { display: flex; flex-direction: column; min-width: 0; }
.ac__link { display: block; color: inherit; }
.ac__cover {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--surface-2, #1c2333);
	box-shadow: var(--sh-xs);
	transition: box-shadow var(--dur, .2s) var(--ease, ease), transform var(--dur, .2s) var(--ease, ease);
}
.ac__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow, .4s) var(--ease-out, ease-out);
}
.ac__cover > .ph--noimg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: inherit;
}
.ac__link:hover .ac__cover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.ac__link:hover .ac__cover img { transform: scale(1.04); }
.ac__body { padding-top: var(--sp-3); }
.ac__date { display: block; color: var(--text-muted); font-size: var(--fs-xs); margin-bottom: var(--sp-1); }
.ac__title { font-size: var(--fs-lg); line-height: 1.3; font-weight: 600; }
.ac__link:hover .ac__title { color: var(--accent); }
.ac__excerpt {
	margin-top: var(--sp-2);
	color: var(--text-secondary);
	font-size: var(--fs-md);
	line-height: var(--lh-normal);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* теги */
.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.article-tags a {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--r-full);
	background: var(--accent-subtle);
	border: 1px solid rgb(74 140 255 / 0.28);
	color: var(--text);
	font-size: var(--fs-sm);
	line-height: 1.3;
	text-decoration: none;
}
.article-tags a:hover,
.article-tags a.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.article-tags--card { margin-top: var(--sp-2); }
.article-tags--card a { padding: 2px 8px; font-size: var(--fs-xs); }
.article-tags--filter { margin-bottom: var(--sp-8); }

/* страница статьи */
.article-page { padding-bottom: var(--sp-16); }
.article-hero {
	position: relative;
	min-height: 320px;
	aspect-ratio: 21 / 9;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--surface-2, #1c2333);
	display: flex;
	align-items: flex-end;
}
.article-hero__media { position: absolute; inset: 0; }
.article-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;}
.article-hero__media > .ph--noimg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}
.article-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0.55) 65%, rgb(0 0 0 / 0.85) 100%);
}
.article-hero--noimg .article-hero__scrim { background: linear-gradient(180deg, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / 0.5) 100%); }
.article-hero__body {
	position: relative;
	padding: var(--sp-10) var(--sp-10) var(--sp-8);
	max-width: 900px;
	color: #fff;
}
.article-hero__title {
	font-size: var(--fs-5xl);
	line-height: var(--lh-tight);
	letter-spacing: -0.03em;
	margin-top: var(--sp-3);
	color: #fff;
	text-wrap: balance;
}
.article-hero__meta { margin-top: var(--sp-3); color: rgb(255 255 255 / 0.78); font-size: var(--fs-md); }
.article-hero__meta .dot { margin: 0 var(--sp-1); }
.article-tags--hero a { background: rgb(255 255 255 / 0.14); border-color: rgb(255 255 255 / 0.24); color: #fff; }

/* 900 px: колонка текста и связанные блоки одной ширины */
.article-layout { max-width: 900px; margin: var(--sp-10) auto 0; }
.article-lead {
	font-size: var(--fs-xl);
	line-height: var(--lh-normal);
	color: var(--text-secondary);
	margin-bottom: var(--sp-8);
}

/* типографика текста статьи */
.article-content { font-size: var(--fs-lg); line-height: var(--lh-loose); color: var(--text); overflow-wrap: anywhere; }
.article-content > * + * { margin-top: var(--sp-5); }
.article-content h2 { font-size: var(--fs-3xl); line-height: 1.25; letter-spacing: -0.02em; margin-top: var(--sp-12); }
.article-content h3 { font-size: var(--fs-2xl); line-height: 1.3; margin-top: var(--sp-10); }
.article-content h4 { font-size: var(--fs-xl); margin-top: var(--sp-8); }
.article-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-content a:hover { color: var(--accent-hover); }
.article-content ul,
.article-content ol { padding-left: 1.4em; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li + li { margin-top: var(--sp-2); }
.article-content blockquote {
	margin-left: 0;
	padding: var(--sp-4) var(--sp-6);
	border-left: 3px solid var(--accent);
	background: var(--surface);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	color: var(--text-secondary);
	font-style: italic;
}
.article-content img,
.article-content video,
.article-content iframe { max-width: 100%; height: auto; border-radius: var(--r-md); }
.article-content figure { margin-inline: 0; }
.article-content figcaption,
.article-content .wp-element-caption { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }
.article-content .wp-block-embed iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; }
.article-content hr { border: 0; border-top: 1px solid var(--border); margin-block: var(--sp-10); }
.article-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.article-content th,
.article-content td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); text-align: left; }
.article-content code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); padding: 1px 5px; border-radius: var(--r-xs); }
.article-content pre { background: var(--surface); padding: var(--sp-4); border-radius: var(--r-md); overflow: auto; }
.article-content .alignleft { float: left; margin: 0 var(--sp-6) var(--sp-4) 0; max-width: 50%; }
.article-content .alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-6); max-width: 50%; }
.article-content .aligncenter { margin-inline: auto; }
.article-content .alignwide,
.article-content .alignfull { max-width: none; }

.article-block { margin-top: var(--sp-16); padding-top: var(--sp-10); border-top: 1px solid var(--border); }
.article-related { margin-top: var(--sp-16); }

/* ============================================================
   Связанное в статье: вид строками

   До трёх элементов блоки «Фильмы в статье» и «Персоны в статье»
   переключаются со сетки на строки (single-article.php, счётчик
   km_article_rows_max): постер 92 px, текст рядом — мало места
   занято, ничего не растягивается на всю колонку. Больше — сетка,
   которая на таком количестве уже выглядит хорошо.

   Строка фильма — готовая .film-row из токенов (template-parts/film-row.php).
   Ниже — её парная строка персоны: та же сетка, свои классы.
   ============================================================ */

/* двойных разделителей между строками не надо */
.article-rows .film-row:last-child,
.article-rows .person-row:last-child { border-bottom: 0; }

.person-row {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) auto;
	gap: var(--sp-5);
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--border);
	align-items: start;
}
.person-row:hover { background: var(--surface); }
.person-row__photo {
	position: relative;
	aspect-ratio: var(--poster-ratio);
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--surface);
}
.person-row__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* заглушка без фото: на весь блок, как у film-row */
.person-row__photo > .ph--noimg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	aspect-ratio: auto;
	border-radius: 0;
}
.person-row__body { min-width: 0; }
.person-row__name { font-size: var(--fs-xl); font-weight: 600; line-height: 1.3; margin-bottom: var(--sp-2); }
.person-row__name a { color: var(--text); }
.person-row__name a:hover { color: var(--accent); }
.person-row__role { color: var(--text-muted); font-size: var(--fs-sm); }
.person-row__count { white-space: nowrap; font-size: var(--fs-sm); color: var(--text-muted); padding-top: 4px; }

/* ============================================================
   Статья без обложки

   Когда в метабоксе включено «Не выводить картинку-заглушку»,
   km_article_cover() отдаёт пустую строку: в шапке и в карточке
   остаётся градиент вместо заглушки-катушки.
   ============================================================ */

.article-hero--noimg {
	aspect-ratio: auto;
	min-height: 0;
	background: linear-gradient(135deg, #1a2130, var(--surface));
	border: 1px solid var(--border);
}
.article-hero--noimg .article-hero__body { padding: var(--sp-10) var(--sp-8); }

@media (max-width: 860px) {
	.article-hero { aspect-ratio: auto; min-height: 280px; }
	.article-hero--noimg { min-height: 0; }
	.article-hero__body { padding: var(--sp-6) var(--sp-5); }
	.article-hero__title { font-size: var(--fs-3xl); }
	.article-content { font-size: var(--fs-base); }
	.article-content .alignleft,
	.article-content .alignright { float: none; margin: 0; max-width: 100%; }
}

/* ============================================================
   Награды: вкладка фильма и блок персоны (aw-*)
   макет — design-mockups/awards-mockup.html
   ============================================================ */
.aw-summary { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; color: var(--text-muted); font-size: var(--fs-md); }
.aw-summary b { color: var(--text); font-weight: 600; }
.aw-summary .aw-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); }

.aw-groups { display: grid; gap: var(--sp-4); }
.aw-group { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.aw-group[hidden] { display: none; }
.aw-group__head { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.aw-logo { width: 44px; height: 44px; border-radius: 10px; background: var(--bg-alt); display: grid; place-items: center; overflow: hidden; }
.aw-logo img { width: 36px; height: 36px; object-fit: contain; }
.aw-logo--mono { border-radius: 50%; background: var(--surface-2); }
.aw-logo__mono { font-weight: 700; font-size: 13px; line-height: 1; color: var(--rating-mid); letter-spacing: .02em; }
.aw-logo__mono--long { font-size: 10px; }
.aw-group__name { margin: 0; font-weight: 600; color: var(--text); font-size: var(--fs-lg); line-height: 1.25; }
.aw-group__year { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; }
.aw-group__count { color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.aw-group__count b { color: var(--rating-good); font-weight: 600; }

.aw-noms { list-style: none; margin: 0; padding: var(--sp-2) 0; }
.aw-nom { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; padding: var(--sp-3) var(--sp-5); margin: 0; }
.aw-nom + .aw-nom { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.aw-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.aw-nom--win .aw-ico { background: rgb(245 166 35 / .16); color: var(--rating-mid); }
.aw-nom--nom .aw-ico { background: var(--surface-2); color: var(--text-muted); }
.aw-nom__title { color: var(--text); font-size: var(--fs-md); line-height: 1.4; padding-top: 3px; }
.aw-nom--nom .aw-nom__title { color: var(--text-secondary); }
.aw-state { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-full); white-space: nowrap; margin-top: 3px; }
.aw-nom--win .aw-state { background: rgb(46 204 113 / .14); color: var(--rating-good); }
.aw-nom--nom .aw-state { background: var(--surface-2); color: var(--text-muted); }

/* персона на сайте — чип-ссылка; нет на сайте — тот же размер, без фона и ссылки */
.aw-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.aw-person { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--r-full); font-size: var(--fs-sm); line-height: 1.2; }
a.aw-person { background: var(--accent-subtle); color: var(--text); border: 1px solid rgb(74 140 255 / .28); text-decoration: none; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
a.aw-person:hover, a.aw-person:focus-visible { border-color: var(--accent); color: var(--accent); }
span.aw-person { color: var(--text-muted); border: 1px dashed var(--border-strong); }
/* без разделителя/стрелки после чипа персоны (перекрывает и общие правила ::after для ссылок) */
.aw-person::after, .aw-person::before { content: none; display: none; }

/* персона: плоский список «год · постер · премия · номинация · фильм» */
.person-awards { margin-top: var(--sp-10); border-top: 1px solid var(--border); padding-bottom: 0; }
.aw-plist { display: grid; gap: var(--sp-2); }
.aw-prow { display: grid; grid-template-columns: 28px 52px 44px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.aw-prow[hidden] { display: none; }
.aw-prow.aw-nom--win { border-color: rgb(46 204 113 / .28); }
.aw-prow__year { color: var(--text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.aw-prow__poster { display: block; width: 44px; height: 64px; border-radius: 6px; object-fit: cover; background: var(--bg-alt); }
.aw-prow__award { color: var(--text); font-weight: 600; font-size: var(--fs-md); }
.aw-prow__nom { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: 2px; }
.aw-prow__film { font-size: var(--fs-sm); margin-top: 4px; color: var(--text-muted); }
.aw-prow__film a { color: var(--text-secondary); }
.aw-prow__film a:hover { color: var(--accent); }
/* ссылка на черновик — только для редакторов */
.aw-prow__draft { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--text-muted); vertical-align: middle; }
/* фильма нет на сайте: то же название, но без ссылки и без hover */
.aw-prow__film-name { color: var(--text-secondary); }

/* «Семья»: в кружке всегда инициалы — читаемые, а не еле видные, как на постерах */
.family-item__ph .poster__initials { font-size: 15px; color: var(--text-secondary); }
.family-item--link:hover .family-item__ph { box-shadow: 0 0 0 2px var(--accent); }
.family-item--link:hover .family-item__ph .poster__initials { color: var(--accent); }
.aw-plist .aw-state { margin-top: 0; }

@media (max-width: 760px) {
	.aw-group__head { grid-template-columns: 40px 1fr; padding: var(--sp-3) var(--sp-4); }
	.aw-group__count { grid-column: 2; }
	.aw-nom { grid-template-columns: 28px minmax(0, 1fr); padding: var(--sp-3) var(--sp-4); }
	.aw-nom .aw-state { grid-column: 2; justify-self: start; }
	.aw-prow { grid-template-columns: 28px 44px minmax(0, 1fr); }
	.aw-prow__year { grid-column: 3; order: -1; }
	.aw-prow .aw-state { grid-column: 3; justify-self: start; }
}

/* ---------- Каталог персон: активная роль, алфавит, тулбар ---------- */

.role-card { display: block; }
.role-card.is-active {
	border-color: var(--accent);
	background: var(--accent-subtle);
	box-shadow: inset 0 0 0 1px var(--accent);
}
.role-card.is-active .role-card__count { color: var(--text-secondary); }

.abc {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 var(--sp-6);
}
.abc__item {
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	display: inline-grid;
	place-items: center;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text-secondary);
	font-size: var(--fs-sm);
	font-weight: 600;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
a.abc__item:hover { border-color: var(--accent); color: var(--text); }
.abc__item.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.abc__item.is-empty { opacity: 0.35; cursor: default; }

.persons-toolbar { margin-bottom: var(--sp-5); }
.persons-toolbar .toolbar__right { flex-wrap: wrap; }
@media (max-width: 640px) {
	.persons-toolbar .toolbar__right { width: 100%; }
	.persons-toolbar .select { flex: 1 1 160px; }
}

/* ---------- Главная: «Дни рождения сегодня» ---------- */

.bday__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)); /* десктоп — 4 в ряд */
	gap: var(--sp-3);
}
@media (max-width: 1024px) {
	.bday__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bday__card {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--text);
	min-width: 0;
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bday__card:hover { border-color: var(--accent); background: var(--surface-2); transform: translateY(-2px); color: var(--text); }
/* фото — портрет 2:3 с прямыми углами */
.bday__photo {
	position: relative;
	flex: 0 0 64px;
	width: 64px;
	height: 96px;
	overflow: hidden;
	background: var(--surface-2);
}
.bday__photo > img,
.bday__photo > .ph--noimg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	overflow: hidden;
	display: grid;
	place-items: center;
	aspect-ratio: auto;
}
.bday__photo .ph__noimg { width: 50%; }
/* углы скругляют общие правила заглушек и инициалов (.ph, .km-placeholder,
   .ph--initials в style/improve/polish) — здесь их гасим наверняка */
.bday .bday__photo,
.bday .bday__photo img,
.bday .bday__photo .ph,
.bday .bday__photo .ph--noimg,
.bday .bday__photo .ph--initials,
.bday .bday__photo .km-placeholder,
.bday .bday__photo svg { border-radius: 0 !important; }
.bday__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bday__name {
	font-weight: 600;
	font-size: var(--fs-base);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bday__card:hover .bday__name { color: var(--accent); }
.bday__role { font-size: var(--fs-sm); color: var(--text-secondary); }
.bday__age { font-size: var(--fs-sm); color: var(--accent); font-weight: 600; }
/* узкий экран: 2 в ряд, фото над текстом */
@media (max-width: 560px) {
	.bday__grid { gap: var(--sp-2); }
	.bday__card { flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3); }
	.bday__name { white-space: normal; }
}

/* ============================================================
   «Поделиться»: выпадающее меню (km_share_menu)
   ============================================================ */
.share { position: relative; display: inline-block; }
.share--button { display: block; }
.share > summary { list-style: none; cursor: pointer; }
.share > summary::-webkit-details-marker { display: none; }
.share > summary::marker { content: ''; }
.share__toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.share[open] > .share__toggle { color: var(--accent); border-color: var(--accent); }
.share > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.share__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 40;
	display: grid;
	gap: 2px;
	min-width: 230px;
	padding: 6px;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	box-shadow: var(--sh-lg);
}
.share--button .share__menu { left: 0; right: auto; }
.share__item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: var(--fs-sm);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.share__item[hidden] { display: none; }
.share__item svg { flex: none; color: var(--text-secondary); }
.share__item:hover,
.share__item:focus-visible { background: var(--surface-hover); color: var(--text); outline: none; }
.share__item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.share__item--vk:hover svg { color: #0077ff; }
.share__item--ok:hover svg { color: #ee8208; }
.share__item--x:hover svg { color: var(--text); }
.share__item.is-done,
.share__item.is-done svg { color: var(--rating-good, #3bb33b); }

/* ============================================================
   КиноКвест
   ============================================================ */
.quests__lead { color: var(--text-secondary); font-size: var(--fs-lg); max-width: 62ch; margin: calc(-1 * var(--sp-4)) 0 var(--sp-8); }
.quests-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-16); }
@media (max-width: 1024px) { .quests-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .quests-grid { grid-template-columns: 1fr; } }
.quest-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-6);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	color: var(--text);
	text-decoration: none;
	transition: border-color var(--dur-fast, .15s) ease, transform var(--dur-fast, .15s) ease;
}
.quest-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.quest-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quest-card__icon { color: var(--accent); }
.quest-card__title { font-size: var(--fs-xl); font-weight: 700; }
.quest-card__lead { color: var(--text-secondary); font-size: var(--fs-md); }
.quest-card__meta { color: var(--text-muted); font-size: var(--fs-sm); }
.quest-card__go { align-self: flex-start; margin-top: auto; }

/* игра — на всю рабочую ширину, как остальные страницы; читаемость держат сами блоки */
.quest { padding-bottom: var(--sp-16); }
.quest__title { font-size: var(--fs-3xl); line-height: var(--lh-tight); margin: var(--sp-4) 0 var(--sp-3); }
.quest__title--sm { font-size: var(--fs-2xl); margin-top: var(--sp-5); }
.quest__lead { color: var(--text-secondary); font-size: var(--fs-lg); max-width: 60ch; }
.quest-rules { display: grid; gap: var(--sp-2); margin: var(--sp-6) 0 var(--sp-8); padding: 0; list-style: none; color: var(--text-secondary); }
.quest-rules b { color: var(--text); }
.quest-note { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); margin: var(--sp-4) 0; }
.quest-note--warn { border-color: var(--rating-mid, #c9a227); }
.quest-note--ok { border-color: var(--rating-good, #3bb33b); color: var(--text); }
.quest-note--bad { border-color: var(--rating-low, #d9534f); color: var(--text); }

.quest-progress { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); align-items: center; margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-secondary); }
.quest-progress__score b { color: var(--text); }
.quest-progress__bar { grid-column: 1 / -1; height: 6px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.quest-progress__bar > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

.quest-frame {
	position: relative;
	margin: 0 0 var(--sp-5);
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: min(72vh, 720px); /* на широком экране кадр не выше окна: поля — чёрные */
	border-radius: var(--r-lg);
	overflow: hidden;
	background: #000;
}
.quest-frame img { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.quest-frame > .ph--noimg { position: absolute; inset: 0; width: 100%; height: 100%; }

.quest-options fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; border: 0; }
/* на десктопе — в один ряд до 4 вариантов, 5–6 — по 3 в ряд */
@media (min-width: 1025px) {
	.quest-options--n3 fieldset { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.quest-options--n4 fieldset { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.quest-options--n5 fieldset,
	.quest-options--n6 fieldset { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.quest-options--years.quest-options--n5 fieldset { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.quest-options--years.quest-options--n6 fieldset { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.quest-opt { min-height: 64px; }
.quest-opt {
	padding: var(--sp-4);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: var(--fs-md);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--dur-fast, .15s) ease, background var(--dur-fast, .15s) ease;
}
.quest-opt:hover { border-color: var(--accent); background: var(--accent-subtle); }
.quest-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quest-options.is-sending .quest-opt { pointer-events: none; opacity: .6; }
.quest-options.is-sending .quest-opt.is-picked { opacity: 1; border-color: var(--accent); }
@media (max-width: 560px) {
	.quest-options fieldset { grid-template-columns: 1fr; }
	.quest__title { font-size: var(--fs-2xl); }
}

.quest-score { margin-top: var(--sp-4); padding: var(--sp-8); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); text-align: center; }
.quest-score__eyebrow { color: var(--text-muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; }
.quest-score__value { font-size: var(--fs-5xl, 3rem); line-height: 1.1; margin: var(--sp-3) 0; }
.quest-score__value span { font-size: var(--fs-xl); color: var(--text-secondary); font-weight: 500; }
.quest-score__meta { color: var(--text-secondary); }
.quest-score__grade { margin-top: var(--sp-5); font-size: var(--fs-2xl); font-weight: 700; color: var(--accent); }
.quest-score__text { max-width: 52ch; margin: var(--sp-2) auto 0; color: var(--text-secondary); }
.quest-score__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-6); }
.quest-score__actions .share--button { display: inline-block; }
.quest-score__actions .share--button .share__toggle { width: auto; padding: 10px 16px; font-size: var(--fs-md); }
.quest-start { margin: 0; }

.quest-review__title { font-size: var(--fs-xl); margin: var(--sp-10) 0 var(--sp-4); }
.quest-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
@media (max-width: 860px) { .quest-review { grid-template-columns: 1fr; } }
.quest-review__item { display: grid; grid-template-columns: 160px 1fr; gap: var(--sp-4); align-items: center; padding: var(--sp-3); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--r-md); background: var(--surface); }
.quest-review__item.is-ok { border-left-color: var(--rating-good, #3bb33b); }
.quest-review__item.is-bad { border-left-color: var(--rating-low, #d9534f); }
.quest-review__item img { width: 160px; height: 90px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); }
.quest-review__item > div { display: grid; gap: 2px; min-width: 0; }
.quest-review__mark { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.quest-review__film { font-weight: 600; }
.quest-review__film a { color: var(--text); }
.quest-review__film a:hover { color: var(--accent); }
.quest-review__chosen { color: var(--text-muted); font-size: var(--fs-sm); }
@media (max-width: 560px) {
	.quest-review__item { grid-template-columns: 96px 1fr; }
	.quest-review__item img { width: 96px; height: 54px; }
}

/* КиноКвест: слоган и год выхода */
.quest-prompt {
	margin: 0 0 var(--sp-5);
	padding: var(--sp-8) var(--sp-6);
	border: 1px solid var(--border);
	border-left: 4px solid var(--accent);
	border-radius: var(--r-lg);
	background: var(--surface);
}
/* строка не шире ~70 знаков: блок во всю ширину, текст по центру */
.quest-prompt p { max-width: 70ch; margin: 0 auto; font-size: var(--fs-xl, 1.25rem); line-height: 1.5; overflow-wrap: anywhere; }

.quest-poster { display: grid; justify-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.quest-poster img,
.quest-poster > .ph--noimg { width: min(260px, 70vw); aspect-ratio: 2 / 3; height: auto; object-fit: cover; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.quest-poster__title { font-size: var(--fs-xl, 1.25rem); font-weight: 700; text-align: center; }

.quest-options--years fieldset { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.quest-options--years .quest-opt { text-align: center; font-size: var(--fs-lg, 1.125rem); font-weight: 700; font-variant-numeric: tabular-nums; }

.quest-review__item > div:only-child { grid-column: 1 / -1; }
.quest-review__item--desc,
.quest-review__item--year { grid-template-columns: 60px 1fr; }
.quest-review__item--desc img,
.quest-review__item--year img { width: 60px; height: 90px; }
.quest-review__prompt { color: var(--text-muted); font-size: var(--fs-sm); font-style: italic; overflow-wrap: anywhere; }
@media (max-width: 560px) {
	.quest-review__item--desc,
	.quest-review__item--year { grid-template-columns: 48px 1fr; }
	.quest-review__item--desc img,
	.quest-review__item--year img { width: 48px; height: 72px; }
	.quest-options--years fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.quest-prompt { padding: var(--sp-5) var(--sp-4); }
	.quest-prompt p { font-size: var(--fs-lg, 1.125rem); }
}

/* ---------- Квест «Что раньше?»: пара фильмов ---------- */
.quest-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  width: min(100%, 760px);
  margin: 0 auto var(--sp-5);
}
.quest-pair__item {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  margin: 0;
}
.quest-pair__item img,
.quest-pair__item > .ph--noimg {
  width: min(220px, 60vw);
  aspect-ratio: 2 / 3;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.quest-pair__title {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 700;
}
.quest-pair__year { color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
/* варианты — те же два фильма, поэтому кнопки крупнее обычного */
.quest-options--n2 fieldset { gap: var(--sp-4); }
.quest-options--n2 .quest-opt { min-height: 72px; font-size: var(--fs-lg, 1.125rem); }
@media (max-width: 520px) {
  .quest-pair { grid-template-columns: 1fr; }
  .quest-pair__item img,
  .quest-pair__item > .ph--noimg { width: min(200px, 70vw); }
}

/* ---------- Разбор «Что раньше?» ---------- */
.quest-review__item--order { grid-template-columns: 1fr; align-items: stretch; }
.quest-review__pair { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-weight: 600; }
.quest-review__pair-film { display: inline-flex; align-items: baseline; gap: 4px; color: var(--text-secondary); }
.quest-review__pair-film.is-answer { color: var(--text); }
.quest-review__pair-film.is-answer b { color: var(--rating-good, #3bb33b); font-weight: 700; }

/* Метка «черновик» — видна только редакторам (km_theme_draft_tag) на неопубликованных фильмах и персонах */
.km-draft { display: inline-block; margin-left: 4px; padding: 0 4px; border: 1px dashed var(--border-strong); border-radius: var(--r-xs, 3px); background: transparent; font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .02em; color: var(--text-muted); vertical-align: middle; white-space: nowrap; }
/* на постере/фото — в правом нижнем углу, поверх картинки */
.mc__poster, .pc__photo { position: relative; }
.mc__poster > .km-draft,
.pc__photo > .km-draft { position: absolute; right: 6px; bottom: 6px; left: auto; top: auto; margin: 0; z-index: 3; padding: 1px 6px; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--r-xs, 3px); background: rgba(13, 17, 23, .82); color: #fff; font-size: 10px; pointer-events: none; }

/* ============================================================
   Утилиты отступов: сведение в ноль

   Класс на элемент — и отступ выключен, какой бы ни был в правиле
   компонента (.section { padding-block: 64px } и подобные).
   Одноклассники тут одноместные, поэтому обычный каскад тут не
   работает: лежат в конце файла (theme.css грузится последним) и
   идут с !important, иначе .section-правило из tokens.css выиграло
   бы по порядку объявления.

     .p-0 .m-0        все четыре стороны
     .pt-0 .pr-0 .pb-0 .pl-0     сверху / справа / снизу / слева
     .px-0 .py-0     ось X (лево+право) / ось Y (верх+низ)

   padding — .p*, margin — .m*. Значение всегда ноль: это выключатели,
   а не масштаб (шаг отступов задают токены --sp-* в tokens.css).
   ============================================================ */

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }