/* ══ Страница статьи (single.php) ═══════════════════════════════════
   По макету «Статья» 1440 / 834 / 390: заголовок и метаданные, обложка,
   оглавление слева, текст с нумерованными пунктами, липкая карточка справа,
   призыв и «Читайте также». Классы ds-statya__*. */

.ds-statya .ds-page__head.ds-statya__head{padding:28px 28px 32px;border-bottom:0}
.ds-statya .ds-statya__head .ds-page__lead{max-width:720px}
.ds-statya__head .ds-page__title{max-width:1300px;line-height:.95}

/* дата · время · рубрика */
.ds-statya__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:20px 0 0}
.ds-statya__data{color:var(--ds-blue-dark);font:500 13px/1.3 var(--ds-font-text);text-transform:uppercase;letter-spacing:.06em}
.ds-statya__vremya{color:var(--ds-gray);font:400 14px/1.3 var(--ds-font-text)}
.ds-statya__meta .ds-chip{padding:6px 12px;font-size:14px;text-decoration:none}
.ds-statya__meta .ds-chip:hover{color:var(--ds-blue)}

/* обложка: во всю ширину колонки, кадр режется по центру */
.ds-statya__oblozhka{padding:0 28px 28px;border-bottom:1px solid var(--ds-line)}
.ds-statya__oblozhka-plashka{overflow:hidden;border-radius:24px;background:var(--ds-tile)}
/* Обложки на белом фоне: multiply растворяет белое в голубой плашке, как у карточек блога.
   В тёмной теме — белая карточка вокруг кадра (см. ниже), multiply выключен. */
.ds-statya__oblozhka-img{display:block;width:100%;height:600px;object-fit:cover;object-position:50% 50%;
  mix-blend-mode:multiply}
:root[data-theme="dark"] .ds-statya__oblozhka-plashka{background:#fff}
:root[data-theme="dark"] .ds-statya__oblozhka-img{mix-blend-mode:normal}

/* тело: оглавление | текст | карточка */
.ds-statya__telo{display:grid;grid-template-columns:280px minmax(0,1fr) 300px;column-gap:40px;align-items:start;
  padding:48px 28px 56px}
.ds-statya__toc,.ds-statya__bok{position:sticky;top:160px}

/* оглавление: карточка слева */
.ds-statya__toc{padding:24px 20px;border:1px solid var(--ds-line);border-radius:20px;background:var(--ds-bg-card)}
.ds-statya__toc-zag{margin:0 0 16px;font:500 17px/1.3 var(--ds-font-text)}
.ds-statya__toc-spisok{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.ds-statya__toc-spisok li{display:flex;align-items:baseline;gap:12px;font:400 15px/21px var(--ds-font-text)}
.ds-statya__toc-spisok li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--ds-gray-soft);transform:translateY(-1px)}
.ds-statya__toc-spisok a{color:var(--ds-ink)}
.ds-statya__toc-spisok a:hover{color:var(--ds-blue-dark)}
.ds-statya__toc-spisok li.is-aktivno::before{background:var(--ds-blue)}
.ds-statya__toc-spisok li.is-aktivno a{color:var(--ds-blue-dark)}
.ds-statya__toc-mini{display:none}

/* текст */
.ds-statya__tekst{min-width:0;font:400 18px/29px var(--ds-font-text);overflow-wrap:break-word}
.ds-statya__tekst > *{margin:0}
.ds-statya__tekst > * + *{margin-top:20px}
.ds-statya__tekst h2{font:600 34px/1.12 var(--ds-font-display);text-transform:uppercase;
  letter-spacing:.005em;scroll-margin-top:150px}
.ds-statya__tekst h3{font:600 25px/1.2 var(--ds-font-display)}
.ds-statya__tekst a{color:var(--ds-blue-dark);text-underline-offset:3px}
.ds-statya__tekst strong,.ds-statya__tekst b{font-weight:500}
.ds-statya__tekst img{max-width:100%;height:auto;border-radius:16px}

/* списки: номер в кружке, заголовок пункта, пояснение серым */
.ds-statya__tekst ul,.ds-statya__tekst ol{padding:0;list-style:none;display:grid;gap:20px;counter-reset:ds-st}
.ds-statya__tekst li{position:relative;min-height:36px;padding-left:52px;counter-increment:ds-st;
  color:var(--ds-gray);font:400 16px/24px var(--ds-font-text)}
.ds-statya__tekst li::before{content:counter(ds-st);position:absolute;left:0;top:0;display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;background:var(--ds-tile);color:var(--ds-blue);
  font:600 22px/1 var(--ds-font-display)}
.ds-statya__tekst li > b:not(.ds-statya__v-stroke),.ds-statya__tekst li > strong:not(.ds-statya__v-stroke){display:block;margin-bottom:4px;color:var(--ds-ink);
  font:500 17px/1.4 var(--ds-font-text)}
/* жирное посреди фразы в пункте — слово в строке, не заголовок */
.ds-statya__tekst li .ds-statya__v-stroke{color:var(--ds-ink);font-weight:600}
.ds-statya__tekst li ul,.ds-statya__tekst li ol{margin-top:12px}

/* таблица */
.ds-statya__tablica{overflow-x:auto;border:1px solid var(--ds-line);border-radius:16px;background:var(--ds-bg-card)}
.ds-statya__tablica table{width:100%;min-width:560px;border-collapse:collapse;table-layout:fixed}
.ds-statya__tablica th,.ds-statya__tablica td{padding:14px 16px;border:0;border-top:1px solid var(--ds-line);
  text-align:left;vertical-align:middle;font:400 15px/21px var(--ds-font-text)}
.ds-statya__tablica tr:first-child th,.ds-statya__tablica tr:first-child td{border-top:0}
.ds-statya__tablica th{background:var(--ds-tile);font:500 14px/1.3 var(--ds-font-text)}
.ds-statya__tablica th:first-child,.ds-statya__tablica td:first-child{width:37%}
.ds-statya__tablica th:nth-child(2),.ds-statya__tablica td:nth-child(2){width:25%}

/* выноска */
.ds-statya__vynoska{display:flex;gap:16px;align-items:flex-start;padding:28px 32px;border-radius:20px;
  background:var(--ds-tile);font:400 19px/29px var(--ds-font-text);color:var(--ds-ink)}
.ds-statya__vynoska p,.ds-statya__vynoska div{margin:0}
.ds-statya__vynoska > div > * + *{margin-top:12px}
.ds-statya__kavychka{flex:none;color:var(--ds-blue);font:600 64px/.8 var(--ds-font-display);font-style:italic}

/* карточка справа */
.ds-statya__bok{display:grid;gap:14px;padding:28px 24px;border-radius:24px;background:var(--ds-tile)}
.ds-statya__bok-zag{margin:0;font:600 32px/1.05 var(--ds-font-display);text-transform:uppercase}
.ds-statya__bok-tekst{margin:0;color:var(--ds-gray);font:400 16px/22px var(--ds-font-text)}
.ds-statya__bok .ds-btn{width:100%;justify-content:center}

/* призыв внизу */
.ds-statya__prizyv{padding:0 28px 28px;border-top:1px solid var(--ds-line)}
.ds-statya__prizyv-plashka{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px;
  min-height:380px;padding:20px 76px 20px 56px;border-radius:28px;background:var(--ds-tile)}
.ds-statya__prizyv-tekst{display:grid;justify-items:start;gap:0}
.ds-statya__prizyv-zag{margin:0 0 16px;max-width:700px;font:600 clamp(34px,6vw,86px)/.98 var(--ds-font-display);
  text-transform:uppercase}
.ds-statya__prizyv-opis{margin:0 0 24px;max-width:760px;color:var(--ds-gray);font:400 19px/29px var(--ds-font-text)}
.ds-statya__prizyv .ds-btn{width:auto}
.ds-statya__prizyv-lico{display:block;width:auto;height:340px}

/* читайте также */
.ds-statya__esche{padding-top:48px}
.ds-statya__esche-zag{margin:0;padding:0 28px 26px;font:600 64px/.98 var(--ds-font-display);text-transform:uppercase}
.ds-statya__esche-lenta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ds-line);
  border-bottom:1px solid var(--ds-line)}
.ds-statya__karta{display:flex;flex-direction:column;gap:16px;min-width:0;padding:24px 24px 28px;
  border-right:1px solid var(--ds-line)}
.ds-statya__karta:last-child{border-right:0}
.ds-statya__karta-shot{display:block;overflow:hidden;border-radius:16px;background:var(--ds-tile)}
.ds-statya__karta-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;mix-blend-mode:multiply}
:root[data-theme="dark"] .ds-statya__karta-img{mix-blend-mode:normal}
.ds-statya__karta-tekst{display:flex;flex-direction:column;gap:12px}
.ds-statya__karta-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;margin:0}
.ds-statya__karta-nazv{margin:0;font:600 28px/1.1 var(--ds-font-display);text-transform:uppercase}
.ds-statya__karta-nazv a{color:inherit}
.ds-statya__karta-nazv a:hover{color:var(--ds-blue-dark)}
.ds-statya__karta-opis{margin:0;color:var(--ds-gray);font:400 16px/24px var(--ds-font-text)}

/* ── планшет: оглавление плашкой над текстом, справа карточка поуже ── */
@media (max-width:1199px){
  .ds-statya__telo{grid-template-columns:minmax(0,1fr) 260px;column-gap:24px;row-gap:24px;padding:48px 28px 56px}
  .ds-statya__toc{display:none}
  .ds-statya__tablica th:first-child,.ds-statya__tablica td:first-child{width:150px}
  .ds-statya__tablica th:nth-child(2),.ds-statya__tablica td:nth-child(2){width:130px}
  .ds-statya__toc-mini{display:block;grid-column:1/-1;padding:16px;border:1px solid var(--ds-line);border-radius:20px;
    background:var(--ds-bg-card)}
  .ds-statya__toc-mini summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}
  .ds-statya__toc-mini summary::-webkit-details-marker{display:none}
  .ds-statya__toc-mini .ds-statya__toc-zag{flex:1;margin:0}
  .ds-statya__ikonka{flex:none;color:var(--ds-blue)}
  .ds-statya__shevron{display:grid;place-items:center;color:var(--ds-blue)}
  .ds-statya__shevron--vverh,.ds-statya__toc-mini[open] .ds-statya__shevron--vniz{display:none}
  .ds-statya__toc-mini[open] .ds-statya__shevron--vverh{display:grid}
  .ds-statya__toc-mini[open]{padding-bottom:20px}
  .ds-statya__toc-mini .ds-statya__toc-spisok{margin-top:16px}
  .ds-statya__tekst{grid-column:1;font-size:17px;line-height:26px}
  .ds-statya__tekst > * + *{margin-top:18px}
  .ds-statya__tekst h2{font-size:32px}
  .ds-statya__bok{grid-column:2;grid-row:2;padding:28px 24px}
  .ds-statya__bok-zag{font-size:28px}
  .ds-statya .ds-statya__head .ds-page__lead{max-width:760px;font-size:17px;line-height:26px}
  .ds-statya__head .ds-page__title{max-width:750px}
  .ds-statya__oblozhka-img{height:400px}
  .ds-statya__vynoska{font-size:17px;line-height:26px}
  .ds-statya__prizyv-plashka{min-height:0;padding:24px 32px;grid-template-columns:minmax(0,1fr) 250px}
  .ds-statya__prizyv-zag{font-size:50px}
  .ds-statya__prizyv-opis{font-size:17px;line-height:26px}
  .ds-statya__prizyv-lico{height:300px;justify-self:end}
  .ds-statya__esche-zag{font-size:50px}
  .ds-statya__karta{padding:16px 16px 24px;gap:12px}
  .ds-statya__karta-meta{flex-direction:column;justify-content:flex-start}
  .ds-statya__karta-nazv{font-size:22px}
  .ds-statya__karta-opis{font-size:15px;line-height:22px}
}

/* ── телефон: одна колонка, карточка справа прячется ── */
@media (max-width:809px){
  .ds-statya .ds-page__head.ds-statya__head{padding:24px 20px 24px}
  .ds-statya__head .ds-kroshki span:nth-last-child(-n+2){display:none}
  .ds-statya .ds-statya__head .ds-page__lead{font-size:16px;line-height:22px}
  .ds-statya__oblozhka{padding:0 20px 20px}
  .ds-statya__oblozhka-img{height:auto;aspect-ratio:3/2}
  .ds-statya__oblozhka-plashka{border-radius:16px}
  .ds-statya__telo{grid-template-columns:minmax(0,1fr);row-gap:20px;padding:24px 20px 32px}
  .ds-statya__bok{display:none}
  .ds-statya__tekst{font-size:16px;line-height:24px}
  .ds-statya__tekst > * + *{margin-top:16px}
  .ds-statya__tekst h2{font-size:28px}
  .ds-statya__tekst ul,.ds-statya__tekst ol{gap:16px}
  .ds-statya__tekst li{min-height:32px;padding-left:48px;font-size:15px;line-height:21px}
  .ds-statya__tekst li::before{width:32px;height:32px;font-size:20px}
  .ds-statya__tekst li > b:not(.ds-statya__v-stroke),.ds-statya__tekst li > strong:not(.ds-statya__v-stroke){font-size:17px}
  .ds-statya__vynoska{padding:20px;font-size:16px;line-height:22px}
  .ds-statya__prizyv{padding:0 20px 20px}
  .ds-statya__prizyv-plashka{display:flex;flex-direction:column;align-items:flex-start;padding:24px 20px 0;border-radius:20px}
  .ds-statya__prizyv-zag{font-size:34px}
  .ds-statya__prizyv-opis{font-size:15px;line-height:21px}
  .ds-statya__prizyv-lico{align-self:flex-end;height:155px;margin-top:-4px}
  .ds-statya__esche{padding-top:28px}
  .ds-statya__esche-zag{padding:0 20px 20px;font-size:42px}
  .ds-statya__esche-lenta{display:block}
  .ds-statya__karta{display:grid;grid-template-columns:82px minmax(0,1fr);align-items:start;column-gap:28px;
    padding:16px 20px;border-right:0;border-bottom:1px solid var(--ds-line)}
  .ds-statya__karta:last-child{border-bottom:0}
  .ds-statya__karta-shot{border-radius:12px}
  .ds-statya__karta-tekst{display:flex;flex-direction:column-reverse;gap:6px}
  .ds-statya__karta-nazv{font-size:20px;line-height:1.2}
  .ds-statya__karta-opis{display:none}
}

/* тёмная тема: карточка справа и призыв — тёмно-синие, плашка только под персонажем (zz-plashki.css) */