/* ===========================================================================
   Статьи для родителей: список /blog/ и страница статьи.
   Шапка, подвал, цвета и шрифты общие с лендингом (styles.css). Здесь только
   то, что нужно длинному тексту: узкая колонка, оглавление, врезки.
   =========================================================================== */

.bl-list, .bl-article, .bl-404 { padding: 28px 0 8px; }

.bl-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14.5px; color: var(--muted); margin-bottom: 18px; }
.bl-crumbs a { color: var(--muted); text-decoration: none; }
.bl-crumbs a:hover { color: var(--accent); }

.bl-head { max-width: 50rem; margin-bottom: 26px; }
.bl-head h1 { font-size: clamp(30px, 4.6vw, 48px); margin-bottom: 14px; }
.bl-byline { color: var(--muted); font-size: 15px; margin: 0; }

/* Карточки статей живут в styles.css: они есть и на лендинге. */

/* ------------------------------------------------------------ статья */
.bl-hero { margin: 0 0 32px; }
.bl-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--sunk); }

.bl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1040px) {
  .bl-layout { grid-template-columns: minmax(0, 46rem) 260px; justify-content: space-between; }
}

.bl-body { font-size: 18px; line-height: 1.7; }
.bl-body > p, .bl-body > ul, .bl-body > ol { max-width: 46rem; }
.bl-body h2 { font-size: clamp(24px, 3vw, 32px); margin: 44px 0 14px; scroll-margin-top: 90px; }
.bl-body h3 { font-size: 20px; margin: 30px 0 10px; }
.bl-body p { margin: 0 0 18px; }
.bl-body ul, .bl-body ol { padding-left: 24px; margin: 0 0 20px; }
.bl-body li { margin: 8px 0; }
.bl-body li::marker { color: var(--accent); font-weight: 700; }
.bl-body a { text-underline-offset: 3px; }
.bl-body strong { font-weight: 600; color: var(--ink); }

.bl-short { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 22px 26px; margin-bottom: 30px; }
.bl-short-h { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.bl-short ul { margin: 0; padding-left: 22px; font-size: 17px; }
.bl-short li { margin: 6px 0; }

.bl-body .note { background: var(--surface); border-radius: var(--radius-sm); padding: 20px 24px; margin: 24px 0; font-size: 17px; }
.bl-body .note p:last-child { margin-bottom: 0; }

.bl-body .rows { overflow-x: auto; background: var(--surface); border-radius: var(--radius-sm); margin: 24px 0; }
.bl-body table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 520px; line-height: 1.5; }
.bl-body th, .bl-body td { text-align: left; vertical-align: top; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.bl-body th { font-family: var(--display); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--sunk); }
.bl-body tr:last-child td { border-bottom: 0; }

.bl-cta {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--accent); color: #fff; border-radius: var(--radius); padding: 26px 28px; margin: 36px 0;
}
.bl-cta img { width: 64px; height: auto; flex: none; background: #fff; border-radius: 18px; padding: 8px; }
.bl-cta-h { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.25; margin: 0 0 6px; color: #fff; }
.bl-cta p { color: rgba(255, 255, 255, 0.88); font-size: 16.5px; margin: 0 0 16px; }
.bl-cta .btn-primary { background: #fff; color: var(--accent-deep); }
.bl-cta .btn-primary:hover { background: var(--accent-soft); }
@media (max-width: 560px) { .bl-cta { flex-direction: column; } }

.bl-faq { margin-top: 44px; }
.bl-faq details { background: var(--surface); border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden; }
.bl-faq summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 22px; font-family: var(--display); font-weight: 700; font-size: 17px; position: relative; }
.bl-faq summary::-webkit-details-marker { display: none; }
.bl-faq summary::after {
  content: ''; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s ease;
}
.bl-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.bl-faq .answer { padding: 0 22px 20px; color: var(--ink-soft); font-size: 16.5px; }
.bl-faq .answer p { margin: 0; }

.bl-toc { align-self: start; position: sticky; top: 96px; font-size: 15px; }
.bl-toc-h { font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.bl-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bl-toc a { display: block; padding: 7px 10px; border-radius: 10px; color: var(--ink-soft); text-decoration: none; line-height: 1.35; }
.bl-toc a:hover { background: var(--surface); color: var(--ink); }
@media (max-width: 1039px) {
  .bl-toc { position: static; order: -1; background: var(--surface); border-radius: var(--radius-sm); padding: 18px 18px 12px; }
}

.bl-more { margin-top: 56px; }
.bl-more h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 20px; }

/* --------------------------------------------------------------- 404 */
.bl-404 .card { max-width: 44rem; margin: 20px auto; }
.bl-404 h1 { margin-bottom: 14px; }
.bl-404-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .bl-card, .bl-card:hover { transition: none; transform: none; }
}