/* ============================================================
   B00 · Announcement
   figma: node-id=14:59
   Зависит от assets/css/tokens.css
   ============================================================ */

/* Высота полосы известна из вёрстки: поля 8+8 и одна строка. Задаём её
   переменной сразу, а не ждём замера в header.js: пока переменная была
   нулём, хиро (100svh − --announce-h) рисовался выше на высоту полосы,
   а после замера сжимался — заголовок прыгал (CLS 0.06, правка 2026-09-22).
   Скрипт по-прежнему меряет и перезаписывает, но значение совпадает.
   Файл подключён только на лендинге, у блога полосы нет и переменная там 0. */
:root { --announce-h: calc(2 * var(--sc-space-2) + var(--p-small-lh)); }

@media (max-width: 640px) {
  :root { --announce-h: calc(2 * var(--sc-space-2) + var(--p-mini-lh)); }
}

.sc-announce {
  box-sizing: border-box;
  padding: var(--sc-space-2) var(--sc-pad-x); /* 8 по вертикали в макете */
  background: var(--background);
  color: var(--accent-foreground);
  text-align: center;
}

.sc-announce__text {
  /* Всегда одна строка: высота полосы = поля + line-height при любом шрифте.
     От неё считается высота хиро (--announce-h), и пока подменный шрифт
     переносил текст на две строки, а Onest — на одну, хиро прыгал при
     загрузке шрифта (Lighthouse CLS 0.18, правка 2026-09-22). */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

@media (max-width: 640px) {
  /* Строка анонса длинная и на телефоне ломалась надвое. Берём кегль mini
     и поджимаем поля самой полосы: строка идёт одной. Поля полосы здесь
     свои, не --sc-pad-x: это узкий бар, а не контентная секция. */
  .sc-announce {
    padding-inline: var(--sc-space-2);
  }

  /* Кегль тянется по ширине окна: на 390 это mini (12), на 320 — 10.
     Ступени между 10 и 12 в шкале нет, значение согласуемое: строка
     анонса длинная, а ломать её надвое в баре нельзя. */
  .sc-announce__text {
    font-size: clamp(9.5px, 3.05vw, var(--p-mini-size));
    line-height: var(--p-mini-lh);
  }
}