/* Программа: первый экран (pg-hero.tpl). Один набор стилей на все семь
   страниц программ - геометрия снята на "Дошкольники 3-6 лет" (фреймы
   макета WgXeP десктоп 1440, udghj телефон 390), у остальных шести
   страниц то же самое, другие тексты и фото.

   Фото идёт вплотную к правому краю полосы 1440 (full bleed), текст -
   со своим паддингом 88/20. Сайтовый .wrap (1328 контента, гуттер 56/20,
   base.css) здесь не подходит: он подрезал бы фото гуттером вместо
   того, чтобы дать ему касаться края полосы. Поэтому полоса строится
   так же, как у "Один час по минутам" на главной (.hm-chas__item-row в
   hm-chas.css) - max-width: var(--page-w), центрирована, без .wrap. */

[data-section="hero"] {
  display: block;
}

.pg-hero__row {
  max-width: var(--page-w);
  margin-inline: auto;
  display: flex;
  align-items: center;   /* мерки: alignItems=center у WgXeP */
  height: 720px;   /* мерки: высота WgXeP 720 */
}

.pg-hero__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;   /* мерки: gap "Текст" 22 */
  padding-inline: 88px;   /* мерки: padding "Текст" [0,88] */
}

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

.pg-hero__h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 42px;
  line-height: 48px;   /* 42 x 1.14 */
  letter-spacing: -1.6px;
  color: var(--ink);
}

.pg-hero__p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 34px;   /* 18 x 1.9 */
  color: var(--muted);
}

.pg-hero__format {
  padding-top: 14px;   /* мерки: padding "Формат" [14,0,0,0] */
  display: flex;
  gap: 26px;   /* мерки: gap "Формат" 26 */
}

.pg-hero__format-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;   /* мерки: gap "Б" 5 */
}

.pg-hero__format-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;   /* высота строки в макете не задана: 11 x 1.21 (метрика Inter, base.css) */
  letter-spacing: 2px;
  color: var(--muted);
}

.pg-hero__format-value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;   /* 16 x 1.35 */
  color: var(--ink);
}

.pg-hero__photo {
  position: relative;
  overflow: hidden;
  flex: 0 0 660px;   /* мерки: ширина "Фото" 660 */
  width: 660px;
  height: 720px;   /* мерки: "Фото" во всю высоту секции (720) */
}

/* Исключение одной страницы. В макете фото первого экрана заполняет секцию
   целиком на шести страницах из семи, а у дошкольников оно 700 и стоит по
   центру - сверху и снизу остаётся по 10px белого (проверено по эталону:
   строка 9 белая, строка 10 уже фото). Похоже на оплошность макета, но
   правило здесь - делать как в макете, поэтому страница названа по имени
   (класс page-<адрес> на body ставит шаблон). */
@media (min-width: 861px) {
  body.page-doshkolniki .pg-hero__photo {
    height: 700px;
  }
}

.pg-hero__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .pg-hero__row {
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }

  .pg-hero__text {
    padding-inline: var(--gutter-m);   /* мерки: padding "Текст" телефон [0,20] */
  }

  .pg-hero__kicker {
    font-size: 10px;
    line-height: 12px;   /* высота строки в макете не задана: 10 x 1.21 (метрика Inter) */
  }

  .pg-hero__h1 {
    font-size: 27px;
    line-height: 31px;   /* 27 x 1.14 */
    letter-spacing: -0.9px;
  }

  .pg-hero__p {
    font-size: 16px;
    line-height: 30px;   /* 16 x 1.9 */
  }

  .pg-hero__format {
    flex-direction: column;
    gap: 26px;   /* мерки: gap "Формат" телефон 26, та же плашка в столбик */
  }

  .pg-hero__format-label {
    font-size: 10px;
    line-height: 12px;   /* высота строки в макете не задана: 10 x 1.21 (метрика Inter) */
  }

  .pg-hero__format-value {
    font-size: 15px;
    line-height: 20px;   /* 15 x 1.35 */
  }

  .pg-hero__photo {
    flex: 0 0 auto;
    width: 100%;
    height: 290px;   /* мерки: "Фото" телефон высота 290 */
  }
}