/* ============================================================
   Страница уроков курса (/courses/{slug}/lessons/)
   Слева — дерево уроков (sticky), справа — урок: записи, таймкоды,
   секции md. Мобильный: дерево выпадающим списком сверху (sticky).
   Дизайн-система: docs/DESIGN_SYSTEM.md (§5, §6, §9.12, §9.17).
   ============================================================ */

.course-lessons__header {
	margin-bottom: 0;
}

/* Цели скролла не должны уезжать под sticky-шапку (§9.1) и мобильный
   sticky-дропдаун: scroll-margin-top задаёт отступ при scrollIntoView
   и при переходе по якорю. */
.course-lessons {
	--lessons-scroll-offset: calc(var(--site-header-height) + var(--spacing-m));
}

body.admin-bar .course-lessons {
	--lessons-scroll-offset: calc(var(--site-header-height) + var(--spacing-m) + 32px);
}

.lesson-section,
.lesson-section__body h2,
.lesson-section__body h3,
.lesson-section__body h4,
.lesson-section__body h5,
.lesson-section__body h6,
.lesson-media,
.course-lessons__view,
.lesson-view {
	scroll-margin-top: var(--lessons-scroll-offset);
}

/* --- Раскладка: дерево + урок --- */
.course-lessons__layout {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: var(--spacing-xxl);
	align-items: start;
	margin-top: var(--spacing-xxl);
}

.course-lessons__sidebar {
	position: sticky;
	top: calc(var(--site-header-height) + var(--spacing-m));
	max-height: calc(100vh - var(--site-header-height) - var(--spacing-m) - var(--spacing-l));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-right: 1px solid var(--color-border);
	padding-right: var(--spacing-xl);
}

body.admin-bar .course-lessons__sidebar {
	top: calc(var(--site-header-height) + var(--spacing-m) + 32px);
	max-height: calc(100vh - var(--site-header-height) - var(--spacing-m) - var(--spacing-l) - 32px);
}

.course-lessons__view {
	min-height: 320px;
	transition: opacity 0.15s ease;
}

.course-lessons__view.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* --- Дерево уроков --- */
.lessons-tree {
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: 100%;
}

.lessons-tree__heading {
	flex: 0 0 auto;
	margin: 0 0 var(--spacing-m);
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-foreground-muted);
}

/* Своя прокрутка у списка: длинное дерево не тянет за собой страницу
   (§9.1). Заголовок «Содержание» остаётся на месте. Скроллбар скрыт:
   прокрутка колесом/трекпадом работает, полоса не мешает вёрстке.
   Нижний padding — запас, чтобы последний пункт можно было увести выше
   всплывающих панелек браузера внизу экрана. */
.lessons-tree__list {
	margin: 0;
	padding: 0 0 72px;
	list-style: none;
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0;
	overscroll-behavior: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.lessons-tree__list::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.lessons-tree__item {
	border-left: 2px solid transparent;
	border-bottom: 1px solid var(--color-border-light);
	padding-left: 12px;
}

.lessons-tree__item.is-active {
	border-left-color: var(--color-primary);
}

.lessons-tree__link {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 12px 0;
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 300;
	line-height: 1.25;
	color: var(--color-foreground);
	text-decoration: none;
	transition: color 0.2s ease;
}

.lessons-tree__link:hover,
.lessons-tree__link:focus {
	color: var(--color-primary);
}

.lessons-tree__item.is-active > .lessons-tree__link {
	font-weight: 400;
	color: var(--color-primary);
}

.lessons-tree__num {
	flex-shrink: 0;
	font-family: var(--font-body);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--color-foreground-muted);
}

.lessons-tree__title {
	flex: 1;
}

.lessons-tree__trial {
	flex-shrink: 0;
	font-size: 13px;
	color: var(--color-primary);
}

/* --- Подпункты активного урока (секции md) --- */
.lessons-tree__sublist {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.lessons-tree__subitem {
	margin: 0;
}

.lessons-tree__sublink {
	display: block;
	padding: 6px 0 6px 10px;
	border-left: 1px solid var(--color-border);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--color-foreground-muted);
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.lessons-tree__sublink:hover,
.lessons-tree__sublink:focus-visible {
	color: var(--color-primary);
	border-left-color: var(--color-primary);
}

/* Текущий раздел урока — тот, что сейчас на экране. Тот же приём, что у
   наведения (цвет + черта), но держится постоянно: у вложенных пунктов
   черты нет, там работает только цвет (см. `.lessons-tree__sublink--nested`). */
.lessons-tree__sublink.is-current {
	color: var(--color-primary);
	border-left-color: var(--color-primary);
}

.lessons-tree__sublink--nested.is-current {
	border-left-color: transparent;
}

/* --- Цитата книги — ссылка к списку литературы ---
   («[Фрэзер, Золотая ветвь, 1980 / 1890]»: сама надпись кликабельна, вид не
   меняется — ссылку подставляет PHP, в md тег не попадает: помечена
   data-sc-strip-tag). --- */
.lesson-section__body .lesson-cite__link {
	color: inherit;
	text-decoration: none;
}

.lesson-section__body .lesson-cite__link:hover,
.lesson-section__body .lesson-cite__link:focus {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Значок книжки — справа от цитаты-ссылки (маска, цвет — как у ссылки). */
.lesson-section__body .lesson-cite__link::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 6px;
	vertical-align: -2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Значки подпунктов: камера у записи, книжка у списка литературы ---
   Иконки рисуются маской: цвет берётся у ссылки (currentColor), поэтому
   значок темнеет вместе с текстом при наведении. --- */
.lessons-tree__sublink--recording::before,
.lessons-tree__sublink--bibliography::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 6px;
	vertical-align: -2px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.lessons-tree__sublink--recording::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E");
}

.lessons-tree__sublink--bibliography::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}

/* --- Подзаголовки ## / ### внутри секции --- */
.lessons-tree__sublabel {
	display: block;
	padding: 6px 0 6px 10px;
	border-left: 1px solid var(--color-border);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--color-foreground-muted);
}

.lessons-tree__sublist--nested {
	margin: 0 0 6px;
}

.lessons-tree__sublink--nested {
	padding-left: 22px;
	border-left-color: transparent;
	font-size: 13px;
}

.lessons-tree__sublink--nested[data-level="3"] {
	padding-left: 32px;
}

.lessons-tree__sublink--nested:hover,
.lessons-tree__sublink--nested:focus-visible {
	border-left-color: transparent;
}

/* --- Урок --- */
.lesson-view__header {
	margin-bottom: var(--spacing-xl);
}

.lesson-view__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--spacing-s);
	margin: 0 0 var(--spacing-s);
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-foreground-muted);
}

.lesson-view__badge {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--color-border);
	background-color: var(--color-background-muted);
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-foreground-muted);
}

.lesson-view__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(32px, 4vw, 45px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-foreground);
}

/* --- Записи --- */
.lesson-media {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-l);
	margin-bottom: var(--spacing-xl);
}

.lesson-media__title {
	margin: 0 0 var(--spacing-s);
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 300;
	color: var(--color-foreground-muted);
}

.lesson-media__player {
	display: block;
	width: 100%;
}

.lesson-media__embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--color-border);
	background-color: var(--color-background-muted);
}

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

/* Авто-эмбед видео: одиночная ссылка на YouTube/Vimeo/… в теле секции. */
.lesson-section__body .lesson-video {
	position: relative;
	width: 100%;
	margin: var(--spacing-l) 0;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--color-border);
	background-color: var(--color-background-muted);
}

.lesson-section__body .lesson-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.lesson-media__locked {
	display: flex;
	align-items: center;
	gap: var(--spacing-m);
	padding: var(--spacing-l);
	border: 1px solid var(--color-border);
	background-color: var(--color-background-muted);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	color: var(--color-foreground-muted);
}

.lesson-media__locked-play {
	display: inline-flex;
	color: var(--color-accent);
}

/* --- Таймкоды --- */
.lesson-timecodes {
	margin: 0 0 var(--spacing-xxl);
}

.lesson-timecodes__title {
	margin: 0 0 var(--spacing-s);
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 300;
	color: var(--color-foreground-muted);
}

.lesson-timecodes .timecodes {
	max-width: 720px;
}

/* --- Секции md --- */
.lesson-sections {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xxl);
}

.lesson-section__title {
	display: flex;
	align-items: baseline;
	gap: 0 var(--spacing-m);
	margin: 0 0 var(--spacing-m);
	padding-bottom: var(--spacing-s);
	border-bottom: 2px solid var(--color-foreground);
	font-family: var(--font-heading);
	font-size: clamp(30px, 3.75vw, 42px);
	font-weight: 400;
	line-height: 1.25;
	color: var(--color-foreground);
}

/* Таймкод в заголовке секции: ссылка к этому месту записи, прижата к правому
   краю заголовка. Кнопку ставит скрипт (course-lessons.js). */
.lesson-section__time {
	margin: 0;
	margin-left: auto;
	padding: 0;
	font-family: var(--font-heading);
	font-size: 0.5em;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	line-height: inherit;
	white-space: nowrap;
	color: var(--color-foreground-muted);
	background: none;
	border: 0;
	cursor: pointer;
	transition: color 0.15s ease;
}

.lesson-section__time:hover {
	color: var(--color-primary);
}

.lesson-section__time:focus-visible {
	color: var(--color-primary);
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}


/* --- Заглушка закрытого урока --- */
.lesson-gate {
	max-width: 672px;
}

.lesson-gate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-m);
	margin-top: var(--spacing-m);
}

.lesson-gate__actions .btn-ghost {
	display: inline-flex;
	align-items: center;
	padding: 12px 32px;
	font-family: var(--font-heading);
	font-size: 25px;
	font-weight: 300;
}

/* --- Навигация по урокам: предыдущий/следующий (§9.12 secondary) --- */
.lesson-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--spacing-m);
	margin-top: var(--spacing-xxl);
	padding-top: var(--spacing-l);
	border-top: 1px solid var(--color-border);
}

.lesson-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	min-height: 48px;
	padding: var(--spacing-s) var(--spacing-m);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-none);
	background-color: transparent;
	color: var(--color-foreground);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lesson-nav__link:hover,
.lesson-nav__link:focus {
	border-color: var(--color-primary);
	background-color: var(--color-background-muted);
}

.lesson-nav__link--prev {
	grid-column: 1;
}

.lesson-nav__link--next {
	grid-column: 2;
	text-align: right;
}

.lesson-nav__label {
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-foreground-muted);
}

.lesson-nav__title {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--color-foreground);
}

/* --- Мобильный выпадающий список --- */
.course-lessons__mobile {
	display: none;
}

@media (max-width: 1299px) {
	.course-lessons__layout {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--spacing-xl);
	}
}

@media (max-width: 959px) {
	/* Высоту полосы меряет скрипт (`sizeMobileBar()` в course-lessons.js):
	   строк в ней одна или две (урок и разделы урока), поэтому отступ прокрутки
	   берётся из факта, а не из числа в стилях. Запасное значение — полоса
	   с одним списком. */
	.course-lessons {
		--lessons-scroll-offset: calc(var(--site-header-height) + var(--lessons-bar-height, 109px) + var(--spacing-s));
	}

	body.admin-bar .course-lessons {
		--lessons-scroll-offset: calc(var(--site-header-height) + var(--lessons-bar-height, 109px) + var(--spacing-s) + 32px);
	}

	.course-lessons__mobile {
		display: block;
		position: sticky;
		top: var(--site-header-height);
		z-index: 50;
		margin-bottom: var(--spacing-l);
		padding: var(--spacing-m) 0;
		background-color: var(--color-background);
		border-bottom: 1px solid var(--color-border);
	}

	/* Список разделов активного урока — вторая строка той же закреплённой полосы. */
	.course-lessons__mobile-field + .course-lessons__mobile-field {
		margin-top: var(--spacing-s);
	}

	body.admin-bar .course-lessons__mobile {
		top: calc(var(--site-header-height) + 32px);
	}

	.course-lessons__mobile-label {
		display: block;
		margin-bottom: var(--spacing-xs);
		font-family: var(--font-heading);
		font-size: 14px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--color-foreground-muted);
	}

	.course-lessons__select {
		width: 100%;
		height: 48px;
		padding: 0 40px 0 16px;
		appearance: none;
		border: 1px solid var(--color-border);
		border-radius: 0;
		background-color: var(--color-background);
		background-image: var(--icon-chevron-down);
		background-repeat: no-repeat;
		background-position: right 16px center;
		font-family: var(--font-body);
		font-size: 16px;
		font-weight: 300;
		color: var(--color-foreground);
	}

	.course-lessons__layout {
		display: block;
		margin-top: 0;
	}

	.course-lessons__sidebar {
		display: none;
	}

	.lesson-view__title {
		font-size: 32px;
	}

	.lesson-sections {
		gap: var(--spacing-xl);
	}

	.lesson-nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.lesson-nav__link--prev,
	.lesson-nav__link--next {
		grid-column: 1;
		text-align: left;
	}
}

/* Чёрная панель WordPress: до 782px она ниже (46px вместо 32px), а на телефоне
   (≤600px) ядро переводит её в position: absolute — панель уезжает вверх вместе
   с прокруткой. Смещение «на высоту панели» тогда оставляет дырку над полосой:
   полоса висит ниже, а сквозь пустое место видно уезжающий текст урока
   (см. .operator/specs/mobile-layout.md, раздел про закреплённые полосы). */
@media (max-width: 782px) {
	body.admin-bar .course-lessons {
		--lessons-scroll-offset: calc(var(--site-header-height) + var(--lessons-bar-height, 109px) + var(--spacing-s) + 46px);
	}

	body.admin-bar .course-lessons__mobile {
		top: calc(var(--site-header-height) + 46px);
	}
}

@media (max-width: 600px) {
	body.admin-bar .course-lessons {
		--lessons-scroll-offset: calc(var(--site-header-height) + var(--lessons-bar-height, 109px) + var(--spacing-s));
	}

	body.admin-bar .course-lessons__mobile {
		top: var(--site-header-height);
	}
}