/* /cases — первый экран на телефоне: плашка остаётся на снимке, заголовок
   уходит под снимок там, где он не влезает (решение Павла 16.10 18:12,
   задача rp-1610-wp-cases-hero).

   Почему. 15.10 у /cases сменился H1 — «Кейсы и разборы: что было, что
   сделали и что получилось». В телефонной раскладке раздела 15
   responsive.css заголовок стоит НА снимке в колонке 50% (запас раздела
   снят 05.10 под короткий заголовок в пять строк). На новом тексте это
   6–7 строк, и последняя строка попадает в тёмную нижнюю полосу кадра
   (силуэт на исходных строках 850+): запас до стены −209,6px на 320px,
   −248,2px на 375px, −252,6px на 400px при пороге гейта 12px.
   Колонкой и интерлиньяжем это не лечится: матрица кандидатов
   (line-height 0.96–1.18 × колонка 34–50%) даёт на 320px максимум −2,3px —
   заголовок на снимок не влезает ни в одной раскладке (кегль 18/22px
   и отступ +71px от кромки закреплены гейтом hero-overlay-check.cjs).

   Граница 404px — по замеру всех широт 320–640 (measure.cjs, та же мерка,
   что у гейта): на снимке заголовок держит запас ≥12px начиная с 404px
   (404px — 14,4px, 420px — 23,1px, 492px — 108,6px, 640px — 289,4px).
   Островок 355–370px (13,9–19,2px) — удачный перенос строки на 18px,
   границей раскладки он не является, поэтому в разрез не берётся.

   Устройство. До 404px заголовок — второй строкой сетки ПОД снимком,
   во всю ширину (как на внутренних страницах); лид, кнопки и примечание
   сдвигаются на строку вниз. Плашка остаётся на снимке первой строкой
   (+22px от кромки) на всех широтах. С 404px работает раздел 15
   responsive.css без изменений.

   Правка — отдельным файлом, а не правкой responsive.css: раздел 15
   принадлежит соседней ветви, файл заперт как чужой слайс. Подключается
   последним (после head-actions.css), чтобы перебить медиа-правила
   раздела 15 той же специфичности. */
@media (max-width: 403px) {
  body.page-id-26 .hero__text h1 {
    grid-row: 2;
    grid-column: 1;
    margin: 24px 18px 0 18px;
    max-width: none;
  }
  body.page-id-26 .hero__lead { grid-row: 3; }
  body.page-id-26 .hero__text .btn-row { grid-row: 4; }
  body.page-id-26 .hero__note,
  body.page-id-26 .hero__notes { grid-row: 5; }
}