/* ============================================================================
   komponenty.css — nagłówek, szuflada, listwa statusu, kafelki, szyna sprzętu,
   kalendarz, tabele cennika, formularz, mapa, baner cookies, stopka.
   Stany wg docs/DESIGN-SYSTEM.md §5. Każdy hover w @media (hover: hover).
   ============================================================================ */

/* ——— Nagłówek sticky ———
   Zewnętrzny .naglowek ma STAŁĄ wysokość (nie zmienia układu dokumentu przy scrollu);
   wizualny pasek .naglowek__pasek skraca się z 88 do 64 px wewnątrz niego. */

.naglowek {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: 72px;
  pointer-events: none;
}

.naglowek__pasek {
  height: 72px;
  pointer-events: auto;
  transition: height var(--ruch-wolny) var(--krzywa-wyjscia),
              background-color var(--ruch-wolny) var(--krzywa-wyjscia),
              box-shadow var(--ruch-wolny) var(--krzywa-wyjscia);
}

.naglowek__wnetrze {
  width: min(100% - 2 * var(--margines-bok), var(--maks-tresc));
  margin-inline: auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.naglowek[data-stan="przyklejony"] .naglowek__pasek {
  height: var(--h-naglowek);
  background: rgb(20 26 35 / 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 0 var(--c-hairline);
}

@supports not (backdrop-filter: blur(1px)) {
  .naglowek[data-stan="przyklejony"] .naglowek__pasek { background: var(--c-pow-1); }
}

.naglowek__herb {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--c-tekst);
  margin-right: auto;
  min-height: 48px;
}

.naglowek__herb img {
  width: 40px;
  height: auto;
  transform-origin: left center;
  transition: transform var(--ruch-wolny) var(--krzywa-wyjscia);
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.5));
}

.naglowek__nazwa {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-md);
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36;
  transition: opacity var(--ruch-wolny), transform var(--ruch-wolny) var(--krzywa-wyjscia);
}

.naglowek[data-stan="przyklejony"] .naglowek__nazwa { opacity: 0; transform: translateX(-6px); pointer-events: none; }

.naglowek__nav { display: none; }

.naglowek__nav ul { display: flex; gap: var(--s-1); }

.naglowek__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  color: var(--c-tekst-2);
  font-size: var(--t-sm);
  font-variation-settings: "wdth" 100, "wght" 500;
  text-decoration: none;
  white-space: nowrap;
}

.naglowek__nav a::after {
  content: "";
  position: absolute;
  left: var(--s-3); right: var(--s-3); bottom: 6px;
  height: 2px;
  background: var(--c-zloto);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ruch-szybki) var(--krzywa-wyjscia);
}

.naglowek__nav a[aria-current="page"] { color: var(--c-tekst); }
.naglowek__nav a[aria-current="page"]::after { transform: scaleX(1); }
.naglowek__nav a:active { transform: translateY(1px); }

@media (hover: hover) {
  .naglowek__nav a:hover { color: var(--c-tekst); }
  .naglowek__nav a:hover::after { transform: scaleX(1); }
}

.naglowek__tel { min-width: 48px; padding-inline: var(--s-3); }
.naglowek__tel span { display: none; }

.naglowek__burger {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-1);
  color: var(--c-tekst);
}
.naglowek__burger .ikona { width: 26px; height: 26px; grid-area: 1 / 1; transition: opacity var(--ruch-szybki), transform var(--ruch-bazowy) var(--krzywa-wyjscia); }
.naglowek__burger .ikona--zamknij { opacity: 0; transform: rotate(-90deg); }
.naglowek__burger[aria-expanded="true"] .ikona--menu { opacity: 0; transform: rotate(90deg); }
.naglowek__burger[aria-expanded="true"] .ikona--zamknij { opacity: 1; transform: none; }

@media (min-width: 480px) {
  .naglowek__herb img { width: 48px; }
}

@media (min-width: 768px) {
  .naglowek, .naglowek__pasek { height: 88px; }
  .naglowek__herb img { width: 52px; }
  .naglowek[data-stan="przyklejony"] .naglowek__herb img { transform: scale(0.7); }
  .naglowek__tel span { display: inline; }
  .naglowek__tel { padding-inline: var(--s-5); }
}

@media (min-width: 1280px) {
  .naglowek__nav { display: block; }
  .naglowek__burger { display: none; }
}

/* ——— Szuflada mobilna ——— */

/* Przy otwartej szufladzie nagłówek wchodzi NAD nią, żeby przycisk zamknięcia pozostał dostępny. */
body:has(.szuflada.otwarta) .naglowek { z-index: calc(var(--z-szuflada) + 1); }

.szuflada { position: fixed; inset: 0; z-index: var(--z-szuflada); }
.szuflada[hidden] { display: none; }

.szuflada__tlo {
  position: absolute; inset: 0;
  background: rgb(14 18 24 / 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--ruch-wolny) var(--krzywa-wyjscia);
}

.szuflada__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 400px);
  display: flex;
  flex-direction: column;
  padding: calc(var(--s-8) + var(--s-5)) var(--s-5) var(--s-6);
  background: var(--c-pow-1);
  box-shadow: var(--cien-3), -1px 0 0 0 var(--c-hairline);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--ruch-wolny) var(--krzywa-wyjscia);
}

.szuflada.otwarta .szuflada__tlo { opacity: 1; }
.szuflada.otwarta .szuflada__panel { transform: none; }

.szuflada__lista a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-inline: var(--s-3);
  border-bottom: 1px solid var(--c-hairline);
  color: var(--c-tekst-2);
  font-size: var(--t-md);
  font-variation-settings: "wdth" 100, "wght" 500;
  text-decoration: none;
}
.szuflada__lista a[aria-current="page"] { color: var(--c-tekst); box-shadow: inset 2px 0 0 var(--c-zloto); }

.szuflada__stopka { margin-top: auto; padding-top: var(--s-6); display: grid; gap: var(--s-2); }
.szuflada__stopka .btn { width: 100%; }
.szuflada__dopisek { font-size: var(--t-xs); color: var(--c-tekst-3); text-align: center; }
.szuflada__godziny { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); font-size: var(--t-sm); color: var(--c-tekst-2); }
.szuflada__godziny .ikona { color: var(--c-zloto); }

/* ——— Okruszki ——— */

.okruszki { margin-bottom: var(--s-5); font-size: var(--t-xs); color: var(--c-tekst-3); }
.okruszki ol { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.okruszki li + li::before { content: "/"; margin-right: var(--s-2); color: var(--c-krawedz); }
.okruszki a { color: var(--c-tekst-3); text-decoration: none; display: inline-block; padding-block: var(--s-2); }
.okruszki [aria-current] { color: var(--c-tekst-2); }
@media (hover: hover) { .okruszki a:hover { color: var(--c-tekst); } }

/* ——— Nagłówek podstrony ——— */

.naglowek-strony {
  position: relative;
  padding-block: var(--s-sekcja-ciasna) var(--s-sekcja);
  background: var(--tlo-oswietlenie-celu);
  overflow: clip;
}
.naglowek-strony h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4.5rem); max-width: 22ch; }
.naglowek-strony .lead { margin-top: var(--s-5); }
.naglowek-strony .lead + p, .naglowek-strony__akcje { margin-top: var(--s-6); }
.naglowek-strony__akcje { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.naglowek-strony__uklad { display: grid; gap: var(--s-6); align-items: center; }
.naglowek-strony__obraz { position: relative; }
.naglowek-strony__obraz img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-3); box-shadow: var(--cien-3); }

/* Zdjęcie CC BY-SA w tle: przyciemnienie WYŁĄCZNIE overlayem — plik źródłowy nietknięty. */
.naglowek-strony--tlo { padding-block: var(--s-sekcja) ; min-height: 60svh; display: flex; align-items: flex-end; }
.naglowek-strony--tlo > .wnetrze { position: relative; z-index: 1; }
.naglowek-strony__tlo { position: absolute; inset: 0; z-index: 0; }
.naglowek-strony__tlo picture { width: 100%; height: 100%; }
.naglowek-strony__tlo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.naglowek-strony__tlo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--c-noc) 10%, rgb(14 18 24 / 0.86) 48%, rgb(14 18 24 / 0.5) 100%),
    linear-gradient(0deg, var(--c-noc) 0%, transparent 45%);
}
.naglowek-strony--granat .naglowek-strony__tlo::after {
  background:
    linear-gradient(90deg, var(--c-granat-glebia) 10%, rgb(20 31 61 / 0.88) 48%, rgb(20 31 61 / 0.55) 100%),
    linear-gradient(0deg, var(--c-noc) 0%, transparent 45%);
}
.naglowek-strony__atrybucja { margin-top: var(--s-6); font-size: var(--t-2xs); color: var(--c-tekst-3); }
.naglowek-strony__atrybucja a { color: var(--c-tekst-3); }

@media (min-width: 1024px) {
  .naglowek-strony__uklad { grid-template-columns: 7fr 5fr; gap: var(--s-8); }
  .naglowek-strony__obraz { margin-right: calc(-1 * var(--wyjscie)); }
  .naglowek-strony__obraz img { border-radius: var(--r-3) 0 0 var(--r-3); }
}

/* ——— Listwa statusu ——— */

.listwa {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--c-pow-2);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-2);
  box-shadow: var(--cien-2), var(--krawedz-gorna);
  font-size: var(--t-sm);
  color: var(--c-tekst-2);
}

.listwa p { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; max-width: none; }
.listwa__stan { color: var(--c-tekst); font-variation-settings: "wdth" 100, "wght" 500; }
.listwa__kropka { width: 10px; height: 10px; border-radius: var(--r-kolo); flex: none; }
.listwa__stan[data-stan="otwarte"] .listwa__kropka { background: var(--c-otwarte); box-shadow: 0 0 0 3px rgb(111 208 140 / 0.2); }
.listwa__stan[data-stan="zamkniete"] .listwa__kropka { border: 2px solid var(--c-zamkniete); }
.listwa__nastepny .ikona { color: var(--c-zloto); }
.listwa__link { color: var(--c-tekst-3); font-size: var(--t-xs); }
.listwa__tel { justify-self: start; }

@media (min-width: 768px) {
  .listwa { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-5); }
  .listwa__nastepny { padding-left: var(--s-5); border-left: 1px solid var(--c-hairline); }
}

/* ——— Godziny ——— */

.godziny { display: grid; gap: var(--s-4); }
.godziny__blok { padding: var(--s-5); background: var(--c-pow-2); border: 1px solid var(--c-hairline); border-radius: var(--r-2); box-shadow: var(--krawedz-gorna); }
.godziny__blok--otwarty { background: var(--c-pow-3); border-color: var(--c-zloto-cien); position: relative; }
.godziny__blok--otwarty::before { content: ""; position: absolute; left: 0; top: var(--s-5); bottom: var(--s-5); width: 2px; background: var(--c-zloto); }
.godziny__naglowek { font-size: var(--t-md); margin-bottom: var(--s-3); }
.godziny__termin { font-size: var(--t-md); color: var(--c-swiatlo); margin-bottom: var(--s-2); }
.godziny__termin strong { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36; }
.godziny__lista { display: grid; }
.godziny__lista li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4); padding-block: var(--s-3); border-top: 1px solid var(--c-hairline); }
.godziny__lista li:first-child { border-top: 0; padding-top: 0; }
.godziny__lista strong { color: var(--c-tekst); font-variation-settings: "wdth" 100, "wght" 600; }
.godziny__opis { color: var(--c-tekst-3); font-size: var(--t-sm); }

@media (min-width: 640px) {
  .godziny { grid-template-columns: 5fr 7fr; align-items: start; }
  .godziny__blok--otwarty { margin-top: var(--s-6); }
}

/* ——— Kafelek aktualności ——— */

.wpis {
  position: relative;
  background: var(--c-pow-2);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-3);
  box-shadow: var(--krawedz-gorna);
  overflow: hidden;
  transition: background-color var(--ruch-bazowy) var(--krzywa-wyjscia),
              transform var(--ruch-bazowy) var(--krzywa-wyjscia),
              box-shadow var(--ruch-bazowy) var(--krzywa-wyjscia);
}

.wpis__link { display: grid; height: 100%; color: inherit; text-decoration: none; }
.wpis__link:focus-visible { outline-offset: -2px; border-radius: var(--r-3); }
.wpis__media { position: relative; background: var(--c-pow-3); overflow: hidden; }
.wpis__media img, .wpis__brak { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--ruch-bazowy) var(--krzywa-wyjscia); }
.wpis__brak { display: grid; place-items: center; background: radial-gradient(60% 80% at 50% 50%, rgb(246 241 230 / 0.06), transparent 70%), var(--c-pow-3); }
.wpis__brak-herb { opacity: 0.22; width: 56px; }
.wpis--wiodacy .wpis__brak { aspect-ratio: 21 / 9; }
.wpis--wiodacy .wpis__brak-herb { width: 72px; }
.wpis__media .plakietka { position: absolute; left: var(--s-4); top: var(--s-4); background: rgb(14 18 24 / 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wpis__tresc { padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.wpis__meta { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-xs); color: var(--c-tekst-3); font-variation-settings: "wdth" 100, "wght" 500; }
.wpis__tytul { font-size: var(--t-lg); }
.wpis__zajawka { font-size: var(--t-sm); color: var(--c-tekst-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wpis__wiecej { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--t-sm); color: var(--c-zloto); font-variation-settings: "wdth" 100, "wght" 600; }
.wpis__wiecej .ikona { transition: transform var(--ruch-bazowy) var(--krzywa-wyjscia); }

.wpis--wiodacy .wpis__tytul { font-size: var(--t-xl); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 72; }
.wpis--wiodacy .wpis__tresc { padding: var(--s-6); }
.wpis--wiodacy .wpis__zajawka { font-size: var(--t-base); -webkit-line-clamp: 2; }

@media (min-width: 480px) {
  .wpis--maly .wpis__link { grid-template-columns: 112px 1fr; }
  .wpis--maly .wpis__media img, .wpis--maly .wpis__brak { aspect-ratio: 3 / 4; height: 100%; }
  .wpis--maly .wpis__media .plakietka { display: none; }
  .wpis--maly .wpis__tytul { font-size: var(--t-md); }
  .wpis--maly .wpis__zajawka { display: none; }
  .wpis--maly .wpis__meta::after { content: attr(data-kategoria); }
}

@media (hover: hover) {
  .wpis:hover { background: var(--c-pow-3); transform: translateY(-3px); box-shadow: var(--cien-2), var(--krawedz-gorna); }
  .wpis:hover .wpis__media img { transform: scale(1.04); }
  .wpis:hover .wpis__wiecej .ikona { transform: translateX(4px); }
}
.wpis:has(.wpis__link:focus-visible) { background: var(--c-pow-3); transform: none; }
.wpis:active { transform: translateY(-1px); box-shadow: var(--cien-1); }

/* Lista /aktualnosci — siatka redakcyjna 7/5 → 5/7 */
.lista-wpisow { display: grid; gap: var(--s-5); }
@media (min-width: 768px) {
  .lista-wpisow { grid-template-columns: repeat(12, 1fr); }
  .lista-wpisow .wpis:nth-child(4n + 1), .lista-wpisow .wpis:nth-child(4n + 4) { grid-column: span 7; }
  .lista-wpisow .wpis:nth-child(4n + 2), .lista-wpisow .wpis:nth-child(4n + 3) { grid-column: span 5; }
  .lista-wpisow .wpis:nth-child(4n + 2), .lista-wpisow .wpis:nth-child(4n + 4) { margin-top: var(--s-6); }
}

.filtry { margin-bottom: var(--s-6); }
.filtry ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filtry a {
  display: inline-flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-krawedz); border-radius: var(--r-1); color: var(--c-tekst-2);
  font-size: var(--t-sm); font-variation-settings: "wdth" 100, "wght" 500; text-decoration: none;
  transition: background-color var(--ruch-szybki), color var(--ruch-szybki), border-color var(--ruch-szybki);
}
.filtry a[aria-current="true"] { background: var(--c-swiatlo); color: var(--c-noc); border-color: var(--c-swiatlo); }
@media (hover: hover) { .filtry a:not([aria-current]):hover { border-color: var(--c-krawedz-mocna); color: var(--c-tekst); } }

.paginacja { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--c-hairline); }
.paginacja__stan { color: var(--c-tekst-3); font-size: var(--t-sm); }

/* ——— Sprzęt: płytka-gablota, szyna, siatka ——— */

.sprzet { display: grid; grid-template-rows: auto 1fr; gap: var(--s-4); min-width: 0; align-content: start; }
.sprzet__plytka {
  display: grid; place-items: center;
  /* Stała wysokość pola zdjęcia, niezależna od długości opisu kafelka. */
  height: calc(140px + 2 * var(--s-4) + 2px);
  min-width: 0;
  padding: var(--s-4);
  background: var(--c-plyta);
  border: 1px solid var(--c-plyta-hairline);
  border-radius: var(--r-2);
  box-shadow: var(--cien-1);
  transition: box-shadow var(--ruch-bazowy) var(--krzywa-wyjscia);
}
.sprzet__plytka picture { width: min(100%, 270px); height: 140px; }
/* Wspólne pole 270×140, bez kadrowania, rozciągania ani powiększania zdjęć. */
.sprzet__plytka img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.sprzet__opis { display: grid; gap: var(--s-2); justify-items: start; align-content: start; transition: transform var(--ruch-bazowy) var(--krzywa-wyjscia); }
.sprzet__nazwa { font-size: var(--t-md); }
.sprzet__detal { font-size: var(--t-sm); color: var(--c-tekst-3); }

@media (hover: hover) {
  .sprzet:hover .sprzet__plytka { box-shadow: var(--cien-2); }
  .sprzet:hover .sprzet__opis { transform: translateY(-2px); }
}

.szyna {
  /* min-width: 0 — inaczej w gridzie/flexie element nie zwezi sie
     ponizej szerokosci toru i overflow-x nie zadziala. */
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--wyjscie);
  scrollbar-width: none;
  padding-block: var(--s-2) var(--s-6);
}
.szyna::-webkit-scrollbar { display: none; }
.szyna__tor { display: flex; gap: var(--s-5); padding-inline: var(--wyjscie); width: max-content; }
.szyna .sprzet { flex: 0 0 auto; width: min(78vw, 302px); scroll-snap-align: start; }
.szyna__sterowanie { display: none; gap: var(--s-2); }
.szyna__strzalka {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--c-krawedz); border-radius: var(--r-1);
  color: var(--c-tekst);
  transition: border-color var(--ruch-szybki), color var(--ruch-szybki), background-color var(--ruch-szybki);
}
.szyna__strzalka[aria-disabled="true"] { color: var(--c-tekst-wyl); border-color: var(--c-hairline); cursor: not-allowed; }
@media (hover: hover) { .szyna__strzalka:not([aria-disabled="true"]):hover { border-color: var(--c-krawedz-mocna); background: rgb(255 255 255 / 0.04); } }
@media (min-width: 1024px) { .szyna__sterowanie { display: flex; } }

.gablota { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }

/* ——— Kalendarz — oś pionowa ——— */

.kalendarz { position: relative; display: grid; gap: var(--s-2); }
.kalendarz::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 1px; background: var(--c-hairline); }

.zawody {
  position: relative;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-6);
  margin-inline: calc(var(--s-4) * -1);
  padding-inline: calc(var(--s-6) + var(--s-4)) var(--s-4);
  border-radius: var(--r-2);
  transition: background-color var(--ruch-szybki) var(--krzywa-wyjscia);
}
.zawody::before {
  content: "";
  position: absolute;
  left: calc(var(--s-4) + 1.5px); top: calc(var(--s-4) + 0.55em);
  width: 8px; height: 8px;
  border-radius: var(--r-kolo);
  background: var(--c-zloto);
}
.kalendarz::before { left: calc(var(--s-4) + 5px - var(--s-4)); }
.zawody[data-najblizsze]::before { box-shadow: 0 0 0 3px rgb(214 179 106 / 0.25); animation: puls 2.4s ease-in-out infinite; }
.zawody[data-stan="minione"] { opacity: 0.45; }
.zawody[data-stan="minione"]::before { background: var(--c-tekst-3); }
.zawody[data-stan="trwa"]::before { background: var(--c-czerwien); }

@keyframes puls { 0%, 100% { box-shadow: 0 0 0 3px rgb(214 179 106 / 0.25); } 50% { box-shadow: 0 0 0 7px rgb(214 179 106 / 0.08); } }

@media (hover: hover) { .zawody:hover { background: var(--c-pow-2); } }
@media (prefers-reduced-motion: reduce) { .zawody[data-najblizsze]::before { animation: none; } }

.zawody__data { font-size: var(--t-md); color: var(--c-swiatlo); font-variation-settings: "wdth" 100, "wght" 700; white-space: nowrap; }
.zawody__tresc { display: grid; gap: var(--s-2); }
.zawody__nazwa { font-size: var(--t-md); }
.zawody__dopisek { color: var(--c-tekst-2); font-family: var(--font-tekst); font-weight: 400; font-size: var(--t-sm); letter-spacing: 0; }
.zawody__miejsce { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--c-tekst-2); }
.zawody__miejsce .ikona { color: var(--c-tekst-3); }
.zawody__miejsce--brak { color: var(--c-tekst-3); font-style: italic; }
.zawody__plakietki { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.zawody__plakietki:empty { display: none; }
.zawody__minione { font-size: var(--t-xs); color: var(--c-tekst-3); text-transform: uppercase; letter-spacing: 0.08em; }
.zawody__kategorie summary { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; cursor: pointer; font-size: var(--t-sm); color: var(--c-tekst-3); list-style: none; }
.zawody__kategorie summary::-webkit-details-marker { display: none; }
.zawody__kategorie summary .ikona { transition: transform var(--ruch-bazowy) var(--krzywa-wyjscia); }
.zawody__kategorie[open] summary .ikona { transform: rotate(180deg); }
.zawody__kategorie ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.zawody__kategorie li { font-size: var(--t-xs); padding: 0.2em 0.6em; border: 1px solid var(--c-hairline); border-radius: var(--r-1); color: var(--c-tekst-2); }

@media (min-width: 768px) {
  .kalendarz--pelny .zawody { grid-template-columns: 11rem 1fr; gap: var(--s-5); padding-left: calc(var(--s-6) + var(--s-4)); }
  .kalendarz--pelny .zawody__data { padding-top: 0.1em; }
  .kalendarz--pelny .zawody__kategorie summary { display: none; }
  .kalendarz--pelny .zawody__kategorie > ul { display: flex; }
}

.legenda { display: grid; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--c-hairline); font-size: var(--t-sm); color: var(--c-tekst-3); max-width: var(--maks-czytanie); }
.legenda dt { display: inline; color: var(--c-tekst-2); font-variation-settings: "wdth" 100, "wght" 600; }
.legenda dt::after { content: " — "; }
.legenda dd { display: inline; }

.kategorie { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.kategorie li { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; color: var(--c-tekst); padding: var(--s-3) var(--s-5); border: 1px solid var(--c-hairline); border-radius: var(--r-2); background: var(--c-pow-2); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36; }

/* ——— Tabele cennika (na płycie) ——— */

.cennik { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.cennik caption { text-align: left; padding-bottom: var(--s-3); font-size: var(--t-md); font-family: var(--font-display); font-weight: 600; color: var(--c-plyta-tekst); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36; }
.cennik thead th { padding: var(--s-2) var(--s-3); background: var(--c-plyta-cien); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--ls-etykieta); font-variation-settings: "wdth" 86, "wght" 600; color: var(--c-plyta-tekst-2); text-align: left; }
.cennik thead th:last-child, .cennik .cena { text-align: right; }
.cennik tbody th, .cennik td { padding: var(--s-3); border-bottom: 1px solid var(--c-plyta-hairline); vertical-align: top; }
.cennik tbody th { text-align: left; font-weight: 400; color: var(--c-plyta-tekst); }
.cennik .cena { font-variation-settings: "wdth" 100, "wght" 700; color: var(--c-plyta-tekst); white-space: nowrap; }
.cena__jedn { font-size: var(--t-xs); color: var(--c-plyta-tekst-3); font-variation-settings: "wdth" 100, "wght" 400; }
.cennik .cena--od { color: var(--c-plyta-tekst-3); font-variation-settings: "wdth" 100, "wght" 400; white-space: normal; }
.cennik__wyrozniony th, .cennik__wyrozniony td { font-variation-settings: "wdth" 100, "wght" 600; }
.cennik__wyrozniony th { box-shadow: inset 3px 0 0 var(--c-plyta-czerwien); }
@media (hover: hover) { .cennik tbody tr:hover { background: rgb(28 36 47 / 0.05); transition: background-color var(--ruch-szybki); } }
.cennik tbody tr:focus-within { background: rgb(28 36 47 / 0.05); }
@media (max-width: 639px) {
  .cennik thead th { font-variation-settings: "wdth" 75, "wght" 600; }
  .cennik--trzy { font-size: var(--t-sm); }
}

/* ——— Tabele dokumentów (polityka, licencje) ——— */

.tabela-przewijana { min-width: 0; overflow-x: auto; margin-inline: calc(var(--margines-bok) * -1); padding-inline: var(--margines-bok); }
.tabela { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--t-sm); }
.tabela th, .tabela td { padding: var(--s-3); border-bottom: 1px solid var(--c-hairline); text-align: left; vertical-align: top; }
.tabela thead th { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--ls-etykieta); color: var(--c-tekst-3); font-variation-settings: "wdth" 86, "wght" 600; background: var(--c-pow-1); }
.tabela tbody th { color: var(--c-tekst); font-weight: 400; font-variation-settings: "wdth" 100, "wght" 600; }
.tabela--licencje th[scope="row"] { display: grid; gap: var(--s-2); min-width: 160px; }
.licencja__podglad { display: block; width: 120px; }
.licencja__podglad img { width: 120px; height: 72px; object-fit: cover; border-radius: var(--r-1); }

/* ——— FAQ — natywne <details> ——— */

.faq { display: grid; max-width: var(--maks-czytanie); border-top: 1px solid var(--c-hairline); }
.faq__pozycja { border-bottom: 1px solid var(--c-hairline); }
.faq__pozycja summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; padding-block: var(--s-3); cursor: pointer; list-style: none; color: var(--c-tekst); font-size: var(--t-md); font-variation-settings: "wdth" 100, "wght" 500; }
.faq__pozycja summary::-webkit-details-marker { display: none; }
.faq__pozycja summary .ikona { color: var(--c-zloto); transition: transform var(--ruch-bazowy) var(--krzywa-wyjscia); }
.faq__pozycja[open] summary .ikona { transform: rotate(180deg); }
.faq__odpowiedz { padding-bottom: var(--s-5); color: var(--c-tekst-2); }
@media (hover: hover) { .faq__pozycja summary:hover { color: var(--c-swiatlo); } }

/* ——— Formularz ——— */

.formularz { display: grid; gap: var(--s-5); max-width: var(--maks-czytanie); }
.formularz[hidden] { display: none; }
.pole { display: grid; gap: var(--s-2); }
.pole label { color: var(--c-tekst); font-size: var(--t-sm); font-variation-settings: "wdth" 100, "wght" 500; }
.pole__wymagane { color: var(--c-zloto); }
.pole input:not([type="checkbox"]), .pole select, .pole textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-pow-2);
  border: 1px solid var(--c-krawedz);
  border-radius: var(--r-1);
  color: var(--c-tekst);
  transition: background-color var(--ruch-szybki), border-color var(--ruch-szybki);
}
.pole textarea { resize: vertical; min-height: 9rem; line-height: var(--lh-tekst); }
.pole ::placeholder { color: var(--c-tekst-3); opacity: 1; }
.pole input:focus-visible, .pole select:focus-visible, .pole textarea:focus-visible { border-color: var(--c-zloto); outline-offset: 2px; }
@media (hover: hover) {
  .pole input:hover, .pole select:hover, .pole textarea:hover { background: var(--c-pow-3); border-color: var(--c-krawedz-mocna); }
}
.pole [aria-invalid="true"] { background: var(--c-blad-tlo); border: 2px solid var(--c-blad); }
.pole__select { position: relative; }
.pole__select select { appearance: none; padding-right: var(--s-8); cursor: pointer; }
.pole__select .ikona { position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--c-tekst-3); }
.pole__pomoc { font-size: var(--t-xs); color: var(--c-tekst-3); }
.pole__blad { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--t-sm); color: var(--c-blad); }
.pole__blad[hidden] { display: none; }
.pole__blad::before { content: ""; flex: none; width: 1em; height: 1em; margin-top: 0.3em; border-radius: var(--r-kolo); border: 1.5px solid currentColor; background: radial-gradient(circle at 50% 42%, currentColor 0 1px, transparent 1.5px), radial-gradient(circle at 50% 70%, currentColor 0 0.8px, transparent 1.2px); }
.pole--zgoda { grid-template-columns: auto 1fr; align-items: start; gap: var(--s-3); }
.pole--zgoda label { font-size: var(--t-sm); color: var(--c-tekst-2); font-variation-settings: "wdth" 100, "wght" 400; line-height: 1.5; }
.pole--zgoda .pole__blad { grid-column: 1 / -1; }
.pole--zgoda input { width: 24px; height: 24px; margin: 0.15rem 0 0; accent-color: var(--c-zloto); cursor: pointer; }
.formularz__wyslij { display: grid; gap: var(--s-3); justify-items: start; }
.formularz__nota { font-size: var(--t-sm); color: var(--c-tekst-3); }
.ikona--spinner { display: none; animation: obrot 0.9s linear infinite; }
.btn[aria-busy="true"] .ikona--spinner { display: block; }
@keyframes obrot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ikona--spinner { animation: none; } }

.formularz__podsumowanie { display: flex; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--c-blad); border-radius: var(--r-2); background: var(--c-blad-tlo); color: var(--c-tekst); }
.formularz__podsumowanie .ikona { color: var(--c-blad); }
.formularz__podsumowanie[hidden] { display: none; }

.komunikat { display: flex; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-2); border: 1px solid; max-width: var(--maks-czytanie); margin-top: var(--s-5); }
.komunikat[hidden] { display: none; }
.komunikat .ikona { flex: none; width: 1.5em; height: 1.5em; }
.komunikat p + p { margin-top: var(--s-2); }
.komunikat--sukces { background: var(--c-sukces-tlo); border-color: #2B5A3A; color: var(--c-tekst-2); }
.komunikat--sukces .ikona, .komunikat--sukces strong { color: var(--c-otwarte); }
.komunikat--blad { background: var(--c-blad-tlo); border-color: var(--c-czerwien-cien); color: var(--c-tekst-2); }
.komunikat--blad .ikona, .komunikat--blad strong { color: var(--c-blad); }
[data-komunikat-start] { margin-top: 0; }

/* ——— Mapa za bramką zgody ——— */

.mapa { position: relative; aspect-ratio: 4 / 3; background: var(--c-pow-2); border: 1px solid var(--c-hairline); border-radius: var(--r-4); overflow: hidden; box-shadow: var(--cien-2); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.2) contrast(1.05); }
.mapa__zaslepka { position: absolute; inset: 0; display: grid; align-content: end; padding: var(--s-5); background: radial-gradient(80% 70% at 70% 20%, rgb(246 241 230 / 0.07), transparent 65%); }
.mapa__zaslepka[hidden] { display: none; }
.mapa__tarcza { position: absolute; right: -10%; top: -12%; width: 70%; height: auto; color: var(--c-zloto); opacity: 0.5; pointer-events: none; }
.mapa__tresc { position: relative; display: grid; gap: var(--s-3); }
.mapa__adres { display: flex; gap: var(--s-2); color: var(--c-tekst); font-variation-settings: "wdth" 100, "wght" 500; }
.mapa__adres .ikona { color: var(--c-czerwien); margin-top: 0.15em; }
.mapa__nota { font-size: var(--t-xs); color: var(--c-tekst-3); }
.mapa__przyciski { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (min-width: 768px) { .mapa { aspect-ratio: 16 / 10; } }

/* ——— Kopiowanie numeru konta ——— */

.btn-kopiuj { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-krawedz); border-radius: var(--r-1); color: var(--c-tekst-2); font-size: var(--t-xs); font-variation-settings: "wdth" 100, "wght" 600; transition: color var(--ruch-szybki), border-color var(--ruch-szybki); }
.btn-kopiuj.skopiowano { color: var(--c-otwarte); border-color: #2B5A3A; }
@media (hover: hover) { .btn-kopiuj:hover { color: var(--c-tekst); border-color: var(--c-krawedz-mocna); } }

.przelew { display: grid; gap: var(--s-4); padding: var(--s-5); background: var(--c-pow-2); border: 1px solid var(--c-hairline); border-radius: var(--r-2); box-shadow: var(--krawedz-gorna); }
.przelew dt { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--ls-etykieta); color: var(--c-tekst-3); font-variation-settings: "wdth" 86, "wght" 600; margin-bottom: var(--s-1); }
.przelew dd { color: var(--c-tekst); font-size: var(--t-md); }
.przelew__konto dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; color: var(--c-swiatlo); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36; letter-spacing: 0.01em; }
.przelew__konto .btn-kopiuj { font-family: var(--font-tekst); font-weight: 400; }

/* ——— Baner cookies ——— */

.cookies {
  position: fixed;
  left: var(--s-4); right: var(--s-4); bottom: var(--s-4);
  z-index: var(--z-cookies);
  max-width: 440px;
  display: grid;
}
.cookies[hidden] { display: none; }

/* Na wezszych ekranach baner zajmuje cala szerokosc u dolu. Od 900 px
   przyklejamy go do PRAWEJ krawedzi — po lewej, na dole pierwszego ekranu,
   stoja przyciski hero („Zadzwon i zarezerwuj") i baner je zaslanial. */
@media (min-width: 900px) {
  .cookies { left: auto; right: var(--s-5); bottom: var(--s-5); width: min(440px, calc(100vw - 2 * var(--s-5))); }
}
.cookies__panel {
  padding: var(--s-5);
  background: var(--c-pow-2);
  border: 1px solid var(--c-krawedz);
  border-radius: var(--r-3);
  box-shadow: var(--cien-3), var(--krawedz-gorna);
  display: grid;
  gap: var(--s-4);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--ruch-wolny) var(--krzywa-wyjscia), transform var(--ruch-wolny) var(--krzywa-wyjscia);
}
.cookies.widoczny .cookies__panel { opacity: 1; transform: none; }
.cookies__panel[hidden] { display: none; }
.cookies__ikona { color: var(--c-zloto); }
.cookies__naglowek { font-size: var(--t-md); }
.cookies__opis { font-size: var(--t-sm); color: var(--c-tekst-2); }
.cookies__przyciski { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.cookies__przyciski .btn { min-height: 48px; padding-inline: var(--s-3); }
.cookies__przyciski .btn--tekstowy { grid-column: 1 / -1; }
/* Telefon: baner jest kompaktowy na WSZYSTKICH podstronach (na 320 px zajmowal 69% ekranu).
   Nic nie jest ukryte poza dekoracyjna ikona: zostaja tytul, tresc z odnosnikiem do polityki
   prywatnosci, rownorzedne przyciski „Akceptuje wszystkie” i „Tylko niezbedne” oraz „Ustawienia”. */
@media (max-width: 639px) {
  .cookies__ikona { display: none; }
  .cookies__panel { padding: var(--s-3) var(--s-4); gap: var(--s-2); }
  .cookies__naglowek { font-size: var(--t-base); }
  .cookies__opis { font-size: var(--t-xs); line-height: 1.45; }
  .cookies__przyciski .btn { min-height: 44px; font-size: var(--t-xs); }
}

.cookies__kategoria { display: grid; gap: var(--s-1); padding-block: var(--s-3); border-top: 1px solid var(--c-hairline); }
.cookies__kategoria p { font-size: var(--t-xs); color: var(--c-tekst-3); }
.cookies__kategoria-naglowek { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 32px; }
.cookies__kategoria-nazwa { color: var(--c-tekst); font-variation-settings: "wdth" 100, "wght" 600; }
.cookies__zawsze { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--ls-etykieta); color: var(--c-otwarte); }

.przelacznik { appearance: none; width: 48px; height: 28px; margin: 0; border-radius: var(--r-kolo); background: var(--c-pow-3); border: 1px solid var(--c-krawedz); position: relative; cursor: pointer; transition: background-color var(--ruch-szybki), border-color var(--ruch-szybki); }
.przelacznik::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--r-kolo); background: var(--c-tekst-2); transition: transform var(--ruch-bazowy) var(--krzywa-wyjscia), background-color var(--ruch-szybki); }
.przelacznik:checked { background: var(--c-zloto-cien); border-color: var(--c-zloto); }
.przelacznik:checked::after { transform: translateX(20px); background: var(--c-zloto); }

/* ——— Stopka ——— */

.stopka { position: relative; z-index: var(--z-tresc); background: var(--c-stopka); color: var(--c-tekst-2); font-size: var(--t-sm); box-shadow: var(--krawedz-gorna); }
.stopka__wnetrze { width: min(100% - 2 * var(--margines-bok), var(--maks-tresc)); margin-inline: auto; display: grid; gap: var(--s-7) var(--rynna); padding-block: var(--s-9) var(--s-7); }
.stopka__tytul { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--ls-etykieta); color: var(--c-zloto); font-variation-settings: "wdth" 86, "wght" 600; margin-bottom: var(--s-4); }
.stopka__marka { display: grid; gap: var(--s-3); justify-items: start; }
.stopka__herb { display: inline-block; }
.stopka__nazwa { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; color: var(--c-tekst); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36; }
.stopka__opis { max-width: 36ch; }
.stopka__facebook { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--c-krawedz); border-radius: var(--r-1); color: var(--c-tekst-2); transition: color var(--ruch-szybki), border-color var(--ruch-szybki); }
@media (hover: hover) { .stopka__facebook:hover { color: var(--c-tekst); border-color: var(--c-krawedz-mocna); } }
.stopka__nav ul { display: grid; gap: var(--s-1); }
.stopka__nav a, .stopka__kontakt a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-tekst-2); text-decoration: none; }
@media (hover: hover) { .stopka__nav a:hover, .stopka__kontakt a:hover { color: var(--c-tekst); text-decoration: underline; text-decoration-color: var(--c-zloto); } }
.stopka__kontakt p + p { margin-top: 0; }
.stopka__konto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); color: var(--c-tekst); font-variation-settings: "wdth" 100, "wght" 600; font-size: var(--t-base); max-width: none; }
.stopka__drobne { font-size: var(--t-xs); color: var(--c-tekst-3); margin-top: var(--s-2); }

/* Numer konta lamal sie w losowym miejscu, bo to jeden ciag ze spacjami.
   Dzielimy go na dwie grupy i kazdej zabraniamy sie lamac w srodku. */
.stopka__numer { display: grid; gap: 0.1em; }
.stopka__numer > span { white-space: nowrap; }

/* Dane przelewu jako pary etykieta-wartosc. Wczesniej szly jednym ciagiem
   rozdzielonym kropka i nazwa odbiorcy pekala miedzy "SMKS" a "Kety". */
.stopka__przelew { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--c-tekst-3); }
.stopka__przelew dt { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--ls-etykieta); color: var(--c-tekst-3); margin-bottom: 0.15em; }
/* Odstep idzie PRZED kolejna pare, zeby etykieta trzymala sie swojej wartosci,
   a nie zlewala z poprzednia. */
.stopka__przelew dt + dd { margin: 0 0 var(--s-3); color: var(--c-tekst-2); text-wrap: balance; }
.stopka__przelew dd:last-child { margin-bottom: 0; }
.stopka__pasek { border-top: 1px solid var(--c-hairline); }
.stopka__pasek > * { width: min(100% - 2 * var(--margines-bok), var(--maks-tresc)); margin-inline: auto; }
.stopka__pasek { display: grid; gap: var(--s-3); padding-block: var(--s-5); font-size: var(--t-xs); color: var(--c-tekst-3); }
.stopka__pasek p { max-width: none; }
.stopka__prawne { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.stopka__prawne a, .stopka__prawne button { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-tekst-3); font-size: var(--t-xs); text-decoration: underline; text-decoration-color: var(--c-hairline); text-underline-offset: 0.18em; }
@media (hover: hover) { .stopka__prawne a:hover, .stopka__prawne button:hover { color: var(--c-tekst); text-decoration-color: var(--c-zloto); } }
.stopka__gora { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--c-hairline); border-radius: var(--r-1); color: var(--c-tekst-3); justify-self: start; }
@media (hover: hover) { .stopka__gora:hover { color: var(--c-tekst); border-color: var(--c-krawedz-mocna); } }

@media (min-width: 640px) {
  .stopka__wnetrze { grid-template-columns: 1fr 1fr; }
  .stopka__marka { grid-column: 1 / -1; }
  .stopka__pasek { grid-template-columns: 1fr auto auto; align-items: center; }
  .stopka__pasek > * { width: auto; margin-inline: 0; }
  .stopka__pasek { width: min(100% - 2 * var(--margines-bok), var(--maks-tresc)); margin-inline: auto; border-top: 0; position: relative; }
  .stopka__pasek::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; transform: translateX(-50%); height: 1px; background: var(--c-hairline); }
}

@media (min-width: 1024px) {
  .stopka__wnetrze { grid-template-columns: 5fr 2fr 2fr 3fr; }
  .stopka__marka { grid-column: auto; }
}

/* ——— Tabela licencji na wąskim ekranie — karty zamiast przewijania ———
   Tabela ma min-width: 640px, więc poniżej tej szerokości wymaga przewijania
   w poziomie. Na telefonie to zły UX i źródło nadmiaru szerokości dokumentu.
   Rozkładamy ją na karty: nagłówki kolumn chowamy, a każdą komórkę opisujemy
   etykietą z atrybutu data-etykieta. Semantyka tabeli zostaje nienaruszona —
   zmieniamy wyłącznie prezentację, więc czytnik ekranu nadal czyta nagłówki. */

@media (max-width: 700px) {
  .tabela--licencje { min-width: 0; display: block; }
  .tabela--licencje thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabela--licencje tbody,
  .tabela--licencje tr { display: block; }

  .tabela--licencje tr {
    border: 1px solid var(--c-hairline);
    border-radius: var(--r-2);
    padding: var(--s-4);
    margin-bottom: var(--s-4);
    background: var(--c-pow-1);
  }

  .tabela--licencje th[scope="row"],
  .tabela--licencje td { display: block; border-bottom: 0; padding: 0; }

  .tabela--licencje th[scope="row"] { min-width: 0; margin-bottom: var(--s-3); }
  .tabela--licencje .licencja__podglad,
  .tabela--licencje .licencja__podglad img { width: 100%; max-width: 220px; height: auto; }

  .tabela--licencje td { padding-block: var(--s-2); }
  .tabela--licencje td::before {
    content: attr(data-etykieta);
    display: block;
    font-size: var(--t-2xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-etykieta);
    color: var(--c-tekst-3);
    margin-bottom: 2px;
  }
}