/* ============================================================
   CyberFirst — ГЛОБАЛЬНЫЕ БЭМ-компоненты, общие для всей темы.
   Подключается на всех страницах (см. functions.php), поэтому
   один класс описывается здесь ОДИН раз и используется везде,
   без дублирования по страничным CSS-файлам.
   ============================================================ */

/* ---------- Хлебные крошки: .breadcrumbs ----------
   Использование:
     <nav class="breadcrumbs">                     — статические страницы
     <nav class="breadcrumbs breadcrumbs--overlay"> — страницы услуг (поверх свечения hero)
     <nav class="breadcrumbs breadcrumbs--truncate">— когда последний пункт длинный (статья блога)
*/
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--text-muted);
  font-size: 13.5px;
}
.breadcrumbs a { color: inherit; text-decoration: none; transition: color var(--transition); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span[aria-hidden] { opacity: .4; }
.breadcrumbs > span:last-child { color: var(--text); }

/* Модификатор для страниц услуг: крошки лежат поверх фонового свечения hero */
.breadcrumbs--overlay {
  position: relative;
  z-index: 1;
  margin-bottom: 34px;
  font-size: 12px;
}

/* Модификатор для блога: обрезаем длинный заголовок статьи многоточием */
.breadcrumbs--truncate > span:last-child {
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .breadcrumbs { margin-bottom: 24px; }
}

/* ---------- Надзаголовок секции: .section-label ----------
   Мелкая заглавная метка над заголовком секции. Контекстные варианты
   (например «пилюля» внутри .section-head на страницах услуг) остаются
   в соответствующих страничных файлах как оверрайды поверх этой базы. */
.section-label {
  display: inline-block;
  margin-bottom: 15px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}