/* ==========================================================================
   ege — блог, статья и служебные страницы: home.php, single.php, page.php (page-metodika.php).
   Раскладка этих трёх шаблонов и блоки, которых нет в components.css.

   .eg-doc ............ «текст + поля»: статья, методика, любая служебная страница
                        (__margin, __sticky, __toc, __aside, __body)
   .eg-cover .......... обложка статьи без картинки: клетка, линия полей, ключевая цифра или слово
                        (--num | --word | --vs | --steps | --icon) (__key, __cap, __opt, __or, __step)
   .eg-post--row ...... строка ленты блога с обложкой
   .eg-pager .......... постраничная навигация (__item, __info)
   .eg-side ........... блок в «полях» (__title, __tool)
   .eg-mini ........... короткая строка рейтинга для «полей» (__rank, __who, __name, __kind, __facts)
   .eg-weights ........ веса критериев полосками (__row, __name, __bar, __fill, __val)
   .eg-rule ........... правило одного критерия: баллы и отметки (__head, __w, __fields, __row, __m, __note)
   .eg-blog__* ........ раскладка листинга;  .eg-art__* — статьи;  .eg-page__* — служебной страницы
   Медиазапросы только min-width: 768px и min-width: 1200px.
   ========================================================================== */

/* ---------- Текст + поля ---------- */
.eg-doc { display: flex; flex-direction: column; gap: var(--eg-sp-24); margin-top: var(--eg-sp-24); }
.eg-doc > *, .eg-doc__body > * { min-width: 0; }
.eg-doc__margin, .eg-doc__sticky { display: contents; }
.eg-doc__toc { order: 1; }
.eg-doc__body { order: 2; max-width: none; }
.eg-doc__aside { order: 3; display: grid; gap: var(--eg-sp-24); }
.eg-doc__aside > * { min-width: 0; }
/* текст держит меру 70ch, таблицы и карточки занимают всю колонку */
.eg-doc__body > p, .eg-doc__body > ul, .eg-doc__body > ol, .eg-doc__body > .eg-callout, .eg-doc__body > .eg-note, .eg-doc__body > .eg-faq { max-width: var(--eg-measure); }
.eg-doc__body > * + * { margin-top: var(--eg-sp-16); }
.eg-doc__body > .eg-card, .eg-doc__body > .eg-diary, .eg-doc__body > .eg-scale, .eg-doc__body > .eg-facts,
.eg-doc__body > .eg-weights, .eg-doc__body > .eg-page__rules, .eg-doc__body > .eg-dtable-wrap { margin-top: var(--eg-sp-24); }
.eg-doc__body > .eg-dtable-note { margin-top: var(--eg-sp-8); }
.eg-doc__body > h2 { scroll-margin-top: var(--eg-sp-20); }
.eg-doc__body > .eg-card { max-width: var(--eg-measure); }
.eg-doc__body .eg-dtable td.eg-num { white-space: nowrap; }
.eg-doc__top { margin-top: var(--eg-sp-8); }
.eg-doc__body .eg-card li, .eg-doc__body .eg-callout--check li, .eg-doc__body .eg-scale li { padding-left: 0; margin-top: 0; }
.eg-doc__body .eg-callout--check li::before, .eg-doc__body .eg-scale li::before { content: none; }
.eg-doc__body .eg-callout--check li + li { margin-top: 0; }

/* ---------- Обложка статьи ---------- */
.eg-cover {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--eg-sp-4) var(--eg-sp-12);
  min-height: 60px; padding: var(--eg-sp-8) var(--eg-sp-32) var(--eg-sp-8) var(--eg-sp-12);
  background: var(--eg-bg) var(--eg-grid-img) right 20px top -1px / var(--eg-cell) var(--eg-cell); /* линия клетки попадает под линию полей */
  border: var(--eg-border-strong); border-radius: var(--eg-r-2); overflow: hidden;
  transition: border-color var(--eg-t);
}
.eg-cover::after { content: ""; position: absolute; top: 0; bottom: 0; right: 20px; border-left: var(--eg-margin-line); }
.eg-cover__key { font-size: 24px; line-height: 32px; font-weight: var(--eg-fw-semibold); white-space: nowrap; }
.eg-cover__key--s { font-size: 18px; }
.eg-cover--word .eg-cover__key { padding: 0 var(--eg-sp-4); background: var(--eg-surface); font-family: var(--eg-font-heading); font-size: 18px; }
.eg-cover__cap { padding: 0 var(--eg-sp-4); background: var(--eg-surface); font-size: var(--eg-fs-micro); line-height: var(--eg-lh-micro); font-weight: var(--eg-fw-medium); color: var(--eg-text-muted); }
.eg-cover__icon { width: 32px; height: 32px; padding: var(--eg-sp-4); background: var(--eg-surface); border: var(--eg-border-strong); border-radius: var(--eg-r-2); }
.eg-cover__opt { padding: 0 var(--eg-sp-4); background: var(--eg-surface); font-family: var(--eg-font-heading); font-weight: var(--eg-fw-semibold); font-size: 15px; line-height: 20px; }
.eg-cover__or { padding: 0 var(--eg-sp-4); background: var(--eg-surface); font-size: var(--eg-fs-micro); line-height: var(--eg-lh-micro); color: var(--eg-text-muted); }
.eg-cover__steps { display: inline-flex; gap: var(--eg-sp-4); }
.eg-cover__step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--eg-surface); border: var(--eg-bw-bold) solid var(--eg-line-ink); border-radius: var(--eg-r-1); font-size: var(--eg-fs-num-s); font-style: normal; }
.eg-cover__step.is-done { background: var(--eg-accent); }

/* ---------- Строка ленты с обложкой ---------- */
.eg-post--row { grid-template-columns: minmax(0, 1fr); gap: var(--eg-sp-12); }
.eg-post--row .eg-post__title { font-size: 18px; line-height: 24px; }
.eg-post--row .eg-post__desc { -webkit-line-clamp: 3; }
.eg-post--row:hover .eg-cover { border-color: var(--eg-line-ink); }
.eg-post__txt { display: grid; gap: var(--eg-sp-8); align-content: start; min-width: 0; }
.eg-post__time { white-space: nowrap; }

/* ---------- Листинг блога ---------- */
.eg-blog__lead { max-width: var(--eg-measure); }
.eg-blog__tabs { margin-bottom: var(--eg-sp-20); }
.eg-blog__featured { padding: var(--eg-sp-16); }
.eg-blog__featured .eg-post--lead { padding-bottom: 0; }
.eg-blog__more { justify-self: start; position: relative; z-index: 1; }
.eg-blog__grid { display: grid; gap: var(--eg-sp-40); }
.eg-blog__grid > * { min-width: 0; }
.eg-blog__list { border-bottom: var(--eg-border); }
.eg-blog__side { display: grid; gap: var(--eg-sp-32); align-content: start; }
.eg-blog__side > * { min-width: 0; }

/* ---------- Постраничная навигация ---------- */
.eg-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eg-sp-8); margin-top: var(--eg-sp-24); }
.eg-pager__list { display: flex; flex-wrap: wrap; gap: var(--eg-sp-8); }
.eg-pager__item {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--eg-sp-8);
  min-width: var(--eg-tap); height: var(--eg-tap); padding: 0 var(--eg-sp-12);
  border: var(--eg-border-strong); border-radius: var(--eg-r-2); background: var(--eg-surface);
  font-weight: var(--eg-fw-semibold); font-size: var(--eg-fs-ui); line-height: var(--eg-lh-ui); text-decoration: none; white-space: nowrap;
  transition: background-color var(--eg-t), border-color var(--eg-t);
}
a.eg-pager__item:hover { background: var(--eg-bg-2); border-color: var(--eg-line-ink); }
.eg-pager__item[aria-current] { background: var(--eg-accent); border: var(--eg-bw-bold) solid var(--eg-line-ink); }
.eg-pager__item[aria-disabled="true"] { color: var(--eg-text-faint); border-color: var(--eg-line); cursor: not-allowed; }
.eg-pager__info { flex-basis: 100%; font-size: var(--eg-fs-num-s); line-height: var(--eg-lh-micro); color: var(--eg-text-muted); }

/* ---------- Блок в «полях» ---------- */
.eg-side__title { padding-bottom: var(--eg-sp-8); border-bottom: var(--eg-rule); font-size: var(--eg-fs-h3); line-height: var(--eg-lh-h3); letter-spacing: 0; }
.eg-side__meta { margin-top: var(--eg-sp-8); font-size: var(--eg-fs-num-s); line-height: var(--eg-lh-micro); color: var(--eg-text-muted); }
.eg-side__list { display: grid; gap: 0 var(--eg-gap); margin-top: var(--eg-sp-4); }
.eg-side__foot { display: grid; gap: var(--eg-sp-12); margin-top: var(--eg-sp-12); padding-top: var(--eg-sp-12); border-top: var(--eg-border-ink); }
.eg-side__tools { display: grid; gap: var(--eg-sp-8); margin-top: var(--eg-sp-12); }
.eg-side__tool {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--eg-sp-2) var(--eg-sp-12);
  min-height: 60px; padding: var(--eg-sp-12); border: var(--eg-border-strong); border-radius: var(--eg-r-2); background: var(--eg-surface); text-decoration: none;
  transition: background-color var(--eg-t), border-color var(--eg-t);
}
.eg-side__tool:hover { background: var(--eg-bg-2); border-color: var(--eg-line-ink); }
.eg-side__tool b { font-size: var(--eg-fs-ui); line-height: var(--eg-lh-ui); }
.eg-side__tool span { grid-column: 2; font-size: 13px; line-height: 18px; color: var(--eg-text-muted); }
.eg-side__tool > .eg-icon { grid-row: 1 / span 2; }
.eg-side__tool > .eg-icon:last-child { grid-column: 3; }
.eg-side__tool:hover b { text-decoration: underline; }

/* ---------- Короткая строка рейтинга ---------- */
.eg-mini {
  position: relative; display: grid; align-items: center;
  grid-template-columns: 16px var(--eg-logo-s) minmax(0, 1fr) auto;
  grid-template-areas: "rank logo who mark" "facts facts facts facts" "acts acts acts acts";
  gap: var(--eg-sp-8); padding: var(--eg-sp-12) 0; border-bottom: var(--eg-border);
}
.eg-mini__rank { grid-area: rank; font-size: var(--eg-fs-num-s); color: var(--eg-text-muted); }
.eg-mini > .eg-logo { grid-area: logo; }
.eg-mini__who { grid-area: who; min-width: 0; }
.eg-mini__name { font-weight: var(--eg-fw-semibold); font-size: var(--eg-fs-ui); line-height: var(--eg-lh-ui); text-decoration: none; }
.eg-mini__name::after { content: ""; position: absolute; inset: 0; }
.eg-mini__name:hover { background: none; text-decoration: underline; }
.eg-mini:hover { background: var(--eg-bg-2); }
.eg-mini__kind { display: block; font-size: 13px; line-height: 18px; color: var(--eg-text-muted); }
.eg-mini > .eg-mark { grid-area: mark; padding-left: var(--eg-sp-8); }
.eg-mini__facts { grid-area: facts; font-size: var(--eg-fs-small); line-height: var(--eg-lh-small); }
.eg-mini__facts dt { display: inline; font-size: var(--eg-fs-micro); font-weight: var(--eg-fw-medium); color: var(--eg-text-muted); }
.eg-mini__facts dd { display: inline; }
.eg-mini__facts small { display: block; font-size: 13px; line-height: 18px; color: var(--eg-text-muted); }
.eg-mini > .eg-acts { grid-area: acts; position: relative; z-index: 1; }

/* ---------- Статья ---------- */
.eg-art__badge { margin-bottom: var(--eg-sp-12); }
.eg-art__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eg-sp-4) var(--eg-sp-16); margin-top: var(--eg-sp-16); font-size: 13px; line-height: 20px; color: var(--eg-text-muted); }
.eg-art__meta a { color: var(--eg-text); }
.eg-art__author { display: inline-flex; align-items: center; gap: var(--eg-sp-8); color: var(--eg-text); font-weight: var(--eg-fw-medium); }
.eg-art__meta .eg-num { font-size: var(--eg-fs-num-s); color: var(--eg-text); }
.eg-art__inset-cap { align-self: flex-start; }
.eg-art__why { font-size: var(--eg-fs-small); line-height: var(--eg-lh-small); }
.eg-art__after { margin-top: var(--eg-sp-16); }
.eg-art__sources { font-size: var(--eg-fs-small); line-height: var(--eg-lh-small); counter-reset: eg-src; }
.eg-art__sources li { break-inside: avoid; position: relative; padding: var(--eg-sp-8) 0 var(--eg-sp-8) var(--eg-sp-32); border-bottom: var(--eg-border); counter-increment: eg-src; }
.eg-art__sources li::before { content: counter(eg-src) "."; position: absolute; left: 0; font-family: var(--eg-font-mono); font-feature-settings: var(--eg-mono-features); font-weight: var(--eg-fw-medium); color: var(--eg-text-muted); }
.eg-art__sources span { display: block; color: var(--eg-text-muted); font-size: 13px; line-height: 18px; }
.eg-art__related { border-bottom: var(--eg-border); }
.eg-art__cta { display: grid; gap: var(--eg-sp-16); }
.eg-art__cta > * { min-width: 0; }
.eg-art__cta-acts { display: grid; gap: var(--eg-sp-8); align-content: center; }
.eg-art__cta .eg-btn { align-self: auto; margin-top: 0; }
.eg-art__cta h2 { font-size: var(--eg-fs-h3); line-height: var(--eg-lh-h3); letter-spacing: 0; }
.eg-art__cta h2 + p { margin-top: var(--eg-sp-8); }

/* ---------- Методика ---------- */
.eg-weights { display: grid; gap: var(--eg-sp-12); padding: var(--eg-sp-16); background: var(--eg-surface); border: var(--eg-rule); border-radius: var(--eg-r-2); }
.eg-weights__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar"; align-items: baseline; gap: var(--eg-sp-4) var(--eg-sp-12); }
.eg-weights__name { grid-area: name; font-weight: var(--eg-fw-semibold); font-size: var(--eg-fs-ui); line-height: var(--eg-lh-ui); }
.eg-weights__val { grid-area: val; font-size: var(--eg-fs-num); }
.eg-weights__bar { grid-area: bar; height: 12px; background: var(--eg-bg-3); border-radius: var(--eg-r-1); overflow: hidden; }
.eg-weights__fill { display: block; height: 100%; width: var(--eg-w, 0%); background: var(--eg-text); }
.eg-weights__sum { padding-top: var(--eg-sp-12); border-top: var(--eg-border-ink); font-size: var(--eg-fs-num-s); line-height: var(--eg-lh-micro); color: var(--eg-text-muted); }

.eg-page__rules { display: grid; gap: var(--eg-sp-16); align-items: start; }
.eg-page__rules > * { min-width: 0; }
.eg-rule { background: var(--eg-surface); border: var(--eg-border-strong); border-radius: var(--eg-r-2); font-size: var(--eg-fs-small); line-height: var(--eg-lh-small); }
.eg-rule__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--eg-sp-4) var(--eg-sp-16); padding: var(--eg-sp-12) var(--eg-sp-16); border-bottom: var(--eg-border-ink); }
.eg-rule__head h3 { font-size: var(--eg-fs-h4); line-height: var(--eg-lh-h4); }
.eg-rule__w { font-size: var(--eg-fs-num); white-space: nowrap; }
.eg-rule__fields { padding: var(--eg-sp-8) var(--eg-sp-16); border-bottom: var(--eg-border); font-size: 13px; line-height: 18px; color: var(--eg-text-muted); }
.eg-rule__fields b { color: var(--eg-text); font-weight: var(--eg-fw-medium); }
.eg-rule__cap { padding: var(--eg-sp-12) var(--eg-sp-16) var(--eg-sp-4); font-size: var(--eg-fs-micro); line-height: var(--eg-lh-micro); font-weight: var(--eg-fw-semibold); color: var(--eg-text-muted); }
.eg-rule__row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; gap: var(--eg-sp-12); padding: var(--eg-sp-8) var(--eg-sp-16); border-top: var(--eg-border); }
.eg-rule__cap + .eg-rule__row, .eg-rule__fields + .eg-rule__row { border-top: 0; }
.eg-rule__m { font-family: var(--eg-font-heading); font-weight: var(--eg-fw-bold); font-size: 20px; line-height: 20px; color: var(--eg-accent-2-deep); }
.eg-rule__p { font-size: var(--eg-fs-num); white-space: nowrap; }
.eg-rule__note { padding: var(--eg-sp-12) var(--eg-sp-16); border-top: var(--eg-border-ink); font-size: 13px; line-height: 18px; color: var(--eg-text-muted); }
.eg-page__report { display: grid; gap: var(--eg-sp-12); justify-items: start; }

/* ---------- 768px ---------- */
@media (min-width: 768px) {
  .eg-cover { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: var(--eg-sp-8); min-height: 128px; padding: var(--eg-sp-12) var(--eg-sp-32) var(--eg-sp-12) var(--eg-sp-12); }
  .eg-cover__key { font-size: 28px; }
  .eg-cover__key--s { font-size: 18px; }
  .eg-doc__top { margin-top: var(--eg-sp-16); }
  .eg-doc__body > .eg-card .eg-acts { grid-template-columns: repeat(2, minmax(0, 180px)); }
  .eg-cover--vs { gap: var(--eg-sp-2); }
  .eg-post--row { grid-template-columns: 128px minmax(0, 1fr); gap: 0 var(--eg-sp-16); align-items: start; }
  .eg-blog__posts.eg-posts { grid-template-columns: minmax(0, 1fr); }
  .eg-blog__featured { padding: var(--eg-sp-20); }
  .eg-blog__grid { gap: var(--eg-sp-60); }
  .eg-side__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eg-side__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eg-gap); }
  .eg-pager__item { min-width: var(--eg-control-h); height: var(--eg-control-h); }
  .eg-pager__info { flex-basis: auto; margin-left: auto; }
  .eg-art__cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--eg-sp-24); }
  .eg-art__cta-acts { min-width: 260px; }
  .eg-weights { padding: var(--eg-sp-20); }
  .eg-weights__row { grid-template-columns: 240px minmax(0, 1fr) 48px; grid-template-areas: "name bar val"; align-items: center; }
  .eg-weights__val { text-align: right; }
  .eg-doc { margin-top: var(--eg-sp-32); }
}

/* ---------- 1200px ---------- */
@media (min-width: 1200px) {
  .eg-doc { display: grid; grid-template-columns: minmax(0, 1fr) var(--eg-aside-w); gap: 0 var(--eg-sp-40); align-items: stretch; margin-top: var(--eg-sp-40); }
  .eg-doc__body { grid-column: 1; grid-row: 1; }
  /* «поля»: красная линия идёт на всю высоту текста, содержимое прилипает */
  .eg-doc__margin { display: block; grid-column: 2; grid-row: 1; padding-left: var(--eg-sp-20); border-left: var(--eg-margin-line); }
  .eg-doc__sticky { display: grid; gap: var(--eg-sp-24); position: sticky; top: var(--eg-sp-20); }
  .eg-doc__sticky > * { min-width: 0; }
  .eg-doc__toc > summary { pointer-events: none; }
  .eg-doc__toc > summary .eg-icon { display: none; }

  .eg-blog__grid { grid-template-columns: minmax(0, 1fr) var(--eg-aside-w); gap: 0 var(--eg-sp-40); align-items: start; }
  .eg-blog__side { align-self: stretch; padding-left: var(--eg-sp-20); border-left: var(--eg-margin-line); }
  .eg-blog__posts.eg-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--eg-sp-32); }
  .eg-side__list, .eg-side__tools { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .eg-side__tools { gap: var(--eg-sp-8); }
  .eg-art__related.eg-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eg-art__sources { column-count: 2; column-gap: var(--eg-sp-40); }
  .eg-art__related.eg-posts { gap: 0 var(--eg-sp-32); }
  .eg-page__rules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eg-gap); }
  .eg-page__rules > :first-child { grid-column: 1 / -1; }
}