/*
 * ShortPlay Episodes — страница серии (ReelShort-подобная структура)
 * Полный экран без прокрутки страницы; правый блок до 500px с собственной прокруткой.
 * Хлебные крошки: Главная / название сериала / Эпизод N.
 */

/* На десктопе: экран без прокрутки, плеер на всю свободную высоту, 9:16
----------------------------------------------- */
@media screen and (min-width: 760px) {
	body:has(.sp-episode-page) {
		overflow: hidden;
		height: 100vh;
	}
	body:has(.sp-episode-page) .wrapper-container.wrapper-main {
		min-height: 100vh;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	/* Не задаём height: 100% — пусть main получает высоту от flex (100vh минус шапка), иначе контент обрезается снизу */
	body:has(.sp-episode-page) main,
	body:has(.sp-episode-page) main > .flex-grow-1 {
		overflow: hidden;
		min-height: 0;
	}
	.sp-episode-page {
		height: 100%;
		min-height: 0;
		overflow: hidden;
		padding-top: 0;
	}
	.sp-episode-top {
		flex: 1;
		min-height: 0;
		overflow: hidden;
		align-items: stretch;
	}
	.sp-episode-player {
		height: 100%;
		min-height: 0;
		min-width: 0;
		max-width: 100%;
		align-self: stretch;
		align-items: flex-start;
		overflow: hidden;
	}
	/* Размер задаётся скриптом (строго 9:16, без обрезки); здесь только ограничение на случай до загрузки JS */
	.sp-episode-player .sp-episode-player-inner {
		aspect-ratio: 9 / 16;
		max-width: 100%;
		max-height: 100%;
	}
	/* Боковой блок: фиксированная высота под шапку, при переполнении — вертикальная прокрутка до конца */
	.sp-episode-side {
		min-height: 0;
		height: 100%;
		max-height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		padding-bottom: 24px;
		box-sizing: border-box;
	}
	/* Крошки и блоки сверху не сжимать по вертикали, чтобы не обрезались */
	.sp-episode-side .sp-episode-breadcrumbs,
	.sp-episode-side .sp-episode-heading,
	.sp-episode-side .sp-episode-stats,
	.sp-episode-side .sp-episode-plot,
	.sp-episode-side .sp-episode-all {
		flex-shrink: 0;
	}
	.sp-episode-all--mobile {
		display: none !important;
	}
}

body:has(.sp-episode-page) .footer {
	display: none !important;
}

/* Паддинг убираем и на мобильном для страницы серии */
body:has(.sp-episode-page) .col-main {
	padding: 0;
}

/* Контейнер страницы — на весь экран
----------------------------------------------- */
.sp-episode-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding: 20px;
	color: var(--tt, #eee);
	box-sizing: border-box;
}

/* Верхний блок: плеер слева по центру своей зоны, правый блок всегда справа (max 500px, с прокруткой)
----------------------------------------------- */
.sp-episode-top {
	flex: 1;
	min-height: 0;
	display: flex;
	gap: 24px;
	align-items: flex-start;
	overflow: hidden;
}

/* Плеер в пропорциях Shorts (9:16), по центру; на десктопе влезает в экран */
.sp-episode-player {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	justify-content: center;
}

.sp-episode-player-inner {
	position: relative;
	aspect-ratio: 9 / 16;
	max-width: 380px;
	width: 100%;
	max-height: 100%;
	height: auto;
	background: var(--bg-4, #09090a);
	border-radius: 8px;
	overflow: hidden;
}

.sp-episode-player-inner > iframe,
.sp-episode-player-inner > video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* Правый блок: макс. 500px, всегда справа, с собственной прокруткой */
.sp-episode-side {
	flex: 0 0 auto;
	width: 100%;
	max-width: 500px;
	min-width: 280px;
	margin-left: auto;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding-right: 8px;
}

/* Хлебные крошки: Главная / название сериала / Эпизод N
----------------------------------------------- */
.sp-episode-breadcrumbs {
	font-size: 13px;
	color: var(--tt-3, #808097);
	margin-bottom: 14px;
	line-height: 1.5;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	overflow: hidden;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.sp-episode-breadcrumbs a:first-of-type,
.sp-episode-breadcrumbs-sep {
	flex-shrink: 0;
}
.sp-episode-breadcrumbs-current {
	flex-shrink: 0;
}
/* Когда места достаточно — «/ Эпизод N» прижимаем вправо */
.sp-episode-breadcrumbs-sep:last-of-type {
	margin-left: auto;
}
/* Название сериала: не растягивается, при нехватке места — обрезка с троеточием; свободное место уходит вправо для «/ Эпизод N» */
.sp-episode-breadcrumbs__title {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* На десктопе: только крошки в правой колонке; мобильные крошки скрыты */
.sp-episode-breadcrumbs--mobile {
	display: none;
}

/* На мобильном: крошки сверху (перед плеером), в колонке скрыты — см. общий блок @media ниже */
.sp-episode-breadcrumbs--mobile {
	display: none;
}

.sp-episode-breadcrumbs a {
	color: var(--tt-2, #b0b0c9);
}

.sp-episode-breadcrumbs a:hover {
	color: #6a5f91;
}

.sp-episode-breadcrumbs-sep {
	margin: 0 6px;
	user-select: none;
}

.sp-episode-breadcrumbs-current {
	color: var(--tt, #eee);
}

/* Ссылка «К материалу» (скрыта, есть хлебные крошки)
----------------------------------------------- */
.sp-episode-back {
	margin-bottom: 12px;
}

.sp-episode-back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--tt-2, #b0b0c9);
}

.sp-episode-back-link:hover {
	color: var(--accent, #00bafc);
}

/* Заголовок: «Эпизод N — Название сериала» (десктоп и мобильный)
----------------------------------------------- */
.sp-episode-heading {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 16px;
	color: var(--tt, #eee);
}

/* Блок статистики: просмотры, закладки, рейтинг, поделиться (на десктопе под заголовком)
----------------------------------------------- */
.sp-episode-stats {
	gap: 24px;
	margin-top: 0;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.sp-episode-stats .pmovie__stat { color: var(--tt-2, #b0b0c9); font-size: 16px; }
.sp-episode-stats .pmovie__stat .fal { font-size: 22px; }
.sp-episode-stats .pmovie__stat:hover { color: var(--tt, #eee); }
.sp-episode-stats .pmovie__stat--fav a { color: inherit; text-decoration: none; }
.sp-episode-stats .pmovie__stat--fav a:hover { color: inherit; }
.sp-episode-stats .pmovie__stat--share { font-family: inherit; }

/* Сюжет эпизода (первые 100 символов, затем «Развернуть»)
----------------------------------------------- */
/* На десктопе: описание перед сериями (порядок через order в .sp-episode-side) */
.sp-episode-side {
	display: flex;
	flex-direction: column;
}
.sp-episode-all {
	order: 4;
}
.sp-episode-plot {
	order: 3;
	margin-top: 24px;
	margin-bottom: 0;
}

.sp-episode-plot-title {
font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tt-3, #808097);
    margin-bottom: 8px;
    font-weight: 700;
}

.sp-episode-plot-text {
	color: var(--tt-dark, #ccc);
    line-height: 1.7;
    font-size: 14px;
    word-wrap: break-word;
    background: #212121;
    padding: 8px 14px;
    border-radius: 12px;
}

.sp-episode-plot-short {
	display: inline;
}

.sp-episode-plot-full {
	display: none;
}

.sp-episode-plot--expanded .sp-episode-plot-short {
	display: none;
}

.sp-episode-plot--expanded .sp-episode-plot-full {
	display: inline;
}

.sp-episode-plot-toggle {
	display: inline-block;
    height: auto;
    font-size: 14px;
    font-weight: 500;
    color: #b7aae4;
    background: none;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    border: 2px solid #b19cd9;
    padding: 4px;
}

.sp-episode-plot-toggle:hover {
	color: #b7aae4;;
	
}

/* Навигация «Предыдущая / Следующая серия» (в правой колонке над «Серии»)
----------------------------------------------- */
.sp-episode-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 20px;
	margin-bottom: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--bdc, #111113);
}

.sp-episode-nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 700;
	background-color: var(--accent, #00bafc);
	color: #fff;
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sp-episode-nav-btn:hover {
	background-color: var(--accent-darker, #03a5e0);
	color: #fff;
}

.sp-episode-nav-btn--disabled {
	background-color: var(--bg-3, #111014);
	color: var(--tt-3, #808097);
	cursor: default;
}

/* Блок «Серии»: список или вкладки (в правой колонке)
----------------------------------------------- */
.sp-episode-all {
	margin-top: 24px;
	margin-bottom: 0;
}

.sp-episode-all-title {

	font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tt-3, #808097);
    margin-bottom: 8px;
}

/* Один список серий (≤50) — на десктопе с переносом строк
----------------------------------------------- */
.sp-episode-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sp-episode-list a,
.sp-episode-list .sp-ep-current {
	    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 12px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(175deg, #61548f 0%, #3d3360ed 100%);
}

.sp-episode-list a:hover {
	background: linear-gradient(175deg, #61548f70 0%, #3d3360ed 100%);
	color: #fff;
	
}

/* Подсветка открытой серии */
.sp-episode-list .sp-ep-current {
	background: linear-gradient(175deg, #74747470 0%, #6d697dab 100%);
    color: #fff;
    border-color: #877ab6;
    border-width: 1px;
    cursor: default;
    pointer-events: none;
}

/* Вкладки серий (при >50)
----------------------------------------------- */
.sp-episode-tabs-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.sp-ep-tab-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 60px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 700;
	background: transparent;
	color: var(--tt-2, #b0b0c9);
	border: 1px solid #b19cd9;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.sp-ep-tab-btn:hover {
	background: #3a3840;
	color: #fff;
	border-color: #3a3840;
}

.sp-ep-tab-btn.is-active {
	background: #3a3840;
	color: #fff;
	border-color: #b19cd9;
}

.sp-episode-tabs-content {
	position: relative;
	margin-bottom: 40px;
}

.sp-ep-chunk {
	display: none;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
}
.sp-ep-chunk.is-active {
	display: flex;
}

/* На десктопе: серии в несколько строк, без горизонтального скролла */
@media screen and (min-width: 760px) {
	.sp-ep-chunk {
		flex-wrap: wrap;
		overflow-x: visible;
		overflow-y: visible;
	}
}
.sp-ep-chunk::-webkit-scrollbar {
	height: 6px;
}
.sp-ep-chunk::-webkit-scrollbar-track {
	background: var(--bg-3, #111014);
}
.sp-ep-chunk::-webkit-scrollbar-thumb {
	background: var(--tt-3, #808097);
	border-radius: 3px;
}

.sp-ep-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 700;
	background: transparent;
	color: var(--tt-2, #b0b0c9);
	border: 1px solid #b19cd9;
	border-radius: 6px;
	flex-shrink: 0;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.sp-ep-num:hover {
	background: #3a3840;
	color: #fff;
	border-color: #3a3840;
}

/* Подсветка открытой серии (вкладки 50+) */
.sp-ep-num--current {
	background: #3a3840;
	color: #fff;
	border: 1px solid #b19cd9;
	cursor: default;
	pointer-events: none;
}

/* Ссылка «Вернуться к материалу» внизу — скрыта (есть хлебные крошки)
----------------------------------------------- */
.sp-episode-back-bottom {
	display: none !important;
}

/* Мобильная: отступ 10px → серии → 10px → плеер 9:16 (высокий) → 20px → крошки → статистика → 20px → заголовок → описание. Прокрутка всей страницы.
----------------------------------------------- */
@media screen and (max-width: 759px) {
	.sp-episode-page {
		padding: 10px 10px 24px;
		display: flex;
		flex-direction: column;
	}

	.sp-episode-top {
		display: flex;
		flex-direction: column;
		gap: 0;
		align-items: flex-start;
		padding-bottom: 0;
	}

	.sp-episode-all {
		margin-top: 0;
		margin-bottom: 0;
	}

	/* Порядок: 1) серии (без заголовка), 2) плеер (заполняет экран), 3) крошки, 4) боковой блок */
	.sp-episode-all--mobile {
		order: 0;
		padding: 0;
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
		overflow-x: visible;
	}
	.sp-episode-all--mobile .sp-episode-all-title {
		display: none;
	}
	/* Мобильный: одна прокручиваемая строка со всеми сериями (все чанки подряд) */
	.sp-episode-all--mobile .sp-episode-tabs-content {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		gap: 8px;
		padding-bottom: 6px;
		margin-bottom: 10px;
	}
	.sp-episode-all--mobile .sp-ep-chunk {
		display: flex !important;
		flex-shrink: 0;
		flex-wrap: nowrap;
		gap: 8px;
	}
	.sp-episode-all--mobile .sp-episode-tabs-content::-webkit-scrollbar {
		height: 6px;
	}
	.sp-episode-all--mobile .sp-episode-tabs-content::-webkit-scrollbar-track {
		background: var(--bg-3, #111014);
	}
	.sp-episode-all--mobile .sp-episode-tabs-content::-webkit-scrollbar-thumb {
		background: var(--tt-3, #808097);
		border-radius: 3px;
	}
	.sp-episode-all--desktop {
		display: none !important;
	}
	.sp-episode-player {
		flex: 0 0 auto;
		width: 100%;
		height: calc(100vh - 140px);
		height: calc(100dvh - 140px);
		order: 1;
		margin-top: 10px;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		overflow: hidden;
		min-width: 0;
	}
	.sp-episode-player .sp-episode-player-inner {
		width: auto;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		aspect-ratio: 9 / 16;
		flex-shrink: 0;
	}
	.sp-episode-breadcrumbs--mobile {
		display: flex;
		order: 2;
		margin-top: 20px;
		margin-bottom: 10px;
		padding: 0;
	}
	.sp-episode-breadcrumbs--desktop {
		display: none !important;
	}
	.sp-episode-side {
		flex: 0 1 auto;
		width: 100%;
		max-width: none;
		margin-left: 0;
		max-height: none;
		overflow: visible;
		order: 3;
		padding: 0;
	}
	/* Внутри бокового блока: статистика → 20px → заголовок → описание */
	.sp-episode-stats {
		order: 0;
		margin-top: 0;
		margin-bottom: 0;
		justify-content: center;
	}
	.sp-episode-heading {
		order: 1;
		margin-top: 20px;
		margin-bottom: 16px;
		text-align: center;
	}
	.sp-episode-plot {
		order: 2;
		margin-top: 0;
	}

	/* Серии в одну строку с горизонтальной прокруткой */
	.sp-episode-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x pan-y;
		padding-bottom: 6px;
		min-width: 0;
	}
	.sp-episode-list::-webkit-scrollbar {
		height: 6px;
	}
	.sp-episode-list::-webkit-scrollbar-track {
		background: var(--bg-3, #111014);
	}
	.sp-episode-list::-webkit-scrollbar-thumb {
		background: var(--tt-3, #808097);
		border-radius: 3px;
	}
	.sp-episode-list a,
	.sp-episode-list .sp-ep-current {
		flex-shrink: 0;
	}
	.sp-ep-chunk {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
	}
	.sp-ep-chunk::-webkit-scrollbar {
		height: 6px;
	}
	.sp-ep-chunk::-webkit-scrollbar-track {
		background: var(--bg-3, #111014);
	}
	.sp-ep-chunk::-webkit-scrollbar-thumb {
		background: var(--tt-3, #808097);
		border-radius: 3px;
	}
	.sp-ep-chunk .sp-ep-num {
		flex-shrink: 0;
	}
}