:root {
  --navy: #03152b;
  --navy-2: #071f3d;
  --blue: #073f86;
  --red: #e52b34;
  --red-dark: #c91e27;
  --paper: #f4f1eb;
  --white: #ffffff;
  --ink: #09131f;
  --muted: #66717e;
  --line: #d7dbe0;
  /* Kroje hostowane lokalnie - patrz assets/fonts/fonts.css.
     Barlow Condensed zastąpił Impact: ta sama oszczędność miejsca
     w nagłówkach, ale bez ciężkiej, „plakatowej" faktury. */
  --display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.shell { width: min(1220px, calc(100% - 48px)); margin-inline: auto; }

.site-header {
  position: absolute; inset: 0 0 auto; z-index: 20; height: 112px; display: flex; align-items: center;
  padding: 0 max(24px, calc((100vw - 1360px) / 2)); color: white; border-bottom: 1px solid rgba(255,255,255,.14);
}
.brand { display: flex; align-items: center; gap: 13px; margin-right: auto; }
.brand img { width: 52px; height: 78px; object-fit: cover; object-position: top; border: 1px solid rgba(255,255,255,.45); box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.brand span { display: flex; flex-direction: column; text-transform: uppercase; letter-spacing: .06em; }
.brand b { font-size: 15px; }
.brand small { color: rgba(255,255,255,.68); font-size: 10px; letter-spacing: .2em; margin-top: 4px; }
.desktop-nav { display: flex; height: 100%; align-items: center; gap: clamp(22px, 3.2vw, 48px); }
/* Dwuwyrazowe pozycje ("Terminarz tabela", "Zostań partnerem") mają stać
   słowo pod słowem, wyśrodkowane. Zawężenie na tyle, żeby drugie słowo
   zawsze zeszło do nowej linii, zamiast liczyć na zawijanie przy okazji. */
.desktop-nav a { position: relative; display: grid; place-items: center; height: 100%; max-width: 9em; text-align: center; line-height: 1.25; text-transform: uppercase; font-weight: 600; letter-spacing: .09em; font-size: 13px; }
.desktop-nav a:first-child::after, .desktop-nav a:hover::after { content: ""; position: absolute; bottom: 28px; width: 28px; height: 3px; background: var(--red); }
.header-socials { margin-left: 42px; display: flex; gap: 8px; align-items: center; }

/* Wyszukiwarka w nagłówku: lupka rozwijająca pole obok ikon social. */
.header-search { position: relative; }
.header-search > summary {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
  color: #fff; cursor: pointer; list-style: none; transition: .2s;
}
.header-search > summary::-webkit-details-marker { display: none; }
.header-search > summary:hover { border-color: var(--red); background: var(--red); }
.header-search[open] > summary { border-color: var(--red); background: var(--red); }
.header-search form {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 60;
  display: flex; gap: 6px; padding: 10px; width: 310px;
  background: #fff; border-radius: 8px;
  box-shadow: 0 18px 44px rgba(3, 21, 43, .28);
}
.header-search input {
  flex: 1; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 5px; font-size: 14px; color: var(--ink);
}
.header-search button {
  padding: 9px 14px; border: 0; border-radius: 5px; cursor: pointer;
  background: var(--navy); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.header-search button:hover { background: var(--red); }
/* Ikony marek rysujemy inline (views/partials/social-icons.php), więc kolor
   dziedziczy się przez currentColor - jeden zestaw dla nagłówka i stopki. */
.social-link { display: inline-flex; align-items: center; gap: 8px; transition: .25s ease; }
.social-link svg { display: block; }
.social-link-header { justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: #fff; }
.social-link-header:hover { border-color: var(--red); background: var(--red); }
.social-link-footer { font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: .08em; color: #cfe0f2; }
.social-link-footer:hover { color: var(--red); }
.mobile-menu { display: none; position: relative; }
.mobile-menu summary { cursor: pointer; text-transform: uppercase; font-size: 12px; font-weight: 600; letter-spacing: .12em; list-style: none; border: 1px solid rgba(255,255,255,.4); padding: 12px; }
.mobile-menu nav { position: absolute; right: 0; top: 46px; min-width: 210px; padding: 14px; background: var(--navy); box-shadow: 0 18px 50px #0008; }
.mobile-menu nav a { display: block; padding: 12px 10px; border-bottom: 1px solid #ffffff18; font-weight: 700; }

.hero { position: relative; min-height: 900px; overflow: hidden; background: var(--navy); color: white; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,16,35,.98) 0%, rgba(2,16,35,.82) 36%, rgba(2,16,35,.28) 68%, rgba(2,16,35,.48) 100%), linear-gradient(0deg, rgba(2,16,35,.92) 0%, transparent 55%); }
.hero-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(110deg, transparent 49.8%, #fff 50%, transparent 50.2%), radial-gradient(#fff 1px, transparent 1px); background-size: 900px 100%, 24px 24px; mask-image: linear-gradient(90deg, black, transparent 65%); }
.hero::after { content: ""; position: absolute; right: -95px; bottom: 10px; width: 260px; height: 12px; background: var(--red); transform: rotate(-48deg); }
.hero-content { position: relative; z-index: 2; padding-top: 190px; }
.eyebrow, .kicker { margin: 0 0 22px; color: #4c6280; text-transform: uppercase; font-weight: 700; letter-spacing: .18em; font-size: 12px; }
.eyebrow { color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 12px; }
.eyebrow i { width: 5px; height: 5px; background: var(--red); border-radius: 50%; }
/* Barlow Condensed jest szerszy i wyższy od Impactu, więc skala nagłówków
   jest niższa, a interlinia luźniejsza niż w pierwotnej makiecie. */
.hero h1, .section h2, .history-copy h2, .recruitment h2, .academy-copy h2, .contact-title h2 {
  margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; line-height: .94;
}
.hero h1 { font-size: clamp(56px, 7.4vw, 116px); max-width: 15ch; text-shadow: 0 8px 26px rgba(0,0,0,.28); }
.hero h1::after { content: ""; display: block; width: 66px; height: 5px; background: var(--red); margin-top: 24px; }
.hero-lead { margin: 18px 0 28px; font-size: 18px; color: rgba(255,255,255,.82); max-width: 52ch; line-height: 1.65; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.button { min-height: 54px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; font-size: 14px; font-weight: 600; transition: .25s ease; }
.button span { font-size: 20px; font-weight: 400; }
.button-primary { background: var(--red); color: white; }
.button-primary:hover { background: var(--red-dark); transform: translateY(-2px); }
.button-ghost { border: 1px solid rgba(255,255,255,.72); color: white; }
.button-ghost:hover, .button-outline:hover { background: white; color: var(--navy); }
.button-dark { background: var(--navy); color: white; }
.button-dark:hover { background: var(--red); }
.button-outline { border: 1px solid rgba(255,255,255,.45); color: white; }
.next-match { width: min(880px, 100%); margin: 42px 0 0 42px; padding: 22px 34px 24px; background: linear-gradient(115deg, rgba(4,26,51,.94), rgba(4,23,44,.86)); border: 1px solid rgba(169,194,222,.42); box-shadow: 0 24px 70px rgba(0,0,0,.35); backdrop-filter: blur(12px); }
.match-label { display: flex; align-items: center; gap: 16px; color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; }
.match-label i { height: 1px; flex: 1; background: linear-gradient(90deg, var(--red), transparent); }
.match-content { display: grid; grid-template-columns: 180px 1fr 150px; align-items: center; min-height: 116px; }
.match-club { display: flex; align-items: center; gap: 14px; text-transform: uppercase; font-weight: 700; line-height: 1.25; font-size: 11px; letter-spacing: .08em; }
.match-club img { width: 48px; height: 76px; object-fit: cover; object-position: top; }
.match-date { padding: 0 30px; border-inline: 1px solid rgba(255,255,255,.2); }
.match-date strong { font-family: var(--display); text-transform: uppercase; font-size: 41px; letter-spacing: .03em; }
.match-date strong em { color: var(--red); font-style: normal; padding: 0 8px; }
.match-date p { margin: 7px 0; font-size: 13px; text-transform: uppercase; font-weight: 700; letter-spacing: .09em; }
.match-date p b { color: var(--red); padding: 0 8px; }
.match-date small { color: #9faec0; text-transform: uppercase; font-size: 10px; letter-spacing: .11em; }
.match-competition { display: flex; justify-content: center; align-items: center; gap: 10px; }
.match-competition span { display: grid; place-items: center; width: 62px; height: 62px; border: 2px solid white; border-radius: 50%; font-family: var(--display); font-size: 34px; }
.match-competition small { text-transform: uppercase; font-weight: 600; line-height: 1.25; }
.match-weather { margin: 2px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.15); display: flex; align-items: center; gap: 13px; }
.weather-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #ffffff12; color: #ffd36b; font-size: 21px; }
.match-weather div { display: grid; grid-template-columns: auto auto; gap: 3px 18px; align-items: baseline; }
.match-weather small { grid-column: 1 / -1; color: #8194aa; text-transform: uppercase; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.match-weather strong { font-size: 12px; text-transform: uppercase; }
.match-weather div span { color: #a6b5c6; font-size: 11px; }

.section { padding: 110px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 45px; }
.section h2, .history-copy h2, .recruitment h2, .contact-title h2 { font-size: clamp(38px, 4.4vw, 66px); }
.kicker { color: var(--red); margin-bottom: 16px; }
.kicker.light { color: #ff5860; }
.heading-side { color: var(--muted); font-size: 12px; text-transform: uppercase; font-weight: 600; letter-spacing: .08em; display: flex; align-items: center; gap: 10px; }
.news-section { background: var(--paper); }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.news-card { position: relative; background: white; border-bottom: 3px solid transparent; box-shadow: 0 8px 30px rgba(4,20,36,.06); transition: .25s; }
.news-card:hover { transform: translateY(-5px); border-bottom-color: var(--red); box-shadow: 0 18px 42px rgba(4,20,36,.12); }
.news-image { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
/* object-position: top - zdjęcia z boiska bywają portretowe (zawodnik na
   pierwszym planie), a wyśrodkowane kadrowanie w niskim kaflu obcinało głowy. */
.news-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .55s ease; }
.news-card:hover .news-image img { transform: scale(1.04); }
.news-image span { position: absolute; left: 0; bottom: 0; background: var(--red); color: white; padding: 9px 13px; text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.news-copy { padding: 24px 25px 28px; }
.news-copy time { color: var(--muted); text-transform: uppercase; font-size: 10px; font-weight: 600; letter-spacing: .12em; }
.news-copy h3 { margin: 9px 0 10px; font-size: 22px; line-height: 1.15; }
.news-copy h3 a:hover { color: var(--red); }
.news-copy p { color: var(--muted); margin: 0 0 20px; font-size: 14px; line-height: 1.6; }
.text-link { color: var(--red); display: inline-flex; gap: 8px; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: .08em; }
.news-card-featured { grid-column: span 2; display: grid; grid-template-columns: 1.25fr .75fr; }
/* Wpis wiodący pokazuje zdjęcie w całości, bez kadrowania. Grafiki
   z Facebooka mają wrysowane napisy i przycięcie ucinało połowę treści,
   a to jest największy obrazek na stronie głównej. Mniejsze kafelki
   zostają kadrowane, bo tam liczy się równy rytm siatki. */
.news-card-featured .news-image { aspect-ratio: auto; min-height: 410px; }
.news-card-featured .news-image img { object-fit: contain; object-position: center; }

/* Przycisk powiększenia w rogu zdjęcia. Pokazuje się dopiero przy
   najechaniu na kafelek, żeby nie zaśmiecać siatki; na ekranach dotykowych,
   gdzie najechania nie ma, widać go zawsze. */
.news-zoom {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(3, 21, 43, .72); border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%; color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .2s ease, background .2s ease;
}
.news-card:hover .news-zoom, .news-zoom:focus-visible { opacity: 1; }
.news-zoom:hover { background: var(--red); border-color: var(--red); }

@media (hover: none) {
  .news-zoom { opacity: 1; }
}
.news-card-featured .news-copy { padding: 42px 36px; display: flex; flex-direction: column; align-items: start; justify-content: center; }
.news-card-featured .news-copy h3 { font-size: 34px; }
.section-cta { display: flex; justify-content: center; margin-top: 44px; }

/* Aktualności po gazetowemu: nagłówek w jednej linii, jeden duży wpis
   ze zdjęciem i lista kolejnych obok. Lista zamiast kafli, bo część
   wpisów przeniesionych ze starej strony nie ma zdjęcia. */
.news-head { display: flex; align-items: baseline; gap: 18px 26px; flex-wrap: wrap; margin-bottom: 38px; padding-bottom: 20px; border-bottom: 2px solid var(--navy); }
.news-head h2 { margin: 0; font-size: clamp(34px, 3.6vw, 52px); }
.news-head-meta { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; color: var(--muted); text-transform: uppercase; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.news-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: stretch; }
.news-layout .news-card-featured { grid-column: auto; display: block; }
.news-layout .news-card-featured .news-image { aspect-ratio: 16 / 10; min-height: 0; }
.news-layout .news-card-featured .news-copy { padding: 30px 34px 34px; display: block; }
.news-layout .news-card-featured .news-copy h3 { font-size: clamp(26px, 2.4vw, 34px); }
/* Lista obok wpisu wiodącego ma sięgać jego spodu, a nie urywać się
   w połowie wysokości zdjęcia. */
.news-rail { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; }
.news-lead { display: flex; flex-direction: column; }
.news-lead .news-card-featured { flex: 1; }
.news-pin {
  margin: 0 0 10px; align-self: flex-start; padding: 5px 12px;
  background: var(--red); color: #fff; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.news-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline; padding: 17px 4px 17px 0; border-top: 1px solid var(--line); transition: .2s ease; }
.news-rail .news-row:first-child { border-top: 0; padding-top: 0; }
.news-row:hover { padding-left: 10px; padding-right: 0; }
.news-row time { grid-column: 1; order: -1; color: var(--muted); text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.news-row small { grid-column: 2; grid-row: 1; justify-self: end; color: var(--red); text-transform: uppercase; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.news-row h3 { grid-column: 1 / -1; margin: 4px 0 0; font-size: 18px; line-height: 1.25; font-weight: 700; }
.news-row:hover h3 { color: var(--red); }

/* --- Sezon: terminarz i tabela obok siebie -------------------------- */
.season-section { color: white; background: var(--navy); position: relative; overflow: hidden; }
.season-section::before { content: "W"; position: absolute; left: -2vw; bottom: -12vw; font-family: var(--display); font-size: 34vw; color: rgba(255,255,255,.018); line-height: 1; }
.season-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 60px; flex-wrap: wrap; margin-bottom: 42px; }
.season-foot { position: relative; margin-top: 28px; text-align: center; }
.season-head h2 { font-size: clamp(34px, 3.6vw, 54px); }
.season-head .section-summary { color: #9eafc1; max-width: 430px; margin: 0; }
/* Po przeniesieniu tabeli na osobną podstronę została jedna kolumna. */
.season-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 52px; align-items: start; }
.season-column-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.season-column-head h3 { margin: 0; font-family: var(--display); text-transform: uppercase; font-size: 21px; letter-spacing: .04em; }
.text-link.light { color: #9eafc1; }
.text-link.light:hover { color: white; }

.fixtures-list { border-top: 1px solid rgba(255,255,255,.25); }
.fixture { display: grid; grid-template-columns: 96px 1fr; min-height: 92px; align-items: center; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.16); }
.fixture-round small { display: block; color: #8194aa; text-transform: uppercase; font-size: 9px; letter-spacing: .12em; }
.fixture-round strong { font-family: var(--display); font-size: 26px; letter-spacing: .05em; }
.fixture-round span { margin-left: 8px; color: var(--red); font-weight: 700; font-size: 11px; }
.fixture-teams { display: grid; grid-template-columns: 1fr 46px 1fr; gap: 10px; align-items: center; text-transform: uppercase; font-size: 13px; letter-spacing: .04em; }
.fixture-club { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fixture-club b { min-width: 0; overflow-wrap: anywhere; }
.fixture-club + .fixture-score + .fixture-club { flex-direction: row-reverse; text-align: right; }
.fixture-score { justify-self: center; color: var(--red); font-style: normal; font-weight: 700; }

/* Herb rywala. Gdy pliku nie ma, zostaje sama nazwa klubu. */
.club-crest { flex: none; width: 30px; height: 30px; object-fit: contain; }
.place { justify-self: end; padding: 7px 9px; text-align: center; border: 1px solid #5f7185; color: #91a2b5; text-transform: uppercase; font-size: 8px; font-weight: 700; letter-spacing: .12em; }

.table-club { display: flex; align-items: center; gap: 10px; }
.league-table .club-crest { width: 24px; height: 24px; }

/* Kolor tekstu MUSI być tu jawny: tabela stoi w granatowej sekcji
   „Terminarz i tabela", która ustawia color: white. Bez tego biały
   tekst ląduje na białej karcie i tabela znika. */
.league-table-wrap { background: white; color: var(--ink); box-shadow: 0 18px 50px #0b1d3014; }
.league-table-head { min-height: 64px; padding: 0 22px; background: var(--navy); color: white; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.league-table-head span { display: flex; align-items: center; gap: 9px; text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.league-table-head small { color: #8fa3ba; font-size: 10px; }
.league-table-scroll { overflow-x: auto; }
.league-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.league-table th { position: sticky; top: 0; z-index: 1; padding: 12px 16px; text-align: left; color: #8290a0; background: #f5f6f7; text-transform: uppercase; font-size: 9px; letter-spacing: .1em; }
.league-table th:not(:nth-child(2)), .league-table td:not(:nth-child(2)) { text-align: center; }
.league-table td { padding: 13px 16px; border-bottom: 1px solid #e9ecef; }
.league-table td:nth-child(2) { font-weight: 700; }
.league-table tr:hover { background: #f7f9fb; }
.league-table .is-wierna { color: white; background: linear-gradient(90deg, var(--red), #c91e27); }
.league-table .is-wierna:hover { background: var(--red-dark); }
.table-source { margin: 0; padding: 14px 20px; color: var(--muted); font-size: 10px; text-align: right; }
.table-source a { color: var(--red); font-weight: 600; }

.teams-section { background: #f8f7f4; }
.section-summary { max-width: 480px; color: var(--muted); line-height: 1.65; }
.teams-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.team-card { position: relative; min-height: 340px; overflow: hidden; padding: 34px 26px 28px; color: white; background: linear-gradient(150deg, #0b3f79, #03162c 72%); display: flex; flex-direction: column; align-items: flex-start; justify-content: end; }
.team-card:nth-child(even) { background: linear-gradient(150deg, #174d8b, #061a32 72%); }
/* Ukośna czerwona kreska była akcentem na gładkim gradiencie, zanim
   kafelki drużyn dostały zdjęcia. Na zdjęciu przecina twarze i wygląda
   jak zadrapanie na szybie, więc jej nie ma. Numer w rogu zostaje,
   bo porządkuje siatkę, a niczego nie zasłania. */
.team-no { position: absolute; right: 20px; top: 16px; color: rgba(255,255,255,.2); font-family: var(--display); font-size: 44px; }
.team-mark { position: absolute; left: 25px; top: 24px; color: rgba(255,255,255,.07); font-family: var(--display); font-size: 128px; line-height: 1; }
.team-card p { position: relative; margin: 0 0 6px; color: #90a7c2; text-transform: uppercase; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.team-card h3 { position: relative; margin: 0 0 8px; font-size: 25px; text-transform: uppercase; }
.team-card small { position: relative; color: rgba(255,255,255,.7); }
.team-mark img { width: 76px; height: auto; opacity: .16; }
.teams-head { display: grid; grid-template-columns: auto minmax(0, 460px); gap: 18px 50px; align-items: end; justify-content: space-between; margin-bottom: 38px; }
.teams-head h2 { margin: 0; font-size: clamp(32px, 3.4vw, 50px); }
.teams-head p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 15px; }

/* Grupy naborowe akademii: roczniki, trenerzy, telefony. */
/* Pasmo naboru jest czerwone, a nie granatowe: między jasną sekcją drużyn
   i ciemnymi filmami daje oddech, a klub ma czerwień w barwach, więc to nie
   dekoracja z niczego. */
.academy { position: relative; overflow: hidden; background: #a8171f; color: white; padding: 100px 0; }
/* Zdjęcie w tle podaje widok przez zmienną --tlo, bo klub wymienia je
   w Ustawieniach. Plik z paczki zostaje jako wartość zapasowa. */
.academy-bg { position: absolute; inset: 0; opacity: .3; background: linear-gradient(100deg, #7d1016, #d02a33), var(--tlo, url('/assets/img/trening-2026.webp')) center/cover; background-blend-mode: multiply; }
.academy::after { content: "NABÓR"; position: absolute; right: -10px; bottom: -34px; font-family: var(--display); font-size: 13vw; line-height: 1; color: rgba(255,255,255,.07); }
.academy-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 460px; gap: 70px; align-items: center; }
.academy-copy h2 { font-size: clamp(38px, 4.4vw, 62px); }
.academy .kicker { color: rgba(255,255,255,.72); }
.academy-copy > p:not(.kicker) { max-width: 520px; color: rgba(255,255,255,.86); line-height: 1.7; }
.academy-actions { display: flex; align-items: center; gap: 14px 30px; flex-wrap: wrap; margin-top: 30px; }
.academy-actions .button-primary { background: white; color: var(--navy); }
.academy-actions .button-primary:hover { background: var(--navy); color: white; }
.academy-panel { background: white; color: var(--navy); padding: 30px 32px 34px; box-shadow: 22px 22px 0 rgba(0,0,0,.16); }
.academy-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px solid var(--navy); }
.academy-panel-head span { color: var(--red); text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.academy-panel-head small { color: var(--muted); font-size: 11px; }
.academy-groups { list-style: none; margin: 0; padding: 0; }
.academy-groups li { display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.academy-groups li:last-child { border-bottom: 0; }
.academy-groups b { font-family: var(--display); text-transform: uppercase; font-size: 19px; letter-spacing: .01em; }
.academy-groups span { grid-column: 1; color: var(--muted); font-size: 13px; }
.academy-groups a { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; font-size: 17px; white-space: nowrap; }
.academy-groups a:hover { color: var(--red); }
.academy-groups-compact li { padding: 12px 0; }
.academy-groups-compact b { font-size: 16px; }
.academy-note { margin: 20px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* Podstrona drużyny, która nie ma jeszcze składu ani terminarza. */
.team-empty-section { background: var(--paper); }
.team-empty { display: grid; grid-template-columns: 1fr 440px; gap: 60px; align-items: start; }
.team-empty-copy h2 { font-size: clamp(28px, 2.8vw, 40px); max-width: 20ch; }
.team-empty-copy p { color: var(--muted); line-height: 1.7; max-width: 52ch; }
.team-empty-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.team-empty-panel { border: 1px solid var(--line); background: white; padding: 26px 28px 30px; }
.club-academy-section { background: var(--paper); padding: 70px 0; }
.club-academy-section .teams-academy { margin-top: 0; }
.teams-academy { margin-top: 34px; border: 1px solid var(--line); background: white; padding: 26px 30px 30px; }
.teams-academy .button { margin-top: 22px; }
.button-outline-dark { border: 1px solid var(--navy); color: var(--navy); }
.button-outline-dark:hover { background: var(--navy); color: white; }

.shop-section { position: relative; overflow: hidden; color: white; background: #071a31; }
.shop-section::before { content: "1978"; position: absolute; right: -20px; top: -40px; color: #ffffff08; font-family: var(--display); font-size: 210px; line-height: 1; }
.shop-heading { position: relative; }
.shop-heading h2 { color: white; }
.shop-note { border-left: 3px solid var(--red); padding-left: 16px; display: flex; flex-direction: column; text-transform: uppercase; }
.shop-note b { font-size: 12px; letter-spacing: .1em; }
.shop-note span { margin-top: 5px; color: #8799ad; font-size: 10px; letter-spacing: .08em; }
.products-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.product-card { background: white; color: var(--ink); transition: transform .25s ease; }
.product-card:hover { transform: translateY(-6px); }
.product-art { min-height: 270px; position: relative; overflow: hidden; display: grid; place-items: center; color: white; background: linear-gradient(140deg, #0a4386, #041a34); }
.product-art::before, .product-art::after { content: ""; position: absolute; width: 230px; height: 9px; background: var(--red); transform: rotate(-46deg); }
.product-art::before { right: -90px; top: 45px; }
.product-art::after { left: -100px; bottom: 40px; opacity: .5; }
.product-art span { position: relative; z-index: 1; font-family: var(--display); font-size: 58px; letter-spacing: .03em; text-shadow: 0 9px 30px #0007; }
.product-art small { position: absolute; z-index: 1; left: 18px; bottom: 16px; color: #ffffff8a; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.product-art-2 { background: linear-gradient(145deg, #d9dce0, #f8f8f8); color: var(--navy); }
.product-art-3 { background: repeating-linear-gradient(90deg, #073f86 0 36px, #fff 36px 50px, #e52b34 50px 84px); }
.product-art-4 { background: radial-gradient(circle at 50% 35%, #12549b, #03152b 70%); }
.product-info { min-height: 105px; padding: 20px; display: flex; justify-content: space-between; gap: 12px; align-items: end; }
.product-info small { color: var(--red); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.product-info h3 { margin: 5px 0 0; font-size: 17px; }
.product-info > strong { color: #83909d; font-size: 10px; text-transform: uppercase; white-space: nowrap; }
.shop-bottom { position: relative; margin-top: 26px; padding-top: 24px; border-top: 1px solid #ffffff24; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.shop-bottom p { max-width: 650px; color: #9caabd; line-height: 1.6; }

.history-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; background: #061b36; color: white; }
.history-photo { min-height: 720px; overflow: hidden; position: relative; }
.history-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #061b36); }
.history-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) contrast(1.07); }
.history-copy { padding: 110px max(50px, calc((100vw - 1220px)/2)) 90px 68px; }
.history-copy > p:not(.kicker) { color: #a3b2c3; line-height: 1.7; max-width: 560px; }
.history-stats { display: flex; gap: 0; margin: 40px 0 28px; border-block: 1px solid rgba(255,255,255,.18); }
.history-stats div { flex: 1; padding: 22px 18px 22px 0; }
.history-stats div + div { border-left: 1px solid rgba(255,255,255,.18); padding-left: 20px; }
.history-stats strong { display: block; font-family: var(--display); font-size: 34px; color: white; text-transform: uppercase; }
.history-stats span { color: #8296ad; font-size: 10px; text-transform: uppercase; font-weight: 600; letter-spacing: .08em; }
.history-details { border: 1px solid rgba(255,255,255,.22); }
.history-details summary { cursor: pointer; list-style: none; padding: 18px 20px; text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.history-details summary::after { content: "+"; float: right; color: var(--red); font-size: 18px; }
.history-details[open] summary::after { content: "−"; }
.history-details div { padding: 0 20px 18px; color: #a3b2c3; font-size: 13px; line-height: 1.65; }

.board-section { background: var(--paper); }
.board-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.board-list { border-top: 2px solid var(--navy); }
.board-list div { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 19px 6px; border-bottom: 1px solid var(--line); }
.board-list strong { font-size: 15px; }
.board-list span { color: var(--muted); font-size: 13px; }

.recruitment { position: relative; overflow: hidden; background: #0b376b; color: white; padding: 110px 0; }
.recruitment-bg { position: absolute; inset: 0; opacity: .25; background: linear-gradient(90deg, #03254e, #063c78), var(--tlo, url('/assets/img/terminarz.webp')) center/cover; background-blend-mode: multiply; }
.recruitment::after { content: "WIERNA"; position: absolute; left: -10px; bottom: -30px; font-family: var(--display); font-size: 14vw; color: rgba(255,255,255,.045); }
.recruitment-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 420px; gap: 90px; align-items: center; }
.recruitment-content > div > p:not(.kicker) { max-width: 560px; color: #c1cada; line-height: 1.6; }
.recruitment-card { padding: 38px; background: var(--red); box-shadow: 20px 20px 0 rgba(0,0,0,.18); }
.recruitment-card > span { text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.recruitment-card h3 { margin: 14px 0 28px; font-family: var(--display); text-transform: uppercase; font-size: 34px; line-height: 1.02; }
.recruitment-card a { display: flex; gap: 12px; justify-content: space-between; padding: 17px 0 10px; border-top: 1px solid rgba(255,255,255,.5); font-size: 25px; font-weight: 700; }
.recruitment-card small { color: rgba(255,255,255,.75); }
/* Adres e-mail jest długi. Bez własnej wielkości dziedziczył 25 px po regule
   telefonu i wychodził poza czerwony kafel. */
.recruitment-card small a {
  display: block; padding: 0; border-top: 0;
  font-size: 15px; line-height: 1.45; overflow-wrap: anywhere;
}

.contact-section { background: #f8f7f4; }
.contact-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 80px; align-items: start; }
.contact-title > p:not(.kicker) { max-width: 360px; color: var(--muted); line-height: 1.6; }
.contact-title .text-link { display: inline-flex; margin-top: 18px; }
.contact-column { display: grid; gap: 15px; }
.contact-map { min-height: 300px; }
/* Kafelki kontaktowe.
   Telefon i adres mieszczą się w połowie szerokości, adres e-mail (blisko
   30 znaków) już nie - dlatego zajmuje cały wiersz i ma własną, mniejszą
   skalę. Bez tego łamał się na kilka linijek w środku wyrazu. */
.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; align-content: start; }
.contact-card { min-height: 168px; padding: 26px; background: white; border: 1px solid #e2e4e6; display: flex; flex-direction: column; gap: 18px; align-items: start; transition: .25s; }
.contact-card-email { grid-column: span 2; }
.contact-card:hover { transform: translateY(-4px); border-color: var(--red); box-shadow: 0 15px 35px #071a2a12; }
.contact-cards small { color: var(--red); text-transform: uppercase; font-weight: 700; font-size: 11px; letter-spacing: .12em; }
.contact-cards strong { margin: auto 0; font-size: clamp(21px, 1.9vw, 30px); line-height: 1.2; font-weight: 600; overflow-wrap: break-word; }
.contact-card-email strong { font-size: clamp(18px, 1.7vw, 27px); letter-spacing: -.005em; }
.contact-card-address strong { font-size: clamp(18px, 1.5vw, 23px); }
/* Strzałka trzyma się tekstu. Rozpychanie jej na drugi koniec karty
   (space-between) łamało krótkie podpisy na dwie linijki. */
.contact-cards span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.contact-cards .contact-card:hover span { color: var(--red); }

/* ----- Dojazd: mapa Google w ramce o stałych proporcjach ----- */
.map-section { background: #fff; }
.map-layout { display: grid; grid-template-columns: 1.4fr .85fr; gap: 40px; align-items: stretch; }
.map-frame { position: relative; min-height: 380px; border: 1px solid var(--line); background: #eef1f4; overflow: hidden; }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map-notes { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 2px; }
.map-notes li { padding: 18px 20px; background: var(--paper); border-left: 3px solid var(--navy); }
.map-notes li:first-child { border-left-color: var(--red); }
.map-notes strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.map-notes span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* ----- Zarząd jako karty z inicjałami ----- */
/* Zdjęcie zarządu nie musi być na całą szerokość sekcji - przy 1400 px
   oryginału zajmowało pół ekranu, zanim czytelnik doszedł do nazwisk. */
.board-photo { margin: 0 0 40px; max-width: 720px; }
.board-photo img { display: block; width: 100%; height: auto; }
.board-photo figcaption {
  margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.6;
  border-left: 3px solid var(--red); padding-left: 12px;
}
.board-group-heading {
  margin: 40px 0 16px; font-family: var(--display); text-transform: uppercase;
  font-size: 21px; letter-spacing: .04em;
}
.board-group-heading:first-of-type { margin-top: 0; }
/* Dwadzieścia nazwisk w trzech grupach: kafelek ma być wizytówką, nie
   plakatem. Stąd wąskie kolumny (min. 208 px) i niski awatar. */
.board-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 10px; }
.board-member { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--navy); border-top: 1px solid var(--line); transition: .2s ease; }
.board-member:hover { border-left-color: var(--red); box-shadow: 0 10px 24px #071a2a10; }
.board-member-lead { border-left-color: var(--red); }
.board-avatar { flex: 0 0 38px; height: 38px; display: grid; place-items: center; background: var(--navy); color: #fff; font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.board-member-lead .board-avatar { background: var(--red); }
.board-person strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.board-person small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }

footer { background: #020e1e; color: white; padding: 56px 0 22px; }
/* Cztery kolumny, bo doszły adresy. Przy węższym ekranie siatka i tak
   przechodzi na jedną kolumnę niżej w pliku. */
.footer-main { display: grid; grid-template-columns: 1fr auto auto auto; gap: clamp(28px, 4vw, 64px); align-items: center; }
.footer-addresses { display: flex; flex-direction: column; gap: 12px; }
.footer-addresses div { display: flex; flex-direction: column; }
.footer-addresses strong {
  text-transform: uppercase; font-size: 10px; letter-spacing: .08em; opacity: .62;
}
.footer-addresses span { font-size: 13px; line-height: 1.5; }
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-brand img { width: 48px; height: 76px; object-fit: cover; object-position: top; }
.footer-brand div { display: flex; flex-direction: column; }
.footer-brand strong { text-transform: uppercase; }
.footer-brand span { color: #7f92a9; margin-top: 5px; font-size: 12px; }
.footer-main nav { display: flex; gap: 26px; text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.footer-main a:hover { color: var(--red); }
.footer-socials { display: flex; align-items: center; gap: 18px; font-size: 11px; flex-wrap: wrap; }
/* Odnośnik do archiwalnej strony klubu - osobny pasek, żeby nie zginął
   w drobnym druku pod spodem. */
.footer-archive { margin-top: 34px; padding: 18px 22px; background: #08192e; border-left: 3px solid var(--red); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-archive strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.footer-archive span { display: block; margin-top: 5px; color: #7f92a9; font-size: 13px; }
.footer-archive > a { display: inline-flex; align-items: center; gap: 12px; color: #cfe0f2; font-size: 13px; font-weight: 600; border-bottom: 1px solid #ffffff2e; padding-bottom: 2px; }
.footer-archive > a:hover { color: #fff; border-bottom-color: var(--red); }

.footer-bottom { margin-top: 38px; padding-top: 20px; border-top: 1px solid #ffffff18; display: flex; justify-content: space-between; color: #62768e; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 1000px) {
  .desktop-nav, .header-socials { display: none; }
  .mobile-menu { display: block; }
  .hero { min-height: 880px; }
  .hero-content { padding-top: 175px; }
  .next-match { margin-left: 0; }
  .match-content { grid-template-columns: 135px 1fr; }
  .match-competition { display: none; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .news-card-featured { grid-column: span 2; }
  .board-layout, .contact-layout { gap: 50px; }
  .season-grid { grid-template-columns: 1fr; gap: 46px; }
  .map-layout { grid-template-columns: 1fr; }
  .map-frame { min-height: 320px; }
  .teams-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .history-section { grid-template-columns: .85fr 1.15fr; }
  .history-copy { padding-left: 46px; }
  .recruitment-content { grid-template-columns: 1fr 360px; gap: 50px; }
  .news-layout { grid-template-columns: 1fr; gap: 30px; }
  .academy-layout { grid-template-columns: 1fr 360px; gap: 46px; }
  .team-empty { grid-template-columns: 1fr 360px; gap: 40px; }
  .footer-main { grid-template-columns: 1fr auto; }
  .footer-main nav { display: none; }
  .footer-addresses { display: none; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 32px, 640px); }
  .site-header { height: 88px; padding-inline: 16px; }
  .brand img { width: 39px; height: 61px; }
  .brand b { font-size: 13px; }
  .hero { min-height: 860px; }
  .hero-photo { object-position: 66% 50%; }
  .hero-shade { background: linear-gradient(90deg, rgba(2,16,35,.97), rgba(2,16,35,.7)), linear-gradient(0deg, rgba(2,16,35,.95), transparent 70%); }
  .hero-content { padding-top: 145px; }
  .hero h1 { font-size: clamp(44px, 12.5vw, 64px); }
  .hero-lead { max-width: 330px; font-size: 16px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; width: min(100%, 350px); }
  .next-match { margin-top: 34px; padding: 20px; }
  .match-content { grid-template-columns: 1fr; padding-top: 12px; }
  .match-club { display: none; }
  .match-date { padding: 14px 0 0; border: 0; }
  .match-date strong { font-size: 31px; }
  .match-date strong em { padding: 0 2px; }
  .section { padding: 76px 0; }
  .section-heading { display: block; }
  .section-heading .heading-side { margin-top: 22px; }
  .news-grid { grid-template-columns: 1fr; }
  .news-card-featured { grid-column: auto; display: block; }
  .news-card-featured .news-image { min-height: auto; aspect-ratio: 16/10; }
  .news-card-featured .news-copy { padding: 24px 25px 28px; }
  .news-card-featured .news-copy h3 { font-size: 25px; }
  .board-layout, .contact-layout, .recruitment-content { grid-template-columns: 1fr; }
  .fixture { grid-template-columns: 78px 1fr; gap: 10px; }
  .fixture-teams { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-block: 14px; }
  .fixture-club + .fixture-score + .fixture-club { flex-direction: row; text-align: left; }
  .fixture-score { align-self: flex-start; }
  .place { display: none; }
  .teams-grid { grid-template-columns: 1fr; }
  .league-table th, .league-table td { padding: 12px 10px; }
  .league-table th:nth-child(4), .league-table td:nth-child(4) { display: none; }
  .products-grid { grid-template-columns: 1fr; }
  .product-art { min-height: 230px; }
  .shop-bottom { align-items: stretch; flex-direction: column; }
  .team-card { min-height: 260px; }
  .teams-head { grid-template-columns: 1fr; }
  .academy { padding: 72px 0; }
  .academy-layout, .team-empty { grid-template-columns: 1fr; gap: 34px; }
  .academy-panel { padding: 24px 22px 28px; box-shadow: 12px 12px 0 rgba(0,0,0,.16); }
  .academy-groups li { grid-template-columns: 1fr; }
  .academy-groups a { grid-column: 1; grid-row: auto; }
  .team-empty-panel, .teams-academy { padding: 22px 20px 26px; }
  .team-empty-actions .button { width: 100%; }
  .history-section { grid-template-columns: 1fr; }
  .history-photo { min-height: 340px; }
  .history-photo::after { background: linear-gradient(0deg, #061b36, transparent 55%); }
  .history-copy { padding: 60px 16px 70px; }
  .history-stats { display: grid; grid-template-columns: 1fr; }
  .history-stats div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding-left: 0; }
  .board-list div { grid-template-columns: 1fr; gap: 5px; }
  .recruitment-card { padding: 28px; }
  .contact-cards { grid-template-columns: 1fr; }
  .contact-card { min-height: 0; gap: 14px; }
  .contact-card-email { grid-column: auto; }
  .board-grid { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; gap: 28px; }
  .footer-addresses { display: flex; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* =====================================================================
   ROZSZERZENIA DLA PEŁNEGO SERWISU
   Design z jednej strony z kotwicami rozrósł się o podstrony: archiwum
   aktualności, widok wpisu, składy, formularze. Poniżej style tych
   elementów - w tej samej konwencji co reszta arkusza.
   ===================================================================== */

/* --- Dostępność ---------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--red); color: #fff; padding: 14px 22px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px;
}
.skip-link:focus { left: 0; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--red); outline-offset: 3px;
}

/* Podświetlenie aktywnej pozycji w menu zamiast sztywnego pierwszego linku */
.desktop-nav a:first-child::after { content: none; }
.desktop-nav a.is-active::after, .desktop-nav a:hover::after {
  content: ""; position: absolute; bottom: 28px; width: 28px; height: 3px; background: var(--red);
}
.site-header.is-scrolled { background: rgba(3, 21, 43, .95); backdrop-filter: blur(6px); }

/* --- Nagłówek podstrony -------------------------------------------- */
/* Nagłówek serwisu jest pozycjonowany absolutnie, więc podstrony muszą
   zarezerwować na niego miejsce u góry. */
/* Zdjęcie w tle nagłówka podaje widok przez zmienną --hero-tlo, bo klub
   wybiera je w panelu osobno dla każdej zakładki. Bez zdjęcia zostaje samo
   granatowe tło. Ciemna warstwa na wierzchu jest konieczna: na nagłówku
   stoi biały tekst i na jasnym zdjęciu bywał nieczytelny. */
.page-hero {
  position: relative; background: var(--navy); color: #fff;
  padding: 172px 0 68px; overflow: hidden;
}
.page-hero[style*="--hero-tlo"]::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(3,21,43,.82), rgba(3,21,43,.94)),
              var(--hero-tlo) center/cover no-repeat;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero::before {
  content: "W"; position: absolute; right: -2vw; top: -6vw;
  font-family: var(--display); font-size: 22vw; line-height: 1;
  color: rgba(255, 255, 255, .022); pointer-events: none;
}
.page-hero h1 {
  position: relative; margin: 6px 0 0;
  font-family: var(--display); font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1; letter-spacing: .005em; text-transform: uppercase;
}
.page-hero-lead { position: relative; color: #9eafc1; margin: 18px 0 0; max-width: 60ch; line-height: 1.7; }

.breadcrumbs {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  color: #8194aa; font-size: 11px; text-transform: uppercase;
  font-weight: 600; letter-spacing: .1em; margin-bottom: 18px;
}
.breadcrumbs a:hover { color: var(--red); }

/* --- Filtry i archiwum --------------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between;
  align-items: center; margin-bottom: 38px;
}
.filter-group { display: flex; flex-wrap: wrap; gap: 9px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; background: #fff; border: 1px solid var(--line);
  text-transform: uppercase; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  transition: .18s;
}
.filter-chip span { color: var(--muted); font-size: 10px; }
.filter-chip:hover { border-color: var(--navy); }
.filter-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter-chip.is-active span { color: rgba(255, 255, 255, .6); }

.filter-search, .search-form { display: flex; gap: 0; }
.filter-search input, .search-form input {
  min-width: 240px; padding: 12px 16px; border: 1px solid var(--line);
  border-right: 0; background: #fff; font: inherit; font-size: 14px;
}
.filter-search button {
  padding: 12px 20px; border: 0; background: var(--navy); color: #fff; cursor: pointer;
  text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .1em;
}
.filter-search button:hover { background: var(--red); }
.search-form { max-width: 620px; margin: 0 auto 44px; }
.search-form input { flex: 1; border-right: 1px solid var(--line); }
.search-form .button { border-radius: 0; }

.archive-years { margin: -18px 0 34px; }
.archive-years summary {
  cursor: pointer; text-transform: uppercase; font-size: 11px;
  font-weight: 600; letter-spacing: .1em; color: var(--muted);
}
.archive-years > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* --- Siatka aktualności na podstronach ------------------------------ */
.news-grid-archive { grid-template-columns: repeat(3, 1fr); }
.news-grid-archive .news-card-featured { grid-column: auto; display: block; }

.news-image-empty {
  display: grid; place-items: center;
  background: linear-gradient(150deg, #0b3f79, #03162c 72%);
}
/* Ukośna kreska przechodziła przez herb i wyglądała jak zadrapanie.
   Kafelek bez zdjęcia ma być spokojnym tłem pod herbem, nie grafiką
   konkurującą z nim o uwagę. */
/* Zapis przez .news-image-empty, bo .news-image img wyżej ustawia
   width/height 100% i object-fit: cover - herb ma się zmieścić, nie kadrować. */
.news-image-empty img.news-placeholder {
  position: relative; width: auto; height: min(46%, 150px);
  object-fit: contain; opacity: .92;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .45));
}
.news-card:hover .news-image-empty img.news-placeholder { transform: none; }

/* --- Paginacja ------------------------------------------------------ */
.pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; margin-top: 54px; padding-top: 28px; border-top: 1px solid var(--line);
}
.pagination-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.pagination-page, .pagination-arrow {
  display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 14px;
  border: 1px solid var(--line); background: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.pagination-page:hover, .pagination-arrow:hover { border-color: var(--navy); }
.pagination-page.is-current { background: var(--red); border-color: var(--red); color: #fff; }
.pagination-arrow.is-disabled { opacity: .38; pointer-events: none; }
.pagination-gap { display: grid; place-items: center; width: 24px; color: var(--muted); }

/* --- Widok wpisu ---------------------------------------------------- */
.article-header { position: relative; background: var(--navy); color: #fff; padding: 172px 0 60px; }

/* Zdjęcie wpisu pod nagłówkiem, w całości i bez kadrowania. Grafiki
   z Facebooka mają wrysowane napisy, więc przycięcie ucinało połowę
   treści, a jako tło pod gradientem robiły się nieczytelną plamą. */
.article-cover-band { background: var(--navy); text-align: center; }
.article-cover-band img {
  display: block; width: auto; max-width: 100%; max-height: 70vh;
  margin-inline: auto; object-fit: contain; cursor: zoom-in;
}
.article-header-inner { position: relative; z-index: 2; }
.article-header h1 {
  margin: 0; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 3.8vw, 52px); line-height: 1.06; max-width: 24ch;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.article-meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 20px 0 0;
  color: #9eafc1; text-transform: uppercase; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.article-meta a:hover { color: var(--red); }

.article-body { padding: 60px 0 20px; }
.article-lead {
  font-size: clamp(18px, 2vw, 22px); line-height: 1.6; color: var(--ink);
  font-weight: 700; max-width: 68ch; margin: 0 0 36px;
  padding-left: 22px; border-left: 4px solid var(--red);
}

/* --- Treść redakcyjna ----------------------------------------------- */
.prose { max-width: 74ch; color: #26333f; font-size: 17px; line-height: 1.78; }
.prose-narrow { max-width: 72ch; margin-inline: auto; }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 22px; }
.prose h2 {
  margin: 44px 0 16px; font-family: var(--display); text-transform: uppercase;
  font-size: 30px; letter-spacing: .01em; line-height: 1.1;
}
.prose h3 { margin: 34px 0 12px; font-size: 21px; line-height: 1.25; }
.prose h4 { margin: 28px 0 10px; font-size: 17px; }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--red-dark); }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 22px; }
.prose li { margin-bottom: 9px; }
.prose img { margin: 30px 0; width: 100%; height: auto; }
.prose figure { margin: 30px 0; }
.prose figcaption { margin-top: 10px; color: var(--muted); font-size: 13px; }
.prose blockquote {
  margin: 30px 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--red);
  font-size: 19px; line-height: 1.6; color: var(--ink);
}
.prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
.prose table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15px; }
.prose th, .prose td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { background: #e9edf1; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; margin: 30px 0; border: 0; }

.prose-light { color: #b7c6d6; }
.prose-light a { color: #fff; }
.prose-light strong { color: #fff; }

.page-cover { width: 100%; margin-bottom: 40px; }

/* --- Galeria wpisu -------------------------------------------------- */
.article-gallery { margin: 52px 0; }
.article-gallery h2 {
  font-family: var(--display); text-transform: uppercase; font-size: 26px; margin: 0 0 20px;
}
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.gallery-grid a { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.gallery-grid a:hover img { transform: scale(1.05); }

/* --- Udostępnianie i nawigacja między wpisami ----------------------- */
.article-share {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: 44px 0; padding: 20px 0; border-block: 1px solid var(--line);
  text-transform: uppercase; font-size: 11px; font-weight: 600; letter-spacing: .1em;
}
.article-share span { color: var(--muted); }
.article-share a { padding: 9px 16px; border: 1px solid var(--line); background: #fff; }
.article-share a:hover { border-color: var(--navy); color: var(--red); }

.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0 12px; }
.article-nav a { padding: 22px 24px; background: #fff; border-bottom: 3px solid transparent; transition: .2s; }
.article-nav a:hover { border-bottom-color: var(--red); transform: translateY(-3px); }
.article-nav small {
  display: block; color: var(--muted); text-transform: uppercase;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; margin-bottom: 8px;
}
.article-nav strong { font-size: 16px; line-height: 1.35; }
.article-nav-next { text-align: right; }

.related-section { background: #e9edf1; }

/* --- Składy drużyn --------------------------------------------------- */
/* Zdjęcie drużynowe pokazujemy w całości. Wcześniej było kadrowane do
   sztywnych 460 px przez object-fit: cover, co przy szerokim zdjęciu
   grupowym ucinało połowę składu i nie dało się rozpoznać twarzy. */
.team-hero-photo { background: var(--navy); text-align: center; }
.team-hero-photo img {
  display: block; width: auto; max-width: 100%; max-height: 72vh;
  margin-inline: auto; object-fit: contain; cursor: zoom-in;
}

.squad-heading {
  margin: 40px 0 18px; font-family: var(--display); text-transform: uppercase;
  font-size: 22px; letter-spacing: .04em; color: var(--navy);
  padding-bottom: 10px; border-bottom: 2px solid var(--line);
}
.squad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.player-card {
  display: flex; gap: 14px; align-items: center; padding: 14px;
  background: #fff; border-bottom: 3px solid transparent; transition: .2s;
}
.player-card:hover { border-bottom-color: var(--red); }
.player-card img, .player-placeholder {
  width: 76px; height: 76px; flex: 0 0 76px; border-radius: 6px;
  object-fit: cover; object-position: center top; background: #eef1f4;
}
.player-placeholder {
  display: grid; place-items: center; background: var(--navy); color: rgba(255, 255, 255, .5);
  font-family: var(--display); font-size: 22px; letter-spacing: .04em;
}
.player-card strong { display: block; font-size: 15px; line-height: 1.25; }
.player-card small { color: var(--muted); font-size: 11px; }
.player-number {
  display: inline-block; margin-bottom: 4px; color: var(--red);
  font-family: var(--display); font-size: 18px; letter-spacing: .04em;
}

/* --- Terminarz na podstronie ---------------------------------------- */
/* Nagłówek serwisu jest pozycjonowany absolutnie, więc górnego odstępu nie
   wolno zbijać poniżej jego wysokości - inaczej tytuł wchodzi pod menu. */
.page-hero-tight { padding: 148px 0 30px; }

/* Skrót u góry: ostatni wynik i najbliższy mecz, po co kibic tu wchodzi. */
.fixtures-summary { background: #e9edf1; padding-block: 22px; }
.fixtures-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fixture-highlight {
  background: white; border: 1px solid var(--line); border-radius: 10px;
  border-top: 3px solid var(--red); padding: 13px 20px 2px;
}
.fixture-highlight .kicker { margin: 0 0 2px; }
.fixture-highlight .fixture { border-bottom: 0; }

/* Tabela i mecze obok siebie - wcześniej szły jedno pod drugim przez
   półtora ekranu, choć każda z list mieści się w jednej kolumnie. */
.fixtures-page { padding-block: 40px 56px; }
/* Obie kolumny kończą się w tej samej linii: panele rozciągają się do
   wysokości wyższej z nich, zamiast urywać się w przypadkowym miejscu. */
.fixtures-page-grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: stretch;
}
.fixtures-col { display: flex; flex-direction: column; }
.fixtures-col .fixtures-timeline,
.fixtures-col .league-table-scroll { flex: 1; }

/* Tabela dostaje własny, biały panel - bez niego wisiała na tle sekcji
   i wyglądała jak surowy zrzut danych. */
.fixtures-col .league-table-scroll {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 38px rgba(11, 29, 48, .07);
}
.fixtures-col .league-table { margin: 0; }
.fixtures-col .col-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--navy);
}
.fixtures-col .col-head h2 {
  margin: 0; font-family: var(--display); text-transform: uppercase;
  font-size: 22px; letter-spacing: .03em;
}
.fixtures-col .col-head small { color: var(--muted); font-size: 11px; }

/* Oś czasu: rozegrane, najbliższy mecz, dalsze spotkania. */
.fixtures-timeline {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 18px; box-shadow: 0 14px 38px rgba(11, 29, 48, .07);
}

/* Najbliższy mecz wyróżniony na niebiesko. Czerwień w serwisie znaczy
   "nasz klub" (nazwa Wiernej w wierszach, akcenty), więc użyta tu drugi
   raz myliła się z tamtym znaczeniem. */
.fixture-next { position: relative; margin: 10px -18px; padding: 0 18px 6px; background: #eef4fb; }
.fixture-next::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #0b3f79;
}
.fixture-next-label {
  display: block; padding-top: 10px; color: #0b3f79;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.fixture-next .fixtures-list-tight { border-top: 0; }
.fixture-next .fixture { border-bottom: 0; }
.fixture-next .fixture-round strong { color: #0b3f79; }

/* Wiersz meczu w wersji na kolumnę: niższy, bez rozstrzelonej siatki. */
.fixture-compact { grid-template-columns: 62px 1fr; min-height: 0; gap: 12px; padding-block: 11px; }
.fixture-compact .fixture-round strong { font-size: 18px; }
.fixture-compact .fixture-round span { display: block; margin-left: 0; font-size: 10px; }
.fixture-compact .fixture-teams { font-size: 12px; gap: 8px; grid-template-columns: 1fr 42px 1fr; }
.fixture-compact .club-crest { width: 22px; height: 22px; }
.fixtures-list-tight { border-top: 1px solid var(--line); }
.fixtures-list-tight .fixture { border-bottom-color: var(--line); color: var(--ink); }
.fixtures-list-tight .fixture-round small { color: var(--muted); }

.fixtures-more > summary {
  cursor: pointer; padding: 9px 0; color: var(--red);
  text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .1em;
}

.column-heading {
  margin: 0 0 18px; font-family: var(--display); text-transform: uppercase;
  font-size: 24px; letter-spacing: .03em;
}
/* Wariant jasny - sekcja terminarza poza granatowym tłem */
.fixtures-list-light { border-top-color: var(--line); }
.fixtures-list-light .fixture { border-bottom-color: var(--line); color: var(--ink); }
.fixtures-list-light .fixture-round small { color: var(--muted); }
.fixtures-list-light .place { border-color: var(--line); color: var(--muted); }

.fixture { position: relative; }
.fixture-club.is-us b { color: var(--red); }
.fixtures-list-light .fixture-club.is-us b { color: var(--navy); }
.fixture.is-finished .fixture-score { font-size: 15px; }
.fixture-report {
  grid-column: 1 / -1; padding-bottom: 12px; margin-top: -8px;
  color: var(--red); text-transform: uppercase; font-size: 10px;
  font-weight: 700; letter-spacing: .1em;
}

/* --- Tabela pełna --------------------------------------------------- */
.table-page { background: #e9edf1; }
.league-table-full th, .league-table-full td { padding-inline: 8px; }
.league-table-full abbr { text-decoration: none; border: 0; }
.table-empty { padding: 28px 12px; text-align: center; color: var(--muted); }

/* --- Formularze ------------------------------------------------------ */
.contact-layout-page { grid-template-columns: .8fr 1.2fr; align-items: start; }
.contact-form-wrap { background: #fff; padding: clamp(26px, 4vw, 46px); box-shadow: 0 12px 40px rgba(4, 20, 36, .07); }
.contact-form-wrap h2 {
  margin: 0 0 26px; font-family: var(--display); text-transform: uppercase; font-size: 30px;
}
.form-row { margin-bottom: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-row label {
  display: block; margin-bottom: 8px; text-transform: uppercase;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--navy);
}
.form-row input, .form-row textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line);
  background: var(--paper); font: inherit; font-size: 15px;
}
.form-row input:focus, .form-row textarea:focus { border-color: var(--navy); background: #fff; }
.form-row textarea { resize: vertical; min-height: 140px; }
.form-row input[aria-invalid="true"], .form-row textarea[aria-invalid="true"] { border-color: var(--red); }
.field-error { display: block; margin-top: 7px; color: var(--red); font-size: 12px; font-weight: 700; }

.form-consent label {
  display: flex; gap: 11px; align-items: flex-start; text-transform: none;
  font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); line-height: 1.55;
}
.form-consent input { width: auto; margin-top: 2px; flex: 0 0 auto; }
.form-consent a { color: var(--red); text-decoration: underline; }

/* Pole-pułapka na roboty - musi być niewidoczne, ale nie display:none,
   bo część botów pomija takie pola. */
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.alert { padding: 15px 18px; margin-bottom: 22px; border-left: 4px solid; font-size: 14px; line-height: 1.6; }
.alert-success { background: #e8f5ec; border-color: #2e7d4f; color: #1d5334; }
.alert-error { background: #fdecec; border-color: var(--red); color: #97181f; }
.alert-info { background: #e9eef6; border-color: var(--blue); color: #123a69; }

/* --- Stany puste i błędy -------------------------------------------- */
.empty-state { padding: 40px 0; color: var(--muted); font-size: 15px; text-align: center; }
.empty-state a { color: var(--red); text-decoration: underline; }
.empty-state.light { color: #9eafc1; }

.error-page { background: var(--navy); color: #fff; padding: 190px 0 110px; text-align: center; }
.error-page h1 {
  margin: 8px 0 0; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(44px, 7vw, 88px); line-height: 1;
}
.error-lead { color: #9eafc1; margin: 20px auto 34px; max-width: 52ch; line-height: 1.7; }
.error-page .hero-actions { justify-content: center; }

/* --- Sklepik: kafelek ze zdjęciem ------------------------------------ */
.product-art-photo { padding: 0; overflow: hidden; }
.product-art-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Grafika zastępcza ma nazwę towaru wrysowaną przy dolnej krawędzi -
   kadrowanie ucinało ją w połowie liter. */
.product-art-drawn img { object-fit: contain; }
.product-art { position: relative; }
.product-info p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.history-more { margin: 26px 0 0; }

.board-prose { columns: 2; column-gap: 40px; }
.board-prose ul { margin: 0; padding: 0; list-style: none; columns: inherit; }
.board-prose li { break-inside: avoid; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

/* --- Powiększanie zdjęć ---------------------------------------------- */
.squad-grid img, .board-photo img { cursor: zoom-in; }
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 24px; background: rgba(3, 21, 43, .93);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; text-align: center; }
.lightbox img {
  display: block; margin-inline: auto; max-width: 100%; max-height: calc(100vh - 120px);
  object-fit: contain; border-radius: 6px; cursor: default;
}
.lightbox figcaption { margin-top: 14px; color: #c8d4e2; font-size: 13px; }
.lightbox figcaption[hidden] { display: none; }
.lightbox-close {
  position: absolute; top: 18px; right: 22px; width: 42px; height: 42px;
  background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  color: white; font-size: 26px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.12); }

/* Strzałki i licznik. Zdjęcia z jednej sekcji tworzą grupę, więc da się je
   przewijać bez zamykania okna. Na telefonie strzałki schodzą na dół, bo
   przy krawędziach ekranu zasłaniałyby zdjęcie i trudno w nie trafić. */
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; display: grid; place-items: center;
  background: rgba(3, 21, 43, .55); border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%; color: #fff; font-size: 32px; line-height: 1; cursor: pointer;
  transition: background .2s ease;
}
.lightbox-nav:hover { background: var(--red); border-color: var(--red); }
.lightbox-nav[hidden] { display: none; }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }

.lightbox-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  margin: 0; color: #c8d4e2; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.lightbox-counter[hidden] { display: none; }

@media (max-width: 680px) {
  .lightbox-nav { top: auto; bottom: 18px; transform: none; width: 46px; height: 46px; font-size: 27px; }
  .lightbox-prev { left: calc(50% - 68px); }
  .lightbox-next { right: calc(50% - 68px); }
  .lightbox-counter { bottom: 76px; }
  .lightbox img { max-height: calc(100vh - 200px); }
}

/* --- Plakat sponsorski ------------------------------------------------ */
.sponsors-poster-section { background: #f8f7f4; }
.sponsors-poster { display: block; max-width: 620px; margin-inline: auto; }
.sponsors-poster img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(11, 29, 48, .12);
  transition: transform .25s;
}
.sponsors-poster:hover img { transform: translateY(-3px); }

/* --- Powrót na górę --------------------------------------------------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 140;
  display: grid; place-items: center; width: 46px; height: 46px;
  background: var(--navy); color: #fff; border-radius: 50%;
  box-shadow: 0 10px 28px rgba(3, 21, 43, .3); transition: .2s;
}
.to-top[hidden] { display: none; }
.to-top:hover { background: var(--red); transform: translateY(-2px); }
/* Gdy pasek ciasteczek jest na ekranie, strzałka ustępuje mu miejsca. */
.cookie-notice:not([hidden]) + .to-top { bottom: 108px; }

/* --- Informacja o ciasteczkach --------------------------------------- */
.cookie-notice {
  position: fixed; z-index: 150; left: 16px; right: 16px; bottom: 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; max-width: 880px; margin-inline: auto; padding: 16px 20px;
  background: white; color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 18px 50px rgba(11, 29, 48, .22);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; font-size: 13px; line-height: 1.55; }
.cookie-notice .button { flex-shrink: 0; }

/* --- Zawężenia dla mniejszych ekranów -------------------------------- */
@media (max-width: 1080px) {
  .news-grid-archive { grid-template-columns: repeat(2, 1fr); }
  .fixtures-columns { grid-template-columns: 1fr; gap: 40px; }
  .fixtures-page-grid { grid-template-columns: 1fr; gap: 34px; }
  .fixtures-summary-grid { grid-template-columns: 1fr; gap: 14px; }
  .contact-layout-page { grid-template-columns: 1fr; }
  .board-prose { columns: 1; }
  .videos-grid, .videos-grid-home { grid-template-columns: repeat(2, 1fr); }
  .videos-grid-home .video-card-featured { grid-column: span 2; grid-row: auto; }
  .partners-layout { grid-template-columns: 1fr; }
  .sponsors-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .page-hero { padding: 132px 0 46px; }
  .article-header { padding: 132px 0 40px; }
  .article-cover-band img { max-height: 52vh; }
  .news-grid-archive { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .article-nav { grid-template-columns: 1fr; }
  .article-nav-next { text-align: left; }
  .pagination { justify-content: center; }
  .filters { flex-direction: column; align-items: stretch; }
  .filter-search input, .search-form input { min-width: 0; flex: 1; }
  .prose { font-size: 16px; }
  .squad-grid { grid-template-columns: 1fr; }
  .videos-grid, .videos-grid-home { grid-template-columns: 1fr; }
  .videos-grid-home .video-card-featured { grid-column: auto; }
  .partners-offer, .partners-contact, .partners-card { padding: 26px 22px; }
  .partners-benefits, .partners-cards { grid-template-columns: 1fr; }
  .sponsors-grid, .sponsors-grid-main { grid-template-columns: repeat(2, 1fr); }
  .section-empty { padding: 32px 22px; }
  .cookie-notice { flex-direction: column; align-items: stretch; text-align: left; }
  .lightbox { padding: 14px; }
  .lightbox-close { top: 8px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Druk ------------------------------------------------------------ */
@media print {
  .site-header, footer, .article-share, .article-nav, .pagination, .filters,
  .related-section, .cookie-notice, .lightbox, .to-top { display: none; }
  .article-header { padding: 0; background: none; color: #000; }
  .article-cover-band { display: none; }
  .prose { max-width: none; }
}

/* =====================================================================
   FILMY, PARTNERZY I ZDJĘCIA DRUŻYN
   ===================================================================== */

/* --- Wspólny stan pusty sekcji --------------------------------------- */
/* Osobna klasa od .empty-state, bo tam wszystkie linki są podkreślone
   na czerwono i przyciski wyglądałyby jak zwykły odnośnik. */
.section-empty { padding: 46px 34px; background: #f6f5f2; border-left: 3px solid var(--red); }
.section-empty h2 { margin: 0; font-size: clamp(21px, 2vw, 27px); text-transform: uppercase; }
.section-empty p { margin: 12px 0 0; max-width: 62ch; color: var(--muted); line-height: 1.7; }
.section-empty .button { margin-top: 24px; }

/* --- Filmy ------------------------------------------------------------ */
.videos-section { background: var(--navy); color: #fff; }
.videos-section .section-heading h2 { color: #fff; }
.videos-section .section-summary { color: #9eafc1; }
.videos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Na stronie głównej pierwszy film zajmuje dwie kolumny i dwa rzędy -
   nowe nagranie ma być widoczne od razu, bez klikania w podstronę. */
.videos-grid-home { grid-template-columns: repeat(3, 1fr); }
.videos-grid-home .video-card-featured { grid-column: span 2; grid-row: span 2; }

.video-card { display: flex; flex-direction: column; background: #071f3d; border: 1px solid #ffffff14; overflow: hidden; }
.video-card:hover { border-color: #ffffff33; }
.video-thumb { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #030f1f; cursor: pointer; aspect-ratio: 16/9; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: .3s; }
.video-thumb:hover img { opacity: 1; transform: scale(1.03); }
.video-play {
  position: absolute; inset: 0; margin: auto; width: 62px; height: 62px;
  display: grid; place-items: center; color: #fff; font-size: 20px;
  background: rgba(229,43,52,.92); border-radius: 50%; transition: .25s;
}
.video-thumb:hover .video-play { background: var(--red); transform: scale(1.08); }
.video-thumb-live { cursor: default; }
.video-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.video-body h3 { margin: 0; font-size: 17px; line-height: 1.35; text-transform: none; }
.video-card-featured .video-body h3 { font-size: clamp(20px, 1.9vw, 26px); }
.video-body h3 a { color: #fff; }
.video-body h3 a:hover { color: #ff8f95; }
.video-body time { color: #7f92a9; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.videos-note { margin: 26px 0 0; color: #7f92a9; font-size: 13px; line-height: 1.6; }

/* --- Nabór: osoba do kontaktu ---------------------------------------- */
.academy-contact {
  margin-top: 30px; padding: 22px 24px; max-width: 460px;
  background: rgba(0,0,0,.22); border-left: 3px solid #fff;
}
.academy-contact-label {
  margin: 0; color: rgba(255,255,255,.72); text-transform: uppercase;
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
}
.academy-contact-name {
  display: block; margin-top: 6px; font-family: var(--display);
  text-transform: uppercase; font-size: 26px; letter-spacing: .02em;
}
.academy-contact-role { display: block; margin-top: 2px; color: rgba(255,255,255,.82); font-size: 13px; }
.academy-contact-links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 16px; }
.academy-contact-links a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; border-bottom: 1px solid transparent;
}
.academy-contact-links a:hover { border-bottom-color: currentColor; }
.academy-contact-links span { font-size: 13px; opacity: .75; }

/* --- Zostań partnerem: sekcja na stronie głównej --------------------- */
.partners-section { background: #f8f7f4; }
.partners-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: stretch; }
.partners-offer { padding: 34px; background: #fff; border: 1px solid #e2e4e6; display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
/* auto-fit zamiast sztywnych dwóch kolumn: kolumna zwęża się tylko do
   220 px, a poniżej tej szerokości siatka sama schodzi do jednej. Dzięki
   temu układ nie zależy od trafienia w konkretny próg i nie robi kolumn
   z jednym wyrazem w wierszu na tabletach. */
.partners-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 26px; width: 100%; }
.partners-benefits li { padding-left: 16px; border-left: 3px solid var(--red); }
.partners-benefits b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.partners-benefits span { display: block; margin-top: 7px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.partners-contact { padding: 34px; background: linear-gradient(160deg, #0b3f79, #03162c 78%); color: #fff; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.partners-contact > span { color: #ff5860; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: .13em; }
.partners-phone { font-family: var(--display); font-size: clamp(30px, 3vw, 40px); line-height: 1.05; color: #fff; }
.partners-phone:hover { color: #ff8f95; }
.partners-contact small { color: #9eafc1; font-size: 13px; }
.partners-mail { margin-top: 14px; padding-top: 14px; border-top: 1px solid #ffffff24; color: #cfe0f2; font-size: 14px; overflow-wrap: anywhere; }
.partners-mail:hover { color: #fff; }

/* --- Zostań partnerem: podstrona ------------------------------------- */
.partners-offer-section { background: #fff; }
.partners-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.partners-card { position: relative; padding: 34px 32px; background: #f8f7f4; border-top: 3px solid var(--red); }
.partners-card-no { position: absolute; right: 22px; top: 16px; color: #dcdfe3; font-family: var(--display); font-size: 46px; line-height: 1; }
.partners-card h3 { margin: 0 0 12px; max-width: 22ch; font-size: 21px; text-transform: uppercase; }
.partners-card p { margin: 0; color: var(--muted); line-height: 1.7; }
.recruitment-person { color: #9eafc1; }

/* --- Sponsorzy: logotypy --------------------------------------------- */
.sponsors-section { background: #f8f7f4; }
.sponsors-tier + .sponsors-tier { margin-top: 64px; }
.sponsors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.sponsors-grid-main { grid-template-columns: repeat(2, 1fr); }
.sponsor-tile {
  min-height: 190px; padding: 28px; background: #fff; border: 1px solid #e2e4e6;
  display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center;
  text-align: center; transition: .25s;
}
.sponsor-tile:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(4,20,36,.1); }
/* Bez mix-blend-mode: multiply. Wtopiłoby ono białe prostokąty w kafelek,
   ale logotypy białe na przezroczystym tle (a takie jest WiaterTech)
   zniknęłyby zupełnie. Pliki przygotowuje się pod kolor kafelka: #FFFFFF. */
.sponsor-tile img { max-width: 100%; max-height: 108px; object-fit: contain; }
.sponsor-tile strong { font-family: var(--display); font-size: 22px; text-transform: uppercase; line-height: 1.15; }
.sponsor-tile small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.sponsor-tile-main { min-height: 210px; }
.sponsor-tile-main img { max-height: 120px; }
.sponsor-tile-text { background: linear-gradient(160deg, #f4f1eb, #fff); }

/* Pasek logotypów na stronie głównej - jeden rząd, zawijany. */
/* Kafelki bez rozciągania (flex-grow: 0) i wyśrodkowane: przy dziesięciu
   logotypach ostatni rząd ma cztery sztuki i rozpychanie ich do szerokości
   rzędu wyżej wyglądało jak błąd. */
.sponsors-strip { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.sponsors-strip .sponsor-tile { flex: 0 1 178px; min-height: 116px; padding: 18px; }
/* Ograniczamy logo i w pionie, i w poziomie. Bez limitu szerokości logotyp
   panoramiczny (600x104) wypełniał kafelek, a kwadratowy zostawał znaczkiem. */
.sponsors-strip .sponsor-tile img { max-height: 50px; max-width: 128px; }
.sponsors-strip .sponsor-tile strong { font-size: 17px; }
.sponsors-strip .sponsor-tile small { display: none; }

/* --- Taśma z logotypami -------------------------------------------- */
/* Ruch robi jedna animacja na kontenerze, a nie skrypt: przy dziesięciu
   logotypach nie ma po co ładować JavaScriptu. Maska po bokach wygasza
   kafelki, żeby nie ucinało ich w połowie na krawędzi ekranu. */
/* Taśma sama się przesuwa, ale da się ją też przeciągnąć kursorem albo
   palcem. Po pierwszym chwycie animacja gaśnie i zostaje zwykłe przewijanie,
   żeby nie wyrywała kafelków spod ręki. */
.sponsor-marquee {
  margin-top: 30px; overflow-x: auto; overflow-y: hidden;
  cursor: grab; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sponsor-marquee::-webkit-scrollbar { display: none; }
.sponsor-marquee.is-dragging { cursor: grabbing; }
.sponsor-marquee.is-dragging .sponsor-tile { pointer-events: none; }
.sponsor-marquee-track { display: flex; width: max-content; animation: sponsor-scroll var(--marquee-time, 40s) linear infinite; }
/* Po przejęciu taśmy przez człowieka animacja znika na dobre. */
.sponsor-marquee.is-manual .sponsor-marquee-track { animation: none; transform: none; }
.sponsor-marquee:hover .sponsor-marquee-track { animation-play-state: paused; }
.sponsor-marquee-run { display: flex; gap: 14px; padding-right: 14px; }
/* Logotypy pokazujemy duże, na białym kaflu: to jedyna zapłata, jaką
   sponsor widzi na stronie, a w miniaturze nie dało się odczytać nazwy. */
.sponsor-marquee .sponsor-tile { flex: 0 0 238px; min-height: 164px; padding: 24px; background: #fff; }
.sponsor-marquee .sponsor-tile img { max-height: 104px; max-width: 190px; }
.sponsor-marquee .sponsor-tile small { display: none; }
@keyframes sponsor-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .sponsor-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .sponsor-marquee-track { animation: none; }
}


.sponsors-benefits { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.sponsors-benefits li { padding-left: 26px; position: relative; color: #cfe0f2; line-height: 1.6; }
.sponsors-benefits li::before { content: ""; position: absolute; left: 0; top: 10px; width: 12px; height: 3px; background: var(--red); }

/* --- Zdjęcia drużyn --------------------------------------------------- */
/* Zdjęcie jest tłem karty, więc gradient „shade" musi zostać nad nim,
   inaczej biały tekst zniknie na jasnej fotografii. */
.team-card-photo { background: #03162c; }
.team-card-photo:nth-child(even) { background: #061a32; }
.team-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s; }
.team-card-photo:hover .team-photo { transform: scale(1.05); }
.team-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,18,38,.95) 8%, rgba(3,18,38,.35) 58%, rgba(3,18,38,.55)); }

/* --- Podpis wykonawcy w stopce ---------------------------------------- */
.footer-bottom { flex-wrap: wrap; gap: 10px 24px; }
.footer-credit a { color: #8fa3ba; border-bottom: 1px solid #ffffff28; padding-bottom: 1px; }
.footer-credit a:hover { color: #fff; border-bottom-color: var(--red); }

/* ---------------------------------------------------------------------
   Film z Facebooka
   ---------------------------------------------------------------------
   Graph API oddaje z nagrania tylko klatkę, więc post z filmem wyglądał
   jak zwykły wpis ze zdjęciem. Klatka staje się plakatem z przyciskiem,
   a odtwarzacz Meta wczytuje się dopiero po kliknięciu, żeby nie ładować
   jego ciasteczek każdemu odwiedzającemu. */
.fb-video { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.fb-video img { cursor: pointer; }
.fb-video.is-playing { display: block; width: 100%; max-width: 960px; margin-inline: auto; }
.fb-video.is-playing iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.fb-video-play {
  position: absolute; inset: 0; margin: auto;
  display: flex; align-items: center; gap: 10px;
  width: max-content; height: max-content;
  padding: 14px 24px; border: 0; border-radius: 999px;
  background: rgba(10, 20, 45, .86); color: #fff;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .06em;
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.fb-video-play:hover { background: var(--red); transform: scale(1.04); }
.fb-video-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.fb-video-icon { font-size: 18px; }

.fb-video-note { margin: 14px auto 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* Znaczek na kaflu wpisu, gdy w poście jest nagranie. */
.news-video-badge {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(10, 20, 45, .86); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   Odnośnik do oryginalnego posta na Facebooku
   ---------------------------------------------------------------------
   Siedzi zaraz pod zdjęciem, przed treścią, i cały jest odnośnikiem.
   Wcześniej był drobnym linkiem przy dacie, potem ramką na samym dole
   za galerią, gdzie docierał tylko ktoś, kto przewinął wszystko. */
.article-source {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 26px 0 0; padding: 22px 26px;
  background: var(--navy); color: #fff; border-radius: 10px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.article-source:hover { background: #0a2244; transform: translateY(-2px); }
.article-source:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.article-source-text { display: block; min-width: 0; }
.article-source-kicker {
  display: block; margin-bottom: 4px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.article-source-title {
  display: block;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.1; color: #fff;
}
.article-source-note {
  display: block; margin-top: 6px;
  font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .72);
}
.article-source-arrow {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 22px;
}

@media (max-width: 560px) {
  .article-source { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
  .article-source-arrow { width: 44px; height: 44px; font-size: 19px; }
}

/* ---------------------------------------------------------------------
   Sklepik: cena, zamówienie, potwierdzenie
   ---------------------------------------------------------------------
   Front używa .form-row w formularzu kontaktowym, ale zamówienie ma
   kilkanaście pól i potrzebuje siatki. Klasy .field i .field-row są te same
   co w panelu, więc redakcja widzi znajomy układ, a kod nie dubluje reguł. */
.product-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-buy strong { font-size: 19px; white-space: nowrap; }
.product-soldout { color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; }

.order-layout {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px); align-items: start;
}
.order-product {
  background: #fff; padding: 24px; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(4, 20, 36, .07);
}
.order-product img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--paper); border-radius: 6px; margin-bottom: 16px;
}
.order-product h2 {
  margin: 0 0 8px; font-family: var(--display); text-transform: uppercase; font-size: 24px;
}
.order-product p { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.order-price { font-size: 20px; font-weight: 700; color: var(--navy) !important; }

.order-form {
  background: #fff; padding: clamp(24px, 3vw, 38px); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(4, 20, 36, .07);
}
.order-form .field { margin-bottom: 18px; }
.order-form .field > label {
  display: block; margin-bottom: 8px; text-transform: uppercase;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--navy);
}
.order-form input[type="text"], .order-form input[type="email"],
.order-form input[type="tel"], .order-form input[type="number"],
.order-form select, .order-form textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line);
  background: var(--paper); font: inherit; font-size: 15px;
}
.order-form input:focus, .order-form select:focus, .order-form textarea:focus {
  border-color: var(--navy); background: #fff; outline: none;
}
.order-form textarea { resize: vertical; }
.order-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.order-form .hint { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.order-form .checkbox {
  display: flex; gap: 11px; align-items: flex-start;
  text-transform: none; font-size: 14px; font-weight: 400; letter-spacing: 0;
  color: var(--muted); line-height: 1.55;
}
.order-form .checkbox input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.order-form .form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* Pole dla botów. Poza ekranem, a nie display:none, bo część botów
   pomija pola ukryte i wtedy pułapka nic nie łapie. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.order-done { max-width: 62ch; }
.order-done p { margin: 0 0 16px; line-height: 1.7; }

@media (max-width: 860px) {
  .order-layout { grid-template-columns: 1fr; }
  .order-form .field-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Nagłówek sekcji jako odnośnik
   ---------------------------------------------------------------------
   Kibic klika w napis AKTUALNOŚCI czy TABELA, bo wygląda jak tytuł działu,
   i nic się nie działo. Odnośnik dziedziczy krój i kolor nagłówka, więc
   sekcja wygląda tak samo, a strzałka pojawia się przy najechaniu. */
.section-link {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: baseline; gap: .35em;
}
.section-link::after {
  content: "→";
  font-size: .62em; opacity: 0; transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.section-link:hover { color: var(--red); }
.section-link:hover::after { opacity: 1; transform: translateX(0); }
.section-link:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }

/* Na ciemnym tle sekcji tabeli czerwień jest zbyt ciemna, więc tam
   podświetlamy jaśniej. */
.season-head .section-link:hover { color: #ff6b73; }

/* Dodatkowe ujęcia produktu trzymamy w kafelku, ale ukryte: są tam po to,
   żeby powiększenie miało co przewijać. Widoczne zostaje zdjęcie główne
   i licznik w rogu, który mówi, że jest ich więcej. */
.product-art-photo { cursor: zoom-in; }
.product-art-extra { display: none; }
.product-art-count {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(3, 21, 43, .78); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* Lista partnerów na stronie Zostań partnerem: siatka zamiast taśmy.
   Kafelek biały, jak w taśmie, bo logotypy bywają na przezroczystym tle. */
.sponsors-section .sponsors-grid .sponsor-tile {
  min-height: 150px; padding: 22px; background: #fff;
}
.sponsors-section .sponsors-grid .sponsor-tile img { max-height: 92px; max-width: 170px; }
.sponsors-count { margin-top: 18px; text-align: center; }