@charset "UTF-8";
/**
 * Первый экран /blog: плашка и заголовок — НА снимке (планшет и телефон).
 *
 * Решение Павла 20.10.2026: на ширинах ≤980 метка раздела и H1 поднимаются
 * на изображение, лид/кнопки/сноска остаются под ним. Кегль заголовка
 * уменьшаем — он длинный («Полезные статьи и гайды для вашего бизнеса»)
 * и на узкой колонке иначе не влезает в кадр.
 *
 * Приём тот же, что у /uslugi (uslugi-hero.css): карточка — сетка в одну
 * колонку, .hero__text отдаёт детей наверх через display: contents.
 *
 * Подложка не нужна: левая часть кадра blog-hero.webp светлая (яркость
 * 158–182 при графите #393939 — контраст ≈4,8:1), замер 20.10.
 *
 * Десктоп (≥981) не задет: правила внутри @media и под body.blog.
 */

@media (max-width: 980px) {
  body.blog .hero__card {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0 0 24px;
  }

  body.blog .hero__text { display: contents; }

  body.blog .hero__bg {
    grid-row: 1;
    grid-column: 1;
  }

  body.blog .hero__pill {
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 0 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
  }

  /* 71px = 22px поля плашки + 37px её высота + 12px зазор. */
  body.blog .hero__text h1 {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 71px 40% 0 18px;
    font-size: 34px;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  body.blog .hero__lead { grid-row: 2; }
  body.blog .hero__text .btn-row { grid-row: 3; }

  body.blog .hero__note,
  body.blog .hero__notes { grid-row: 4; }
}

@media (max-width: 640px) {
  body.blog .hero__pill {
    margin: 16px 0 0 14px;
    font-size: 13px;
    max-width: calc(100% - 28px);
  }

  /* Длинный H1 на телефоне: колонка ~60% кадра, кегль 22px. */
  body.blog .hero__text h1 {
    margin: 60px 35% 0 14px;
    font-size: 22px;
    line-height: 1.18;
  }

  body.blog .hero__lead { margin-top: 22px; }
}

/* 320-360: колонка уже — ступенькой вниз кегль, как у /uslugi. */
@media (max-width: 360px) {
  body.blog .hero__text h1 {
    margin-right: 32%;
    font-size: 19px;
  }
}