/* --- Раздел обучения: список программ и страница программы ----------------

   Язык оформления взят с самого сайта, чтобы страницы не выглядели чужими:
   тёмная панель на подложке (#201c18), волосяная золотая рамка, крупный
   серифный заголовок, мелкий Manrope в подписях, тёплое свечение из-под
   карточки при наведении — то же, что в блоке «Тарифы» и в карточках
   мини-приложения.

   Файл подключается только страницами обучения (блок styles в base.html):
   на главной он не нужен.                                                   */

/* Manrope для прописных подписей (крошки, метки, номера программ) объявлен
   в site.css, рядом с Source Serif 4: тем же шрифтом подписаны и страницы
   раскладов, а edu.css они не подключают. Одно объявление на весь сайт. */

/* Переменные раздела держим не на .edu-page, а выше: обложка страницы лежит
   снаружи статьи, во всю ширину экрана, и те же цвета нужны и ей. Файл
   подключают только страницы обучения, так что на остальных этих правил нет. */

:root {
  --panel: #201c18;
  --panel-lit: #262019;
  --line: #cfb58935;
  --line-lit: #cfb589a0;
  /* Поля обложки и статьи заданы одним значением: иначе заголовок на обложке
     и текст под ней стоят по разным левым краям, и это сразу видно. */
  --edu-pad: clamp(22px, 5vw, 56px);
  --edu-col: 1180px;
}

.edu-page {
  width: 100%;
  max-width: var(--edu-col);
  margin: 0 auto;
  /* Поля свои, а не общий --pad: на широком экране он вырастает до 300px —
     его задача сводить к центру полосы во всю ширину. Здесь ширина уже
     ограничена, и те же 300px съедали бы её изнутри. */
  padding: 34px var(--edu-pad) 90px;
}

/* --- Обложка: раздела и программы -----------------------------------------
   Главная страница начинается с фотографии, а раздел обучения начинался с
   заголовка на пустом фоне — рядом с главной это выглядело как черновик.
   Полоса во всю ширину, поверх неё — путь наверх, заголовок и метки.

   Фотография подставляется фоном из разметки. Пока файла нет, браузер молча
   ничего не рисует, и остаются подложка, тёплое свечение и золотая дуга —
   страницу можно показывать людям, не дожидаясь съёмки.                     */
.edu-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  min-height: 300px;
  padding: 40px var(--edu-pad) 34px;
  background: var(--ground);
  border-bottom: 1px solid #cfb58926;
}
.edu-cover__in { position: relative; width: 100%; max-width: var(--edu-col); margin: 0 auto; }

.edu-cover__bg {
  position: absolute; inset: 0; z-index: -2;
  /* Кадр смещён вправо и вверх: слева ложится заголовок, а лицо должно
     попадать в полосу целиком, а не срезаться верхней панелью.
     18.09.2026: было 26%, и на широком мониторе этого не хватало — полоса
     выше 560 точек не растёт, а снимок вместе с шириной экрана растягивается,
     и на 3440 срез проходил по бровям. На 12% голова целиком и на 1366,
     и на 1920, и на 3440. */
  background-position: 62% 12%; background-size: cover; background-repeat: no-repeat;
  /* Тот же перевод фотографий в тёплый приглушённый тон, что на главной. */
  filter: saturate(.62) sepia(.18);
}
/* Два затемнения. Первое — слева плотное, справа прозрачное: текст ложится на
   тёмное, а фотография остаётся видна. Второе гасит низ кадра, чтобы обложка
   растворялась в странице, а не обрывалась линией. */
.edu-cover__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #141b15 0%, #141b15e8 32%, #141b15a6 60%, #141b1533 100%),
    linear-gradient(0deg, #141b15 0%, #141b1500 46%);
}
.edu-cover::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -30% 40% 10% -25%;
  background: radial-gradient(58% 58% at 40% 60%, #cfb5891c, transparent 72%);
}
/* Дуга с искрой — тот же приём, что на обложке главной. Чисто оформление,
   поэтому в разметке помечена aria-hidden. */
.edu-cover__orbit {
  position: absolute; z-index: -1; pointer-events: none;
  width: 380px; height: 460px; top: -18%; right: -4%;
  border: 1px solid #ead6ae1e; border-radius: 50%; transform: rotate(24deg);
}
.edu-cover__orbit::before {
  content: ''; position: absolute; inset: 16px -14px;
  border: 1px solid #ead6ae10; border-radius: 50%;
}
.edu-cover__orbit span { position: absolute; right: 52px; top: 26px; font-size: 28px; color: var(--gold-lit); }

/* Внутри обложки отступы другие: заголовок прижат к низу полосы. */
.edu-cover .edu-crumbs { margin-bottom: 16px; }
.edu-cover .edu-head { margin: 0; }

@media (min-width: 900px) {
  /* Полоса выше, чем нужно одному заголовку: на обложке человек, и низкая
     полоса срезала бы его по грудь. */
  .edu-cover { min-height: clamp(420px, 36vw, 560px); padding-top: 72px; padding-bottom: 52px; }
  .edu-cover__orbit { width: 460px; height: 560px; }
}
@media (max-width: 560px) {
  /* На телефоне фотография почти не видна из-под текста, поэтому полосу
     делаем ниже, а кадр смещаем к центру: там главное. */
  .edu-cover { min-height: 300px; padding: 28px var(--edu-pad) 26px; }
  /* На узком экране текст занимает низ полосы, поэтому кадр поднимаем: лицо
     остаётся над заголовком, а не под ним. */
  .edu-cover__bg { background-position: 66% 12%; }
  .edu-cover__orbit { width: 300px; height: 360px; top: -22%; right: -18%; }
}

/* --- Путь наверх ---------------------------------------------------------- */
.edu-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 26px;
  font: 11px/1.4 'Manrope', Arial, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55);
}
.edu-crumbs a { color: var(--ink-55); border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.edu-crumbs a:hover { color: var(--gold-lit); border-color: var(--gold); }
.edu-crumbs span[aria-current] { color: var(--ink-70); }

/* --- Шапка страницы ------------------------------------------------------- */
.edu-head { margin: 0 0 34px; }
.edu-head__num {
  display: block; margin-bottom: 14px;
  font: 10px/1 'Manrope', Arial, sans-serif; letter-spacing: .3em; color: var(--gold-dim);
}
.edu-head h1 {
  margin: 0; font-weight: 300; line-height: 1.08; color: var(--ink);
  font-size: clamp(32px, 6vw, 58px); letter-spacing: -.02em;
}
.edu-head__sub {
  margin: 16px 0 0; max-width: 62ch;
  font: 17px/1.75 'Source Serif 4', Georgia, serif; color: var(--ink-70);
}

/* Метки: длительность, формат, 18+. Заменяют строчку мелкого текста —
   человек считывает условия, не читая. */
.edu-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.edu-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  font: 11px/1.4 'Manrope', Arial, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-70); background: #ffffff05;
}

/* Значок рядом с меткой. Рисуется прямо в разметке (templates/_ikonki.html),
   размер и цвет берёт от текста рядом — значит, не разъедется ни при смене
   кегля, ни на золотой метке. */
.ico {
  flex: none; width: 1.3em; height: 1.3em;
  fill: none; stroke: currentColor; stroke-width: 1.25;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .78;
}
.edu-tag--gold .ico { opacity: 1; }
.edu-tag--gold { border-color: var(--gold); color: var(--gold-lit); }
.edu-tag--age { color: var(--ink-55); }

/* --- Карточки тарифов ----------------------------------------------------- */
.edu-prices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px; margin: 0 0 40px;
}
.pcard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 26px 26px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel);
  transition: border-color .35s, box-shadow .35s;
}
.pcard:hover { border-color: var(--line-lit); box-shadow: 0 14px 36px #0002; }
/* Главный тариф должен выигрывать у второго с одного взгляда: тёплое пятно
   света из верхнего угла, более заметная рамка и золотая нить по верхнему
   краю. Слова при этом те же, что были, — разница только в весе. */
.pcard--main {
  background:
    radial-gradient(520px circle at 18% -15%, #cfb58922, transparent 70%),
    var(--panel-lit);
  border-color: #cfb58978;
  box-shadow: 0 18px 44px #00000038;
}
.pcard--main::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-lit), transparent);
}
.pcard__l {
  font: 10px/1.4 'Manrope', Arial, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-dim);
}
.pcard__v {
  margin: 0; font-size: clamp(30px, 4vw, 40px); line-height: 1;
  color: var(--gold-lit); font-variant-numeric: lining-nums tabular-nums;
}
.pcard__d {
  margin: 0; font: 16px/1.7 'Source Serif 4', Georgia, serif; color: var(--ink-70);
}
/* Кнопка прижата к низу карточки: у тарифов разной высоты они иначе стоят
   уступом, и ряд выглядит кривым. */
.pcard .btn { margin-top: auto; width: 100%; }
/* Кнопок у тарифа две — «Записаться на обучение» и «Купить». К низу их
   прижимает общая обёртка: если оставить margin-top: auto на каждой,
   свободное место распределится между ними и кнопки разъедутся. */
.pcard__btns { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.pcard__btns .btn { margin-top: 0; }

/* --- Врезка «кому подойдёт» ----------------------------------------------- */
.edu-for {
  margin: 0 0 34px; padding: 22px 26px;
  border: 1px solid var(--line); border-left: 2px solid var(--gold);
  border-radius: 12px; background: #ffffff05;
}
.edu-for__l {
  display: block; margin-bottom: 8px;
  font: 10px/1.4 'Manrope', Arial, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-dim);
}
.edu-for p { margin: 0; font: 17px/1.75 'Source Serif 4', Georgia, serif; color: var(--ink); }

/* --- Врезка с портретом автора --------------------------------------------
   Текст «как я учу» написан от первого лица, и рядом должно быть видно, от
   чьего. Форма портрета — арка с золотым контуром: та же, что в блоке «Кто я»
   на главной, чтобы это читалось как один и тот же человек, а не как
   картинка из стока.                                                        */
/* Текст выровнен по центру портрета: он короткий, и при выравнивании по
   верху под ним оставалась пустая половина врезки. */
.edu-for--avtor, .edu-panel--avtor { display: flex; align-items: center; gap: 26px; }
.edu-for__text { flex: 1; min-width: 0; }
.edu-for__foto {
  flex: none; width: 150px; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 22%;
  border-radius: 90px 90px 4px 4px;
  outline: 1px solid #cfb58955; outline-offset: 7px;
  filter: saturate(.78) sepia(.08);
}
/* В панели программы врезка шире, портрет можно дать крупнее. */
.edu-panel--avtor .edu-for__foto { width: 168px; }

@media (max-width: 700px) {
  /* Рядом с текстом портрет на телефоне оставляет колонку в два слова —
     ставим его над текстом, слева, размером «как аватар в переписке». */
  .edu-for--avtor, .edu-panel--avtor { flex-direction: column; align-items: flex-start; gap: 18px; }
  .edu-for__foto, .edu-panel--avtor .edu-for__foto { width: 116px; }
}

/* --- Текст описания ------------------------------------------------------- */
.edu-text { margin: 0 0 40px; max-width: 70ch; }
.edu-text p { margin: 0 0 18px; font: 17px/1.8 'Source Serif 4', Georgia, serif; color: var(--ink-70); }
.edu-text p:last-child { margin-bottom: 0; }

.edu-h2 {
  margin: 0 0 20px; font-weight: 300; line-height: 1.15; color: var(--ink);
  font-size: clamp(24px, 3vw, 34px); letter-spacing: -.01em;
}

/* --- Программа курса ------------------------------------------------------
   Нумерованный список превращён в сетку карточек: тринадцать пунктов подряд
   читаются как договор, а плитками — как программа. Номера проставляет
   счётчик, чтобы Альбина правила пункты, не пересчитывая их руками. */
.edu-prog { margin: 0 0 44px; }
.prog { counter-reset: punkt; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.prog li {
  counter-increment: punkt;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--ink);
  font: 16px/1.6 'Source Serif 4', Georgia, serif;
  transition: border-color .3s, transform .3s;
}
.prog li:hover { border-color: var(--line-lit); transform: translateY(-2px); }
.prog li::before {
  content: counter(punkt, decimal-leading-zero);
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--gold); border-radius: 50%;
  font-size: 11px; letter-spacing: .06em; color: var(--gold-lit);
}

/* --- Панели: как проходят занятия, кто проводит --------------------------- */
.edu-panel {
  margin: 0 0 22px; padding: 26px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel);
}
.edu-panel p { margin: 0 0 12px; font: 16px/1.75 'Source Serif 4', Georgia, serif; color: var(--ink-70); }
.edu-panel p:last-child { margin-bottom: 0; }
.edu-panel a { color: var(--gold-lit); border-bottom: 1px solid #cfb58955; }
/* Обязательная по закону панель остаётся на месте и целиком, но не спорит по
   весу с тем, ради чего человек пришёл: подложки нет, рамка тоньше. */
.edu-panel--law { background: #ffffff04; border-color: #cfb5891f; }
.edu-panel--law p { font-size: 13px; color: var(--ink-55); }
.edu-warn { color: var(--gold-lit) !important; }

/* --- Полоса записи -------------------------------------------------------- */
.edu-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 26px; margin: 0 0 44px; padding: 30px 28px;
  border: 1px solid #cfb58960; border-radius: 12px;
  background: radial-gradient(600px circle at 15% 0, #cfb58914, transparent 70%), var(--panel-lit);
}
.edu-cta__t { margin: 0; font-size: clamp(20px, 2.6vw, 27px); font-weight: 300; line-height: 1.25; color: var(--ink); }
.edu-cta__d { margin: 8px 0 0; font: 16px/1.7 'Source Serif 4', Georgia, serif; color: var(--ink-55); max-width: 46ch; }
.edu-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- Карточки программ (список и «другие программы») ---------------------- */
/* Две колонки, а не «сколько влезет»: программ четыре, и в три колонки
   последняя оставалась одна в ряду — ряд выглядел оборванным. */
.edu-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 16px; margin: 0;
}
/* От 900 px колонки считаются не auto-fit, а точным числом — иначе неполная
   последняя строка (нечётное число программ) вставала бы к левому краю с
   пустой клеткой справа (мерка владельца, MERKA.md, А2: «пустых клеток в
   ряду не бывает»). Карточка становится гибким элементом своей доли ширины
   (в процентах, без роста и сжатия сверх неё), и неполную строку центрирует
   сам flex-контейнер: последняя карточка встаёт посередине, а не слева с
   пустотой справа.

   Порог трёх колонок — 1140px: трём карточкам по минимальной ширине 330px
   и двум зазорам по 16px нужно не меньше 1022px внутри полей страницы;
   поля к этой ширине уже держатся в потолке 56px (--edu-pad), значит порог
   по ширине экрана — около 1134px (1022 + 2×56 px). Взято с небольшим
   запасом, чтобы округление в браузере не роняло карточку ниже 330px. */
@media (min-width: 900px) {
  .edu-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .edu-grid > .kcard { flex: 0 0 calc((100% - 16px) / 2); }
}
@media (min-width: 1140px) {
  .edu-grid > .kcard { flex: 0 0 calc((100% - 32px) / 3); }
}
.kcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--ink);
  transition: border-color .35s, box-shadow .35s, transform .35s;
}
.kcard:hover { border-color: var(--line-lit); box-shadow: 0 16px 40px #0003; transform: translateY(-3px); }

/* Обложка программы. Картинка — не тегом <img>, а фоном под слоем ::before:
   во-первых, отсутствующий файл тогда не рисует значок «битой картинки», а
   уступает место подложке; во-вторых, тёплый фильтр не задевает номер и
   стрелку, которые лежат поверх. */
.kcard__pic { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.kcard__pic::before {
  content: ''; position: absolute; inset: 0;
  /* Три слоя. Сверху — обложка программы. Под ней звезда и тёплая подложка:
     пока файла обложки нет, место не выглядит дырой, а когда файл появится,
     он закроет оба нижних слоя целиком. */
  background-image:
    var(--pic),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4c0 5.3 4.3 9.6 9.6 9.6-5.3 0-9.6 4.3-9.6 9.6 0-5.3-4.3-9.6-9.6-9.6 5.3 0 9.6-4.3 9.6-9.6z' fill='none' stroke='%23cfb589' stroke-opacity='.5' stroke-width='.7'/%3E%3C/svg%3E"),
    radial-gradient(130% 120% at 72% 18%, #2c251c, #171310 72%);
  background-size: cover, 54px, cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  filter: saturate(.62) sepia(.18);
  transition: transform .7s ease;
}
/* Низ обложки гасим в цвет карточки, чтобы картинка переходила в текст, а не
   упиралась в него ровной линией. */
.kcard__pic::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, var(--panel) 1%, #201c1800 52%),
    linear-gradient(90deg, #17131066 0%, transparent 58%);
}
.kcard:hover .kcard__pic::before { transform: scale(1.055); }

.kcard__body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 20px 28px 28px; }
.kcard__n {
  position: absolute; left: 24px; top: 18px; z-index: 1;
  font: 10px/1 'Manrope', Arial, sans-serif; letter-spacing: .3em; color: var(--gold-lit);
  text-shadow: 0 1px 8px #000a;
}
.kcard__go {
  position: absolute; right: 20px; top: 14px; z-index: 1;
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid #ead6ae60; border-radius: 50%; color: var(--gold-lit);
  background: #17131066; backdrop-filter: blur(4px);
  transition: background .4s, color .4s, transform .4s;
}
.kcard:hover .kcard__go { background: var(--gold); color: #201b14; transform: rotate(-45deg); }
.kcard__t { margin: 0; font-weight: 300; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.16; color: var(--ink); }
.kcard__d { margin: 0; font: 16px/1.7 'Source Serif 4', Georgia, serif; color: var(--ink-70); }
.kcard__p { margin: auto 0 0; font-size: 23px; color: var(--gold-lit); font-variant-numeric: lining-nums tabular-nums; }
.kcard__p small { display: block; margin-top: 4px; font: 12px/1.5 'Manrope', Arial, sans-serif; color: var(--ink-55); }
/* Вся карточка — одна ссылка: по ней удобно попасть пальцем, и поисковику
   видно, куда она ведёт. */
/* Ссылка лежит выше номера и стрелки: иначе палец, попавший в стрелку,
   никуда не ведёт — а именно в неё и целятся. */
.kcard__link { position: absolute; inset: 0; z-index: 2; border-radius: 12px; }
.kcard__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
/* Подпись ссылки — только для программ чтения с экрана: глазами
   видно название карточки и стрелку, а голосом ссылка «→» ничего не
   говорит. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

.edu-more { margin-top: 56px; }

/* --- Компьютер ------------------------------------------------------------ */
@media (min-width: 900px) {
  .edu-page { padding-top: 48px; padding-bottom: 120px; }
  .edu-head { margin-bottom: 44px; }
  .edu-prices { margin-bottom: 52px; }
  .edu-text p { font-size: 18px; }
  .prog li { font-size: 17px; padding: 18px 20px; }
  .edu-cta { padding: 38px 36px; }
  /* Карточки на компьютере вдвое шире, чем на телефоне: при тех же 16:9
     обложка занимала бы пол-экрана и цена уходила за сгиб. */
  .kcard__pic { aspect-ratio: 2 / 1; }
}

/* --- Телефон -------------------------------------------------------------- */
@media (max-width: 560px) {
  .edu-page { padding-bottom: 64px; }
  .pcard { padding: 22px 20px; }
  .kcard__body { padding: 18px 22px 24px; }
  .edu-cta { padding: 24px 22px; }
  .edu-cta__btns, .edu-cta__btns .btn { width: 100%; }
}

/* --- Полоса с ценой и записью (только телефон) -----------------------------
   Страница программы длинная: цену человек видит вверху, а решает внизу, где
   кнопки записи рядом уже нет. Полоса выезжает, когда карточки с ценами ушли
   вверх, — этим занимается static/js/edu.js.

   Цифра и надпись берутся из базы и настроек, своих слов здесь нет.          */
.kurs-bar {
  /* Ниже баннера о cookie (у него 60): пока человек не ответил про cookie,
     закрывать этот вопрос кнопкой записи нельзя. Высоту баннера меряет
     site.js и кладёт в --cookie-h на <html> (site.css, раздел «Cookie»);
     нет баннера — переменной нет, и полоса стоит у самого края, как раньше. */
  position: fixed; left: 0; right: 0; bottom: var(--cookie-h, 0px); z-index: 55;
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
  background: #191614f2; border-top: 1px solid #cfb58930;
  backdrop-filter: blur(14px);
  transform: translateY(115%);
  transition: transform .35s ease;
}
.kurs-bar--vidno { transform: none; }
.kurs-bar__p {
  font-size: 21px; line-height: 1; color: var(--gold-lit); white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.kurs-bar .btn { flex: 1; min-height: 48px; padding: 0 14px; gap: 0; justify-content: center; }
/* Чтобы полоса не накрыла последние строки страницы. Только на странице
   программы: в списке программ полосы нет, и пустой подвал там не нужен. */
@media (max-width: 899px) {
  .edu-page--kurs { padding-bottom: 104px; }
}
@media (min-width: 900px) {
  /* На компьютере кнопка записи всегда в шапке — полоса не нужна. */
  .kurs-bar { display: none; }
}

/* Уважение к системной настройке «меньше движения»: убираем сдвиги карточек,
   свечение и поворот стрелки оставляем — они не двигают страницу. */
@media (prefers-reduced-motion: reduce) {
  .prog li:hover, .kcard:hover { transform: none; }
  .kcard:hover .kcard__go { transform: none; }
  .kcard:hover .kcard__pic::before { transform: none; }
  /* Полосу не выезжаем, а просто показываем: движение у нижнего края экрана
     раздражает сильнее всего. */
  .kurs-bar { transition: none; }
}

/* Верхняя панель на телефоне. На главной «Кто я» прячут по селектору
   a[href='#kto-ya'] — у нас ссылки ведут с другой страницы и записаны как
   '/#kto-ya', под тот селектор не попадают, и пункт переносился на вторую
   строку. Прячем те же лишние пункты: на узкой панели остаётся название,
   «Обучение»/«Тарифы» и кнопка записи. */
@media (max-width: 639px) {
  .topbar__nav a[href='/#kto-ya'],
  .topbar__nav a[href='/#otzyvy'] { display: none; }
}

/* --- Вводный рассказ ------------------------------------------------------ */
.edu-text--lead { max-width: 74ch; margin-bottom: 30px; }
.edu-text--lead p:first-child { color: var(--ink); font-size: 16px; }

/* --- Вопросы и ответы -----------------------------------------------------
   Раскрывающиеся строки, а не простыня текста: девять ответов подряд читать
   никто не станет, а вопросы глазами пробегают. Сделано на <details>, без
   единой строки скрипта — открывается даже если скрипты не загрузились. */
.edu-faq { margin: 0 0 44px; }
.faq {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  margin-bottom: 10px; transition: border-color .3s;
}
.faq:hover, .faq[open] { border-color: var(--line-lit); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font: 16px/1.6 'Source Serif 4', Georgia, serif; color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 12px; }
.faq__sign {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid #cfb58950; border-radius: 50%; color: var(--gold);
  font-size: 15px; transition: transform .35s, background .35s, color .35s;
}
.faq[open] .faq__sign { transform: rotate(45deg); background: var(--gold); color: #201b14; }
.faq__a {
  margin: 0; padding: 0 22px 20px;
  font: 16px/1.8 'Source Serif 4', Georgia, serif; color: var(--ink-70);
  max-width: 78ch;
}
@media (min-width: 900px) {
  .faq__q { font-size: 17px; padding: 20px 26px; }
  .faq__a { font-size: 17px; padding: 0 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq[open] .faq__sign { transform: none; }
}

/* === Широкий монитор ========================================================
   Обложка раздела — полоса с фотографией во всю ширину экрана, а не коробка
   посреди пустого поля. Текст внутри остаётся в той же колонке, что и статья
   ниже, поэтому заголовок стоит ровно над ней. Парное правило для главной —
   в site.css.                                                               */
@media (min-width: 1360px) {
  .edu-cover {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc((100vw - var(--edu-col)) / 2);
    padding-right: calc((100vw - var(--edu-col)) / 2);
  }
}

/* ============ ШИРОКИЙ ЭКРАН ================================================

   То же лечение, что на главной, и по той же причине: владелец смотрит сайт
   при масштабе браузера 67 %, и страница верстается как на мониторе 2880.
   Колонка раздела упиралась в 1180 точек — это 41 % такого экрана, а кегль
   оставался тем же, что на 1024.

   Здесь важная разница с главной: ширину колонки нельзя просто задрать.
   Текст статьи ограничен не точками, а знаками (`max-width: 70ch`), и от
   широкой колонки он не вырастет — вырастут только поля вокруг. Поэтому
   колонку поднимаем умеренно, а главное — увеличиваем набор: строка в 70
   знаков 22-м кеглем сама займёт больше места, чем 18-м.                   */

@media (min-width: 1600px) {
  :root { --edu-col: 1320px; }
  /* Полоса обложки росла до 560 точек и упиралась в потолок: на широком
     экране она читалась как узкая лента над статьёй. */
  .edu-cover { min-height: clamp(420px, 30vw, 680px); }
  .edu-crumbs { font-size: 13px; }
  .edu-tag { font-size: 13px; }
  /* Кегль ставим и на сам блок, а не только на абзацы: ширина колонки
     задана в ch — это ширина знака ТЕКУЩЕГО шрифта блока. Поднимешь
     только абзацы — текст станет крупнее, а колонка останется прежней,
     рассчитанной по мелкому кеглю, и строка выйдет короче прежней. */
  .edu-text { font-size: 20px; }
  .edu-text p { font-size: 20px; }
  .edu-text--lead p:first-child { font-size: 18px; }
  .prog li { font-size: 19px; }
  .edu-panel p { font-size: 18px; }
  .edu-panel--law p { font-size: 15px; }
  .kcard__d { font-size: 17px; }
  .kcard__p { font-size: 26px; }
  .edu-cta__d { font-size: 17px; }
  .faq__q { font-size: 18px; }
  .faq__a { font-size: 17px; }
}

@media (min-width: 2200px) {
  :root { --edu-col: 1520px; }
  .edu-cover { min-height: clamp(420px, 28vw, 800px); }
  .edu-head h1 { font-size: clamp(32px, 6vw, 78px); }
  .edu-head__sub { font-size: 20px; }
  .edu-crumbs { font-size: 15px; }
  .edu-tag { font-size: 15px; }
  .edu-text { font-size: 23px; }
  .edu-text p { font-size: 23px; }
  .edu-text--lead p:first-child { font-size: 21px; }
  .prog li { font-size: 21px; padding: 22px 26px; }
  .edu-panel p { font-size: 20px; }
  .edu-panel--law p { font-size: 17px; }
  .kcard__t { font-size: clamp(23px, 2.4vw, 38px); }
  .kcard__d { font-size: 19px; }
  .kcard__p { font-size: 30px; }
  .kcard__p small { font-size: 15px; }
  .edu-cta__t { font-size: clamp(20px, 2.6vw, 34px); }
  .edu-cta__d { font-size: 19px; }
  .faq__q { font-size: 20px; }
  .faq__a { font-size: 19px; }
}