/* smm — блог (home.php, category.php), статья (single.php) и служебная страница (page.php, page-metodika.php).
   Раскладка трёх шаблонов и мелкие блоки, которых нет в components.css: обложка со словом, постраничная навигация,
   оглавление, топ рейтинга в боковой колонке, строка автора, формула. Остальное — общие компоненты. */

/* ---------- раскладка «контент + боковая колонка» (блог) ---------- */
.sn-blog__head h1 { max-width: 22ch; }
.sn-blog__rubrics { margin-top: var(--sn-s-4); }
.sn-blog__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sn-s-6); margin-top: var(--sn-s-5); }
.sn-blog__layout > * { min-width: 0; }
.sn-blog__aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sn-gap); align-content: start; }
.sn-blog__aside > * { min-width: 0; }
.sn-blog__list { align-items: stretch; }

/* ---------- раскладка «текст + оглавление» (статья и служебная страница) ---------- */
.sn-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sn-s-5); margin-top: var(--sn-s-5); }
.sn-doc > * { min-width: 0; }
.sn-doc__lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sn-s-4); }
.sn-doc__lead > * { min-width: 0; }
.sn-doc__body > * + * { margin-top: var(--sn-s-5); }
.sn-doc__side > * + * { margin-top: var(--sn-gap); }
.sn-doc__after { margin-top: var(--sn-section-gap); }
.sn-doc__after > * + * { margin-top: var(--sn-section-gap); }

.sn-article__head h1, .sn-page__head h1 { max-width: 24ch; }
.sn-article__head .sn-lead, .sn-page__head .sn-lead { margin-top: var(--sn-s-3); max-width: var(--sn-prose); }
.sn-article__rubric { display: inline-block; margin-bottom: var(--sn-s-3); }
a.sn-sticker { transition: background-color var(--sn-t); }
a.sn-sticker:hover { background: var(--sn-bg); }
.sn-article__table { margin-right: calc(-1 * var(--sn-panel-pad)); padding-right: var(--sn-panel-pad); }
.sn-article__table table { min-width: 620px; }
.sn-article__table td:first-child { font-weight: var(--sn-fw-semi); white-space: nowrap; }
.sn-article__source { font-size: var(--sn-fs-small); line-height: var(--sn-lh-small); color: var(--sn-text-muted); }
.sn-article__cards { align-items: stretch; }
.sn-article__cards .sn-card__name { font-weight: var(--sn-fw-bold); font-size: 17px; line-height: 22px; }
.sn-article__cards .sn-card__params dd { font-size: 14px; line-height: 20px; }

/* ---------- обложка: слово-стикер, значок типа, график для большой обложки ---------- */
.sn-cover { overflow: hidden; }
.sn-cover .sn-cover__word { left: 50%; top: 44%; bottom: auto; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; transform: translate(-50%, -50%) rotate(var(--sn-tilt-l)); }
.sn-cover .sn-cover__word--r { transform: translate(-50%, -50%) rotate(var(--sn-tilt-r)); }
.sn-cover__type { position: absolute; top: var(--sn-s-3); right: var(--sn-s-3); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--sn-surface); border: var(--sn-border); }
.sn-cover__type .sn-icon { width: var(--sn-icon-s); height: var(--sn-icon-s); }
.sn-post__meta { display: flex; flex-wrap: wrap; gap: 2px var(--sn-s-3); }
.sn-post__lead { font-size: 14px; line-height: 20px; color: var(--sn-text-muted); }

.sn-article__cover { height: 168px; border: var(--sn-border); }
.sn-article__cover .sn-cover__word { left: var(--sn-s-4); top: var(--sn-s-5); transform: rotate(var(--sn-tilt-l)); transform-origin: 0 50%; }
.sn-cover__chart { position: absolute; right: var(--sn-s-4); bottom: -2px; width: 150px; height: 96px; background: var(--sn-surface); border: var(--sn-border); }
.sn-cover__chart text { font: var(--sn-fw-bold) 20px/1 var(--sn-font-mono); fill: var(--sn-ink); }
.sn-cover__bar { stroke: var(--sn-ink); stroke-width: 2; }
.sn-cover__bar--1 { fill: var(--sn-bg); }
.sn-cover__bar--2 { fill: var(--sn-accent-2); }
.sn-cover__bar--3 { fill: var(--sn-accent); }

/* ---------- строка автора и дат ---------- */
.sn-byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sn-s-2) var(--sn-s-4); margin-top: var(--sn-s-4); font-size: 13px; line-height: 18px; }
.sn-byline__who { display: inline-flex; align-items: center; gap: var(--sn-s-2); font-weight: var(--sn-fw-semi); }
.sn-byline__who .sn-logo { width: 32px; height: 32px; }
.sn-byline__who .sn-logo__letter { font-size: 15px; }
.sn-byline__who a { text-decoration: underline var(--sn-accent) 2px; text-underline-offset: 3px; }
.sn-byline__who a:hover { background: var(--sn-accent); }
.sn-byline__item { display: inline-flex; align-items: center; gap: 6px; color: var(--sn-text-muted); }
.sn-byline__item .sn-icon { width: var(--sn-icon-s); height: var(--sn-icon-s); }
.sn-byline__item .sn-num { color: var(--sn-ink); font-size: 13px; }

/* ---------- оглавление ---------- */
.sn-toc { padding: var(--sn-s-4); background: var(--sn-surface-2); border: var(--sn-border); }
.sn-toc__title { font: var(--sn-fw-bold) var(--sn-fs-h4)/var(--sn-lh-h4) var(--sn-font-body); }
.sn-toc__list { counter-reset: sn-toc; margin-top: var(--sn-s-2); }
.sn-toc__list li { counter-increment: sn-toc; }
.sn-toc__list li + li { border-top: var(--sn-border-hair); }
.sn-toc__list a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sn-s-2); align-items: start; padding: 10px 0; font-size: 14px; line-height: 20px; transition: background-color var(--sn-t); }
.sn-toc__list a::before { content: counter(sn-toc); font: var(--sn-fw-bold) 13px/20px var(--sn-font-mono); color: var(--sn-text-muted); }
.sn-toc__list a:hover { background: var(--sn-bg-tint); }
.sn-toc__list a:hover span { text-decoration: underline var(--sn-accent) 2px; text-underline-offset: 3px; }
.sn-toc__list a[aria-current] { font-weight: var(--sn-fw-bold); }
.sn-toc__list a[aria-current]::before { color: var(--sn-ink); }
.sn-toc__list--plain a { grid-template-columns: minmax(0, 1fr); }
.sn-toc__list--plain a::before { content: none; }
.sn-toc .sn-btn { margin-top: var(--sn-s-3); }

/* ---------- топ рейтинга в боковой колонке ---------- */
.sn-toplist__sub { margin-top: var(--sn-s-1); font-size: var(--sn-fs-small); line-height: var(--sn-lh-small); color: var(--sn-text-muted); }
.sn-toplist__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sn-s-3); padding: var(--sn-s-4) 0; border-top: var(--sn-border-hair); }
.sn-toplist__item:first-child { border-top: var(--sn-border); }
.sn-toplist__head { display: flex; align-items: center; gap: var(--sn-s-3); min-width: 0; }
.sn-toplist__rank { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--sn-ink); color: var(--sn-on-ink); font: var(--sn-fw-bold) 13px/1 var(--sn-font-mono); }
.sn-toplist__id { flex: 1; min-width: 0; }
.sn-toplist__name { font-weight: var(--sn-fw-bold); font-size: 16px; line-height: 22px; text-decoration: underline var(--sn-accent) 2px; text-underline-offset: 3px; }
.sn-toplist__name:hover { background: var(--sn-accent); }
.sn-toplist__kind { display: block; font-size: 13px; line-height: 18px; color: var(--sn-text-muted); }
.sn-toplist__params { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sn-s-2); font-size: 14px; line-height: 20px; }
.sn-toplist__params dt { font: var(--sn-fw-semi) var(--sn-fs-micro)/var(--sn-lh-micro) var(--sn-font-body); color: var(--sn-text-muted); }
.sn-toplist__all { display: block; padding-top: var(--sn-s-4); border-top: var(--sn-border); }

/* ---------- рубрики в боковой колонке и список служебных страниц ---------- */
.sn-rubrics__list li + li { border-top: var(--sn-border-hair); }
.sn-rubrics__list a { display: block; padding: var(--sn-s-3) 0; transition: background-color var(--sn-t); }
.sn-rubrics__list a:hover { background: var(--sn-bg-tint); }
.sn-rubrics__list b { display: flex; justify-content: space-between; gap: var(--sn-s-3); font-size: 15px; line-height: 20px; }
.sn-rubrics__list a:hover b > span:first-child { text-decoration: underline var(--sn-accent) 2px; text-underline-offset: 3px; }
.sn-rubrics__list a > span { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--sn-text-muted); }

/* ---------- постраничная навигация ---------- */
.sn-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sn-s-3); margin-top: var(--sn-s-5); }
.sn-pager__pages { display: flex; align-items: center; }
.sn-pager__page { display: flex; align-items: center; justify-content: center; min-width: var(--sn-h-ctl); height: var(--sn-h-ctl); padding: 0 var(--sn-s-2); margin-left: -2px; background: var(--sn-surface); border: var(--sn-border); font: var(--sn-fw-bold) 15px/1 var(--sn-font-mono); transition: background-color var(--sn-t); }
.sn-pager__pages li:first-child .sn-pager__page { margin-left: 0; }
a.sn-pager__page:hover { background: var(--sn-accent-2); }
.sn-pager__page[aria-current] { background: var(--sn-ink); color: var(--sn-bg); }
.sn-pager__note { font-size: var(--sn-fs-small); line-height: var(--sn-lh-small); color: var(--sn-text-muted); }
.sn-pager .sn-btn .sn-icon { transform: rotate(-90deg); }

/* ---------- переход к рейтингу ---------- */
.sn-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sn-s-4); }
.sn-cta > * { min-width: 0; margin-top: 0; }
.sn-cta h2 { font: 400 var(--sn-fs-h3)/var(--sn-lh-h3) var(--sn-font-head); padding-top: var(--sn-s-2); }
.sn-cta p { max-width: var(--sn-prose); }
.sn-cta__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sn-s-2); }

/* ---------- блок автора ---------- */
.sn-author { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sn-s-3) var(--sn-s-4); align-items: start; }
.sn-author > * { margin-top: 0; }
.sn-author__name { display: block; font-size: 17px; line-height: 24px; }
.sn-author__role { display: block; font-size: 13px; line-height: 18px; color: var(--sn-text-muted); }
.sn-author__text { grid-column: 1 / -1; font-size: 14px; line-height: 20px; }
.sn-author__text p + p { margin-top: var(--sn-s-2); }

/* ---------- методика: формула, разбор оценки ---------- */
.sn-formula { padding: var(--sn-s-4); background: var(--sn-bg-tint); border: 2px dashed var(--sn-ink); font: var(--sn-fw-bold) 14px/22px var(--sn-font-mono); overflow-wrap: break-word; }
.sn-page__stats { margin-top: var(--sn-s-5); }
.sn-method--2 .sn-method__row { align-content: start; }
.sn-page__method > * + * { margin-top: var(--sn-s-4); }
.sn-page__example td:nth-child(n+2):nth-child(-n+4) { font-family: var(--sn-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sn-page__example tfoot td { border-top: var(--sn-border); font-weight: var(--sn-fw-bold); background: var(--sn-bg-tint); }
.sn-page__nav { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--sn-surface); border: var(--sn-border); }
.sn-page__nav a { display: flex; align-items: center; justify-content: space-between; gap: var(--sn-s-3); min-height: 48px; padding: var(--sn-s-2) var(--sn-s-4); border-top: var(--sn-border-hair); font-size: 15px; line-height: 20px; transition: background-color var(--sn-t); }
.sn-page__nav a:first-child { border-top: 0; }
.sn-page__nav a:hover { background: var(--sn-accent-2); }
.sn-page__nav a[aria-current] { background: var(--sn-ink); color: var(--sn-bg); font-weight: var(--sn-fw-semi); }
.sn-page__nav .sn-icon { width: var(--sn-icon-s); height: var(--sn-icon-s); transform: rotate(-90deg); }

@media (min-width: 768px) {
  .sn-blog__list .sn-post--wide .sn-cover__word { top: 46%; }
  .sn-article__cover { height: 240px; aspect-ratio: auto; }
  .sn-article__cover .sn-cover__word { left: var(--sn-s-6); top: var(--sn-s-7); }
  .sn-cover__chart { right: var(--sn-s-6); width: 300px; height: 190px; }
  .sn-cover__chart text { font-size: 13px; }
  .sn-article__table { margin-right: 0; padding-right: 0; }
  .sn-toc { padding: var(--sn-s-5); }
  .sn-toplist__params { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sn-s-2) var(--sn-s-4); }
  .sn-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--sn-s-6); }
  .sn-cta__actions { grid-template-columns: auto auto; }
  .sn-author__text { grid-column: 2; }
  .sn-page__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-page__nav a:nth-child(2) { border-top: 0; }
  .sn-page__nav a:nth-child(even) { border-left: var(--sn-border-hair); }
  .sn-formula { font-size: 16px; line-height: 26px; padding: var(--sn-s-5); }
}

@media (min-width: 1200px) {
  .sn-blog__layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .sn-blog__list .sn-post--wide { grid-column: span 2; }
  .sn-blog__list .sn-post--wide .sn-cover { flex-basis: 44%; }

  .sn-doc { grid-template-columns: minmax(0, 1fr) 320px; column-gap: var(--sn-s-7); align-items: start; }
  .sn-doc__lead { grid-column: 1; grid-row: 1; }
  .sn-doc__side { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: var(--sn-s-4); }
  .sn-doc__body { grid-column: 1; grid-row: 2; }
  .sn-doc__body > .sn-panel { padding-right: var(--sn-s-7); }
  .sn-doc--nolead .sn-doc__side { grid-row: 1; }
  .sn-doc--nolead .sn-doc__body { grid-row: 1; }
  .sn-article__cover { height: 280px; }
  .sn-toplist__params { grid-template-columns: minmax(0, 1fr); }
  .sn-page__nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sn-page__nav a { border-top: 0; border-left: var(--sn-border-hair); align-items: flex-start; min-height: 72px; padding: var(--sn-s-3) var(--sn-s-4); }
  .sn-page__nav a:nth-child(5n+1) { border-left: 0; }
  .sn-page__nav a:nth-child(n+6) { border-top: var(--sn-border-hair); }
  .sn-method--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-method--2 .sn-method__row:nth-child(3) { border-top: var(--sn-border-hair); padding-top: var(--sn-s-3); }
}

/* ---------- 17.10.2026: обложка-картинка вверху статьи и картинки в теле [sn_img] ---------- */
.sn-article__photo { margin: 0; min-width: 0; border: var(--sn-border); background: var(--sn-surface-2); }
.sn-article__photo .sn-cover__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.sn-art-fig { display: grid; gap: var(--sn-s-2); margin: var(--sn-s-5) 0; min-width: 0; }
.sn-art-fig__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: var(--sn-border); background: var(--sn-surface-2); }
.sn-art-fig__cap { color: var(--sn-text-muted); font-size: 14px; line-height: 1.45; }