/* Wspolne style MKS Zachod Sobotka: gorne menu, przyciski, pasek najblizszego meczu. */

.top-nav-link {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 10px;
  white-space: nowrap;
  opacity: 0.9;
  cursor: pointer;
  text-decoration: none;
}
.top-nav-link:hover { opacity: 1; color: #F5C400; }
.nav-active { color: #F5C400 !important; }

/* ===== GORNY PASEK ===== */
.pasek-gora {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #08090d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.pasek-gora.nad-hero {
  position: fixed;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  border-bottom-color: transparent;
}
.pasek-gora.nad-hero.przyklejony {
  background: rgba(8, 9, 13, 0.94);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.pasek-srodek {
  max-width: 82rem;
  margin: 0 auto;
  height: 64px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.pasek-lewo { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pasek-menu { display: flex; align-items: center; gap: 2px; }
.pasek-herb { display: flex; justify-content: center; line-height: 0; }
.pasek-herb img {
  height: 46px;
  width: auto;
  border-radius: 50%;
  transition: transform 0.25s ease;
}
.pasek-herb:hover img { transform: scale(1.06); }
.pasek-prawo { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.pasek-cta {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #05070d;
  background: #F5C400;
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pasek-cta:hover { background: #ffd633; transform: translateY(-1px); }
.pasek-kontakt-mob { display: none; }

/* Przycisk hamburgera, widoczny tylko na malych ekranach */
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 6px 8px 6px 0;
  cursor: pointer;
}

@media (max-width: 980px) {
  .pasek-srodek { height: 56px; padding: 0 12px; }
  .pasek-herb img { height: 40px; }
  .menu-toggle { display: block; }
  .pasek-kontakt { display: none; }
  .pasek-kontakt-mob { display: block; }
  #glowne-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #08090d;
    border-bottom: 3px solid #F5C400;
    flex-direction: column;
    align-items: stretch;
    padding: 4px 0;
    z-index: 900;
  }
  #glowne-menu.otwarte { display: flex; }
  #glowne-menu .top-nav-link {
    padding: 14px 18px;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
}

@media (max-width: 560px) {
  .pasek-cta { font-size: 10px; padding: 8px 12px; }
}

/* Pasek najblizszego meczu */
.mecz-pasek {
  background: #F5C400;
  color: #003DA5;
  padding: 10px 16px;
}
.mecz-pasek-srodek {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13px;
  font-weight: 700;
}
.mecz-pasek-etykieta {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: #003DA5;
  color: #F5C400;
  padding: 3px 8px;
}
.mecz-pasek-termin { font-weight: 400; }
.mecz-pasek a { color: #003DA5; text-decoration: underline; font-size: 11px; }

/* ==================================================================
   Warstwa wizualna: zaokrąglenia, gradienty sekcji, delikatny ruch
   ================================================================== */

:root {
  --klub-blue: #003DA5;
  --klub-blue-ciemny: #001a4a;
  --klub-yellow: #F5C400;
  --r-maly: 8px;
  --r-sredni: 14px;
  --r-duzy: 22px;
  --cien: 0 2px 10px rgba(0, 20, 70, 0.08);
  --cien-mocny: 0 10px 28px rgba(0, 20, 70, 0.16);
}

/* Zaokrąglenia kafli */
.news-card,
.dark-card,
.player-card,
.gallery-item,
.karta,
.kafel {
  border-radius: var(--r-sredni);
  overflow: hidden;
}

.news-card,
.karta {
  box-shadow: var(--cien);
}

.news-card,
.dark-card,
.gallery-item,
.kafel {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.news-card:hover,
.dark-card:hover,
.gallery-item:hover,
.kafel:hover {
  transform: translateY(-4px);
  box-shadow: var(--cien-mocny);
}

.club-btn {
  border-radius: 999px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.club-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 61, 165, 0.35);
}

.tag-blue,
.tag-yellow {
  border-radius: 999px;
  padding-left: 9px;
  padding-right: 9px;
}

/* Tła sekcji: jasne i ciemne pasy, żeby sekcje się rozdzielały */
.sekcja-jasna { background: linear-gradient(180deg, #ffffff 0%, #f3f6fc 100%); }
.sekcja-szara { background: linear-gradient(180deg, #f3f6fc 0%, #e8edf7 100%); }
.sekcja-ciemna { background: linear-gradient(140deg, #0a0f1d 0%, #001a4a 55%, #00266b 100%); }
.sekcja-niebieska { background: linear-gradient(135deg, #003DA5 0%, #0052d4 100%); }

/* Cienka kreska w barwach klubu między sekcjami */
.kreska-klubu {
  height: 3px;
  background: linear-gradient(90deg, var(--klub-blue) 0%, var(--klub-yellow) 50%, var(--klub-blue) 100%);
}

/* Przewijany pasek z wynikami, ciągnie się w bok bez końca */
.wyniki-pasek {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #001a4a 0%, #003DA5 50%, #001a4a 100%);
  border-top: 2px solid var(--klub-yellow);
  border-bottom: 2px solid var(--klub-yellow);
  padding: 13px 0;
  display: none;
}

.wyniki-pasek.gotowy { display: block; }

.wyniki-tor {
  display: flex;
  width: max-content;
  animation: wyniki-jedzie 46s linear infinite;
}

.wyniki-pasek:hover .wyniki-tor { animation-play-state: paused; }

.wyniki-ciag { display: flex; align-items: center; }

.wynik-poz {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  white-space: nowrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

.wynik-data {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.wynik-my { font-weight: 900; color: #fff; }

.wynik-liczby {
  font-weight: 900;
  color: var(--klub-yellow);
  letter-spacing: 1px;
}

.wynik-termin { font-size: 11px; color: rgba(255, 255, 255, 0.6); }

.wynik-romb {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  background: var(--klub-yellow);
  transform: rotate(45deg);
}

@keyframes wyniki-jedzie {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .wyniki-pasek { padding: 11px 0; }
  .wynik-poz { font-size: 12px; padding: 0 16px; gap: 7px; }
}

/* Delikatne pojawianie się sekcji przy przewijaniu */
.pojaw {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.pojaw.widoczne {
  opacity: 1;
  transform: none;
}

/* Powolny najazd zdjęcia w hero */
@keyframes hero-najazd {
  from { transform: scale(1.02); }
  to { transform: scale(1.07); }
}

.hero-strzalka {
  position: absolute;
  bottom: 62px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.75);
  font-size: 22px;
  animation: hero-skok 2.2s ease-in-out infinite;
  text-decoration: none;
  z-index: 3;
}

@keyframes hero-skok {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
  50% { transform: translate(-50%, 8px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slajd.akt,
  .hero-strzalka { animation: none; }
  .wyniki-pasek { overflow-x: auto; }
  .wyniki-tor { animation: none; }
  .pojaw { opacity: 1; transform: none; transition: none; }
  .news-card:hover, .dark-card:hover, .gallery-item:hover, .kafel:hover, .club-btn:hover { transform: none; }
}

/* ===== NAGLOWEK PODSTRONY ===== */
.naglowek-strony {
  position: relative;
  background: linear-gradient(140deg, #000d24 0%, #001a4a 48%, #00307f 100%);
  padding: 44px 16px 40px;
  overflow: hidden;
}
.naglowek-strony::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 196, 0, 0.18) 0%, rgba(245, 196, 0, 0) 70%);
  pointer-events: none;
}
.naglowek-strony::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--klub-blue), var(--klub-yellow) 50%, var(--klub-blue));
}
.naglowek-strony > * { position: relative; z-index: 1; }

/* ===== KAFELKI NA PODSTRONACH ===== */
.stat-box {
  border-radius: var(--r-sredni);
  box-shadow: 0 8px 22px rgba(0, 61, 165, 0.18);
}
.pole { border-radius: 10px; }

/* ===== STRZALKI PRZY PASKU SKLADU ===== */
.sklad-ramka { position: relative; }
.sklad-strzalka {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #003DA5;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.sklad-strzalka:hover { background: #F5C400; transform: translateY(-50%) scale(1.08); }
.sklad-strzalka.lewo { left: -6px; }
.sklad-strzalka.prawo { right: -6px; }
.sklad-strzalka[disabled] { opacity: 0.25; cursor: default; }
.sklad-pasek {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 196, 0, 0.7) rgba(255, 255, 255, 0.12);
}
.sklad-pasek::-webkit-scrollbar { height: 8px; }
.sklad-pasek::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.12); border-radius: 999px; }
.sklad-pasek::-webkit-scrollbar-thumb { background: rgba(245, 196, 0, 0.75); border-radius: 999px; }
.sklad-podpowiedz { font-size: 11px; color: rgba(255, 255, 255, 0.55); }
@media (max-width: 860px) {
  .sklad-strzalka { width: 34px; height: 34px; font-size: 17px; }
  .sklad-strzalka.lewo { left: -2px; }
  .sklad-strzalka.prawo { right: -2px; }
}

/* ===== SEKCJA W CIEMNYM, SUROWYM STYLU ===== */
.sekcja-legia {
  background: #0b0c10;
  padding: 58px 0 54px;
  color: #fff;
}
.legia-srodek { max-width: 82rem; margin: 0 auto; padding: 0 18px; }
.legia-naglowek {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.legia-tytul {
  font-size: 34px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  margin: 0;
}
.legia-link {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #F5C400;
  text-decoration: none;
  white-space: nowrap;
}
.legia-link:hover { color: #fff; }
.legia-siatka {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.legia-kafel { display: block; text-decoration: none; }
.legia-foto {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  background: #15161c;
  margin-bottom: 12px;
}
.legia-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.3s ease;
}
.legia-kafel:hover .legia-foto img { transform: scale(1.06); }
.legia-meta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #F5C400;
  margin-bottom: 7px;
}
.legia-kropka { color: #6b6f7a; margin: 0 2px; }
.legia-naglowek-kafla {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  transition: color 0.2s ease;
}
.legia-kafel:hover .legia-naglowek-kafla { color: #F5C400; }
.legia-ladowanie {
  grid-column: 1 / -1;
  padding: 50px 20px;
  text-align: center;
  color: #6b6f7a;
  font-size: 13px;
  text-decoration: none;
}
.legia-skroty {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 34px;
}
.legia-skrot {
  display: block;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  text-decoration: none;
  background: linear-gradient(120deg, rgba(0, 61, 165, 0.35), rgba(255, 255, 255, 0.02));
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.legia-skrot:hover {
  border-color: rgba(245, 196, 0, 0.6);
  transform: translateY(-3px);
}
.legia-skrot-etykieta {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #F5C400;
  margin-bottom: 6px;
}
.legia-skrot-tytul {
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
}
@media (max-width: 1024px) {
  .legia-siatka { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 640px) {
  .sekcja-legia { padding: 40px 0 38px; }
  .legia-tytul { font-size: 24px; }
  .legia-siatka { grid-template-columns: 1fr; gap: 20px; }
  .legia-skroty { grid-template-columns: 1fr; }
  .legia-naglowek-kafla { font-size: 16px; }
}

/* Kotwice nie chowaja sie pod przyklejonym paskiem */
section[id], article[id] { scroll-margin-top: 78px; }

/* Wpis na liscie aktualnosci: zdjecie obok tekstu, na telefonie jedno pod drugim */
.wpis-karta {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: var(--r-sredni, 14px);
  box-shadow: 0 8px 24px rgba(0, 25, 80, 0.07);
  overflow: hidden;
  margin-bottom: 24px;
}
@media (max-width: 720px) {
  .wpis-karta { grid-template-columns: 1fr; }
}

/* Siatki sekcji. Zdefiniowane tutaj, a nie w atrybucie style, zeby na waskim
   ekranie dalo sie je zwinac. Wpisane w style nie daly sie nadpisac i strony
   przewijaly sie w bok na telefonie. */
.dwie-kolumny { display: grid; grid-template-columns: 1fr 1fr; }
.trzy-kolumny { display: grid; grid-template-columns: repeat(3, 1fr); }
.kafle-statystyk { display: grid; grid-template-columns: 1fr 1fr; }
.siatka-zawodnikow { display: grid; grid-template-columns: repeat(4, 1fr); }
.siatka-galerii { display: grid; grid-template-columns: repeat(3, 1fr); }

@media (max-width: 980px) {
  .trzy-kolumny { grid-template-columns: repeat(2, 1fr); }
  .siatka-zawodnikow { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .dwie-kolumny { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .trzy-kolumny,
  .siatka-zawodnikow,
  .siatka-galerii { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .trzy-kolumny { grid-template-columns: 1fr; }
}