/* ============================================================
   Визиторкрут — стили блога и общих секций сайта.
   Строится поверх токенов дизайн-системы (ds.css). Здесь только
   раскладка и компоненты: сетки, карточки статей, типографика
   тела статьи (.prose), врезки, «ключевые факты», связанные статьи.
   ============================================================ */

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-6); }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--space-6); }

/* ---------- Шапка сайта ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--space-5); height: 62px; }
.wordmark {
  font-family: var(--font-display); font-weight: var(--weight-extrabold);
  font-size: 20px; letter-spacing: var(--tracking-tight); color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--ink); text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; }
.site-nav a { color: var(--text-secondary); font-weight: var(--weight-medium); font-size: var(--text-body); text-decoration: none; }
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.nav-cta {
  display: inline-flex; align-items: center; height: var(--control-sm); padding: 0 var(--space-4);
  background: var(--brand); color: var(--on-brand); border-radius: var(--radius-lg);
  font-weight: var(--weight-semibold); font-size: var(--text-body-sm); text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.nav-cta:hover { background: var(--brand-hover); color: var(--on-brand); text-decoration: none; }
@media (max-width: 640px) { .site-nav .nav-hide { display: none; } }

/* ---------- Кнопки ---------- */
.btn-primary {
  display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-xl);
  padding: 0 var(--space-8); background: var(--brand); color: var(--on-brand);
  border-radius: var(--radius-lg); font-weight: var(--weight-bold); font-size: var(--text-body-lg);
  text-decoration: none; box-shadow: var(--glow-go);
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.btn-primary:hover { background: var(--brand-hover); color: var(--on-brand); text-decoration: none; transform: var(--lift); }
.btn-primary:active { transform: scale(var(--press-scale)); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-xl);
  padding: 0 var(--space-6); background: var(--color-surface); color: var(--ink);
  border: var(--border-width) solid var(--border-default); border-radius: var(--radius-lg);
  font-weight: var(--weight-semibold); font-size: var(--text-body-lg); text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.btn-ghost:hover { border-color: var(--border-strong); color: var(--ink); text-decoration: none; }

/* ---------- Общие секции ---------- */
section.block { padding: var(--space-16) 0; border-top: var(--border-width) solid var(--border-subtle); }
.eyebrow {
  font-family: var(--font-sans); font-size: var(--text-overline); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--brand);
  margin: 0 0 var(--space-3);
}
h2.block-title {
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--text-display-lg); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3);
}
.block-sub { color: var(--text-secondary); font-size: var(--text-body-lg); margin: 0 0 var(--space-10); max-width: 680px; }

/* ---------- Значок функции ---------- */
.ficon {
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-subtle); color: var(--brand); margin-bottom: var(--space-4);
}
.ficon svg { width: 24px; height: 24px; }
.icon { stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Вердикт-пилюли (семантический хребет) ---------- */
.verdict-pill {
  display: inline-flex; align-items: center; gap: var(--space-2); height: 28px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill); font-size: var(--text-body-sm); font-weight: var(--weight-semibold);
}
.verdict-pill .dot { width: 9px; height: 9px; border-radius: var(--radius-pill); }
.v-go   { background: var(--verdict-go-bg);   color: var(--verdict-go-text);   }
.v-go   .dot { background: var(--verdict-go); }
.v-edge { background: var(--verdict-edge-bg); color: var(--verdict-edge-text); }
.v-edge .dot { background: var(--verdict-edge); }
.v-skip { background: var(--verdict-skip-bg); color: var(--verdict-skip-text); }
.v-skip .dot { background: var(--verdict-skip); }

/* ============================================================
   БЛОГ — список статей
   ============================================================ */
.blog-hero { padding: var(--space-16) 0 var(--space-8); }
.blog-hero h1 {
  font-family: var(--font-display); font-weight: var(--weight-extrabold);
  font-size: clamp(30px, 6vw, var(--text-display-xl)); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display); margin: 0 0 var(--space-4);
}
.blog-hero p { color: var(--text-secondary); font-size: var(--text-body-lg); max-width: 640px; }

.blog-group-title {
  font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-h2);
  margin: var(--space-12) 0 var(--space-5); padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.article-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--color-surface); border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-xl); padding: var(--space-6); text-decoration: none; color: var(--ink);
  transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.article-card:hover { border-color: var(--brand-subtle-border); transform: var(--lift); box-shadow: var(--shadow-md); color: var(--ink); text-decoration: none; }
.article-card .ficon { margin-bottom: var(--space-2); }
.article-card .num { font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--text-tertiary); }
.article-card h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); margin: 0; line-height: var(--leading-heading); }
.article-card p { color: var(--text-secondary); font-size: var(--text-body); margin: 0; }
.article-card .meta { margin-top: auto; padding-top: var(--space-3); color: var(--text-tertiary); font-size: var(--text-body-sm); display: flex; align-items: center; gap: var(--space-2); }
.article-card .arrow { color: var(--brand); font-weight: var(--weight-bold); }

/* ============================================================
   БЛОГ — страница статьи
   ============================================================ */
.article-head { padding: var(--space-12) 0 var(--space-6); }
.breadcrumb { font-size: var(--text-body-sm); color: var(--text-tertiary); margin-bottom: var(--space-5); }
.breadcrumb a { color: var(--text-secondary); }
.cat-chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 var(--space-3);
  background: var(--brand-subtle); color: var(--brand); border-radius: var(--radius-pill);
  font-size: var(--text-overline); font-weight: var(--weight-bold); letter-spacing: var(--tracking-overline);
  text-transform: uppercase; margin-bottom: var(--space-4);
}
.article-head h1 {
  font-family: var(--font-display); font-weight: var(--weight-extrabold);
  font-size: clamp(28px, 5.2vw, var(--text-display-lg)); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4);
}
.article-head .dek { color: var(--text-secondary); font-size: var(--text-body-lg); max-width: 680px; }
.article-meta { margin-top: var(--space-5); color: var(--text-tertiary); font-size: var(--text-body-sm); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Тело статьи */
.prose { font-size: var(--text-body-lg); line-height: 1.66; color: var(--text-primary); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 {
  font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-h1);
  line-height: var(--leading-heading); letter-spacing: var(--tracking-tight);
  margin-top: var(--space-12); margin-bottom: 0;
}
.prose h3 { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-h3); margin-top: var(--space-8); }
.prose p { color: var(--text-secondary); }
.prose strong { color: var(--ink); font-weight: var(--weight-semibold); }
.prose ul, .prose ol { padding-left: var(--space-5); color: var(--text-secondary); }
.prose li { margin-top: var(--space-2); }
.prose li::marker { color: var(--brand); }
.prose a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }

/* Ведущий абзац-«боль» */
.prose .lede { font-size: var(--text-h3); line-height: 1.5; color: var(--ink); font-weight: var(--weight-medium); }

/* Врезки */
.callout {
  background: var(--info-bg); border: var(--border-width) solid var(--info-border);
  border-left: 3px solid var(--info); border-radius: var(--radius-lg);
  padding: var(--space-5); font-size: var(--text-body); color: var(--info-text);
}
.callout.warn { background: var(--warning-bg); border-color: var(--warning-border); border-left-color: var(--warning); color: var(--warning-text); }
.callout.go   { background: var(--success-bg); border-color: var(--success-border); border-left-color: var(--success); color: var(--success-text); }
.callout strong { color: inherit; }
.callout .callout-label { display: block; font-weight: var(--weight-bold); font-size: var(--text-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; margin-bottom: var(--space-2); opacity: 0.9; }

/* Крупная цитата-мысль */
.prose blockquote {
  border-left: 3px solid var(--brand); padding-left: var(--space-5); margin-left: 0;
  font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h2);
  line-height: var(--leading-snug); color: var(--ink); letter-spacing: var(--tracking-tight);
}

/* Ряд статистики */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); }
.stat {
  background: var(--color-surface); border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.stat .v { font-family: var(--font-mono); font-weight: var(--weight-semibold); font-size: var(--text-display-lg); font-feature-settings: var(--numeric-tabular); letter-spacing: -0.01em; color: var(--ink); line-height: 1; }
.stat .k { font-size: var(--text-overline); font-weight: var(--weight-bold); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--text-tertiary); margin-top: var(--space-2); }

/* Блок «Ключевые факты / как это устроено» */
.keyfacts {
  background: var(--color-surface-sunken); border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: var(--space-6);
}
.keyfacts h3 { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-title); margin: 0 0 var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
.keyfacts ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.keyfacts li { display: flex; gap: var(--space-3); font-size: var(--text-body); color: var(--text-secondary); }
.keyfacts li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 8px; border-radius: var(--radius-pill); background: var(--brand); }
.keyfacts li b { color: var(--ink); font-weight: var(--weight-semibold); }

/* Связанные статьи */
.related { padding: var(--space-12) 0 var(--space-16); border-top: var(--border-width) solid var(--border-subtle); margin-top: var(--space-16); }
.related h2 { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-h2); margin: 0 0 var(--space-5); }

/* Нижний призыв */
.cta-band {
  background: var(--ink); color: #fff; border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-8); text-align: center; margin: var(--space-16) 0 0;
}
.cta-band h2 { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-display-lg); line-height: var(--leading-tight); margin: 0 0 var(--space-3); color: #fff; }
.cta-band p { color: rgba(255,255,255,0.72); font-size: var(--text-body-lg); margin: 0 auto var(--space-6); max-width: 520px; }
.cta-band .btn-primary { background: var(--brand); }
.cta-band .cta-note { display: block; margin-top: var(--space-4); color: rgba(255,255,255,0.55); font-size: var(--text-body-sm); }

/* Подвал */
footer.site-footer { border-top: var(--border-width) solid var(--border-subtle); padding: var(--space-10) 0 var(--space-16); color: var(--text-tertiary); font-size: var(--text-body-sm); }
footer.site-footer a { color: var(--text-secondary); }
.footer-cols { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); margin-bottom: var(--space-8); }
.footer-cols h4 { font-size: var(--text-overline); font-weight: var(--weight-bold); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 var(--space-3); }
.footer-cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }