/* =====================================================================
   _course.css: общий набор блоков страницы курса (Borodach Online School)
   Сборка копирует файл в /_landing/course.css. Подключать ПОСЛЕ site.css:
   <link rel="stylesheet" href="/_landing/site.css">
   <link rel="stylesheet" href="/_landing/course.css">
   Новых цветов нет: только токены из site.css (--paper, --ink, --ink-2, --line, --pen, --r ...).
   Классы с префиксом c- живут здесь, остальное (.btn, .link, .lead, .sec-head, .spec, .plans,
   .plan, .toggle, .faq, .teachers/.t, .facts, .final, .choices, .cta-row, .rail) из site.css.
   Правило страницы: порядок секций свой, но hero первым, финальный CTA последним, правка ручкой
   (.fix) РОВНО два раза: в hero и в финале. Карточки только у тарифов, остальное лежит на клетке.

   КАТАЛОГ БЛОКОВ

   1. HERO КУРСА  .c-hero
      Когда: всегда, первая секция. Название курса, строка с правкой ручкой, лид, факты, CTA, обложка.
      <section class="c-hero"><div class="wrap c-hero-grid"><div>
        <p class="c-crumb"><a href="/#formats">&larr; Все форматы</a></p>
        <h1 aria-label="Название, строка правки">
          <span class="c-name">Название</span>
          <span class="c-fixline">где ты <span class="fix" aria-hidden="true"><span class="fix-old">стесняешься</span><span class="fix-new">говоришь</span></span></span>
        </h1>
        <p class="lead">Лид, 1-2 абзаца (второй идёт как .lead+.lead).</p>
        <dl class="spec c-spec"><div><dt>Уровень</dt><dd>B1-B2</dd></div> ... 2-4 пары</dl>
        <div class="cta-row"><a class="btn" href="...">Главное действие</a><p class="cta-note"><a class="link" href="...">запасное</a></p></div>
      </div>
      <figure class="c-cover"><div class="c-cover-frame" style="--ar:1"><img src="/_landing/img/..." alt="" width="" height="" fetchpriority="high"></div></figure>
      </div></section>
      Слово для правки: зачёркнутое старое и розовая замена, смысл «было плохо - стало хорошо».
      --ar у обложки: 1 (квадрат, по умолчанию 4/3), для плоских 16/9 обложек с текстом ставь 16/9.

   2. ДВЕ КОЛОНКИ  .c-split
      Когда: секция «заголовок слева, содержание справа» (для кого, расписание, что получишь, урок).
      <section><div class="wrap c-split"><div class="sec-head"><h2>..</h2><p class="lead">..</p></div><div>ПРАВАЯ КОЛОНКА</div></div></section>
      На телефоне колонки друг под другом. Тесная секция: <section class="c-tight">.

   3. ГЛАВНАЯ МЫСЛЬ  .c-big
      Когда: одна ключевая фраза вместо абзаца (кому подходит курс). <p class="c-big">..</p>

   4. ТЕКСТ  .c-prose
      Когда: 1-3 обычных абзаца. <div class="c-prose"><p>..</p><p class="muted">..</p></div>

   5. ГАЛОЧКИ РУЧКОЙ  .c-checks (.lg крупнее)
      Когда: короткий список «что входит / что ждёт», пункт в одну-две строки.
      <ul class="c-checks lg"><li>..</li></ul>

   6. ПОЛЬЗА С ПОДПИСЬЮ  .c-feat (.c2 в две колонки)
      Когда: «что получишь», «преимущества»: заголовок + пояснение, маркер-галочка ручкой.
      <ul class="c-feat"><li><div><h3>..</h3><p>..</p></div></li></ul>

   7. СПИСОК ТЕМ  .c-toc (.c2 в две колонки)
      Когда: темы, юниты, уроки с короткими описаниями. Нумерация 01, 02 как в тетради, цифры розовые.
      <ol class="c-toc c2"><li><div><h3>Религия</h3><p>..</p></div></li></ol>

   8. ЧАСТИ УРОКА С МАТЕРИАЛАМИ  .c-parts > .c-part
      Когда: состав урока из нескольких частей, у каждой текст и галерея образцов.
      <ol class="c-parts"><li class="c-part">
        <div class="c-part-head"><h3>Pre-class task</h3></div>   (номер в кружке рисуется сам)
        <div class="c-part-text"><p>..</p><p>..</p></div>
        <ul class="c-gallery" style="--n:5">...см. п. 9...</ul>
      </li></ol>

   9. ГАЛЕРЕЯ МАТЕРИАЛОВ  .c-gallery > li > a.c-shot
      Когда: превью материалов с подписью (по клику крупно). На телефоне свайп-лента, от 1024px сетка
      из --n колонок (по умолчанию 5). .wide: превью 16/9 вместо вертикальных листов, --n по умолчанию 3.
      <ul class="c-gallery" style="--n:5"><li><a class="c-shot" href="КРУПНО" target="_blank" rel="noopener">
        <img src="ПРЕВЬЮ" alt="" width="" height="" loading="lazy"><span>Подпись</span></a></li></ul>

  10. ВИДЕО  .c-video (.c-videos: сетка из двух)
      Когда: видео на VK/YouTube. Карточка-ссылка с постером (обложка курса или кадр из материалов),
      кнопка play цвета --pen, подпись «Смотреть во ВКонтакте» (или «на VK Видео», «на YouTube»).
      <a class="c-video" href="..." rel="noopener"><span class="c-video-poster"><img src="" alt="" width="" height="" loading="lazy">
        <svg class="c-play" viewBox="0 0 72 72" aria-hidden="true"><circle cx="36" cy="36" r="36"/><path d="M29 22v28l23-14z"/></svg></span>
        <span class="c-video-cap"><b>Пример урока</b><span>Смотреть во ВКонтакте</span></span></a>

  11. ПРЕПОДАВАТЕЛИ
      Когда 4-8 человек: ровно разметка главной (.teachers > .t, .t-photo с play) из site.css.
      Когда 1-3 человека, крупно, с описанием:
      <div class="c-people"><article class="c-person"><img src="" alt="" width="" height="" loading="lazy"><h3>Имя</h3><p>Роль и описание</p></article></div>

  12. БЛОКИ-КОЛОНКИ (модули, юниты, уровни)  .c-units (> .c-unit с h3, .lab, ul)
      Когда: 2-8 однотипных блоков с подпунктами: 2 колонки на планшете, 4 на десктопе.
      <div class="c-units"><div class="c-unit"><h3>Unit 1</h3><p class="lab">Метка</p><ul><li>..</li></ul></div></div>

  13. ТАРИФЫ  .plans + .plan из site.css (+ .toggle для срока); .plans.c-two на два тарифа
      Когда: всегда, если у курса есть цена. Структура карточки как на главной:
      .plan-name, .plan-price, .plan-per, ul с галочками, .btn внизу; .plan.hot главный тариф (один).
      Переключатель: <div class="toggle" role="group" aria-label=".."><button type="button" aria-pressed="true" data-show="id1">..</button>
      <button type="button" aria-pressed="false" data-show="id2">..</button></div>, затем .plans#id1 и .plans#id2[hidden].
      Скрипт переключателя инлайн в конце страницы (образец в speakingclub.html).
      Заметка под тарифами: <p class="c-note">..</p>. Строка-предложение (бесплатная проверка): .solo из site.css.

  14. FAQ  .faq из site.css, разметка как на главной (details > summary + .ans). Когда: есть правила или вопросы.

  15. ФИНАЛЬНЫЙ CTA  section.final.c-final (вторая и последняя правка ручкой)
      <section class="final c-final" id="start"><div class="wrap">
        <h2 aria-label="..">Фраза <span class="fix" aria-hidden="true"><span class="fix-old">старое</span><span class="fix-new">новое</span></span> слово</h2>
        <p class="lead">..</p>
        <div class="choices two"><a class="choice main" href=""><b>Главное</b><span>пояснение</span></a><a class="choice" href=""><b>Запасное</b><span>..</span></a></div>
      </div></section>
      .choices без two: три варианта, как на главной.
   ===================================================================== */

/* page rhythm */
.c-tight{padding:48px 0}
@media (min-width:1024px){.c-tight{padding:72px 0}}
.c-hero~section h2,.c-split h2{max-width:22ch;text-wrap:balance}

/* 1. hero */
.c-hero{padding:32px 0 72px}
.c-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center}
.c-hero-grid>*,.c-split>*{min-width:0}
@media (min-width:1024px){.c-hero{padding:56px 0 96px}.c-hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px}}
.c-crumb{font-size:var(--fs-s);color:var(--ink-2);margin-bottom:24px}
.c-crumb a{font-weight:600;color:var(--ink)}
.c-hero h1{font-size:clamp(36px,8vw,80px);line-height:1.05;max-width:none;overflow-wrap:break-word}
.c-name{display:block}
.c-fixline{display:block;margin-top:12px;font-size:.6em;font-weight:700;line-height:1.2}
.c-hero .lead{margin-top:24px}
.c-hero .lead+.lead{margin-top:16px}
.c-spec{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));margin-top:32px;max-width:640px}
.c-hero .cta-row{margin-top:32px}
.c-cover{position:relative;margin:0 auto;max-width:440px;width:100%}
.c-cover-frame{border-radius:var(--r);overflow:hidden;background:var(--paper-2);aspect-ratio:var(--ar,4/3);box-shadow:12px 12px 0 var(--ink)}
.c-cover-frame img{width:100%;height:100%;object-fit:cover}
.c-cover figcaption{margin-top:24px;font:700 26px/1.1 Caveat,cursive;color:var(--ink);transform:rotate(-2deg);padding-left:8px}

/* 2. two columns */
.c-split{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.c-split>.sec-head{margin:0;align-content:start}
@media (min-width:1024px){.c-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}}

/* 3, 4. text */
.c-big{font:700 var(--fs-xl)/1.25 Jost,"Golos Text",sans-serif;text-wrap:balance;max-width:34ch}
@media (min-width:768px){.c-big{font-size:clamp(26px,2.6vw,34px)}}
.c-prose{display:grid;gap:16px;max-width:64ch}
.c-prose p{line-height:1.65}
.c-prose strong{font-weight:600}
.c-body{display:grid;gap:24px;align-content:start}
.c-body>.sec-head{margin:0}

/* 5. checks */
.c-checks{list-style:none;margin:0;padding:0;display:grid;gap:16px;max-width:64ch}
.c-checks li{display:grid;grid-template-columns:28px 1fr;gap:8px}
.c-checks li::before,.c-feat li::before{content:"";width:14px;height:8px;margin-top:9px;margin-left:2px;border-left:3px solid var(--pen);border-bottom:3px solid var(--pen);transform:rotate(-45deg)}
.c-checks.lg{gap:20px}
.c-checks.lg li{font:600 var(--fs-l)/1.35 Jost,"Golos Text",sans-serif}
.c-checks.lg li::before{margin-top:10px}

/* 6. benefits */
.c-feat{list-style:none;margin:0;padding:0;display:grid;border-top:2px solid var(--ink)}
.c-feat li{display:grid;grid-template-columns:28px 1fr;gap:8px 12px;padding:24px 0;border-bottom:1px solid var(--line)}
.c-feat li::before{margin-top:7px}
.c-feat h3{margin-bottom:8px}
.c-feat p{color:var(--ink-2);max-width:56ch}
@media (min-width:768px){
  .c-feat.c2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;border-top:0}
  .c-feat.c2 li{border-bottom:0;border-top:1px solid var(--line)}
  .c-feat.c2 li:nth-child(-n+2){border-top:2px solid var(--ink)}
}

/* 7. topic list, numbering like a notebook */
.c-toc{list-style:none;margin:0;padding:0;display:grid;counter-reset:t;border-top:2px solid var(--ink)}
.c-toc li{counter-increment:t;display:grid;grid-template-columns:56px 1fr;gap:12px;padding:24px 0;border-bottom:1px solid var(--line)}
.c-toc li::before{content:counter(t,decimal-leading-zero);font:800 var(--fs-xl)/1 Jost,sans-serif;color:var(--pen);text-shadow:var(--pen-glow)}
.c-toc h3{margin-bottom:4px}
.c-toc p{color:var(--ink-2);max-width:44ch}
@media (min-width:768px){
  .c-toc.c2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;border-top:0}
  .c-toc.c2 li{border-bottom:0;border-top:1px solid var(--line)}
  .c-toc.c2 li:nth-child(-n+2){border-top:2px solid var(--ink)}
}

/* 8. lesson parts */
.c-parts{list-style:none;margin:0;padding:0;display:grid;gap:72px;counter-reset:p}
.c-part{counter-increment:p;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding-top:24px;border-top:2px solid var(--ink)}
.c-part-head{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;align-self:start}
.c-part-head::before{content:counter(p);display:grid;place-items:center;width:48px;height:48px;border:2px solid var(--ink);border-radius:50%;font:800 var(--fs-l)/1 Jost,sans-serif;background:var(--paper)}
.c-part-head h3{font-size:var(--fs-xl)}
.c-part-text{display:grid;gap:12px;max-width:64ch}
.c-part-text p{line-height:1.6}
.c-part-text p+p{color:var(--ink-2)}
.c-part-text strong{font-weight:600}
@media (min-width:1024px){
  .c-part{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:72px;row-gap:32px}
  .c-part>.c-gallery,.c-part>.c-gallery.wide{grid-column:1/-1}
}

/* 9. gallery: swipe row on phones, grid on wide screens */
.c-gallery{list-style:none;margin:0 calc(-1*var(--pad));padding:0 var(--pad) 16px;display:grid;grid-auto-flow:column;grid-auto-columns:58%;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;overscroll-behavior-x:contain}
.c-gallery::-webkit-scrollbar{display:none}
.c-gallery>li{scroll-snap-align:start;min-width:0}
.c-gallery.wide{grid-auto-columns:80%}
@media (min-width:600px){.c-gallery{grid-auto-columns:34%;scrollbar-width:thin}.c-gallery.wide{grid-auto-columns:48%}}
@media (min-width:1024px){
  .c-gallery,.c-gallery.wide{margin:0;padding:0;overflow:visible;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:24px 16px}
  .c-gallery.wide{--n:3;gap:24px}
}
.c-shot{display:grid;gap:12px;align-content:start;text-decoration:none;color:var(--ink)}
.c-shot img{width:100%;aspect-ratio:5/7;object-fit:cover;object-position:50% 0;border-radius:var(--r);border:1px solid var(--line);background:var(--paper-2);transition:transform .15s ease,box-shadow .15s ease}
.wide .c-shot img{aspect-ratio:16/9;object-position:50% 50%}
.c-shot span{font:700 var(--fs-s)/1.3 Jost,sans-serif}
.c-shot:hover img{transform:translateY(-2px);box-shadow:4px 4px 0 var(--pen)}
.c-shot:hover span{text-decoration:underline;text-decoration-color:var(--pen);text-decoration-thickness:2px;text-underline-offset:4px}

/* single framed picture (calendar, schedule, scheme) */
.c-pic{display:block;margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--paper-2);box-shadow:8px 8px 0 var(--ink)}
.c-pic img{width:100%;height:auto}

/* 10. video */
.c-videos{display:grid;gap:32px}
@media (min-width:768px){.c-videos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.c-video{display:grid;gap:16px;text-decoration:none;color:var(--ink);max-width:640px}
.c-video-poster{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#17161b;border:1px solid var(--line);transition:box-shadow .15s ease,transform .15s ease}
.c-video-poster img{width:100%;height:100%;object-fit:cover}
.c-video-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,22,27,.05),rgba(23,22,27,.45))}
.c-play{position:absolute;z-index:1;left:16px;bottom:16px;width:64px;height:64px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));transition:transform .15s ease}
@media (min-width:768px){.c-play{left:24px;bottom:24px;width:72px;height:72px}}
.c-video:hover .c-play{transform:scale(1.08)}
.c-play circle{fill:var(--pen)}
.c-play path{fill:var(--paper)}
.c-video-cap{display:grid;gap:4px}
.c-video-cap b{font:700 var(--fs-l)/1.2 Jost,sans-serif}
.c-video-cap span{font-size:var(--fs-s);font-weight:600;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--pen);text-decoration-thickness:2px;text-underline-offset:4px}
.c-video:hover .c-video-poster,.c-video:focus-visible .c-video-poster{transform:translateY(-2px);box-shadow:6px 6px 0 var(--pen)}
.c-video:hover .c-video-cap span{color:var(--pen)}

/* 11. people (1-3 teachers, large) */
.c-people{display:grid;gap:48px 24px}
@media (min-width:768px){.c-people{grid-template-columns:repeat(2,minmax(0,1fr))}}
.c-person{display:grid;gap:16px;align-content:start}
.c-person img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--paper-2)}
.c-person h3{font-size:var(--fs-xl)}
.c-person p{color:var(--ink-2);max-width:48ch}
.c-person strong{color:var(--ink);font-weight:600}

/* 12. units */
.c-units{display:grid;gap:48px 24px}
@media (min-width:768px){.c-units{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.c-units{grid-template-columns:repeat(4,minmax(0,1fr))}}
.c-unit{display:grid;gap:12px;align-content:start;padding-top:24px;border-top:2px solid var(--ink)}
.c-unit h3{font-size:var(--fs-l)}
.c-unit p{color:var(--ink-2);max-width:42ch}
.c-unit .lab{font-weight:600;font-size:var(--fs-s);color:var(--ink)}
.c-unit ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:var(--fs-s);color:var(--ink-2)}

/* 13. plans, notes */
.plans.c-two{max-width:820px}
@media (min-width:900px){.plans.c-two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plan-price small{white-space:nowrap}
.c-note{margin-top:32px;padding:24px;border:2px dashed var(--line);border-radius:var(--r);max-width:820px}

/* 15. final */
.c-final h2{font-size:clamp(32px,5.6vw,64px);max-width:20ch;line-height:1.1}
.choices.two{max-width:820px}
@media (min-width:768px){.choices.two{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* buttons with long labels wrap neatly */
.cta-row .btn,.c-body .btn{text-align:center;line-height:1.2;padding-block:12px}