/* =========================================================
   LKS Brzoza Brzezówka — arkusz stylów
   Paleta: musztardowy + granat klubowy, jasne tło
   ========================================================= */

:root{
  /* --- Kolory klubowe --- */
  --navy-900:#0f2038;
  --navy-800:#16304f;
  --navy-700:#1d3f68;
  --navy-600:#2a548a;
  --navy-500:#3a6cab;
  --mustard-700:#a97e15;
  --mustard-600:#c99a1f;
  --mustard-500:#e3b93a;
  --mustard-400:#edcb64;
  --mustard-100:#fbf1d9;

  --paper:#ffffff;
  --paper-soft:#f6f4ee;
  --paper-line:#e7e3d6;

  --ink:#141d2b;
  --ink-soft:#4d5a6d;
  --ink-faint:#8792a1;

  --ok:#2f8f5b;

  --radius-s:6px;
  --radius-m:12px;
  --radius-l:22px;

  --shadow-card: 0 1px 2px rgba(15,32,56,.06), 0 8px 24px -12px rgba(15,32,56,.18);
  --shadow-pop: 0 18px 40px -18px rgba(15,32,56,.35);

  --wrap: 1180px;

  /* Nagłówki: Oswald, tekst i menu: Karla (jak na stronie Aspekt) */
  --ff-display:'Oswald', 'Arial Narrow', sans-serif;
  --ff-impact:'Oswald', 'Arial Narrow', sans-serif;
  --ff-body:'Karla', system-ui, -apple-system, sans-serif;

  --header-h: 64px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

:focus-visible{outline:3px solid var(--mustard-600); outline-offset:2px;}

body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  font-size:17px;
}

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
}

main{
  position:relative;
  background:var(--paper);
}

section{padding-block:72px;}
@media (max-width:720px){ section{padding-block:52px;} }

h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:500;
  letter-spacing:-.005em;
  color:var(--navy-900);
}

h2{font-size:clamp(1.9rem,4.2vw,2.9rem); line-height:1.12;}
h3{font-size:1.25rem;}

.lede{
  font-size:1.08rem;
  color:var(--ink-soft);
  max-width:56ch;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:36px;
}
.section-head .lede{margin-top:10px;}
@media (max-width:640px){
  .section-head{flex-direction:column; align-items:flex-start;}
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--ff-display);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--navy-700);
  background:var(--mustard-100);
  border:1px solid var(--mustard-400);
  padding:6px 14px;
  border-radius:100px;
}
.tag::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--mustard-600);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border-radius:100px;
  font-family:var(--ff-display);
  font-weight:500;
  letter-spacing:.02em;
  font-size:.96rem;
  border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:var(--mustard-500);
  color:var(--navy-900);
  box-shadow:var(--shadow-card);
}
.btn-primary:hover{background:var(--mustard-400); box-shadow:var(--shadow-pop);}
.btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.55);
  color:#fff;
}
.btn-ghost:hover{background:rgba(255,255,255,.12);}
.btn-outline{
  background:transparent;
  border-color:var(--navy-700);
  color:var(--navy-700);
}
.btn-outline:hover{background:var(--navy-700); color:#fff;}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--paper-line);
  overflow:visible;               /* pozwala logu wystawać poza pasek */
  transition:background-color .35s ease, backdrop-filter .35s ease,
             border-color .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled{
  box-shadow:0 10px 24px -18px rgba(15,32,56,.35);
}

/* Strona główna (z filmem w hero): menu wisi NAD filmem i jest przezroczyste,
   biały pasek pojawia się dopiero po scrollu. position:fixed wyjmuje header
   z przepływu strony — dzięki temu nad filmem nie ma żadnego białego paska. */
body:has(.hero-video) .site-header{
  position:fixed; left:0; right:0;
}
body:has(.hero-video) .site-header:not(.is-scrolled){
  background:transparent;
  backdrop-filter:none;
  border-bottom-color:transparent;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:6px;
  min-height:var(--header-h);
  position:relative;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  z-index:5;
}

/* Logo: samo herb, bez tła i obwódki. Na górze strony wystaje poniżej
   dolnej krawędzi paska menu, przy scrollowaniu kurczy się i wraca w linię menu. */
.brand img{
  width:86px; height:86px;
  object-fit:contain;
  margin-top:4px;
  margin-bottom:-28px;   /* efekt wystawania poza header, header ma overflow:visible */
  position:relative;
  filter:drop-shadow(0 8px 14px rgba(15,32,56,.22));
  transition:width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1),
             margin .35s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
.site-header.is-scrolled .brand img{
  width:42px; height:42px;
  margin-top:0; margin-bottom:0;
  filter:drop-shadow(0 3px 6px rgba(15,32,56,.18));
}

/* Nazwa klubu przy logo.
   - Na białym pasku (po scrollu / podstrony): granat z delikatnym, chłodnym błyskiem.
   - Nad filmem (góra strony głównej): musztardowe złoto z przesuwającym się blaskiem.
   Efekt to jedna animowana warstwa gradientu (bez pseudo-elementów), dzięki temu
   przy zmianie koloru headera nie pojawia się żadne dziwne tło. */
.brand-text{
  font-family:var(--ff-body);
  font-weight:600;
  font-size:1.2rem;
  letter-spacing:.03em;
  display:inline-block;
  background-image:linear-gradient(110deg,
    var(--navy-900) 0%,
    var(--navy-800) 36%,
    #6f9bd6 50%,
    var(--navy-800) 64%,
    var(--navy-900) 100%);
  background-size:250% 100%;
  background-position:100% 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:brand-shine 6s ease-in-out infinite;
  transition:font-size .35s ease, filter .3s ease;
}
.site-header.is-scrolled .brand-text{font-size:1.04rem;}

body:has(.hero-video) .site-header:not(.is-scrolled) .brand-text{
  background-image:linear-gradient(110deg,
    #c99a1f 0%,
    #e3b93a 34%,
    #fff3c4 50%,
    #e3b93a 66%,
    #c99a1f 100%);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 3px 8px rgba(0,0,0,.35));
}

@keyframes brand-shine{
  0%{ background-position:100% 0; }
  55%,100%{ background-position:0% 0; }
}

.nav-links{
  display:flex;
  align-items:center;
  gap:1.6rem;
}
/* węższe ekrany komputera: ciaśniejsze menu, bez napisu obok herbu (herb zostaje) */
@media (max-width:1440px) and (min-width:1181px){
  .nav-links{gap:1.05rem;}
  .nav-links a{font-size:.9rem;}
}
@media (max-width:1320px) and (min-width:1181px){
  .brand-text{display:none;}
}
.nav-links a{
  white-space:nowrap;
  font-family:var(--ff-body);
  font-weight:400;
  font-size:.94rem;
  color:var(--navy-900);
  opacity:.68;
  padding:.3rem 0;
  position:relative;
  background:none;
  border-radius:0;
  transition:opacity .18s ease, color .3s ease, text-shadow .3s ease;
}
.nav-links a:hover{opacity:1; background:none;}
.nav-links a.is-active{opacity:1; background:none;}
.nav-links a.is-active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-3px;
  height:2px; background:var(--mustard-500);
}
/* Nad filmem linki menu są białe */
body:has(.hero-video) .site-header:not(.is-scrolled) .nav-links a{
  color:#fff;
  opacity:.92;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
}
body:has(.hero-video) .site-header:not(.is-scrolled) .nav-links a:hover,
body:has(.hero-video) .site-header:not(.is-scrolled) .nav-links a.is-active{opacity:1;}

.nav-toggle{
  display:none;
  width:40px;height:40px;
  border-radius:10px;
  border:1px solid var(--paper-line);
  background:#fff;
  align-items:center;
  justify-content:center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";
  display:block;
  width:20px;height:2px;
  background:var(--navy-900);
  position:relative;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before{position:absolute; top:-6px;}
.nav-toggle span::after{position:absolute; top:6px;}
.nav-toggle.is-open span{background:transparent;}
.nav-toggle.is-open span::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle.is-open span::after{transform:translateY(-6px) rotate(-45deg);}

/* menu "hamburger" od 1180px w dół — 9 pozycji menu nie mieści się w jednym wierszu na węższych ekranach */
@media (max-width:1180px){
  .nav-toggle{display:flex;}
  .nav-links{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    background:#fff;
    border-bottom:1px solid var(--paper-line);
    padding:10px 24px 18px;
    gap:2px;
    display:none;
  }
  .nav-links.is-open{display:flex;}
  .nav-links a{padding:12px 10px;}
  .nav-links a.is-active::after{display:none;}
  /* rozwijane menu ma zawsze białe tło — linki zawsze granatowe */
  .nav-links.is-open a,
  body:has(.hero-video) .site-header:not(.is-scrolled) .nav-links.is-open a{
    color:var(--navy-900); opacity:.75; text-shadow:none;
  }
  .nav-links.is-open a.is-active,
  body:has(.hero-video) .site-header:not(.is-scrolled) .nav-links.is-open a.is-active{
    font-weight:600; opacity:1;
  }
  .brand img{width:62px; height:62px; margin-bottom:-18px;}
  .site-header.is-scrolled .brand img{width:38px; height:38px; margin-bottom:0;}
  .brand-text{font-size:1.08rem;}
  .site-header.is-scrolled .brand-text{font-size:1rem;}
}

/* ---------- Menu rozwijane drużyn (Tabela i terminarz / Statystyki / Galeria) ---------- */
.nav-group{position:relative; display:flex; align-items:center;}
.nav-caret{
  display:inline-block; width:6px; height:6px; margin-left:6px; vertical-align:2px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); opacity:.7; transition:transform .2s ease;
}
.nav-sub{
  position:absolute; top:100%; left:50%; z-index:70;
  min-width:210px; padding:8px;
  display:flex; flex-direction:column; gap:2px;
  background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-m);
  box-shadow:var(--shadow-pop);
  opacity:0; visibility:hidden; transform:translate(-50%, 12px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-sub::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px;} /* "most" — kursor nie gubi menu */
.nav-sub::after{
  content:""; position:absolute; top:-6px; left:50%; width:10px; height:10px; margin-left:-5px;
  background:#fff; border-left:1px solid var(--paper-line); border-top:1px solid var(--paper-line); transform:rotate(45deg);
}
.nav-group:hover .nav-sub,
.nav-group:focus-within .nav-sub{opacity:1; visibility:visible; transform:translate(-50%, 6px);}
.nav-group:hover .nav-caret,
.nav-group:focus-within .nav-caret{transform:rotate(225deg); vertical-align:-1px;}
.nav-links .nav-sub a,
body:has(.hero-video) .site-header:not(.is-scrolled) .nav-links .nav-sub a{
  color:var(--navy-900); opacity:.8; text-shadow:none;
  padding:9px 14px; border-radius:8px; font-size:.9rem; white-space:nowrap;
  transition:background .15s ease, opacity .15s ease;
}
.nav-links .nav-sub a:hover{background:var(--mustard-100); opacity:1;}
.nav-links .nav-sub a.is-active,
body:has(.hero-video) .site-header:not(.is-scrolled) .nav-links .nav-sub a.is-active{
  background:var(--mustard-100); opacity:1; font-weight:600; box-shadow:inset 3px 0 0 var(--mustard-500);
}
.nav-links .nav-sub a.is-active::after{display:none;}

@media (max-width:1180px){
  .nav-links{max-height:calc(100vh - 70px); overflow-y:auto;}
  .nav-group{display:block;}
  /* nazwa drużyny działa jak przycisk: rozwija/zwija jej podstrony */
  .nav-group > .nav-parent{display:flex; align-items:center; justify-content:space-between;}
  .nav-caret,
  .nav-group:hover .nav-caret,
  .nav-group:focus-within .nav-caret{width:8px; height:8px; margin:0 6px 0 12px; vertical-align:0; transform:rotate(45deg) translate(-2px, -2px);}
  .nav-group.is-expanded .nav-caret{transform:rotate(225deg) translate(-2px, -2px);}
  .nav-sub,
  .nav-group:hover .nav-sub,
  .nav-group:focus-within .nav-sub{display:none;}
  .nav-group.is-expanded .nav-sub{
    display:flex; animation:nav-sub-in .2s ease;
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; padding:0 0 6px 14px; margin-left:10px;
    border:none; border-left:2px solid var(--paper-line); border-radius:0; box-shadow:none; background:none;
  }
  .nav-sub::before,
  .nav-sub::after{display:none;}
  .nav-links.is-open .nav-sub a,
  body:has(.hero-video) .site-header:not(.is-scrolled) .nav-links.is-open .nav-sub a{padding:8px 10px; font-size:.88rem; opacity:.7;}
  .nav-links.is-open .nav-group.is-expanded > .nav-parent,
  body:has(.hero-video) .site-header:not(.is-scrolled) .nav-links.is-open .nav-group.is-expanded > .nav-parent{opacity:1;}
}
@keyframes nav-sub-in{from{opacity:0; transform:translateY(-4px);}}

/* ---------- Zakładki podstron drużyny (w nagłówku podstrony) ---------- */
.team-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}
.team-tabs a{
  padding:8px 16px; border-radius:100px;
  font-family:var(--ff-display); font-size:.86rem; letter-spacing:.03em;
  color:#dbe3ee; border:1px solid rgba(255,255,255,.22);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.team-tabs a:hover{background:rgba(255,255,255,.1); color:#fff;}
.team-tabs a.is-active{background:var(--mustard-500); border-color:var(--mustard-500); color:var(--navy-900); font-weight:600;}

/* ---------- Hero ---------- */
.hero-banner{
  position:relative;
  background:var(--navy-900);       /* tło zapasowe, gdyby film się nie załadował */
  padding-top:calc(var(--header-h) + 40px);
  padding-bottom:80px;
  overflow:hidden;
  text-align:center;
}
/* Film w tle hero — wypełnia sekcję, header (z-index:60) pływa nad nim */
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.hero-video-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(15,32,56,.62) 0%,
    rgba(15,32,56,.32) 45%,
    rgba(15,32,56,.72) 100%);
}
.hero-banner-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-banner-crest{
  width:112px; height:112px;
  margin-bottom:16px;
  will-change:transform, opacity;
  transition:transform .12s linear, opacity .12s linear;
}
.hero-eyebrow{
  font-family:var(--ff-display);
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  font-size:clamp(.8rem,1.5vw,.95rem);
  color:rgba(255,255,255,.92);
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}

/* Nagłówek hero "BRZOZA" — gradient musztardowy -> navy + przesuwający się blask */
.hero-banner-title{
  font-family:var(--ff-impact);
  font-weight:600;
  font-size:clamp(3.6rem,13vw,9.5rem);
  line-height:.94;
  letter-spacing:.05em;
  margin-top:10px;
  transform-origin:50% 55%;
  position:relative;
  display:inline-block;
  animation:brzoza-title-in 1.15s cubic-bezier(.16,.8,.24,1) both;

  background:linear-gradient(100deg,
    var(--mustard-500) 0%,
    var(--mustard-600) 38%,
    var(--navy-700) 62%,
    var(--navy-900) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)) drop-shadow(0 16px 32px rgba(0,0,0,.4));
}

.hero-banner-title::after{
  content:'BRZOZA';
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    transparent 25%,
    rgba(255,255,255,.8) 50%,
    transparent 75%);
  background-size:250% 100%;
  background-position:-150% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  pointer-events:none;
  animation:brzoza-shine 4.5s ease-in-out 1.3s infinite;
}

@keyframes brzoza-title-in{
  0%{ transform:scale(2.6); opacity:0; }
  55%{ opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes brzoza-shine{
  0%{ background-position:-150% 0; }
  45%{ background-position:150% 0; }
  100%{ background-position:150% 0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-banner-title{animation:none;}
  .hero-banner-title::after{display:none;}
  .brand-text{animation:none;}
  .hero-banner-crest{transition:none;}
}
.hero-banner-sub{
  font-family:var(--ff-impact);
  font-weight:500;
  letter-spacing:.22em;
  font-size:clamp(.9rem,2vw,1.2rem);
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
  margin-top:4px;
}
.hero-banner-line{
  display:flex; align-items:center; gap:14px;
  margin-top:18px;
}
.hero-banner-line span{width:36px; height:2px; background:var(--mustard-500);}
.hero-banner-line em{
  font-style:normal;
  font-family:var(--ff-display);
  font-weight:500;
  letter-spacing:.16em;
  font-size:.86rem;
  color:var(--mustard-600);
}
.hero-banner .lede{
  margin-top:16px;
  text-align:center;
  max-width:44ch;
  margin-inline:auto;
  font-size:.98rem;
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}

/* ---------- Countdown: wąskie paski w stylu realmadrid.pl ---------- */
.matches{
  background:var(--paper);
  padding-block:0;
}
.match-grid{
  display:flex;
  flex-direction:column;
}

.match-card{
  width:100%;
  padding:14px clamp(24px,9vw,150px);
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);
  align-items:center;
  gap:22px;
  margin:0;
}
.match-left{justify-self:start;}
.match-countdown-compact{justify-self:end;}
.match-card.is-navy{
  background:linear-gradient(100deg, var(--navy-900), var(--navy-700) 85%);
  color:#fff;
}
.match-card.is-mustard{
  background:linear-gradient(100deg, var(--mustard-600), var(--mustard-500) 85%);
  color:var(--navy-900);
}
/* paski są klikalne — prowadzą do podstrony drużyny */
.match-card[data-href]{cursor:pointer; transition:filter .2s ease;}
.match-card[data-href]:hover{filter:brightness(1.06);}

.match-left{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:150px;
}
.match-left-top{
  display:flex; align-items:center; gap:8px;
}
.team-tag{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.8;
}
.match-date{
  font-family:var(--ff-display);
  font-size:.9rem;
  font-weight:500;
}

/* [nazwa] [herb] VS [herb] [nazwa] — herby i "VS" zawsze idealnie na środku paska,
   a nazwy drużyn "odchodzą" na boki (kolumny 1fr po obu stronach są równe). */
.match-versus{
  display:grid;
  grid-template-columns:1fr auto auto auto 1fr;
  align-items:center;
  column-gap:12px;
  min-width:0;
}
.match-club{display:contents;}
.match-club-name{
  font-family:var(--ff-display);
  font-size:.96rem;
  font-weight:500;
  white-space:nowrap;
}
.match-versus .match-club:first-child .match-club-name{justify-self:end; text-align:right;}
.match-versus .match-club:last-child .match-club-name{justify-self:start; text-align:left;}
.match-crest{
  width:30px; height:30px;
  object-fit:contain;
  flex:none;
}
.match-vs{
  font-family:var(--ff-display);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.04em;
  opacity:.65;
}

.match-countdown-compact{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  min-width:150px;
}
.count-label{
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.75;
}
.countdown{
  display:flex;
  gap:9px;
}
.countdown .unit{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.countdown .num{
  font-family:var(--ff-display);
  font-size:1.02rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  display:block;
  line-height:1.1;
}
.countdown .lab{
  font-size:.5rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.75;
}

@media (min-width:761px) and (max-width:1000px){
  .match-card{padding-inline:28px;}
}

/* Telefony: paski węższe, tylko dwie linie tekstu:
   1) LKS Brzoza [herb] VS [herb] Przeciwnik
   2) data meczu (kończy się pod lewym herbem) + odliczanie (zaczyna się pod prawym herbem)
   Reguły dotyczą tylko pasków meczów (.match-card), nie odliczania na podstronach drużyn. */
@media (max-width:760px){
  .match-card{
    display:grid;
    /* te same kolumny co [nazwa][herb][VS][herb][nazwa] — dolny wiersz symetryczny względem środka */
    grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);
    grid-template-areas:
      "versus versus versus versus versus"
      "left   left   .      countdown countdown";
    align-items:center;
    gap:7px 9px;
    padding:10px 14px 11px;
    text-align:left;
  }
  .match-left{grid-area:left; min-width:0; display:block; justify-self:end; text-align:right;}
  .match-left-top{display:none;}            /* etykieta "I drużyna · klasa A" ukryta */
  .match-date{font-size:.78rem; line-height:1.2;}

  .match-countdown-compact{
    grid-area:countdown;
    min-width:0; width:auto;
    justify-self:start;
    align-items:flex-start;
    gap:0;
  }
  .match-card .count-label{display:none;}
  .match-card .countdown{gap:6px;}
  .match-card .countdown .unit{flex-direction:row; align-items:baseline;}
  .match-card .countdown .lab{display:none;}
  .match-card .countdown .num{font-size:.82rem; line-height:1.2;}
  .match-card .countdown .num::after{
    font-size:.62rem; font-weight:500; opacity:.75; margin-left:1px;
  }
  .match-card .countdown .num[data-u="d"]::after{content:"d";}
  .match-card .countdown .num[data-u="h"]::after{content:"g";}
  .match-card .countdown .num[data-u="m"]::after{content:"m";}
  .match-card .countdown .num[data-u="s"]::after{content:"s";}

  .match-versus{
    grid-area:versus;
    width:100%;
    column-gap:9px;
  }
  @supports (grid-template-columns:subgrid){
    .match-versus{grid-template-columns:subgrid;}   /* herby dokładnie w kolumnach paska */
  }
  .match-club-name{font-size:.84rem; white-space:normal; line-height:1.15;}
  .match-crest{width:24px; height:24px;}
  .match-vs{font-size:.68rem;}
}

/* ---------- Cards / grid general ---------- */
.info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
@media (max-width:880px){ .info-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .info-grid{grid-template-columns:1fr;} }

.info-card{
  border:1px solid var(--paper-line);
  border-radius:var(--radius-l);
  padding:26px;
  background:#fff;
  transition:box-shadow .2s ease, transform .2s ease;
}
.info-card:hover{box-shadow:var(--shadow-card); transform:translateY(-3px);}
.info-card .num{
  font-family:var(--ff-display);
  font-size:2.1rem;
  font-weight:600;
  color:var(--mustard-600);
  display:block;
  margin-bottom:8px;
}

/* ---------- Teams teaser (home) ---------- */
.team-photo-card{
  display:block;
  position:relative;
  border-radius:var(--radius-l);
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:var(--shadow-card);
}
.team-photo-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
/* przybliżenie po najechaniu myszką, dotknięciu palcem lub zaznaczeniu klawiaturą — takie samo dla wszystkich drużyn */
.team-photo-card:hover img,
.team-photo-card:active img,
.team-photo-card:focus-visible img{transform:scale(1.045);}
.team-photo-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,22,41,.88), rgba(10,22,41,0) 55%);
}
.team-photo-card .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:24px;
  color:#fff;
  z-index:1;
}
.team-photo-card .cap .league{
  font-family:var(--ff-display);
  font-size:.74rem;
  letter-spacing:.12em;
  color:var(--mustard-400);
  font-weight:500;
}
.team-photo-card .cap h3{color:#fff; margin-top:4px;}
.team-photo-card .cap-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px; font-size:.86rem; font-weight:600;
  color:var(--mustard-400);
  transition:gap .18s ease;
}
/* telefon: napis na zdjęciu w jednej linii przy dolnej krawędzi — nie zasłania zawodników
   (liga jest widoczna tuż niżej, w nagłówku tabeli) */
@media (max-width:760px){
  .team-photo-card::after{background:linear-gradient(0deg, rgba(10,22,41,.85), rgba(10,22,41,.3) 16%, rgba(10,22,41,0) 26%);}
  .team-photo-card .cap{display:flex; align-items:baseline; justify-content:space-between; gap:2px 10px; flex-wrap:wrap; padding:0 14px 9px;}
  .team-photo-card .cap .league{display:none;}
  .team-photo-card .cap h3{margin-top:0; font-size:1.05rem; line-height:1.2; white-space:nowrap;}
  .team-photo-card .cap-link{margin-top:0; font-size:.74rem; white-space:nowrap;}
}
.team-photo-card:hover .cap-link{gap:10px;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy-900);
  color:#c8d2e0;
  padding-block:56px 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:34px;
}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }

.footer-brand{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.footer-brand img{width:40px;height:40px; object-fit:contain;}
.footer-brand span{
  font-family:var(--ff-body);
  font-weight:300; color:#fff; font-size:1.02rem;
}
.site-footer h4{
  color:#fff; font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:14px; font-weight:600;
  font-family:var(--ff-display);
}
.site-footer ul{display:flex; flex-direction:column; gap:9px;}
.site-footer a:hover{color:#fff;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:44px; padding-top:22px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:.82rem; color:#8ea0bb;
}
.socials{display:flex; gap:10px;}
.socials a{
  width:36px;height:36px;border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08);
}
.socials a:hover{background:var(--mustard-500); color:var(--navy-900);}

/* ---------- Inner page hero (banner) ---------- */
.page-banner{
  position:relative;
  padding-block:64px 46px;
  background:linear-gradient(155deg, var(--navy-800), var(--navy-900));
  color:#fff;
  overflow:hidden;
}
.page-banner::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(600px 260px at 85% 0%, rgba(227,185,58,.22), transparent 60%);
}
.page-banner .wrap{position:relative;}
.page-banner .crumb{
  font-size:.82rem; color:var(--mustard-400); font-weight:600; margin-bottom:10px;
}
.page-banner h1{color:#fff; font-size:clamp(1.9rem,4.4vw,3rem);}
.page-banner p{color:#c8d2e0; margin-top:10px; max-width:60ch;}

/* ---------- Historia timeline ---------- */
.timeline{
  position:relative;
  max-width:760px;
  margin-inline:auto;
  padding-left:32px;
  border-left:2px solid var(--paper-line);
}
.timeline-item{
  position:relative;
  padding:20px 22px;
  margin-bottom:22px;
  background:#fff;
  border:1px solid var(--paper-line);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
  transition:transform .25s ease, box-shadow .25s ease;
}
.timeline-item:hover{transform:translateX(4px); box-shadow:var(--shadow-pop);}
.timeline-item:last-child{margin-bottom:0;}
.timeline-item::before{
  content:"";
  position:absolute;
  left:-38px; top:24px;
  width:13px;height:13px;border-radius:50%;
  background:var(--mustard-500);
  border:3px solid var(--paper);
  box-shadow:0 0 0 2px var(--mustard-500);
}
.timeline-item:nth-child(even)::before{
  background:var(--navy-700);
  box-shadow:0 0 0 2px var(--navy-700);
}
.timeline-year{
  font-family:var(--ff-display);
  color:var(--navy-900);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.02em;
  margin-bottom:6px;
}
.timeline-item p{color:var(--ink-soft); font-size:.96rem;}
.timeline-source{
  text-align:center;
  font-size:.82rem;
  color:var(--ink-faint);
  margin-top:22px;
}
.timeline-source a{color:var(--navy-700); text-decoration:underline;}

/* ---------- Sponsors ---------- */
.sponsor-tiers{display:flex; flex-direction:column; gap:44px;}
.sponsor-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
@media (max-width:760px){ .sponsor-grid{grid-template-columns:repeat(2,1fr);} }
.sponsor-slot{
  border:1px dashed var(--paper-line);
  border-radius:var(--radius-m);
  aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-soft);
  color:var(--ink-faint);
  font-size:.82rem;
  text-align:center;
  padding:12px;
}
.tier-title{
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.tier-title h3{color:var(--navy-900);}
.tier-title .line{flex:1; height:1px; background:var(--paper-line);}

.cta-panel{
  margin-top:56px;
  background:linear-gradient(155deg, var(--navy-800), var(--navy-900));
  border-radius:var(--radius-l);
  padding:40px;
  color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.cta-panel h3{color:#fff;}
.cta-panel p{color:#c8d2e0; margin-top:6px;}

/* ---------- Pakiety sponsorskie ---------- */
.packages-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:36px;
}
@media (max-width:900px){
  .packages-grid{grid-template-columns:1fr;}
}
.package-card{
  background:#fff;
  border:1px solid var(--paper-line);
  border-radius:var(--radius-l);
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  gap:18px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.package-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-pop);
}
.package-card--featured{
  border-color:var(--mustard-500);
  box-shadow:var(--shadow-card);
  position:relative;
}
.package-card__badge{
  position:absolute;
  top:-13px; left:28px;
  background:var(--mustard-500);
  color:var(--navy-900);
  font-family:var(--ff-display);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:100px;
}
.package-card h3{color:var(--navy-900); font-size:1.2rem;}
.package-card__tagline{color:var(--ink-faint); font-size:.86rem; margin-top:-10px;}
.package-card ul{display:flex; flex-direction:column; gap:11px;}
.package-card li{
  position:relative;
  padding-left:22px;
  color:var(--ink-soft);
  font-size:.93rem;
  line-height:1.5;
}
.package-card li::before{
  content:"";
  position:absolute; left:2px; top:.55em;
  width:7px;height:7px;border-radius:50%;
  background:var(--mustard-500);
}
.package-card .btn{margin-top:auto; align-self:flex-start;}

/* ---------- Kontakt ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:46px;
  align-items:start;
}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }

.contact-list{display:flex; flex-direction:column; gap:18px; margin-top:26px;}
.contact-item{
  display:flex; gap:14px;
  padding:16px;
  border:1px solid var(--paper-line);
  border-radius:var(--radius-m);
}
.contact-item .ic{
  width:40px;height:40px;border-radius:50%;
  background:var(--mustard-100);
  color:var(--mustard-700);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.contact-item h4{font-size:.98rem; margin-bottom:2px;}
.contact-item p{color:var(--ink-soft); font-size:.94rem;}

.map-frame{
  border-radius:var(--radius-l);
  overflow:hidden;
  border:1px solid var(--paper-line);
  box-shadow:var(--shadow-card);
}
.map-frame iframe{width:100%; height:340px; border:0; display:block;}

.form-card{
  background:var(--paper-soft);
  border:1px solid var(--paper-line);
  border-radius:var(--radius-l);
  padding:30px;
}
.field{margin-bottom:16px;}
.field label{
  display:block; font-size:.85rem; font-weight:600;
  color:var(--navy-800); margin-bottom:6px;
}
.field input, .field textarea{
  width:100%;
  padding:12px 14px;
  border-radius:var(--radius-s);
  border:1px solid var(--paper-line);
  background:#fff;
  font:inherit;
  color:var(--ink);
}
.field textarea{resize:vertical; min-height:110px;}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--navy-600);
  box-shadow:0 0 0 3px rgba(42,84,138,.15);
}
.form-note{font-size:.82rem; color:var(--ink-faint); margin-top:10px;}

/* ---------- Sponsorzy i partnerzy ---------- */
.sponsors{
  padding-block:72px;
  background:var(--paper);
  text-align:center;
}
.sponsors__eyebrow-rule{
  width:56px; height:3px;
  background:var(--mustard-500);
  margin:0 auto 20px;
  border-radius:2px;
}
.sponsors__title{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:clamp(1.7rem,3.2vw,2.3rem);
  color:var(--navy-900);
  margin:0 0 10px;
}
.sponsors__subtitle{
  font-family:var(--ff-body);
  font-size:1rem;
  color:var(--ink-soft);
  margin:0 auto 44px;
  max-width:520px;
  line-height:1.6;
}
.sponsors__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(180px,220px));
  justify-content:center;
  gap:18px;
  max-width:var(--wrap);
  margin:0 auto;
}
@media (max-width:860px){
  .sponsors__grid{grid-template-columns:repeat(2, minmax(180px,220px));}
}

.sponsor-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:26px 18px;
  background:#fff;
  border:1px solid var(--paper-line);
  border-radius:var(--radius-m);
  text-decoration:none;
  cursor:default;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sponsor-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card);
  border-color:var(--mustard-500);
}
.sponsor-card__logo{
  height:52px;
  max-width:100%;
  width:auto;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:.7;
  transition:filter .22s ease, opacity .22s ease;
}
.sponsor-card:hover .sponsor-card__logo,
.sponsor-card:focus-visible .sponsor-card__logo{
  filter:grayscale(0%);
  opacity:1;
}
.sponsor-card__name{
  font-family:var(--ff-body);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--navy-700);
  line-height:1.45;
  text-align:center;
}
@media (max-width:640px){
  .sponsors{padding-block:52px; padding-inline:14px;}
  .sponsors__subtitle{margin-bottom:32px;}
  /* telefony: po trzech sponsorów obok siebie, mniejsze loga i podpisy */
  .sponsors__grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:8px;
    max-width:none;
  }
  .sponsor-card{padding:12px 6px; gap:8px;}
  .sponsor-card__logo{height:28px;}
  .sponsor-card__name{font-size:.64rem; line-height:1.3; overflow-wrap:anywhere;}
}

/* ---------- Wyśrodkowany nagłówek sekcji (jak sponsorzy) ---------- */
.teams-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 44px;
}
.eyebrow-rule{
  width:56px; height:3px;
  background:var(--mustard-500);
  margin:0 auto 20px;
  border-radius:2px;
}
.teams-head h2{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:clamp(1.7rem,3.2vw,2.3rem);
  color:var(--navy-900);
  margin:0 0 12px;
}
.teams-head p{
  font-family:var(--ff-body);
  font-size:1rem;
  color:var(--ink-soft);
  line-height:1.6;
  margin:0 auto;
}
.teams-head .btn{margin-top:24px;}

/* ---------- Animacje pojawiania się przy scrollowaniu ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.sponsors__grid .reveal:nth-child(1){transition-delay:.03s;}
.sponsors__grid .reveal:nth-child(2){transition-delay:.07s;}
.sponsors__grid .reveal:nth-child(3){transition-delay:.11s;}
.sponsors__grid .reveal:nth-child(4){transition-delay:.15s;}
.sponsors__grid .reveal:nth-child(5){transition-delay:.19s;}
.sponsors__grid .reveal:nth-child(6){transition-delay:.23s;}
.sponsors__grid .reveal:nth-child(7){transition-delay:.27s;}
.sponsors__grid .reveal:nth-child(8){transition-delay:.31s;}
.sponsors__grid .reveal:nth-child(9){transition-delay:.35s;}
.sponsors__grid .reveal:nth-child(10){transition-delay:.39s;}
.sponsors__grid .reveal:nth-child(11){transition-delay:.43s;}
.sponsors__grid .reveal:nth-child(12){transition-delay:.47s;}
.info-grid .reveal:nth-child(1){transition-delay:.04s;}
.info-grid .reveal:nth-child(2){transition-delay:.1s;}
.info-grid .reveal:nth-child(3){transition-delay:.16s;}
.info-grid .reveal:nth-child(4){transition-delay:.22s;}
.timeline .reveal:nth-child(1){transition-delay:.02s;}
.timeline .reveal:nth-child(2){transition-delay:.06s;}
.timeline .reveal:nth-child(3){transition-delay:.1s;}
.timeline .reveal:nth-child(4){transition-delay:.14s;}
.timeline .reveal:nth-child(5){transition-delay:.18s;}
.timeline .reveal:nth-child(6){transition-delay:.22s;}
.timeline .reveal:nth-child(7){transition-delay:.26s;}
.timeline .reveal:nth-child(8){transition-delay:.3s;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- Lokalizacja / mapa ---------- */
.location{
  background:var(--paper);
}
/* zaraz po sekcji drużyn (z kartą „Zagraj w barwach Brzozy”) — bez podwójnego odstępu */
.teams-section + .location{padding-top:0;}
.location-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:32px;
  align-items:stretch;
}
@media (max-width:860px){
  .location-grid{grid-template-columns:1fr;}
}
.location-info{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.location-info .contact-item{
  background:#fff;
}
.location-btn{
  margin-top:6px;
  align-self:flex-start;
}
.location-map{
  position:relative;
  border-radius:var(--radius-l);
  overflow:hidden;
  box-shadow:var(--shadow-pop);
  min-height:320px;
  transition:transform .35s ease, box-shadow .35s ease;
}
.location-map:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 54px -22px rgba(15,32,56,.45);
}
.location-map iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  filter:saturate(1.05);
}
.location-map-badge{
  position:absolute;
  right:16px; bottom:16px;
  background:#fff;
  color:var(--navy-900);
  font-family:var(--ff-display);
  font-weight:500;
  font-size:.82rem;
  padding:9px 16px;
  border-radius:100px;
  box-shadow:var(--shadow-card);
  transition:transform .18s ease, background .18s ease;
}
.location-map-badge:hover{
  transform:translateY(-2px);
  background:var(--mustard-400);
}

/* =========================================================
   Podstrony drużyn (Drużyna I / Drużyna II)
   ========================================================= */
.tp-hero{position:relative; background:linear-gradient(155deg,var(--navy-800),var(--navy-900)); color:#fff; padding-block:76px 46px; overflow:hidden;}
.tp-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(600px 260px at 85% 0%, rgba(227,185,58,.22), transparent 60%);}
.tp-hero .wrap{position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:center;}
@media (max-width:900px){ .tp-hero .wrap{grid-template-columns:1fr;} }
.tp-hero .crumb{font-size:.82rem; color:var(--mustard-400); font-weight:600; margin-bottom:10px;}
.tp-hero h1{color:#fff; font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.08;}
.tp-hero-league{color:#c8d2e0; margin-top:10px;}
.tp-hero-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
/* nagłówek drużyny: tylko 2 kafelki (miejsce, punkty) — równo po prawej */
.tp-hero-stats.is-two{grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:340px; width:100%; justify-self:end;}
@media (max-width:900px){ .tp-hero-stats.is-two{justify-self:start;} }
.tp-stat{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-m); padding:16px 8px; text-align:center;}
.tp-stat b{display:block; font-family:var(--ff-display); font-size:1.6rem; font-weight:600; color:var(--mustard-400); line-height:1.1;}
.tp-stat span{font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#c8d2e0;}

.tp-section{padding-block:44px;}
/* ostatnia sekcja podstrony (galeria, statystyki, drużyna) — więcej miejsca przed stopką */
main > .tp-section:last-child{padding-bottom:96px;}
@media (max-width:720px){ main > .tp-section:last-child{padding-bottom:64px;} }
.tp-title{margin-bottom:22px;}
.tp-title h2{font-family:var(--ff-display); font-weight:500; font-size:clamp(1.5rem,2.6vw,1.9rem); color:var(--navy-900); position:relative; padding-top:16px;}
.tp-title h2::before{content:""; position:absolute; left:0; top:0; width:44px; height:3px; border-radius:2px; background:var(--mustard-500);}
.tp-title p{color:var(--ink-soft); font-size:.94rem; margin-top:4px;}
.tp-empty{color:var(--ink-faint); padding:18px 0;}

/* --- kafelki ostatnich meczów --- */
.tp-recent{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity; padding:6px 4px 16px; scrollbar-width:thin;}
.tp-tile{--c:var(--ink-faint); flex:0 0 210px; scroll-snap-align:start; text-align:left; font:inherit; color:var(--ink); cursor:pointer;
  background:#fff; border:1px solid var(--paper-line); border-top:4px solid var(--c); border-radius:var(--radius-m); padding:14px 15px 12px;
  box-shadow:var(--shadow-card); transition:transform .2s ease, box-shadow .2s ease;}
.tp-tile:hover,.tp-tile:focus-visible{transform:translateY(-4px); box-shadow:var(--shadow-pop);}
.tp-tile.is-w{--c:var(--ok);} .tp-tile.is-d{--c:var(--mustard-500);} .tp-tile.is-l{--c:#c0392b;}
.tp-tile-top{display:flex; justify-content:space-between; font-size:.78rem; color:var(--ink-faint); margin-bottom:10px;}
.tp-ha{font-family:var(--ff-display); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; background:var(--paper-soft); border-radius:100px; padding:2px 9px; color:var(--navy-700);}
.tp-tile-row{display:flex; justify-content:space-between; gap:8px; font-size:.9rem; padding:3px 0;}
.tp-tile-row span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tp-tile-row strong{font-family:var(--ff-display); font-size:1.15rem; color:var(--navy-900);}
.tp-tile-foot{display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--paper-line); font-size:.76rem; color:var(--ink-faint);}
.tp-res{width:22px; height:22px; border-radius:50%; background:var(--c); color:#fff; font-family:var(--ff-display); font-size:.72rem; display:grid; place-items:center;}
.tp-tile.is-d .tp-res{color:var(--navy-900);}
.tp-more{margin-left:auto; color:var(--navy-700); font-weight:600;}

/* --- następny mecz --- */
.tp-next{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; color:#fff; border-radius:var(--radius-l); padding:28px 32px;
  background:linear-gradient(100deg,var(--navy-900),var(--navy-700)); box-shadow:var(--shadow-pop);}
@media (max-width:760px){ .tp-next{grid-template-columns:1fr; padding:24px 22px;} }
.tp-next-round{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mustard-400);}
.tp-next-date{font-family:var(--ff-display); font-size:clamp(1.3rem,2.6vw,1.8rem); margin:6px 0 10px;}
.tp-next-teams{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-family:var(--ff-display); font-size:1.1rem;}
.tp-next-teams em{font-style:normal; font-size:.75rem; opacity:.65;}
.tp-next-count{display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
.tp-next .countdown{gap:10px;}
.tp-next .countdown .unit{background:rgba(255,255,255,.12); border-radius:var(--radius-s); padding:10px 12px; min-width:58px;}
.tp-next .countdown .num{font-size:1.7rem;}
.tp-next .countdown .lab{font-size:.6rem;}

/* --- tabela + statystyki --- */
.tp-grid{display:grid; grid-template-columns:1.55fr 1fr; gap:30px; align-items:start;}
@media (max-width:980px){ .tp-grid{grid-template-columns:1fr;} }
.tp-table-wrap{overflow-x:auto; background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-l); box-shadow:var(--shadow-card);}
.tp-table{width:100%; border-collapse:collapse; font-size:.9rem;}
.tp-table th{font-family:var(--ff-display); font-weight:500; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); text-align:center; padding:12px 8px; border-bottom:1px solid var(--paper-line); background:var(--paper-soft);}
.tp-table td{text-align:center; padding:11px 8px; border-bottom:1px solid var(--paper-line);}
.tp-table .c-team{text-align:left; white-space:nowrap;}
.tp-table th.c-team{text-align:left;}
.tp-table tbody tr:last-child td{border-bottom:none;}
.tp-table tbody tr:hover{background:var(--paper-soft);}
.tp-table tr.us{background:var(--mustard-100); box-shadow:inset 4px 0 0 var(--mustard-500);}
.tp-table tr.us td{font-weight:600; color:var(--navy-900);}
.tp-pos{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; font-family:var(--ff-display); font-size:.8rem;}
.tp-table tr.us .tp-pos{background:var(--navy-900); color:#fff;}
.tp-table tr:nth-child(1) .tp-pos{background:var(--mustard-500); color:var(--navy-900);}
@media (max-width:640px){ .hide-s{display:none;} }
.tp-note{font-size:.8rem; color:var(--ink-faint); margin-top:10px;}
.tp-note a{color:var(--navy-700); text-decoration:underline;}

.tp-card{background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-l); padding:8px 22px; box-shadow:var(--shadow-card);}
.tp-stat-row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--paper-line); font-size:.92rem; color:var(--ink-soft);}
.tp-stat-row:last-child{border-bottom:none;}
.tp-stat-row b{color:var(--navy-900); font-family:var(--ff-display); font-weight:500; text-align:right;}
.tp-forms{display:flex; gap:5px;}
.tp-form{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--ff-display); font-size:.74rem; color:#fff;}
.tp-form.is-w{background:var(--ok);} .tp-form.is-d{background:var(--mustard-500); color:var(--navy-900);} .tp-form.is-l{background:#c0392b;}

/* --- terminarz --- */
.tp-fix{background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-l); box-shadow:var(--shadow-card); overflow:hidden;}
.tp-fix-row{display:grid; grid-template-columns:70px 190px 1fr auto; gap:14px; align-items:center; padding:14px 22px; border-bottom:1px solid var(--paper-line); font-size:.92rem;}
.tp-fix-row:last-child{border-bottom:none;}
.tp-fix-row:hover{background:var(--paper-soft);}
.tp-fix-round{font-family:var(--ff-display); font-size:.78rem; letter-spacing:.06em; color:var(--ink-faint); text-transform:uppercase;}
.tp-fix-date{color:var(--navy-700); font-weight:600;}
.tp-fix-teams em{font-style:normal; opacity:.5; margin:0 4px;}
@media (max-width:760px){ .tp-fix-row{grid-template-columns:1fr auto; gap:4px 10px;} .tp-fix-teams{grid-column:1 / -1; order:3;} }

/* --- strzelcy / asysty / skład --- */
.tp-two{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
@media (max-width:860px){ .tp-two{grid-template-columns:1fr;} }
.tp-two h3{font-family:var(--ff-display); font-weight:500; color:var(--navy-900); margin-bottom:12px;}
.tp-empty-card{padding:26px 24px; display:flex; flex-direction:column; align-items:flex-start; gap:16px;}
.tp-empty-card p{color:var(--ink-soft); font-size:.94rem;}
.tp-rank{list-style:none;}
.tp-rank li{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--paper-line);}
.tp-rank li:last-child{border-bottom:none;}
.tp-rank-n{width:26px; height:26px; border-radius:50%; background:var(--paper-soft); display:grid; place-items:center; font-family:var(--ff-display); font-size:.8rem;}
.tp-rank li:first-child .tp-rank-n{background:var(--mustard-500);}
.tp-rank-name{flex:1;}
.tp-coach{display:flex; align-items:center; gap:14px; background:var(--navy-900); color:#fff; border-radius:var(--radius-m); padding:16px 22px; margin-bottom:16px;}
.tp-coach span{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mustard-400);}
.tp-squad{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px;}
.tp-player{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-m); padding:12px 14px;}
.tp-no{width:34px; height:34px; border-radius:50%; background:var(--navy-900); color:var(--mustard-400); font-family:var(--ff-display); display:grid; place-items:center; flex:none;}
.tp-player span:last-child{margin-left:auto; font-size:.74rem; color:var(--ink-faint);}

/* --- modal: przebieg meczu --- */
.tp-modal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(15,32,56,.62); backdrop-filter:blur(4px);}
.tp-modal.is-open{display:flex; animation:tp-fade .2s ease;}
@keyframes tp-fade{from{opacity:0;} to{opacity:1;}}
.tp-modal-card{position:relative; background:#fff; border-radius:var(--radius-l); width:100%; max-width:720px; max-height:90vh; overflow:auto; box-shadow:0 30px 80px -20px rgba(0,0,0,.5);}
.tp-modal-close{position:absolute; top:12px; right:14px; z-index:2; width:38px; height:38px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:1.5rem; line-height:1;}
.tp-modal-close:hover{background:rgba(255,255,255,.28);}
.tp-m-head{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; text-align:center; padding:34px 28px 22px; color:#fff; background:linear-gradient(155deg,var(--navy-800),var(--navy-900));}
.tp-m-team{font-family:var(--ff-display); font-size:1.05rem;}
.tp-m-team.us{color:var(--mustard-400);}
.tp-m-score{font-family:var(--ff-display); font-size:2.6rem; font-weight:600; line-height:1;}
.tp-m-score i{font-style:normal; opacity:.5; margin:0 6px;}
.tp-m-meta{grid-column:1 / -1; font-size:.8rem; color:#c8d2e0;}
.tp-tl{position:relative; padding:12px 24px 24px;}
.tp-tl::before{content:""; position:absolute; left:50%; top:16px; bottom:24px; width:2px; margin-left:-1px; background:var(--paper-line);}
.tp-tl-half{position:relative; text-align:center; margin:14px 0;}
.tp-tl-half span{display:inline-block; background:#fff; border:1px solid var(--paper-line); border-radius:100px; padding:4px 16px; font-family:var(--ff-display); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);}
.tp-tl-none{position:relative; text-align:center; font-size:.82rem; color:var(--ink-faint); background:#fff; width:max-content; margin:8px auto; padding:0 10px;}
.tp-ev{position:relative; display:grid; grid-template-columns:1fr 54px 1fr; align-items:center; margin:12px 0;}
.tp-ev-min{justify-self:center; z-index:1; width:46px; text-align:center; background:var(--navy-900); color:#fff; border-radius:100px; font-size:.74rem; padding:3px 0; font-family:var(--ff-display);}
.tp-ev-home{display:flex; justify-content:flex-end; align-items:center; gap:10px; text-align:right; padding-right:8px;}
.tp-ev-away{display:flex; justify-content:flex-start; align-items:center; gap:10px; text-align:left; padding-left:8px;}
.tp-ev-txt{display:flex; flex-direction:column; font-size:.9rem;}
.tp-ev-txt small{color:var(--ink-faint); font-size:.74rem;}
.tp-tl-empty{padding:26px 28px 6px; color:var(--ink-soft); text-align:center;}
.tp-m-foot{padding:14px 24px 26px; text-align:center;}

/* utility */
.mt-0{margin-top:0;}
.center{text-align:center;}
.stack-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px;}

/* =========================================================
   Hero podstron: granat na środku, musztard po bokach
   (półprzezroczyste kolory, bez herbu, bez pasów, bez błysku)
   Napisy "Klub → ..." i kafelki statystyk: styl oryginalny
   ========================================================= */
.page-banner,
.tp-hero{
  --side:8%;        /* szerokość musztardu na brzegach */
  --fade:26%;        /* gdzie kończy się przejście i zaczyna granat */
  --a-navy:.88;      /* krycie granatu (mniej = bardziej przezroczysty) */
  --a-must:.6;       /* krycie musztardu */
  background:
    linear-gradient(90deg,
      rgba(227,185,58,var(--a-must)) 0%,
      rgba(201,154,31,var(--a-must)) var(--side),
      rgba(29,63,104,var(--a-navy)) var(--fade),
      rgba(22,48,79,var(--a-navy)) 50%,
      rgba(29,63,104,var(--a-navy)) calc(100% - var(--fade)),
      rgba(201,154,31,var(--a-must)) calc(100% - var(--side)),
      rgba(227,185,58,var(--a-must)) 100%);
  border-bottom:4px solid rgba(227,185,58,.7);
  overflow:hidden;
}

/* bez błysku i bez herbu */
.page-banner::before,
.tp-hero::before,
.page-banner::after{ content:none; animation:none; }

/* treść nad tłem */
.page-banner .wrap,
.tp-hero .wrap{ position:relative; z-index:1; }

/* brzoza (jak na koszulce klubowej) na środku nagłówka podstron — niebieska, ton w ton z tłem, jak delikatny nadruk.
   Nie dotyczy strony głównej ani historii (mają inne nagłówki). */
.page-banner::after,
.tp-hero::after{
  content:""; position:absolute; left:50%; top:50%; z-index:0;
  height:92%; aspect-ratio:368 / 597;
  transform:translate(-50%, -50%);
  background:url("../img/brzoza-szkic.svg?v=2") center / contain no-repeat;   /* ?v=… zmieniaj przy podmianie obrazka */
  opacity:.22; pointer-events:none;
}
@media (max-width:720px){
  .page-banner::after,
  .tp-hero::after{ height:90%; opacity:.17; }
}

/* czytelność tekstu na musztardowych bokach nagłówka (laptopy ~1100–1600 px):
   1) miękki granatowy cień pod mniejszymi napisami (główny tytuł h1 zostaje bez zmian),
   2) cień pod liczbami i podpisami w kafelkach (same kafelki bez zmian),
   3) jaśniejsza, kremowa ścieżka „Klub → …” */
.page-banner p, .tp-hero-league, .tp-hero p{ color:#dde4ee; text-shadow:0 1px 2px rgba(10,22,41,.6), 0 1px 10px rgba(10,22,41,.5); }
.page-banner .crumb, .tp-hero .crumb{ color:#f7e7b4; text-shadow:0 1px 2px rgba(10,22,41,.65), 0 1px 10px rgba(10,22,41,.5); }
.tp-hero .team-tabs a:not(.is-active){ text-shadow:0 1px 3px rgba(10,22,41,.6), 0 1px 8px rgba(10,22,41,.45); }
.tp-stat b, .tp-stat span{ text-shadow:0 1px 2px rgba(10,22,41,.65), 0 1px 10px rgba(10,22,41,.5); }
.tp-stat span{ color:#dde4ee; }

/* musztardowa kreska pod nagłówkiem */
.page-banner h1::after,
.tp-hero h1::after{
  content:"";
  display:block;
  width:72px; height:4px;
  margin-top:16px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--mustard-500), var(--mustard-400));
  box-shadow:0 0 18px rgba(227,185,58,.55);
}

/* mniejsze ekrany: węższe musztardowe boki */
@media (max-width:900px){
  .page-banner, .tp-hero{ --side:4%; --fade:14%; }
}
/* telefony: tylko granat, bez musztardowych boków */
@media (max-width:760px){
  .page-banner,
  .tp-hero{
    background:
      linear-gradient(90deg,
        rgba(29,63,104,var(--a-navy)) 0%,
        rgba(22,48,79,var(--a-navy)) 50%,
        rgba(29,63,104,var(--a-navy)) 100%);
  }
}