/*
 * Шаблон отдельной статьи блога (single-post). Грузится после base.css,
 * условно по слагу шаблона `single` (см. inc/enqueue.php).
 *
 * Все классы под префиксом bs-* («blog single»), чтобы стили не растекались на
 * другие страницы. Переиспользуем сквозные примитивы base.css (.wrap, .btn,
 * .crumbs, .faq, .cta-banner, .badge, .btn-msg, .avatar). Здесь — только
 * уникальное для страницы статьи: editorial-типографика тела, TOC со scroll-spy,
 * sticky-колонка, callout-врезки, адаптивные таблицы, автор-блок, «читайте также».
 *
 * Разметка/хуки для developer (данные подставит он):
 *   [data-bs-toc]           — контейнеры оглавления (desktop + mobile)
 *   [data-bs-body]          — тело статьи (developer вставит the_content())
 *   .bs-body h2[id]         — якоря для TOC (id обязателен)
 *   [data-bs-author]        — автор-блок (данные преподавателя из CPT teachers)
 *   [data-bs-related]       — сетка «Читайте также» (посты того же языка)
 *   .faq-item               — FAQ (общий аккордеон base/app-core)
 *
 * @package easy-peasy
 */

/* ==========================================================================
   КОНТЕЙНЕР СТАТЬИ
   ========================================================================== */
/* Токены сетки статьи. Ширина контейнера выводится из содержимого, а не
   назначается: 700 (проза) + 80 (зазор) + 320 (боковая колонка) = 1100, плюс
   2×40 паддинга = 1180. Мера чтения живёт на ТРЕКЕ сетки, а не на потолках у
   каждого текстового блока — иначе абзац фиксируется намертво и не заполняет
   свою колонку, из-за чего справа от текста открывается пустой коридор. */
.bs-article{
  --bs-text:700px;
  --bs-aside:320px;
  --bs-gap:80px;
  --bs-wide:1100px;
  padding-block:0;
}
/* Правило `.wrap = --bleed` из base.css написано под маркетинговые секции, где
   контейнер заполняют гриды и карточки. У статьи 90 % страницы — один поток
   прозы, заполнять контейнер нечем, поэтому здесь мы от него сознательно
   отходим. Ощущение «страница шириной с сайт» дают полосы фона .bs-headband
   и .bs-tailband, которые упираются в края экрана. */
.bs-wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* Полосы фона делаем разметкой, а не псевдоэлементом с left:calc(-50vw + 50%):
   50vw включает ширину вертикального скроллбара, и приём даёт горизонтальный
   скролл на ~15px. */
.bs-headband{background:var(--surface-2);border-bottom:1px solid var(--line);
  padding-block:clamp(20px,3vw,34px) clamp(28px,4vw,44px)}
.bs-tailband{margin-top:clamp(40px,6vw,72px);background:var(--surface-2);
  border-top:1px solid var(--line);
  padding-block:clamp(40px,6vw,64px) clamp(48px,7vw,84px)}

/* Хвост живёт вне двухколоночной сетки и занимает всю её ширину: пока он был
   внутри .bs-main, справа от него до самого футера висела пустая колонка, а
   CTA-баннер не добирал ширины до своего брейкпоинта и схлопывался в стек. */
.bs-tail{max-width:var(--bs-wide);margin-inline:auto}
/* Единственный источник вертикальных отступов в хвосте. Собственные margin-top
   у .bs-summary/.bs-offer/.bs-faq/.bs-related/.bs-foot сняты намеренно: они
   весят столько же, стоят ниже по файлу и перебивали это правило — блоки
   слипались. */
.bs-tail > * + *{margin-top:clamp(40px,6vw,64px)}

/* Шапка занимает всю ширину полосы: крупный H1 — не проза, мера чтения ему не
   нужна, а зажатый в 700px он рвётся на четыре строки посреди пустой полосы.
   Лид остаётся в читаемой мере — его читают, а не рассматривают. */
.bs-head-inner{max-width:var(--bs-text)}
@media(min-width:1080px){
  .bs-head-inner{max-width:var(--bs-wide)}
}

/* Короткая заметка (меньше 3 заголовков) идёт без боковой колонки, и тело в ней
   центрируется. Шапку центрируем вместе с телом — иначе H1 стоит слева, а первый
   абзац начинается на 200px правее. */
@media(min-width:1080px){
  .bs-article.is-no-aside .bs-head-inner,
  .bs-article.is-no-aside .bs-cover{margin-inline:auto}
}

/* ==========================================================================
   ШАПКА СТАТЬИ (крошки, бейджи, H1, мета, обложка, лид)
   ========================================================================== */
.bs-head{position:relative}
.bs-head .crumbs{padding-top:0;margin-bottom:18px}

.bs-badges{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:18px}
/* Языковой бейдж с цветной точкой (акцент = язык обучения) */
.bs-lang{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.8rem;
  padding:6px 14px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text);
  border:1px solid var(--line)}
.bs-lang .bs-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--bs-accent,var(--primary));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bs-accent,var(--primary)) 20%,transparent)}
.bs-cat{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.8rem;
  padding:6px 14px;border-radius:var(--r-pill);background:var(--surface-soft);color:var(--badge-coral-text)}
.bs-cat svg{width:14px;height:14px}

.bs-title{font-size:clamp(1.85rem,1.2rem + 2.9vw,3rem);font-weight:800;line-height:1.1;
  letter-spacing:-.02em;text-wrap:balance;color:var(--text)}

/* Мета-строка: автор / даты / время чтения */
.bs-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:22px;
  font-size:.9rem;color:var(--text-muted)}
.bs-meta-author{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--text)}
.bs-meta-author:hover{color:var(--primary)}
.bs-meta-ava{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line)}
.bs-meta-ava--fb{display:grid;place-items:center;font-family:var(--font-head);font-weight:700;
  font-size:.9rem;color:#fff}
.bs-meta-author small{display:block;font-weight:600;font-size:.74rem;color:var(--text-muted)}
/* На узких мета переносится, и точка-разделитель повисает сиротой в конце
   строки — там она только мусорит. */
.bs-meta-sep{display:none;width:4px;height:4px;border-radius:50%;background:var(--text-muted);opacity:.45;flex:none}
@media(min-width:640px){.bs-meta-sep{display:block}}
.bs-meta-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.bs-meta-item svg{width:15px;height:15px;flex:none;opacity:.7}
.bs-meta-item.is-upd{color:var(--green);font-weight:600}
/* Проверка профильным специалистом — сильный сигнал доверия для YMYL-тем,
   поэтому выделяем её, а не прячем в общий серый ряд меты. */
.bs-meta-item.is-reviewed{color:var(--blue);font-weight:600;white-space:normal}
.bs-meta-item.is-reviewed svg{opacity:1}
.bs-meta-item.is-upd svg{opacity:1}

/* Обложка (макет обязан работать и без неё) */
/* Обложка — по левой вертикали H1, в той же мере, что проза. */
.bs-cover{margin:clamp(24px,3.5vw,36px) 0 0;max-width:var(--bs-text)}
.bs-cover-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-xl);
  border:1px solid var(--line);box-shadow:var(--sh-md);background:var(--surface-2)}
.bs-cover-cap{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:.82rem;
  line-height:1.5;color:var(--text-muted)}
.bs-cover-cap svg{width:15px;height:15px;flex:none;margin-top:2px;opacity:.7}

/* Лид-абзац */
.bs-lead{margin-top:clamp(24px,3.5vw,34px);font-size:clamp(1.12rem,1.02rem + .5vw,1.3rem);
  line-height:1.6;color:var(--text);font-weight:500;max-width:56ch}
.bs-lead strong{font-weight:700}

/* ==========================================================================
   ДВУХКОЛОНОЧНЫЙ МАКЕТ: тело + боковая колонка (TOC / sticky-CTA)
   ========================================================================== */
.bs-layout{margin-top:clamp(28px,4vw,44px);display:grid;gap:clamp(28px,4vw,56px)}
@media(min-width:1080px){
  /* minmax(0,var(--bs-text)), а НЕ 1fr: трек прозы дорастает до 700 и
     останавливается вместо того, чтобы растянуться на весь остаток и открыть
     пустой коридор до боковой колонки. Ниже 1180 трек ужимается сам, без
     дополнительных медиазапросов. */
  .bs-layout{grid-template-columns:minmax(0,var(--bs-text)) var(--bs-aside);
    gap:var(--bs-gap);max-width:var(--bs-wide)}
  .bs-layout.is-no-aside{grid-template-columns:minmax(0,1fr);max-width:var(--bs-text);
    margin-inline:auto}
}
/* Ниже порога сайдбара — единая читаемая колонка по центру. 680, а не 760:
   кегль тела на планшете 18px, и 760 дало бы 82ch. */
@media(max-width:1079.98px){
  .bs-head-inner,
  .bs-cover,
  .bs-layout{max-width:680px;margin-inline:auto}
}
.bs-main{min-width:0}

/* --- Боковая колонка (только desktop) --- */
.bs-aside{display:none}
@media(min-width:1080px){.bs-aside{display:block}}
/* Скроллится список оглавления, а не вся колонка. Со `overflow:auto` на
   .bs-aside-inner десятипунктовый TOC не влезал в лимит высоты, получал
   вложенный скролл, а CTA-карточка под ним сжималась до 44px и переставала
   работать как конверсионный блок. */
.bs-aside-inner{position:sticky;top:clamp(84px,8vw,116px);display:flex;flex-direction:column;
  gap:20px;max-height:calc(100vh - clamp(84px,8vw,116px) - 24px);padding-bottom:8px}

/* --- Оглавление (TOC) --- */
.bs-toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:18px 18px 14px;display:flex;flex-direction:column;min-height:0}
.bs-toc-title{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:800;
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.bs-toc-title svg{width:16px;height:16px;color:var(--primary)}
.bs-toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  counter-reset:toc;overflow:auto;min-height:0;scrollbar-width:thin}
.bs-toc-list li{position:relative}
.bs-toc-link{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:var(--r-sm);
  font-size:.88rem;line-height:1.4;color:var(--text-muted);font-weight:600;
  border-left:2px solid transparent;transition:color .16s ease,background .16s ease,border-color .16s ease}
.bs-toc-link::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);
  font-family:var(--font-head);font-weight:700;font-size:.72rem;color:var(--text-muted);opacity:.55;flex:none}
.bs-toc-link:hover{color:var(--text);background:var(--surface-soft)}
.bs-toc-link.is-active{color:var(--accent-strong);background:var(--surface-soft);
  border-left-color:var(--primary)}
.bs-toc-link.is-active::before{color:var(--accent-strong);opacity:1}
.bs-toc-link:focus-visible{outline:none;box-shadow:var(--ring)}
/* вложенные H3 в TOC — с отступом, без нумерации */
.bs-toc-list .is-sub{margin-left:22px}
.bs-toc-list .is-sub .bs-toc-link::before{content:"–";counter-increment:none}

/* --- Sticky-CTA в боковой колонке (только desktop) --- */
.bs-cta-card{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:22px 20px;
  background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand);flex:none}
.bs-cta-card::after{content:"";position:absolute;right:-50px;bottom:-60px;width:170px;height:170px;
  border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.bs-cta-card > *{position:relative;z-index:1}
.bs-cta-card .bs-cta-eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);
  font-weight:700;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;opacity:.92;margin-bottom:9px}
.bs-cta-card .bs-cta-eyebrow svg{width:15px;height:15px}
.bs-cta-card h3{color:#fff;font-size:1.12rem;font-weight:800;line-height:1.25}
.bs-cta-card p{font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.92);margin-top:8px}
.bs-cta-card .btn{width:100%;margin-top:14px;white-space:normal;text-wrap:balance}
.bs-cta-card .btn + .btn{margin-top:9px}

/* ==========================================================================
   МОБИЛЬНЫЙ TOC — сворачиваемый disclosure (native <details>)
   ========================================================================== */
.bs-toc-m{margin:0 0 clamp(22px,4vw,30px);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden}
@media(min-width:1080px){.bs-toc-m{display:none}}
.bs-toc-m > summary{display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;
  list-style:none;font-family:var(--font-head);font-weight:800;font-size:.92rem;color:var(--text)}
.bs-toc-m > summary::-webkit-details-marker{display:none}
.bs-toc-m > summary:focus-visible{outline:none;box-shadow:var(--ring)}
.bs-toc-m-ico{width:34px;height:34px;border-radius:10px;background:var(--surface-soft);color:var(--primary);
  display:grid;place-items:center;flex:none}
.bs-toc-m-ico svg{width:18px;height:18px}
.bs-toc-m-label{margin-right:auto;display:flex;flex-direction:column;gap:1px}
.bs-toc-m-label small{font-family:var(--font-body);font-weight:600;font-size:.74rem;color:var(--text-muted)}
.bs-toc-m-toggle{font-family:var(--font-body);font-weight:700;font-size:.82rem;color:var(--primary);
  display:inline-flex;align-items:center;gap:6px}
.bs-toc-m-toggle svg{width:16px;height:16px;transition:transform .22s ease}
.bs-toc-m[open] .bs-toc-m-toggle svg{transform:rotate(180deg)}
.bs-toc-m-hide{display:none}
.bs-toc-m[open] .bs-toc-m-show{display:none}
.bs-toc-m[open] .bs-toc-m-hide{display:inline}
.bs-toc-m .bs-toc-list{padding:2px 16px 16px}

/* ==========================================================================
   ТЕЛО СТАТЬИ — editorial-типографика
   ========================================================================== */
/* Меру держит трек сетки (--bs-text), поэтому здесь потолков нет: проза
   заполняет колонку целиком, у всех блоков один правый край, а таблица
   использует те же 700px без выходов за меру. Кегль 19px на пределе — при
   ширине 700 это ~71ch, попадание в комфортные 65–75. */
.bs-body{max-width:none;font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);line-height:1.72;color:var(--text)}
.bs-body > * + *{margin-top:1.35em}
.bs-body p{color:var(--text);overflow-wrap:break-word}
.bs-body a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--blue) 40%,transparent);
  transition:text-decoration-color .16s ease,color .16s ease}
.bs-body a:hover{text-decoration-color:var(--blue)}
.bs-body strong{font-weight:700;color:var(--text)}

/* Инлайновый <code> в языковых статьях — это не код, а буква или слово чужого
   алфавита (ł, sz, żółć). Поэтому шрифт остаётся текстовым, а выделяет только
   подложка: моноширинный набор в середине русской фразы читается хуже.
   Переносы разрешены: внутрь <code> попадают не только буквы, но и целые
   фразы-примеры («Czy może pan/pani powtórzyć wolniej?»), а nowrap на такой
   строке выносит её за экран на 360px. */
.bs-body code{font-family:inherit;font-size:.96em;font-weight:600;
  padding:.06em .34em;border-radius:.4em;background:var(--surface-soft);
  overflow-wrap:break-word}
.bs-body a code{color:inherit}

/* Заголовки внутри тела — строгая иерархия, scroll-margin под sticky-хедер */
.bs-body h2{font-size:clamp(1.4rem,1.15rem + 1.15vw,2rem);font-weight:800;line-height:1.2;text-wrap:balance;
  letter-spacing:-.01em;margin-top:1.9em;scroll-margin-top:clamp(84px,9vw,120px);position:relative}
.bs-body h2::before{content:"";position:absolute;left:-18px;top:.18em;bottom:.18em;width:4px;
  border-radius:var(--r-pill);background:var(--grad-brand);opacity:0;transform:scaleY(.4);
  transform-origin:top;transition:opacity .3s ease,transform .3s ease}
@media(min-width:720px){.bs-body h2::before{left:-22px}}
.bs-body h2.is-seen::before{opacity:1;transform:scaleY(1)}
.bs-body h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);font-weight:800;line-height:1.25;text-wrap:balance;
  margin-top:1.6em;scroll-margin-top:clamp(84px,9vw,120px);color:var(--text)}
.bs-body h2 + h3,.bs-body h2 + p{margin-top:.7em}

/* Списки — маркеры/нумерация как чек-листы */
.bs-body ul,.bs-body ol{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.7em}
.bs-body li{position:relative;padding-left:34px;line-height:1.7}
.bs-body ul > li::before{content:"";position:absolute;left:8px;top:.62em;width:8px;height:8px;
  border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 16%,transparent)}
.bs-body ol{counter-reset:bsol}
.bs-body ol > li::before{counter-increment:bsol;content:counter(bsol);position:absolute;left:0;top:.05em;
  width:26px;height:26px;border-radius:50%;background:var(--surface-soft);color:var(--primary);
  font-family:var(--font-head);font-weight:800;font-size:.8rem;display:grid;place-items:center}
.bs-body li > ul,.bs-body li > ol{margin-top:.5em}
.bs-body li ul > li::before{background:var(--text-muted)}

/* Цитата */
.bs-body blockquote{margin:1.6em 0;padding:20px 24px;border-radius:var(--r-lg);
  background:var(--surface-2);border-left:4px solid var(--primary);position:relative}
.bs-body blockquote p{font-size:1.08em;line-height:1.6;font-weight:500;color:var(--text);font-style:italic}
.bs-body blockquote cite{display:block;margin-top:10px;font-size:.86rem;font-style:normal;font-weight:700;
  color:var(--text-muted)}
.bs-body blockquote cite::before{content:"— "}

/* Изображение в теле с подписью */
.bs-figure{margin:1.7em 0}
.bs-figure img{width:100%;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.bs-figure figcaption{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:.82rem;
  line-height:1.5;color:var(--text-muted)}
.bs-figure figcaption svg{width:15px;height:15px;flex:none;margin-top:2px;opacity:.7}

/* --- Callout-врезки (важно / совет / частая ошибка) --- */
.bs-callout{margin:1.7em 0;display:flex;gap:14px;padding:18px 20px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface);position:relative;overflow:hidden}
.bs-callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--co-accent,var(--primary))}
.bs-callout .co-ico{flex:none;width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;
  background:color-mix(in srgb,var(--co-accent,var(--primary)) 14%,var(--surface));color:var(--co-accent,var(--primary))}
.bs-callout .co-ico svg{width:22px;height:22px}
.bs-callout .co-body{min-width:0}
.bs-callout .co-label{font-family:var(--font-head);font-weight:800;font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--co-accent,var(--primary));margin-bottom:4px}
.bs-callout .co-body p{font-size:.96rem;line-height:1.65;color:var(--text)}
.bs-callout .co-body > * + *{margin-top:.6em}
.bs-callout.is-note{--co-accent:var(--blue);background:var(--surface-blue);border-color:color-mix(in srgb,var(--blue) 20%,transparent)}
.bs-callout.is-tip{--co-accent:var(--green);background:color-mix(in srgb,var(--green) 8%,var(--surface));border-color:color-mix(in srgb,var(--green) 24%,transparent)}
.bs-callout.is-tip .co-label{color:var(--badge-green-text)}
.bs-callout.is-mistake{--co-accent:var(--primary);background:var(--surface-soft);border-color:color-mix(in srgb,var(--primary) 22%,transparent)}
.bs-callout.is-mistake .co-label{color:var(--badge-coral-text)}

/* --- Адаптивная таблица (горизонтальный скролл на узких) --- */
.bs-table-scroll{margin:1.7em 0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  position:relative}
.bs-table-scroll .bs-table-inner{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bs-table-scroll table{width:100%;min-width:520px;border-collapse:collapse;font-size:.92rem}
.bs-table-scroll caption{caption-side:top;text-align:left;font-weight:700;font-size:.86rem;
  color:var(--text-muted);padding:12px 16px;background:var(--surface-2)}
.bs-table-scroll th,.bs-table-scroll td{padding:12px 16px;text-align:left;line-height:1.5;
  border-bottom:1px solid var(--line);vertical-align:top}
.bs-table-scroll thead th{background:var(--surface-2);font-family:var(--font-head);font-weight:800;
  font-size:.8rem;letter-spacing:.02em;color:var(--text);white-space:nowrap;position:sticky;top:0}
.bs-table-scroll tbody tr:last-child td{border-bottom:none}
.bs-table-scroll tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.bs-table-scroll td strong{font-weight:700;color:var(--text)}
.bs-table-hint{display:none;align-items:center;gap:6px;font-size:.76rem;color:var(--text-muted);
  padding:8px 16px;background:var(--surface-2);border-top:1px solid var(--line)}
.bs-table-hint svg{width:14px;height:14px}
@media(max-width:600px){.bs-table-hint{display:flex}}

/* --- In-content CTA-врезка (одна, после первого крупного блока) --- */
.bs-cta-inline{margin:2em 0;position:relative;overflow:hidden;display:flex;flex-wrap:wrap;
  align-items:center;gap:16px 22px;border-radius:var(--r-xl);background:var(--grad-brand);color:#fff;
  box-shadow:var(--sh-brand);padding:clamp(22px,3.2vw,30px)}
.bs-cta-inline::after{content:"";position:absolute;right:-60px;bottom:-70px;width:210px;height:210px;
  border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.bs-cta-inline .bci-ico{position:relative;z-index:1;width:52px;height:52px;border-radius:var(--r-md);
  background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
.bs-cta-inline .bci-ico svg{width:26px;height:26px}
.bs-cta-inline .bci-text{position:relative;z-index:1;flex:1;min-width:200px}
.bs-cta-inline .bci-text b{font-family:var(--font-head);font-weight:800;font-size:1.12rem;display:block}
.bs-cta-inline .bci-text span{color:rgba(255,255,255,.92);font-size:.92rem;line-height:1.5;margin-top:4px;display:block}
.bs-cta-inline .bci-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:11px}
@media(max-width:560px){.bs-cta-inline .bci-actions{width:100%}.bs-cta-inline .bci-actions .btn{flex:1;white-space:normal;text-wrap:balance}}

/* ==========================================================================
   «КОРОТКО О ГЛАВНОМ» — итоговые буллеты
   ========================================================================== */
.bs-summary{max-width:none;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(22px,3vw,30px)}
.bs-summary-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.bs-summary-ico{width:44px;height:44px;border-radius:var(--r-md);background:var(--surface);
  color:var(--primary);display:grid;place-items:center;flex:none;box-shadow:var(--sh-sm)}
.bs-summary-ico svg{width:24px;height:24px}
.bs-summary-head h2{font-size:var(--fs-h3);font-weight:800}
.bs-summary-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bs-summary-list li{position:relative;padding-left:34px;font-size:.98rem;line-height:1.6;color:var(--text)}
.bs-summary-list li svg{position:absolute;left:0;top:2px;width:22px;height:22px;color:var(--green);flex:none}
.bs-summary-list b{font-weight:700}

/* ==========================================================================
   АВТОР-БЛОК (E-E-A-T)
   ========================================================================== */
.bs-author{max-width:none;display:flex;flex-wrap:wrap;gap:20px;
  align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);padding:clamp(22px,3vw,30px)}
.bs-author-ava{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 3px var(--surface),0 0 0 5px color-mix(in srgb,var(--primary) 24%,var(--line))}
.bs-author-ava--fb{display:grid;place-items:center;font-family:var(--font-head);font-weight:700;
  font-size:1.9rem;color:#fff}
.bs-author-body{flex:1;min-width:220px}
.bs-author-kicker{font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.bs-author-name{font-size:1.25rem;font-weight:800;line-height:1.2}
.bs-author-role{display:inline-flex;align-items:center;gap:7px;margin-top:5px;font-size:.88rem;
  font-weight:600;color:var(--primary)}
.bs-author-role svg{width:16px;height:16px}
.bs-author-bio{margin-top:12px;font-size:.95rem;line-height:1.6;color:var(--text-muted)}
.bs-author-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-weight:700;
  font-size:.9rem;color:var(--blue)}
.bs-author-link svg{width:17px;height:17px;transition:transform .2s ease}
.bs-author-link:hover svg{transform:translateX(3px)}

/* ==========================================================================
   ОФФЕР КОНЦА СТАТЬИ — главный конверсионный акцент (переиспользует .cta-banner)
   ========================================================================== */
/* На узких экранах баннер обрезался по горизонтали: кнопка с `white-space:nowrap`
   задавала min-content ~411px внутри контентбокса 249px, а `overflow:hidden`
   у .cta-banner отрезал остальное. Правим локально, под префиксом .bs-offer:
   .cta-banner переиспользуется другими страницами, и менять его глобально без
   прогона всей матрицы нельзя. */
.bs-offer .cta-banner{scroll-margin-top:96px;padding:clamp(22px,5vw,60px)}
.bs-offer .cta-banner > *{min-width:0}
@media(max-width:560px){
  .bs-offer .cta-actions{display:grid;gap:11px}
  .bs-offer .cta-actions .btn{width:100%;white-space:normal;text-wrap:balance}
  .bs-offer .cta-side-item{min-width:0}
  .bs-offer .cta-side-item b,
  .bs-offer .cta-side-item span{overflow-wrap:break-word}
}
.bs-offer-note{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:.86rem;
  color:rgba(255,255,255,.92)}
.bs-offer-note svg{width:17px;height:17px;flex:none}

/* ==========================================================================
   FAQ статьи (переиспользует .faq/.faq-item из base) — обёртка секции
   ========================================================================== */
.bs-section-head{display:flex;align-items:center;gap:13px;margin-bottom:24px}
.bs-section-head .bsh-ico{width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;
  flex:none;background:var(--surface-soft);color:var(--primary)}
.bs-section-head .bsh-ico svg{width:24px;height:24px}
.bs-section-head h2{font-size:var(--fs-h2);font-weight:800;line-height:1.15}
.bs-section-head p{font-size:.9rem;color:var(--text-muted);margin-top:3px}
/* Перебиваем .faq-wrap{max-width:880px} из base.css — иначе FAQ даёт свой
   правый край, отличный от остальных блоков хвоста. */
.bs-faq .faq-wrap{margin-inline:0;max-width:none}

/* ==========================================================================
   «ЧИТАЙТЕ ТАКЖЕ» — сетка связанных постов
   ========================================================================== */
/* Карточка «Читайте также» переехала в base.css: её переиспользует страница
   преподавателя (статьи автора). Подключать сюда весь blog-single.css ради
   одного компонента — лишние килобайты и нарушение посекционной архитектуры. */

/* ==========================================================================
   ПОДПИСКА В ХВОСТЕ СТАТЬИ — компактный второй вход
   --------------------------------------------------------------------------
   Сознательно тише главного оффера (.bs-offer — градиент во всю ширину):
   тот же радиус и та же сетка хвоста, но спокойная поверхность и коралловая
   акцентная полоса слева вместо заливки. Форма — общий .subf из base.css.
   ========================================================================== */
.bs-subscribe{position:relative;overflow:hidden;max-width:none;
  display:flex;flex-direction:column;gap:clamp(16px,2.4vw,20px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);padding:clamp(20px,3vw,28px)}
/* Акцентная полоса-«корешок»: отличает блок от соседних белых карточек хвоста,
   не утяжеляя его цветной заливкой. */
.bs-subscribe::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:var(--grad-brand)}
.bs-subscribe::after{content:"";position:absolute;top:-90px;right:-70px;width:230px;height:230px;
  border-radius:50%;background:radial-gradient(circle,var(--brand-soft-glow),transparent 70%);
  pointer-events:none}
.bs-subscribe > *{position:relative;z-index:1}
.bs-sub-head{display:flex;align-items:flex-start;gap:14px}
.bs-sub-ico{flex:none;width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--surface-soft);color:var(--primary)}
.bs-sub-ico svg{width:23px;height:23px}
.bs-sub-copy{min-width:0}
.bs-sub-copy h2{font-size:var(--fs-h3);font-weight:800;line-height:1.2;text-wrap:balance}
.bs-sub-copy p{margin-top:6px;font-size:.92rem;line-height:1.55;color:var(--text-muted);max-width:56ch}
/* На широких форма встаёт правее иконки — по одной оси с текстом. Ширину
   ограничиваем: растянутое на 900px поле под один email выглядит нелепо. */
@media(min-width:720px){
  .bs-subscribe .subf{padding-left:60px;max-width:680px}
}
/* До 720px иконка стоит отдельной строкой. Две причины: на 360 она съедала треть
   строки и заголовок ломался на четыре куска, а на 480–719 сдвигала текст вправо,
   пока форма оставалась у левого края — в блоке появлялось два левых края. */
@media(max-width:719.98px){
  .bs-sub-head{flex-direction:column;gap:12px}
  .bs-sub-ico{width:42px;height:42px}
  .bs-sub-ico svg{width:21px;height:21px}
}
/* Хвост статьи шире 1100px не бывает: с 1080 текст и форма встают в две колонки,
   иначе правая треть блока оставалась пустой, а форма жалась к левому краю. */
@media(min-width:1080px){
  .bs-subscribe{display:grid;grid-template-columns:1fr minmax(360px,460px);
    align-items:center;gap:clamp(26px,3vw,44px)}
  .bs-subscribe .subf{padding-left:0;max-width:none}
  .bs-sub-copy p{max-width:44ch}
}
/* Самостоятельный паттерн (если подписку вешают на the_content, а не в хвост):
   даём блоку тот же вертикальный ритм, что у секций хвоста. */
.bs-subscribe-standalone{margin-block:clamp(32px,5vw,56px)}

/* ==========================================================================
   ПРЕД / СЛЕД + ПОДЕЛИТЬСЯ (нижний колонтитул статьи)
   ========================================================================== */
.bs-foot{max-width:none;display:flex;flex-direction:column;
  gap:clamp(24px,3vw,32px)}

.bs-pager{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:600px){.bs-pager{grid-template-columns:1fr 1fr}}
.bs-pager-link{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.bs-pager-link:hover{transform:translateY(-3px);box-shadow:var(--sh-md);
  border-color:color-mix(in srgb,var(--primary) 28%,var(--line))}
.bs-pager-link.is-next{text-align:right;align-items:flex-end}
.bs-pager-dir{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.bs-pager-dir svg{width:15px;height:15px;color:var(--primary)}
.bs-pager-t{font-weight:700;font-size:.98rem;line-height:1.35;color:var(--text)}
.bs-pager-link:hover .bs-pager-t{color:var(--primary)}

/* Поделиться (приоритет мессенджеров) */
.bs-share{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:clamp(20px,3vw,26px);
  border-top:1px solid var(--line)}
.bs-share-label{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:var(--text)}
.bs-share-label svg{width:18px;height:18px;color:var(--text-muted)}
.bs-share-row{display:flex;flex-wrap:wrap;gap:9px}
.bs-share-copy{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-radius:var(--r-md);
  background:var(--surface);border:1.5px solid var(--line);color:var(--text);font-family:var(--font-body);
  font-weight:600;font-size:.86rem;cursor:pointer;transition:border-color .16s ease,color .16s ease}
.bs-share-copy svg{width:18px;height:18px}
.bs-share-copy:hover{border-color:var(--primary);color:var(--primary)}
.bs-share-copy:focus-visible{outline:none;box-shadow:var(--ring)}
.bs-share-copy.is-copied{border-color:var(--green);color:var(--green)}

/* ==========================================================================
   Тёмная тема — точечные твики
   ========================================================================== */
[data-theme="dark"] .bs-callout.is-note{background:var(--surface-blue)}
[data-theme="dark"] .bs-cover-img,[data-theme="dark"] .bs-figure img{border-color:var(--line)}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .bs-body h2::before{transition:none;opacity:1;transform:none}
  .bs-rel-card,.bs-pager-link,.bs-author-link svg,.bs-toc-m-toggle svg{transition:none}
}