/* Тег-плашка с обводкой (components/tag-pill.njk) — stage-card и
   support-topic-card на сервисной странице. */
.tag-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--color-slider-border);
  border-radius: var(--radius-pill);
  font-size: 12px;
  color: var(--color-ink);
  white-space: nowrap;
}

/* <br> для тега с ручным переносом (см. tag-pill.njk) — на десктопе тег
   однострочный (карточка достаточно широкая), перенос нужен только в
   мобильном media query ниже. */
.tag-pill__break {
  display: none;
}

/*
  Мобильная адаптация (600px,
  база 390px). Цвет текста — --color-heading-dark (не --color-ink) —
  исключение. border-radius всегда 15px (не полный pill): в макете у
  многострочного тега (2-й этап «Сопровождение валидационных мероприятий»)
  радиус уменьшается до 15px и высота растёт по контенту — вместо условного
  CSS на конкретный тег проще и надёжнее держать 15px на всех мобильных
  тегах (визуальная разница на однострочных минимальна).
*/
@media (max-width: 599.98px) {
  .tag-pill {
    height: auto;
    min-height: min(30px, calc(30 / 390 * 100vw));
    width: fit-content;
    padding: min(6px, calc(6 / 390 * 100vw)) min(12px, calc(12 / 390 * 100vw));
    border-radius: min(15px, calc(15 / 390 * 100vw));
    white-space: normal;
    color: var(--color-heading-dark);
  }

  /*
    Тег «Сопровождение валидационных / мероприятий» (226:6028, карточка
    «02. Монтаж и ввод в эксплуатацию») — единственный тег на странице,
    у которого в Figma собственная фиксированная ширина с РУЧНЫМ переносом
    (<br> в Figma между "Сопровождение валидационных" и "мероприятий", не
    авто-wrap по словам). Две причины, почему обычный width:fit-content не
    подходит:
    1) внутри flex-wrap ряда с доступной шириной карточки (270px) браузер
       сжимает элемент без flex-shrink:0 до ширины ряда (270px), а не до
       его собственной 2-строчной ширины;
    2) даже при точной ширине natural word-wrap ломается не в том месте
       (после 1 слова, не после 2, как в макете) — перенос сделан явным
       <br> (tag-pill.njk → .tag-pill__break), а не шириной, подобранной
       под естественный wrap.

    222px — измерено реальным рендером (не взято из Figma напрямую: там
    194px текста + 24px паддинга = 218px, но у нас же ещё 2px рамки
    (border:1px с обеих сторон) с box-sizing:border-box съедают часть
    content-box, и натуральная ширина строки "Сопровождение валидационных"
    в реальном Inter браузера — 192.3px, на грани переполнения при 218px
    контейнера; 222px даёт небольшой запас, не позволяя при этом влезть
    третьему слову "мероприятий" на первую строку). Проверено
    getBoundingClientRect — при 218px первая строка сама переносилась на
    2 (получалось 3 строки вместо 2).
  */
  .tag-pill--wrap {
    flex-shrink: 0;
    width: min(222px, calc(222 / 390 * 100vw));
  }

  .tag-pill--wrap .tag-pill__break {
    display: block;
  }
}

/*
  Модификаторы для блока «Модели оборудования» (карточка модели, 444:3427)
  и первого экрана страницы модели (444:3875). Плашка та же, но ниже
  базовой: 26px против 30 (23 строка + 1 нижний паддинг + 2 обводки), и в
  своих цветах. Правила стоят ПОСЛЕ мобильного media query намеренно:
  мобильный блок переопределяет .tag-pill целиком (высоту, паддинги, цвет),
  и при равной специфичности выигрывает тот, кто ниже в файле — иначе на
  телефоне плашки моделей теряли бы свои цвета и размер.

  Высота — min-height, а не height: редактор впишет свой перечень, длинный
  тег обязан перенестись и увеличить плашку, а не вылезти из неё.

  Радиус — 13px, а не полный pill. 999px браузер зажимает до половины
  фактической высоты: у однострочной плашки это ровно 13 (половина
  min-height: 26px) — задуманный вид, — а у четырёхстрочной уже ≈47, и
  горизонтальный паддинг 10px, посчитанный под 13, перестаёт держать текст
  внутри рамки: дуга уходит вглубь плашки на 30–45px и крайние строки
  пересекают обводку. 13px даёт тот же вид на однострочной и не зависит от
  высоты. Тот же приём уже принят выше для базовых плашек на телефоне
  (border-radius: min(15px, ...) вместо --radius-pill).
*/
.tag-pill--model,
.tag-pill--model-hero {
  height: auto;
  min-height: 26px;
  padding: 0 10px 1px;
  border-radius: 13px;
  line-height: 23px;
  white-space: normal;
  overflow-wrap: break-word;
}

.tag-pill--model {
  border-color: var(--color-model-tag-border);
  font-size: 12px;
  color: var(--color-model-tag-ink);
}

/* На странице модели плашка стоит на фоне страницы (а не на белой
   карточке), поэтому у неё своя заливка. */
.tag-pill--model-hero {
  border-color: var(--color-model-hero-tag-border);
  background: var(--color-surface);
  font-size: 13px;
  color: var(--color-ink);
  /* +5px к каждому внутреннему отступу (правка пользователя).
     23 строка + 5 + 6 + 2 обводки = 36 — отсюда новый min-height.
     Радиус пересчитан под новую высоту: 18 = половина 36, то есть
     однострочная плашка по-прежнему выглядит полной пилюлей, а на
     многострочной дуга не лезет в текст. */
  padding: 5px 15px 6px;
  min-height: 36px;
  border-radius: 18px;
}