/* ============================================================
   Публичные страницы курсов: витрина карточек (главная и /courses/),
   страница курса с оглавлением, страница лекции с боковой панелью.

   Токены цвета (--color-it и т.п.), .card, .badge, .tag, шапка и подвал —
   из modules/journal/journal.css, он подключается раньше. Цветовой акцент
   даёт data-theme="{категория курса}" на самом элементе.
   ============================================================ */

/* ===== Витрина курсов ===== */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.course-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.25rem 1.5rem;
    border-left-width: 6px;
    color: inherit;
}
.course-card:hover { transform: translateY(-4px); color: inherit; }

/* Обложка карточки — та же пропорция 16:9, что и на странице курса:
   присланная горизонтальная картинка показывается целиком, а не режется
   до фиксированной высоты (было 150px — от 16:9 оставалось три четверти).
   Высота при этом всё равно одинаковая у всех карточек ряда: ширина
   колонки у них общая. */
.course-card__cover {
    display: block;
    margin: -1.25rem -1.25rem .9rem;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.course-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Курс без обложки: тематический полутон вместо картинки. Пусто оставлять
   нельзя — карточка потеряет 16:9 сверху, и весь ряд поедет по высоте. */
.course-card__cover--empty { background: var(--accent-soft, var(--color-border)); }

.course-card__cat {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent, var(--color-muted));
}

.course-card__title { font-size: 1.1rem; font-weight: 600; margin: .35rem 0 .2rem; }
.course-card__subtitle { font-size: .85rem; color: var(--color-muted); margin-bottom: .4rem; }
.course-card__snippet { font-size: .9rem; color: var(--color-body); flex: 1; margin-bottom: .75rem; }
.course-card__meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: .7rem;
    color: var(--color-muted);
    margin-bottom: .6rem;
}
.course-card__status { color: var(--accent, var(--color-muted)); }

/* ===== Состояния курса на витрине =====
   У курса три состояния, и на витрине они различаются приглушённостью, а
   не отдельным оформлением: карточка остаётся той же, просто теряет цвет.

   Приём один — подменить --accent, от которого уже зависят и полоса слева
   (.card), и рубрика, и бейдж, и ссылка при наведении. Поэтому весь цвет
   карточки гаснет одной строкой, без перечисления элементов.

   «В процессе» — тот же серый, что у черновика, но светлее: курс живой и
   открыт для чтения, гасить его так же сильно, как незаконченный черновик,
   было бы неправдой. Значение — осветлённый --color-muted (#94a3b8);
   держим числом, а не color-mix(), чтобы не зависеть от поддержки.

   Тонкость: --accent объявлен и в [data-theme="..."] (journal.css), и эти
   селекторы одинаковой специфичности стоят на ОДНОМ элементе карточки.
   Побеждает тот, что идёт позже, — то есть этот файл, потому что
   courses.css всегда подключается после journal.css (см. j_page_head и
   index.php). Поменяете порядок подключения — состояния перестанут гасить
   цвет, и выглядеть это будет как «стиль просто не применился». */
.course-card--in_progress { --accent: #c2ccd8; }
.course-card--draft { --accent: var(--color-muted); opacity: .65; }

.course-card .link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 500;
    font-size: .9rem;
    border-bottom: 1px dotted var(--color-border);
}
.course-card .link::after { content: '→'; transition: transform .2s; }
.course-card:hover .link { color: var(--accent, var(--color-it)); border-bottom-color: var(--accent, var(--color-it)); }
.course-card:hover .link::after { transform: translateX(4px); }

/* ===== Страница курса ===== */
.course { padding: 1.5rem; margin-top: 1rem; border-left-width: 6px; }

/* ===== Шапка курса =====
   Две колонки: текст и обложка. Пропорция колонок подобрана под обложку
   16:9 — в такой ширине она даёт высоту примерно той же, что и текстовый
   блок (рубрика + заголовок + подзаголовок + мета + кнопка), поэтому блок
   читается как прямоугольник, а не как картинка, висящая сбоку.

   Две вещи держат сетку сеткой:
   - обложка не растягивается по высоте строки (align-self: start) —
     пропорции кадра важнее выравнивания;
   - низ текстовой колонки прижат к низу строки (margin-top: auto у
     .course__foot), поэтому кнопка и мета встают вровень с нижним краем
     обложки независимо от того, сколько строк занял заголовок. */
.course__head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr);
    gap: 1.75rem;
}
.course__head--nocover { grid-template-columns: minmax(0, 1fr); }

.course__cover {
    align-self: start;
    margin: 0;
    /* Обложки заказываются горизонтальными (≈16:9) — под них и рамка.
       object-fit: cover ниже страхует от присланной «не в пропорции»:
       кадр обрежется по центру, но сетка не поедет. */
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg);
}
.course__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.course__headtext { display: flex; flex-direction: column; min-width: 0; }

/* Рубрика и статус — одной строкой над заголовком, как на карточке.
   Раньше «курс в работе» стоял отдельной плашкой между метой и кнопкой и
   разрывал колонку пополам. */
.course__labels { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.course__cat {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent, var(--color-muted));
}
.course__status { color: var(--accent, var(--color-muted)); }

.course__title { font-size: 1.9rem; font-weight: 700; margin: .4rem 0 .3rem; line-height: 1.15; }
.course__subtitle { color: var(--color-body); }
.course__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }

.course__foot { margin-top: auto; padding-top: 1.25rem; }
.course__meta { font-family: 'JetBrains Mono', monospace; font-size: .75rem; color: var(--color-muted); }
.course__progress { margin-top: .3rem; font-size: .85rem; color: var(--color-body); }

.course__start {
    display: inline-block;
    margin-top: 1.1rem;
    padding: .55rem 1.2rem;
    border-radius: 6px;
    background: var(--accent, var(--color-it));
    color: #fff;
    font-weight: 500;
    font-size: .95rem;
}
.course__start::after { content: ' →'; }
.course__start:hover { color: #fff; opacity: .9; }

.course__intro { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--color-border); }

/* ===== Оглавление ===== */
.toc-list { list-style: none; margin: 0; padding: 0; }

.toc-item { border-bottom: 1px solid var(--color-border); }
.toc-item:last-child { border-bottom: none; }

.toc-item__link {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .7rem .5rem;
    border-radius: 6px;
}
/* Подсветка — тематическим полутоном, а не белым: список теперь лежит на
   белой карточке, и белый фон при наведении был бы невидим. */
.toc-item__link:hover { background: var(--accent-soft, #eef2ff); color: var(--accent, var(--color-it)); }

.toc-item__num {
    flex: 0 0 1.8rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .8rem;
    color: var(--accent, var(--color-muted));
    text-align: right;
}
.toc-item__text { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.toc-item__title { font-weight: 500; }
.toc-item__snippet { font-size: .85rem; color: var(--color-muted); }
.toc-item__lock { font-size: .8rem; opacity: .6; }

/* Оглавление на странице курса — такая же карточка с акцентной полосой,
   что и шапка выше: это второй смысловой блок страницы, а не хвост под
   аннотацией. Боковое оглавление лекции (.toc-list--side) живёт в своей
   карточке и сюда не попадает. */
.course-toc__list { padding: .5rem .75rem; border-left-width: 6px; }
.course-toc__empty { color: var(--color-muted); margin: .5rem; }

/* ===== Страница лекции ===== */
.lecture-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1.5rem;
    align-items: start;
    margin-top: 1rem;
}

.lecture { padding: 1.75rem 2rem 1.5rem; border-left-width: 6px; }

.lecture__num {
    font-family: 'JetBrains Mono', monospace;
    font-size: .75rem;
    color: var(--accent, var(--color-muted));
}
.lecture__title { font-size: 1.6rem; font-weight: 700; line-height: 1.25; margin: .25rem 0 .4rem; }
.lecture__snippet { color: var(--color-body); margin-bottom: .5rem; }
.lecture__tags { display: flex; flex-wrap: wrap; gap: .35rem; }

.lecture__body { margin-top: 1.5rem; }
/* Якорь заголовка не должен уезжать под верхний край окна при переходе
   по ссылке из подоглавления */
.lecture__body h2, .lecture__body h3 { scroll-margin-top: 1.5rem; }

.lecture-locked {
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    color: var(--color-body);
}
.lecture-locked p { margin: .5rem 0 0; font-size: .9rem; color: var(--color-muted); }

/* ===== Переходы между лекциями ===== */
/* Три колонки, а не flex + justify-content:space-between: на первой/
   последней лекции вместо ссылки-соседа рендерится пустой .lecture-nav__stub
   (см. crs_render_lecture_nav), и при flex он был единственным, кто рос
   (flex:1) — "Оглавление" от space-between съезжало к противоположному
   краю, а не оставалось в центре. Grid с двумя одинаковыми 1fr-колонками по
   бокам центрирует среднюю ссылку независимо от того, что в соседних. */
.lecture-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--color-border);
}
.lecture-nav a { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.lecture-nav__next { text-align: right; }
.lecture-nav__dir { font-size: .75rem; color: var(--color-muted); }
.lecture-nav__title { font-size: .9rem; font-weight: 500; }
.lecture-nav a:hover .lecture-nav__title { color: var(--accent, var(--color-it)); }
.lecture-nav__up { font-size: .85rem; color: var(--color-muted); }

/* ===== Боковое оглавление ===== */
.lecture-side__inner {
    position: sticky;
    top: 1rem;
    padding: 1rem .85rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.lecture-side__course {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    padding: 0 .5rem .6rem;
    margin-bottom: .3rem;
    border-bottom: 1px solid var(--color-border);
}
.lecture-side__course:hover { color: var(--accent, var(--color-it)); }

.toc-list--side .toc-item { border-bottom: none; }
.toc-list--side .toc-item__link { padding: .35rem .5rem; font-size: .85rem; }
.toc-list--side .toc-item__num { flex-basis: 1.4rem; font-size: .7rem; }
.toc-list--side .toc-item.is-active > .toc-item__link {
    background: var(--accent-soft, #eef2ff);
    color: var(--accent, var(--color-it));
    font-weight: 600;
}

.toc-sub { list-style: none; margin: .1rem 0 .4rem; padding: 0 0 0 1.9rem; }
.toc-sub__item a {
    display: block;
    padding: .2rem 0;
    font-size: .8rem;
    color: var(--color-body);
    border-left: 2px solid var(--color-border);
    padding-left: .6rem;
}
.toc-sub__item--h3 a { padding-left: 1.4rem; font-size: .78rem; color: var(--color-muted); }
.toc-sub__item a:hover { color: var(--accent, var(--color-it)); border-left-color: var(--accent, var(--color-it)); }

/* ===== Адаптив ===== */
@media (max-width: 992px) {
    .courses-grid { grid-template-columns: repeat(2, 1fr); }

    /* Боковая панель уезжает под текст: на узком экране читают саму лекцию,
       а оглавление нужно уже после неё — переходы к соседним лекциям при
       этом остаются прямо под текстом (.lecture-nav). */
    .lecture-layout { grid-template-columns: 1fr; }
    .lecture-side__inner { position: static; max-height: none; }
}

@media (max-width: 768px) {
    .courses-grid { grid-template-columns: 1fr; }

    /* Одна колонка, обложка наверх: в разметке она идёт после текста
       (так правильнее читается без стилей), а на узком экране должна
       открывать страницу, как на карточке. */
    .course__head { grid-template-columns: 1fr; gap: 1.25rem; }
    .course__cover { order: -1; }
    .course__title { font-size: 1.6rem; }
    .course__foot { padding-top: 1rem; }

    .lecture { padding: 1.25rem; }
    /* Три узкие колонки на телефоне сжали бы длинный заголовок соседней
       лекции до нечитаемого — складываем в один центрированный столбец. */
    .lecture-nav { grid-template-columns: 1fr; justify-items: center; gap: .75rem; }
    .lecture-nav a { align-items: center; }
    .lecture-nav__next { text-align: center; }
}