/* Раздел poradnik: статьи и их список. Общий styl.css не трогаем: он
   общий для всего сайта и его правит другой исполнитель. Здесь только то,
   чего у сайта не было: длинный текст с заголовками, таблицами и списком
   источников. Цвета и шрифты берутся из переменных styl.css. */

.hero--artykul{padding-bottom:52px}
.hero--artykul h1{max-width:24ch;font-size:clamp(2rem,3.6vw,3.1rem)}
.hero--artykul .hero__lede{max-width:62ch}
.okruszki{font-size:.86rem;color:var(--on-slab-soft)}
.okruszki a{color:#c8ccd2;text-underline-offset:3px}
.okruszki a:hover{color:var(--jasny)}
.okruszki + .eyebrow{margin-top:18px}
.artykul__autor{margin-top:16px;font-size:.9rem;color:var(--on-slab-soft)}

.band--artykul{padding:56px 0 72px}
.artykul{max-width:740px}
.artykul > h2{font-size:clamp(1.4rem,2.3vw,1.8rem);margin-top:2.1em;scroll-margin-top:96px}
.artykul > h2:first-child{margin-top:0}
.artykul > p,.artykul > ul,.artykul > ol,.artykul > .tabela,.artykul > .qa,.artykul > .nota{margin-top:1em}
.artykul > h2 + p,.artykul > h2 + ul,.artykul > h2 + ol,.artykul > h2 + .tabela,.artykul > h2 + .qa{margin-top:.8em}
.artykul p,.artykul li{line-height:1.7}
.artykul ul,.artykul ol{padding-left:1.35em;margin-bottom:0}
.artykul li + li{margin-top:.45em}
.artykul a{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.artykul a:hover{color:var(--accent);text-decoration-thickness:2px}

/* Таблица: на телефоне прокручивается внутри своей рамки, страница не
   уезжает вбок. */
.tabela{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.tabela table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.tabela th,.tabela td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tabela tr:last-child td{border-bottom:0}
.tabela th{background:var(--surface);font-weight:700;color:var(--ink)}
.tabela td{color:var(--ink-soft)}
.tabela td:first-child{color:var(--ink);font-weight:600}

.artykul .qa{gap:10px}
.artykul .qa details p{line-height:1.65}
.zrodla{font-size:.93rem;color:var(--ink-soft)}
.zrodla a{overflow-wrap:anywhere}

.band--cta .btn{margin-top:22px}

/* Список статей на странице раздела */
.wpisy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
.wpis{display:block;text-decoration:none;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;transition:var(--t)}
.wpis:hover{border-color:var(--accent-border);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.wpis:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wpis__dla{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.wpis h2{font-size:1.3rem;margin-top:8px;line-height:1.2}
.wpis p{margin-top:10px;color:var(--ink-soft);font-size:.97rem;line-height:1.6}
.wpis__go{display:inline-block;margin-top:14px;font-weight:700;color:var(--accent-hover)}
/* Нечётное число статей: последняя карточка на всю ширину, чтобы в сетке
   не было дыры. Статьи из панели клиент добавляет сам, их число любое. */
.wpisy > .wpis:last-child:nth-child(odd){grid-column:1/-1}

@media(max-width:760px){
  .hero--artykul{padding-bottom:40px}
  .band--artykul{padding:40px 0 56px}
  .wpisy{grid-template-columns:minmax(0,1fr)}
  .artykul > h2{scroll-margin-top:150px}
}