/* =================================================================
   KS WESOŁA – łatki zgodności z WordPressem

   JEDYNY plik w motywie,
w którym wolno pisać nowy CSS.
   styles.css / sections.css / responsive.css to kopie 1:1 z mockupu –
   nie dotykamy ich,
żeby dało się je nadpisywać przy każdej zmianie projektu.

   Każda reguła niżej istnieje dlatego,
że WordPress wypisuje markup
   odrobinę inny niż mockup. Przy każdej opisane jest CO dokłada WP.
   ================================================================= */

/* ───────────────────────────────────────────
   1. SILNIK UKŁADU BLOKÓW

   WP wstrzykuje odstępy między blokami regułami
   `:where(body .is-layout-flow) > * {margin-block-start:24px}`.
   Całość siedzi w :where(),
więc ma specyficzność ZERO – reset mockupu
   `* {margin:0}` wygrywa z niej samą kolejnością (arkusze motywu są
   kolejkowane po global-styles,
patrz functions.php).

   Dlatego NIE ma tu żadnej reguły zbiorczej na marginesy. Wcześniejsza
   próba (`.wp-block-group > * {margin-block-end:0}`) była lekiem gorszym
   od choroby: miała wyższą specyficzność niż mockup i kasowała jego własne
   `margin-bottom` w hero,
przez co sekcje się zlepiały.
   ─────────────────────────────────────────── */

/* Korzeń dokumentu WP – ma nie wnosić własnego pudełka. */
.wp-site-blocks {
  margin: 0;
  padding: 0;
}

/* Części szablonu (nagłówek/stopka) renderują się w dodatkowym wrapperze.
   Ma być całkowicie przezroczysty dla układu. */
.wp-block-template-part {
  margin: 0;
}

/* ───────────────────────────────────────────
   2. OBRAZY: core/image opakowuje <img> w <figure>

   Mockup:  <img class="X">
   WP:      <figure class="wp-block-image size-full X"><img></figure>

   Selektory typu `.funding-card img` czy `.certificate-banner figcaption`
   działają dalej (to selektory potomka),
więc łatamy tylko dwa przypadki,
w których klasa mockupu siedziała BEZPOŚREDNIO na <img>,
oraz domyślny
   margines figure.
   ─────────────────────────────────────────── */
/* Rdzeń WP daje figurze `margin: 0 0 1em`. Mockup nie stylizuje .wp-block-image,
więc jego reset * {margin:0} (specyficzność 0) tu nie sięga – zerujemy.

   `height: 100%` czyni figurę PRZEZROCZYSTĄ DLA UKŁADU. Mockup kadruje obrazy
   regułami typu `.news-image img { height: 100%; object-fit: cover }`,
licząc
   procent od kontenera z `aspect-ratio`. Figura wstawiona przez core/image
   ma wysokość auto,
więc procent rozwiązywał się do auto i kadrowanie znikało.
   Gdy rodzic nie ma określonej wysokości,
`height:100%` sam liczy się do auto
   – reguła jest więc bezpieczna wszędzie indziej. */
.wp-block-image {
  margin: 0;
}

/* `height` w :where() – specyficzność ZERO. Klasy mockupu przeniesione na
   figurę (np. `.header-badge { height: 34px }`) muszą wygrywać z tą regułą,
a przy zwykłym selektorze klasowym przegrywałyby samą kolejnością arkuszy
   (wp-compat.css jest ostatni). Wersja bez :where() rozciągała odznaki
   w nagłówku do naturalnych 355 px.

   `:not(.ksw-fig)` wyłącza figury,
które SĄ elementem mockupu (`<figure
   class="funding-card">`),
a nie opakowaniem Gutenberga. Takiej figury nie wolno
   rozciągać: `.funding-card` w siatce dostawał `height: 100%` komórki i rósł
   z 239 do 260 px,
bo równał do najwyższego kafelka w rzędzie. Znacznik nadaje
   konwerter (html2blocks.py,
image_block). */
:where(.wp-block-image:not(.ksw-fig)) {
  height: 100%;
}

/* Rdzeń WP: `.wp-block-image :where(figcaption) {margin-top:.5em;margin-bottom:1em}`.
   Mockup podpisy pozycjonuje własnymi regułami (`.funding-card figcaption` itp.),
a bazą jest reset * {margin:0}. Ten sam selektor,
później w kaskadzie – wraca zero;
   reguły mockupu z klasą (0,
1,
1) nadal wygrywają. Bez tego kafelki
   współfinansowania były o 21 px wyższe niż w mockupie. */
.wp-block-image :where(figcaption) {
  margin-top: 0;
  margin-bottom: 0;
}

/*
 * ZASADA: ta warstwa NIGDY nie powtarza wartości z mockupu.
 *
 * Gdy klasa mockupu siedziała NA <img> (.hero-crest, .about-cert-img,
 * .coach-photo), core/image przenosi ją na <figure>. Konwerter oznacza takie
 * figury klasą `ksw-img`. Figura dostaje wtedy komplet reguł z sections.css
 * ORAZ z @media w responsive.css, a <img> ma się tylko nią wypełnić
 * i przejąć jej geometrię — stąd `inherit` zamiast konkretnych wartości.
 *
 * Wcześniejsza wersja przepisywała tu `width: 240px` z mockupu i przez to
 * wygrywała z `@media (max-width:640px){.hero-crest {width:140px}}` –
 * herb nie zmniejszał się na telefonie. Stąd `inherit` zamiast konkretów.
 */
.wp-block-image.ksw-img > img {
  width: 100%;
  /*
   * `!important` TYLKO na wysokości. W kanwie edytora Gutenberg wnosi
   * `.wp-block-image img { height: auto }` (wp-block-library/style.min.css)
   * i mimo NIŻSZEJ specyficzności (0,
1,
1 kontra 0,
2,
1) wygrywała ona z tą
   * regułą — okrągłe zdjęcia wylewały się poza ramki: 74×99 zamiast 74×74
   * na Kadrze,
40×53 na Grupach,
44×59 na Akademii,
52×69 na „Dla rodziców".
   * Na froncie tej reguły nie ma,
więc różnicy nie było widać w zrzutach.
   *
   * Bezpieczne,
bo geometrię niesie klasa mockupu na FIGURZE: klient zmienia
   * rozmiar figury,
nie samego <img>. Szerokość zostaje bez `!important`,
* żeby nie blokować zmiany rozmiaru obrazka z panelu bloku.
   */
  height: 100% !important;
  aspect-ratio: inherit;
  border-radius: inherit;
  object-fit: inherit;
  object-position: inherit;
  /* Nie `inherit`: cień rysuje FIGURA (ma klasę mockupu i dokładnie te same
     wymiary co <img>),
więc obrazek musi go tylko przestać dublować. Bez tego
     reguła po nazwie elementu — `.info-media img { aspect-ratio:4/3;
     box-shadow:var(--shadow-lg) }` — trafiała w <img> mimo że klasa
     `.info-media-crest` (aspect-ratio:auto, box-shadow:none) siedzi na figurze:
     herb na Historii wychodził skadrowany do 4:3 i z cieniem. */
  box-shadow: none;
}

/*
 * SZEROKOŚĆ Z PROPORCJI — RÓŻNICA BLINK/WEBKIT.
 *
 * Figura,
której klasa mockupu ustala TYLKO wysokość (`.header-badge`
 * { height:34px; width:auto }),
musi wziąć szerokość z proporcji obrazka.
 * Reguła wyżej daje <img> `width: 100%`,
czyli procent liczony od rodzica,
* którego szerokość właśnie liczymy — pętla. Blink rozwiązuje ją transferem:
 * wysokość obrazka jest określona (100 % z 34 px),
więc przez proporcje 278/355
 * wychodzi 27 px. WebKit transferu nie robi i bierze NATURALNĄ szerokość pliku:
 * odznaki Legii i PZPN puchły do 278 i 258 px,
`.header-badges` do 569 px,
* a `.header-actions` wypadało poza kontener. W Chrome tego nie widać.
 *
 * `width: auto` usuwa procent: obrazek liczy szerokość z własnej wysokości,
* a figura się do niego kurczy. Identycznie w obu silnikach.
 *
 * Lista klas = te z `height: <stała>` i `width: auto` w sections.css
 * (`.header-badge`,
`.group-emblem-crest`). Nowa taka klasa wymaga dopisania.
 */
:is(.header-badge,
.group-emblem-crest).ksw-img > img {
  width: auto;
  /* `height: inherit`, nie `100%`: `inherit` przepisuje z figury WARTOŚĆ WYLICZONĄ,
     czyli konkretną długość (34px / 92px). Procent musi się rozwiązać względem
     wysokości figury, a w kanwie edytora rozwiązywał się do `auto` — obrazek
     brał wtedy rozmiar naturalny (herb na Grupach treningowych: 221×222 zamiast
     91×92, z wylewaniem się poza figurę). Na froncie procent działał, więc błąd
     było widać tylko w edytorze. */
  height: inherit !important;
}

/* ───────────────────────────────────────────
   2b. COMPLIANZ + MAPA GOOGLE

   Complianz owija zablokowany <iframe> w .cmplz-placeholder-parent { height: inherit }. .map-frame ma wysokość z aspect-ratio (czyli
   height: auto),
więc wrapper dziedziczy auto,
a iframe { position:
   absolute; height: 100% } liczy 100 % z zera – mapa ma 0 px do czasu
   zgody,
a po zgodzie pozycjonuje się względem zerowego wrappera.
   ─────────────────────────────────────────── */
.map-frame > .cmplz-placeholder-parent,
.map-frame > .cmplz-blocked-content-container {
  height: 100% !important;
}

/* ───────────────────────────────────────────
   3. EX-<span> — ROZWIĄZANE W MOTYWIE,
NIE W CSS

   Mockup używa <span class="section-label">,
<span class="number-value"> itd.
   Gdy takie napisy były akapitami <p>,
wpadały pod generyczne reguły w rodzaju
   `.about-content p { margin-bottom; color }` (0,
1,
1),
które biją własną klasę
   etykiety (0,
1,
0) – etykiety szarzały i rozjeżdżały się o 8 px.

   Stały tu kiedyś trzy reguły łatające skutek. Zostały USUNIĘTE: napisy
   renderuje teraz blok ks-wesola/text,
który wypuszcza dokładnie ten element,
co mockup. Problem zniknął u źródła,
a ten plik nie powtarza już żadnej
   wartości z mockupu.
   ─────────────────────────────────────────── */

/* ───────────────────────────────────────────
   4. EDYTOR

   Style trafiają do iframe'a kanwy hookiem `enqueue_block_assets`
   (patrz functions.php),
więc nie przechodzą transformacji selektorów
   i `:root` ze zmiennymi mockupu działa tak samo jak na froncie.
   Poniżej tylko to,
co w edytorze musi zachowywać się inaczej.
   ─────────────────────────────────────────── */

/* Bez script.js elementy z .reveal (opacity:0) byłyby niewidoczne –
   redaktor nie zobaczyłby własnej treści. */
.editor-styles-wrapper .reveal {
  opacity: 1;
  transform: none;
}

/* Nagłówek mockupu jest position:fixed – w kanwie przykrywałby treść. */
.editor-styles-wrapper .site-header {
  position: static;
}

/*
 * DEKORACJE (warstwy tła hero,
pływające kształty,
separatory statystyk)
 * to blok ks-wesola/deco: renderuje w kanwie ten sam pusty <div class="…">,
* co na froncie,
więc tło i kółka hero wyglądają w edytorze jak na stronie.
 * Jedyna różnica: hero ma min-height:100vh liczone od iframe'a kanwy,
* co w edytorze robiło pustą przestrzeń.
 */
.editor-styles-wrapper .hero {
  min-height: 0;
}

/*
 * Edytor nadaje KAŻDEMU blokowi w kanwie `position: relative`
 * (`.block-editor-block-list__layout .block-editor-block-list__block`,
0,
2,
0),
* co bije `position: absolute` z mockupu (0,
1,
0). Warstwy tła hero wchodziły
 * wtedy w normalny przepływ: 1000 px pustego miejsca nad treścią i białe tło
 * pod białym tytułem. Lista = wszystkie klasy mockupu z `position: absolute`,
* które renderują się jako bloki (wyciągnięte skryptem z sections.css);
 * `.wp-block` podnosi specyficzność do 0,
3,
0. Przy nowej absolutnie
 * pozycjonowanej klasie w mockupie trzeba ją tu dopisać.
 */
.editor-styles-wrapper .wp-block:is(.hero-bg,
.hero-gradient,
.hero-pattern,
.hero-circle-1,
.hero-circle-2,
.hero-line,
.hero-floating,
.news-tag,
.is-style-news-tag {
  /* news-tag / group-year to role tekstu – w blokach mają klasę is-style-*, nie klasę mockupu. */
  position: absolute;
}

/*
 * MENU W KANWIE. Na froncie blok Nawigacja renderuje PHP (functions.php) do
 * markupu mockupu,
ale w edytorze rysuje go React z własnymi klasami
 * .wp-block-navigation-*. Poniżej tylko przybliżenie wyglądu dla redaktora –
 * front NIE zależy od tych reguł,
więc mogą się rozjechać bez szkody.
 */
.editor-styles-wrapper .main-nav.wp-block-navigation {
  flex: 1;
  justify-content: center;
}

.editor-styles-wrapper .main-nav .wp-block-navigation-item__content {
  padding: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--ink-light);
}

.editor-styles-wrapper .footer-menu.wp-block-navigation {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.editor-styles-wrapper .footer-menu .wp-block-navigation-item__content {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.5);
}

/*
 * Edytor dokleja na końcu każdego kontenera przycisk „dodaj blok".
 * W .hero-inner (grid 1fr 1fr),
.stats-row czy .advantages-grid staje się on
 * kolejną komórką siatki i psuje układ. Chowamy go WEWNĄTRZ grup – dodawanie
 * bloków nadal działa z paska narzędzi i z widoku listy,
a dokładacz na końcu
 * całej treści zostaje nietknięty.
 */
.editor-styles-wrapper .wp-block-group > .block-list-appender {
  display: none;
}

/*
 * Odstępy między blokami w kanwie: rdzeń WP wstrzykiwał do iframe'a reguły
 * układu (`.wp-container-…-is-layout-N > * { margin-block: 0 }`) PO naszym
 * arkuszu i zerował marginesy ról. Stała tu łatka zerująca margin-block na
 * każdym .wp-block – lekarstwo gorsze od choroby (kasowała też marginesy
 * z projektu, więc edytor pokazywał ciaśniejsze odstępy niż front).
 * Rozwiązane u źródła: add_theme_support('disable-layout-styles') w functions.php.
 */

/*
 * Bloki core/html renderują się w edytorze jako <iframe class="components-sandbox">
 * — całkowicie odizolowany dokument BEZ arkuszy motywu. Żadna reguła stąd nie
 * sięgnie do jego wnętrza, więc treść, która ma wyglądać, nie może być core/html.
 *
 * Dlatego przyciski to blok ks-wesola/button, a napisy ks-wesola/text.
 * core/html został wyłącznie tam, gdzie sandbox nie przeszkadza:
 *   – 6 ikon SVG w kartach zalet (sandbox skaluje się do zawartości,
 *     a kolorowy kafelek rysuje grupa .advantage-icon na zewnątrz),
 *   – dekoracyjne puste divy, które i tak chowamy wyżej.
 */