/* Sekcja „promo_countdown" — pasek promocyjny nad nagłówkiem (sections/promo_countdown.php).
   Mobile-first, breakpoint 1024px. Wszystkie wartości z tokenów --ds-*;
   fallbacki z hexami, które były w projekcie, są tu zbędne — plik ładuje się
   zawsze po design-system.css, więc tokeny są już zdefiniowane.

   Kontrast (APCA, liczony na realnym --ds-gradient-brand, nie na jaśniejszym
   gradiencie z makiety — najsłabszy przystanek to #1A48C8):
     komunikat, biel na pasku            13px/500 → Lc 90,0 (próg 90) ✓
     komunikat, biel na pasku, desktop   14px/500 → Lc 90,0 (próg 85) ✓
     licznik, biel na pastylce           14px/600 → Lc 78,2 (próg 75) ✓
   Pastylka ma nakładkę 20% bieli, więc jest jaśniejsza od paska i liczy się
   osobno. Przy 13,5px w wadze 700 (wartości z makiety) nie przechodziła progu:
   14px w wadze 600 to minimum, które przechodzi — waga 600 liczy się w APCA
   jak +2px, czyli efektywnie 16px i próg 75. Nie zmniejszaj stopnia pisma
   ani nie podnoś krycia nakładki bez przeliczenia obu na nowo. */

/* Cały pasek jest linkiem (<a>), stąd display/text-decoration/color —
   bez nich <a> zostałby elementem liniowym w domyślnym błękicie z podkreśleniem. */
.msos-promo {
  display: block;
  background-image: var(--ds-gradient-brand);
  color: var(--ds-color-on-primary);
  font-family: var(--ds-font-body);
  text-decoration: none;
}

/* Pasek nie udaje przycisku: reakcją na kursor jest podkreślenie komunikatu,
   nie zmiana tła pastylki. Podniesienie krycia nakładki zbiłoby kontrast bieli
   poniżej progu (patrz wyliczenia wyżej), a poświata pod paskiem to sygnatura
   szablonu (CLAUDE.md, reguła 16). */
.msos-promo:hover .msos-promo__msg,
.msos-promo:focus-visible .msos-promo__msg {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Globalny focus (design-system.css) rysuje obwódkę w --ds-color-primary
   z offsetem na zewnątrz — na tym gradiencie byłaby niewidoczna, a offset
   wychodziłby poza pasek. Biel do wewnątrz. */
.msos-promo:focus-visible {
  outline: 2px solid var(--ds-color-on-primary);
  outline-offset: -3px;
}

/* Szerokość i oś bierze .container-ms — pasek stoi dokładnie w tej samej osi
   co nawigacja (sections/header.php też opiera się na .container-ms). */
.msos-promo__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding-block: var(--ds-space-2); /* 8px — ten sam rytm co pasek, który ten zastępuje */
  /* Pasek jest w całości klikalny, więc obowiązuje go podłoga celu dotykowego
     (CLAUDE.md, reguła 15). Podłoga, a nie doklejony padding, bo wysokość ma
     dwie fazy: z pastylką wychodzi 40px, a po terminie — kiedy pastylka znika
     i zostaje sam komunikat — tylko ~36px. Jedna reguła pokrywa obie. */
  min-height: 44px;
}

/* Na 360px cała linia (komunikat + pastylka) zajmuje niemal całą szerokość,
   a domyślne 16px .container-ms z każdej strony wypchnęłoby pastylkę do drugiej
   linii. Do 1023px zwężamy padding — na telefonie treść i tak jest wyśrodkowana,
   więc oś z nawigacją nic tu nie traci; od 1024px wraca padding kontenera. */
@media (max-width: 1023.98px) {
  .msos-promo__inner { padding-inline: var(--ds-space-2); }
}

.msos-promo__msg {
  margin: 0;
  font-size: var(--ds-text-label); /* 13px — podłoga czytelności (CLAUDE.md, reguła 10) */
  font-weight: var(--ds-weight-medium);
  line-height: 1.2;
  color: var(--ds-color-on-primary);
  white-space: nowrap;
}

.msos-promo__emoji {
  font-size: var(--ds-text-body-sm);
  margin-right: var(--ds-space-1);
}

/* Pastylka prowadzi wzrok tłem, krojem display i podkładką — nie grubością
   pisma (waga 600 to sufit, CLAUDE.md reguła 8). Promień pełny, bo to badge,
   nie przycisk: ten sam wyjątek co .badge i .text-eyebrow w design-system.css.
   Pasek nie jest klikalny i nie udaje CTA. */
.msos-promo__clock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--ds-radius-full);
  padding: var(--ds-space-1) var(--ds-space-3);
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-body-sm);
  font-weight: var(--ds-weight-semi);
  /* Jawna interlinia zamiast `normal` — General Sans daje tu ~1,4, przez co
     pastylka rosła do 30px i podnosiła cały pasek o 8px ponad rytm paska,
     który zastępuje. Pasek stoi w pierwszym kadrze, każde 4px to linijka
     mniej między H1 a CTA (CLAUDE.md → „Kompaktowość"). */
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ds-color-on-primary);
  white-space: nowrap;
}

/* Stała szerokość pastylki, nie tylko rezerwacja na czas ładowania. Dwa
   powody naraz: licznik startuje dopiero w JS (bez tego pastylka rozepchnęłaby
   linię po pierwszym tyknięciu — CLS), a potem zapis skraca się co minutę, gdy
   minuty i sekundy schodzą do jednej cyfry — pastylka zwężałaby się o ~7px
   i przesuwała komunikat obok. `tabular-nums` wyrównuje szerokość cyfr, ale
   nie liczbę znaków, więc sama nie wystarcza. Wysokości nie rezerwujemy tu
   wcale — daje ją twarda spacja w markupie (patrz sections/promo_countdown.php).
   125px = zmierzona szerokość najdłuższego zapisu („3d 23h 59m 59s", 124,2px)
   zaokrąglona w górę. Zmiana formatu w assets/js/promo_countdown.js wymaga
   przemierzenia tej wartości. */
.msos-promo__clock { min-width: 125px; }

/* Po terminie: ten sam pasek i ten sam układ, bez pastylki. Klasę ustawia
   PHP przy renderze albo JS w chwili przekroczenia terminu. */
.msos-promo.is-ended .msos-promo__clock { display: none; }

.msos-promo__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 1024px) {
  .msos-promo__inner {
    gap: var(--ds-space-4);
    padding-block: 10px; /* między --ds-space-2 (8px) i --ds-space-3 (12px) — na desktopie tylko lekka redukcja z 12px */
  }
  .msos-promo__msg   { font-size: var(--ds-text-body-sm); }
  .msos-promo__emoji { font-size: var(--ds-text-body); }
  .msos-promo__clock {
    font-size: var(--ds-text-body);
    padding: 5px var(--ds-space-4); /* 5px — pół kroku między --ds-space-1 i --ds-space-2, pastylka ma zostać niska */
  }
  /* Pełne jednostki („3d 23h 59min 59sek") — zmierzone 178,1px. Uwaga: to
     16px, nie 15px: powyżej 1024px design-system.css podmienia --ds-text-body
     na wartość desktopową. Termin dalszy niż 10 dni doda cyfrę w dniach
     i wymaga przemierzenia tej wartości. */
  .msos-promo__clock { min-width: 179px; }
}