/* ============================================================
   Klub Pasjonatów Ogrodnictwa Czemierniki
   Paleta z logotypu: fiolet #461571 / #CE77D6, zieleń #5B952F / #3A7322
   Fonty: Bricolage Grotesque (nagłówki), Manrope (tekst)
   ============================================================ */

/* ---------- Fonty ---------- */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/fonty/bricolage-grotesque-v9-latin_latin-ext-600.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/fonty/bricolage-grotesque-v9-latin_latin-ext-700.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800;
  font-display: swap; src: url('/fonty/bricolage-grotesque-v9-latin_latin-ext-800.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonty/manrope-v20-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/fonty/manrope-v20-latin_latin-ext-500.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/fonty/manrope-v20-latin_latin-ext-600.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/fonty/manrope-v20-latin_latin-ext-700.woff2') format('woff2'); }

/* ---------- Tokeny ---------- */
:root {
  color-scheme: light;
  --f950: #2A0C46;
  --f900: #36105A;
  --f800: #461571;
  --f700: #5A2495;
  --f600: #7139B3;
  --f500: #9059C9;
  --f300: #C99BE0;
  --f200: #E3C8F0;
  --f100: #F2E8F9;
  --f50:  #FAF5FD;
  --z800: #2C5A17;
  --z700: #3A7322;
  --z600: #4A8827;
  --z500: #5B952F;
  --z400: #7CB342;
  --z200: #CBE3A8;
  --z100: #E9F3D9;
  --z50:  #F6FAEE;
  --atrament: #241533;
  --tekst: #453A54;
  --tekst-2: #6B6078;
  --linia: #E9E2F1;
  /* ramka pola formularza musi mieć 3:1 wobec bieli (WCAG 1.4.11), inaczej senior
     na telefonie w słońcu nie widzi, gdzie zaczyna się pole */
  --linia-pola: #9B86BC;
  --bialy: #FFFFFF;
  --naglowki: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --tekstowa: 'Manrope', 'Segoe UI', sans-serif;
  --cien-1: 0 1px 2px rgba(70, 21, 113, .06), 0 4px 16px rgba(70, 21, 113, .07);
  --cien-2: 0 2px 4px rgba(70, 21, 113, .08), 0 12px 32px rgba(70, 21, 113, .14);
  --luk: 18px;
  --luk-panel: 22px;
  --luk-foto: clamp(20px, 2.4vw, 32px);
  --odstep-hero: clamp(1.75rem, 3.5vw, 2.75rem);
  --przej: .25s cubic-bezier(.16, 1, .3, 1);
  --luz: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: 92px; }
body {
  margin: 0;
  font-family: var(--tekstowa);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--bialy);
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--f700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* numer telefonu w zdaniu nie może się dzielić na dwa wiersze przy spacji */
a[href^="tel:"] { white-space: nowrap; }
a:hover { color: var(--f800); }
h1, h2, h3, h4 {
  font-family: var(--naglowki);
  color: var(--atrament);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; }
strong, b { color: var(--atrament); font-weight: 700; }
::selection { background: var(--f200); color: var(--f950); }
:focus-visible { outline: 3px solid var(--f500); outline-offset: 2px; border-radius: 4px; }

.szeroko { max-width: 1180px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.waskie { max-width: 720px; }

/* ---------- Nagłówek ---------- */
.gora {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linia);
}
.gora .szeroko { display: flex; align-items: center; gap: .9rem; min-height: 72px; }
.godlo { width: 50px; height: 50px; flex: none; transition: transform var(--przej); }
/* to kotwica jest elementem flex, nie sam obrazek: bez tego przy 320 px ściskała się
   do 39 px i okrągła odznaka robiła się elipsą */
.gora .szeroko > a:first-child { flex: none; }
a:hover > .godlo { transform: rotate(-8deg); }
.marka {
  font-family: var(--naglowki); font-weight: 700; font-size: 1.02rem; line-height: 1.15;
  color: var(--atrament); text-decoration: none; letter-spacing: -.01em;
  display: inline-block; padding-block: .45rem;
}
.marka small { display: block; font-family: var(--tekstowa); font-weight: 600; font-size: .78rem;
  color: var(--z700); text-transform: uppercase; letter-spacing: .14em; }
.menu { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.menu a {
  text-decoration: none; font-weight: 600; font-size: .98rem; color: var(--tekst);
  padding: .35rem 0; border-bottom: 2px solid transparent; transition: color var(--przej), border-color var(--przej);
}
.menu a:hover { color: var(--f800); border-bottom-color: var(--f300); }
.menu a[aria-current="page"] { color: var(--f800); border-bottom-color: var(--f700); }
.menu a.przycisk {
  border-bottom: none; padding: .55rem 1.15rem; color: #fff;
  /* .menu a nadpisywało transition przycisku: bez tego guzik w nagłówku nie animował się */
  transition: background .3s var(--luz), transform .3s var(--luz), box-shadow .3s var(--luz);
}
.menu a.przycisk:hover { color: #fff; }
.menu-guzik { display: none; }

/* ---------- Przyciski ---------- */
.przycisk {
  --poswiata: 70, 21, 113;
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-block; font-family: var(--tekstowa); font-weight: 700; font-size: 1rem;
  text-align: center;
  color: #fff; background: var(--f700); border: none; border-radius: 999px;
  padding: .8rem 1.7rem; text-decoration: none; cursor: pointer;
  box-shadow: var(--cien-1);
  transition: background .3s var(--luz), transform .3s var(--luz), box-shadow .3s var(--luz);
}
/* delikatne rozjaśnienie górnej krawędzi zamiast samej zmiany koloru tła */
.przycisk::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 62%);
  opacity: 0; transition: opacity .3s var(--luz);
}
.przycisk:hover {
  background: var(--f800); color: #fff; transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(var(--poswiata), .6), 0 2px 6px rgba(var(--poswiata), .18);
}
.przycisk:hover::after { opacity: 1; }
.przycisk:active { transform: translateY(0) scale(.985); box-shadow: var(--cien-1); }
.przycisk-2 {
  background: var(--bialy); color: var(--f800); border: 2px solid var(--f200);
  box-shadow: none;
}
.przycisk-2:hover {
  background: var(--f50); color: var(--f900); border-color: var(--f300);
  box-shadow: 0 10px 22px -12px rgba(var(--poswiata), .45);
}
.przycisk-ziel { --poswiata: 58, 115, 34; background: var(--z700); }
.przycisk-ziel:hover { background: var(--z800); }
.przycisk-duzy { font-size: 1.1rem; padding: 1rem 2.2rem; }
.przyciski { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* ---------- Znaczki (chipy) ---------- */
.znaczek {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .86rem; font-weight: 700; line-height: 1.2;
  padding: .42rem .95rem;
  /* promień w em, nie 999px: w jednej linii wychodzi pełna pigułka, a długi znaczek
     zawinięty na telefonie na dwa wiersze zostaje prostokątem z łagodnym łukiem,
     zamiast rozdętej kapsuły. Wyśrodkowanie i balance dzielą go po równo,
     zamiast zostawiać samotne „Czemierniki” w drugim wierszu. */
  border-radius: 1.45em; text-align: center; text-wrap: balance;
}
.znaczek-f { background: var(--f100); color: var(--f800); }
.znaczek-z { background: var(--z100); color: var(--z800); }
.znaczek-kontur { background: var(--bialy); color: var(--tekst); border: 1.5px solid var(--linia); }

/* ---------- Hero (strona główna) ---------- */
.bohater {
  position: relative; overflow: hidden;
  background:
    radial-gradient(56rem 30rem at 118% -18%, var(--f100) 0%, transparent 62%),
    radial-gradient(44rem 26rem at -14% 108%, var(--z50) 0%, transparent 58%),
    var(--bialy);
}
.bohater .szeroko {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-top: clamp(2.2rem, 4.6vw, 3.9rem); padding-bottom: var(--odstep-hero);
}
.bohater h1 { margin-bottom: .55em; }
.bohater h1 em { font-style: normal; color: var(--f700); }
.bohater .zajawka { font-size: 1.2rem; line-height: 1.55; max-width: 34rem; margin-bottom: 1.6em; }
.bohater-foto { position: relative; }
/* miękka poświata w barwach znaku zamiast łuku: zdjęcie zostaje bohaterem kadru */
.bohater-foto::before {
  content: ""; position: absolute; inset: 8% -5% -6% -5%; z-index: 0;
  border-radius: 50%; filter: blur(38px); opacity: .55;
  background: radial-gradient(60% 60% at 30% 40%, var(--z200), transparent 70%),
              radial-gradient(60% 60% at 75% 65%, var(--f200), transparent 70%);
}
.bohater-foto > img:not(.bohater-znak) {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 4 / 3.6; object-fit: cover;
  border-radius: var(--luk-foto);
  box-shadow: var(--cien-2);
}
.bohater-plakietka {
  position: absolute; z-index: 2; left: -1.2rem; bottom: 1.6rem;
  background: var(--bialy); border-radius: 14px; box-shadow: var(--cien-2);
  padding: .8rem 1.1rem; display: flex; align-items: center; gap: .7rem;
  font-size: .92rem; font-weight: 600; color: var(--tekst);
}
.bohater-plakietka b { font-family: var(--naglowki); font-size: 1.35rem; color: var(--z700); line-height: 1; }
.bohater-znak {
  position: absolute; z-index: 2; right: -1rem; bottom: 1.6rem; width: 128px; height: 128px;
  background: rgba(255, 255, 255, .94); border-radius: 50%; padding: 9px;
  box-shadow: var(--cien-2);
}

/* ---------- Sekcje ---------- */
.sekcja { padding-block: clamp(1.5rem, 3vw, 2.15rem); }
/* pod nagłówkiem strony biegnie linia podziału: odstęp nad nią i pod nią jest równy
   (tę samą wartość biorą paddingi dolne obu rodzajów nagłówka) */
:is(.bohater, .strona-glowa) + .sekcja { padding-top: var(--odstep-hero); }
/* dwie sekcje na tym samym tle nie potrzebują pełnego oddechu z obu stron:
   bez tej reguły styk dwóch białych sekcji robił ~90 px pustki */
.sekcja:not([class*=" sekcja-"]) + .sekcja:not([class*=" sekcja-"]) {
  padding-top: clamp(.5rem, 1.2vw, .9rem);
}
.sekcja-f { background: linear-gradient(180deg, var(--f50), var(--bialy)); }
.sekcja-z { background: linear-gradient(180deg, var(--z50), var(--bialy)); }
.sekcja-naglowek { max-width: 54rem; margin-bottom: clamp(1.25rem, 2.5vw, 1.4rem); }
.sekcja-naglowek p { font-size: 1.12rem; color: var(--tekst-2); text-wrap: pretty; }
/* ogony ostatnich akapitów i list sumowały się z paddingiem sekcji */
.sekcja :is(p, ul, ol):last-child { margin-bottom: 0; }
/* sekcja z banerem CTA: baner ma własny padding wewnętrzny, sekcja nie musi go dublować */
.sekcja-pas { padding-block: clamp(1.25rem, 2.5vw, 1.9rem); }

/* ---------- Kafle faktów ---------- */
.fakty-kafle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.kafel {
  border-radius: var(--luk-panel); padding: 1.6rem 1.7rem;
  display: flex; flex-direction: column; gap: .3rem; justify-content: center;
}
.kafel b { font-family: var(--naglowki); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; line-height: 1.15; }
.kafel span { font-size: .98rem; font-weight: 600; }
.kafel-f { background: var(--f100); } .kafel-f b { color: var(--f800); } .kafel-f span { color: var(--f900); }
.kafel-z { background: var(--z100); } .kafel-z b { color: var(--z800); } .kafel-z span { color: var(--z800); }
.kafel-k { background: var(--bialy); border: 1.5px solid var(--linia); } .kafel-k b { color: var(--atrament); }

/* ---------- Karty „co robimy” ---------- */
/* karta jest ramką: zdjęcie leży w środku z własnym zaokrągleniem */
.karty { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }
.karta {
  background: var(--bialy); border: 1px solid var(--linia); box-shadow: var(--cien-1);
  border-radius: var(--luk-panel); padding: 8px;
  overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: transform var(--przej), box-shadow var(--przej), border-color var(--przej);
}
.karta:hover { transform: translateY(-4px); box-shadow: var(--cien-2); border-color: var(--f200); }
.karta img { aspect-ratio: 4 / 3.2; object-fit: cover; width: 100%; border-radius: 13px; }
.karta > div { padding: .9rem .65rem 1rem; }
.karta h3 { font-size: 1.05rem; margin-bottom: .35em; }
.karta p { font-size: .92rem; color: var(--tekst-2); margin: 0; }

/* ---------- Pas konkursowy (CTA) ---------- */
.pas {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--f900) 0%, var(--f800) 55%, var(--f700) 100%);
  color: #EFE6F8; border-radius: clamp(0px, 3vw, 28px);
  margin-inline: auto; max-width: 1180px;
}
.pas::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(30rem 30rem at 88% 120%, rgba(206, 119, 214, .35) 0%, transparent 60%),
    radial-gradient(20rem 20rem at 6% -30%, rgba(124, 179, 66, .28) 0%, transparent 60%);
}
.pas > div {
  position: relative; display: grid; grid-template-columns: minmax(0, 3fr) auto;
  gap: 2rem; align-items: center; padding: clamp(2rem, 5vw, 3.4rem) clamp(1.4rem, 5vw, 3.4rem);
}
.pas h2 { color: #fff; margin-bottom: .3em; }
.pas p { margin: 0; font-size: 1.08rem; max-width: 36rem; }
.pas b { color: #fff; }
.pas .przycisk { background: #fff; color: var(--f800); }
.pas .przycisk:hover { background: #fff; color: var(--f900); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55); }
.pas .przycisk::after { background: linear-gradient(180deg, rgba(206, 119, 214, .16), rgba(206, 119, 214, 0) 62%); }

/* ---------- Galeria ---------- */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 1rem; }
.galeria a { border-radius: var(--luk); overflow: hidden; display: block; position: relative; }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.galeria a:hover img { transform: scale(1.045); }
.galeria .g-szer { grid-column: span 2; }
.galeria .g-wys { grid-row: span 2; }
dialog.podglad {
  border: none; border-radius: 16px; padding: 0; max-width: min(92vw, 1100px);
  background: var(--f950); box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
dialog.podglad::backdrop { background: rgba(26, 8, 46, .82); backdrop-filter: blur(4px); }
/* bez tego strona pod otwartym podglądem przewija się palcem razem ze zdjęciem */
body:has(dialog.podglad[open]) { overflow: hidden; }
dialog.podglad img { max-height: 84vh; width: auto; max-width: 100%; margin-inline: auto; }
/* nawigacja podglądu jest przygaszona, żeby nie zabierała uwagi zdjęciu;
   pełną widoczność dostaje dopiero pod kursorem i przy dostępie z klawiatury */
dialog.podglad :is(.p-zamknij, .p-strzalka) {
  position: absolute; border: none; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .82);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: background var(--przej), color var(--przej), box-shadow var(--przej);
}
dialog.podglad .p-zamknij { top: .6rem; right: .6rem; width: 44px; height: 44px; }
dialog.podglad .p-zamknij svg { width: 20px; height: 20px; }
dialog.podglad .p-strzalka { top: 50%; margin-top: -27px; width: 54px; height: 54px; }
dialog.podglad .p-strzalka svg { width: 26px; height: 26px; }
dialog.podglad .p-poprz { left: .8rem; }
dialog.podglad .p-nast { right: .8rem; }
dialog.podglad .p-nast svg { transform: rotate(180deg); }
dialog.podglad :is(.p-strzalka, .p-zamknij):is(:hover, :focus-visible) {
  background: #fff; color: var(--f900); box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
}
dialog.podglad .p-licznik {
  position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%);
  margin: 0; padding: .3rem 1rem; border-radius: 999px;
  background: rgba(36, 21, 51, .78); color: #fff; font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; white-space: nowrap;
}

/* ---------- Partnerzy ---------- */
.partnerzy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.partner {
  background: var(--bialy); border: 1px solid var(--linia); border-radius: var(--luk-panel);
  box-shadow: var(--cien-1); padding: 1.6rem 1.7rem;
}
.partner .rola { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--z700); display: block; margin-bottom: .5rem; }
.partner h3 { margin-bottom: .3em; }
.partner p { font-size: .95rem; color: var(--tekst-2); margin: 0; }

/* ---------- Nagłówek podstrony ---------- */
.strona-glowa {
  /* tak samo jak .bohater: rozmyta poświata pod zdjęciem wychodzi 6% poza kadr,
     a przy jednej kolumnie na telefonie rozpychała stronę o 3 px w bok */
  overflow: hidden;
  background:
    radial-gradient(48rem 26rem at 110% -30%, var(--f100) 0%, transparent 60%),
    radial-gradient(36rem 22rem at -10% 120%, var(--z50) 0%, transparent 55%),
    var(--bialy);
  border-bottom: 1px solid var(--linia);
}
.strona-glowa .szeroko {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding-top: clamp(2.2rem, 5vw, 4rem); padding-bottom: var(--odstep-hero);
}
.strona-glowa .znaczki { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.2rem; }
/* font-style: normal, bo Bricolage nie ma odmiany pochyłej i przeglądarka pochylała ją sama */
.strona-glowa h1 em { font-style: normal; color: var(--f700); }
.strona-glowa .zajawka { font-size: 1.16rem; max-width: 36rem; }
.strona-glowa figure { margin: 0; position: relative; }
.strona-glowa figure:not(.figura-logo):not(.figura-znak)::before {
  content: ""; position: absolute; inset: 8% -6% -7% -6%; z-index: 0;
  border-radius: 50%; filter: blur(38px); opacity: .55;
  background: radial-gradient(60% 60% at 30% 40%, var(--z200), transparent 70%),
              radial-gradient(60% 60% at 75% 65%, var(--f200), transparent 70%);
}
.strona-glowa figure img {
  position: relative; z-index: 1;
  aspect-ratio: 4 / 3.4; object-fit: cover; width: 100%;
  border-radius: var(--luk-foto); box-shadow: var(--cien-2);
}
.strona-glowa.bez-foto .szeroko { grid-template-columns: 1fr; }
.strona-glowa figure:is(.figura-logo, .figura-znak) { justify-self: center; }
.strona-glowa figure.figura-logo img {
  aspect-ratio: 900 / 1205; object-fit: contain; width: min(100%, 280px);
  border-radius: 0; box-shadow: none; margin-inline: auto;
}
.strona-glowa figure.figura-znak img {
  aspect-ratio: 1; object-fit: contain; width: min(100%, 320px);
  border-radius: 0; box-shadow: none; margin-inline: auto;
}

/* ---------- Oś czasu ---------- */
.os { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; counter-reset: krok; }
.os article {
  position: relative; overflow: hidden; background: var(--bialy); border: 1px solid var(--linia);
  border-radius: var(--luk-panel); box-shadow: var(--cien-1); padding: 1.5rem 1.6rem 1.4rem;
}
/* pasek akcentu przycina się zaokrągleniem karty (overflow wyżej), więc bez własnego łuku */
.os article::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--z400);
}
.os article:nth-child(2)::before { background: var(--f500); }
.os article:nth-child(3)::before { background: var(--f800); }
.os .data { font-family: var(--naglowki); font-weight: 800; font-size: 1.3rem; color: var(--atrament); display: block; margin-bottom: .2rem; }
.os .dzien { font-size: .85rem; font-weight: 700; color: var(--z700); text-transform: uppercase; letter-spacing: .08em; }
.os p { margin: .5rem 0 0; font-size: .96rem; color: var(--tekst-2); }

/* ---------- Kryteria i nagrody ---------- */
.kryteria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.kryterium {
  border-radius: var(--luk-panel); padding: 1.5rem 1.6rem;
  background: var(--bialy); border: 1px solid var(--linia); box-shadow: var(--cien-1);
}
.kryterium b { font-family: var(--naglowki); font-size: 2rem; font-weight: 800; color: var(--f700); display: block; line-height: 1; margin-bottom: .5rem; }
.kryterium:first-child { background: var(--z50); border-color: var(--z100); }
.kryterium:first-child b { color: var(--z700); }
.kryterium p { margin: 0; font-size: .93rem; }

.nagrody { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.nagroda {
  text-align: center; border-radius: var(--luk-panel); padding: 1.9rem 1.5rem 1.5rem;
  background: var(--bialy); border: 1px solid var(--linia); box-shadow: var(--cien-1); position: relative;
  display: flex; flex-direction: column;
}
/* nagroda główna od szkółki: zieleń; druga i trzecia od Burmistrza: fiolet */
.nagroda:first-child { border-color: var(--z200); background: linear-gradient(180deg, var(--z50), var(--bialy)); }
.nagroda:first-child b { color: var(--z800); }
.nagroda .miejsce { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-2); }
.nagroda b { font-family: var(--naglowki); font-size: 2.3rem; font-weight: 800; color: var(--f800); display: block; margin: .3rem 0; }
.nagroda p { margin: 0 0 auto; font-size: .93rem; color: var(--tekst-2); }
.nagroda .fundator {
  display: block; margin-top: 1.1rem; padding-top: .85rem; border-top: 1px solid var(--linia);
  font-size: .82rem; font-weight: 700; line-height: 1.35; color: var(--f700);
}
.nagroda .fundator-z { color: var(--z700); }

/* ---------- Listy z ptaszkami ---------- */
ul.lista-ok { list-style: none; padding: 0; margin: 0 0 1em; }
ul.lista-ok li { position: relative; padding-left: 1.9rem; margin-bottom: .55rem; }
ul.lista-ok li:last-child { margin-bottom: 0; }
ul.lista-ok li::before {
  content: ""; position: absolute; left: 0; top: .32rem; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; background: var(--z100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%233A7322' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  background-size: .72rem; background-position: center; background-repeat: no-repeat;
}

/* ---------- Formularz ---------- */
.formularz {
  background: var(--bialy); border: 1px solid var(--linia); border-radius: 22px;
  box-shadow: var(--cien-1); padding: clamp(1.4rem, 4vw, 2.6rem);
}
.formularz > :is(h2, h3):first-child { margin-bottom: 1.2rem; }
.formularz fieldset { border: none; padding: 0; margin: 0 0 1.7rem; }
.formularz fieldset > *:last-child { margin-bottom: 0; }
.formularz legend {
  font-family: var(--naglowki); font-weight: 700; font-size: 1.22rem; color: var(--atrament);
  padding: 0; margin-bottom: .35rem;
}
.formularz .legenda-opis { font-size: .95rem; color: var(--tekst-2); margin-bottom: .9rem; }
.pole { margin-bottom: 1.15rem; }
.pole label { display: block; font-weight: 700; font-size: .95rem; color: var(--atrament); margin-bottom: .35rem; }
.pole .podpowiedz { font-size: .85rem; color: var(--tekst-2); margin: .3rem 0 0; }
.pole input[type="text"], .pole input[type="tel"], .pole input[type="email"], .pole textarea {
  width: 100%; font: inherit; color: var(--atrament);
  border: 1.5px solid var(--linia-pola); border-radius: 12px; padding: .7rem .9rem; background: var(--bialy);
  transition: border-color var(--przej), box-shadow var(--przej);
}
.pole input:focus, .pole textarea:focus {
  outline: none; border-color: var(--f600); box-shadow: 0 0 0 3.5px var(--f100);
}
/* domyślna szara podpowiedź przeglądarki ma kontrast ok. 2,3:1 */
.pole ::placeholder { color: var(--tekst-2); opacity: 1; }
.pole textarea { min-height: 9.5rem; resize: vertical; }
.pole input[type="file"] {
  width: 100%; font: inherit; font-size: .92rem; color: var(--tekst-2);
  border: 1.5px dashed #D8CFE5; border-radius: 12px; padding: .55rem .65rem;
  background: var(--bialy); cursor: pointer; transition: border-color var(--przej);
}
.pole input[type="file"]:hover { border-color: var(--f500); }
.pole input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; font-size: .92rem; color: #fff;
  background: var(--f700); border: none; border-radius: 999px;
  padding: .5rem 1.2rem; margin-right: .9rem; cursor: pointer;
  transition: background var(--przej);
}
.pole input[type="file"]:hover::file-selector-button { background: var(--f800); }
/* Pułapka na roboty. Dawne left: -9999px rozpychało layout w bok na Androidzie
   (Chrome liczył szerokość razem z elementem po lewej), więc pole chowamy przycięciem. */
.pulapka {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pole .blad-pola { display: none; font-size: .87rem; font-weight: 600; color: #A4243B; margin-top: .3rem; }
.pole.ma-blad input, .pole.ma-blad textarea { border-color: #C4405A; }
.pole.ma-blad .blad-pola { display: block; }
.pola-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }

.wybor { display: grid; gap: .7rem; }
.wybor label {
  display: flex; gap: .7rem; align-items: flex-start; font-weight: 500; font-size: .98rem;
  border: 1.5px solid var(--linia); border-radius: 12px; padding: .85rem 1rem; cursor: pointer;
  transition: border-color var(--przej), background var(--przej);
}
.wybor label:has(input:checked) { border-color: var(--f600); background: var(--f50); }
/* 1,5rem = 24 px: dolny próg celu dotykowego z WCAG 2.5.8, kciuk seniora też trafia */
.wybor input { accent-color: var(--f700); width: 1.5rem; height: 1.5rem; margin-top: .05rem; flex: none; }

.zgody label {
  display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; font-weight: 500;
  margin-bottom: .8rem; cursor: pointer;
}
.zgody input { accent-color: var(--f700); width: 1.5rem; height: 1.5rem; margin-top: .1rem; flex: none; }
.zgody label > span { flex: 1; }
/* każda zgoda w ramce z etykietą: od razu widać, co obowiązkowe, a co nie */
.zgody .zgoda {
  border: 1.5px solid var(--linia); border-radius: 14px; padding: .9rem 1.05rem;
  margin-bottom: .7rem; transition: border-color var(--przej), background var(--przej);
}
.zgody .zgoda:has(input:checked) { border-color: var(--f300); background: var(--f50); }
.zgody .zgoda.ma-blad { border-color: #C4405A; background: #FDF0F3; }
.zgody .zgoda-tag {
  display: block; width: fit-content; margin-bottom: .4rem; padding: .16rem .6rem;
  border-radius: 999px; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
}
.zgody .zgoda-wymagana .zgoda-tag { background: var(--f100); color: var(--f800); }
.zgody .zgoda-dobrowolna .zgoda-tag { background: var(--z100); color: var(--z800); }
.zgody .zgoda small { display: block; margin-top: .45rem; font-size: .88rem; color: var(--tekst-2); }

/* zdjęcia w formularzu */
.wrzutnia {
  border: 2px dashed var(--f300); border-radius: 16px; background: var(--f50);
  padding: 1.6rem; text-align: center; cursor: pointer; transition: background var(--przej), border-color var(--przej);
}
.wrzutnia:hover, .wrzutnia.nad { background: var(--f100); border-color: var(--f500); }
.wrzutnia b { color: var(--f800); }
.wrzutnia p { margin: .3rem 0 0; font-size: .88rem; color: var(--tekst-2); }
.miniatury { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .7rem; margin-top: 1rem; }
.miniatury figure { margin: 0; position: relative; }
.miniatury img { aspect-ratio: 1; object-fit: cover; border-radius: 10px; width: 100%; }
.miniatury button {
  position: absolute; top: -.5rem; right: -.5rem; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #fff; background: var(--f800); color: #fff; font-size: 1.2rem; line-height: 1;
  cursor: pointer; box-shadow: var(--cien-1);
}
.licznik-zdjec { font-weight: 700; font-size: .92rem; margin-top: .6rem; }
.licznik-zdjec.ok { color: var(--z700); }
.licznik-zdjec.za-malo { color: #A4243B; }

.formularz .wyslij { width: 100%; font-size: 1.15rem; padding: 1.05rem; margin-top: 1.5rem; }
/* w krótkim formularzu ostatnie pole ma już swój margines, 1,5rem robiło dziurę */
.formularz-mini .wyslij { margin-top: .35rem; }
.formularz .wyslij[disabled] { opacity: .6; cursor: wait; transform: none; }
.pasek-wysylki { height: 8px; border-radius: 99px; background: var(--f100); overflow: hidden; margin-top: 1rem; display: none; }
.pasek-wysylki > div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--z400), var(--f600)); transition: width .3s ease; }
.wynik-wyslania { display: none; border-radius: 14px; padding: 1.1rem 1.3rem; margin-top: 1.2rem; font-weight: 600; }
.wynik-wyslania.sukces { display: block; background: var(--z100); color: var(--z800); }
.wynik-wyslania.porazka { display: block; background: #FBE7EB; color: #8C1D33; }

/* sekcja B chowana */
#sekcja-b { display: none; }
#sekcja-b.widoczna { display: block; }

/* ---------- Sponsorzy ---------- */
.dwie-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
/* dwie kolumny o różnej długości zostawiały dziurę pod krótszą: kartami wyrównujemy wysokość */
.dwie-kolumny.kolumny-karty { align-items: stretch; gap: 1.1rem; }
.kolumny-karty > div {
  background: var(--bialy); border: 1px solid var(--linia);
  border-radius: var(--luk); padding: clamp(1.2rem, 3vw, 1.7rem) clamp(1.2rem, 3vw, 1.8rem);
}
.kolumny-karty h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
/* stretch, a nie start: karty w rzędzie kończą się równo, zamiast zostawiać schodkową dziurę */
.swiadczenia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.swiadczenie {
  display: flex; flex-direction: column;
  --akcent: var(--f700); --akcent-mocny: var(--f900);
  --akcent-tlo: var(--f100); --akcent-linia: var(--f200);
  position: relative; overflow: hidden;
  background: var(--bialy); border: 1px solid var(--linia); border-radius: var(--luk-panel);
  box-shadow: var(--cien-1);
  transition: transform var(--przej), box-shadow var(--przej), border-color var(--przej);
}
.swiadczenie-z {
  --akcent: var(--z700); --akcent-mocny: var(--z800);
  --akcent-tlo: var(--z100); --akcent-linia: var(--z200);
}
.swiadczenie::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--akcent);
}
.swiadczenie:hover { box-shadow: var(--cien-2); border-color: var(--akcent-linia); }
.swiadczenie-glowa {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.15rem 1.35rem 1.05rem;
  background: var(--akcent-tlo); border-bottom: 1px solid var(--akcent-linia);
}
.swiadczenie-ikona {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--bialy); color: var(--akcent); box-shadow: var(--cien-1);
}
.swiadczenie-ikona svg { width: 23px; height: 23px; display: block; }
.swiadczenie h3 { font-size: 1.05rem; margin: 0; color: var(--akcent-mocny); }
.swiadczenie ul { list-style: none; margin: 0; padding: .5rem 1.35rem 1.15rem; flex: 1; }
.swiadczenie li {
  position: relative; padding: .5rem 0 .5rem 1.35rem;
  font-size: .95rem; line-height: 1.55; color: var(--tekst);
}
.swiadczenie li + li { border-top: 1px solid var(--linia); }
.swiadczenie li::before {
  content: ""; position: absolute; left: .1rem; top: 1rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--akcent);
}
.swiadczenia-pointa {
  margin-top: 1.4rem; font-family: var(--naglowki); font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.32rem); line-height: 1.35;
  color: var(--atrament); max-width: 62rem; text-wrap: pretty;
}
.swiadczenia-pointa em { font-style: normal; color: var(--z700); }
.katalog { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.katalog .pozycja {
  display: flex; gap: 1rem; align-items: baseline; background: var(--bialy);
  border: 1px solid var(--linia); border-radius: var(--luk-panel);
  box-shadow: var(--cien-1); padding: 1.05rem 1.3rem;
}
.katalog .kod { font-family: var(--naglowki); font-weight: 800; color: var(--f700); flex: none; font-size: .95rem; }
.katalog p { margin: 0; font-size: .96rem; }
.katalog p i { color: var(--tekst-2); font-size: .87rem; }
.drogi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.drogi-3 { grid-template-columns: repeat(3, 1fr); }
.droga {
  border-radius: var(--luk-panel); padding: 1.5rem 1.6rem;
  background: var(--bialy); border: 1px solid var(--linia); box-shadow: var(--cien-1);
}

.droga h3 { font-size: 1.04rem; }
.droga p { margin: 0; font-size: .92rem; color: var(--tekst-2); }

/* darowizna pieniężna: droga wyróżniona, z numerem konta */
.droga-glowna {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center;
  background: linear-gradient(120deg, var(--z50), var(--f50));
  border: 1px solid var(--linia); border-radius: var(--luk-panel); box-shadow: var(--cien-1);
  padding: clamp(1.4rem, 3vw, 2.1rem); margin-bottom: 1.1rem;
}
.droga-glowna h3 { font-size: 1.25rem; }
.droga-glowna > div > p { margin: 0; font-size: .97rem; color: var(--tekst); }
.konto {
  background: var(--bialy); border: 1px solid var(--linia); border-radius: var(--luk-panel);
  padding: 1.3rem 1.5rem; box-shadow: var(--cien-1);
}
.konto .etykieta {
  display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--z700); margin-bottom: .3rem;
}
.konto .bank { display: block; font-size: .9rem; font-weight: 600; color: var(--tekst-2); margin-bottom: .2rem; }
.konto b {
  font-family: var(--naglowki); font-weight: 800; font-size: clamp(1.02rem, 2.2vw, 1.3rem);
  color: var(--f800); display: block; letter-spacing: .015em; overflow-wrap: anywhere;
}
.konto p { margin: .5rem 0 0; font-size: .88rem; color: var(--tekst-2); }

/* ---------- Dane kontaktowe ---------- */
.kontakt-dane { display: grid; gap: 1rem; align-content: start; }
.kontakt-pozycja {
  background: var(--bialy); border: 1px solid var(--linia); border-radius: var(--luk-panel);
  box-shadow: var(--cien-1); padding: 1.4rem 1.6rem;
}
.kontakt-pozycja .etykieta {
  display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--z700); margin-bottom: .25rem;
}
.kontakt-pozycja .wartosc {
  font-family: var(--naglowki); font-weight: 700; font-size: 1.3rem; color: var(--f800);
  text-decoration: none; overflow-wrap: anywhere;
  /* linia tekstu ma 25 px wysokości, a to za mało jak na cel dotykowy */
  display: inline-block; padding-block: .45rem;
}
.kontakt-pozycja a.wartosc:hover { color: var(--f900); text-decoration: underline; }
.kontakt-pozycja p { margin: .35rem 0 0; font-size: .9rem; color: var(--tekst-2); }

/* ---------- Kontakt wyróżniony ---------- */
.kontakt-blok {
  background: var(--bialy); border: 1px solid var(--linia); border-radius: var(--luk-panel);
  padding: clamp(1.5rem, 4vw, 2.3rem); text-align: center; box-shadow: var(--cien-1);
  align-self: start;
}
.kontakt-blok .etykieta {
  display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--z700); margin-bottom: .5rem;
}
.kontakt-blok .tel-duzy {
  font-family: var(--naglowki); font-weight: 800; font-size: clamp(1.9rem, 4.4vw, 2.5rem);
  color: var(--f800); text-decoration: none; letter-spacing: .01em; display: inline-block; margin-bottom: .2rem;
}
.kontakt-blok .tel-duzy:hover { color: var(--f900); }
.kontakt-blok p { margin: .2rem 0; }
/* e-mail w bloku kontaktowym stał w linii 23 px wysokości: poniżej progu dotykowego */
.kontakt-blok p > a { display: inline-flex; align-items: center; min-height: 44px; }
.kontakt-blok .kontakt-blok-osoba { font-size: .92rem; color: var(--tekst-2); margin-bottom: .9rem; }

/* ---------- Stopka ---------- */
.dol { background: var(--f950); color: #C9B8DD; margin-top: clamp(1.5rem, 3vw, 2rem); }
.dol a { color: #E6D9F3; }
.dol a:hover { color: #fff; }
.dol-siatka {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: clamp(1.6rem, 4vw, 3rem); padding-block: clamp(2rem, 4vw, 2.8rem);
}
.dol h4 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .9rem; }
.dol .o-klubie { display: flex; gap: 1.1rem; align-items: flex-start; }
/* odznaka jest przezroczysta, a stopka ciemna: krążek bieli robi jej tło */
.dol .o-klubie img { width: 96px; flex: none; background: var(--bialy); border-radius: 50%; padding: 7px; }
.dol .o-klubie p { font-size: .95rem; margin: 0; }
.dol ul { list-style: none; margin: 0; padding: 0; }
.dol li { margin-bottom: .5rem; font-size: .95rem; }
.dol .dane { font-size: .9rem; color: #A891C4; line-height: 1.75; }

.dol-kontakt { display: grid; gap: .35rem; }
.dol-kontakt li { margin: 0; }
.dol-kontakt a {
  display: flex; align-items: center; gap: .8rem; text-decoration: none;
  padding: .5rem .7rem; margin-left: -.7rem; border-radius: 14px;
  transition: background var(--przej);
}
.dol-kontakt a:hover { background: rgba(255, 255, 255, .08); }
.dol-kontakt .ikona {
  flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .09); color: #D9C4EE; transition: background var(--przej), color var(--przej);
}
.dol-kontakt .ikona svg { width: 19px; height: 19px; }
.dol-kontakt a:hover .ikona { background: var(--f600); color: #fff; }
.dol-kontakt b { display: block; color: #fff; font-size: .97rem; line-height: 1.3; overflow-wrap: anywhere; }
.dol-kontakt small { display: block; font-size: .87rem; color: #A891C4; }

.dol .dane-konto {
  margin: .9rem 0 0; padding: .75rem .95rem; border-radius: 12px;
  background: rgba(255, 255, 255, .06); color: #E6D9F3; font-size: .9rem;
  letter-spacing: .02em; line-height: 1.45; overflow-wrap: anywhere;
}
.dol .dane-konto span {
  display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: #A891C4; margin-bottom: .15rem;
}
.dol .dane-konto em { display: block; font-style: normal; font-size: .88rem; color: #C9B6DF; margin-bottom: .2rem; }

.dol-pasek { border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 1.1rem; font-size: .9rem; color: #A891C4; }
.dol-pasek .szeroko { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between; align-items: center; }
.dol-pasek > .szeroko > span a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.dol-linki { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-block: -.7rem; }
/* bez tego paska paddingu linki w stopce mają 22 px wysokości: poniżej progu WCAG 2.5.8 */
.dol-linki a { text-decoration: none; font-weight: 600; padding-block: .7rem; }
.dol-linki a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Animacje wejścia ---------- */
/* Klasa .js siedzi na <html> i dokłada ją skrypt w <head>. Bez niej sekcje nie chowają
   się wcale: gdy JS nie wstanie (słaby zasięg, blokada), połowa strony zostawała pusta. */
@media (prefers-reduced-motion: no-preference) {
  .js .odslon { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); }
  .js .odslon.widoczne { opacity: 1; transform: none; }
  .js .odslon:nth-child(2) { transition-delay: .08s; }
  .js .odslon:nth-child(3) { transition-delay: .16s; }
  .js .odslon:nth-child(4) { transition-delay: .24s; }
  /* .odslon.widoczne { transform: none } zabijalo hover kart: oddajemy im podniesienie */
  :is(.karta, .swiadczenie).widoczne {
    transition: transform var(--przej), box-shadow var(--przej), border-color var(--przej);
    transition-delay: 0s;
  }
  :is(.karta, .swiadczenie).widoczne:hover { transform: translateY(-4px); }
}

/* ---------- Zawijanie: tablet ---------- */
@media (max-width: 1120px) {
  .karty { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .kryteria, .drogi { grid-template-columns: repeat(2, 1fr); }
  .partnerzy, .swiadczenia { grid-template-columns: repeat(2, 1fr); }
  .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  /* nieparzysta liczba kafelków przy dwóch kolumnach: ostatnie zdjęcie bierze cały
     rząd, zamiast zostawiać pustą połówkę pod spodem */
  .galeria a:last-child { grid-column: 1 / -1; }
  .dol-siatka { grid-template-columns: 1fr 1fr; }
}

/* ---------- Menu: hamburger poniżej 900px, bo przy 768 pozycje zawijały się w dwie linie ---------- */
@media (max-width: 900px) {
  .menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bialy); border-bottom: 1px solid var(--linia);
    flex-direction: column; align-items: stretch; gap: 0; padding: .6rem 1rem 1rem;
    box-shadow: var(--cien-2);
  }
  .menu.otwarte { display: flex; }
  .menu a { padding: .8rem .4rem; border-bottom: 1px solid var(--linia); font-size: 1.05rem; }
  .menu a:last-child { border-bottom: none; }
  .menu .przycisk { margin-top: .6rem; text-align: center; color: #fff; }
  .menu-guzik {
    display: grid; place-items: center; margin-left: auto; background: none; border: none;
    cursor: pointer; width: 46px; height: 46px; flex: none; padding: 0; color: var(--atrament);
  }
  /* menu dłuższe niż ekran w poziomie telefonu musi dać się przewinąć */
  .menu { max-height: calc(100dvh - 72px); overflow-y: auto; }
  .menu-guzik svg { display: block; }
  /* nazwa Klubu ma zostać w jednej linii obok godła i hamburgera: przy 390 px
     zostaje na nią ok. 240 px, więc odrobinę mniejszy krój i węższe odstępy */
  .gora .szeroko { position: relative; gap: .7rem; }
  .marka { font-size: .95rem; }
  /* dwie kolumny tekstu przy 900 px dają wiersze po 30 znaków: lepiej jedna kolumna */
  .dwie-kolumny { grid-template-columns: 1fr; }
  .dwie-kolumny.kolumny-karty { align-items: start; }
  .katalog { grid-template-columns: 1fr; }
}

/* ---------- Hero: plakietka i znak przestają się mieścić obok siebie ----------
   Kolumna zdjęcia ma poniżej 1000 px mniej niż 400 px szerokości, więc biała plakietka
   wchodziła pod okrągły znak (przy 820 px na 94 px, przy 375 px na 81 px). Plakietka
   bierze wtedy całą szerokość dołu zdjęcia, a znak przenosi się do górnego rogu. */
@media (max-width: 1000px) {
  .bohater-plakietka {
    left: .7rem; right: .7rem; bottom: .7rem;
    padding: .7rem .95rem; gap: .6rem; font-size: .9rem;
  }
  .bohater-plakietka b { font-size: 1.3rem; }
  .bohater-znak { top: .7rem; right: .7rem; bottom: auto; width: 76px; height: 76px; padding: 6px; }
}

/* ---------- Zawijanie: telefon ---------- */
@media (max-width: 760px) {
  .bohater .szeroko, .strona-glowa .szeroko { grid-template-columns: 1fr; }
  .bohater-foto > img:not(.bohater-znak) { aspect-ratio: 4 / 3; }
  /* przyciski w nagłówkach: na telefonie równa szerokość zamiast poszarpanych pigułek */
  .przyciski > .przycisk { flex: 1 1 100%; text-align: center; }
  /* zdjęcie w nagłówku podstrony zostaje, tylko w niższym kadrze: schowane i tak
     się pobierało, a nagłówek bez niego był ścianą tekstu */
  .strona-glowa figure { margin-top: 1.4rem; }
  .strona-glowa figure img { aspect-ratio: 16 / 9; }
  .strona-glowa figure:is(.figura-logo, .figura-znak) { margin-top: .4rem; }
  .strona-glowa figure.figura-znak img { width: min(62%, 200px); }
  .strona-glowa figure.figura-logo img { width: min(60%, 190px); }
  dialog.podglad .p-strzalka { width: 44px; height: 44px; margin-top: -22px; }
  dialog.podglad .p-poprz { left: .4rem; }
  dialog.podglad .p-nast { right: .4rem; }
  .fakty-kafle, .karty, .os, .kryteria, .nagrody, .partnerzy, .swiadczenia, .katalog, .drogi, .droga-glowna { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .pola-2 { grid-template-columns: 1fr; gap: 0; }
  .pas > div { grid-template-columns: 1fr; }
  /* pas dotyka krawędzi ekranu, więc zaokrąglone rogi wyglądałyby jak niedoróbka */
  .pas { border-radius: 0; }
  .dol-siatka { grid-template-columns: 1fr; }

  /* karty „Co robimy” poziomo: pionowo pięć zdjęć 4/3.2 robiło 1900 px ściany */
  .karta { flex-direction: row; align-items: center; gap: .8rem; }
  .karta img { flex: none; width: 34%; aspect-ratio: 1; }
  .karta > div { padding: .2rem .5rem .2rem 0; }
  .karta h3 { font-size: 1.08rem; margin-bottom: .25em; }
  .karta p { font-size: .9rem; }

  /* nagłówek nagrody był większy od h1 strony (36,8 px wobec 33,6 px) */
  .nagroda b { font-size: 1.9rem; }
  .nagroda { padding: 1.4rem 1.3rem 1.2rem; }
  /* znaczek zostaje w pełnym stopniu (czytelność wygrywa z jedną linią), tylko ciaśniej */
  .znaczek { padding: .4rem .85rem; }
  /* numer konta ma spacje: niech łamie się na nich, a nie w środku grupy cyfr */
  .konto b { font-size: 1.05rem; overflow-wrap: normal; }
  .dol .o-klubie img { width: 64px; padding: 5px; }
  .dol-kontakt small { font-size: .88rem; }
  /* nagłówki w kartach schodziły poniżej rozmiaru tekstu podstawowego (17 px) */
  :is(.droga, .swiadczenie) h3 { font-size: 1.12rem; }
  /* zajawka: 19,2 px robiło 9 linii i spychało przycisk poza pierwszy ekran */
  .zajawka { font-size: 1.1rem; }
  .bohater .zajawka { margin-bottom: 1.3em; }
}

/* efekty pod kursorem zostają „przyklejone” po tapnięciu na telefonie */
@media (hover: none) {
  .galeria a:hover img { transform: none; }
  :is(.karta, .swiadczenie, .karta.widoczne, .swiadczenie.widoczne):hover { transform: none; }
  .przycisk:hover { transform: none; box-shadow: var(--cien-1); }
}

/* ---------- Druk (oferta sponsorska) ---------- */
.druk-naglowek { display: none; }
@media print {
  .gora, .dol, .pas, .przyciski, .menu-guzik { display: none !important; }
  body { font-size: 11pt; color: #222; }
  .strona-glowa, .sekcja { padding-block: .8cm; }
  .strona-glowa figure { display: none; }
  a { color: inherit; text-decoration: none; }
  .swiadczenia, .katalog, .drogi, .droga-glowna { display: block; }
  .swiadczenie, .katalog .pozycja, .droga, .droga-glowna, .konto { break-inside: avoid; margin-bottom: .4cm; border: 1px solid #ccc; }
  /* karta świadczeń: tła i kropki-punktory nie drukują się, oddajemy padding i natywne punktory */
  .swiadczenie { padding: .25cm .4cm .3cm; }
  .swiadczenie::before, .swiadczenie-ikona { display: none; }
  .swiadczenie-glowa { padding: 0 0 .1cm; margin-bottom: .15cm; background: none; border-bottom: 1px solid #ccc; }
  .swiadczenie ul { list-style: disc; padding: 0 0 0 .5cm; }
  .swiadczenie li { padding: .08cm 0; border-top: none; }
  .swiadczenie li::before { display: none; }
  .druk-naglowek {
    display: flex; align-items: center; gap: .5cm;
    padding: .5cm 0 .3cm; border-bottom: 2px solid #ccc; margin-bottom: .3cm;
  }
  .druk-naglowek img { width: 2.2cm; height: 2.2cm; }
}