/* skrutka.ru — статьи в стиле «Нормативный» (template-parts/article/layout.php).
 * Подключается только на страницах статей с новым шаблоном. Эталон — /sk/tekst.php?id=68.
 * Правила для содержимого ограничены элементами без класса, чтобы не задевать встроенные
 * калькуляторы (.ohm, .calc) и прочие оформленные блоки. */

.article-layout {
  --blue: #006B8F;
  --blue-dark: #00566F;
  --graphite: #17212B;
  --muted: #64717C;
  --line: #DCE2E6;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: start;
}

/* Колонка статьи */
.entry--v2 { padding: 22px 30px 30px; }
.crumbs ol { display: flex; flex-wrap: wrap; list-style: none; font-size: 13px; line-height: 1.5; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin: 0 7px; color: #A3AEB6; }
.crumbs a { color: var(--blue); }
.crumbs [aria-current] { color: var(--muted); }

.entry--v2 .entry__head { margin: 14px 0 22px; padding-bottom: 14px; border-bottom: 2px solid var(--graphite); }
.entry--v2 .entry__title { max-width: none; font-size: 30px; line-height: 1.2; letter-spacing: -.015em; color: var(--graphite); }
.entry--v2 .entry__meta { margin-top: 8px; font-size: 13px; color: var(--muted); }

.entry--v2 .entry__content { max-width: none; font-size: 16px; line-height: 1.72; color: #27313B; }
.entry--v2 .entry__content p:not([class]) { margin: 0 0 1em; }
.entry--v2 .entry__content h2:not([class]) {
  margin: 32px 0 15px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--graphite);
  scroll-margin-top: 16px;
}
.entry--v2 .entry__content h3:not([class]) { margin: 24px 0 10px; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--graphite); scroll-margin-top: 16px; }
.entry--v2 .entry__content a { color: var(--blue); }
/* Встроенные калькуляторы сохраняют свою плотность */
.entry--v2 .entry__content .ohm, .entry--v2 .entry__content .calc { line-height: 1.5; }

/* Изображения: файл не меняется, пропорции исходные, ширина не больше колонки.
   Крупные (от 200 px, класс legacy-img--wide из шаблона) — отдельным блоком по центру;
   мелкие (символы, значки) остаются в строке текста, без растяжения. */
.entry--v2 .entry__content img.legacy-img { max-width: 100%; height: auto; }
.entry--v2 .entry__content img.legacy-img--wide { display: block; margin: 18px auto; }
.entry--v2 .entry__content a.img-zoom { display: block; width: fit-content; max-width: 100%; margin: 18px auto; }
.entry--v2 .entry__content a.img-zoom img.legacy-img { margin: 0; }
.entry--v2 .entry__content figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }
/* Таблицы старых статей — как раньше: прокрутка внутри рамки, символы в ячейках не трогаются */
.entry--v2 .entry__content .legacy-table img.legacy-img { display: inline-block; margin: 0; }

/* Материалы по теме под статьёй: три карточки, вся карточка — ссылка */
.entry-related { margin-top: 30px; padding-top: 14px; border-top: 2px solid var(--graphite); }
.entry-related__title { font-size: 17px; color: var(--graphite); }
.rel-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 12px; list-style: none; }
.rel-card__link { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); background: #FFFFFF; color: var(--blue); }
.rel-card__link:hover { border-color: var(--blue); text-decoration: none; }
.rel-card__link:hover .rel-card__title { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 2px; }
.rel-card__img { display: block; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; padding: 6px; border-bottom: 1px solid var(--line); background: #FFFFFF; }
.rel-card__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rel-card__title { display: block; padding: 9px 11px 11px; font-size: 14px; font-weight: 700; line-height: 1.35; }

/* Боковая колонка; на длинных статьях закрепляется, не выходя за высоту окна */
.article-aside__inner { display: grid; gap: 18px; }
.article-layout--long .article-aside { align-self: stretch; }
.article-layout--long .article-aside__inner { position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow-y: auto; }
.aside-box { padding: 18px 18px 14px; border: 1px solid var(--line); background: #FFFFFF; }
.aside-box__title { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--graphite); font-size: 15px; color: var(--graphite); }
.toc, .link-list { list-style: none; font-size: 14px; line-height: 1.4; }
.toc__item a, .link-list a { display: block; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--blue); }
.toc__item:last-child a, .link-list li:last-child a { border-bottom: 0; }
.toc__item a:hover, .link-list a:hover { color: var(--blue-dark); }
.toc__item--h3 a { padding-left: 14px; font-size: 13px; }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .article-layout--long .article-aside__inner { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 600px) {
  .entry--v2 { padding: 18px 16px 22px; }
  .entry--v2 .entry__title { font-size: 26px; }
  .entry--v2 .entry__content { font-size: 15px; line-height: 1.7; }
  .entry--v2 .entry__content h2:not([class]) { margin-top: 28px; font-size: 20px; }
  .entry--v2 .entry__content h3:not([class]) { font-size: 16px; }
  .rel-cards { grid-template-columns: minmax(0, 1fr); }
  .rel-card__img { aspect-ratio: 16 / 9; }
}

/* Комментарии под статьёй: архив старого сайта, только чтение (template-parts/article/comments.php) */
.entry-comments { margin-top: 30px; padding-top: 14px; border-top: 2px solid var(--section-accent, var(--graphite)); }
.entry-comments__title { font-size: 17px; color: var(--ds-text, var(--graphite)); }
.entry-comments__count { display: inline-block; min-width: 26px; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--section-accent-light, #EEF2F6); color: var(--section-accent-text, var(--graphite)); font-size: 13px; line-height: 20px; text-align: center; vertical-align: 2px; }
.entry-comments__note { margin-top: 4px; font-size: 13px; color: var(--ds-muted, var(--muted)); }
.comment-list { list-style: none; margin: 14px 0 0; padding: 0; }
.comment-item { padding: 14px 0; border-top: 1px solid var(--ds-border, var(--line)); }
.comment-item:first-child { border-top: 0; padding-top: 4px; }
.comment-item--admin { margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-left: 3px solid var(--section-accent, var(--blue)); background: var(--section-accent-light, #F5F8FB); border-radius: 0 var(--ds-radius-sm, 8px) var(--ds-radius-sm, 8px) 0; }
.comment-item--admin + .comment-item { border-top-color: transparent; }
.comment-item__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; line-height: 1.4; }
.comment-item__author { font-weight: 600; color: var(--ds-text, var(--graphite)); overflow-wrap: anywhere; }
.comment-item__date { font-size: 13px; color: var(--ds-muted, var(--muted)); }
.comment-item__text { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--ds-text, var(--text)); overflow-wrap: break-word; }
.comment-item__text p { margin: 0 0 8px; }
.comment-item__text p:last-child { margin-bottom: 0; }
.comment-item__text blockquote { margin: 6px 0 8px; padding: 6px 12px; border-left: 3px solid var(--ds-border-strong, var(--line)); background: #F6F8FA; color: #3F5267; font-size: 14px; }
.comment-item__text a { color: var(--section-accent-text, var(--blue)); }
.comment-item__text .comment-img { display: block; max-width: 100%; height: auto; margin: 8px 0; border: 1px solid var(--ds-border, var(--line)); background: #FFFFFF; }
.comment-item__text .comment-smile { display: inline; width: auto; height: 1.1em; vertical-align: -0.15em; }
.comment-item__noimg { display: inline-block; margin: 6px 0; padding: 4px 10px; border: 1px dashed var(--ds-border-strong, var(--line)); border-radius: 6px; font-size: 13px; color: var(--ds-muted, var(--muted)); }
@media (max-width: 600px) {
  .comment-item--admin { margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
}