/* ============================================================================
   strony.css — układy sekcji: hero „oś celu”, aktualności 1+2, dlaczego (2×2 z offsetem),
   pas granatowy, inwersja na płytę, szyna sprzętu, oś zawodów, obiekt, wsparcie,
   kontakt z mapą; podstrony: artykuł, ścieżka, napędy, dokument, 404.
   Trzy sekcje wychodzą poza siatkę: hero (zdjęcie), sprzęt (szyna), kontakt (mapa).
   ============================================================================ */

/* ——— HERO ——— */

.hero {
  position: relative;
  padding-top: var(--s-5);
  /* Warstwa .hero__swiatlo startuje od scale(1.04) — bez przyciecia
     rozpycha strone w poziomie na czas trwania animacji. */
  overflow: clip;
  padding-bottom: var(--s-7);
}

.hero__swiatlo {
  position: absolute;
  inset: 0;
  background: var(--tlo-oswietlenie-celu);
  pointer-events: none;
  animation: rozblysk 1.6s var(--krzywa-wyjscia) both;
}

@keyframes rozblysk { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

.hero__wnetrze {
  position: relative;
  width: min(100% - 2 * var(--margines-bok), var(--maks-tresc));
  margin-inline: auto;
  display: grid;
  gap: var(--s-6);
}

.hero__media {
  position: relative;
  order: -1;
  margin-inline: calc(var(--margines-bok) * -1);
  height: 42svh;
  min-height: 240px;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.hero__media picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 35%; }

.hero__tekst { display: grid; gap: var(--s-5); justify-items: start; min-width: 0; padding-bottom: var(--s-7); }

.hero__naglowek {
  font-size: clamp(2.4rem, 1.4rem + 4.6vw, 4.6rem);
  max-width: 14ch;
  overflow-wrap: anywhere;
}

.hero__dopelnienie {
  display: block;
  margin-top: 0.15em;
  font-weight: 600;
  font-size: 0.62em;
  color: var(--c-tekst-2);
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 72;
  font-style: italic;
  letter-spacing: -0.01em;
}

.hero__lead { max-width: 52ch; }
.hero__akcje { display: grid; gap: var(--s-3); width: 100%; }
.hero__pasek { font-size: var(--t-xs); color: var(--c-tekst-3); max-width: none; }

.hero__listwa {
  position: relative;
  z-index: 2;
  width: min(100% - 2 * var(--margines-bok), var(--maks-tresc));
  margin-inline: auto;
}

@media (min-width: 480px) {
  .hero__akcje { display: flex; flex-wrap: wrap; width: auto; }
}

@media (min-width: 1024px) {
  .hero { padding-top: 0; min-height: min(88svh, 900px); display: flex; flex-direction: column; justify-content: center; }
  .hero__wnetrze { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; flex: 1; }
  .hero__tekst { grid-column: 1 / span 6; padding-block: var(--s-8); }
  .hero__media {
    order: 0;
    grid-column: 7 / -1;
    align-self: stretch;
    height: auto;
    min-height: min(82svh, 820px);
    max-height: 900px;
    margin-inline: 0 calc(-1 * var(--wyjscie));
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 100%), linear-gradient(180deg, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 100%), linear-gradient(180deg, #000 70%, transparent 100%);
    mask-composite: intersect;
  }
  .hero__listwa { width: min(100% - 2 * var(--margines-bok), var(--maks-tresc)); padding-left: calc(100% / 12); margin-top: calc(var(--s-7) * -1); }
}

/* ——— AKTUALNOŚCI — 1 + 2 z offsetem ——— */

.aktualnosci { background: var(--c-pow-1); padding-block: calc(var(--s-sekcja) + var(--s-7)) var(--s-sekcja); box-shadow: var(--krawedz-gorna); }
.aktualnosci__siatka { display: grid; gap: var(--s-5); }
.aktualnosci__kolumna { display: grid; gap: var(--s-5); align-content: start; }

@media (min-width: 768px) and (max-width: 1023px) {
  .aktualnosci__siatka { grid-template-columns: 1fr 1fr; }
  .aktualnosci__kolumna { margin-top: var(--s-4); }
}

@media (min-width: 1024px) {
  .aktualnosci__siatka { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .aktualnosci__siatka .wpis--wiodacy { grid-column: 1 / span 7; }
  .aktualnosci__siatka[data-liczba="1"] .wpis--wiodacy { grid-column: 1 / span 9; }
  .aktualnosci__kolumna { grid-column: 8 / -1; margin-top: var(--s-6); }
  .aktualnosci__siatka[data-liczba="2"] .wpis--maly .wpis__link { grid-template-columns: 1fr; }
  .aktualnosci__siatka[data-liczba="2"] .wpis--maly .wpis__media img, .aktualnosci__siatka[data-liczba="2"] .wpis--maly .wpis__brak { aspect-ratio: 16 / 9; height: auto; }
  .aktualnosci__siatka[data-liczba="2"] .wpis--maly .wpis__zajawka { display: -webkit-box; }
}

/* ——— GODZINY (strona główna) ——— */

.godziny-sekcja { padding-block: var(--s-sekcja); }
.godziny-sekcja .dopisek { margin-top: var(--s-5); }

/* ——— DLACZEGO — 2×2 z pionowym offsetem, bez numeracji (to nie sekwencja) ——— */

.dlaczego { padding-block: var(--s-sekcja); background: linear-gradient(180deg, var(--c-noc) 0%, var(--c-pow-1) 100%); }
.dlaczego .wnetrze { display: grid; gap: var(--s-7) var(--rynna); }
.dlaczego__lista { display: grid; gap: var(--s-6) var(--rynna); }
.dlaczego__punkt { position: relative; padding-top: var(--s-5); border-top: 1px solid var(--c-hairline); display: grid; gap: var(--s-3); }
.dlaczego__punkt::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 1px; background: var(--c-zloto); }
.dlaczego__punkt p { font-size: var(--t-base); }

@media (min-width: 640px) {
  .dlaczego__lista { grid-template-columns: 1fr 1fr; }
  .dlaczego__punkt:nth-child(even) { margin-top: var(--s-8); }
}

@media (min-width: 1024px) {
  .dlaczego .wnetrze { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .dlaczego__naglowek { grid-column: 1 / span 4; position: sticky; top: calc(var(--h-naglowek) + var(--s-6)); }
  .dlaczego__lista { grid-column: 6 / -1; }
}

/* ——— POZWOLENIE — pas granatowy, full-bleed, herb jako znak wodny ——— */

.pozwolenie {
  position: relative;
  padding-block: var(--s-sekcja);
  background: var(--tlo-pas-granatowy);
  color: var(--c-granat-tekst-2);
  overflow: clip;
}
.pozwolenie::before { content: ""; position: absolute; inset: 0; background-image: var(--tlo-ziarno); opacity: 0.05; mix-blend-mode: overlay; pointer-events: none; }
.pozwolenie h2, .pozwolenie h3 { color: var(--c-swiatlo); }
.pozwolenie .lead { color: var(--c-granat-tekst-2); }
.pozwolenie__herb { display: none; position: absolute; right: -5%; top: 50%; transform: translateY(-50%); width: 300px; opacity: 0.14; pointer-events: none; }
.pozwolenie__herb img { width: 100%; height: auto; filter: grayscale(1) brightness(1.6); }
.pozwolenie .wnetrze { position: relative; display: grid; gap: var(--s-8) var(--rynna); }
.pozwolenie__tresc { display: grid; gap: var(--s-5); }

.kroki { display: grid; gap: var(--s-6); counter-reset: krok; }
.kroki__krok { position: relative; counter-increment: krok; padding-top: var(--s-6); display: grid; gap: var(--s-2); }
.kroki__krok::before {
  content: counter(krok);
  position: absolute; top: -0.25em; left: -0.08em;
  font-family: var(--font-display);
  font-size: var(--t-ogrom);
  font-weight: 700;
  line-height: 0.85;
  color: var(--c-zloto);
  opacity: 0.22;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  pointer-events: none;
  z-index: 0;
}
.kroki__krok > * { position: relative; z-index: 1; }
.kroki__krok h3 { font-size: var(--t-lg); }
.kroki__krok p { color: var(--c-granat-tekst-2); font-size: var(--t-base); }
.pozwolenie__akcja { max-width: none; }

@media (min-width: 768px) {
  .kroki { grid-template-columns: repeat(3, 1fr); gap: var(--rynna); align-items: start; }
  .kroki__krok:nth-child(2) { margin-top: var(--s-7); }
  .kroki__krok:nth-child(3) { margin-top: calc(var(--s-7) * 2); }
}

@media (min-width: 1024px) {
  .pozwolenie__herb { display: block; }
  .pozwolenie__tresc { grid-column: 2 / span 7; }
  .kroki { grid-column: 2 / span 10; }
  .pozwolenie__akcja { grid-column: 2 / span 10; }
}

/* ——— CENNIK — inwersja na jasną płytę ——— */

.cennik-zajawka { padding-block: var(--s-sekcja); }
.cennik-zajawka__uklad { display: grid; gap: var(--s-7) var(--rynna); }
.cennik-zajawka__tekst { display: grid; gap: var(--s-4); justify-items: start; }
.cennik-zajawka__tekst .btn { margin-top: var(--s-3); }
.cennik-zajawka__ceny { display: grid; gap: var(--s-5); }

.cena-blok { display: grid; gap: var(--s-2); padding: var(--s-5) 0; border-top: 1px solid var(--c-plyta-hairline); }
.cena-blok h3 { font-size: var(--t-md); color: var(--c-plyta-tekst); }
.cena-blok__kwota { color: var(--c-plyta-tekst-2); font-size: var(--t-sm); }
.cena-blok__kwota strong { display: inline-block; font-size: var(--t-2xl); font-variation-settings: "wdth" 100, "wght" 700; color: var(--c-plyta-tekst); margin-inline: var(--s-1); line-height: 1.05; }
.cena-blok__nota { font-size: var(--t-sm); color: var(--c-plyta-tekst-3); }
.cena-blok--wyrozniony { border-top: 3px solid var(--c-plyta-czerwien); }
.cennik-zajawka__dopisek { font-size: var(--t-sm); color: var(--c-plyta-tekst-3); padding-top: var(--s-5); border-top: 1px solid var(--c-plyta-hairline); }

@media (min-width: 768px) {
  .cennik-zajawka__ceny { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .cena-blok { padding: var(--s-6) var(--s-5); border-top: 1px solid var(--c-plyta-hairline); }
  .cena-blok + .cena-blok { border-left: 1px solid var(--c-plyta-hairline); }
  .cena-blok--wyrozniony { border-top: 3px solid var(--c-plyta-czerwien); margin-top: -2px; }
  .cennik-zajawka__dopisek { grid-column: 1 / -1; margin-top: 0; }
}

@media (min-width: 1024px) {
  .cennik-zajawka__uklad { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .cennik-zajawka__tekst { grid-column: 1 / span 4; }
  .cennik-zajawka__ceny { grid-column: 5 / -1; }
}

/* Pełny cennik na /oferta */
.cennik-pelny { padding-block: var(--s-sekcja); }
.cennik-pelny .wnetrze { display: grid; gap: var(--s-8); }
.cennik-grupa { display: grid; gap: var(--s-5) var(--rynna); padding-top: var(--s-7); border-top: 1px solid var(--c-plyta-hairline); }
.cennik-grupa:first-child { border-top: 0; padding-top: 0; }
.cennik-grupa h2 { font-size: var(--t-xl); }
.cennik-grupa__opis { display: grid; gap: var(--s-3); }
.cennik-grupa__dwie { display: grid; gap: var(--s-6); }
.cennik-grupa__tekst { display: grid; gap: var(--s-4); justify-items: start; }
.cennik-pelny__zastrzezenie { font-size: var(--t-sm); color: var(--c-plyta-tekst-3); padding-top: var(--s-6); border-top: 1px solid var(--c-plyta-hairline); max-width: none; }

@media (min-width: 768px) {
  .cennik-grupa__dwie { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .cennik-grupa { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .cennik-grupa__opis { grid-column: 1 / span 4; position: sticky; top: calc(var(--h-naglowek) + var(--s-6)); }
  .cennik-grupa > table, .cennik-grupa__dwie, .cennik-grupa__tekst { grid-column: 6 / -1; }
}

/* ——— SPRZĘT (strona główna) ——— */

.sprzet-zajawka { padding-block: var(--s-sekcja) ; background: var(--c-pow-1); box-shadow: var(--krawedz-gorna); }
.sprzet-zajawka .naglowek-sekcji { margin-bottom: var(--s-6); }
.sprzet-zajawka__grupy { display: grid; gap: var(--s-6) var(--rynna); margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--c-hairline); }
.sprzet-zajawka__grupa { display: grid; gap: var(--s-2); }
.sprzet-zajawka__grupa h3 { font-size: var(--t-md); }
.sprzet-zajawka__grupa p { font-size: var(--t-sm); }
.sprzet-zajawka__link { justify-self: start; }

@media (min-width: 768px) {
  .sprzet-zajawka__grupy { grid-template-columns: 5fr 4fr 3fr; }
  .sprzet-zajawka__link { grid-column: 1 / -1; }
}

/* ——— ZAWODY (strona główna) ——— */

.zawody-zajawka { padding-block: var(--s-sekcja); }
.zawody-zajawka .dopisek { margin-top: var(--s-4); }
.zawody-zajawka .btn { margin-top: var(--s-5); }

/* ——— OPINIE — jedyne wyśrodkowanie; renderuje się tylko z potwierdzonym źródłem ——— */

.opinie { padding-block: var(--s-sekcja); background: var(--c-pow-1); text-align: center; }
.opinie h2 { margin-inline: auto; }
.opinie__lista { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
.opinie__cytat blockquote { display: grid; gap: var(--s-3); }
.opinie__cytat p { margin-inline: auto; }
.opinie__cytat footer { color: var(--c-tekst-3); font-size: var(--t-sm); }
.opinie__cytat cite { font-style: normal; }
.opinie__zrodlo { margin-top: var(--s-6); max-width: none; }
@media (min-width: 768px) { .opinie__lista { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }

/* ——— OBIEKT — para zdjęć 7/5, wychodząca poza siatkę ——— */

.obiekt { display: grid; gap: var(--s-4); padding-block: var(--s-sekcja-ciasna) 0; }
.obiekt img { width: 100%; height: 100%; object-fit: cover; }
.obiekt__duze img { aspect-ratio: 4 / 3; }
.obiekt__male { display: grid; gap: var(--s-3); }
.obiekt__male img { aspect-ratio: 3 / 2; }
.obiekt__podpis { font-size: var(--t-xs); color: var(--c-tekst-3); letter-spacing: 0.04em; padding-inline: var(--margines-bok); }

@media (min-width: 768px) {
  .obiekt { grid-template-columns: 7fr 5fr; align-items: end; }
  .obiekt__male { padding-right: var(--wyjscie); }
  .obiekt__male img { aspect-ratio: 4 / 3; border-radius: 0 var(--r-3) var(--r-3) 0; }
  .obiekt__podpis { padding-inline: 0; }
}

/* ——— WSPARCIE ——— */

.wsparcie { padding-block: var(--s-sekcja); }
.wsparcie .uklad__lewa > p { margin-top: var(--s-4); }

/* ——— KONTAKT (strona główna) ——— */

.kontakt-zajawka { padding-block: var(--s-sekcja); background: linear-gradient(180deg, var(--c-noc), var(--c-pow-1)); }
.kontakt-zajawka__uklad { display: grid; gap: var(--s-7) var(--rynna); }
.kontakt-zajawka__tekst { display: grid; gap: var(--s-5); }
.kontakt-zajawka__akcje { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.dane-kontaktowe { display: grid; gap: var(--s-4); }
.dane-kontaktowe dt { display: flex; align-items: center; gap: var(--s-2); 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); }
.dane-kontaktowe dt .ikona { color: var(--c-zloto); }
.dane-kontaktowe dd { color: var(--c-tekst); font-size: var(--t-md); }
.dane-kontaktowe .liczba { font-size: var(--t-xl); font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36; text-decoration: none; }

@media (min-width: 1024px) {
  .kontakt-zajawka__uklad { grid-template-columns: repeat(12, 1fr); align-items: center; }
  .kontakt-zajawka__tekst { grid-column: 1 / span 5; }
  .kontakt-zajawka__mapa { grid-column: 6 / -1; margin-right: calc(-1 * var(--wyjscie)); }
  .kontakt-zajawka__mapa .mapa { border-radius: var(--r-4) 0 0 var(--r-4); aspect-ratio: 16 / 9; }
}

/* ——— CTA końcowe ——— */

.cta-koncowe { background: var(--tlo-oswietlenie-celu), var(--c-pow-1); box-shadow: var(--krawedz-gorna); }
.cta-koncowe__uklad { display: grid; gap: var(--s-6); align-items: center; }
.cta-koncowe .lead { margin-top: var(--s-4); }
.cta-koncowe .btn { justify-self: start; }
@media (min-width: 1024px) { .cta-koncowe__uklad { grid-template-columns: 1fr auto; gap: var(--s-8); } .cta-koncowe .btn { justify-self: end; } }

/* ——— O NAS ——— */

.strzelnica__obraz { margin-top: var(--s-8); padding-left: var(--wyjscie); }
.strzelnica__obraz img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-3) 0 0 var(--r-3); }
@media (max-width: 767px) { .strzelnica__obraz { padding-left: 0; } .strzelnica__obraz img { border-radius: 0; aspect-ratio: 16 / 10; } }

.zarzad { display: grid; gap: var(--s-4); }
.zarzad div { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-top: 1px solid var(--c-hairline); }
.zarzad dt { 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; }
.zarzad dd { color: var(--c-tekst-3); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.08em; }
@media (min-width: 640px) { .zarzad { grid-template-columns: repeat(3, 1fr); } .zarzad div:nth-child(2) { margin-top: var(--s-6); } }

/* ——— POZWOLENIE — ścieżka numerowana (sekwencja niesie informację) ——— */

.sciezka { display: grid; gap: var(--s-7); counter-reset: krok; position: relative; }
.sciezka__krok { position: relative; counter-increment: krok; display: grid; gap: var(--s-3); padding-left: calc(var(--s-8) + var(--s-3)); }
.sciezka__krok::before {
  content: counter(krok);
  position: absolute; left: 0; top: -0.1em;
  width: var(--s-8); height: var(--s-8);
  display: grid; place-items: center;
  border: 1px solid var(--c-zloto);
  border-radius: var(--r-kolo);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--c-zloto);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36;
}
.sciezka__krok:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--s-8) / 2); top: calc(var(--s-8) + var(--s-2)); bottom: calc(var(--s-7) * -1 + var(--s-2)); width: 1px; background: var(--c-hairline); }
.sciezka__krok p { font-size: var(--t-base); }
@media (min-width: 1024px) { .sciezka { grid-column: 3 / span 8; max-width: 72ch; } .sciezka__krok:nth-child(even) { margin-left: var(--s-8); } }

/* ——— SPRZĘT — napędy ——— */

.napedy__naglowek { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
.napedy__lista { display: grid; gap: var(--s-5) var(--rynna); }
.naped { 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); display: grid; gap: var(--s-3); position: relative; }
.naped::before { content: ""; position: absolute; left: var(--s-5); right: var(--s-5); top: 0; height: 2px; }
.naped[data-naped="sprezynowy"]::before { background: var(--c-tekst-3); }
.naped[data-naped="pca"]::before { background: var(--c-zloto); }
.naped[data-naped="pcp"]::before { background: var(--c-czerwien-jasna); }
.naped dt { 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; }
.naped dd { font-size: var(--t-base); }
@media (min-width: 768px) { .napedy__lista { grid-template-columns: repeat(3, 1fr); } .naped:nth-child(2) { margin-top: var(--s-6); } .naped:nth-child(3) { margin-top: calc(var(--s-6) * 2); } }
@media (min-width: 1024px) { .napedy__naglowek { grid-template-columns: 5fr 7fr; align-items: end; } .napedy__naglowek .etykieta { grid-column: 1 / -1; margin-bottom: 0; } }

.akcesoria__lista { display: grid; gap: var(--s-6); }
.akcesorium { display: grid; gap: var(--s-3); }
.akcesorium h3 { font-size: var(--t-md); }
.akcesorium p { font-size: var(--t-sm); }
@media (min-width: 640px) { .akcesoria__lista { grid-template-columns: 1fr 1fr; } .akcesorium:nth-child(2) { margin-top: var(--s-6); } }

/* ——— KONTAKT — kanały, dojazd, dane klubu ——— */

.kanaly { display: grid; gap: var(--s-4); }
.kanal { display: grid; gap: var(--s-2); 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); }
.kanal dt { display: flex; align-items: center; gap: var(--s-2); 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; }
.kanal dt .ikona { color: var(--c-zloto); }
.kanal dd { display: grid; gap: var(--s-1); }
.kanal__glowny { font-size: var(--t-lg); text-decoration: none; justify-self: start; overflow-wrap: anywhere; }
.kanal__opis { font-size: var(--t-sm); color: var(--c-tekst-3); }
@media (min-width: 640px) { .kanaly { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kanal:nth-child(2) { margin-top: var(--s-6); } }

.dojazd__uklad { display: grid; gap: var(--s-7) var(--rynna); }
.dojazd__tekst { display: grid; gap: var(--s-4); }
@media (min-width: 1024px) {
  .dojazd__uklad { grid-template-columns: repeat(12, 1fr); align-items: center; }
  .dojazd__tekst { grid-column: 1 / span 5; }
  .dojazd__mapa { grid-column: 6 / -1; margin-right: calc(-1 * var(--wyjscie)); }
  .dojazd__mapa .mapa { border-radius: var(--r-4) 0 0 var(--r-4); }
}

.dane-klubu { padding-block: var(--s-7); border-top: 1px solid var(--c-hairline); }
.dane-klubu__adres { font-size: var(--t-sm); }
.dane-klubu__adres strong { color: var(--c-tekst); }

/* ——— ARTYKUŁ ——— */

.naglowek-strony--artykul h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.75rem); max-width: 26ch; }
.artykul__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); font-size: var(--t-xs); color: var(--c-tekst-3); }
.artykul__obraz { width: min(100% - 2 * var(--margines-bok), 1100px); margin: calc(var(--s-7) * -1) auto var(--s-8); }
.artykul__obraz img { width: 100%; border-radius: var(--r-3); box-shadow: var(--cien-3); }
.artykul__tresc { padding-block: var(--s-6) var(--s-8); }
.artykul__stopka { padding: var(--s-5); background: var(--c-pow-2); border: 1px solid var(--c-hairline); border-radius: var(--r-2); max-width: var(--maks-czytanie); box-shadow: var(--krawedz-gorna); }
.artykul__nawigacja { display: grid; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--c-hairline); }
.artykul__sasiad { display: grid; gap: var(--s-1); text-decoration: none; color: var(--c-tekst-2); padding: var(--s-4); border-radius: var(--r-2); transition: background-color var(--ruch-szybki); }
.artykul__sasiad--nastepny { text-align: right; justify-items: end; }
.artykul__sasiad-etykieta { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--ls-etykieta); color: var(--c-zloto); }
.artykul__sasiad-tytul { color: var(--c-tekst); font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36; }
@media (hover: hover) { .artykul__sasiad:hover { background: var(--c-pow-2); } }
.artykul__powrot { margin-top: var(--s-6); padding-bottom: var(--s-sekcja); max-width: none; }
@media (min-width: 768px) { .artykul__nawigacja { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .artykul .wnetrze > * { margin-left: calc(100% / 12); } }

/* ——— DOKUMENT (polityka, licencje) ——— */

.dokument { padding-block: var(--s-6) var(--s-sekcja); }
.dokument__tresc { max-width: 80ch; }
.dokument__tresc section + section { margin-top: var(--s-8); }
.dokument .tabela-przewijana { margin-block: var(--s-5); }
@media (min-width: 1024px) { .dokument__tresc { margin-left: calc(100% / 12 * 2); } }

/* ——— 404 ——— */

.blad404 { position: relative; min-height: calc(100svh - 88px); display: flex; align-items: center; padding-block: var(--s-sekcja); overflow: clip; }
.blad404__tlo { position: absolute; inset: 0; z-index: 0; }
.blad404__tlo img { width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: 0.9; }
.blad404__tlo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-noc) 35%, rgb(14 18 24 / 0.4) 100%); }
.blad404__uklad { position: relative; z-index: 1; }
.blad404__tekst { display: grid; gap: var(--s-5); max-width: 36rem; }
.blad404__lista { display: grid; border-top: 1px solid var(--c-hairline); }
.blad404__lista a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; padding-block: var(--s-3); border-bottom: 1px solid var(--c-hairline); text-decoration: none; color: var(--c-tekst); }
.blad404__lista .ikona { color: var(--c-zloto); transition: transform var(--ruch-bazowy) var(--krzywa-wyjscia); }
@media (hover: hover) { .blad404__lista a:hover .ikona { transform: translateX(4px); } }
.blad404__akcje { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ——— PATENT (oferta) — tło CC BY-SA przyciemnione overlayem ——— */

.patent { position: relative; overflow: clip; }
.patent__obraz { position: absolute; inset: 0; z-index: 0; }
.patent__obraz img { width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; }
.patent__obraz::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-noc) 0%, rgb(14 18 24 / 0.94) 45%, rgb(14 18 24 / 0.7) 100%); }
.patent .wnetrze { position: relative; z-index: 1; }
.zakres { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.zakres div { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-top: 1px solid var(--c-hairline); }
.zakres dt { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--ls-etykieta); color: var(--c-zloto); font-variation-settings: "wdth" 86, "wght" 600; }
.zakres dd { color: var(--c-tekst); }
.zakres .liczba { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; color: var(--c-swiatlo); margin-right: var(--s-2); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 72; }
@media (min-width: 640px) { .zakres { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================================
   REZERWACJE (/rezerwacje) - kalendarz, godziny, siatka 10 stanowisk, kwota, potwierdzenie.
   Zasady: stan NIGDY samym kolorem (ikona + tekst + wzor), cele dotykowe min. 44 px,
   zero CLS (wymiary rezerwowane przed danymi), dziala bez JS (:has zamiast skryptu).
   ============================================================================ */

.rez [hidden] { display: none; }

.rez-platnosc { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-6); padding: var(--s-4) var(--s-5); max-width: 44rem; background: var(--c-pow-2); border: 1px solid var(--c-zloto-cien); border-radius: var(--r-2); color: var(--c-tekst-2); }
.rez-platnosc .ikona { color: var(--c-zloto); margin-top: 0.15em; }
.rez-platnosc strong { color: var(--c-tekst); }

.rez-cennik { display: grid; margin-top: var(--s-5); max-width: 28rem; border-top: 1px solid var(--c-hairline); }
.rez-cennik div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--c-hairline); }
.rez-cennik dt { color: var(--c-tekst-2); }
.rez-cennik dd { color: var(--c-tekst); font-variation-settings: "wdth" 100, "wght" 600; white-space: nowrap; }

.rez__kroki { display: grid; gap: var(--s-7); min-width: 0; }
.rez__kroki > [data-rez-kroki], .rez-wynik { display: grid; gap: var(--s-7); min-width: 0; }
.rez__kroki > .komunikat { margin-top: 0; }

.rez-krok { display: grid; gap: var(--s-4); min-width: 0; }
.rez-krok .etykieta { margin-bottom: 0; }
.rez-krok h3 { font-size: var(--t-xl); }
.rez-pomoc { font-size: var(--t-sm); color: var(--c-tekst-3); }
.rez-opis-dnia { padding: var(--s-4) var(--s-5); background: var(--c-pow-2); border: 1px solid var(--c-hairline); border-radius: var(--r-2); color: var(--c-tekst-2); font-size: var(--t-sm); }
.rez-opis-dnia strong { color: var(--c-tekst); }

.rez-czlonek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); padding: var(--s-4) var(--s-5); background: var(--c-pow-2); border: 1px solid var(--c-hairline); border-radius: var(--r-2); }
.rez-czlonek p { display: flex; gap: var(--s-3); align-items: center; max-width: none; }
.rez-czlonek .ikona { color: var(--c-zloto); }
.rez-czlonek strong { color: var(--c-tekst); }

/* --- Skrot do dnia otwartego (osoba z ulicy) --- */
.rez-skrot { display: flex; align-items: center; gap: var(--s-4); min-height: 64px; padding: var(--s-4) var(--s-5); background: var(--c-zloto); color: var(--c-noc); border-radius: var(--r-2); text-decoration: none; }
.rez-skrot span { display: grid; gap: var(--s-1); flex: 1; }
.rez-skrot strong { font-variation-settings: "wdth" 100, "wght" 600; }
@media (hover: hover) { .rez-skrot:hover { background: #E6C47E; color: var(--c-noc); } }
.rez-skrot .ikona { flex: none; width: 1.5em; height: 1.5em; }

/* --- Kalendarz: lista dni (telefon) / siatka 7 kolumn (od 640 px) --- */
.kal { display: grid; gap: var(--s-4); }
.kal__legenda { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-sm); color: var(--c-tekst-2); }
.kal__legenda li { display: flex; align-items: center; gap: var(--s-2); }
.kal__znak { width: 18px; height: 18px; flex: none; border: 1px solid; border-radius: var(--r-1); }
.kal__znak--otwarty { background: var(--c-zloto); border-color: var(--c-zloto); }
.kal__znak--mieszany { background: linear-gradient(135deg, var(--c-zloto) 0 50%, var(--c-pow-3) 50% 100%); border-color: var(--c-zloto); }
.kal__znak--klubowy { background: var(--c-pow-3); border-color: var(--c-krawedz); }
.kal__znak--zamkniete { border-style: dashed; border-color: var(--c-krawedz); background: repeating-linear-gradient(135deg, transparent 0 4px, rgb(255 255 255 / 0.12) 4px 5px); }

.kal__tygodnie { display: none; }
.kal__lista { display: grid; gap: var(--s-2); }
.kal__dzien[data-typ="brak"] { display: none; }
.kal__dzien[data-dzien="1"]:not(:first-child) { margin-top: var(--s-3); }

.kal__link { position: relative; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; grid-template-areas: "dow opis zn" "data opis zn"; align-items: center; column-gap: var(--s-4); min-height: 64px; padding: var(--s-3) var(--s-4); background: var(--c-pow-2); border: 1px solid var(--c-krawedz); border-radius: var(--r-2); color: var(--c-tekst); text-decoration: none; }
.kal__dow { grid-area: dow; align-self: end; 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; }
.kal__data { grid-area: data; align-self: start; display: flex; align-items: baseline; gap: var(--s-2); }
.kal__num { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; line-height: 1; color: var(--c-tekst); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36; }
.kal__mies { font-size: var(--t-sm); color: var(--c-tekst-2); }
.kal__opis { grid-area: opis; display: grid; gap: var(--s-1); min-width: 0; }
.kal__stan { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; font-variation-settings: "wdth" 86, "wght" 600; color: var(--c-tekst-2); }
.kal__godz { font-size: var(--t-sm); color: var(--c-tekst-2); }
.kal__powod { font-size: var(--t-xs); color: var(--c-tekst-3); }
.kal__dzis { position: absolute; top: var(--s-2); right: var(--s-3); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--ls-etykieta); color: var(--c-tekst-3); }
.kal__wybrany { grid-area: zn; display: none; color: var(--c-noc); }

.kal__dzien[data-typ="otwarty"] .kal__link, .kal__dzien[data-typ="mieszany"] .kal__link { background: rgb(214 179 106 / 0.1); border-color: var(--c-zloto); }
.kal__dzien[data-typ="otwarty"] .kal__stan, .kal__dzien[data-typ="mieszany"] .kal__stan { color: var(--c-zloto); }
.kal__link--nieaktywny { background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(255 255 255 / 0.04) 6px 7px); border: 1px dashed var(--c-krawedz); color: var(--c-tekst-3); }
.kal__link--nieaktywny .kal__num, .kal__link--nieaktywny .kal__stan, .kal__link--nieaktywny .kal__mies { color: var(--c-tekst-3); }

@media (hover: hover) {
  a.kal__link:hover { background: var(--c-pow-3); border-color: var(--c-zloto); }
  .kal__dzien[data-typ="otwarty"] a.kal__link:hover, .kal__dzien[data-typ="mieszany"] a.kal__link:hover { background: rgb(214 179 106 / 0.18); }
}

.kal__dzien .kal__link[aria-current="date"] { background: var(--c-swiatlo); border-color: var(--c-swiatlo); box-shadow: var(--poswiata-cel); color: var(--c-noc); }
.kal__dzien .kal__link[aria-current="date"] .kal__num, .kal__dzien .kal__link[aria-current="date"] .kal__stan, .kal__dzien .kal__link[aria-current="date"] .kal__mies,
.kal__dzien .kal__link[aria-current="date"] .kal__godz, .kal__dzien .kal__link[aria-current="date"] .kal__dow, .kal__dzien .kal__link[aria-current="date"] .kal__dzis { color: var(--c-plyta-tekst); }
.kal__link[aria-current="date"] .kal__wybrany { display: block; }

@media (min-width: 640px) {
  .kal__tygodnie, .kal__lista { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-2); }
  .kal__tygodnie { display: grid; font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--ls-etykieta); color: var(--c-tekst-3); text-align: center; font-variation-settings: "wdth" 86, "wght" 600; }
  .kal__dzien[data-typ="brak"] { display: block; }
  .kal__dzien[data-dzien="1"]:not(:first-child) { margin-top: 0; }
  .kal__lista > .kal__dzien:first-child[data-dzien="2"] { grid-column-start: 2; }
  .kal__lista > .kal__dzien:first-child[data-dzien="3"] { grid-column-start: 3; }
  .kal__lista > .kal__dzien:first-child[data-dzien="4"] { grid-column-start: 4; }
  .kal__lista > .kal__dzien:first-child[data-dzien="5"] { grid-column-start: 5; }
  .kal__lista > .kal__dzien:first-child[data-dzien="6"] { grid-column-start: 6; }
  .kal__lista > .kal__dzien:first-child[data-dzien="7"] { grid-column-start: 7; }

  .kal__link { height: 100%; min-height: 96px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "data" "opis"; align-content: space-between; align-items: start; row-gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-3); border-left-width: 1px; }
  .kal__dzien[data-typ="otwarty"] .kal__link, .kal__dzien[data-typ="mieszany"] .kal__link { border-top-width: 3px; }
  .kal__dow { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kal__mies--ukryty { display: none; }
  .kal__stan { font-size: var(--t-2xs); letter-spacing: 0.04em; align-items: flex-start; }
  .kal__stan .ikona { margin-top: 0.1em; }
  .kal__godz { font-size: var(--t-xs); }
  .kal__wybrany { position: absolute; bottom: var(--s-2); right: var(--s-2); }
  .kal__dzis { top: var(--s-2); right: var(--s-2); }
}

/* --- Godziny --- */
.rez-wynik { min-height: 30rem; align-content: start; }
.rez-godziny { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.rez-godzina { display: grid; gap: var(--s-1); align-content: center; min-height: 64px; min-width: 8.5rem; padding: var(--s-3) var(--s-5); background: var(--c-pow-2); border: 1px solid var(--c-krawedz); border-radius: var(--r-2); color: var(--c-tekst); text-decoration: none; }
.rez-godzina__czas { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; line-height: 1; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36; }
.rez-godzina__wolne { font-size: var(--t-xs); color: var(--c-tekst-2); }
.rez-godzina__klub { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-zloto); font-variation-settings: "wdth" 86, "wght" 600; }
.rez-godzina__klub[hidden] { display: none; }
.rez-godzina[aria-current="true"] .rez-godzina__klub { color: var(--c-plyta-czerwien); }
.rez-godzina[aria-current="true"] { background: var(--c-swiatlo); border-color: var(--c-swiatlo); color: var(--c-plyta-tekst); box-shadow: var(--poswiata-cel); }
.rez-godzina[aria-current="true"] .rez-godzina__wolne { color: var(--c-plyta-tekst-2); }
@media (hover: hover) { .rez-godzina:not([aria-current]):hover { border-color: var(--c-zloto); background: var(--c-pow-3); } }

/* --- Siatka 10 stanowisk: 2 kolumny w waskim kontenerze (320 px), 5 kolumn od 30rem --- */
.rez-formularz { display: grid; gap: var(--s-7); min-width: 0; }
.rez-stanowiska { container-type: inline-size; min-inline-size: 0; width: 100%; margin: 0; padding: 0; border: 0; }
.rez-stanowiska__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); transition: opacity var(--ruch-bazowy) var(--krzywa-std); }
.rez-wynik[aria-busy="true"] .rez-stanowiska__siatka, .rez-wynik[aria-busy="true"] .rez-godziny { opacity: 0.55; }

.rez-legenda { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-xs); color: var(--c-tekst-2); }
.rez-legenda li { display: flex; align-items: center; gap: var(--s-2); }
.rez-legenda__wybor { width: 14px; height: 14px; border-radius: var(--r-1); background: var(--c-swiatlo); }
.rez-licznik { font-size: var(--t-sm); color: var(--c-tekst); min-height: 1.65em; }

.rez-st { position: relative; display: block; }
.rez-st__wej { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rez-st__wej:disabled, .rez-st__wej[aria-disabled="true"] { cursor: not-allowed; }
.rez-st__plytka { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s-3); min-height: 60px; padding: var(--s-2) var(--s-3); background: var(--c-pow-2); border: 1px solid var(--c-krawedz); border-radius: var(--r-2); color: var(--c-tekst); transition: background-color var(--ruch-szybki), border-color var(--ruch-szybki), box-shadow var(--ruch-bazowy); }
.rez-st__numer { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; line-height: 1; min-width: 1.4em; text-align: center; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 48; }
.rez-st__stan { display: none; align-items: center; gap: var(--s-1); font-size: var(--t-xs); font-variation-settings: "wdth" 100, "wght" 600; line-height: 1.2; min-width: 0; }
.rez-st[data-stan="wolne"] .rez-st__stan--wolne, .rez-st[data-stan="zajete"] .rez-st__stan--zajete, .rez-st[data-stan="wylaczone"] .rez-st__stan--wylaczone, .rez-st[data-stan="inna_os"] .rez-st__stan--inna_os { display: inline-flex; }
.rez-st[data-stan="wolne"] .rez-st__stan--wolne { color: var(--c-otwarte); }
.rez-st[data-stan="zajete"] .rez-st__stan, .rez-st[data-stan="wylaczone"] .rez-st__stan, .rez-st[data-stan="inna_os"] .rez-st__stan { color: var(--c-tekst-2); }

.rez-st[data-stan="zajete"] .rez-st__plytka { background: repeating-linear-gradient(135deg, var(--c-pow-1) 0 6px, var(--c-pow-2) 6px 7px); border-color: var(--c-hairline); color: var(--c-tekst-3); }
.rez-st[data-stan="wylaczone"] .rez-st__plytka, .rez-st[data-stan="inna_os"] .rez-st__plytka { background: var(--c-pow-1); border: 1px dashed var(--c-krawedz); color: var(--c-tekst-3); }
.rez-st--podglad[data-stan="wolne"] .rez-st__plytka { border-color: var(--c-hairline); }

@media (hover: hover) { .rez-st__wej:not(:disabled):not([aria-disabled="true"]):not(:checked):hover + .rez-st__plytka { border-color: var(--c-zloto); background: var(--c-pow-3); } }
.rez-st__wej:focus-visible + .rez-st__plytka, .rez-os:focus-visible .rez-os__plytka { outline: 2px solid var(--c-zloto); outline-offset: 3px; }
.rez-st__wej:checked + .rez-st__plytka { background: var(--c-swiatlo); border-color: var(--c-swiatlo); color: var(--c-plyta-tekst); box-shadow: var(--poswiata-cel); }
.rez-st__wej:checked + .rez-st__plytka .rez-st__stan--wolne { display: none; }
.rez-st__wej:checked + .rez-st__plytka .rez-st__stan--wybrane { display: inline-flex; color: var(--c-plyta-tekst); }

@container (min-width: 30rem) {
  .rez-stanowiska__siatka { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rez-st__plytka { grid-template-columns: 1fr; justify-items: center; align-content: center; row-gap: var(--s-2); min-height: 88px; padding: var(--s-3) var(--s-1); text-align: center; }
}

.rez-bramka { margin-top: 0; max-width: none; }
.rez-bramka a { color: var(--c-tekst); }

/* --- Opcje, osie --- */
.rez-pola { display: grid; gap: var(--s-7); min-width: 0; }
.rez-osie { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; gap: var(--s-3); }
.rez-osie legend { padding: 0; margin-bottom: var(--s-3); color: var(--c-tekst); font-size: var(--t-sm); font-variation-settings: "wdth" 100, "wght" 600; }
.rez-osie__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: var(--s-2); max-width: 28rem; }
.rez-os-stala { padding: var(--s-3) var(--s-4); background: var(--c-pow-2); border: 1px solid var(--c-hairline); border-radius: var(--r-2); color: var(--c-tekst); max-width: none; grid-column: 1 / -1; }
.rez-os-stala strong { font-family: var(--font-display); font-size: var(--t-lg); }
.rez-os__plytka[hidden], .rez-osie [hidden] { display: none; }
.rez-os { position: relative; display: block; color: inherit; text-decoration: none; }
.rez-os__plytka { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 56px; padding: var(--s-2); background: var(--c-pow-2); border: 1px solid var(--c-krawedz); border-radius: var(--r-2); font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; color: var(--c-tekst); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36; }
.rez-os__znak { display: none; }
.rez-os[aria-current="true"] .rez-os__plytka { background: var(--c-swiatlo); border-color: var(--c-swiatlo); color: var(--c-plyta-tekst); box-shadow: var(--poswiata-cel); }
.rez-os[aria-current="true"] .rez-os__znak { display: inline-flex; }
@media (hover: hover) { .rez-os:not([aria-current]):hover .rez-os__plytka { border-color: var(--c-zloto); background: var(--c-pow-3); } }

.rez-opcje { display: grid; gap: var(--s-3); }
.rez-opcja { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s-4); min-height: 56px; padding: var(--s-4); background: var(--c-pow-2); border: 1px solid var(--c-krawedz); border-radius: var(--r-2); cursor: pointer; }
.rez-opcja input { width: 24px; height: 24px; margin: 0.1rem 0 0; accent-color: var(--c-zloto); cursor: pointer; }
.rez-opcja__tekst { display: grid; gap: var(--s-1); }
.rez-opcja__tekst strong { color: var(--c-tekst); font-variation-settings: "wdth" 100, "wght" 600; }
.rez-opcja__tekst span { font-size: var(--t-sm); color: var(--c-tekst-2); }
.rez-opcja:has(input:checked) { border-color: var(--c-zloto); background: var(--c-pow-3); }
.rez-opcja:has(input:focus-visible) { outline: 2px solid var(--c-zloto); outline-offset: 3px; }

/* --- Kwota „do zapłaty na miejscu” --- */
.rez-kwota { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--c-pow-3); border: 1px solid var(--c-zloto); border-radius: var(--r-2); box-shadow: var(--poswiata-cel); }
.rez-kwota__etykieta { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--ls-etykieta); color: var(--c-zloto); font-variation-settings: "wdth" 86, "wght" 600; }
.rez-kwota__warianty { display: grid; gap: var(--s-4); }
.rez-kwota__wariant { display: grid; gap: var(--s-1); }
.rez-kwota__wiersz { color: var(--c-tekst-2); font-size: var(--t-sm); }
.rez-kwota__kwota { display: block; font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 700; line-height: 1.1; color: var(--c-swiatlo); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 96; }
.rez-kwota__opis { font-size: var(--t-sm); color: var(--c-tekst-2); }
.rez-kwota__nota { font-size: var(--t-sm); color: var(--c-tekst); }
@supports selector(:has(*)) {
  .rez-kwota__wariant { display: none; }
  .rez-formularz:not(:has([name="instruktor"]:checked)):not(:has([name="bron_klubowa"]:checked)) .rez-kwota__wariant[data-wariant="s"],
  .rez-formularz:not(:has([name="instruktor"]:checked)):has([name="bron_klubowa"]:checked) .rez-kwota__wariant[data-wariant="sb"],
  .rez-formularz:has([name="instruktor"]:checked):not(:has([name="bron_klubowa"]:checked)) .rez-kwota__wariant[data-wariant="i"],
  .rez-formularz:has([name="instruktor"]:checked):has([name="bron_klubowa"]:checked) .rez-kwota__wariant[data-wariant="ib"] { display: grid; }
  .rez-kwota__warianty { min-height: 8.5rem; align-content: start; }
}

.rez-konto { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-4); background: var(--c-pow-2); border: 1px solid var(--c-hairline); border-radius: var(--r-2); max-width: none; }
.rez-konto .ikona { color: var(--c-zloto); }
.rez-konto strong { color: var(--c-tekst); }
.rez-krok .pole { max-width: var(--maks-czytanie); }
.rez-krok .pole + .pole { margin-top: var(--s-4); }
.rez-klauzula { margin-top: var(--s-5); max-width: var(--maks-czytanie); font-size: var(--t-sm); color: var(--c-tekst-2); }
.rez-krok .formularz__wyslij { margin-top: var(--s-5); }
.rez-stanowiska + .pole__blad { margin-top: var(--s-2); }

/* --- Logowanie członka --- */
.rez-logowanie { background: var(--c-pow-2); border: 1px solid var(--c-krawedz); border-radius: var(--r-2); }
.rez-logowanie summary { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-3) var(--s-5); cursor: pointer; list-style: none; color: var(--c-tekst); font-variation-settings: "wdth" 100, "wght" 600; }
.rez-logowanie summary::-webkit-details-marker { display: none; }
.rez-logowanie summary .ikona:first-child { color: var(--c-zloto); }
.rez-logowanie__szewron { margin-left: auto; transition: transform var(--ruch-bazowy) var(--krzywa-wyjscia); }
.rez-logowanie[open] .rez-logowanie__szewron { transform: rotate(180deg); }
.rez-logowanie__tresc { display: grid; gap: var(--s-4); padding: 0 var(--s-5) var(--s-5); }
.rez-logowanie__formularz { max-width: 26rem; }
.rez-logowanie .komunikat { margin-top: 0; }

/* --- Potwierdzenie z kodem --- */
.rez-pot { display: grid; gap: var(--s-5); padding: var(--s-5); background: var(--c-sukces-tlo); border: 1px solid #2B5A3A; border-radius: var(--r-2); }
.rez-pot[hidden] { display: none; }
.rez-pot__naglowek { display: flex; align-items: center; gap: var(--s-3); }
.rez-pot__naglowek .ikona { color: var(--c-otwarte); width: 1.75em; height: 1.75em; }
.rez-pot__status { color: var(--c-tekst); }
.rez-kod { display: grid; gap: var(--s-2); justify-items: start; padding: var(--s-4) var(--s-5); background: var(--c-noc); border: 1px solid var(--c-zloto); border-radius: var(--r-2); }
.rez-kod__etykieta { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--ls-etykieta); color: var(--c-zloto); font-variation-settings: "wdth" 86, "wght" 600; }
.rez-kod__wartosc { max-width: 100%; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: clamp(1.0625rem, 0.6rem + 3.4vw, 1.875rem); letter-spacing: 0.06em; color: var(--c-swiatlo); overflow-wrap: anywhere; user-select: all; }
.rez-pot__ostrzezenie { color: var(--c-tekst-2); font-size: var(--t-sm); }
.rez-pot__ostrzezenie strong { color: var(--c-tekst); }
.rez-pot__lista { display: grid; border-top: 1px solid #2B5A3A; }
.rez-pot__lista div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid #2B5A3A; }
.rez-pot__lista dt { color: var(--c-tekst-2); }
.rez-pot__lista dd { color: var(--c-tekst); font-variation-settings: "wdth" 100, "wght" 600; }
.rez-pot__kwota dd { font-family: var(--font-display); font-size: var(--t-xl); color: var(--c-swiatlo); }
.rez-pot__nota { color: var(--c-tekst); font-size: var(--t-sm); }

/* --- Moje rezerwacje --- */
.rez-moje { display: grid; gap: var(--s-3); }
.rez-moje__pozycja { 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); }
.rez-moje__pozycja[hidden] { display: none; }
.rez-moje__opis { display: grid; gap: var(--s-2); justify-items: start; }
.rez-moje__termin { color: var(--c-tekst); font-size: var(--t-md); }
.rez-moje__szczegoly { font-size: var(--t-sm); color: var(--c-tekst-2); }
.rez-moje__szczegoly strong { color: var(--c-tekst); }
@media (min-width: 640px) { .rez-moje__pozycja { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

.rez-pomoc--waznie { padding: var(--s-4) var(--s-5); background: var(--c-pow-2); border: 1px solid var(--c-krawedz); border-radius: var(--r-2); color: var(--c-tekst); font-size: var(--t-base); }
.rez-pomoc--waznie[hidden], .rez-pomoc[hidden] { display: none; }
.rez-pomoc--waznie a { color: var(--c-tekst); }

.rez-kod__akcje { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rez-kod__akcje a.btn-kopiuj { text-decoration: none; }
.rez-kod__akcje [hidden] { display: none; }

.rez-odwolanie { display: grid; gap: var(--s-3); }
.rez-odwolanie summary { cursor: pointer; list-style: none; }
.rez-odwolanie summary::-webkit-details-marker { display: none; }
.rez-odwolanie__potwierdz { display: grid; gap: var(--s-3); padding: var(--s-4); background: var(--c-blad-tlo); border: 1px solid var(--c-czerwien-cien); border-radius: var(--r-2); max-width: 28rem; }
.rez-odwolanie__potwierdz p { color: var(--c-tekst-2); font-size: var(--t-sm); }
.rez-odwolanie__potwierdz strong { color: var(--c-tekst); }

/* Baner cookies zostaje, ale nie zaslania tresci transakcyjnych: strona rezerwuje pod nim miejsce
   (wysokosc ustawia rezerwacje.js), a fokus i przewijanie omijaja baner. */
html { scroll-padding-bottom: var(--rez-baner, 0px); }
body.strona-rezerwacje { padding-bottom: var(--rez-baner, 0px); }
.rez-pot { scroll-margin-top: calc(var(--h-naglowek) + var(--s-3)); }


.rez-pot__wiecej summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; color: var(--c-tekst-2); font-size: var(--t-sm); text-decoration: underline; text-decoration-color: var(--c-krawedz); text-underline-offset: 0.18em; }
.rez-pot__wiecej[open] summary { margin-bottom: var(--s-2); }
.rez-pot { gap: var(--s-4); }
.rez-pot__kwota { order: -1; }
.rez-pot__lista div { padding-block: var(--s-2); }

/* Potwierdzenie na wasnych ekranach: kod i przycisk kopiowania musza zmiescic sie nad bannerem cookies. */
@media (max-width: 639px) {
  .rez-pot { padding: var(--s-4); gap: var(--s-3); }
  .rez-pot__naglowek { gap: var(--s-2); }
  .rez-pot__naglowek h3 { font-size: var(--t-md); }
  .rez-pot__naglowek .ikona { width: 1.25em; height: 1.25em; }
  .rez-kod { padding: var(--s-3); gap: var(--s-1); }
  .rez-kod__wartosc { font-size: min(1.75rem, 5.2vw); letter-spacing: 0.04em; }
}

.rez-pot__platnosc { color: var(--c-tekst); }
.rez-pot__platnosc strong { color: var(--c-swiatlo); }
@media (max-width: 639px) { .rez-pot__platnosc { font-size: var(--t-sm); line-height: 1.4; } .rez-pot__naglowek h3 { line-height: 1.1; } .rez-kod__etykieta { line-height: 1.2; } }
