/* ==========================================================================
   DOČASNÁ ÚPRAVA HERO SEKCIE — Slovakia Youth Powerlifting Challenge 2026
   Pridané: 14. 8. 2026
   Upravené: 18. 8. 2026 — promo obrázok pozadia vrátený na pôvodný
   (images/hero_banner.jpg z style.css), countdown + tlačidlo "More info"
   ostávajú zachované.

   Účel: Na titulnej stránke zobraziť odpočítavanie do štartu súťaže
   (7. 11. 2026, 10:00) + tlačidlo "More info" smerujúce na kalendár.

   AKO SA VRÁTIŤ K PÔVODNEJ HERO SEKCII (bez countdownu):
   1. V index.html odstrániť riadok:
        <link rel="stylesheet" href="css/hero-temp.css" />
   2. V index.html odstrániť riadok:
        <script src="js/hero-countdown-temp.js" defer></script>
   3. V index.html v <section class="hero hero-temp"> odstrániť triedu
      "hero-temp" a celý blok <div class="hero-countdown" ...>...</div>
   (Tento súbor aj js/hero-countdown-temp.js môžu ostať v projekte nepoužité,
   alebo sa dajú zmazať.)
   ========================================================================== */

.hero-countdown {
  position: relative;
  z-index: 1;
  margin-top: 2.5rem;
}

.hero-countdown-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: clamp(0.85rem, 2vw, 1rem);
  margin-bottom: 1.25rem;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-countdown-timer {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.hero-countdown-item {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
  min-width: 80px;
  padding: 0.9rem 0.5rem;
}

.hero-countdown-value {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1;
  color: white;
}

.hero-countdown-unit {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.hero-countdown-btn {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  background: var(--accent);
  color: white;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.hero-countdown-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  filter: brightness(1.08);
}

@media (max-width: 480px) {
  .hero-countdown-item {
    min-width: 65px;
    padding: 0.7rem 0.4rem;
  }
}