/* ============================================================
   Материалы / статьи. Только токены из tokens.css.
   Mobile-first, та же эстетика, что у лендинга.
   ============================================================ */

/* Совместимость со старыми инлайн-переменными --s-* из гайдов 2026 */
:root {
  --s-1: var(--space-2);
  --s-2: var(--space-4);
  --s-3: var(--space-5);
  --s-4: var(--space-6);
  --s-5: var(--space-7);
}

.container-wide { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-5); }

/* ---------- Хлебные крошки ---------- */
.breadcrumbs {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-4) var(--space-5) 0;
  font-size: var(--fs-300);
  color: var(--color-muted);
}
.breadcrumbs a { color: var(--color-accent); }
.breadcrumbs [aria-current="page"] { color: var(--color-ink-soft); }

/* ---------- Шапка документа ---------- */
.doc-hero {
  padding-block: var(--space-7) var(--space-6);
  background: transparent;
}
.doc-hero > .eyebrow,
.doc-hero > h1,
.doc-hero > .lead,
.doc-hero > .doc-meta {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--space-5);
}
.doc-hero h1 {
  font-size: clamp(1.65rem, 6vw, 2.75rem);
  max-width: 28ch;
  margin-bottom: var(--space-5);
}
.doc-hero h1::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: var(--space-4);
  background: var(--color-brass);
  border-radius: 2px;
}
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-300);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
  margin: 0 0 var(--space-3);
  padding-inline: var(--space-5);
  max-width: var(--maxw);
  margin-inline: auto;
}
.lead {
  font-size: var(--fs-500);
  color: var(--color-ink-soft);
  max-width: 62ch;
}
.doc-meta {
  font-size: var(--fs-300);
  color: var(--color-muted);
  margin-top: var(--space-4);
}
.doc-meta a { color: var(--color-accent); }

/* ---------- Оглавление ---------- */
.toc {
  max-width: var(--maxw);
  margin: 0 auto var(--space-6);
  padding: 0 var(--space-5);
}
.toc h2 {
  font-size: var(--fs-600);
  margin-bottom: var(--space-4);
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr);
}
.toc a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}
.toc a:hover,
.toc a.active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  text-decoration: none;
}
.toc a .num {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-surface);
  display: grid;
  place-items: center;
  font-size: var(--fs-300);
  font-weight: 700;
}

/* ---------- Заголовок секции статьи ---------- */
.section-title {
  font-size: clamp(1.35rem, 4vw, 2rem);
  margin-bottom: var(--space-5);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent);
}

.section > .container > p,
.section > .container > ul,
.section > .container > .answer,
.section > .container > .honest {
  max-width: 70ch;
}

/* ---------- Списки ---------- */
.bullets,
.checks {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 70ch;
}
.bullets li,
.checks li {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) 2.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
}
.bullets li::before {
  content: "";
  position: absolute;
  left: var(--space-4);
  top: 1.15rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}
.checks li { display: flex; gap: var(--space-3); padding-left: var(--space-4); align-items: flex-start; }
.checks li .check {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--color-accent);
}
.checks li .check svg { width: 22px; height: 22px; display: block; }

/* ---------- Таблицы статей ---------- */
.table-wrap table,
.compare table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  background: var(--color-surface);
}
.table-wrap th,
.table-wrap td,
.compare th,
.compare td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-400);
  vertical-align: top;
}
.table-wrap thead th,
.compare thead th {
  background: var(--color-accent);
  color: var(--color-surface);
  font-family: var(--font-display);
  font-weight: 600;
}
.table-wrap tbody th,
.compare tbody td:first-child {
  font-weight: 600;
  color: var(--color-ink);
}

/* ---------- Выноски ---------- */
.honest,
.answer {
  max-width: 70ch;
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}
.answer {
  border-left: 4px solid var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.honest {
  border-left: 4px solid var(--color-brass);
  background: var(--color-brass-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.honest h3 { font-size: var(--fs-600); margin-bottom: var(--space-3); }
.honest p, .answer p { margin: 0; color: var(--color-ink); }
.answer p + p { margin-top: var(--space-3); }

/* ---------- Таймлайн ---------- */
.timeline {
  position: relative;
  max-width: 780px;
  margin: var(--space-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tl-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.tl-num {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-accent);
  color: var(--color-surface);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-500);
}
.tl-body {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.tl-body h3 { font-size: var(--fs-600); margin-bottom: var(--space-2); }
.tl-body p { margin: 0; color: var(--color-ink-soft); }

/* ---------- Плитки «Коротко» ---------- */
.tiles {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-4);
}
.tile {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.tile .icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-3);
}
.tile .icon svg { width: 22px; height: 22px; }
.tile p { margin: 0; color: var(--color-ink-soft); }

/* ---------- FAQ статей без svg-плюса ---------- */
.faq { max-width: none; }
.faq__item summary::after {
  content: "+";
  flex: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-accent);
  font-weight: 400;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:has(.faq__icon)::after { content: none; }

/* ---------- CTA / share / related ---------- */
.cta {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-tint);
  border-radius: var(--radius-md);
}
.cta p { color: var(--color-ink); margin-bottom: var(--space-5); max-width: 62ch; }
.cta .btn { background: var(--color-accent); color: var(--color-surface); }
.cta .btn:hover { background: var(--color-accent-strong); color: var(--color-surface); text-decoration: none; }

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  font-size: var(--fs-300);
  color: var(--color-muted);
}
.share__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-weight: 600;
}
.share__link:hover { background: var(--color-accent-soft); text-decoration: none; }

.related {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}
.related > div {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.related .rel-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-500);
  color: var(--color-ink);
  margin: 0;
}
.related .rel-meta {
  font-size: var(--fs-400);
  color: var(--color-ink-soft);
  margin: var(--space-2) 0 0;
}
.related > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  background: var(--color-accent);
  color: var(--color-surface);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
}
.related > a:hover { background: var(--color-accent-strong); color: var(--color-surface); }

/* Хаб материалов: сетка карточек */
main.materials,
.materials {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-8);
}
.materials .card h2 { font-size: var(--fs-600); }
.materials .card p { margin-bottom: var(--space-4); }
.materials .card .btn { margin-top: var(--space-2); }
.card__top { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.card__meta { font-size: var(--fs-300); color: var(--color-muted); }
.tag {
  display: inline-block;
  font-size: var(--fs-300);
  color: var(--color-brass);
  background: var(--color-brass-soft);
  border-radius: 6px;
  padding: 2px var(--space-3);
  font-weight: 600;
}

/* path-card (старые гайды) */
.path-card,
.solution {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.path-card h3,
.solution h3 { font-size: clamp(1.1rem, 2.5vw, 1.375rem); margin-bottom: var(--space-3); }
.card-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.note,
.price-cap {
  font-size: var(--fs-400);
  color: var(--color-ink-soft);
  max-width: 70ch;
}

/* Наверх */
.back-to-top {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  color: var(--color-accent);
  display: none;
  place-items: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 40;
}
.back-to-top.show { display: grid; }
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top:hover { background: var(--color-accent-soft); }

@media (min-width: 640px) {
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

@media (min-width: 960px) {
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 399px) {
  .eyebrow, .breadcrumbs, .doc-hero h1, section.hero h1 { padding-inline: var(--space-4); }
  .container-wide, .toc, .materials { padding-inline: var(--space-4); }
}