/*!
Theme Name:        MKKK
Theme URI:         https://superkarate.pl
Author:            MKKK + Claude
Description:       Lean, responsive, Elementor-free theme for Mazowiecki Klub Karate Kyokushin. Light v2: dominant white + warm off-white, deep kyokushin navy structure, one disciplined red for primary actions. Fonts self-hosted (RODO).
Version:           0.5.7
Requires at least: 6.0
Requires PHP:      8.0
License:           GPL-2.0-or-later
Text Domain:       mkkk
Tags:              light, responsive, karate, custom
*/

/* ============================================================================
   MKKK - superkarate.pl - LIGHT redesign v2 (Kyokushin)
   ============================================================================
   Ported 1:1 from site/design-reference/styles.css (design source of truth),
   then extended to the pages the prototype does not cover (prose pages,
   /oferta/, trainer archive, blog, plugin forms). Same primitives everywhere:
   tokens, .section shells, cards, radii, soft shadows.

   Palette roles (README brief, with one owner override):
   - the structural ramp carries structure, links, kanji, section markers.
     The designer specified navy; the owner replaced it with BLACK on
     2026-07-19. Token names still read --navy-* (see the tokens block);
   - white + black + red is also the more canonical Kyokushin triad;
   - red (--accent) is reserved for primary action buttons and the live dot -
     plus the small prototype-sanctioned accents (eyebrow tick, stars, tags);
   - backgrounds alternate white / warm paper.

   Fonts are self-hosted (assets/fonts/fonts.css, enqueued before this file).
   NO external requests anywhere in this stylesheet.
   ============================================================================ */

/* ---- Tokens ------------------------------------------------------------- */
:root{
  --white:#ffffff;
  --paper:#f6f4ef;        /* warm off-white - alternating sections */
  --paper-2:#efeae0;      /* slightly deeper off-white */
  /* Structural ramp - BLACK (owner decision 2026-07-19, replaced the
     designer's navy). Token names keep the --navy-* spelling on purpose:
     they are referenced 86x here and by the var() fallbacks in the mkkk
     plugin's own stylesheets (assets/css/timetable.css, dojo-map.css), so
     renaming would be pure churn for zero visual gain. Read them as
     "structural dark", not as a hue.

     Deliberately near-black, not #000: pure black on white halates and
     reads harsher at body sizes. #14141a is black to the eye and calmer
     to read. Switch to #000 only if the owner explicitly wants it. */
  /* ZASADA NADRZEDNA: TUSZ vs WYPELNIENIE.
     Granat jest KALIGRAFIA - wylacznie kolor liter, kanji, naglowkow i strzalek.
     NIGDY tlem prostokata. Prostokatne ciemne pole czyta sie jak PAS, wiec
     kazde wypelnienie i ciemny blok ida w czern.
     Czerwien zostaje jedynym akcentem.

     Praktycznie:  color: var(--navy)      -> tusz
                   background: var(--belt) -> wypelnienie
     Nie dodawaj granatu jako drugiego akcentu obok czerwieni. */
  --belt:#0e0e0f;         /* CZERN - czarny pas: ciemne bloki i wypelnienia UI */
  --belt-600:#26262a;     /* czern rozjasniona - hover na wypelnieniu */
  --navy:#152341;         /* GRANAT - WYLACZNIE tusz (naglowki, kanji, strzalki) */
  --navy-300:#7c88a0;     /* wyciszony granat - tekst pomocniczy, nigdy tlo */
  --text:#1b2432;         /* tekst - granatowy tusz */
  --muted:#5b6675;        /* tekst drugorzedny (AA na bieli i na paper) */
  /* Wlosowate linie i cienie licza sie z granatu: sa rozmyte i towarzysza
     literom, wiec nie czytaja sie jak prostokatne wypelnienie. */
  --line:rgba(21,35,65,.12);
  --line-2:rgba(21,35,65,.22);
  --accent:#C5372B;       /* kyokushin red - jedyny akcent */
  --accent-700:#a52a20;
  /* OBI - pomaranczowy haft na czarnym pasie. Zyje WYLACZNIE w topbarze
     i tylko jako tusz: litery, kanji i ikonki na czerni. To nie jest drugi
     akcent obok czerwieni - czerwien zostaje jedyna na tresci strony.
     Kontrast na --belt wynosi 7,4:1, wiec przechodzi WCAG AAA nawet przy
     11px wersalikach, ktore stoja w tym pasku. */
  --obi:#F0833a;
  --shadow-sm:0 4px 14px rgba(21,35,65,.07);
  --shadow:0 14px 40px rgba(21,35,65,.12);
  --maxw:1200px;
  /* PROMIENIE - cala strona na ostro 90 stopni (decyzja wlasciciela, po
     przegladzie z warstwa designu). Ostre naroza pasuja do surowego charakteru
     Kyokushin i wzmacniaja rytm cienkich linii lepiej niz zaokraglenia.
     Trzy tokeny, jedno miejsce na cala witryne:
       --r      karty, media, wieksze bloki
       --r-sm   chipy, plakietki, drobne elementy
       --r-pill przyciski i filtry (dawniej 999px)
     Chcesz leciutkie zmiekczenie zamiast pelnego 90 stopni? Ustaw np.
     --r:3px, --r-sm:2px, --r-pill:4px - reszta pojdzie za tokenami.
     UWAGA: prawdziwe kola (ikony spolecznosciowe, kropka "live", numery
     krokow) maja border-radius:50% i NIE sa objete tokenami. Kwadratowe
     wygladalyby na pomylke, nie na decyzje. */
  --r:0;
  --r-sm:0;
  --r-pill:0;
  --ease:cubic-bezier(.2,.7,.3,1);
  --f-display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-ui:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --f-jp:'Noto Serif JP',serif;

  /* ── Compat aliases ─────────────────────────────────────────────────────
     Older theme templates and the mkkk plugin's stylesheets (schedule module:
     timetable.css and dojo-map.css; declaration module: its own assets/)
     consume the v0.2 token names. There is no separate mkkk-schedule or
     mkkk-declaration plugin any more - both were folded into the single mkkk
     plugin at the 2026-08-14 merge, so grep for the token names under
     wp-content/plugins/mkkk/, not for those directories. Semantic
     mapping to the light system: "ink" = the dark colour, "paper" = the
     light one, hairlines are computed from navy so they survive on white
     (DESIGN.md trap #1). Do not remove without grepping the plugins. */
  --ink:var(--text);
  --ink-deep:var(--navy-700);
  --paper-dim:var(--muted);        /* was "dimmed light text"; now = muted text */
  --line-strong:var(--line-2);
  --font-display:var(--f-display);
  --font-body:var(--f-body);
  --font-mono:var(--f-mono);
  --font-jp:var(--f-jp);

  --fs-h2:clamp(32px,4.6vw,58px);
  --fs-h3:clamp(20px,2vw,26px);
  --fs-lede:18px;
  --fs-body:16px;
  --fs-eyebrow:12px;

  --container-max:var(--maxw);
  --gutter-mobile:18px;

  --mkkk-accent:var(--accent);
  --mkkk-accent-strong:var(--accent-700);
  --mkkk-accent-soft:rgba(197,55,43,.14);
  --mkkk-bg:var(--white);
  --mkkk-bg-raised:var(--paper);
  --mkkk-bg-sunken:var(--white);
  --mkkk-surface-hover:var(--paper-2);
  --mkkk-border:var(--line);
  --mkkk-border-strong:var(--line-2);
  --mkkk-text:var(--text);
  --mkkk-text-muted:var(--muted);
  --mkkk-text-dim:var(--navy-300);
  --mkkk-font-display:var(--f-display);
  --mkkk-font-body:var(--f-body);
  --mkkk-font-mono:var(--f-mono);
  --mkkk-radius:var(--r-sm);
  --mkkk-radius-lg:var(--r);
  --mkkk-ease:var(--ease);
  --mkkk-container:min(var(--maxw),calc(100% - 48px));
  --mkkk-container-wide:min(1440px,96vw);
}

/* ---- Reset / base ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.6;/* WYGLADZANIE FONTOW: patrz komentarz nizej. 2026-08-13 zdjete -webkit-font-smoothing:antialiased. */text-rendering:optimizeLegibility;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;height:auto;display:block}
video,svg{max-width:100%}
h1,h2,h3,h4,h5{margin:0;font-family:var(--f-display);font-weight:700;line-height:1;letter-spacing:.005em;color:var(--navy);text-transform:uppercase;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--navy);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--accent)}

/* ---- Link w zdaniu: zawsze pogrubiony ------------------------------------
   DLACZEGO: podkreslenie linku rysuje sie kolorem siatki (--line-2), a sam
   tekst linku ma ten sam granat co akapit. Link postawiony w srodku zdania
   niczym sie wiec nie odroznia i czytelnik nie znajduje go wzrokiem. Waga 700
   jest JEDYNYM sygnalem, jaki tu dokladamy: koloru linku ani koloru
   podkreslenia nie ruszamy.

   REGULA, A NIE WYLICZANKA. Nie opakowujemy pojedynczych linkow w <strong>
   w tresci, bo pierwszy link, ktory redaktor wpisze sam w edytorze, znowu
   bylby niewidoczny. Regula lapie kazdy link stojacy w elemencie NIOSACYM
   ZDANIE (p, li, dd, dt, blockquote, figcaption, label), wiec obejmuje tak
   samo bloki z edytora, proze wypisana z PHP (pusty grafik sekcji, lead
   /oferta/) i notki pod formularzami.

   ZAKRES `main.mkkk-main`. Naglowek, stopka i menu mobilne sa RODZENSTWEM
   tego elementu w .mkkk-site, a nie jego potomkami, wiec zadna nawigacja
   ani ikona spolecznosciowa tu nie wpada i nie trzeba ich wylaczac osobno.

   SPECYFICZNOSC 0-1-2 DOBRANA CELOWO. Ani :where(), ani :not(:where(...))
   nie licza sie do wagi, wiec caly selektor wazy tyle, co `main.mkkk-main`
   plus `a`. Bije golego `a` (0-0-1) i `.mkkk-page-content a` (0-1-1, ktore
   ustawia tylko kolor i podkreslenie), a przegrywa z komponentem opisanym
   od 0-2-0 w gore - np. `.mkkk-page-content a.mkkk-btn` (0-2-1) zostaje przy
   swojej wadze 600 nawet bez wyjatku nizej. Gdyby wypisac wyjatki zwyklym
   :not(.a,.b,...), waga podskoczylaby o 0-1-0 za KAZDA klase, do 0-7-2, i ta
   jedna linijka przykrylaby po cichu praktycznie kazda regule wagi w pliku;
   przyszla poprawka wygladu musialaby zaczynac sie od !important.

   :not() ZDEJMUJE PRZYCISKI. Przycisk ma juz wlasna wage 600 i pogrubienie
   do 700 rozjezdza go z reszta interfejsu. Musi byc wypisany, bo .btn siedzi
   na 0-1-0 i sam by z ta regula przegral; .mkkk-btn wygralby, ale nie chcemy
   opierac wygladu przycisku na przypadkowej przewadze. Lista to caly slownik
   przyciskow serwisu: .btn (motyw), .mkkk-btn (tresc stron), .wp-block-button__link
   i .wp-element-button (bloki rdzenia).

   DRUGIE :not() ZDEJMUJE TO, CO NIE JEST ZDANIEM. Kontener czytamy potomkiem,
   a nie dzieckiem, zeby zlapac tez link zagniezdzony w <strong>, <em> czy
   <span> w srodku zdania. Ubocznie siega to jednak w naglowek karty stojacej
   w <li> (kafle trenerow na / i /trenerzy/), a naglowek zdaniem nie jest.
   Dzis wyszlo by na zero, bo h1..h5 i tak maja 700, ale opieranie sie na tym
   zbiegu okolicznosci znaczyloby, ze pierwsza karta z lzejszym naglowkiem
   zostanie po cichu pogrubiona. Wyjmujemy naglowki wprost.
   .mkkk-404__links to z kolei jedyna NAWIGACJA wewnatrz main: reszta list
   linkow (menu, okruszki, ikony spolecznosciowe, stopka) siedzi poza
   main.mkkk-main i wypada sama, a ta lista podpowiedzi na stronie 404 stoi
   w srodku, ma wlasna wage 600 z rodziny --f-ui i regule o wadze 0-1-1,
   wiec bez tego wyjatku zostalaby przykryta.                                 */
main.mkkk-main :where(p,li,dd,dt,blockquote,figcaption,label) a:not(:where(.btn,.mkkk-btn,.wp-block-button__link,.wp-element-button)):not(:where(h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,.mkkk-404__links a)){font-weight:700}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
::selection{background:var(--belt);color:#fff}
.jp{font-family:var(--f-jp);font-weight:600}
.jp-accent{color:var(--navy)} /* kanji ride navy in the light system */
.mono{font-family:var(--f-mono)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:24px}
.hide-lg{display:none}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Layout shells shared with existing templates */
.mkkk-site{flex:1 0 auto;display:flex;flex-direction:column;width:100%}
.mkkk-main{flex:1 0 auto}
.mkkk-container{max-width:var(--maxw);margin-inline:auto;padding-inline:24px;width:100%}
.mkkk-container-wide{max-width:min(1440px,96vw);margin-inline:auto;padding-inline:24px;width:100%}

/* ---- Section shell ------------------------------------------------------ */
.section{padding:104px 0}
.section.section--tight{padding:72px 0}
.section--paper{background:var(--paper)}
.section--paper2{background:var(--paper-2)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent)}
.eyebrow .jp{font-family:var(--f-jp);color:var(--navy);letter-spacing:.1em;font-size:15px}
.s-head{display:flex;flex-direction:column;gap:18px;margin-bottom:52px}
.s-head--row{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.s-title{font-size:clamp(32px,4.6vw,58px);line-height:.96}
.s-title .accent{color:var(--accent)}
.s-lede{font-size:18px;line-height:1.55;color:var(--muted);max-width:56ch}

/* ---- Buttons ------------------------------------------------------------ */
.btn,.mkkk-page-content .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-ui);font-weight:600;font-size:14px;letter-spacing:.02em;padding:14px 26px;border-radius:var(--r-pill);border:1.5px solid transparent;transition:transform .18s var(--ease),background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease);white-space:nowrap;cursor:pointer;text-transform:none}
/* TYPOGRAFIA CORE-BUTTONU, NIEZALEZNIE OD MIEJSCA W DRZEWIE.
   Regula wyzej jest zawezona do .mkkk-page-content i to zawezenie ZOSTAJE: niesie
   pudelko (padding, ramka, display, nawijanie), a pudelko jest per kontekst -
   hero ma swoje wymiary, .sec-more swoje. Zdjecie zawezenia rozlaloby na cala
   strone m.in. border:1.5px solid transparent, ktore - jak mowi komentarz nizej -
   wygasza rdzeniowy styl "Obrys" (jego regula siedzi w :where(), 0-1-0).
   Typografia jest inna: ma byc JEDNA wszedzie, wiec dostaje wlasna, niezawezona
   regule. Rozdzielenie "pudelko per kontekst / typografia globalnie" jest tu
   calym sensem - proba upchniecia obu w jednym selektorze wymusza albo za waski
   zasieg (dzisiejszy defekt), albo za szeroki (zepsuty Obrys).
   PO CO. Przycisk bloku POZA .mkkk-page-content nie dostawal ani rodziny, ani
   wagi: rdzen WP deklaruje na nim font-family/font-weight: inherit
   (:root :where(.wp-element-button,.wp-block-button__link)), wiec przycisk
   dziedziczyl z <body>, czyli wage 400. Zgloszenie wlasciciela brzmialo "polskie
   glyphy w buttonach nie renderuja sie dobrze" - i tak wlasnie wyglada Manrope
   400 tam, gdzie reszta serwisu ma 600: ogonki i kreski sa najcienszymi
   elementami kroju, wiec to one gasna pierwsze. Kroj byl caly czas poprawny.
   Miejsc poza .mkkk-page-content jest wiecej niz hero (front-page.php renderuje
   the_content() bez tego wrappera, page-oferta.php sklada intro w
   .mkkk-oferta-hero__intro, stopka leci przez do_blocks) i beda dochodzic, wiec
   regula celuje w KLASE BLOKU, a nie w liste sekcji - inaczej kazda nowa sekcja
   z przyciskiem to ten sam blad od nowa.
   Wygrywa z rdzeniem po kolejnosci zrodel, nie po specyficznosci: oba selektory
   to 0-1-0, a style.css jest w <head> PO global-styles-inline-css. Przeniesienie
   arkusza motywu przed style rdzenia cofnie te naprawe po cichu - pilnuje tego
   bramka scripts/test-typografia-buttonow.sh. */
.wp-block-button__link{font-family:var(--f-ui);font-weight:600;letter-spacing:.02em;text-transform:none}
.btn svg{width:16px;height:16px}
.btn-primary,.mkkk-page-content .wp-block-button__link.has-accent-background-color{background:var(--accent);color:#fff}
.btn-primary:hover,.mkkk-page-content .wp-block-button__link.has-accent-background-color:hover{background:var(--accent-700);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(197,55,43,.28)}
.btn-navy,.mkkk-page-content .wp-block-button__link.has-belt-background-color{background:var(--belt);color:#fff}
.btn-navy:hover,.mkkk-page-content .wp-block-button__link.has-belt-background-color:hover{background:var(--belt-600);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--belt);color:#fff;border-color:var(--belt)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost-light:hover{background:#fff;color:var(--navy)}
.btn-lg{padding:17px 32px;font-size:15px}

/* ---- Bloki edytora: core-buttony = style .btn motywu (1:1) + tony sekcji (C1b) -----
   Core-buttony dziedzicza .btn/.btn-primary/.btn-navy przez rozszerzone selektory wyzej
   (jedno zrodlo prawdy - ostry rog z --r-pill, kolory, hover-poswiata 1:1 jak navbar).

   DLA REDAKTORA I DLA NASTEPNEGO AGENTA: przycisk w tresci strony robi sie
   blokiem core/button z KOLOREM TLA Z PALETY - "Czerwien Kyokushin" (accent)
   albo "Czern pas" (belt). Tylko te dwa maja tu regule i tylko one daja
   czytelny przycisk.
   NIE UZYWAJ stylu "Obrys" (is-style-outline) wewnatrz .mkkk-page-content:
   rdzeniowa regula obrysu siedzi w :where() (specyficznosc 0-1-0) i PRZEGRYWA
   z regula .mkkk-page-content .wp-block-button__link wyzej, ktora ustawia
   border:1.5px solid transparent. Obramowanie wychodzi przezroczyste, tla brak,
   wiec przycisk jest praktycznie niewidoczny. Ghost-wariant istnieje tylko dla
   recznego .mkkk-btn--ghost, ktorego redaktor nie ma jak wstawic (core/html
   jest wyciety z Insertera).

   Ponizej tylko to, czego .btn nie pokrywa dla bloku wewnatrz .mkkk-page-content: */
/* Blok siedzi w .mkkk-page-content, gdzie tresciowa regula linku (a) narzuca navy +
   underline i bije palette/mapowanie BEZ !important (navbar .btn tego nie ma - nie jest
   w tresci). Dwa scoped override: brak podkreslenia + bialy tekst na kolorowym przycisku. */
.mkkk-page-content .wp-block-button__link,.mkkk-page-content .wp-block-button__link:hover{text-decoration:none}
.mkkk-page-content .wp-block-button__link.has-accent-background-color,.mkkk-page-content .wp-block-button__link.has-belt-background-color,.mkkk-page-content .wp-block-button__link.has-navy-background-color{color:#fff !important}
/* Odstep szerokiego/pelnego obrazu w sekcji (align resetuje rytm pionowy constrained). */
.mkkk-page-content .section .wp-block-image.alignwide,.mkkk-page-content .section .wp-block-image.alignfull{margin-top:2.5rem}
/* Ciemna sekcja (ton belt): bialy tekst na calej tresci (theme scopuje .mkkk-page-content p na navy). */
.section.has-belt-background-color,.section.has-belt-background-color h1,.section.has-belt-background-color h2,.section.has-belt-background-color h3,.section.has-belt-background-color h4,.section.has-belt-background-color p,.section.has-belt-background-color li,.section.has-belt-background-color .s-title,.section.has-belt-background-color .s-lede{color:#fff}

/* Karta kafla (wzorzec kafle-cechy): biale tlo, cienka ramka --line, padding, ostry rog. */
.mkkk-page-content .mkkk-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:32px}

/* ---- Header ------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--white);transition:box-shadow .2s var(--ease)}
/* Cien "stuck" na PELNOSZEROKIM .site-header, nie na wysrodkowanym .nav-inner -
   inaczej 14px blur wychodzi po BOKACH 1200px paska i widac go przy scrollu. */
.site-header.is-stuck{box-shadow:var(--shadow-sm)}
.topbar{background:var(--belt);color:var(--obi)}
/* Easter egg: lewy koniec topbaru jako ozdobiony koniec pasa Dan Kyokushin -
   emblemat kanku-style (inline SVG, --obi) + zlota belka Dan. Topbar juz jest
   "pasem" (background:--belt czern, color:--obi pomarancz obi), to dopina koncowke. */
.obi-tip{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;margin-right:8px}
.obi-kanku{display:block;width:26px;height:26px}
.obi-bar{width:4px;height:20px;border-radius:1px;background:#e8b923}
/* flex:0 0 auto NIE jest tu kosmetyka, tylko warunkiem prawdziwosci limitow
   znakow motta (48/17, liczone w includes/naglowek.php). Budzet policzono przy
   STALEJ szerokosci .social 90px, a domyslne flex:0 1 auto pozwala jej sie
   kurczyc - wtedy kolka 26x26 z border-radius:50% splaszczaja sie w elipsy
   zamiast oddac miejsce mottu. Po tej regule caly nadmiar idzie na motto, czyli
   w wielokropek (.topbar-motto ma min-width:0 + text-overflow), i tak ma byc. */
.topbar-inner .social{margin-left:auto;flex:0 0 auto}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:38px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.topbar-motto,.topbar-motto-md,.topbar-motto-sm,.topbar-motto-xs{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-motto .jp,.topbar-motto-md .jp,.topbar-motto-sm .jp,.topbar-motto-xs .jp{font-size:14px;color:var(--obi);margin-right:10px}
/* Wariant waski jest domyslnie schowany; podmiana nastepuje w @media 620px. */
.topbar-motto-md,.topbar-motto-sm,.topbar-motto-xs{display:none}

/* TRZY PASMA MOTTA, nie dwa.
   Pelne motto klubu ma 97 znakow (trzy czlony rozdzielone kropka), a w pasku
   miesci sie tyle, ile zostaje po odjeciu obi-tip i ikon social. Zmierzone:
   pelne wchodzi od ~1002 px w gore, wiec prog 1009 zostawia zapas.
   Ponizej idzie wariant sredni, a ponizej 620 px krotki.
   Liczby 1009 i 620 sa pinowane bramka metryk paska (includes/naglowek.php),
   wiec przesuniecie ktoregokolwiek zapali czerwone zamiast po cichu rozjechac
   licznik znakow w edytorze. */
@media (max-width:1009px){
  .topbar-motto{display:none}
  .topbar-motto-md{display:inline-block}
}
/* UWAGA: gap i szerokosc kolka wchodza do budzetu znakow motta. Zmiana tych
   liczb wymaga przeliczenia limitu w includes/naglowek.php (mkkk_topbar_metryki);
   bramka "Naglowek: metryki paska" w smoke-test.sh porownuje oba miejsca i
   zapali sie na rozjezdzie. Tak samo dodanie CZWARTEGO kolka w header.php. */
.social{display:flex;gap:6px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;color:var(--obi);font-size:11px;border:1px solid rgba(240,131,58,.38);transition:background .18s var(--ease),color .18s var(--ease)}
.social a:hover{background:var(--obi);color:var(--belt)}
.social a svg{width:13px;height:13px}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px;background:var(--white)}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* Logo klubu + znak dofinansowania jako jedna grupa. flex:0 0 auto zachowuje
   DZISIEJSZE zachowanie (a.brand ma flex-shrink:0) - niczego nie pogarsza i
   niczego nie obiecuje; zaworu bezpieczenstwa tu nie ma i nie udajemy, ze jest.
   14 gap + 14 padding + 1 kreska = 29px odstepu miedzy logo a znakiem, nie 14.
   CZYTELNOSC, zmierzona: przy 48px wysokosci najwiekszy napis na znaku ma 2,8px
   wersalika, najmniejszy 2,3px. NAPISOW NIE DA SIE PRZECZYTAC w zadnym
   rozmiarze mieszczacym sie w pasku (prog czytelnosci to ~140px wysokosci
   znaku, a caly przyklejony naglowek ma 112px). W naglowku znak dziala jako
   ZNAK (flaga i orzel czytaja sie jako ksztalt); cala formula jedzie w atrybut
   alt i w pasmo .fund w stopce, gdzie znak ma 300px szerokosci.
   max-width NIE jest ozdoba: przy zerwanym obrazie (404) width:auto oznacza
   rozmiar wewnetrzny elementu zastepczego, czyli szerokosc renderowanego alt -
   66 znakow, ktorym w .nav-inner nic nie moze ustapic (.brand i .nav-actions
   maja flex-shrink:0, a .nav ma white-space:nowrap). Nadmiar poszedlby w
   overflow dokumentu, czyli w poziomy scroll calej strony - dokladnie ten sam
   objaw, ktory opisuje komentarz przy @media (max-width:1080px) nizej. */
.brand-row{display:flex;align-items:center;gap:14px;min-width:0;flex:0 0 auto}
/* flex:0 0 auto rowniez po to, zeby globalny reset img{max-width:100%} nie
   sciskal szerokosci przy ustalonej wysokosci - znak nigdy nie ma byc rozciagniety.

   CAP LICZY SIE W BORDER-BOX. Na gorze pliku stoi *{box-sizing:border-box}, wiec
   max-width obejmuje TAKZE padding-left i kreske - 15px, ktore nie naleza do
   obrazu. Wzor jest jeden: cap = szerokosc obrazu + 14 padding + 1 kreska.
   Cap policzony jak dla content-box scisnalby godlo w poziomie (wysokosc jest
   zadana na sztywno, wiec reset img{max-width:100%} nie przycina, tylko sciska).

   Obraz jedzie w rozmiarze "medium" o proporcjach 300x212, wiec:
     48px wysokosci -> 67,92px szerokosci -> minimum 82,92 -> cap 87
   Zapas ~4px jest CELOWY, na zaokraglenia. Cap ma powstrzymac awarie, a nie
   ksztaltowac uklad: przy zdrowym obrazie nie wolno mu dotknac ani jednego
   piksela. Przy podmianie grafiki na inne proporcje przelicz TRZY capy: tutaj,
   w .mnav-head nizej i w @media (max-width:620px). */
.brand-fund{flex:0 0 auto;display:flex;align-items:center;max-width:87px;overflow:hidden;padding-left:14px;border-left:1px solid var(--line)}
.brand-fund img{height:48px;width:auto;display:block}
/* Selektor OPISOWY (0,2,1), a nie modyfikator klasy. Wniosek z bledu, ktory juz
   zyje w tym pliku: .brand-logo--sm{height:32px} przegrywa z .brand-logo{height:36px}
   w @media 620 przy rownej specyficznosci 0,1,0, przez co logo w panelu na
   telefonie ROSNIE zamiast malec. Ten blad nas nie dotknie.
   Cap wg wzoru z reguly bazowej: 32px wysokosci -> 45,28px obrazu + 15 = 60,28. */
.mnav-head .brand-fund{max-width:64px}
.mnav-head .brand-fund img{height:32px}
.brand-logo{height:42px;width:auto;display:block}
.brand-logo--sm{height:32px}
.brand-logo--footer{height:44px}
/* Stopka w blokach: logo stopki to core/image - klasa brand-logo--footer siedzi
   na <figure>, nie <img>, wiec wysokosc celujemy w <img>; resetujemy marginesy
   figury i akapitow paska, ktore bloki wnosza (inline PHP ich nie mial). */
.footer-brand .wp-block-image{margin:0}
.footer-brand .brand-logo--footer img{height:44px;width:auto;display:block}
.footer-bar p{margin:0}

/* ---------------------------------------------------------------------------
   Formularz deklaracji ([mkkk_deklaracja], wtyczka mkkk-declaration) na /zapisy/.
   Wtyczka jest CELOWO theme-agnostyczna: kazdy kolor to var(--mkkk-*, jasny
   fallback), zeby na obcym motywie (produkcja: Hestia+Elementor) formularz byl
   czytelny. Nasz motyw NIE definiowal tych zmiennych -> formularz lecial na jasnym
   fallbacku, nie na barwach marki. Tu motyw DOSTARCZA kontrakt --mkkk-* (mapa na
   palete) + wymusza ostre rogi (motyw ma --r-*:0, wtyczka 6-8px). Font juz
   dziedziczy Manrope przez font:inherit. declaration.css NIETKNIETY. */
.mkkk-decl {
	--mkkk-text: var(--text);
	--mkkk-text-muted: var(--muted);
	--mkkk-border: var(--line-2);
	--mkkk-border-strong: var(--navy-300);
	--mkkk-bg-raised: var(--paper-2);
	--mkkk-bg-sunken: var(--white);
	--mkkk-accent: var(--accent);
	--mkkk-accent-strong: var(--accent-700);
	/* Przycisk formularza: wtyczka przyciemnia czerwien (color-mix 80%+czern) dla
	   kontrastu WCAG bialego tekstu. Nadpisujemy na CZYSTY --accent, zeby byl 1:1
	   z przyciskami motywu (.btn-primary = #C5372B + bialy tekst; ta sama czern). */
	--decl-accent-fill: var(--accent);
}
.mkkk-decl fieldset,
.mkkk-decl .mkkk-decl__privacy,
.mkkk-decl .mkkk-decl__errors,
.mkkk-decl input[type],
.mkkk-decl select,
.mkkk-decl .mkkk-decl__btn {
	border-radius: 0;
}
/* Hover jak przyciski motywu: ciemniej (--accent-700), nie jasniej. Wtyczka ma
   filter:brightness(1.12) - dobre dla jej przyciemnionej czerwieni, ale na czystym
   --accent robiloby rozowo; motyw zamiast tego przechodzi na ciemniejszy ton. */
.mkkk-decl .mkkk-decl__btn:hover:not( :disabled ) {
	background: var(--accent-700);
	filter: none;
}
.nav>ul{display:flex;align-items:center;gap:4px}
.nav>ul>li>a,.nav>ul>li>.nav-drop-btn{display:inline-flex;align-items:center;gap:5px;padding:10px 13px;font-family:var(--f-ui);font-weight:600;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);border-radius:var(--r-sm);white-space:nowrap}
.nav>ul>li>a:hover,.nav>ul>li>.nav-drop-btn:hover{color:var(--accent);background:var(--paper)}
/* Strzalka rozwijanej listy. Selektor bez `a`: rodzicem listy jest dzis
   <button class="nav-drop-btn"> (includes/walkers.php), wiec `.nav a .caret`
   nie pasowalo do niczego i strzalka szla w domyslnym rozmiarze przegladarki.
   Akordeon mobilny ma wlasna regule (.macc-btn .caret) i lezy poza .nav. */
.nav .caret{width:9px;height:9px;opacity:.5;flex-shrink:0}
.nav-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.nav-phone{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.04em;color:var(--navy)}
.nav-phone svg{width:15px;height:15px;color:var(--accent)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--navy)}
.burger:hover{background:var(--paper)}
.burger svg{width:22px;height:22px}

/* dropdown */
.has-drop{position:relative}
.drop{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:10px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:5}
.has-drop:hover .drop,.has-drop.open .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 14px;border-radius:var(--r-sm);font-family:var(--f-ui);font-weight:500;font-size:14px;color:var(--text);text-transform:none;letter-spacing:0}
.drop a:hover{background:var(--paper);color:var(--navy)}
.drop a .meta{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.drop-title{padding:8px 14px 6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.drop--wide{min-width:520px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
/* Selektor DZIECKA BEZPOSREDNIEGO, nie potomka. Etykieta calej listy ma isc
   przez obie kolumny; naglowek grupy trzeciego poziomu (ta sama klasa, ale
   w srodku .drop-group) ma zostac w swojej kolumnie. Przed dodaniem grup
   zapis potomny znaczyl to samo - dzis znaczylby cos innego. */
.drop--wide>.drop-title{grid-column:1/-1}
/* ---- Trzeci poziom: grupa jako kolumna listy -----------------------------
   Pozycja drugiego poziomu z dziecmi renderuje sie jako <div class="drop-group">
   z naglowkiem .drop-title i linkami pod nim (patrz includes/walkers.php,
   tam tez uzasadnienie "kolumny zamiast wysuwanego podmenu").
   .drop .drop-title musi miec dwie klasy, zeby wygrac z .drop a (klasa+element)
   - inaczej naglowek-link renderowalby sie jak zwykly wiersz listy. */
.drop-group{break-inside:avoid}
.drop .drop-title{display:block;padding:8px 14px 6px;font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.drop a.drop-title:hover{color:var(--accent);background:var(--paper)}
/* Wciecie pozycji pod naglowkiem: hierarchia ma byc widoczna bez ramek. */
.drop-group>a:not(.drop-title){padding-inline-start:24px}

/* ---- Hero --------------------------------------------------------------- */
/* ODSTEPY MASZTU LICZA SIE Z KOLEJNOSCI, NIE Z ZALOZENIA (2026-08-18).
   Do dzis maszt zakladal jeden uklad: najpierw tekst, potem pas wideo. Gorny
   odstep siedzial na `.hero` (padding-top:64px), a odstep miedzy tekstem
   a wideo na `.hero-video-band` (margin-top:52px). Wlasciciel przestawil pas
   wideo NA GORE, pod navbar - przy tamtych regulach nad wideo zostawaloby
   64+52 px bialego pola, czyli dokladnie to, czego mialo nie byc.
   Teraz kazdy element niesie swoj odstep sam, a reguly warunkowe pytaja
   o SASIEDZTWO. Oba ulozenia wygladaja poprawnie i redaktor moze przestawic
   bloki w edytorze bez wolania o pomoc. */
.hero{position:relative;background:linear-gradient(180deg,var(--white) 0%,var(--paper) 100%);overflow:hidden}
.hero-copy-center{position:relative;z-index:1;max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;padding-top:64px}
/* Dol tylko wtedy, gdy tekst KONCZY maszt. Gdy pod nim stoi jeszcze pas wideo,
   odstep daje `margin-top` pasa nizej i dwa razy liczyc go nie wolno. */
.hero-copy-center:last-child{padding-bottom:72px}
.hero h1{font-size:clamp(46px,6.6vw,92px);line-height:.92;letter-spacing:.005em}
.hero h1 .accent{color:var(--accent)}
.hero-lede{font-size:19px;line-height:1.55;color:var(--muted);max-width:60ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.hero-video-band{position:relative;width:100%;margin-top:0;height:clamp(260px,42vw,600px);overflow:hidden;background:var(--belt)}
/* Pas stojacy PO tekscie odzyskuje dawny odstep 52px. Stojacy pierwszy nie ma
   go skad wziac i przykleja sie do navbara - o to chodzilo. Znak wodny sie tu
   nie liczy, bo jest `position:absolute` i nie stoi w przeplywie. */
.hero-copy-center ~ .hero-video-band{margin-top:52px}
.hero-video-band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-watermark{position:absolute;right:-2%;top:-6%;font-family:var(--f-jp);font-size:clamp(180px,30vw,380px);line-height:1;color:var(--navy);opacity:.04;pointer-events:none;user-select:none;z-index:0}
.ph-live{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(14,24,48,.7);padding:5px 9px;border-radius:var(--r-sm)}
.ph-live::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--accent);animation:mkkk-pulse 1.6s var(--ease) infinite}
@keyframes mkkk-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion: reduce){.ph-live::before{animation:none}}

/* ---- Info cards (overlap hero) ------------------------------------------ */
.info-row{position:relative;z-index:20;margin-top:-56px}
.info-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.info-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow-sm)}
.info-ico{flex-shrink:0;width:48px;height:48px;border-radius:var(--r-sm);background:var(--paper);color:var(--accent);display:flex;align-items:center;justify-content:center}
.info-ico svg{width:22px;height:22px}
.info-card .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.info-card .v{font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--navy);text-transform:uppercase;line-height:1.05;margin-top:3px}
.info-card .sub{font-size:13px;color:var(--muted);margin-top:2px}
/*
 * KARTA-LINK: srodkowy kafel (licznik lokalizacji) prowadzi na grafik.
 *
 * Selektor po ELEMENCIE, a nie po klasie modyfikatora: `a.info-card` domyka
 * caly zestaw regul o karcie, ktora jest linkiem, i nie da sie go obejsc
 * zapominajac dopisac klasy. Klasa `info-card--link` zostaje w znaczniku jako
 * podpis dla czytajacego, nie jako zaczep stylu.
 *
 * `color:inherit` i zdjeta podkreslenie: karta ma wygladac jak dwie sasiadki,
 * a nie jak link w tekscie. Sygnalem klikalnosci jest strzalka i reakcja na
 * najechanie, bo trzy karty w jednym rzedzie roznia sie wtedy jednym detalem,
 * a nie kolorem calego bloku.
 */
a.info-card{text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease}
a.info-card:hover,a.info-card:focus-visible{border-color:var(--accent);box-shadow:var(--shadow)}
/* Obrys focusu POZA ramka karty: `outline-offset` dodatni, bo obrys wpisany
   w zaokraglony rog gubi sie na tle bialej karty. */
a.info-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.info-card__go{margin-left:auto;flex-shrink:0;display:flex;color:var(--accent);transition:transform .15s ease}
.info-card__go svg{width:20px;height:20px}
a.info-card:hover .info-card__go,a.info-card:focus-visible .info-card__go{transform:translateX(3px)}
@media (prefers-reduced-motion: reduce){a.info-card,.info-card__go{transition:none}a.info-card:hover .info-card__go,a.info-card:focus-visible .info-card__go{transform:none}}

/* ---- Offer grid (home: "Co u nas trenujesz", data-driven) --------------- */
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.offer-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.offer-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.offer-media{position:relative;aspect-ratio:16/11;background:var(--paper-2);overflow:hidden}
.offer-media img{width:100%;height:100%;object-fit:cover}
.offer-num{position:absolute;top:14px;left:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:#fff;background:rgba(14,14,15,.72);padding:4px 9px;border-radius:var(--r-sm)}
.offer-jp{position:absolute;top:14px;right:14px;font-family:var(--f-jp);font-size:20px;color:#fff;background:rgba(14,14,15,.58);padding:3px 10px;border-radius:var(--r-sm)}
.offer-body{display:flex;flex-direction:column;gap:6px;padding:22px 22px 24px;flex:1}
.offer-body h3{font-size:23px;color:var(--navy)}
.offer-body .desc{font-size:14.5px;color:var(--muted);line-height:1.5}
.offer-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.offer-foot .age{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.offer-foot .go{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-ui);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}
.offer-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,#e7e2d8 0 14px,#f1ede4 14px 28px)}
.offer-ph span{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:18px;color:var(--muted);background:rgba(255,255,255,.78);padding:6px 12px;border-radius:var(--r-sm);text-align:center;max-width:82%}

/* ---- Locations ----------------------------------------------------------
   .loc-grid i .loc-card zostaly po siatce kart, ktora znikla ze strony
   glownej, ale NIE sa martwe: renderuje je modul grafiku wtyczki mkkk na
   hubie /zajecia/ i na podstronie sekcji. Nie kasuj ich razem
   z template-partem.
   Chipy filtrow i .loc-card[hidden] poszly - filtrowaly wylacznie tamta
   siatke i nie mialy juz czego chowac.
   ------------------------------------------------------------------------ */
.loc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;padding:0;margin:0}
.loc-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.loc-card:hover{border-color:var(--belt);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.loc-card .pin{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.loc-card .pin svg{width:14px;height:14px;flex-shrink:0}
.loc-card h3{font-size:24px;color:var(--navy)}
.loc-card .addr{font-style:normal;font-size:14px;color:var(--muted);line-height:1.45}
.loc-card .times{display:flex;flex-direction:column;gap:4px;padding-top:10px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:12.5px;color:var(--text);flex:1}
.loc-card .times li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc-card .overflow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.loc-card .ages{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--navy)}
.loc-card .ages span{display:inline-block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 7px;margin:0 4px 4px 0}
.loc-card .empty{font-size:13.5px;color:var(--muted);font-style:italic;margin:0}
.loc-card .loc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.loc-card .loc-actions .btn{padding:9px 16px;font-size:12.5px}
.mkkk-locations__empty{color:var(--muted);font-size:var(--fs-lede)}

/* Wysrodkowany przycisk domykajacy sekcje. Nazwa neutralna, bo uzywaja go
   dwie sekcje strony glownej (lokalizacje, jak-zaczac); wczesniej .loc-more. */
.sec-more{display:flex;justify-content:center;margin-top:40px}

/* ---- Stats (home: "Klub w liczbach") ------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;list-style:none;padding:0;margin:0}
.stat{padding:38px 30px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--muted);display:block}
.stat .l{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2vw,26px);line-height:1.1;color:var(--navy);text-transform:uppercase;margin-top:8px}
.stat .d{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.45}

/* ---- Trainers (home + archive), shared card ----------------------------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;padding:0;margin:0}
.trainer{display:flex;flex-direction:column;gap:14px}
.trainer-media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line);background:var(--paper-2)}
.trainer-media img{width:100%;height:100%;object-fit:cover}
.trainer-ph{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#e7e2d8 0 14px,#f1ede4 14px 28px)}
.trainer .rank{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.trainer h3{font-size:21px;color:var(--navy);margin-top:2px}
.trainer .role{font-size:14px;color:var(--muted);margin-top:3px}
.trainer .bio{font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:6px}

/* ---- News --------------------------------------------------------------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.news-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.news-media{aspect-ratio:16/10;background:var(--paper-2);overflow:hidden}
.news-media img{width:100%;height:100%;object-fit:cover}
.news-ph{width:100%;height:100%;background:repeating-linear-gradient(135deg,#e7e2d8 0 14px,#f1ede4 14px 28px)}
.news-body{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;flex:1}
.news-meta{display:flex;align-items:center;justify-content:space-between}
.news-meta .tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.news-meta .date{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
.news-body h3{font-size:21px;color:var(--navy);line-height:1.08}
.news-body h3 a{color:inherit}
.news-body .exc{font-size:14.5px;color:var(--muted);line-height:1.5}
.news-body .read{margin-top:auto;padding-top:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.news-card:hover .read{color:var(--accent)}

/* ---- CTA band ("Dołącz w 3 krokach") ------------------------------------ */
.cta{position:relative;background:var(--belt);color:#fff;border-radius:var(--r);overflow:hidden;padding:72px 64px}
.cta::after{content:"入会";position:absolute;right:36px;bottom:-30px;font-family:var(--f-jp);font-size:220px;line-height:1;color:#fff;opacity:.05;pointer-events:none}
.cta-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.cta h2,.cta .cta-title{color:#fff;font-size:clamp(38px,5vw,62px);line-height:.95}
.cta .eyebrow{color:rgba(255,255,255,.7)}
.cta .eyebrow .jp{color:#fff}
.steps{display:flex;flex-direction:column;gap:14px;margin-bottom:26px;list-style:none;padding:0}
.step{display:flex;align-items:center;gap:16px}
.step .no{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:700;font-size:17px}
.step .tx{font-family:var(--f-ui);font-weight:500;font-size:17px}
.cta-note{margin-top:18px;font-family:var(--f-mono);font-size:11.5px;line-height:1.5;letter-spacing:.04em;color:rgba(255,255,255,.72);max-width:46ch}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Style .tst-* ("Co mówią nasi członkowie") USUNIETE razem z modulem opinii
   i template-parts/home/opinie.php. Nic ich juz nie renderuje: sekcja opinii
   na stronie glownej to naglowek w blokach plus shortcode TrustIndex, ktory
   niesie wlasny HTML i wlasne style. */

/* --- Home: "Zajrzyj na nasze social media" -------------------------------
   FB glowny CTA (.btn-primary = czerwien, jedyny akcent - NIE niebieski
   Facebooka). IG/YT to drugorzedne linki: wzorzec kol ze stopki, ale na
   jasnym tle (wlosowa linia + granatowy tusz, czern na hover). */
.social-cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.social-cta__fb svg{width:18px;height:18px}
.social-cta__more{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.social-cta__more-label{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.social-cta__link{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-ui);font-weight:600;font-size:14px;color:var(--navy);padding:9px 16px;border:1.5px solid var(--line-2);transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.social-cta__link svg{width:16px;height:16px}
.social-cta__link:hover{background:var(--belt);color:#fff;border-color:var(--belt);transform:translateY(-2px)}
.social-cta__link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- Footer ------------------------------------------------------------- */
.site-footer{background:var(--belt);color:rgba(255,255,255,.72)}
.footer-maxim{padding-block:64px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-maxim .jp{font-family:var(--f-jp);font-size:19px;letter-spacing:.1em;color:#fff;opacity:.85}
.footer-maxim p{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,3vw,38px);line-height:1.12;text-transform:uppercase;color:#fff;margin-top:16px;max-width:900px}
.footer-maxim p .dim{color:rgba(255,255,255,.62)}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-block:56px 40px}
.footer-brand p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.66);margin-top:18px;max-width:34ch}
.footer-col h4{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:16px}
.footer-col ul{display:flex;flex-direction:column;gap:11px;list-style:none;padding:0;margin:0}
.footer-col a,.footer-col li{color:rgba(255,255,255,.78);font-size:14.5px}
.footer-col a:hover{color:#fff}
.footer-social{display:flex;gap:8px;margin-top:16px}
.footer-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px}
.footer-social a:hover{background:#fff;color:var(--navy)}
.footer-social a svg{width:15px;height:15px}
.footer-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:22px;border-top:1px solid rgba(255,255,255,.12);font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.62);text-transform:uppercase}

/* ---- Dofinansowanie band ------------------------------------------------ */
.fund{background:var(--paper);border-top:1px solid var(--line)}
.fund-inner{display:flex;align-items:center;gap:40px;padding-block:48px}
/* margin:0 dokladane, bo od 2026-08-13 to <figure class="wp-block-image"> ze
   wzorca, a rdzen daje figurze margin:0 0 1em - w pasie wygladalo by to jak
   przekrzywiona ramka. Ta sama poprawka, co przy .footer-brand .wp-block-image.

   RAMKA NIE ZALEZY OD KLASY NA BLOKU, i to jest poprawka z 2026-08-18. Wzorzec
   niesie `fund-img` na swoim gniezdzie, ale redaktor, ktory wstawi WLASNY blok
   obrazka, dostaje goly `wp-block-image` - klasy nie ma jak znac i nie ma
   powodu, zeby ja znal. Bez tego obrazek wchodzil do pasa bez ramki i na cala
   szerokosc, co wlasciciel zglosil slowami "po probie podstawienia wyglada
   bardzo zle".

   DLATEGO PO POLOZENIU, A NIE PO KLASIE: bezposrednie dziecko pasa (obok
   tekstu, uklad docelowy) albo obrazek wrzucony DO kolumny tekstu (co sie
   wlasnie stalo - w edytorze latwiej trafic w srodek grupy niz obok niej).
   Trzeciego miejsca nie ma, bo wzorzec ma dwa poziomy zagniezdzenia.

   TA SAMA DECYZJA, CO PRZY ZNAKACH GMIN NIZEJ (.mkkk-dofinansowania__znaki,
   akapit "DLACZEGO SELEKTOR CELUJE W .wp-block-image"): styl nalezy do
   MIEJSCA, nie do pamieci redaktora. Pas rzadowy byl ostatnim, ktory tej
   zasady nie stosowal. */
.fund-img,
.fund-inner > .wp-block-image,
.fund-txt .wp-block-image{flex-shrink:0;width:fit-content;max-width:300px;margin:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
/* max-width NA OBRAZKU, NIE width, i to jest roznica miedzy dzialaniem a pozorem.
   Blok Obraz po przeciagnieciu uchwytu zapisuje szerokosc STYLEM LINIOWYM na
   <img> (klasa `is-resized`, np. style="width:363px"), a styl liniowy bije kazdy
   selektor z arkusza. `width:100%` wygladaloby wiec na regule dzialajaca i po
   cichu przegrywalo, a przy overflow:hidden powyzej obrazek szerszy od ramki
   zostalby PRZYCIETY. `max-width` nie konkuruje z `width` o specyficznosc, tylko
   go ogranicza - wiec liniowe 363px zjezdza do szerokosci ramki i nic nie ucieka.
   Zmierzone na tresci wzorca z dev (blok id 139, is-resized, align-left). */
.fund-img img,
.fund-inner > .wp-block-image img,
.fund-txt .wp-block-image img{display:block;max-width:100%;height:auto}
/* `width:fit-content` wyzej znaczy, ze ramka oblepia obrazek zamiast trzymac
   sztywne 300px - grafika wezsza od kolumny nie plywa w bialym prostokacie.
   Gorna granice daje `max-width`, wiec obrazek 1024px i tak siada w kolumnie. */
/* Kolumna tekstu jest flexem pionowym, wiec obrazek w niej ma sie trzymac lewej
   krawedzi zamiast rozciagac na cala szerokosc. */
.fund-txt .wp-block-image{align-self:flex-start}
.fund-txt{display:flex;flex-direction:column;gap:12px}
.fund-title{font-size:26px;color:var(--navy)}
/* :not(.eyebrow), bo nadkreslenie jest teraz akapitem bloku, a nie <span>.
   Bez tego .fund-txt p (0,1,1) bilo .eyebrow (0,1,0) i mono 12px zamienialo sie
   w prozę 15px. Wykluczenie zamiast trzeciej kopii rozmiaru: liczba ma zostac
   w JEDNYM miejscu, przy .eyebrow. */
.fund-txt p:not(.eyebrow){font-size:15px;line-height:1.6;color:var(--muted);max-width:62ch}
.fund-note{font-family:var(--f-mono)!important;font-size:11px!important;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)!important}
@media (max-width:720px){.fund-inner{flex-direction:column;align-items:flex-start;gap:24px}.fund-img,.fund-inner > .wp-block-image,.fund-txt .wp-block-image{max-width:360px}}

/* Znaki gmin pod pasmem KLUB (tylko strona glowna, patrz footer.php).
   JEDEN PAS, NIE DWA: to samo tlo co .fund i BEZ wlasnego border-top, wiec
   dofinansowanie rzadowe i samorzadowe czytaja sie jako jedna sprawa, a nie
   dwie sasiadujace sekcje. Kreska rozdzielajaca jest juz w
   .mkkk-dofinansowania (border-top), wiec drugi obrys robilby podwojna linie.
   Zerujemy tez margin-top z /zajecia/, gdzie sekcja odbija sie od tresci
   strony; tu odstep daje padding-block pasma wyzej. */
.fund-gminy{background:var(--paper);padding-bottom:48px}
.fund-gminy .mkkk-dofinansowania{margin-top:0}
/* Naglowek sekcji zrownany z .fund-title. Na /zajecia/ ten h2 jest trescia
   strony i ma jej skale; tu stoi obok "Rzadowy Program KLUB" i wieksza czcionka
   robilaby ze znakow gmin wazniejszy komunikat niz pasmo, pod ktorym stoja. */
.fund-gminy .mkkk-dofinansowania h2{font-size:26px;color:var(--navy)}

/* ---- Page header (inner pages) - navy band ------------------------------ */
.page-head,.mkkk-page-header{background:var(--belt);color:#fff;position:relative;overflow:hidden}
.page-head::after,.mkkk-page-header::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 85% 0%,rgba(197,55,43,.18),transparent 60%)}
.page-head-inner{position:relative;z-index:1;padding:64px 0 72px;display:flex;flex-direction:column;gap:16px}
.mkkk-page-header .mkkk-container{position:relative;z-index:1;padding-top:56px;padding-bottom:60px;display:flex;flex-direction:column;gap:12px}
.breadcrumb{display:flex;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.breadcrumb a{color:rgba(255,255,255,.66)}
.breadcrumb a:hover{color:#fff}
.page-head h1,.mkkk-page-title{color:#fff;font-size:clamp(40px,6vw,72px);line-height:.94;border:0;padding:0}
.page-head .lede{font-size:18px;color:rgba(255,255,255,.82);max-width:60ch;line-height:1.55}
.page-head .jp{color:rgba(255,255,255,.55);font-size:20px;letter-spacing:.3em}
.mkkk-page-header__eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.mkkk-page-header__eyebrow::before{content:"";width:22px;height:2px;background:var(--accent)}
.mkkk-page-header .mkkk-post-meta,.mkkk-page-header .mkkk-oferta-hero__lede{color:rgba(255,255,255,.78);font-size:15px;margin:0;max-width:62ch}
.mkkk-page-header .mkkk-oferta-hero__lede a{color:#fff;text-decoration:underline}
/* Naglowek podstron: redukcja pionowego paddingu na tablecie (jak siostrzane
   pasma .mkkk-oferta-hero/.mkkk-cta-band__inner na @820). */
@media (max-width:820px){
  .mkkk-page-header .mkkk-container{padding-top:40px;padding-bottom:44px}
}

/* ---- Timetable (location schedule - classes shared with the mkkk plugin's
   schedule module, assets/css/timetable.css) ------------------------------ */
.tt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.tt-legend{display:flex;flex-wrap:wrap;gap:16px}
.tt-legend span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.tt-legend i{width:11px;height:11px;border-radius:var(--r-sm)}
.day-filter{display:flex;flex-wrap:wrap;gap:6px}
.day-filter button{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:8px 13px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--navy);background:#fff;transition:all .16s var(--ease)}
.day-filter button:hover{border-color:var(--belt)}
.day-filter button.active{background:var(--belt);color:#fff;border-color:var(--belt)}
/* proportional weekly grid: shared time axis + time-positioned blocks */
.ttw{overflow-x:auto}
.ttw-head,.ttw-body{display:grid;grid-template-columns:60px repeat(6,1fr);gap:10px;min-width:720px}
.ttw-head{margin-bottom:10px}
.tt-day{font-family:var(--f-display);font-weight:700;font-size:16px;text-transform:uppercase;color:var(--navy);padding:11px 12px;background:var(--paper);border-radius:var(--r-sm);text-align:center;letter-spacing:.04em}
.ttw-axis{position:relative;height:var(--tt-h,819px)}
.ttw-hr{position:absolute;right:8px;font-family:var(--f-mono);font-size:11px;color:var(--muted);white-space:nowrap}
.ttw-col{position:relative;height:var(--tt-h,819px);border-radius:var(--r-sm);background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 78px}
.ttw-col .slot{position:absolute;left:0;right:0;overflow:hidden;padding:8px 10px;gap:1px}
.ttw-col .slot .time{font-size:12px;line-height:1.1}
.ttw-col .slot .cls{font-size:13.5px;line-height:1.12}
.ttw-col .slot .grp{font-size:9.5px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--belt);border-radius:var(--r-sm);padding:12px 13px;transition:box-shadow .16s var(--ease),transform .16s var(--ease)}
.slot:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.slot .time{font-family:var(--f-mono);font-size:12.5px;font-weight:500;color:var(--navy);letter-spacing:.02em}
.slot .cls{font-family:var(--f-ui);font-weight:600;font-size:14.5px;color:var(--text);line-height:1.15}
.slot .grp{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.slot--dzieci{border-left-color:var(--accent)}
.slot--boks{border-left-color:#2f7d8c}
.slot-empty{border:1px dashed var(--line);border-radius:var(--r-sm);padding:12px 13px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;background:transparent}
.tt-day-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ttw-col.is-hidden,.ttw-head .is-hidden{display:none}
.ttw--filtered{grid-template-columns:60px minmax(0,520px);justify-content:start}

/* location meta strip on subpage */
.loc-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;margin-bottom:44px}
.loc-meta .cell{display:flex;align-items:center;gap:14px;padding:22px 24px;border-left:1px solid var(--line)}
.loc-meta .cell:first-child{border-left:0}
.loc-meta .ico{width:42px;height:42px;border-radius:var(--r-sm);background:var(--paper);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.loc-meta .ico svg{width:20px;height:20px}
.loc-meta .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.loc-meta .v{font-family:var(--f-ui);font-weight:600;font-size:15.5px;color:var(--navy);margin-top:2px}

/* ============================================================================
   EXTENSIONS - pages the prototype does not cover, restyled with the same
   primitives. (Prose, /oferta/, trainer archive/single, blog, plugin forms.)
   ============================================================================ */

/* ---- Generic prose (.mkkk-page-content: /o-klubie/, /platnosci/, /zapisy/,
        /kontakt/, /rodo/, blog single) ----------------------------------- */
.mkkk-page-content{padding-block:clamp(2.5rem,4vw,4.5rem);color:var(--text);font-size:16.5px;line-height:1.7;overflow-wrap:break-word}
.mkkk-page-content>*:not(.alignfull):not(.alignwide):not(.mkkk-schedule):not(.mkkk-dojo-map):not(.mkkk-trainer-card__image):not(.mkkk-decl):not(.mkkk-post-card){max-width:72ch}
/* ---- Align-wide / align-full (C1a) --------------------------------------
   Domyka intencje linii wyzej (:not(.alignwide):not(.alignfull)). theme.json
   stylizuje te klasy tylko w .is-layout-constrained; nasza tresc renderuje sie
   w bespoke .mkkk-page-content, wiec keyujemy reguly na ten wrapper.
   wideSize (1200px) pochodzi z theme.json (--wp--style--global--wide-size).
   UWAGA (Interfejsy pkt 3): .mkkk-container ma padding-inline:24px + box-sizing:
   border-box, wiec EFEKTYWNA szerokosc wide = 1200 - 48 = 1152px (reading gutter
   zachowany). wideSize=1200 to sufit kontenera, nie szerokosc elementu wide;
   kanwa edytora (1200) rozni sie od frontu o 48px - swiadomie akceptowane. */
.mkkk-page-content>.alignwide{max-width:var(--wp--style--global--wide-size,1200px);margin-inline:auto}
/* full-bleed z wnetrza wrappera: procent marginesu liczy sie od content-box
   rodzica, wiec calc(50% - 50vw) trafia w 0 viewportu MIMO padding-inline:24px
   (matematyka redukuje sie do zera). Zaden przodek nie ma overflow-x:hidden. */
.mkkk-page-content>.alignfull{max-width:none;width:100vw;margin-inline:calc(50% - 50vw)}
/* ---- Align-center / left / right ----------------------------------------
   Ta sama pulapka co wyzej, ale grozniejsza, bo awaria jest CICHA: przyciski
   wyrownania w edytorze sa widoczne, w kanwie edytora centruja poprawnie,
   a na froncie nie robia NIC. Redaktor nie ma jak sie domyslic, ze to nie on.
   Powod: rdzen WP oddaje marginesy auto i float wylacznie przez selektory
   keyowane na RODZICU z klasa ukladu:
     .is-layout-flow > .aligncenter, .is-layout-constrained > .alignleft,
     .wp-site-blocks > .alignright
   Jedyna regula rdzenia bez takiego rodzica - .wp-block-image .aligncenter -
   to selektor POTOMKA: celuje w markup starego edytora klasycznego (klasa na
   <img> w srodku), a nie w dzisiejsze <figure class="wp-block-image aligncenter">.
   Samej figurze rdzen daje tylko display:table, czyli zwezenie do szerokosci
   tresci - i bez marginesow zostawia ja przy lewej krawedzi.
   .mkkk-page-content zadnej klasy ukladu nie ma (patrz komentarz przy alignwide),
   wiec te trzy linie sa jedynym miejscem, w ktorym wyrownanie w ogole dziala.
   Obraz WEWNATRZ bloku Grupa dzialal juz wczesniej, bo
   <div class="wp-block-group is-layout-flow"> dostarcza klase ukladu i regula
   rdzenia lapie. Brakowalo wylacznie NAJWYZSZEGO poziomu tresci strony. */
.mkkk-page-content>.aligncenter{margin-inline:auto}
.mkkk-page-content>.alignleft{float:left;margin-inline:0 2em}
.mkkk-page-content>.alignright{float:right;margin-inline:2em 0}
.mkkk-page-content h1,.mkkk-page-content h2,.mkkk-page-content h3,.mkkk-page-content h4{margin-block:2em .6em;line-height:1.1}
.mkkk-page-content>h1:first-child,.mkkk-page-content>h2:first-child,.mkkk-page-content>h3:first-child{margin-block-start:0}
.mkkk-page-content h1{font-size:var(--fs-h2)}
.mkkk-page-content h2{font-size:clamp(24px,2.6vw,34px);padding-block-end:.3em;border-bottom:2px solid var(--line)}
.mkkk-page-content h3{font-size:clamp(19px,1.8vw,24px)}
.mkkk-page-content h4{font-size:16px;letter-spacing:.05em;color:var(--muted)}
.mkkk-page-content p{margin-block:0 1.1em}
.mkkk-page-lede{font-size:19px;line-height:1.55;color:var(--muted)}
.mkkk-page-content a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.mkkk-page-content a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.mkkk-page-content strong{font-weight:700;color:var(--navy)}
.mkkk-page-content em{font-style:italic}
.mkkk-page-content ul,.mkkk-page-content ol{margin-block:0 1.25em;padding:0;list-style:none}
.mkkk-page-content ul>li{padding-inline-start:1.4em;position:relative;margin-block-end:.45em}
.mkkk-page-content ul>li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:2px;background:var(--accent)}
.mkkk-page-content ol{counter-reset:mkkk-ol}
.mkkk-page-content ol>li{counter-increment:mkkk-ol;padding-inline-start:2.2em;position:relative;margin-block-end:.55em}
.mkkk-page-content ol>li::before{content:counter(mkkk-ol,decimal-leading-zero);position:absolute;left:0;top:.15em;font-family:var(--f-mono);font-size:.75em;letter-spacing:.06em;color:var(--accent)}
.mkkk-page-content li>ul,.mkkk-page-content li>ol{margin-block:.35em 0}
.mkkk-page-content hr{border:0;border-top:1px solid var(--line-2);margin-block:2.5rem;max-width:72ch}
.mkkk-page-content blockquote{margin-inline:0;padding:1.25rem 1.5rem;border-inline-start:3px solid var(--belt);background:var(--paper);border-radius:0 var(--r-sm) var(--r-sm) 0;font-style:italic;color:var(--muted)}
.mkkk-page-content blockquote p{margin:0;color:inherit}
.mkkk-post-meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Tables (e.g. /platnosci/) */
.mkkk-page-content .mkkk-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-block:1.75rem;border-radius:var(--r-sm);border:1px solid var(--line)}
.mkkk-page-content table{width:100%;border-collapse:collapse;font-size:15px;background:#fff;color:var(--text);display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-sm)}
@media (min-width:640px){.mkkk-page-content table{display:table;overflow-x:visible}
.mkkk-page-content thead th{white-space:nowrap}
.mkkk-page-content tbody td:last-child,.mkkk-page-content tbody td:nth-child(2){white-space:nowrap}}
.mkkk-page-content thead th{font-family:var(--f-display);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);background:var(--paper);border-bottom:2px solid var(--line-2);padding:.75rem 1.25rem;text-align:left}
.mkkk-page-content thead th:last-child,.mkkk-page-content thead th:nth-child(2){text-align:right}
.mkkk-page-content tbody td{padding:.7rem 1.25rem;border-bottom:1px solid var(--line);vertical-align:middle}
.mkkk-page-content tbody td:last-child,.mkkk-page-content tbody td:nth-child(2){text-align:right;font-family:var(--f-mono);font-size:.92em;letter-spacing:.03em;color:var(--navy)}
.mkkk-page-content tbody tr:nth-child(even) td{background:var(--paper)}
.mkkk-page-content tbody tr:last-child td{border-bottom:0}

/* CTA buttons typed into page content (/zapisy/: .mkkk-btn) */
.mkkk-page-content .mkkk-btn,.mkkk-page-content a.mkkk-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;background:var(--accent);color:#fff;font-family:var(--f-ui);font-weight:600;font-size:14px;letter-spacing:.02em;text-transform:none;text-decoration:none;border:1.5px solid transparent;border-radius:var(--r-pill);cursor:pointer;transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);margin-block:.5rem 1.25rem}
.mkkk-page-content .mkkk-btn:hover,.mkkk-page-content a.mkkk-btn:hover{background:var(--accent-700);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(197,55,43,.28);text-decoration:none}
.mkkk-page-content .mkkk-btn--ghost,.mkkk-page-content a.mkkk-btn--ghost{background:transparent;color:var(--navy);border-color:var(--line-2)}
.mkkk-page-content .mkkk-btn--ghost:hover,.mkkk-page-content a.mkkk-btn--ghost:hover{background:var(--belt);color:#fff;border-color:var(--belt);box-shadow:none}

/* Info card inside content */
.mkkk-page-content .mkkk-info-card{background:var(--paper);border:1px solid var(--line);border-inline-start:3px solid var(--belt);border-radius:var(--r-sm);padding:1.5rem 1.75rem;margin-block:1.75rem;max-width:72ch}
.mkkk-page-content .mkkk-info-card p:last-child{margin-block-end:0}

/* Text result card (search.php) + pagination.
   NOTE: the posts page and the archives no longer use .mkkk-post-card. Since
   home.php they show .news-card tiles (see the "News" section above). This
   card stays with the search results, which list PAGES as well as posts —
   there a tile with a category tag and a cover image would promise a news
   item that does not exist. */
.mkkk-post-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin-block-end:18px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.mkkk-post-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.mkkk-post-card h2{font-size:clamp(22px,2.4vw,30px);margin:0 0 6px}
.mkkk-post-card h2 a{color:var(--navy)}
.mkkk-post-card h2 a:hover{color:var(--accent)}
.mkkk-post-card p{color:var(--muted)}
.mkkk-page-content .mkkk-post-card{max-width:none}

/* Listing shell (home.php, index.php). The grid sits OUTSIDE
   .mkkk-page-content on purpose: that wrapper caps every child at 72ch (prose
   measure), which would squeeze a three-column grid into one narrow column.
   The editor's intro IS prose, so it keeps .mkkk-page-content and only drops
   its bottom padding — the gap down to the tiles is then set in one place,
   and a page with no intro leaves no gap at all because the wrapper is not
   printed. */
.mkkk-blog{padding-block:clamp(2.5rem,4vw,4.5rem)}
.mkkk-blog__intro{padding-block-end:0}
.mkkk-blog__none{margin:0;font-size:16px;color:var(--muted)}
.pagination,.nav-links{display:flex;flex-wrap:wrap;gap:8px;margin-block:24px}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-family:var(--f-mono);font-size:13px;color:var(--navy)}
a.page-numbers:hover{background:var(--belt);color:#fff;border-color:var(--belt)}
/* Focus ring on its own line, not merged into :hover: the pointer state may
   later change colour without dragging the keyboard state with it. --accent,
   like every other focus ring in this theme. */
a.page-numbers:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Current page is a <span aria-current="page">, not a link: filled, heavier,
   and it does not react to the pointer. */
.page-numbers.current{background:var(--belt);color:#fff;border-color:var(--belt);font-weight:700}
/* The ellipsis is not a control — a bordered pill around "…" reads as a
   dead button. */
.page-numbers.dots{min-width:auto;padding-inline:6px;border-color:transparent}
/* .pagination and .nav-links share the block above, and WordPress nests the
   second inside the first, so the 24px margin was paid TWICE (48px above and
   below the row). The outer <nav> keeps it. */
.pagination .nav-links{margin-block:0}

/* Search form */
.mkkk-searchform{display:flex;gap:8px;max-width:480px}
.mkkk-searchform input[type="search"]{flex:1;padding:10px 16px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:#fff;color:var(--text)}
.mkkk-searchform .mkkk-btn{display:inline-flex;align-items:center;padding:10px 20px;background:var(--belt);color:#fff;border-radius:var(--r-pill);font-family:var(--f-ui);font-weight:600;font-size:14px}
.mkkk-searchform .mkkk-btn:hover{background:var(--belt-600)}

/* ---- 404 i wyniki wyszukiwania ------------------------------------------- */
/* Obie strony byly do 2026-08-12 slepymi zaulkami: spadaly na szablon listy
   wpisow, pokazywaly naglowek "Aktualnosci" i ZERO odnosnikow w tresci.
   Lista wyjsc jest ulozona wedlug tego, po co ludzie przychodza, a nie wedlug
   struktury serwisu. */
.mkkk-404__title{font-size:clamp(20px,2.2vw,26px);margin:36px 0 16px}
.mkkk-404__links{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:60ch}
.mkkk-404__links li{display:flex;flex-direction:column;gap:3px;padding-block:12px;border-top:1px solid var(--line)}
.mkkk-404__links li:last-child{border-bottom:1px solid var(--line)}
.mkkk-404__links a{font-family:var(--f-ui);font-weight:600;font-size:17px;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.mkkk-404__links a:hover{color:var(--accent)}
.mkkk-404__links span{font-size:14.5px;color:var(--muted)}
/* Nawigacja pod wpisem. Wpisy byly slepymi zaulkami: zero odnosnikow w tresci. */
.mkkk-post-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-block:44px 8px;align-items:stretch}
.mkkk-post-nav__item{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:border-color .2s var(--ease)}
.mkkk-post-nav__item:hover{border-color:var(--line-2)}
.mkkk-post-nav__item--next{text-align:right}
.mkkk-post-nav__dir{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mkkk-post-nav__title{font-family:var(--f-ui);font-weight:600;font-size:16px;color:var(--navy);line-height:1.3}
.mkkk-post-nav__item:hover .mkkk-post-nav__title{color:var(--accent)}
.mkkk-post-nav__all{grid-column:1/-1;justify-self:center;margin-top:6px;font-family:var(--f-ui);font-weight:600;font-size:15px;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.mkkk-post-nav__all:hover{color:var(--accent)}
@media (max-width:620px){.mkkk-post-nav{grid-template-columns:1fr}.mkkk-post-nav__item--next{text-align:left}}
.mkkk-search-results{margin-top:28px}
.mkkk-search-none{margin:28px 0 16px;font-size:16px;color:var(--muted)}
.mkkk-post-excerpt{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}

/* ---- /oferta/ (template classes kept, light skin) ----------------------- */
.mkkk-oferta-hero{background:var(--belt);color:#fff;position:relative;overflow:hidden;padding-block:64px 56px}
.mkkk-oferta-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 85% 0%,rgba(197,55,43,.18),transparent 60%)}
.mkkk-oferta-hero .mkkk-container{position:relative;z-index:1}
.mkkk-oferta-hero__kanji{display:block;font-size:22px;letter-spacing:.4em;color:rgba(255,255,255,.55);margin-bottom:18px}
.mkkk-oferta-hero .eyebrow{color:rgba(255,255,255,.72);margin-bottom:16px}
.mkkk-oferta-hero__title{color:#fff;font-size:clamp(40px,6vw,72px);line-height:.94;margin:8px 0 24px}
.mkkk-oferta-hero__lede,.mkkk-oferta-hero__intro{font-size:18px;line-height:1.55;color:rgba(255,255,255,.82);max-width:680px}
.mkkk-oferta-hero__intro>:last-child{margin-bottom:0}
/* WSTEP NIESIE DZIS NIE TYLKO PROZE (2026-08-18): stoja w nim trzy filmy z
   YouTube. 680px to MIARA CZYTANIA i ma zostac przy tekscie, ale rzad filmow
   zamkniety w tej samej szerokosci schodzi do trzech kadrow po ~210px, na
   ktorych nie widac nic. Zdejmujemy wiec ograniczenie z KONTENERA i wieszamy
   je z powrotem na tym, co naprawde jest tekstem - dzieki temu rzad filmow
   bierze cala szerokosc `.mkkk-container` (1200px), a akapity sie nie ruszaja.
   Selektor po RODZAJU DZIECKA, nie po klasie: wstep jest edytowalny i redaktor
   nie ma powodu znac zadnej klasy CSS (ta sama zasada, co przy znakach gmin
   i przy pasie dofinansowania). */
.mkkk-oferta-hero__intro{max-width:none}
.mkkk-oferta-hero__intro>p,.mkkk-oferta-hero__intro>ul,.mkkk-oferta-hero__intro>ol,.mkkk-oferta-hero__intro>blockquote{max-width:680px}
.mkkk-oferta-hero__intro .wp-block-columns{margin-top:36px;margin-bottom:0}
.mkkk-oferta-hero__intro .wp-block-embed{margin:0}
/* Podpis pod filmem czyta sie jako etykieta, nie jako druga proza: mniejszy
   i przygaszony, zeby nie konkurowal z akapitem wstepu nad nim. */
.mkkk-oferta-hero__intro figcaption{margin:10px 0 0;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.66);text-align:left}
/* Odnosnik we wstepie /oferta/. Globalne `a{color:var(--navy)}` to GRANAT
   #152341, a to pasmo stoi na tle --belt #0e0e0f: kontrast 1,24:1, czyli link
   praktycznie niewidoczny — i bez podkreslenia, bo globalne `a` je zdejmuje.
   Bialy + podkreslenie to ta sama decyzja, co juz w naglowku podstron
   (.mkkk-page-header .mkkk-oferta-hero__lede a). Podkreslenie zostaje: kolor
   sam nie moze byc jedynym nosnikiem informacji „to jest odnosnik".
   Wstep jest EDYTOWALNY (Gutenberg), wiec regula musi lapac dowolny link,
   ktory redaktor tam wstawi — stad selektor na kontenerze, nie na klasie. */
.mkkk-oferta-hero__lede a,.mkkk-oferta-hero__intro a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.mkkk-oferta-hero__lede a:hover,.mkkk-oferta-hero__intro a:hover{color:#fff;text-decoration-thickness:2px}
.mkkk-oferta-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.mkkk-oferta-jump__chip{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.35);color:#fff;padding:8px 16px;border-radius:var(--r-pill);font-size:11px;letter-spacing:.06em;text-transform:uppercase;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.mkkk-oferta-jump__chip:hover{background:#fff;color:var(--navy);border-color:#fff}
.mkkk-oferta-list{background:var(--white);padding-block:40px 80px}
.mkkk-oferta-card{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:40px;align-items:stretch;padding:40px 0;border-top:1px solid var(--line);scroll-margin-top:130px}
.mkkk-oferta-card:first-child{border-top:0}
/* align-self:start JEST KONIECZNE, nie kosmetyczne.
   Karta to grid z domyslnym align-items:stretch, wiec bez tego kafelek obrazu
   dostaje wysokosc CALEGO WIERSZA, czyli wysokosc kolumny tekstowej. Wysokosc
   staje sie wtedy okreslona z zewnatrz i `aspect-ratio` przestaje obowiazywac:
   proporcja 4/3 dziala tylko dopoki wysokosc nie jest narzucona.
   Skutek byl widoczny dokladnie tam, gdzie tekst urosl - na kartach dyscyplin
   bez terminu probnego, ktorym straznik CTA dokłada zdanie z powodem. Obrazy
   na nich robily sie wyzsze i inaczej kadrowane niz na pozostalych. */
.mkkk-oferta-card__media{position:relative;align-self:start;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r)}
.mkkk-oferta-card__media img{width:100%;height:100%;object-fit:cover}
.mkkk-oferta-card__placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,#e7e2d8 0 14px,#f1ede4 14px 28px)}
.mkkk-oferta-card__placeholder .jp{font-size:64px;line-height:1;color:var(--navy);opacity:.35}
.mkkk-oferta-card__placeholder .mono{font-size:40px;color:var(--navy-300)}
.mkkk-oferta-card__body{display:flex;flex-direction:column;gap:12px;align-self:center}
.mkkk-oferta-card__num{font-size:11px;letter-spacing:.14em;color:var(--muted)}
.mkkk-oferta-card__title{font-size:clamp(28px,3vw,42px);line-height:1.02;color:var(--navy)}
.mkkk-oferta-card__age{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0;font-family:var(--f-mono)}
.mkkk-oferta-card__blurb{font-size:15.5px;line-height:1.6;color:var(--muted);max-width:620px;margin:4px 0 8px}
.mkkk-oferta-card__actions{display:flex;flex-wrap:wrap;gap:12px}
/* Etykieta przycisku karty jest EDYTOWALNA (panel grafiku, kolumna
   "Przycisk na /oferta/"), wiec moze byc dluga. .btn ma white-space:nowrap
   (linia 190), a zaden przodek karty nie ma overflow-x:hidden, wiec dluga
   etykieta nie zawija sie, tylko rozpycha karte i wypycha CALA strone
   w poziomy scroll na telefonie. Zdejmujemy nowrap tylko tutaj. */
.mkkk-oferta-card__actions .btn{white-space:normal;text-align:center;max-width:100%}
/* Zdanie nad przyciskami, tez z panelu. Ograniczone szerokoscia, bo w karcie
   na desktopie ciagnelo sie na cala kolumne i przestawalo byc czytelne. */
.mkkk-oferta-card__note{margin:0 0 14px;max-width:620px;color:var(--c-muted,#5b6470);font-size:15px;line-height:1.55}
/* Przycisk "Napisz do nas" na karcie prowadzi kotwica prosto na formularz
   kontaktu. Bez tego naglowek strony (sticky) przykrywa pierwsze pole. */
#mkkk-contact-form{scroll-margin-top:130px}
.mkkk-oferta-empty{color:var(--muted);font-size:var(--fs-lede)}
@media (max-width:820px){
  .mkkk-oferta-hero{padding-block:48px 36px}
  .mkkk-oferta-card{grid-template-columns:1fr;gap:20px;padding:28px 0}
}

/* ---- Old CTA band classes (page-oferta.php) - navy card skin ------------ */
.mkkk-cta-band{background:var(--white);padding-block:0 88px;position:relative;scroll-margin-top:90px}
.mkkk-cta-band__inner.mkkk-container{position:relative;background:var(--belt);color:#fff;border-radius:var(--r);overflow:hidden;padding:64px;display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;max-width:calc(var(--maxw) - 48px)}
.mkkk-cta-band__kanji-bg{display:none}
.mkkk-cta-band__inner::after{content:"入会";position:absolute;right:36px;bottom:-30px;font-family:var(--f-jp);font-size:200px;line-height:1;color:#fff;opacity:.05;pointer-events:none}
.mkkk-cta-band__left{display:flex;flex-direction:column;gap:18px}
.mkkk-cta-band__lead-kanji{font-size:20px;letter-spacing:.25em;color:rgba(255,255,255,.6)}
.mkkk-cta-band__title{color:#fff;font-size:clamp(36px,5vw,58px);line-height:.95;margin:0}
.mkkk-cta-band__right{display:flex;flex-direction:column;gap:24px;position:relative;z-index:1}
.mkkk-cta-band__steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.mkkk-cta-band__steps li{display:flex;align-items:center;gap:16px;font-family:var(--f-ui);font-weight:500;font-size:17px;color:#fff}
.mkkk-cta-band__step-num{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:700;font-size:15px}
.mkkk-cta-band__actions{display:flex;gap:12px;flex-wrap:wrap}
.mkkk-cta-band__btn--primary{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;padding:16px 30px;border-radius:var(--r-pill);font-family:var(--f-ui);font-weight:600;font-size:15px;transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)}
.mkkk-cta-band__btn--primary:hover{background:var(--accent-700);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(197,55,43,.35)}
@media (max-width:820px){
  .mkkk-cta-band{padding-block:0 60px}
  .mkkk-cta-band__inner.mkkk-container{grid-template-columns:1fr;gap:32px;padding:40px 24px;max-width:calc(100% - 36px)}
}

/* ---- Trainers: archive/single templates (mkkk-trainer-card classes) ----- */
.mkkk-trainers{background:var(--white);padding-block:72px}
.mkkk-trainers__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;padding:0;margin:0}
.mkkk-trainer-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.mkkk-trainer-card:hover{border-color:var(--belt);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.mkkk-trainer-card__image{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);border-bottom:1px solid var(--line)}
.mkkk-trainer-card__image img{width:100%;height:100%;object-fit:cover}
.mkkk-trainer-card__placeholder{width:100%;height:100%;background:repeating-linear-gradient(135deg,#e7e2d8 0 14px,#f1ede4 14px 28px)}
.mkkk-trainer-card__info{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}
.mkkk-trainer-card__rank{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.mkkk-trainer-card__name{font-size:21px;color:var(--navy);line-height:1.12;margin:0}
/* Nazwisko trenera jest odnosnikiem na profil (patrz archive-mkkk_trener.php).
   Dziedziczy kolor naglowka, zeby siatka nie zmienila sie w sciane niebieskich
   linkow; podkreslenie pojawia sie dopiero pod kursorem i na focusie, ale sam
   focus MUSI byc widoczny, bo to jedyne wejscie na te podstrony z klawiatury. */
/* Podkreslenie jest STALE, tylko wyciszone. Bez zadnego sygnalu w spoczynku
   nazwisko wygladalo dokladnie jak naglowek, ktorym bylo wczoraj: uzytkownik
   myszy dowiadywal sie o odnosniku przypadkiem, a uzytkownik dotyku nie ma
   :hover w ogole. To bylaby odwrotnosc tej samej szkody, ktora naprawiamy
   w legendzie grafiku (cos wyglada na klikalne i nie jest). */
.mkkk-trainer-card__name a,.trainer h3 a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1px;text-underline-offset:4px}
.mkkk-trainer-card__name a:hover,.trainer h3 a:hover{color:var(--accent);text-decoration-color:currentColor;text-decoration-thickness:2px}
.mkkk-trainer-card__name a:focus-visible,.trainer h3 a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;text-decoration:underline}
.mkkk-trainer-card__role{font-size:13.5px;color:var(--muted);margin:0}
.mkkk-trainer-card__bio{font-size:13.5px;line-height:1.5;color:var(--muted);margin:4px 0 0}
.mkkk-page-content .mkkk-trainer-card__image{max-width:320px;border:1px solid var(--line);border-radius:var(--r);margin-block-end:1.5rem;aspect-ratio:4/5}
/* Pusty stan archiwum trenerow: klasa .mkkk-oferta-hero__lede (bialy tekst)
   reuzyta na bialym tle .mkkk-trainers - nadpisz na czytelny muted. */
.mkkk-trainers .mkkk-oferta-hero__lede{color:var(--muted)}

/* ---- Schedule plugin bridge (page /zajecia/) ----------------------------
   Written when the schedule shipped assets/css/schedule.css and rendered the
   collective [mkkk_schedule] grid, with chips sitting on the page background:
   these rules restyled them to the day-filter look.

   THAT VIEW IS GONE and so is schedule.css, removed with it (see the header of
   the plugin's includes/grafik/shortcode-schedule.php: the shortcode now
   redirects to the hub or to one section's weekly grid). Measured 2026-08-14:
   .mkkk-schedule, .mkkk-chip and .mkkk-schedule__grid-wrap are emitted by
   nothing - not by the plugin, not by its JS, not by any seeded post_content.
   Only .mkkk-dojo-map below is still rendered (single-dojo.php:295).

   Left in place rather than deleted, because deleting CSS is not a comment
   fix and .mkkk-schedule is the kind of class an editor can have typed into a
   block. Whoever removes it should grep the live wp_posts first, not just this
   repository. */
.mkkk-schedule{margin-block:2rem}
.mkkk-chip{border:1px solid var(--line-2);color:var(--navy);background:#fff;border-radius:var(--r-pill)}
.mkkk-chip:hover{background:#fff;border-color:var(--belt);color:var(--navy)}
.mkkk-chip.is-active{background:var(--belt);color:#fff;border-color:var(--belt);font-weight:500}
.mkkk-schedule__grid-wrap{box-shadow:var(--shadow-sm)}
.mkkk-dojo-map{background:var(--paper)}

/* ---- Forms: contact page + login (light system) ------------------------
   the contact module prints light-mode inline styles that now match the page.
   Here: only the pieces it leaves unstyled (bare inputs/submit in
   page-content forms, wp_login_form's bare .button) get the system look. */
.mkkk-form label{font-weight:600;color:var(--navy)}
.mkkk-page-content .mkkk-form input[type="text"],
.mkkk-page-content .mkkk-form input[type="email"],
.mkkk-page-content .mkkk-form textarea,
.mkkk-login input[type="text"],
.mkkk-login input[type="password"],
.mkkk-form input,
.mkkk-form select,
.mkkk-form textarea{background:#fff;color:var(--text);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.55rem .75rem}
.mkkk-form input:focus,.mkkk-form select:focus,.mkkk-form textarea:focus,
.mkkk-login input[type="text"]:focus,.mkkk-login input[type="password"]:focus{outline:none;border-color:var(--belt);box-shadow:0 0 0 3px rgba(21,35,65,.12)}
.mkkk-form input:invalid{border-color:var(--accent-700)}
.mkkk-form button[type="submit"],
.mkkk-login input[type="submit"],
.mkkk-login .button{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:1.5px solid transparent;border-radius:var(--r-pill);padding:12px 24px;font-family:var(--f-ui);font-weight:600;font-size:14px;cursor:pointer;transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.mkkk-form button[type="submit"]:hover,
.mkkk-login input[type="submit"]:hover,
.mkkk-login .button:hover{background:var(--accent-700);transform:translateY(-2px);box-shadow:0 10px 24px rgba(197,55,43,.28)}
.mkkk-login label{color:var(--navy);font-weight:600}
.mkkk-contact-notice{font-size:15px}

/* ============================ RESPONSIVE ================================= */
@media (max-width:1080px){
  .loc-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .mkkk-trainers__grid{grid-template-columns:repeat(2,1fr)}
  .offer-grid{grid-template-columns:repeat(2,1fr)}
  /* T2: burger juz od 1080 - belka nav nie miesci sie w 961-1080 (overflow
     -> poziomy scroll calej strony). Potwierdzone zrzutem @1000 (bialy pasek). */
  .nav,.nav-phone{display:none}
  .burger{display:flex}
}
/* PASMO SLEPE ZNAKU DOFINANSOWANIA, 1081-1200 px.
   Ta regula ma TA SAMA specyficznosc (0,1,0) co bazowa .brand-fund i wygrywa
   WYLACZNIE kolejnoscia w pliku - dlatego stoi tutaj, w sekcji RESPONSIVE, po
   bloku max-width:1080px. Nie przenosic wyzej, obok reguly bazowej.

   CO KOSZTUJE ZNAK, z liczb z tego arkusza (jedyna arytmetyka, ktora da sie tu
   sprawdzic bez przegladarki): slot w .nav-inner to szerokosc .brand-fund w
   border-box plus gap .brand-row, czyli 67,92 obrazu + 14 padding + 1 kreska +
   14 gap = 96,9px. Tyle miejsca musi zostac w wierszu, zeby znak wszedl.

   ILE MIEJSCA ZOSTAJE - CELOWO BEZ LICZB. Szerokosci .nav i .nav-actions zaleza
   od liczby i dlugosci pozycji menu, czyli od tresci w wp-admin, a nie od tego
   arkusza. Stala tu wpisana zgnilaby przy pierwszej zmianie menu i klamalaby
   glosniej, niz gdyby jej nie bylo (poprzednia wersja tego komentarza podawala
   trzy takie liczby i zadnej z nich nie dalo sie potwierdzic). Mierz w
   przegladarce, gdy bedzie trzeba, i nie zapisuj wyniku tutaj.

   Zostaje sam wniosek, ktory od liczb nie zalezy:
   - Ponizej 1081px menu i telefon znikaja pod hamburger, miejsca jest duzo i
     znak wraca - o to prosil wlasciciel.
   - W pasmie 1081-1200px menu jest juz poziome, a wiersz ciasny: znak sie tam
     nie miesci i dlatego go chowamy. Gorna granice rownamy z --maxw (1200), bo
     powyzej niej kontener przestaje rosnac.
   - Dziura NIE ZALEZY od rozmiaru znaku: zmniejszenie go przesuwa granice o
     kilkanascie px i pasma nie kasuje.
   - Gdy przyjdzie siodma pozycja menu poziomego, przesun prog hamburgera w gore,
     a NIE zmniejszaj znaku. */
@media (min-width:1081px) and (max-width:1200px){
  .brand-fund{display:none}
}
@media (max-width:960px){
  .section{padding:76px 0}
  .section.section--tight{padding:56px 0}
  .cta-grid{grid-template-columns:1fr;gap:36px}
  .cta .cta-grid.wp-block-group{grid-template-columns:1fr;gap:36px}
  .cta{padding:52px 32px}
  .footer-cols{grid-template-columns:1fr 1fr;gap:32px}
  .offer-grid,.news-grid{grid-template-columns:repeat(2,1fr)}
  .info-cards{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .stat:nth-child(3){border-left:0}
}
/* UWAGA: padding .wrap i prog 620px wchodza do budzetu znakow motta (limit 17
   na telefonie). Zmiana wymaga przeliczenia w includes/naglowek.php; bramka
   "Naglowek: metryki paska" w smoke-test.sh porownuje oba miejsca. */
@media (max-width:620px){
  .wrap{padding-inline:18px}
  .mkkk-container{padding-inline:18px}
  .brand-logo{height:36px}
  /* Cap wg wzoru z reguly bazowej: 36px wysokosci -> 50,94px obrazu + 15 = 65,94. */
  .brand-fund{max-width:70px}
  .brand-fund img{height:36px}
  .section{padding:60px 0}
  .section.section--tight{padding:44px 0}
  .topbar-motto,.topbar-motto-md{display:none}
  .topbar-motto-sm{display:inline-block}
  .info-cards{grid-template-columns:1fr;gap:12px}
  .info-row{margin-top:-40px}
  .offer-grid,.news-grid,.loc-grid,.team-grid,.stats,.mkkk-trainers__grid{grid-template-columns:1fr}
  .stat{border-left:0;border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:0}
  .s-head{margin-bottom:36px}
  .loc-meta{grid-template-columns:1fr}
  .loc-meta .cell{border-left:0;border-top:1px solid var(--line)}
  .loc-meta .cell:first-child{border-top:0}
  .hero-cta .btn{flex:1;justify-content:center}
  .hero-cta .wp-block-button{flex:1 1 100%}
  .hero-cta .wp-block-button__link{width:100%;justify-content:center}
  .sec-more .btn{width:100%;justify-content:center}
  .sec-more .wp-block-button{flex:1 1 100%}
  .sec-more .wp-block-button__link{width:100%;justify-content:center}
  .social-cta__fb{width:100%;justify-content:center}
  .nav-actions .btn{display:none}
  .footer-cols{grid-template-columns:1fr}
  .footer-bar{flex-direction:column;gap:8px;align-items:flex-start}
  .cta{padding:40px 24px}
  .tt-toolbar{flex-direction:column;align-items:flex-start}
  .day-filter button{padding:11px 14px;min-height:44px}
}

/* timetable -> stacked day list on narrow screens */
@media (max-width:760px){
  .ttw{overflow:visible}
  .ttw-head{display:none}
  .ttw-body{display:block;min-width:0}
  .ttw-axis{display:none}
  .ttw-col{height:auto!important;background:none;border-radius:0;border-bottom:1px solid var(--line);padding:6px 0 16px}
  .ttw-col:last-child{border-bottom:0}
  .ttw-col.is-hidden{display:none}
  .ttw-col .slot{position:static!important;top:auto!important;height:auto!important;left:auto;right:auto;margin-bottom:10px;padding:12px 13px}
  .ttw-col .tt-day-label{display:flex;position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:20px;text-transform:uppercase;color:var(--navy);margin:6px 0 12px}
  .ttw-col .tt-day-label::after{content:"";flex:1;height:1px;background:var(--line)}
}

/* ---- Mobile off-canvas menu (toggled by assets/js/main.js) -------------- */
.mnav{position:fixed;inset:0;z-index:200;background:rgba(14,24,48,.5);opacity:0;visibility:hidden;transition:opacity .22s var(--ease),visibility .22s}
.mnav.open{opacity:1;visibility:visible}
.mnav-panel{position:absolute;top:0;right:0;height:100%;width:min(360px,86vw);background:#fff;box-shadow:-20px 0 60px rgba(14,24,48,.25);transform:translateX(100%);transition:transform .26s var(--ease);display:flex;flex-direction:column;overflow-y:auto}
.mnav.open .mnav-panel{transform:none}
@media (prefers-reduced-motion: reduce){.mnav,.mnav-panel{transition:none}}
.mnav-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.mnav-close{width:42px;height:42px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--navy)}
.mnav-close:hover{background:var(--paper)}
.mnav-close svg{width:22px;height:22px}
.mnav-list{padding:12px 12px 20px;list-style:none;margin:0}
.mnav-list>li>a,.macc-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 14px;font-family:var(--f-ui);font-weight:600;font-size:16px;text-transform:uppercase;letter-spacing:.03em;color:var(--navy);border-radius:var(--r-sm)}
.mnav-list>li>a:hover,.macc-btn:hover{background:var(--paper)}
.macc-btn .caret{width:12px;height:12px}
.macc-panel{display:none;padding:2px 8px 10px}
.macc-panel.open{display:block}
.macc-panel a{display:block;padding:11px 16px;font-family:var(--f-body);font-weight:500;font-size:14.5px;text-transform:none;letter-spacing:0;color:var(--text);border-radius:var(--r-sm)}
.macc-panel a:hover{background:var(--paper);color:var(--navy)}
.macc-btn .caret{transition:transform .2s var(--ease)}
.macc-btn.open .caret{transform:rotate(180deg)}
/* ---- Trzeci poziom na mobile: akordeon w akordeonie ----------------------
   Walker wypisuje .macc--sub z wlasnym .macc-btn i .macc-panel obok siebie,
   wiec main.js obsluguje go bez linijki nowego kodu (wiaze KAZDY .macc-btn
   i przelacza nastepne rodzenstwo). Zostaje wylacznie odroznienie wizualne:
   naglowek zagniezdzony ma byc cichszy od pozycji paska, inaczej trzy poziomy
   krzycza jednakowo i hierarchia znika. */
.macc-panel .macc-btn{padding:12px 16px;font-size:14.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--navy)}
.macc-panel .macc-panel{padding:0 0 4px 14px;border-left:2px solid var(--line)}
.macc-panel .macc-panel a{font-size:14px}
.mnav-cta{display:flex;flex-direction:column;gap:10px;padding:16px 20px;margin-top:auto;border-top:1px solid var(--line)}
.mnav-cta .btn{justify-content:center}
/* The <=960px rule hides .nav-phone in the header bar; the copy inside the
   off-canvas CTA block must stay visible (prototype had this bug). */
.mnav-cta .nav-phone{display:inline-flex;justify-content:center}

/* Rodzic rozwijanej listy jest <button>, nie linkiem (patrz walkers.php).
   Reset domyslnych stylow przegladarki, zeby wygladal identycznie jak sasiednie
   pozycje, oraz kursor mowiacy, ze to przelacznik a nie przejscie. */
/* Rodzic rozwijanej listy nie potrzebuje WLASNEJ reguly resetu: globalne
   `button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}`
   (sekcja resetu wyzej) juz to robi, a wyglad bierze z reguly wspolnej dla
   .nav>ul>li>a. Wczesniej stala tu kopia tego resetu i to ona psula krój:
   `font:inherit` w regule o WYZSZEJ specyficznosci nadpisywalo font-family,
   font-weight i font-size z reguly wspolnej, wiec przycisk dziedziczyl krój
   z <body> i wizualnie odstawal od sasiednich pozycji paska.
   Zostaje wylacznie stan otwarcia. */
.nav>ul>li>.nav-drop-btn[aria-expanded="true"]{color:var(--accent);background:var(--paper)}

/* Kapitaliki wylacznie na glownych kafelkach paska; pozycje w srodku list
   maja zwykla czcionke - regula .drop a wyzej juz to ustawia (text-transform:none).
   Jedyny realny problem byl w BAZIE: pozycja menu miala tytul zapisany
   wersalikami ("PLATNOSCI"), co CSS slusznie zostawial w spokoju. */

/* ============================================================
   C4: strona glowna jako EDYTOWALNE bloki (hero i dalsze sekcje).
   Mapuje core-bloki w kontekscie sekcji home na wyglad frontu,
   zeby tresc byla edytowalna w Gutenbergu (nie w PHP), a wygladala 1:1.
   ============================================================ */
/* Watermark jako core/paragraph (ta sama klasa co dawny div) - zeruj margines. */
.hero .hero-watermark{margin:0}
/* Home CTA (core/buttons) poza .mkkk-page-content (home nie ma tego wrappera):
   reset display+transition, ktorych wspolna .btn tam nie dosiega. Kolory/padding
   dostarczaja reguly per-sekcja nizej (hero-cta/sec-more/cta-actions).
   TYPOGRAFII (rodzina, waga, letter-spacing) TU NIE MA I MIEC NIE MA: dowozi ja
   jedna regula .wp-block-button__link z sekcji Buttons. Kazda sekcja miala ja
   wczesniej przepisana u siebie, hero jako ostatnie dopisane zapomnialo - i stad
   wzielo sie zgloszenie o "zlych polskich glyphach" (waga 400 zamiast 600).
   Kolejna sekcja z przyciskiem NIE POWTARZA tych trzech wlasciwosci. */
.hero-cta .wp-block-button__link,.sec-more .wp-block-button__link,.cta-actions .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;cursor:pointer;transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
/* Hero CTA: core/buttons jak .btn-lg; is-style-fill -> primary(accent), is-style-outline -> ghost. */
.hero-cta.wp-block-buttons{margin-top:4px}
.hero-cta .wp-block-button__link{padding:17px 32px;font-size:15px;border-radius:var(--r-pill)}
.hero-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link{background:var(--accent);color:#fff}
.hero-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{background:var(--accent-700);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(197,55,43,.28)}
.hero-cta .wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--navy);border:1.5px solid var(--line-2)}
.hero-cta .wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--belt);color:#fff;border-color:var(--belt)}
/* Hero wideo: core/video (figure) siedzi w core/group .hero-video-band (kontener
   pasma, position:relative). Figure bez marginesow bloku; wideo pozycjonuje
   regula .hero-video-band video wyzej (absolute inset:0, wypelnia pas). */
.hero-video-band .wp-block-video{margin:0}

/* --- batch: jak-zaczac + dolacz jako natywne bloki --- */
/* Sekcja z core/group.section: wyzeruj marginesy grup, zeby paddingi sekcji rzadzily. */
section.wp-block-group.section{margin-block:0}
.wp-block-group.wrap{margin-inline:auto}
/* jak-zaczac: .s-head--row jako core/group stackuje (domyslny layout core) - wymus 2-kol. */
.wp-block-group.s-head--row{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:40px}
.wp-block-group.s-head--row>*{margin:0}
.wp-block-group.s-head--row>.wp-block-group{flex:1 1 52%;min-width:min(100%,420px)}
.wp-block-group.s-head--row>.s-lede{flex:1 1 38%;min-width:min(100%,300px)}
/* Gole przyciski-duchy w naglowkach sekcji (Aktualnosci, Trenerzy): core/buttons
   jako BEZPOSREDNIE dziecko .s-head--row, bez klasy-haka -> styl .btn-ghost (pill).
   .sec-more (lokalizacje/jak-zaczac) to RODZENSTWO .s-head--row, wiec > ich nie tyka. */
.wp-block-group.s-head--row>.wp-block-buttons .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;font-size:14px;padding:14px 26px;border-radius:var(--r-pill);border:1.5px solid var(--line-2);background:transparent;color:var(--navy);text-decoration:none;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.wp-block-group.s-head--row>.wp-block-buttons .wp-block-button__link:hover{background:var(--belt);color:#fff;border-color:var(--belt)}
/* jak-zaczac: przycisk .sec-more core/button jako btn-navy btn-lg. */
.sec-more.wp-block-buttons{justify-content:center;margin-top:40px}
.sec-more .wp-block-button__link{padding:17px 32px;font-size:15px;border-radius:var(--r-pill);background:var(--belt);color:#fff}
.sec-more .wp-block-button__link:hover{background:var(--belt-600);color:#fff;transform:translateY(-2px)}
/* dolacz: siatka .cta-grid jako core/group (grid 2-kol jak oryginal). */
.cta-grid.wp-block-group{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.cta-grid.wp-block-group>*{min-width:0}
/* dolacz: kroki jako core/list w .cta - numerowane kolka przez licznik (zamiast .no/.tx). */
.cta .wp-block-list{list-style:none;padding:0;margin:0 0 26px;counter-reset:mkkk-step;display:flex;flex-direction:column;gap:14px}
.cta .wp-block-list li{counter-increment:mkkk-step;display:flex;align-items:center;gap:16px;font-family:var(--f-ui);font-weight:500;font-size:17px}
.cta .wp-block-list li::before{content:counter(mkkk-step);flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:700;font-size:17px}
/* dolacz: przycisk primary (accent) btn-lg. */
.cta-actions.wp-block-buttons{margin-top:0}
.cta-actions .wp-block-button__link{padding:17px 32px;font-size:15px;border-radius:var(--r-pill);background:var(--accent);color:#fff}
.cta-actions .wp-block-button__link:hover{background:var(--accent-700);color:#fff;transform:translateY(-2px)}
/* Opinie: sekcja uzywa widgetu TrustIndex (shortcode [trustindex]) - decyzja
   wlasciciela 2026-07-23 (odwrocenie odrzucenia RODO). Naglowek zostaje blokami,
   recenzje ida z TrustIndex, ktory niesie wlasny HTML i wlasne style. Motyw nie
   ma juz zadnych wlasnych regul opinii. */

/* NAJWEZSZE TELEFONY: czwarty, najkrotszy szczebel motta.
   Ponizej 430 px na motto zostaje 26 znakow, a przy 375 px juz tylko 19 —
   wiec „MKKK · SZKOLIMY od 1991" (23) by sie urwalo, a „MKKK · od 1991" (14)
   miesci sie z zapasem az do 360 px, czyli do podlogi projektowej.
   IKONY SOCIAL ZOSTAJA. Byly tu przez chwile chowane, zeby zrobic miejsce
   dluzszemu wariantowi; czwarty szczebel rozwiazal to inaczej i taniej,
   wiec ukrywanie wypadlo.
   Prog 430 jest pinowany bramka metryk paska. */
@media (max-width:430px){
  .topbar-motto-sm{display:none}
  .topbar-motto-xs{display:inline-block}
}

/* =========================================================
   PASMO DOFINANSOWAN (/zajecia/, grupa .mkkk-dofinansowania)
   =========================================================
   Znaki samorzadow wspolfinansujacych zajecia. Tresc siedzi w BLOKACH na
   stronie /zajecia/, wiec redaktor dodaje, podmienia i usuwa gminy sam
   w edytorze WP: wchodzi do grupy „Dofinansowania", wrzuca blok Obraz,
   wpisuje podpis. Nic wiecej.

   DLACZEGO SELEKTOR CELUJE W .wp-block-image, A NIE W WLASNA KLASE.
   Pierwsza wersja wisiala na klasie `mkkk-znak`, ktora redaktor musialby
   wpisywac recznie w „Dodatkowa klasa CSS" przy KAZDYM nowym herbie.
   Zapomniana klasa = herb bez slotu, czyli wielki obraz rozwalajacy rzad,
   i nikt nie wie dlaczego. Styl nalezy do MIEJSCA (grupa znakow), nie do
   pamieci redaktora.

   DLACZEGO TO NIE JEST BLOK GALERII. Rdzen WordPressa daje galerii podpis
   NA obrazie, na gradiencie, bialym tekstem, plus object-fit:cover:

     .wp-block-gallery.has-nested-images figure.wp-block-image figcaption
     { position:absolute; bottom:0; background:linear-gradient(...) }

   Dla herbow to najgorsze mozliwe zachowanie: napis lezy na godle, a korony
   i napisy sa przycinane do wspolnego prostokata. Specyficznosc tych
   selektorow (0,3,2) bije wszystko, co sensownie napisac w motywie.

   ROWNE ROZMIARY: kazdy znak dostaje SLOT o tej samej szerokosci i wysokosci,
   a obraz jest w niego wpisany przez object-fit:contain. Herby maja proporcje
   od 417x480 do 600x520 i bez wspolnego slotu stoja schodkami. */
.mkkk-dofinansowania{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.mkkk-dofinansowania h2{margin:0 0 8px}
.mkkk-dofinansowania > p{max-width:70ch;margin:0;color:var(--navy-300)}

/* WYSRODKOWANE, nie do lewej. Liczba gmin jest zmienna (redaktor dodaje
   i usuwa), wiec ostatni rzad prawie nigdy nie bedzie pelny: przy dosunieciu
   do lewej samotny herb wisi w pustce po prawej. Srodek trzyma sie sam
   niezaleznie od tego, czy gmin jest cztery, piec czy osiem. */
.mkkk-dofinansowania__znaki{display:flex;flex-wrap:wrap;justify-content:center;gap:32px 28px;margin-top:32px;align-items:flex-start}

.mkkk-dofinansowania__znaki .wp-block-image{flex:0 0 180px;margin:0;display:flex;flex-direction:column;align-items:center}
.mkkk-dofinansowania__znaki .wp-block-image img{width:100%;height:88px;object-fit:contain;display:block}
.mkkk-dofinansowania__znaki .wp-block-image figcaption{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--navy-300);text-align:center;text-wrap:pretty}

@media (max-width:620px){
  /* Dwa w rzedzie zamiast jednego: piec znakow jeden pod drugim to ekran
     przewijania za tresc, ktora jest przypisem, a nie trescia glowna. */
  .mkkk-dofinansowania__znaki{gap:26px 20px}
  .mkkk-dofinansowania__znaki .wp-block-image{flex:0 0 calc(50% - 10px)}
  .mkkk-dofinansowania__znaki .wp-block-image img{height:72px}
  .mkkk-dofinansowania__znaki .wp-block-image figcaption{font-size:12px}
}