/* ============ Тема Hodlometer для /learn/ ============
   Порядок загрузки: tokens.css (токены из app.css) → components.css (общий с дашбордом
   слой: каркас, шапка, подвал, карточка, кнопка, чип, таблица, лонгрид, фокус) → этот файл.
   Оба первых генерирует wp-theme/sync.mjs — руками не редактировать.

   Здесь только то, чего нет в дашборде: лента, статья с оглавлением, блоки Gutenberg,
   дисклеймер, карточка связанного инструмента, пагинация, поиск.
   Цвета берутся ТОЛЬКО из токенов: хардкод сломает тёмную тему, новые значения
   добавлять токенами в assets/css/app.css.
   Брейкпоинты те же, что в дашборде: 1000 / 860 / 640 / 430. */

/* --side (колонка оглавления) и scroll-behavior переехали в общий слой: раскладка
   «колонка чтения + боковик» теперь одна на оба движка (components.css). */

/* ---------- Главная: hero + лента ---------- */
/* верхний отступ задаёт main (--space-page-top) — как и в KURS */
.hero { padding: 0 0 var(--space-6); max-width: var(--measure-prose); }
.hero-title { margin: 0 0 var(--space-3); font-weight: 700; }
.hero-sub { font-size: var(--fs-prose); color: var(--ink2); margin: 0; }

/* ---------- Хлебные крошки ----------
   Разметку и BreadcrumbList-schema печатает Rank Math (hodl_breadcrumbs() в inc/template-tags.php):
   <nav class="rank-math-breadcrumb"> с плоским <p> внутри. Классы даёт плагин, свои сюда
   не добавить — стилизуем то, что он выводит. */
.rank-math-breadcrumb { padding: 0 0 var(--space-2); max-width: var(--measure-prose); }
.rank-math-breadcrumb p {
  margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5;
}
.rank-math-breadcrumb a { color: var(--ink2); text-decoration: none; }
.rank-math-breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
/* Контракт B6 называет цветом разделителя --line, но измерение даёт 1.15:1 к фону —
   на экране «/» просто пропадает и цепочка читается одной строкой. Берём --muted:
   тише текста крошек и при этом видимо (метод D1 — измерять, а не оценивать на глаз). */
.rank-math-breadcrumb .separator { padding: 0 var(--space-1); color: var(--muted); }
/* последний элемент — текущая страница, не ссылка */
.rank-math-breadcrumb .last { color: var(--muted); }

.page-head { padding: 0 0 var(--space-6); max-width: var(--measure-prose); }
.page-title { margin: 0 0 var(--space-2); }
/* запрос в кавычках и цветом текста: брендовый цвет читался ссылкой */
.page-title span { color: var(--ink); }
.page-sub { color: var(--ink2); margin: 0; }

/* три колонки на широком экране и общий с KURS gutter из токена: лента шла в две
   колонки с шагом 18px против сетки дашборда в три с шагом 16 */
.feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }

/* ---------- Пагинация ---------- */
.pagination { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-7); flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-width: var(--control-h); height: var(--control-h); padding: 0 var(--space-3); justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card);
  color: var(--ink2); font-weight: 600; font-size: var(--fs-base); font-variant-numeric: tabular-nums;
}
.pagination .page-numbers:hover { border-color: var(--muted); color: var(--ink); text-decoration: none; }
.pagination .page-numbers.current { background: var(--brand-bg); border-color: transparent; color: var(--brand-ink); }
.pagination .dots { border-color: transparent; background: none; }

/* ---------- Статья ---------- */
.article { padding-bottom: var(--space-2); }
.article-head { max-width: var(--measure-prose); margin: 0 0 var(--space-6); }
.article-title { margin: var(--space-2) 0 var(--space-4); font-weight: 700; }
.article-cover { margin: 0 0 var(--space-6); }
.article-cover img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); display: block; }

/* .article-layout, .article-side и .toc* — в общем слое (components.css): те же
   раскладка и оглавление теперь работают на длинных страницах KURS. Копировать их
   сюда нельзя — правило B8 запрещает переопределять общий слой копией правила. */

/* ---------- Блоки Gutenberg внутри .prose ----------
   Кегль, колонка чтения, заголовки, абзацы, списки, ссылки и таблицы — в components.css. */
.prose > * { margin-block: 0 var(--space-5); }
.prose > *:last-child { margin-bottom: 0; }
.prose strong { font-weight: 700; }

.prose hr, .prose .wp-block-separator {
  border: 0; border-top: 1px solid var(--line); margin: var(--space-7) 0; height: 0; opacity: 1;
}

.prose blockquote, .prose .wp-block-quote {
  margin: var(--space-6) 0; padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: 1px solid var(--line);
  color: var(--ink2); font-size: var(--fs-prose);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite, .prose .wp-block-quote cite {
  display: block; margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--ink2); font-style: normal;
}

.prose code, .prose .wp-block-code code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--neutral-bg); border-radius: var(--radius-xs); padding: 2px var(--space-2);
}
.prose pre, .prose .wp-block-code {
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: var(--space-4); overflow-x: auto;
  font-size: var(--fs-sm); line-height: 1.55; margin: 0 0 var(--space-6);
}
.prose pre code { background: none; padding: 0; font-size: inherit; }

.prose figure { margin: var(--space-6) 0; }
.prose figure img { border-radius: var(--radius-s); border: 1px solid var(--line); display: block; }
.prose figcaption, .prose .wp-element-caption {
  margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--ink2); text-align: left;
}

/* горизонтальный скролл таблицы на узких экранах; оформление — общее (.prose table) */
.prose .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table caption { caption-side: bottom; padding-top: var(--space-2); font-size: var(--fs-sm); color: var(--ink2); }

.prose .wp-block-image { margin: var(--space-6) 0; }
.prose .wp-block-image img { border-radius: var(--radius-s); }

/* Полоса зон: скругляем только внешние углы. rx скруглил бы и внутренние — там появился бы
   зазор со следующим сегментом, поэтому радиус даёт clip-path, а внутренняя сторона
   уводится за пределы прямоугольника отрицательным отступом inset(). */
.hodl-chart rect:first-of-type { rx: 0; clip-path: inset(0 -8px 0 0 round 6px); }
.hodl-chart rect:last-of-type  { rx: 0; clip-path: inset(0 0 0 -8px round 6px); }

/* Ширина «wide/full» ограничена колонкой чтения — вылет за неё ломает сетку с оглавлением */
.prose .alignwide, .prose .alignfull { max-width: 100%; margin-inline: 0; }

/* ---------- Дисклеймер ---------- */
.disclaimer {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin: var(--space-7) 0 0; padding: var(--space-4);
  /* текст --ink, а не --warn: amber 11 на amber 3 даёт 4.24:1 — ниже порога AA для 13.5px */
  background: var(--warn-bg); color: var(--ink);
  border-radius: var(--radius-s);
  font-size: var(--fs-sm); line-height: 1.55;
  max-width: var(--measure-prose);
}
.disclaimer .ic { flex: none; margin-top: 2px; color: var(--warn); }
.disclaimer b { font-weight: 700; }

/* ---------- Связанный инструмент ---------- */
.tool-card {
  display: flex; align-items: center; gap: var(--space-4);
  margin: var(--space-7) 0 0; padding: var(--pad-card);
  background: var(--brand-bg); border: 1px solid transparent; border-radius: var(--radius);
  max-width: var(--measure-prose);
}
.tool-card.is-soon { background: var(--card-2); border-color: var(--line); }
.tool-ic { color: var(--brand); display: flex; }
.tool-card.is-soon .tool-ic { color: var(--muted); }
.tool-body { flex: 1; min-width: 0; }
.tool-kicker {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-ink); margin-bottom: var(--space-1);
}
.tool-card.is-soon .tool-kicker { color: var(--ink2); }
.tool-title { font-size: var(--fs-h3); margin: 0; font-weight: 700; color: var(--ink); }
.tool-desc { margin: var(--space-1) 0 0; font-size: var(--fs-base); color: var(--ink2); }

/* ---------- Теги и навигация по статьям ---------- */
/* сами теги — общий .chip.tag; здесь только раскладка ряда */
.article-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-6); max-width: var(--measure-prose); }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid); margin-top: var(--space-8); }
.nav-card { display: flex; flex-direction: column; gap: var(--space-2); }
.nav-card:hover { text-decoration: none; box-shadow: var(--shadow-hover); }
.nav-card.is-next { text-align: right; }
/* одиночная карточка (нет предыдущей или следующей) занимает всю ширину: половина
   с пустотой справа читалась как незаполненная сетка */
.post-nav .nav-card:only-child { grid-column: 1 / -1; }
.nav-kicker {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2);
}
.nav-card.is-next .nav-kicker { justify-content: flex-end; }
.nav-title { font-weight: 700; color: var(--ink); font-size: var(--fs-base); line-height: 1.35; }

/* ---------- Поиск ---------- */
/* Форма над лентой выравнивается по левому краю колонки чтения — по центру она
   читалась бы как отдельный экран поиска, а не как фильтр над списком. */
.search-top { margin: 0 0 var(--space-6); max-width: var(--measure-prose); }
.search-top .search-form { justify-content: flex-start; }
.search-form { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.search-form input[type="search"] {
  flex: 1; min-width: 200px; max-width: 380px;
  height: var(--control-h); padding: 0 var(--space-3); font: inherit; font-size: var(--fs-base);
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-s);
}
.search-form input[type="search"]:focus { outline: 2px solid var(--focus); border-color: var(--brand-2); }

/* ---------- Адаптив ----------
   Перенос оглавления над текстом на ≤1000 задан в общем слое вместе с самой раскладкой. */
@media (max-width: 1000px) {
  .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .feed { grid-template-columns: minmax(0, 1fr); }
  .post-nav { grid-template-columns: 1fr; }
  .nav-card.is-next { text-align: left; }
  .nav-card.is-next .nav-kicker { justify-content: flex-start; }
  .tool-card { flex-direction: column; align-items: flex-start; }
  .search-top { margin-bottom: var(--space-5); }
}