/* Статья: шапка (ar-shapka.tpl). Макет: фреймы iKEHC (десктоп, 1440x320)
   и lXGUE (телефон, 390x392) страницы "Статья блога".

   Полосу 1440 с контентом 1328 (56/20 на телефоне) даёт сайтовый .wrap
   (base.css), здесь только вертикальные отступы и внутренняя геометрия.
   Заголовок (кегль H1) - в post.css: он у каждой страницы свой
   (docs/stranicy.md), а этот блок используется только на /blog/*. */

[data-section="shapka"] {
  display: block;
  background: var(--white);
}

.ar-shapka__wrap {
  padding-block: 40px 44px;   /* мерки: padding "Шапка статьи" [40,56,44,56] */
}

.ar-shapka__copy {
  max-width: 900px;   /* мерки: ширина "Копия" 900 */
  display: flex;
  flex-direction: column;
  gap: 20px;   /* мерки: gap "Копия" 20 */
}

.ar-shapka__meta {
  display: flex;
  align-items: center;
  gap: 16px;   /* мерки: gap "Мета" 16 */
}

.ar-shapka__rubrika {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;   /* высота строки в макете не задана: 11 x 1.21 (метрика Inter) */
  letter-spacing: 2.4px;
  color: var(--magenta-text);
}

.ar-shapka__dot {
  font-family: var(--font-body);
  font-size: 11px;   /* мерки: точка-разделитель того же кегля, что рубрика */
  line-height: 13px;   /* 11 x 1.21 */
  color: var(--muted);
}

.ar-shapka__data,
.ar-shapka__vremya {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 16px;   /* 13 x 1.21 = 15.73 -> 16 (как у .crumbs-bar .crumbs) */
  color: var(--muted);
}

.ar-shapka__h1 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--ink);
  /* Кегль и высота строки - в post.css (своя для страницы статьи). */
}

.ar-shapka__lead {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 38px;   /* 20 x 1.9 = 38 */
  color: var(--muted);
}

@media (max-width: 860px) {
  .ar-shapka__wrap {
    padding-block: 26px;   /* мерки: padding "Шапка статьи" телефон [26,20] */
  }

  .ar-shapka__copy {
    max-width: none;
  }

  /* В дампе на телефоне у "Мета" layout=vertical - рубрика, точка, дата,
     точка, время чтения стоят каждая на своей строке, а не в один ряд с
     переносом. Воспроизводим буквально: flex-direction column. */
  .ar-shapka__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;   /* мерки: gap "Мета" телефон 8 */
  }

  .ar-shapka__rubrika {
    font-size: 10px;
    line-height: 12px;   /* 10 x 1.21 */
  }

  .ar-shapka__dot {
    font-size: 10px;
    line-height: 12px;   /* 10 x 1.21 */
  }

  .ar-shapka__data,
  .ar-shapka__vremya {
    font-size: 12px;
    line-height: 15px;   /* 12 x 1.21 (метрика Inter) */
  }

  .ar-shapka__lead {
    font-size: 18px;
    line-height: 34px;   /* 18 x 1.9 */
  }
}