/* ══════════════════════════════════════════════════════════════════════════
   Раздел «Документация» (16.10): главная (dokumentaciya.html, макет 921:5645)
   и страница раздела со статьями (dok.html, макет 923:7452). Шапка, подвал
   и токены — из instrument.css; здесь только блоки документации.
   ══════════════════════════════════════════════════════════════════════════ */

/* Текст статей — Inter Regular, как в макете 923:7452 (дизайнер 16.10).
   В fonts.css Inter только 500–700; обычное начертание берём из переменного
   шрифта, который уже лежит в fonts/ (его же грузит приложение). */
@font-face{font-family:'Inter';src:url('fonts/InterVariable.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

/* ── шапка раздела с картинкой: pt 72, плашка 1376×420, скругление 40 ── */
.dk-hero-wrap{padding-top:var(--sp-72)}
/* картинка обрезается по скруглению сама, а не плашка целиком: иначе список
   результатов поиска обрезался бы краем плашки */
.dk-hero{position:relative;z-index:2;height:420px;border-radius:var(--r-full);background:var(--c-surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-64)}
.dk-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.dk-hero h1{position:relative;margin:0;font-size:64px;line-height:69px;letter-spacing:-3px;font-weight:600;
  color:var(--c-text);text-align:center}

/* ── поиск: белое поле 620×68, скругление 16 ── */
.dk-poisk{position:relative;width:620px;max-width:100%}
.dk-pole{display:flex;align-items:center;gap:var(--sp-12);height:68px;padding:var(--sp-12) var(--sp-16);
  background:#fff;border-radius:var(--sp-16);border:2px solid transparent}
.dk-pole:focus-within{border-color:var(--c-border)}
.dk-pole svg{flex:none}
.dk-pole input{flex:1;min-width:0;border:0;outline:none;background:none;font:inherit;font-size:16px;
  line-height:20px;letter-spacing:-.5px;color:var(--c-text)}
.dk-pole input::placeholder{color:var(--c-text3)}
.dk-nashlos{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:5;background:#fff;border-radius:var(--sp-16);
  box-shadow:0 12px 32px rgba(0,0,0,.12);padding:var(--sp-8);max-height:360px;overflow:auto;text-align:left}
.dk-nashlos[hidden]{display:none}
.dk-nashlos a{display:block;padding:var(--sp-12) var(--sp-16);border-radius:var(--r-sm)}
.dk-nashlos a:hover,.dk-nashlos a.on{background:var(--c-surface)}
.dk-nashlos b{display:block;font-size:16px;line-height:22px;font-weight:500;color:var(--c-text)}
.dk-nashlos span{display:block;font-size:14px;line-height:20px;letter-spacing:0;color:var(--c-text3)}
.dk-nashlos p{margin:0;padding:var(--sp-12) var(--sp-16);font-size:14px;line-height:20px;color:var(--c-text3)}

/* ── «Работа с giplab»: pt 72, заголовок H2, gap 64, карточки 443×565, gap 24.
   Заголовок карточки 32/36 (дизайнер 18.10, было 40/42), текстовая часть 200 ── */
.dk-razdely{display:flex;flex-direction:column;gap:var(--sp-64);padding:var(--sp-72) 0 var(--sp-120)}
.dk-razdely h2{text-align:center;color:var(--c-text)}
.dk-lenta{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--sp-24)) / 3);gap:var(--sp-24);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.dk-lenta::-webkit-scrollbar{display:none}
.dk-kart{scroll-snap-align:start;display:flex;flex-direction:column;color:inherit;text-decoration:none}
.dk-kart-txt{background:#f3f3f3;border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--sp-32);min-height:200px;
  display:flex;flex-direction:column;gap:var(--sp-16);transition:background .18s}
.dk-kart-txt h3{margin:0;max-width:320px;font-family:var(--font-h2);font-size:32px;line-height:36px;letter-spacing:-2px;
  font-weight:600;color:var(--c-text)}
.dk-kart-txt p{margin:0;max-width:320px;color:var(--c-text3)}
.dk-kart-pic{background:#f3f3f3;border-radius:0 0 var(--r-xl) var(--r-xl);aspect-ratio:443/359;overflow:hidden;
  transition:background .18s}
.dk-kart-pic img{width:100%;height:100%;object-fit:cover;transition:filter .18s}
.dk-kart:hover .dk-kart-txt,.dk-kart:hover .dk-kart-pic{background:#e9e9e9}
.dk-kart:hover .dk-kart-pic img{filter:brightness(.97)}
/* первая карточка — «С чего начать» — чёрная, текст белый */
.dk-kart.chern .dk-kart-txt,.dk-kart.chern .dk-kart-pic{background:#000}
.dk-kart.chern h3,.dk-kart.chern p{color:#fff}
.dk-kart.chern:hover .dk-kart-txt,.dk-kart.chern:hover .dk-kart-pic{background:#1a1a1a}
.dk-kart:focus-visible{outline:2px solid var(--c-primary);outline-offset:4px;border-radius:var(--r-xl)}
.dk-lenta-nav{display:flex;gap:var(--sp-4);justify-content:flex-end;margin-top:calc(-1 * var(--sp-40, 40px))}
.dk-lenta-nav[hidden]{display:none}
.dk-lenta-nav button{width:40px;height:40px;border-radius:10px;background:rgba(115,115,115,.1);display:flex;
  align-items:center;justify-content:center;color:var(--c-primary);transition:background .15s}
.dk-lenta-nav button:hover:not(:disabled){background:rgba(115,115,115,.24)}
.dk-lenta-nav button:disabled{opacity:.5;cursor:default}

/* ── страница раздела: оглавление 280 + 32 + статья 888, всего 1200 ── */
.dk-statya-wrap{padding:var(--sp-72) var(--sp-32) var(--sp-120)}
/* не ниже экрана: короткая статья не укорачивает страницу, и прокрутка
   не прыгает при переходе между статьями */
.dk-raskladka{max-width:1200px;margin:0 auto;display:flex;gap:var(--sp-32);align-items:flex-start;
  min-height:calc(100vh - 88px)}
/* оглавление стоит на своём месте и уходит вверх вместе со страницей —
   за прокруткой не едет (Салих 16.10) */
.dk-oglav{flex:none;width:280px;display:flex;flex-direction:column;gap:var(--sp-24)}
.dk-oglav > p{margin:0;padding:0 var(--sp-20);font-size:14px;line-height:20px;letter-spacing:0;font-weight:600;
  color:var(--c-text);text-transform:uppercase}
.dk-oglav ol{list-style:none;margin:0;padding:0}
.dk-oglav a{display:block;padding:var(--sp-12) var(--sp-20);border-radius:12px;font-size:14px;line-height:20px;
  letter-spacing:0;color:var(--c-text3);transition:background .15s,color .15s}
.dk-oglav a:hover{color:var(--c-text)}
.dk-oglav a.on{background:var(--c-surface);color:var(--c-primary)}
.dk-tekst{flex:1 1 0;min-width:0;max-width:888px;display:flex;flex-direction:column;gap:var(--sp-72)}
.dk-statya{display:flex;flex-direction:column;gap:var(--sp-24)}
.dk-zag{display:flex;flex-direction:column;gap:var(--sp-12)}
.dk-zag h2{margin:0;font-family:var(--font-h2);font-size:40px;line-height:42px;letter-spacing:-2px;font-weight:600;color:var(--c-text)}
.dk-zag span{font-size:14px;line-height:20px;letter-spacing:0;font-weight:600;color:#777}
.dk-statya p,.dk-statya li{margin:0;font-size:18px;line-height:28px;letter-spacing:-.45px;font-weight:400;color:var(--c-text2)}
.dk-statya ol,.dk-statya ul{margin:0;padding-left:var(--sp-24);display:flex;flex-direction:column;gap:var(--sp-12)}
/* выделено только то, что человек ищет на экране: кнопки, вкладки, поля */
.dk-statya b{font-weight:600;color:var(--c-text)}
/* снимок экрана с цифрами и подписи к цифрам под ним */
/* снимки экрана — в светло-серой рамке 6 px (дизайнер 17.10): белый экран
   приложения иначе сливается со страницей */
.dk-snimok{position:relative;margin:0;border:6px solid var(--c-surface);border-radius:24px;overflow:hidden;background:#fff}
.dk-snimok img{display:block;width:100%;height:auto}
.dk-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:#000;color:#fff;font-size:13px;line-height:1;font-weight:600;letter-spacing:0}   /* чёрные — Салих 16.10 */
.dk-metka{position:absolute;transform:translate(-50%,-50%);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.18);
  width:30px;height:30px}
.dk-statya ol.dk-metki{list-style:none;padding:0;gap:var(--sp-16)}
.dk-metki li{display:flex;gap:var(--sp-12);align-items:flex-start}
.dk-metki li > span:last-child{padding-top:0}
/* совет — обычный абзац: серая плашка выглядела как кнопки «назад/вперёд»
   под статьёй (Салих 17.10) */
.dk-statya .sovet{color:var(--c-text2)}
.dk-kartinka{margin:0;border:6px solid var(--c-surface);border-radius:24px;overflow:hidden;background:#fff}
.dk-kartinka img{width:100%;height:auto}
.dk-dalshe{display:grid;grid-template-columns:1fr 1fr;gap:25px}
/* «назад/вперёд» — таблетки, скругление 32 (дизайнер 18.10) */
.dk-dalshe a{display:flex;align-items:center;gap:10px;padding:var(--sp-12) var(--sp-20);border-radius:var(--r-xl);
  background:var(--c-surface);font-size:18px;line-height:28px;letter-spacing:-.45px;color:var(--c-primary);
  transition:background .15s}
.dk-dalshe a:hover{background:#ececec}
.dk-dalshe a span{flex:1;min-width:0}
.dk-dalshe a.vpered{grid-column:2}
.dk-dalshe svg{flex:none}

@media(max-width:1000px){
  .dk-lenta{grid-auto-columns:min(443px,82vw)}
  .dk-raskladka{flex-direction:column;gap:var(--sp-32)}
  .dk-oglav{width:100%}
}
@media(max-width:860px){
  .dk-hero{height:300px;border-radius:var(--r-xl);gap:var(--sp-32);padding:0 var(--sp-20)}
  .dk-hero h1{font-size:36px;line-height:40px;letter-spacing:-1.4px}
  .dk-kart-txt{min-height:0;padding:var(--sp-24)}
  .dk-kart-txt h3,.dk-zag h2{font-size:28px;line-height:32px;letter-spacing:-1px}
  .dk-statya-wrap{padding:var(--sp-48) var(--sp-20) var(--sp-64)}
  .dk-statya p,.dk-statya li{font-size:16px;line-height:26px}
  /* снимок на телефоне шириной ~350: цифры по 30 закрывали бы кнопки под ними */
  .dk-metka{width:18px;height:18px;font-size:10px;border-width:1.5px}
  .dk-dalshe{grid-template-columns:1fr}
  .dk-dalshe a.vpered{grid-column:auto}
}