/*
 * Шаблон афиши.
 *
 * Каркас страницы свой (index.php), сетка и утилиты — Bootstrap 5 от
 * Cassiopeia. Здесь то, чего в бутстрапе нет: шапка, лента дат, карточки
 * событий с постерами.
 */

:root {
	--af-bg: #ffffff;
	--af-surface: #ffffff;
	--af-text: #14161a;
	--af-muted: #6b7280;
	--af-border: #e6e8eb;
	--af-accent: #e8112d;
	--af-accent-ink: #ffffff;
	--af-radius: 14px;
	--af-shadow: 0 1px 2px rgba(20, 22, 26, .06), 0 8px 24px rgba(20, 22, 26, .08);
}

@media (prefers-color-scheme: dark) {
	:root {
		--af-bg: #0f1113;
		--af-surface: #16191d;
		--af-text: #f2f4f7;
		--af-muted: #9aa4b2;
		--af-border: #252a30;
		--af-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
	}
}

body.afisha-site {
	background: var(--af-bg);
	color: var(--af-text);
	font-feature-settings: "kern", "liga";
}

/* --- Шапка ----------------------------------------------------------------- */

.afisha-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: color-mix(in srgb, var(--af-bg) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--af-border);
}

.afisha-header__bar {
	display: flex;
	align-items: center;
	/* Без переноса раскрытое меню на телефоне остаётся в одной строке
	   с логотипом и уезжает за край экрана */
	flex-wrap: wrap;
	gap: 1.25rem;
	min-height: 64px;
}

.afisha-logo {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: -.02em;
	color: var(--af-text);
	text-decoration: none;
	white-space: nowrap;
}

.afisha-logo__mark {
	width: 10px;
	height: 22px;
	border-radius: 3px;
	background: var(--af-accent);
}

/* Меню разделов — горизонтальная лента, как в современных афишах.
   Селектор с классами модуля: у Bootstrap .nav и Cassiopeia .mod-list
   специфичность выше, чем у простого «.afisha-nav ul». */
.afisha-nav ul.mod-menu,
.afisha-nav ul.nav,
.afisha-nav > ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.afisha-nav .nav-item {
	margin: 0;
}

.afisha-nav a {
	display: inline-block;
	padding: .45rem .85rem;
	border-radius: 999px;
	color: var(--af-muted);
	font-size: .95rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

.afisha-nav a:hover {
	background: color-mix(in srgb, var(--af-text) 6%, transparent);
	color: var(--af-text);
}

.afisha-nav .current > a,
.afisha-nav .active > a {
	background: var(--af-text);
	color: var(--af-bg);
}

.afisha-burger {
	margin-inline-start: auto;
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	padding: .5rem;
	background: none;
	border: 0;
}

.afisha-burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--af-text);
	border-radius: 2px;
}

/* Меню занимает остаток строки и прокручивается, если разделов много */
@media (min-width: 992px) {
	.afisha-nav {
		flex: 1 1 auto;
		min-width: 0;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.afisha-nav::-webkit-scrollbar {
		display: none;
	}

	.afisha-nav ul.mod-menu,
	.afisha-nav ul.nav,
	.afisha-nav > ul {
		flex-wrap: nowrap;
		justify-content: flex-end;
	}
}

/* На мобильном меню раскрывается под шапкой отдельным списком:
   горизонтальная лента разделов там не помещается */
@media (max-width: 991.98px) {
	.afisha-nav {
		flex: 0 0 100%;
		padding-bottom: .75rem;
	}

	.afisha-nav ul.mod-menu,
	.afisha-nav ul.nav,
	.afisha-nav > ul {
		flex-direction: column;
		gap: 0;
	}

	.afisha-nav a {
		display: block;
		padding: .7rem .25rem;
		border-radius: 0;
		font-size: 1rem;
	}

	.afisha-nav li + li a {
		border-top: 1px solid var(--af-border);
	}

	.afisha-nav .current > a,
	.afisha-nav .active > a {
		background: none;
		color: var(--af-accent);
		font-weight: 600;
	}
}

/* --- Основная часть --------------------------------------------------------- */

.afisha-main {
	padding: 2rem 0 3rem;
}

.afisha-main > .container-xxl > .mod-breadcrumbs__wrapper {
	margin-bottom: 1.25rem;
}

.afisha-main h1,
.afisha-main .page-header h1 {
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -.02em;
	margin-bottom: 1.25rem;
}

/* --- Лента дат -------------------------------------------------------------- */

.afisha-dates {
	position: relative;
	margin-bottom: 1.75rem;
	/* Лента шире экрана прокручивается внутри себя, а не тянет страницу */
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: thin;
}

/* Компонент отдаёт даты списком ссылок — раскладываем в горизонтальную
   прокручиваемую ленту вместо вертикального столбца. */
.afisha-dates ul,
.afisha-dates .linesdate,
.afisha-dates .datestandart,
.afisha-dates > div {
	display: flex;
	flex-wrap: nowrap;
	gap: .5rem;
	margin: 0;
	padding: 0 0 .5rem;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: thin;
	scroll-snap-type: x proximity;
}

.afisha-dates li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.afisha-dates a {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 62px;
	padding: .5rem .7rem;
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	background: var(--af-surface);
	color: var(--af-text);
	font-size: .85rem;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease, transform .15s ease;
}

.afisha-dates a:hover {
	border-color: var(--af-accent);
	transform: translateY(-1px);
}

.afisha-dates .active a,
.afisha-dates a.active {
	background: var(--af-accent);
	border-color: var(--af-accent);
	color: var(--af-accent-ink);
}

/* --- Сетка и заголовки ------------------------------------------------------ */

.afisha-section {
	margin-bottom: 2.5rem;
}

.afisha-section__title {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.01em;
	margin-bottom: 1rem;
}

.afisha-day {
	margin: 1.5rem 0 .75rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--af-border);
	color: var(--af-muted);
	font-size: .95rem;
	font-weight: 500;
}

.afisha-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem;
}

/* У площадок обложки горизонтальные, а не постеры */
.afisha-grid--places {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.afisha-grid--places .afisha-card__media img {
	aspect-ratio: 3 / 2;
}

.afisha-intro {
	max-width: 70ch;
	margin-bottom: 1.5rem;
	color: var(--af-muted);
}

.afisha-empty {
	padding: 3rem 0;
	color: var(--af-muted);
	text-align: center;
}

.afisha-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	justify-content: center;
	margin-top: 2rem;
}

.afisha-pagination a,
.afisha-pagination span {
	min-width: 38px;
	padding: .4rem .6rem;
	border: 1px solid var(--af-border);
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	color: var(--af-text);
}

.afisha-pagination span[aria-current] {
	background: var(--af-text);
	border-color: var(--af-text);
	color: var(--af-bg);
}

/* --- Карточка события ------------------------------------------------------- */

.afisha-card {
	position: relative;
	height: 100%;
	background: var(--af-surface);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.afisha-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--af-shadow);
}

.afisha-card__media {
	position: relative;
	display: block;
	background: color-mix(in srgb, var(--af-text) 6%, transparent);
}

/* Постеры от парсера приходят разного размера — приводим к единой пропорции,
   иначе сетка разъезжается по высоте. */
.afisha-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	transition: transform .35s ease;
}

.afisha-card:hover .afisha-card__media img {
	transform: scale(1.04);
}

.afisha-card__age {
	position: absolute;
	inset-block-start: .5rem;
	inset-inline-end: .5rem;
	padding: .15rem .4rem;
	border-radius: 6px;
	background: rgba(0, 0, 0, .65);
	color: #fff;
	font-size: .72rem;
	line-height: 1.4;
}

.afisha-card__body {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: .85rem .9rem 1rem;
}

.afisha-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.afisha-card__title a {
	color: inherit;
	text-decoration: none;
}

.afisha-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.afisha-card:hover .afisha-card__title a {
	color: var(--af-accent);
}

.afisha-card__meta {
	color: var(--af-muted);
	font-size: .85rem;
}

.afisha-card__place {
	position: relative;
	z-index: 1;
	margin-top: .25rem;
	padding-top: .5rem;
	border-top: 1px solid var(--af-border);
	font-size: .85rem;
}

.afisha-card__place a {
	color: var(--af-muted);
	text-decoration: none;
}

.afisha-card__place a:hover {
	color: var(--af-accent);
}

/* --- Сеансы ----------------------------------------------------------------- */

.afisha-times {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin-top: .35rem;
}

/* Компонент помечает время классом .badge — у Bootstrap он красит текст
   в белый, и на светлой карточке время становится невидимым. */
.afisha-times a,
.afisha-times span,
.afisha-times .badge,
.seanse_time {
	color: var(--af-text);
	background: transparent;
	display: inline-block;
	padding: .1rem .4rem;
	border: 1px solid var(--af-border);
	border-radius: 6px;
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}

.afisha-times a:hover {
	border-color: var(--af-accent);
	color: var(--af-accent);
}

.inpast {
	color: color-mix(in srgb, var(--af-muted) 60%, transparent);
	text-decoration: line-through;
}

/* Сводка по прокату вместо списка сеансов: у фильма бывает полторы сотни
   кинотеатров, и перечисление растягивало карточку в пять раз выше постера */
.afisha-card__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin: 0;
	color: var(--af-muted);
	font-size: .875rem;
}

/* Цена уходит на свою строку: в узкой карточке разделитель при переносе
   всё равно оставался висеть — то в конце строки, то в начале следующей */
.afisha-card__price,
.afisha-card__when {
	flex-basis: 100%;
}

/* Время подписано словом, сами часы выделены — иначе цифра читалась как
   что угодно: первый сеанс, ближайший, единственный */
.afisha-card__when b {
	color: var(--af-text);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.afisha-card__soon {
	padding: .15rem .45rem;
	border-radius: 6px;
	background: color-mix(in srgb, var(--af-accent) 12%, transparent);
	color: var(--af-accent);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

@media (prefers-color-scheme: dark) {
	.afisha-card__soon {
		background: color-mix(in srgb, var(--af-accent) 22%, transparent);
		color: #ff8a99;
	}
}

/* --- Страница события ------------------------------------------------------- */

.afisha-hero {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 2rem;
	margin-bottom: 2.5rem;
}

@media (max-width: 767.98px) {
	.afisha-hero {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

.afisha-hero__poster {
	position: relative;
	align-self: start;
	border-radius: var(--af-radius);
	overflow: hidden;
	background: color-mix(in srgb, var(--af-text) 6%, transparent);
}

.afisha-hero__poster img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

@media (max-width: 767.98px) {
	/* Во всю ширину постер занимает целый экран — ограничиваем */
	.afisha-hero__poster {
		max-width: 220px;
	}
}

/* У площадок снимки горизонтальные, вертикальная пропорция постера их режет */
.afisha-hero--place .afisha-hero__poster img {
	aspect-ratio: 3 / 2;
}

.afisha-hero__title {
	font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -.02em;
	margin-bottom: .35rem;
}

.afisha-hero__original {
	margin-bottom: 1rem;
	color: var(--af-muted);
	font-size: 1.05rem;
}

.afisha-hero__facts {
	margin-bottom: 1rem;
	color: var(--af-muted);
}

/* Страна, год и жанр — ссылки на поиск, но выглядеть должны как часть строки */
.afisha-hero__facts .tag {
	color: inherit;
	text-decoration: none;
}

.afisha-hero__facts .tag:hover {
	color: var(--af-text);
	text-decoration: underline;
}

.afisha-sep {
	opacity: .5;
	padding: 0 .15rem;
}

.afisha-ratings {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 1.25rem;
}

.afisha-rating {
	display: inline-flex;
	align-items: baseline;
	gap: .4rem;
	padding: .35rem .7rem;
	border: 1px solid var(--af-border);
	border-radius: 999px;
	color: var(--af-muted);
	font-size: .85rem;
}

.afisha-rating b {
	color: var(--af-text);
	font-size: 1.05rem;
}

.afisha-rating i {
	font-style: normal;
	opacity: .65;
}

/* Роли и участники: подпись слева, список ссылок справа */
.afisha-facts {
	display: grid;
	grid-template-columns: minmax(90px, max-content) minmax(0, 1fr);
	gap: .4rem 1rem;
	margin-bottom: 1.5rem;
}

.afisha-facts dt {
	color: var(--af-muted);
	font-weight: 400;
}

.afisha-facts dd {
	margin: 0;
}

.afisha-hero__description {
	max-width: 70ch;
	margin-bottom: 1.5rem;
	line-height: 1.65;
}

.afisha-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.afisha-tags a {
	display: inline-block;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--af-text) 6%, transparent);
	color: var(--af-muted);
	font-size: .85rem;
	text-decoration: none;
}

.afisha-tags a:hover {
	color: var(--af-text);
}

.afisha-trailer__frame {
	position: relative;
	max-width: 860px;
	aspect-ratio: 16 / 9;
	border-radius: var(--af-radius);
	overflow: hidden;
	background: #000;
}

.afisha-trailer__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- Расписание -------------------------------------------------------------- */

.afisha-schedule {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	overflow: hidden;
}

.afisha-schedule__row {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: .75rem 1.5rem;
	padding: .9rem 1rem;
	background: var(--af-surface);
}

.afisha-schedule__row + .afisha-schedule__row {
	border-top: 1px solid var(--af-border);
}

@media (max-width: 575.98px) {
	.afisha-schedule__row {
		grid-template-columns: 1fr;
	}
}

.afisha-schedule__place a {
	color: var(--af-text);
	font-weight: 500;
	text-decoration: none;
}

.afisha-schedule__place a:hover {
	color: var(--af-accent);
}

.afisha-schedule__price {
	display: block;
	margin-top: .2rem;
	color: var(--af-muted);
	font-size: .85rem;
}

/* Сеансы приходят от хелпера набором .badge — у бутстрапа они белые
   на белом фоне карточки, поэтому цвет и фон задаём сами. */
.afisha-times {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
}

.afisha-times .badge {
	padding: .35rem .55rem;
	border: 1px solid var(--af-border);
	border-radius: 8px;
	background: transparent;
	color: var(--af-text);
	font-size: .9rem;
	font-weight: 500;
}

.afisha-times > span:not(.badge) {
	margin-inline-end: .25rem;
	color: var(--af-muted);
	font-size: .85rem;
}

.afisha-weeknav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.25rem;
}

.afisha-weeknav a {
	color: var(--af-muted);
	font-size: .9rem;
	text-decoration: none;
}

.afisha-weeknav a:hover {
	color: var(--af-text);
}

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

.afisha-footer {
	margin-top: 3rem;
	padding: 1.5rem 0;
	border-top: 1px solid var(--af-border);
	color: var(--af-muted);
	font-size: .9rem;
}

.afisha-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* Блок проданных ссылок.
   Стоит в основной колонке под содержимым, а не в подвале: подвальные
   размещения биржа помечает отдельно и покупают их заметно хуже.
   Прятать блок нельзя — display:none, visibility:hidden, нулевой размер и
   вынос за экран биржа считает неразмещением, а поисковик — обманом. */
.afisha-links {
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--af-border);
}

.afisha-links__title {
	margin-bottom: 1rem;
	/* Цвет задаём явно: позиция под содержимым приглушает текст, а заголовок
	   блока должен читаться так же, как заголовки разделов */
	color: var(--af-text);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.afisha-links__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.afisha-links__item {
	padding: .85rem 1rem;
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	background: var(--af-surface);
	/* Размер в rem: относительный давал бы 12 px там, где родитель уменьшен,
	   а мелкий шрифт засчитывается как попытка спрятать ссылку */
	font-size: .9rem;
	line-height: 1.5;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.afisha-links__item:hover {
	border-color: color-mix(in srgb, var(--af-text) 25%, transparent);
	transform: translateY(-1px);
	box-shadow: var(--af-shadow);
}

.afisha-links__item a {
	color: var(--af-text);
	text-decoration: none;
}

.afisha-links__item a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Блочный формат биржи.
   В настройках площадки включён режим «только в формате блоков» со своей
   таблицей стилей: биржа отдаёт разметку, но CSS к ней не прикладывает.
   Внутри приходит вёрстка на table с параграфами — заголовок, текст и домен.

   Селекторы по окончанию класса, а не по полному имени: префикс задаётся в
   настройках площадки (сейчас «88-block») и меняется правкой одного поля —
   привязка к нему сломала бы оформление молча. Первая цифра в имени класса
   вдобавок требует экранирования, а `[class$="_header"]` от этого свободен. */
/* Биржа отдаёт все объявления страницы одним блоком: таблица в одну строку,
   ячейкам проставлен inline-стиль width:33%. В нашей сетке этот блок попадал
   в колонку 230 px, и на объявление оставалось по восемьдесят пикселей.

   Поэтому таблицу разбираем: table и tbody исчезают через display:contents,
   строка становится сеткой, ячейки — карточками. Заодно уходит и вёрстка
   таблицей, которая не переносится на узком экране: auto-fit сам покажет
   одну колонку на телефоне и три на мониторе, без отдельного медиазапроса.
   Ширину 33% приходится перебивать !important — она стоит прямо в атрибуте. */
.afisha-links__item:has(table) {
	grid-column: 1 / -1;
	padding: 0;
	border: 0;
	background: none;
}

.afisha-links__item:has(table):hover {
	transform: none;
	box-shadow: none;
}

.afisha-links__item table,
.afisha-links__item tbody {
	display: contents;
}

.afisha-links__item tr {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: .75rem;
}

.afisha-links__item td {
	display: block;
	width: auto !important;
	padding: .85rem 1rem;
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	background: var(--af-surface);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.afisha-links__item td:hover {
	border-color: color-mix(in srgb, var(--af-text) 25%, transparent);
	box-shadow: var(--af-shadow);
}

/* Единственное объявление во всю ширину раздела выглядит растянутым */
.afisha-links__item tr:has(td:only-child) {
	grid-template-columns: minmax(230px, 22rem);
}

.afisha-links__item p {
	margin: 0;
}

/* Заголовок объявления */
.afisha-links__item [class$="_header"] {
	margin-bottom: .3rem;
	color: var(--af-text);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Описание: сама ссылка сидит внутри него */
.afisha-links__item [class$="_text"] {
	color: var(--af-muted);
	font-size: .875rem;
	line-height: 1.45;
}

.afisha-links__item [class$="_text"] a {
	color: var(--af-accent);
	text-decoration: none;
}

.afisha-links__item [class$="_text"] a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Домен — подпись под объявлением */
.afisha-links__item [class$="_url"] {
	margin-top: .4rem;
	color: var(--af-muted);
	font-size: .8rem;
	word-break: break-all;
}

/* Биржа вешает переход на span через onclick — курсор должен об этом говорить */
.afisha-links__item span[onclick] {
	display: block;
	cursor: pointer;
}

/* Прежняя разметка модуля — на случай, если где-то остался старый вывод */
.mod_jblinksale a,
.jblinksale a {
	color: inherit;
}

/* В позиции под содержимым разделитель рисует сама позиция */
.afisha-modules--bottom > .afisha-links {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Дни без сеансов: ссылки нет, поэтому и выглядеть должны неактивными */
.afisha-dates .is-empty span {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 62px;
	padding: .5rem .7rem;
	border: 1px dashed var(--af-border);
	border-radius: var(--af-radius);
	color: var(--af-muted);
	font-size: .85rem;
	line-height: 1.3;
	white-space: nowrap;
	opacity: .55;
}

/* --- Страница ошибки --------------------------------------------------------- */

.afisha-error {
	max-width: 40rem;
	margin: 0 auto;
	padding: 3rem 0 4rem;
	text-align: center;
}

.afisha-error__code {
	margin: 0;
	color: var(--af-accent);
	font-size: clamp(3.5rem, 2rem + 8vw, 6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
}

.afisha-error__title {
	margin: .5rem 0 1rem;
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
	font-weight: 700;
	letter-spacing: -.02em;
}

.afisha-error__text {
	margin-bottom: 2rem;
	color: var(--af-muted);
	line-height: 1.6;
}

/* С битого адреса человеку полезнее уйти в раздел афиши, чем на главную */
.afisha-error__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.afisha-error__links a {
	display: inline-block;
	padding: .5rem 1rem;
	border: 1px solid var(--af-border);
	border-radius: 999px;
	background: var(--af-surface);
	color: var(--af-text);
	text-decoration: none;
	transition: border-color .15s ease;
}

.afisha-error__links a:hover {
	border-color: var(--af-accent);
	color: var(--af-accent);
}

.afisha-error__home a {
	color: var(--af-muted);
	font-size: .9rem;
}

/* --- Модули в потоке страницы ------------------------------------------------ */

.afisha-modules--top {
	margin-bottom: 2rem;
}

.afisha-modules--bottom {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--af-border);
	color: var(--af-muted);
	line-height: 1.65;
}

/* Ограничение строки для читаемости — на текстовых блоках, а не на всей
   позиции: сетка ссылок должна занимать ту же ширину, что и сетка событий. */
.afisha-modules--bottom > * {
	max-width: 70ch;
}

.afisha-modules--bottom > .afisha-links {
	max-width: none;
}

.afisha-modules--bottom a {
	color: var(--af-text);
}

/* Сайдбар только на внутренних страницах: на главной модуль афиши идёт
   во всю ширину, делить её незачем */
.afisha-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
	gap: 2rem;
	align-items: start;
}

/* Без min-width ячейка сетки растягивается под самое широкое содержимое —
   лента дат распирала страницу до 550 px на телефоне вместо 375 */
.afisha-layout__main,
.afisha-layout__side {
	min-width: 0;
}

@media (max-width: 991.98px) {
	.afisha-layout {
		grid-template-columns: 1fr;
	}

	.afisha-layout__side {
		order: 2;
	}
}

.afisha-layout__side .card {
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	background: var(--af-surface);
}

.afisha-layout__side ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.afisha-layout__side .mod-menu li + li {
	border-top: 1px solid var(--af-border);
}

.afisha-layout__side .mod-menu a {
	display: block;
	padding: .6rem .9rem;
	color: var(--af-text);
	text-decoration: none;
}

.afisha-layout__side .mod-menu a:hover {
	color: var(--af-accent);
}

/* Лента модуля на главной: карточки помельче, чем в списках раздела */
.afisha-grid--module {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 1rem;
}

/* Заголовок блока на главной со ссылкой на раздел целиком */
.afisha-block__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 2.5rem 0 1rem;
}

.afisha-block__head:first-child {
	margin-top: 0;
}

.afisha-block__head .afisha-section__title {
	margin: 0;
}

.afisha-block__all {
	flex: 0 0 auto;
	color: var(--af-muted);
	font-size: .9rem;
	text-decoration: none;
	white-space: nowrap;
}

.afisha-block__all:hover {
	color: var(--af-accent);
}

/* Заголовок раздела */
.afisha-title {
	margin-bottom: 1.25rem;
	font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.2rem);
	font-weight: 700;
	letter-spacing: -.02em;
}

.afisha-title__date {
	color: var(--af-muted);
	font-weight: 400;
}

/* На телефоне карточки в две колонки: одна на всю ширину даёт постер
   в пол-экрана и заставляет листать вместо просмотра */
@media (max-width: 575.98px) {
	.afisha-grid,
	.afisha-grid--module,
	.afisha-grid--places {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .75rem;
	}

	.afisha-card__title {
		font-size: .95rem;
	}

	.afisha-card__summary {
		font-size: .8rem;
	}
}

/* Заглушка вместо постера.
   Рисуется стилями, а не картинкой: у 1140 событий из 1536 изображения нет,
   и прежний nofoto.png весом 3,5 КБ грузился на каждой такой карточке. Здесь
   ноль запросов, живая подстройка под тёмную тему и первая буква названия
   вместо безликой иконки. */
.afisha-card__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 2 / 3;
	background:
		radial-gradient(120% 80% at 50% 0%,
			hsl(var(--af-hue, 0) 60% 92%) 0%,
			var(--af-surface) 70%);
	border-bottom: 1px solid var(--af-border);
	/* Карточка — ссылка, и подчёркивание от неё пробивается на букву */
	text-decoration: none;
}

@media (prefers-color-scheme: dark) {
	.afisha-card__media--empty {
		background:
			radial-gradient(120% 80% at 50% 0%,
				hsl(var(--af-hue, 0) 30% 22%) 0%,
				var(--af-surface) 70%);
	}
}

.afisha-grid--places .afisha-card__media--empty,
.afisha-hero--place .afisha-hero__poster.afisha-card__media--empty {
	aspect-ratio: 3 / 2;
}

.afisha-card__letter {
	font-size: clamp(2rem, 1rem + 6vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
	color: hsl(var(--af-hue, 0) 35% 45% / .5);
	text-decoration: none;
	user-select: none;
}

@media (prefers-color-scheme: dark) {
	.afisha-card__letter {
		color: hsl(var(--af-hue, 0) 40% 75% / .45);
	}
}

.afisha-hero__poster.afisha-card__media--empty {
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
}

/* Страница персоны: фото портретное, как постер */
.afisha-hero--person .afisha-hero__poster img {
	aspect-ratio: 2 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
	border-radius: var(--af-radius);
}

/* Фильмография: год слева, события справа */
.afisha-facts--years dt {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--af-text);
}

.afisha-facts--years dd {
	margin-bottom: .35rem;
	line-height: 1.6;
}

/* Подвал: свой копирайт слева, текст модуля справа — без дублирования года */
.afisha-footer__copy {
	margin: 0;
	white-space: nowrap;
}

.afisha-footer p {
	margin: 0 0 .35rem;
}

.afisha-footer .mod-custom {
	max-width: 60ch;
	text-align: end;
}

@media (max-width: 767.98px) {
	.afisha-footer .mod-custom {
		text-align: start;
	}
}

/* --- Журнал ------------------------------------------------------------------ */

.afisha-article {
	max-width: 46rem;
}

.afisha-article__title {
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -.02em;
	margin-bottom: .5rem;
}

.afisha-article__date {
	margin-bottom: 1.75rem;
	color: var(--af-muted);
	font-size: .9rem;
}

/* Ширина строки под чтение: сплошной текст во всю колонку не читается */
.afisha-article__body p {
	margin-bottom: 1.1rem;
	line-height: 1.7;
}

/* Карточка материала в ленте: та же сетка, что у событий, но без постера */
.afisha-card--article .afisha-card__body {
	padding: 1.1rem 1.2rem;
}

.afisha-card__intro {
	margin-top: .5rem;
	color: var(--af-muted);
	font-size: .92rem;
	line-height: 1.55;
}

.afisha-card__intro p {
	margin: 0;
}


/* Крошки переехали под содержимое: там они служат для возврата на уровень
   выше, а не представляют страницу, — потому и выглядят скромнее. */
.afisha-crumbs {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--af-border);
	font-size: .85rem;
	color: var(--af-muted);
}

.afisha-crumbs .mod-breadcrumbs__wrapper,
.afisha-crumbs .breadcrumb {
	margin: 0;
	padding: 0;
	background: none;
}

.afisha-crumbs a {
	color: var(--af-muted);
}

.afisha-crumbs a:hover {
	color: var(--af-text);
}

/* --- Связанное в афише ------------------------------------------------------- */

.afisha-related {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--af-text);
}

.afisha-related__title {
	margin-bottom: 1rem;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.afisha-related__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.afisha-related__item {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .7rem .9rem;
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	background: var(--af-surface);
	transition: border-color .15s ease, transform .15s ease;
}

.afisha-related__item:hover {
	border-color: var(--af-accent);
	transform: translateY(-1px);
}

.afisha-related__item a {
	color: var(--af-text);
	font-weight: 600;
	text-decoration: none;
}

.afisha-related__note {
	color: var(--af-muted);
	font-size: .82rem;
}

/* Ссылки внутри текста материала: заметные, но не пестрящие */
.afisha-article__body a {
	color: var(--af-text);
	text-decoration: underline;
	text-decoration-color: var(--af-accent);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

.afisha-article__body a:hover {
	color: var(--af-accent);
}

/* --- Теги материала ---------------------------------------------------------- */

.afisha-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.afisha-tags a {
	display: inline-block;
	padding: .3rem .75rem;
	border: 1px solid var(--af-border);
	border-radius: 999px;
	color: var(--af-muted);
	font-size: .82rem;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.afisha-tags a:hover {
	border-color: var(--af-accent);
	color: var(--af-text);
}


/* Лента журнала: карточки пошире, чем у событий — здесь текст, а не постер */
.afisha-grid--journal {
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	align-items: start;
}

.afisha-card--article {
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	background: var(--af-surface);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.afisha-card--article:hover {
	border-color: color-mix(in srgb, var(--af-text) 25%, transparent);
	transform: translateY(-2px);
	box-shadow: var(--af-shadow);
}

.afisha-card--article .afisha-card__title {
	font-size: 1.05rem;
	line-height: 1.35;
}

.afisha-card--article .afisha-card__title a {
	color: var(--af-text);
	text-decoration: none;
}

/* Вводка обрезается по строкам, иначе карточки в ряду разной высоты
   и сетка выглядит рваной */
.afisha-card__intro p {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Список афиши в боковой колонке журнала.
   Плотная строка вместо карточки: в колонке шириной 300 px сетка карточек
   вытягивалась в столбец на полтора экрана и уводила читателя от текста. */
.afisha-side-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.afisha-side-list__item + .afisha-side-list__item {
	border-top: 1px solid var(--af-border);
}

.afisha-side-list__link {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: .75rem;
	align-items: start;
	padding: .7rem 0;
	color: inherit;
	text-decoration: none;
}

.afisha-side-list__link:hover .afisha-side-list__title {
	color: var(--af-accent);
}

.afisha-side-list__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 2 / 3;
	border-radius: 6px;
	background: var(--af-surface);
}

.afisha-side-list__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Буква-заглушка задана под постер карточки и в миниатюре занимала всю плашку */
.afisha-side-list__thumb .afisha-card__letter {
	font-size: 1.25rem;
}

.afisha-side-list__body {
	display: block;
	min-width: 0;
}

.afisha-side-list__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
}

.afisha-side-list__meta {
	display: block;
	margin-top: .2rem;
	font-size: .8rem;
	color: var(--af-muted);
}

.afisha-side-list__all {
	display: inline-block;
	margin-top: .6rem;
	font-size: .85rem;
	font-weight: 600;
}