/* Хлебные крошки страниц программ. Секция: фреймы f4v8gG (1440x38) и
   US7WV (390x37) - полоса на всю ширину, текст в полосе 1440 с отступом
   56px (20px на телефоне). Отступ по вертикали несимметричный - 18px
   сверху и 4px снизу (padding секции в дампе: [18, 56, 4, 56] и
   [18, 20, 4, 20]), не центровка.

   Высота строки - метрика шрифта Inter x1.21, округлена до целого (см.
   docs/prazdniki.md, "Сверка с макетом"): 13 x 1.21 = 15,73 -> 16;
   12 x 1.21 = 14,52 -> 15. */

.crumbs-bar {
  background: #FFFFFF;
}

.crumbs-bar .crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* Зазор только по горизонтали: в макете звенья пути отстоят на 10px, а
     перенесённая строка идёт сразу под первой - высота двух строк в
     образце статьи 52 = 18 сверху + 15 + 15 + 4 снизу, без зазора между
     строками. Общий gap: 10px давал 62. */
  gap: 0 10px;
  max-width: var(--page-w);
  margin-inline: auto;
  padding: 18px 56px 4px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 16px;   /* 13 x 1.21 */
  color: var(--text-2);
}

@media (max-width: 860px) {
  .crumbs-bar .crumbs {
    padding: 18px 20px 4px;
    font-size: 12px;
    line-height: 15px;   /* 12 x 1.21 */
    /* Перенос на телефоне оставлен, как в макете. Раньше он был снят из
       опасения, что Chrome рисует Inter шире редактора макета и путь
       уедет на вторую строку зря. Замер по живым страницам показал
       обратное: у самого длинного влезающего пути (дошкольники) запас
       34px, у лагерей 40-45px, у остальных 150-220px - случайный перенос
       не грозит. А путь статьи блога просит 499px при экране 390, и
       макет сам даёт ему две строки: образец крошек статьи 390x52 против
       390x37 у всех прочих страниц. С запретом переноса статья показывала
       одну строку с прокруткой боком - не то, что нарисовано. */
    flex-wrap: wrap;
  }

  .crumbs-bar .crumbs > * {
    flex: 0 0 auto;   /* звенья пути не сжимаются */
  }

  /* Переносится не звено целиком, а надпись текущей страницы внутри себя:
     в макете первая строка кончается на "С какого возраста", вторая
     начинается с "учить английскому" под ней. Поэтому последнее звено -
     единственное, которому разрешено сжиматься. */
  .crumbs-bar .crumbs__here {
    flex: 1 1 0;
    min-width: 0;
  }
}

.crumbs-bar .crumbs__link {
  color: inherit;
  text-decoration: none;
}

.crumbs-bar .crumbs__link:hover {
  color: var(--text);
}

.crumbs-bar .crumbs__ico {
  width: 13px;
  height: 13px;
  transform: rotate(-90deg);
}

.crumbs-bar .crumbs__here {
  color: var(--text);
  font-weight: 600;
}