/* «ВПР по <предмету> N класс» (templates/public/vpr.html). Префикс vp-. */
.vp { --vp-soft: color-mix(in srgb, var(--sub) 10%, #fff); padding-bottom: 72px; }
.vp h1, .vp h2, .vp p, .vp ul, .vp ol { margin: 0; }
.vp ul, .vp ol { padding: 0; list-style: none; }

.vp-hd { display: grid; gap: 16px; max-width: 900px; padding: 8px 0 30px; }
.vp-hd h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; }
.vp-hd h1 em { font-style: normal; color: var(--sub-deep); }
.vp-lead { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.vp-years { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }
.vp-years a { padding: 7px 13px; border-radius: 999px; font-weight: 650; color: var(--sub-deep); background: var(--vp-soft); text-decoration: none; }

.vp-h2 { font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -.025em; margin-bottom: 16px; }
/* «Почему темы, а не варианты» — главная мысль страницы */
.vp-idea { padding: 26px; border-radius: 22px; background: var(--vp-soft); }
.vp-idea ol { counter-reset: vpi; display: grid; gap: 14px; }
.vp-idea li { counter-increment: vpi; position: relative; padding-left: 40px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.vp-idea li::before { content: counter(vpi); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: var(--sub); }
/* «Коротко о ВПР» — факты, внизу страницы */
.vp-facts { margin-top: 44px; padding: 26px; border-radius: 22px; background: var(--surface); box-shadow: 0 10px 24px -18px rgba(25, 30, 80, .35); }
.vp-facts ul { display: grid; gap: 12px; }
.vp-facts li { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.vp b { color: var(--ink); }

.vp-topics { margin-top: 44px; }
.vp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; counter-reset: vpt; }
.vp-list li { counter-increment: vpt; }
.vp-list a { position: relative; display: grid; gap: 4px; height: 100%; padding: 16px 18px 16px 52px; border-radius: 16px; background: var(--surface); box-shadow: 0 10px 24px -18px rgba(25, 30, 80, .35); text-decoration: none; color: inherit; }
.vp-list a::before { content: counter(vpt); position: absolute; left: 16px; top: 16px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: var(--sub-deep); background: var(--vp-soft); }
.vp-list small { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.vp-list span { margin-top: 4px; font-size: 14px; font-weight: 650; color: var(--sub-deep); }
.vp-list a:hover b { color: var(--sub-deep); }
.vp-more { margin-top: 16px; font-size: 16px; color: var(--ink-2); }

/* шпаргалка: правило каждой темы года */
.vp-cheat, .vp-mis { margin-top: 44px; }
.vp-sub { margin: -6px 0 16px; font-size: 16px; color: var(--muted); }
.vp-cl { columns: 2 360px; column-gap: 22px; counter-reset: vpc; }
.vp-cl li { break-inside: avoid; counter-increment: vpc; position: relative; margin-bottom: 14px; padding: 14px 16px 14px 48px; border-radius: 16px; background: var(--surface); box-shadow: 0 10px 24px -18px rgba(25, 30, 80, .35); }
.vp-cl li::before { content: counter(vpc); position: absolute; left: 14px; top: 14px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: var(--sub-deep); background: var(--vp-soft); }
.vp-cl a { font-weight: 700; color: var(--ink); text-decoration: none; }
.vp-cl a:hover { color: var(--sub-deep); }
.vp-cl p { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
/* частые ошибки */
.vp-mis ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.vp-mis li { padding: 16px 18px; border-radius: 16px; background: #fff7f4; border: 1px solid #f6d9cf; }
.vp-mis small a { font-size: 13.5px; font-weight: 700; color: #b8401f; text-decoration: none; }
.vp-mis p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.vp-how { margin-top: 44px; display: grid; gap: 16px; justify-items: start; max-width: 860px; }
.vp-how ol { counter-reset: vph; display: grid; gap: 12px; }
.vp-how li { counter-increment: vph; position: relative; padding-left: 40px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.vp-how li::before { content: counter(vph); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: var(--sub); }

@media (max-width: 760px) {
  .vp-lead { font-size: 16px; }
  .vp-facts, .vp-idea { padding: 20px 16px; }
  .vp-how .btn { width: 100%; justify-content: center; text-align: center; }
}