/* «Все статьи» webnub.ru — итог показа 7б: вариант 2 «широкий каталог» (утверждён 09.11.2026).
 * Основа (шрифт Source Sans 3, цвета, шапка, подвал) — glavnaya/glavnaya_v3.css, классы g3-.
 * Здесь — содержимое страницы, классы vs-; размеры и раскладка — 07b_pokaz/V2.html, правила — 07_dizajn.md.
 * Компьютер: каталог 1100 px, абзацы не шире 720 px, темы плитками 3 + 3, статьи в две колонки по колонкам.
 * Без анимаций и плавной прокрутки. Точка перестройки — 900 px.
 */

/* Заголовки и текст */
.vs h1 { font-size: 28px; line-height: 1.18; font-weight: 600; margin: 0 0 14px; }
.vs h2 { font-size: 24px; line-height: 1.25; font-weight: 600; margin: 0 0 6px; }
.vs h3 { font-size: 20px; line-height: 1.3; font-weight: 600; margin: 28px 0 4px; color: #1d1f23; font-family: inherit; }
.vs p { margin: 0 0 14px; }
.vs-lid { font-size: 19px; line-height: 1.55; }
.vs .vs-lid { margin-bottom: 0; }

/* Колонка: на телефоне 720 px с полями 16 px, на компьютере — каталог 1100 px */
.vs-k { max-width: 752px; margin-left: auto; margin-right: auto; padding: 0 16px; }
.vs-verh { padding-top: 24px; }
.vs-temy { margin-top: 32px; }
.vs-rz { margin-top: 48px; }

/* Число статей: серое, не переносится по частям */
.vs-sch { font-size: 16px; color: #5b6270; font-weight: 400; white-space: nowrap; }

/* Оглавление тем — плитки с тонкой рамкой */
.vs-og { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.vs-og li { border: 1px solid #d5dae2; border-radius: 10px; padding: 14px 16px; }
.vs-og a { font-size: 20px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.vs-og a:visited { color: #154cb3; }
.vs-og a:hover { color: #0e3580; text-decoration: underline; }
.vs-pd { display: block; font-size: 17px; line-height: 1.5; color: #1d1f23; margin-top: 4px; }

/* Плитка темы и строка статьи нажимаются целиком: ссылка растянута на всю строку невидимым слоем —
 * цель для пальца не меньше 44 px, а вид как в утверждённом макете */
.vs-og li, .vs-sp li { position: relative; }
.vs-og a::after, .vs-sp a::after { content: ""; position: absolute; inset: 0; }

/* Курс — абзац и вторичная кнопка на подложке */
.vs-kurs { margin-top: 32px; background: #f5f7fa; border-radius: 12px; padding: 18px 16px 20px; }
.vs .vs-kurs p { margin: 0 0 10px; }
.vs a.vs-kn {
  display: flex; justify-content: center; align-items: center; text-align: center; width: 100%;
  min-height: 52px; padding: 8px 22px; border-radius: 10px; border: 2px solid #154cb3;
  background: #ffffff; color: #154cb3; font-family: inherit; font-size: 19px; font-weight: 600; line-height: 1.3;
  text-decoration: none;
}
.vs a.vs-kn:visited { color: #154cb3; }
.vs a.vs-kn:hover { color: #0e3580; border-color: #0e3580; }

/* Список статей: название ссылкой, дата строкой ниже, линии между строками */
.vs-sp { list-style: none; margin: 8px 0 0; padding: 0; }
.vs-sp li { padding: 10px 0; border-bottom: 1px solid #e8ebf0; break-inside: avoid; }
.vs-sp li:first-child { border-top: 1px solid #e8ebf0; }
.vs-sp a { display: block; font-size: 19px; line-height: 1.4; text-decoration: none; }
.vs-sp a:visited { color: #5a3d9a; }
.vs-sp a:hover { color: #0e3580; text-decoration: underline; }
.vs-dt { display: block; font-size: 16px; line-height: 1.4; color: #5b6270; margin-top: 2px; }

/* «Наверх, к темам» — словами, цель 44 px */
.vs .vs-nav { margin: 10px 0 0; font-size: 17px; font-weight: 600; }
.vs-nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* Внизу: линия и абзац со ссылкой */
.vs-niz { border-top: 1px solid #d5dae2; padding-top: 22px; }
.vs .vs-niz p { margin: 0; }
.vs-niz a:visited { color: #5a3d9a; }

@media (min-width: 900px) {
  .vs h1 { font-size: 38px; }
  .vs h2 { font-size: 28px; }
  .vs h3 { font-size: 21px; }
  .vs-lid { font-size: 21px; }
  .vs-verh { padding-top: 48px; }
  .vs-rz { margin-top: 64px; }
  .vs-k { max-width: 1132px; }
  .vs-lid, .vs .vs-kurs p, .vs-niz p { max-width: 720px; }
  .vs-og { grid-template-columns: 1fr 1fr 1fr; }
  .vs-kurs { padding: 22px 24px 24px; }
  .vs a.vs-kn { display: inline-flex; width: auto; }
  .vs-sp { column-count: 2; column-gap: 48px; border-top: 1px solid #e8ebf0; }
  .vs-sp li:first-child { border-top: 0; }
}

/* Невысокий ноутбук: оглавление тем видно без прокрутки */
@media (min-width: 900px) and (max-height: 700px) {
  body.g3.vs { font-size: 18px; }
  .vs-verh { padding-top: 32px; }
  .vs h1 { font-size: 34px; }
  .vs h2 { font-size: 26px; }
  .vs-lid { font-size: 20px; }
  .vs a.vs-kn { font-size: 18px; }
}