/* Blog-specific styles. Loaded AFTER /styles.css, which provides the
   CSS variables, header, footer, drawer and button styles. */

.blog-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 120px 24px 80px;
}
@media (max-width: 980px) {
  .blog-main { padding: 96px 20px 56px; }
}

.breadcrumbs {
  font-size: 0.85rem;
  color: var(--muted, #6b7178);
  margin-bottom: 28px;
}
.breadcrumbs a { color: inherit; }
.breadcrumbs a:hover { color: var(--navy-800, #313f4a); }
.breadcrumbs span[aria-current] { color: var(--navy-800, #313f4a); }

/* --- Blog index --- */
.blog-index-head { margin-bottom: 48px; }
.blog-index-head h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 500;
  color: var(--navy-800, #313f4a);
  letter-spacing: 0.01em;
}
.blog-index-head p {
  margin-top: 14px;
  color: var(--muted, #6b7178);
  max-width: 60ch;
}

.blog-list { display: flex; flex-direction: column; gap: 4px; }
.blog-card {
  display: block;
  padding: 26px 0;
  border-top: 1px solid rgba(43,58,69,0.12);
  color: inherit;
}
.blog-card:last-child { border-bottom: 1px solid rgba(43,58,69,0.12); }
.blog-card:hover .blog-card-title { color: var(--blush-500, #b06a5e); }
.blog-card-date { display: block; font-size: 0.8rem; color: var(--muted, #6b7178); }
.blog-card-title {
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--navy-800, #313f4a);
  margin: 6px 0 8px;
  transition: color 0.2s ease;
}
.blog-card-excerpt { display: block; color: var(--muted, #6b7178); font-size: 0.98rem; }

.blog-empty {
  padding: 40px 0;
  color: var(--muted, #6b7178);
  border-top: 1px solid rgba(43,58,69,0.12);
}

/* --- Article --- */
.article h1 {
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--navy-800, #313f4a);
  letter-spacing: 0.01em;
}
.article-meta {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--muted, #6b7178);
}

.answer-box {
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--cream-100, #f6f0e9);
  border-radius: 8px;
}
.answer-box::before {
  content: "Коротко";
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blush-500, #b06a5e);
  margin-bottom: 8px;
}
.answer-box p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--navy-800, #313f4a); }
.answer-box p + p { margin-top: 10px; }

.article-body { font-size: 1.05rem; line-height: 1.7; color: #2b2f34; }
.article-body h2 {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--navy-800, #313f4a);
  margin: 44px 0 14px;
}
.article-body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy-800, #313f4a);
  margin: 28px 0 10px;
}
.article-body p { margin: 14px 0; }
.article-body ul, .article-body ol { margin: 14px 0; padding-left: 24px; }
.article-body li { margin: 7px 0; }
.article-body a { color: var(--blush-500, #b06a5e); text-decoration: underline; text-underline-offset: 2px; }
.article-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.96rem; }
.article-body th, .article-body td { border: 1px solid rgba(43,58,69,0.15); padding: 10px 12px; text-align: left; vertical-align: top; }
.article-body th { background: var(--cream-100, #f6f0e9); font-weight: 600; }
.article-body img { border-radius: var(--radius, 14px); margin: 20px 0; }

.article-cta {
  margin: 48px 0 0;
  padding: 28px;
  background: var(--navy-800, #313f4a);
  color: var(--cream-050, #fbf7f2);
  border-radius: var(--radius, 14px);
}
.article-cta h2 { margin: 0 0 8px; font-size: 1.35rem; font-weight: 500; color: var(--blush-500, #e0c1bc); }
.article-cta p { margin: 0 0 18px; color: var(--blush-300, #ecd6d1); font-size: 0.98rem; }
.article-cta .btn { margin-right: 10px; }

.article-related { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(43,58,69,0.12); }
.article-related h2 { font-size: 1.1rem; font-weight: 600; color: var(--navy-800, #313f4a); margin: 0 0 12px; }
.article-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.article-related a { color: var(--blush-500, #b06a5e); }