/* ============================================================================
   countdown.css — ODLICZANIE: zegar, pasek postępu (js/countdown.js)
   Część rozbitego css/style.css — kolejność wczytywania (ta sama na każdej
   podstronie) trzyma kaskadę identyczną jak w jednym pliku.
   ========================================================================== */

/* ODLICZANIE (slide-1) — całkowicie nieruchomy slajd (jak Dyskografia, bez
   pionowego scrolla): jadący napis + pasek postępu wyśrodkowane na ekranie. */
.countdown-stage{position:absolute;inset:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(34px,6vh,64px)}

/* PASEK POSTĘPU pod napisem — minimalistyczny (żadnego XP): cienki biały
   pasek w bladym rowku, pod nim dyskretna linijka "Pozostało: X dni".
   Wypełnienie = prawdziwy upłynięty ułamek czasu 21.09.2025 → 21.11.2027
   (samych dat celowo NIE pokazujemy) — szerokość i tekst ustawia HeroProgress
   w main.js, transition robi miękki dojazd do bieżącego % zaraz po wejściu. */
.hero-progress{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(560px,78vw)}

/* ZEGAR ODLICZANIA — cztery pola (dni / godziny / minuty / sekundy) nad paskiem
   postępu. Liczby idą tabelarycznie (font-variant-numeric:tabular-nums), więc
   pole nie „drga" przy zmianie cyfr; szerokość na jednostkę jest stała (min-width),
   żeby dwucyfrowe i trzycyfrowe dni nie rozpychały układu w bok.
   Wartości wpisuje HeroProgress (js/countdown.js). */
.countdown-clock{
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(6px,1.6vw,16px);margin-bottom:clamp(10px,2.2vh,22px);
}
.countdown-unit{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:clamp(46px,9vw,74px)}
.countdown-num{
  font-size:clamp(26px,5.2vw,44px);font-weight:700;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
  letter-spacing:0.01em;
}
/* BEZ ANIMACJI ZMIANY — wszystkie pola zachowują się tak jak milisekundy: liczba
   po prostu się podmienia, nic nie miga, nie gaśnie i nie rusza się z miejsca.
   (Dawne .is-tick / @keyframes cd-tick — usunięte na życzenie.) */

/* Milisekundy — jedyna różnica wobec reszty to szersze pole, bo mają trzy cyfry
   zamiast dwóch. Rozmiar i kolor identyczne jak dni/godziny/minuty/sekundy. */
.countdown-unit-ms{min-width:clamp(58px,11vw,92px)}
.countdown-lab{
  font-size:clamp(7px,1.1vw,9px);font-weight:600;
  letter-spacing:0.2em;text-indent:0.2em;text-transform:uppercase;
  color:rgba(255,255,255,0.38);white-space:nowrap;
}
/* Dwukropek między polami — wyrównany do wysokości cyfr, nie do etykiet. */
.countdown-sep{
  font-size:clamp(20px,4vw,34px);font-weight:300;line-height:1;
  color:rgba(255,255,255,0.22);transform:translateY(-2px);
}
.hero-progress-track{width:100%;height:5px;border-radius:999px;background:rgba(255,255,255,0.14);overflow:hidden}
.hero-progress-fill{height:100%;width:0%;border-radius:999px;background:#fff;box-shadow:0 0 14px rgba(255,255,255,0.35);transition:width 1.2s cubic-bezier(.22,1,.36,1)}
.hero-progress-days{font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.5);min-height:15px}

/* PODPIS NAD ZEGAREM — ustawiany z panelu admina (pusty = schowany).
   Ten sam rytm liter co etykiety jednostek pod liczbami, żeby nie wprowadzał
   nowego kroju do sekcji, która jest celowo minimalistyczna. */
.countdown-label{
  margin-bottom:14px;text-align:center;
  color:rgba(255,255,255,0.62);
  font:700 12px/1.4 var(--font-family);letter-spacing:.22em;text-transform:uppercase;
}
.countdown-label[hidden]{display:none}
@media(max-width:820px){
  .countdown-label{font-size:11px;letter-spacing:.16em;margin-bottom:10px}
}