/* Стили SEO-слоя. Наследуют токены лендинга (/css/site.css), добавляют только то,
   чего там нет: длинный текст, таблицы данных, блок красных флагов. */
.seo-main { max-width: 46rem; padding-bottom: 4rem; }
.seo-main h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.15; text-wrap: balance; margin: .6em 0 .4em; }
.seo-main h2 { font-size: 1.35rem; margin: 2em 0 .5em; text-wrap: balance; }
.seo-main h3 { font-size: 1.1rem; margin: 1.6em 0 .4em; }
.seo-main p, .seo-main li { line-height: 1.65; }
.seo-main ul, .seo-main ol { padding-left: 1.2rem; }
.seo-main li { margin: .35em 0; }
.lede { font-size: 1.1rem; line-height: 1.6; }

.crumbs { font-size: .85rem; opacity: .75; margin: 1rem 0 0; }
.crumbs a { text-decoration: none; }

table.facts, table.cmp, table.statetable { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; display: block; overflow-x: auto; }
table.facts th, table.facts td, table.cmp th, table.cmp td, table.statetable th, table.statetable td {
  text-align: left; padding: .5rem .7rem; border-bottom: 1px solid rgba(128,128,128,.25); vertical-align: top;
}
table.facts th[scope="row"], table.cmp th[scope="row"] { white-space: nowrap; opacity: .75; font-weight: 600; }
table caption { text-align: left; font-size: .8rem; opacity: .7; padding-bottom: .4rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.scale { letter-spacing: .1em; opacity: .8; }

.redflags { border: 1px solid rgba(200,60,40,.45); border-left-width: 3px; border-radius: 4px; padding: 1rem 1.2rem; margin: 2rem 0; }
.redflags h2 { margin-top: 0; font-size: 1.1rem; }
.redflags__urgent { font-size: .95rem; }

.disclaimer { border-top: 1px solid rgba(128,128,128,.3); margin-top: 3rem; padding-top: 1.2rem; font-size: .9rem; opacity: .9; }
.disclaimer__meta { font-size: .82rem; opacity: .75; }

.cta-block { border: 1px solid rgba(128,128,128,.3); border-radius: 6px; padding: 1.2rem 1.4rem; margin: 2.5rem 0; }
.cta-block h2 { margin-top: 0; }
.cta-row { margin-top: .8rem; }

.related { margin: 2rem 0; }
.related h2 { font-size: 1.05rem; }
.related ul, .chips, .cards { list-style: none; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { background: rgba(128,128,128,.12); border-radius: 3px; padding: .25rem .6rem; font-size: .9rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; }
.cards li { border: 1px solid rgba(128,128,128,.25); border-radius: 5px; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.statelist { list-style: none; padding: 0; columns: 2; }
.statelist li { break-inside: avoid; margin: .2em 0; }
.muted { opacity: .7; }
.small { font-size: .85rem; }
.faq details { border-bottom: 1px solid rgba(128,128,128,.25); padding: .6rem 0; }
.faq summary { cursor: pointer; font-weight: 600; }
@media (max-width: 640px) { .statelist { columns: 1; } }

/* Лендинг прячет ссылки шапки на мобильном (site.css:296) — для одностраничника это
   нормально, для SEO-страниц это потеря навигации. Возвращаем их компактной строкой
   только на .seo-page, лендинг не трогаем. */
@media (max-width: 720px) {
  .seo-page .site-header .wrap { flex-wrap: wrap; row-gap: .5rem; }
  .seo-page .site-header nav { flex-wrap: wrap; gap: .9rem; width: 100%; order: 3; }
  .seo-page .site-header nav a:not(.btn) { display: inline; font-size: .88rem; }
  .seo-page .site-header nav .btn { margin-left: auto; }
}
/* Подвал: ссылки в строку, а не в столбик на всю высоту экрана */
.seo-page .site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .88rem; }
.seo-page .site-footer .copy { font-size: .82rem; opacity: .7; margin-top: .6rem; }

/* --- Наследство лендинга, которое ломает статью ---------------------------
   На лендинге `section` — это ПОЛОСА СТРАНИЦЫ с padding: 56px 0. Внутри
   статьи те же отступы получал каждый <section>, включая FAQ, и между
   блоками появлялись дыры. Гасим только внутри контентной колонки. */
.seo-page .seo-main section { padding: 0; }

/* Плюс/минус в FAQ был на float:right и отрывался от текста на широкой строке */
.seo-page .faq summary { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; }
.seo-page .faq summary::after { float: none; flex: none; }
.seo-page .faq details { margin-bottom: 10px; }
.seo-page .faq > h2 { margin-top: 0; }
.seo-page .seo-main > article > .faq { margin-top: 2.4rem; }

/* Полоска активности в помесячной таблице страны: показывает форму сезона
   быстрее, чем колонка процентов. */
.bar { display: block; height: 8px; border-radius: 2px; background: currentColor; opacity: .28; width: var(--w, 0); min-width: 2px; }