/* Блог на телефоне (≤767px) — по правилам docs/mobile-design.md: всё по левому краю,
   на всю ширину; карточки списка — одна колонка; статья — 17px, оглавление раскрывается. */

@media (max-width: 767px) {
  .blog-intro { margin: -4px 0 24px; font-size: 16px; }
  .blog-grid, .blog-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 36px; }
  a.blog-card--featured { margin-bottom: 32px; padding: 12px; border-radius: 22px; }
  .blog-card--featured .blog-card__body { padding: 0 6px 8px; }
  .blog-card--featured .blog-card__title { font-size: 22px; }
  .blog-card--featured .blog-card__excerpt { font-size: 15px; -webkit-line-clamp: 3; }
  .blog-card__image { border-radius: 18px; }
  .blog-card__title { font-size: 19px; }

  .blog-article__head { margin-bottom: 24px; }
  .blog-article__meta { font-size: 14px; margin-bottom: 14px; }
  .blog-article__title { margin-bottom: 14px; }
  .blog-article__lead { font-size: 17px; }
  .blog-article__cover { aspect-ratio: 16 / 10; margin-bottom: 28px; border-radius: 20px; }

  .blog-toc--inline { margin-bottom: 28px; border-radius: 16px; background: #f3f9f5; }
  .blog-toc--inline summary {
    display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; cursor: pointer; list-style: none;
    font-size: 16px; font-weight: 700; color: #23703f;
  }
  .blog-toc--inline summary::-webkit-details-marker { display: none; }
  .blog-toc--inline summary:after { content: "+"; font-size: 22px; line-height: 1; }
  .blog-toc--inline[open] summary:after { content: "–"; }
  .blog-toc--inline .blog-toc__list { padding: 0 8px 12px; }

  .blog-prose { font-size: 17px; line-height: 1.7; }
  .blog-prose h2 { margin-top: 40px; font-size: 23px; }
  .blog-prose h3, .blog-prose h4 { font-size: 19px; margin-top: 28px; }
  .blog-prose img { margin: 24px 0; border-radius: 16px; }
  .blog-prose blockquote { padding: 20px 18px 20px 50px; font-size: 16px; }
  .blog-prose blockquote:before { left: 14px; font-size: 52px; }
  .blog-prose .content-text-block__inner { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* flex: none — на планшете у текста flex-basis 280px, в столбике это превращалось в высоту */
  .blog-cta { flex-direction: column; align-items: stretch; gap: 10px; padding: 18px; border-radius: 18px; }
  .blog-cta__title, .blog-cta__text { flex: none; margin: 0; }
  .blog-cta__title { font-size: 18px; }
  .blog-cta__text { font-size: 14px; line-height: 1.45; }
  a.blog-cta__btn { min-height: 46px; margin-top: 4px; }
  .blog-share { flex-direction: column; align-items: flex-start; }
  .blog-share__buttons { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  a.blog-share__btn, .blog-share__btn { justify-content: center; }
  a.blog-next { margin-bottom: 48px; padding: 24px 20px; border-radius: 20px; }
  .blog-others__head { flex-wrap: wrap; }
  /* «Другие статьи» — строки «фото слева, текст справа», фото фиксированного размера */
  .blog-grid--3 { gap: 10px; }
  a.blog-card--compact { flex-direction: row; align-items: center; gap: 14px; padding: 10px; border: 1px solid #e6e6e6; border-radius: 18px; }
  .blog-card--compact .blog-card__image { flex: none; width: 96px; height: 96px; aspect-ratio: auto; border-radius: 14px; }
  .blog-card--compact .blog-card__body { gap: 6px; padding: 0 4px 0 0; }
  .blog-card--compact .blog-card__meta { font-size: 12px; }
  .blog-card--compact .blog-card__title { font-size: 15px; line-height: 1.35; }
  .blog-card--compact .blog-card__more { display: none; }

  .blog-question { margin-bottom: 52px; padding: 24px 18px; border-radius: 22px; gap: 20px; }
  .blog-question__text { font-size: 16px; }
  .blog-question__form { padding: 20px 16px; border-radius: 16px; }
}