/* ==========================================================================
   Пополнение Steam — page-blog.css: раскладка блога (home.php, category.php), статьи (single.php)
   и служебной страницы (page.php, page-metodika.php).
   Компоненты и переменные — общие (tokens.css, base.css, components.css). Здесь только то, чего нет в общих:
   заголовок страницы, обложка статьи, строка статьи, постраничная навигация, боковая колонка,
   колонка текста с оглавлением, схема «из чего состоит платёж», блок критерия.
   Mobile-first; медиазапросы только min-width: 768px и min-width: 1200px.
   ========================================================================== */

/* ---------- Заголовок страницы ---------- */
.sg-pagehead .sg-h1 { margin-top: var(--sg-space-4); max-width: 980px; }
.sg-pagehead .sg-lead { margin-top: var(--sg-space-12); color: var(--sg-muted); }
.sg-pagehead .sg-lead b { color: var(--sg-ink); }
.sg-pagehead .sg-disclosure { margin-top: var(--sg-space-12); }

/* Рубрики блога: чипы-ссылки, переносятся на новую строку */
.sg-rubrics { margin-top: var(--sg-space-16); }
.sg-rubrics .sg-chips { gap: 10px 8px; }
.sg-rubrics .sg-chip { text-decoration: none; }
.sg-rubrics .sg-chip:focus-visible { outline-offset: 6px; }

/* Автор, даты, время чтения под заголовком статьи и служебной страницы */
.sg-byline { display: grid; gap: var(--sg-space-12) var(--sg-space-32); margin-top: var(--sg-space-16); padding-block: var(--sg-space-12); border-block: var(--sg-border); }
.sg-byline > * { min-width: 0; }
.sg-byline__facts { display: flex; flex-wrap: wrap; gap: var(--sg-space-8) var(--sg-space-24); }
.sg-byline__facts > div { display: grid; gap: 2px; }
.sg-byline__facts dt { color: var(--sg-quiet); font-size: var(--sg-micro-size); line-height: var(--sg-micro-lh); }
.sg-byline__facts dd { font-size: var(--sg-ui-size); line-height: var(--sg-ui-lh); }

/* ---------- Обложка статьи: ячейка инвентаря со значком, типом материала и главной мыслью ---------- */
.sg-cover {
  position: relative; display: grid; grid-template-columns: var(--sg-icon-l) minmax(0, 1fr); gap: var(--sg-space-12);
  align-items: center; align-content: center; min-height: 76px; padding: var(--sg-space-12) var(--sg-space-32) var(--sg-space-12) var(--sg-space-12);
  overflow: hidden; color: var(--sg-ink);
}
.sg-cover > .sg-ico { color: var(--sg-accent); }
.sg-cover__txt { display: grid; gap: 2px; min-width: 0; }
.sg-cover__type { font: 400 var(--sg-pixel-xs)/var(--sg-pixel-xs-lh) var(--sg-font-pixel); color: var(--sg-accent); text-transform: uppercase; }
.sg-cover__line { font: 700 var(--sg-num-m)/var(--sg-num-m-lh) var(--sg-font-mono); }
/* ступенька из «пикселей» в углу: жёсткие смещения без размытия, как у рамки */
.sg-cover::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; background: var(--sg-frame);
  box-shadow: -8px 0 0 0 var(--sg-frame), -16px 0 0 0 var(--sg-frame), 0 -8px 0 0 var(--sg-frame), -8px -8px 0 0 var(--sg-frame), 0 -16px 0 0 var(--sg-frame);
}
.sg-cover--pink > .sg-ico, .sg-cover--pink .sg-cover__type { color: var(--sg-accent-2); }
.sg-post:hover .sg-cover { --sg-fc: var(--sg-accent); }
.sg-post:hover .sg-cover--pink { --sg-fc: var(--sg-accent-2); }

/* Обложка со схемой (первая статья листинга) */
.sg-cover--fig { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; padding: var(--sg-pad); }
.sg-cover--fig::after { content: none; }

/* Обложка в шапке статьи: три подписанные ячейки «из чего состоит цена» */
.sg-cover--hero { grid-template-columns: minmax(0, 1fr); gap: var(--sg-space-16); padding: var(--sg-pad); }
.sg-cover--hero::after { content: none; }
.sg-cover__head { display: grid; grid-template-columns: var(--sg-icon-l) minmax(0, 1fr); gap: var(--sg-space-12); align-items: center; }
.sg-cover__head > .sg-ico { color: var(--sg-accent); }
.sg-cover__cells { display: grid; gap: var(--sg-space-12); }
.sg-cover__cells > li { display: grid; grid-template-columns: var(--sg-icon-l) minmax(0, 1fr); gap: 2px var(--sg-space-12); align-items: center; padding: var(--sg-space-12); min-width: 0; }
.sg-cover__cells .sg-ico { grid-row: 1 / span 2; color: var(--sg-accent); }
.sg-cover__cells b { font-size: var(--sg-ui-size); line-height: var(--sg-ui-lh); }
.sg-cover__cells span { grid-column: 2; color: var(--sg-muted); font-size: var(--sg-micro-size); line-height: var(--sg-micro-lh); }

/* ---------- Картинки статей (17.10.2026): обложка-картинка записи и картинки в тексте ---------- */
.sg-cover--img { display: block; min-height: 0; padding: 0; aspect-ratio: 16 / 9; }
.sg-cover--img::after { content: none; }
.sg-cover--img > img, .sg-art-cover > img, .sg-art-fig__img > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg-art-cover { display: block; margin-bottom: var(--sg-space-16); aspect-ratio: 16 / 9; overflow: hidden; }
.sg-art-fig { display: grid; gap: var(--sg-space-8); margin: var(--sg-space-24) 0; min-width: 0; }
.sg-art-fig__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.sg-art-fig__cap { color: var(--sg-quiet); font-size: var(--sg-micro-size); line-height: var(--sg-micro-lh); }
.sg-post > .sg-cover--img { margin-bottom: var(--sg-space-8); }

/* ---------- Схема «из чего состоит платёж» ---------- */
.sg-split { display: grid; gap: var(--sg-space-12); min-width: 0; }
.sg-split__bar { display: flex; gap: 2px; height: 24px; padding: 2px; background: var(--sg-surface-2); }
.sg-split__seg { display: block; flex: 1 1 0; min-width: 6px; background: var(--sg-line-strong); }
.sg-split__legend { display: grid; gap: 6px; }
.sg-split__legend > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sg-space-12); font-size: var(--sg-ui-size); line-height: var(--sg-ui-lh); }
.sg-split__legend dt { display: flex; align-items: baseline; gap: var(--sg-space-8); min-width: 0; color: var(--sg-muted); }
.sg-split__sw { display: block; flex: none; width: 8px; height: 8px; background: var(--sg-line-strong); }
.sg-split__seg--fee, .sg-split__sw--fee { background: var(--sg-accent); }
.sg-split__seg--fix, .sg-split__sw--fix { background: var(--sg-warning); }
.sg-split__legend .sg-split__total { margin-top: 2px; padding-top: var(--sg-space-8); border-top: var(--sg-border); }
.sg-split__total dt { color: var(--sg-ink); font-weight: 700; }
.sg-split__total dd { color: var(--sg-accent); }

.sg-fig { display: grid; gap: var(--sg-space-12); padding: var(--sg-pad); }
.sg-fig__title { font-weight: 700; font-size: var(--sg-ui-size); line-height: var(--sg-ui-lh); }
.sg-fig__note { color: var(--sg-quiet); font-size: var(--sg-micro-size); line-height: var(--sg-micro-lh); }

/* ---------- Листинг блога ---------- */
.sg-blog { display: grid; gap: var(--sg-space-40); margin-top: var(--sg-space-24); }
.sg-blog > * { min-width: 0; }
.sg-blog__count { margin-bottom: var(--sg-space-12); color: var(--sg-muted); font-size: var(--sg-ui-size); line-height: var(--sg-ui-lh); }
.sg-blog__count b { color: var(--sg-ink); }
.sg-postlist { display: grid; gap: var(--sg-space-16); }
.sg-postlist > li { display: grid; min-width: 0; }

/* Строка статьи: обложка слева, текст справа; на телефоне — обложка сверху */
.sg-post--row { gap: var(--sg-space-8) var(--sg-space-20); }
.sg-post--row > .sg-cover { margin-bottom: 6px; }
.sg-post--lead { gap: var(--sg-space-12) var(--sg-space-24); }
.sg-post--lead .sg-post__title { font-size: var(--sg-h2-size); line-height: var(--sg-h2-lh); letter-spacing: var(--sg-head-track); }
.sg-post--lead .sg-post__excerpt { display: block; font-size: var(--sg-text-size); line-height: var(--sg-text-lh); }
.sg-post__more { position: relative; z-index: 1; justify-self: start; }
.sg-post--lead .sg-post__more { display: flex; justify-self: stretch; }

/* ---------- Постраничная навигация ---------- */
.sg-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sg-space-12) var(--sg-space-16); margin-top: var(--sg-space-24); padding-top: var(--sg-space-16); border-top: var(--sg-border); }
.sg-pager__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-8); }
.sg-pager__list .sg-btn { min-width: 40px; min-height: 40px; }
.sg-pager__cur, .sg-pager__cur:hover { --sg-fc: var(--sg-accent); background: var(--sg-accent-dim); color: var(--sg-ink); cursor: default; }
.sg-pager__info { color: var(--sg-muted); font-size: var(--sg-small-size); line-height: var(--sg-small-lh); }

/* ---------- Боковая колонка ---------- */
.sg-side { display: grid; gap: var(--sg-space-24); align-content: start; }
.sg-side > * { min-width: 0; }
.sg-sidebox { display: grid; gap: var(--sg-space-12); align-content: start; padding: var(--sg-pad); }
.sg-sidebox__sub { color: var(--sg-muted); font-size: var(--sg-small-size); line-height: var(--sg-small-lh); }
.sg-sidebox .sg-btn--block { margin-top: 2px; }

/* Короткий рейтинг: пять первых сервисов */
.sg-toprate { border-top: var(--sg-border); }
.sg-toprate__row { position: relative; display: grid; grid-template-columns: 20px var(--sg-logo-s) minmax(0, 1fr) auto; gap: var(--sg-space-8) var(--sg-space-12); align-items: center; padding: var(--sg-space-12) 2px; border-bottom: var(--sg-border); }
.sg-toprate__row:hover { background: var(--sg-surface-2); }
.sg-toprate__name { display: block; color: var(--sg-ink); font-weight: 700; font-size: 16px; line-height: 20px; text-decoration: none; }
.sg-toprate__name::after { content: ""; position: absolute; inset: 0; }
.sg-toprate__row:hover .sg-toprate__name { color: var(--sg-accent); }
.sg-toprate__com { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sg-space-8); margin-top: 4px; color: var(--sg-muted); font-size: var(--sg-micro-size); line-height: var(--sg-micro-lh); }
.sg-toprate__com .sg-num { color: var(--sg-ink); }
.sg-toprate__score { text-align: center; }
.sg-toprate__act { position: relative; z-index: 1; grid-column: 3 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sg-space-8); }

/* Рубрики с описанием */
.sg-rublist { border-top: var(--sg-border); }
.sg-rublist > li { border-bottom: var(--sg-border); }
.sg-rublist a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sg-space-12); padding: var(--sg-space-12) 2px; color: var(--sg-ink); text-decoration: none; }
.sg-rublist a:hover { background: var(--sg-surface-2); }
.sg-rublist a:hover b { color: var(--sg-accent); }
.sg-rublist b { font-size: 16px; line-height: 20px; }
.sg-rublist .sg-num { color: var(--sg-quiet); }
.sg-rublist span:last-child { grid-column: 1 / -1; color: var(--sg-muted); font-size: var(--sg-small-size); line-height: var(--sg-small-lh); }

/* ---------- Статья и служебная страница: колонка текста и оглавление ---------- */
.sg-doc { display: grid; gap: var(--sg-space-24); margin-top: var(--sg-space-20); }
.sg-doc > * { min-width: 0; }
.sg-doc__intro { display: grid; gap: var(--sg-space-20); }
.sg-doc__intro > * { min-width: 0; }
.sg-doc__side { display: grid; gap: var(--sg-space-16); align-content: start; }
.sg-doc__body { display: grid; gap: var(--sg-space-8); }
.sg-doc__body > * { min-width: 0; }
.sg-doc__body > :not(.sg-prose) + * { margin-top: var(--sg-space-16); }
.sg-doc__body > .sg-prose:not(:first-child) > h2:first-child { margin-top: var(--sg-space-16); }
.sg-doc__body > .sg-prose > :last-child { margin-bottom: var(--sg-space-8); }
.sg-doc h2[id], .sg-doc section[id] { scroll-margin-top: var(--sg-space-16); }
.sg-doc .sg-steps { grid-template-columns: minmax(0, 1fr); gap: var(--sg-space-16); }
.sg-doc .sg-note { max-width: none; }
.sg-doc .sg-cards { grid-template-columns: minmax(0, 1fr); gap: var(--sg-space-16); }
.sg-doc .sg-facts { margin-top: 2px; }

.sg-toc a { color: var(--sg-ink); text-decoration: none; }
.sg-toc a:hover { color: var(--sg-accent); text-decoration: underline; }
.sg-toc__go { display: flex; flex-wrap: wrap; gap: var(--sg-space-8) var(--sg-space-16); margin-top: var(--sg-space-12); padding-top: var(--sg-space-12); border-top: var(--sg-border); font-size: var(--sg-small-size); line-height: var(--sg-small-lh); }
.sg-toc__go a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--sg-accent); font-weight: 700; }

/* «Коротко» и списки во врезках */
.sg-brief { display: grid; gap: var(--sg-space-8); }
.sg-brief > li { position: relative; padding-left: 20px; }
.sg-brief > li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; background: var(--sg-accent); }
.sg-note p + p, .sg-note p + .sg-brief { margin-top: var(--sg-space-8); }

/* Компактная таблица в тексте: без минимальной ширины, не прокручивается на телефоне */
.sg-prose__table--fit table { min-width: 0; }
.sg-prose__table--fit th, .sg-prose__table--fit td { padding-inline: var(--sg-space-8); }
/* заголовок строки — обычная ячейка, а не шапка */
.sg-prose__table tbody th { background: transparent; border-top: var(--sg-border); color: var(--sg-ink); font-size: var(--sg-table-size); line-height: var(--sg-table-lh); font-weight: 700; }
.sg-prose__table tfoot td { border-top: var(--sg-border-strong); font-weight: 700; }
.sg-prose__table .sg-accent { color: var(--sg-accent); }

/* Заголовок блока внутри колонки текста */
.sg-doc__h, .sg-doc__body > .sg-doc__h { display: grid; gap: var(--sg-space-8); margin-top: var(--sg-space-32); }
.sg-doc__h .sg-section__sub { margin-top: 0; }
.sg-doc__h .sg-h2::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px; background: var(--sg-accent); vertical-align: middle; position: relative; top: -2px; }
.sg-doc__more { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; font-weight: 700; font-size: var(--sg-ui-size); line-height: var(--sg-ui-lh); }

/* Автор и проверка */
.sg-authorbox { display: grid; gap: var(--sg-space-16); padding: var(--sg-pad); }
.sg-authorbox__people { display: grid; gap: var(--sg-space-16); }
.sg-authorbox__src { padding-top: var(--sg-space-16); border-top: var(--sg-border); }
.sg-authorbox__src .sg-title { margin-bottom: var(--sg-space-8); }
.sg-srclist { display: grid; gap: 6px; font-size: var(--sg-small-size); line-height: var(--sg-small-lh); color: var(--sg-muted); }
.sg-srclist a { overflow-wrap: anywhere; }

/* Переход к рейтингу */
.sg-cta { display: grid; gap: var(--sg-space-12); padding: var(--sg-pad); }
.sg-cta > * { min-width: 0; }
.sg-cta p { color: var(--sg-muted); font-size: var(--sg-ui-size); line-height: 22px; max-width: var(--sg-prose); }
.sg-cta__act { display: grid; gap: var(--sg-space-12); }
.sg-cta__act .sg-btn { display: flex; }

/* ---------- Методика: веса и критерии ---------- */
.sg-weights { display: grid; gap: var(--sg-space-12); padding: var(--sg-pad); }
.sg-weights__bar { display: flex; gap: 2px; height: 32px; padding: 2px; background: var(--sg-sunken); }
.sg-weights__seg { display: grid; place-items: center; flex: 1 1 0; min-width: 0; background: var(--sg-accent); color: var(--sg-on-accent); }
.sg-weights__seg:nth-child(even) { background: var(--sg-accent-shade); }
.sg-weights__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-8) var(--sg-space-16); }
.sg-weights__legend a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sg-space-8); align-items: baseline; min-height: 32px; color: var(--sg-ink); text-decoration: none; font-size: var(--sg-ui-size); line-height: var(--sg-ui-lh); }
.sg-weights__legend a:hover { color: var(--sg-accent); text-decoration: underline; }
.sg-weights__legend .sg-num { color: var(--sg-accent); }

.sg-crit { display: grid; gap: var(--sg-space-12); padding: var(--sg-pad); }
.sg-crit > * { min-width: 0; }
.sg-crit__head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--sg-space-12); align-items: center; }
.sg-crit__w { color: var(--sg-accent); }
.sg-crit__field { margin-top: 2px; color: var(--sg-quiet); font-size: var(--sg-micro-size); line-height: var(--sg-micro-lh); }
.sg-crit__what { font-size: var(--sg-text-size); line-height: var(--sg-text-lh); }
.sg-crit__note { color: var(--sg-muted); font-size: var(--sg-small-size); line-height: var(--sg-small-lh); }
.sg-crit__tables { display: grid; gap: var(--sg-space-12); align-items: start; }
.sg-crit__tables > * { min-width: 0; }
.sg-crit .sg-prose__table { margin: 0; }
.sg-crit .sg-prose__table caption { padding: 10px 12px; background: var(--sg-surface-2); color: var(--sg-ink); font-weight: 700; font-size: var(--sg-th-size); line-height: var(--sg-th-lh); text-align: left; }
.sg-example { display: grid; gap: var(--sg-space-16); padding: var(--sg-pad); }
.sg-example > * { min-width: 0; }
.sg-example__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-8) var(--sg-space-12); }
.sg-example__head b { font-size: 17px; line-height: 22px; }

/* ==================== от 768px ==================== */
@media (min-width: 768px) {
  .sg-byline { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .sg-byline__facts { justify-content: flex-end; }

  .sg-post--row { grid-template-columns: 208px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; }
  .sg-post--row > .sg-cover { grid-column: 1; grid-row: 1 / -1; grid-template-columns: minmax(0, 1fr); align-content: space-between; min-height: 132px; margin-bottom: var(--sg-fw); padding: var(--sg-space-12) var(--sg-space-12) var(--sg-space-16); }
  .sg-post--row > :not(.sg-cover) { grid-column: 2; }
  .sg-post--lead { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr auto; }
  .sg-post--lead > .sg-cover { grid-column: 1; grid-row: 1 / -1; margin-bottom: var(--sg-fw); padding: var(--sg-pad-md); }
  .sg-post--lead > :not(.sg-cover) { grid-column: 2; }
  .sg-post--lead .sg-post__title { font-size: var(--sg-h2-size-md); line-height: var(--sg-h2-lh-md); }
  .sg-post--lead .sg-post__more { display: inline-flex; justify-self: start; align-self: end; }

  .sg-side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-20); }
  .sg-sidebox { padding: var(--sg-pad-md); }
  .sg-side__stack { display: grid; gap: var(--sg-space-20); align-content: start; }

  .sg-post--row > .sg-cover--img, .sg-post--lead > .sg-cover--img { min-height: 0; padding: 0; align-self: start; }
  .sg-cover--hero { padding: var(--sg-pad-md); }
  .sg-cover__cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sg-cover__cells > li { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .sg-cover__cells .sg-ico { grid-row: auto; margin-bottom: 6px; }
  .sg-cover__cells span { grid-column: auto; }

  .sg-fig, .sg-authorbox, .sg-cta, .sg-crit, .sg-weights, .sg-example { padding: var(--sg-pad-md); }
  .sg-doc .sg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-20); }
  .sg-authorbox__people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-cta__act { grid-template-columns: repeat(2, auto); justify-content: start; }
  .sg-weights__legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sg-crit__tables--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-prose__table--fit th, .sg-prose__table--fit td { padding-inline: var(--sg-cell-pad-x); }
}

/* ==================== от 1200px ==================== */
@media (min-width: 1200px) {
  .sg-blog { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sg-space-48); align-items: start; }
  .sg-side { grid-template-columns: minmax(0, 1fr); gap: var(--sg-space-24); }
  .sg-side__stack { gap: var(--sg-space-24); }
  .sg-sidebox { padding: var(--sg-pad-md); }
  .sg-post--row { grid-template-columns: 224px minmax(0, 1fr); }
  .sg-post--lead { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .sg-post--lead > .sg-cover { padding: var(--sg-pad-lg); }
  .sg-post--lead .sg-post__title { font-size: var(--sg-h2-size-lg); line-height: var(--sg-h2-lh-lg); }

  /* текст слева по линии логотипа, оглавление справа и едет вместе с прокруткой */
  .sg-doc { grid-template-columns: minmax(0, 760px) minmax(0, 360px); grid-template-areas: "intro side" "body side"; column-gap: var(--sg-space-64); row-gap: var(--sg-space-32); align-items: start; margin-top: var(--sg-space-24); }
  .sg-doc__intro { grid-area: intro; }
  .sg-doc__body { grid-area: body; }
  .sg-doc__side { grid-area: side; position: sticky; top: var(--sg-space-16); }
  .sg-doc .sg-card--row { grid-template-columns: var(--sg-logo-s) 180px minmax(0, 1fr) auto; }
  .sg-doc .sg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-doc .sg-card { padding: var(--sg-pad-md); }
  .sg-fig, .sg-authorbox, .sg-cta, .sg-crit, .sg-weights, .sg-example { padding: var(--sg-pad-lg); }
  .sg-cover--hero { padding: var(--sg-pad-lg); }
}

/* Картинка-обложка в ленте: без внутренних отступов на любой ширине (перебивает отступы плиточной обложки, 17.10.2026) */
.sg-post > .sg-cover.sg-cover--img { min-height: 0; padding: 0; align-self: start; }