/* ============ СТАТЬИ: ОБЩЕЕ ============ */
/* Использует переменные и базовые классы из ../style.css */

.page-head {
  background: linear-gradient(160deg, var(--primary-light) 0%, #ffffff 60%, #f0f6fd 100%);
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--border);
}

.breadcrumb {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb span { color: #cbd5e1; }
.breadcrumb b { color: var(--text); font-weight: 600; }

/* ============ СПИСОК СТАТЕЙ ============ */
.page-head__title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.page-head__subtitle {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 640px;
}

.articles-list { padding: 56px 0 80px; }

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.article-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

.article-card__cover {
  height: 132px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary-light), #f0f6fd);
}
.article-card__cover svg {
  width: 48px;
  height: 48px;
  color: var(--primary);
}
.article-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }

.article-card__tag {
  align-self: start;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--primary-light);
  color: var(--brand);
  margin-bottom: 14px;
}
.article-card__title {
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
}
.article-card__excerpt {
  font-size: 14.5px;
  color: var(--text-muted);
  margin-bottom: 18px;
  flex: 1;
}
.article-card__meta {
  font-size: 13px;
  color: #94a3b8;
  display: flex;
  gap: 8px;
  align-items: center;
}
.article-card__meta span { color: #cbd5e1; }

/* ============ СТРАНИЦА СТАТЬИ ============ */
.article-header { max-width: 760px; }
.article-header__tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--brand);
  margin-bottom: 16px;
}
.article-header__title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.article-header__meta {
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.article-header__meta span { color: #cbd5e1; }

.article-body { padding: 48px 0 72px; }

/* Типографика статьи */
.prose { font-size: 17px; color: var(--text); }
.prose > p { margin-bottom: 20px; color: #334155; }
.prose .lead { font-size: 19px; color: var(--text-muted); margin-bottom: 28px; }
.prose h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 40px 0 16px;
}
.prose h3 { font-size: 20px; font-weight: 700; margin: 28px 0 12px; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 22px; color: #334155; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); font-weight: 700; }
.prose a { color: var(--primary); text-decoration: none; }
.prose .btn { text-decoration: none; }
.prose .btn--primary { color: #fff; }
.prose .btn--white { color: var(--brand); }

.callout {
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 24px;
  font-size: 15.5px;
  color: #0f2437;
}
.callout b { color: var(--brand); }

/* Таблица норм */
.norm-table {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 8px 0 28px;
}
.norm-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr;
  gap: 10px;
  align-items: center;
  padding: 13px 20px;
  font-size: 14.5px;
  border-bottom: 1px solid var(--border);
}
.norm-row:last-child { border-bottom: none; }
.norm-row--head {
  background: var(--bg-gray);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.norm-row b { font-weight: 600; }

/* CTA внутри статьи */
.article-cta {
  background: linear-gradient(135deg, var(--brand) 0%, #004a99 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 32px 34px;
  margin: 36px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.article-cta__text h3 { font-size: 21px; font-weight: 800; margin-bottom: 6px; }
.article-cta__text p { font-size: 15px; opacity: .92; }

/* Дисклеймер */
.article-disclaimer {
  background: #fff8e6;
  border: 1px solid #fde9b8;
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 14px;
  color: #92650a;
  margin-top: 32px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.article-disclaimer svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #c88a1a;
}

/* Мини-FAQ (переиспользует .faq / .faq__item из ../style.css) */
.article-faq { margin-top: 44px; }
.article-faq h2 { font-size: 24px; font-weight: 800; margin-bottom: 20px; }
.article-faq .faq { margin-top: 0; }

/* Читайте также */
.related { margin-top: 52px; }
.related h2 { font-size: 22px; font-weight: 800; margin-bottom: 20px; }
.related__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ============ АДАПТИВ ============ */
@media (max-width: 900px) {
  .articles-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .articles-grid { grid-template-columns: 1fr; }
  .page-head__title { font-size: 30px; }
  .article-header__title { font-size: 28px; }
  .prose { font-size: 16px; }
  .prose h2 { font-size: 23px; }
  .norm-row { grid-template-columns: 1.4fr 1fr 1fr; font-size: 13px; padding: 12px 14px; }
  .article-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
  .related__grid { grid-template-columns: 1fr; }
}