/*
Theme Name: mojrobot
Template: blocksy
Version: 0.1.0
Author: NOVA
Description: Motyw potomny portalu mojrobot.pl o eksploatacji robotów, newsach i poradnikach.
*/

/* ============================================================
   PALETA CIEMNA, WYPROWADZONA Z KADRU HERO — 2026-08-26

   Wartosci NIE stoja w tym pliku. Ida przez Customizer Blocksy skryptem
   `narzedzia/paleta-ciemna-z-kadru.php`, ktory trzyma tez rachunek kontrastow
   i uzasadnienie odcienia (histogram kadru: os chlodna hue ~190, nie ~30).
   Arkusz odpowiada wylacznie za PRZYPISANIE ROL do gniazd.

   ZAMIANA ROL GNIAZD 4 I 7 — jedyna zmiana, ktora trzeba znac czytajac ponizej:

     bylo:  color-4 = grafit  #221F1C (tekst na jasnym / tlo sekcji ciemnej)
            color-7 = papier  #EFEEEA (tlo strony / tekst na ciemnym)
     jest:  color-4 = tekst   #E9EFF0 (jasny tekst i naglowki)
            color-7 = podloga #181F21 (ciemne tlo strony, sekcji i gruntu hero,
                                       oraz ciemny atrament na bursztynie)

   Wszedzie, gdzie regula znaczyla „ciemna rzecz", stoi teraz color-7;
   gdzie znaczyla „jasna rzecz" — color-4. To NIE jest zamiana kosmetyczna:
   `color-mix(... color-7 X%, color-4)` zmienia kierunek na odwrotny, bo miesza
   TERAZ jasny tekst w ciemne podloze, a nie odwrotnie.

   Bursztyn #E07A17 wraca pod tekst. Na papierze mial 2,60 i teczka go tam
   zakazywala; na podlodze #181F21 ma 5,54, czyli przechodzi AA takze pod
   tekstem zwyklym. To jest doslowne zyczenie wlasciciela — bursztyn jako
   elementy kontrastowe i naglowki — i dopiero ciemna podloga je umozliwia.
   ============================================================ */

:root {
	--mr-gutter: clamp(20px, 3.6vw, 56px);
	--mr-rhythm: clamp(56px, 6vw, 104px);
	--mr-meta-font: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.mr-section,
.mr-section * {
	box-sizing: border-box;
}

.mr-section {
	padding-block: var(--mr-rhythm);
	background: var(--theme-palette-color-7);
	color: var(--theme-palette-color-4);
}

/* Sekcje maja sie STYKAC. Blocksy nadaje kazdemu dziecku .entry-content
   `margin-block-end: var(--theme-content-spacing)` (1.5em = 27 px) regula
   `:is(.is-layout-flow,.is-layout-constrained) > :where(:not(h1..h6))`
   z bundle/main.min.css. Przez te szczeline widac tlo body (papier #EFEEEA)
   i miedzy dwiema ciemnymi sekcjami czyta sie to jako jasny pasek - zgloszony
   przez wlasciciela pasek pod hero i pod diagnostyka. Zmierzone: hero konczy
   sie na 1080, diagnostyka zaczyna na 1107.

   Klasa podwojona, bo regula Blocksy ma te sama specyficznosc (0,1,0), a jej
   arkusz laduje sie PO arkuszu motywu potomnego i wygrywa kolejnoscia.
   Podwojenie daje (0,2,0) - bez !important i bez ujemnych marginesow,
   ktore tylko zaslonilyby przyczyne. */
.mr-section.mr-section {
	margin-block: 0;
}

.mr-section--card {
	background: var(--theme-palette-color-8);
}

/* Sekcja na ciemnym tle. Tlo MUSI byc nieprzezroczyste: bramka `kontrast`
   wyznacza tlo tekstu, wchodzac po PRZODKACH do pierwszego nieprzezroczystego
   background-color. Wideo i obraz lezace obok tekstu sa dla niej niewidzialne -
   bez tej deklaracji jasny tekst zostalby porownany z tlem strony.

   Po przejsciu na ciemna palete deklaracja zostaje mimo tego, ze wartosc jest
   ta sama, co tlo strony. Nie jest nadmiarowa: to ona jest tym jawnym,
   nieprzezroczystym kolorem, po ktory bramka schodzi pod niemierzalnym wideo.
   Usuniecie jej daje `kontrast_niemierzalny`, nie „taki sam wyglad". */
.mr-section--dark {
	background: var(--theme-palette-color-7);
	color: var(--theme-palette-color-4);
}

.mr-section :where(h1, h2, h3, p, figure) {
	margin-block: 0;
}

.mr-section :where(a, button, [tabindex]):focus-visible {
	outline: 3px solid var(--theme-palette-color-1);
	outline-offset: 3px;
}

.mr-wide,
.mr-content {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--mr-gutter);
	overflow-x: auto;
}

.mr-wide {
	max-width: var(--theme-normal-container-max-width);
}

.mr-content {
	max-width: var(--theme-narrow-container-max-width);
}

.mr-stack {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* SYSTEM POZIOMOW CZYTELNIKA — SKASOWANY 2026-08-26 („to lipa").
   Z listy klas meta wypadly `.mr-level-marker` (plakietka na karcie) i
   `.mr-levels__label` (podpis filtra). Ich reguly wlasne, reguly przyciskow
   `.mr-poziom` i galaz filtrowania w interakcja.js/diagnostyka.js poszly razem
   z nimi — taksonomia `poziom_czytelnika` jest wyrejestrowana, wiec zostawienie
   samych stylow bylo klamstwem o tym, co strona umie. */
.mr-label,
.mr-meta,
.mr-checked,
.mr-category-count {
	font-family: var(--mr-meta-font);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.mr-label,
.mr-meta,
.mr-category-count {
	color: var(--theme-palette-color-3);
}

.mr-label--accent {
	color: var(--theme-palette-color-1);
}

/* ============================================================
   SKALA NAGLOWKOW SEKCJI — 2026-08-26

   Zgloszenie wlasciciela: „poziom hero odjezdza od reszty strony glownej".
   Jednym ze skladnikow tego wrazenia jest KONTRAST SKALI. Zmierzone w oknie
   1920: hero h1 = 82 px, h2 sekcji = 42 px, tytul karty = 32 px, proza 18 px.
   Hero ma skok 82 -> 20,5 (x4,0), sekcje mialy 42 -> 18 (x2,3) - naglowek
   sekcji byl ledwie wiekszy od tytulu karty pod nim i caly rzad czytal sie
   jako jedna plaszczyzna tekstu.

   Nowa skala: h2 dochodzi do 68 px, czyli x3,8 nad proza - ten sam rzad
   kontrastu, co w hero, bez ruszania hero. Waskie ekrany dostaja 34 px,
   bo 4,4vw ponizej 780 px zeszloby pod tytul karty.

   Kontrast bez zmian: h2 to `tekst` #E9EFF0 na podlodze (14,38) albo na
   karcie (12,62). Powiekszenie przesuwa je z progu 4,5 na prog 3,0
   (tekst duzy), wiec zapas rosnie, nie maleje. */
.mr-section-heading {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 20px 40px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--theme-palette-color-5);
}

.mr-section-heading__copy {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mr-section-heading h2 {
	max-width: 20ch;
	font-size: clamp(34px, 4.4vw, 68px);
	font-variation-settings: "wdth" 106;
	letter-spacing: -.022em;
	line-height: .98;
	text-wrap: balance;
}

.mr-section-heading__copy > p:last-child {
	max-width: 54ch;
	color: var(--theme-palette-color-3);
	font-size: 17px;
}

/* Etykieta sekcji przestaje byc samotnym slowem nad naglowkiem i dostaje
   bursztynowa kreske. Kreska jest ozdobna (nie niesie tresci ani nie jest
   sterownikiem), wiec nie podlega progowi 3:1 - sam tekst etykiety zostaje
   w `przygasz` 6,95 na podlodze / 6,10 na karcie. */
.mr-section-heading__copy > .mr-label,
.mr-editorial__intro > .mr-label {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mr-section-heading__copy > .mr-label::before,
.mr-editorial__intro > .mr-label::before {
	width: 26px;
	height: 2px;
	background: var(--theme-palette-color-1);
	content: "";
}

.mr-button .wp-block-button__link,
.mr-sprzet .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 1.5px solid transparent;
	border-radius: 3px;
	font: inherit;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Atrament na bursztynie to ciemna podloga (5,54), nie jasny tekst (1,74). */
.mr-button--primary .wp-block-button__link {
	background: var(--theme-palette-color-1);
	color: var(--theme-palette-color-7);
}

.mr-button--primary .wp-block-button__link:hover {
	transform: translateY(-2px);
}

.mr-button--outline .wp-block-button__link {
	background: transparent;
	border-color: var(--theme-palette-color-4);
	color: var(--theme-palette-color-4);
}

.mr-button--outline .wp-block-button__link:hover {
	background: var(--theme-palette-color-4);
	color: var(--theme-palette-color-7);
}

/* Hero: wideo na pelna wysokosc okna, tekst na dole, naglowek nachodzi z gory. */
.mr-hero {
	position: relative;
	display: grid;
	align-items: end;
	/* Wysokosc zarezerwowana od pierwszej klatki renderu - bez tego kazda
	   sekcja nizej skacze, gdy dojedzie plakat albo podmienia sie kroje (CLS).
	   svh, nie vh: na telefonie pasek adresu zjada vh i hero robi sie za wysokie.
	   min-height, nie height: gdy tekst urosnie, sekcja ma sie rozciagnac, nie przycinac. */
	min-height: 100vh;
	min-height: 100svh;
	padding-block: clamp(88px, 13vh, 176px) clamp(32px, 5vh, 64px);
	overflow: hidden;
}

.mr-hero__media {
	position: absolute;
	z-index: 0;
	inset: 0;
	/* width/height jawnie, mimo inset:0. Zmierzone w Edge: sama para top:0/bottom:0
	   rozwiazuje sie wzgledem WLASNEJ wysokosci sekcji sprzed rozciagniecia przez
	   min-height, wiec kadr konczyl sie 27 px nad dolem hero i zostawal pasek
	   golego tla. Z height:100% deklaracja jest nadmiarowa, bottom przegrywa
	   z height i kadr siega krawedzi. */
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* Grunt hero. Po zamianie rol gniazd ciemnym kolorem jest color-7.
	   Zmierzone: stary grafit #221F1C ma luminancje 0,01404, nowa podloga
	   #181F21 ma 0,01284 - grunt jest CIEMNIEJSZY niz przy strojeniu
	   przyciemniacza, wiec zapas kontrastu hero rosnie, nie maleje. */
	background: var(--theme-palette-color-7);
}

.mr-hero__poster,
.mr-hero__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	object-fit: cover;
	object-position: center;
}

.mr-hero__video {
	z-index: 1;
	opacity: 0;
	transition: opacity .6s ease;
}

/* Wideo odslania sie dopiero, gdy naprawde gra. Do tego czasu widac plakat,
   wiec brak pliku albo zablokowany autoplay nie zostawia czarnej dziury. */
.mr-hero__video[data-gra="true"] {
	opacity: 1;
}

/* ============================================================
   PRZYCIEMNIACZ POD TEKSTEM HERO

   Strojony na REALNYM materiale, nie rachunkiem na plaskim gradiencie.
   Metoda: prostokaty tekstu zdjete z zywej strony (CDP), przeliczone na
   piksele zrodla 1920x1080 wg object-fit: cover, po czym wszystkie 248
   klatek hero.mp4 przepuszczone przez model skladania przegladarki
   (piksel -> scrim -> polprzezroczysty kolor glifu -> WCAG).

   Czemu to bylo potrzebne: kazdy region tekstu ma gdzies w tych 248
   klatkach piksel czysto bialy (255,255,255) - neony, smugi, iskry.
   Poprzednie ustawienie (86/64/26/44) dawalo na bieli #EFEEEA:
     naglowek h1  1,49 przy progu 3,0  (14,4% pikseli zlych na kl.113)
     lead         3,76 przy progu 4,5
   a na telefonie bylo znacznie gorzej: lead 1,88, zle na 162 z 248 klatek.

   Prog liczony na 0,1% najgorszych pikseli regionu - pojedyncza iskra pod
   glifem to nie to samo, co jasna plama pod calym wierszem.

   UWAGA: to jedyna warstwa, ktora tu wolno ruszac. Nieprzezroczyste tlo
   .mr-hero__media / .mr-section--dark zostaje - bramka kontrastu schodzi
   po nie pod niemierzalnym wideo. Bez niego: kontrast_niemierzalny.
   ============================================================ */

/* Uklad waski (<=1080px): jedna kolumna, tekst na calej szerokosci i siega
   az do y=134 zrodla, wiec gradient poziomy nie mialby czego chronic -
   omijalby prawe konce wierszy. Sam pion, za to mocny.
   Zmierzone: cala biel przechodzi na 248/248 klatek, najgorszy piksel
   h1 4,71 / lead 4,76 / pasek faktow 5,98. Widac 24,4% obrazu. */
.mr-hero__scrim {
	position: absolute;
	z-index: 2;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--theme-palette-color-7) 91%, transparent) 0%,
		color-mix(in srgb, var(--theme-palette-color-7) 84%, transparent) 20%,
		color-mix(in srgb, var(--theme-palette-color-7) 73%, transparent) 50%,
		color-mix(in srgb, var(--theme-palette-color-7) 67%, transparent) 80%,
		color-mix(in srgb, var(--theme-palette-color-7) 69%, transparent) 100%
	);
}

/* Uklad dwukolumnowy: tekst siedzi TYLKO po lewej (zrodlowe x 176..982),
   prawa polowa kadru jest pusta. Druga warstwa gradientu - pozioma -
   przyciemnia sam pas tekstu, dzieki czemu pion moze byc lzejszy niz
   przy samym pionie. Efekt: biel przechodzi z wiekszym zapasem
   (h1 4,46 / lead 8,89 / pasek faktow 6,66 na 0,1% najgorszych pikseli,
   0 z 248 klatek z ubytkiem) i widac 32,4% obrazu zamiast 28,0%,
   ktore zostawialby sam pion o tej samej skutecznosci.
   Ostatnie stopy jawnie 0% zamiast `transparent` - zeby interpolacja
   nie szla przez przezroczysta CZERN i nie robila szarej zaslony. */
@media (min-width: 1081px) {
	.mr-hero__scrim {
		background:
			linear-gradient(
				to right,
				color-mix(in srgb, var(--theme-palette-color-7) 74%, transparent) 0%,
				color-mix(in srgb, var(--theme-palette-color-7) 62%, transparent) 34%,
				color-mix(in srgb, var(--theme-palette-color-7) 24%, transparent) 58%,
				color-mix(in srgb, var(--theme-palette-color-7) 0%, transparent) 84%,
				color-mix(in srgb, var(--theme-palette-color-7) 0%, transparent) 100%
			),
			linear-gradient(
				to top,
				color-mix(in srgb, var(--theme-palette-color-7) 85%, transparent) 0%,
				color-mix(in srgb, var(--theme-palette-color-7) 62%, transparent) 32%,
				color-mix(in srgb, var(--theme-palette-color-7) 24%, transparent) 66%,
				/* Pas pod naglowkiem strony. Linki nawigacji to biel 12px/700, czyli
				   tekst zwykly z progiem 4,5 - a leza na najjasniejszym pasie kadru.
				   Bez tego pasa odpadaly na 92 z 248 klatek (najgorszy piksel 2,14).
				   Z nim: 5,50 i zero klatek z ubytkiem. Kosztuje 1,7 pkt proc.
				   widocznego obrazu i konczy sie na y=151 zrodla - nizej kadr
				   jest odslaniany dokladnie tak, jak byl. */
				color-mix(in srgb, var(--theme-palette-color-7) 26%, transparent) 86%,
				color-mix(in srgb, var(--theme-palette-color-7) 72%, transparent) 94%,
				color-mix(in srgb, var(--theme-palette-color-7) 76%, transparent) 100%
			);
	}
}

/* Podzial 6.4/5.6 zostaje, mimo ze prawa kolumna trzyma juz tylko zachete do
   przewiniecia: teczka odrzuca rowne kafle, tekst nie ma isc przez cala szyne. */
.mr-hero__layout {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 6.4fr) minmax(0, 5.6fr);
	gap: clamp(24px, 3vw, 64px);
	align-items: end;
}

.mr-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(16px, 2.2vh, 26px);
}

.mr-hero h1 {
	font-size: clamp(44px, 5.4vw, 82px);
	font-variation-settings: "wdth" 112;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: .96;
	text-wrap: balance;
}

.mr-hero h1 em {
	display: block;
	font-style: normal;
}

.mr-hero__lead {
	max-width: 46ch;
	font-size: 20.5px;
	line-height: 1.55;
}

.mr-hero__actions,
.mr-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.mr-hero__stats {
	width: 100%;
	gap: 8px 26px;
	padding-top: 20px;
	border-top: 1px solid var(--theme-palette-color-5);
	color: var(--theme-palette-color-3);
	font-family: var(--mr-meta-font);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.mr-hero__stats strong {
	color: var(--theme-palette-color-4);
	font-weight: 500;
}

.mr-hero__scroll {
	display: flex;
	align-items: center;
	justify-self: end;
	gap: 12px;
	margin: 0;
}

.mr-hero__scroll::after {
	width: 1px;
	height: 44px;
	background: linear-gradient(to bottom, currentcolor, transparent);
	content: "";
}

/* Diagnostyka — sekcja, na ktora wlasciciel wskazal palcem: „taki ciemniejszy
   motyw jaki jest w pierwszej sekcji pod hero". Po zmiany palety to juz nie
   wyjatek na jasnej stronie, tylko domyslna podloga calego serwisu. */
.mr-diagnosis {
	background: var(--theme-palette-color-7);
	color: var(--theme-palette-color-4);
}

.mr-diagnosis .mr-section-heading {
	border-bottom-color: color-mix(in srgb, var(--theme-palette-color-4) 18%, transparent);
}

.mr-diagnosis .mr-section-heading h2 {
	color: var(--theme-palette-color-4);
	font-size: clamp(32px, 4.2vw, 60px);
}

.mr-diagnosis .mr-section-heading__copy > p:last-child {
	color: color-mix(in srgb, var(--theme-palette-color-4) 72%, transparent);
}

.mr-equipment {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Obwodka elementu STEROWNICZEGO, nie ozdobnej karty - WCAG 1.4.11 wymaga tu
   3:1. Przygaszony #9BAAAC daje na podlodze 6,95; kreska #445254 dalaby 2,05
   i byloby to obejscie progu, nie jego spelnienie. */
.mr-sprzet .wp-block-button__link {
	padding: 10px 18px;
	border-color: var(--theme-palette-color-3);
	background: transparent;
	color: var(--theme-palette-color-4);
	font-size: 15px;
}

.mr-sprzet .wp-block-button__link:hover {
	border-color: var(--theme-palette-color-4);
}

.mr-sprzet[aria-pressed="true"] .wp-block-button__link,
.mr-sprzet:has(.wp-block-button__link[aria-pressed="true"]) .wp-block-button__link {
	border-color: var(--theme-palette-color-1);
	background: var(--theme-palette-color-1);
	color: var(--theme-palette-color-7);
}

/* Panel zajmuje 400px niewykorzystanego prawego boku szerokiej sekcji. Bez sticky,
 * bo overflow na przodku zmienilby jego kontener przewijania z okna na .mr-wide. */
.mr-diagnosis__praca {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 28px;
	align-items: stretch;
}

/* Klasy podwojone, znowu przez `margin-block-end: 1.5em` Blocksy: bez tego
   mozaika i panel roznily sie o dokladnie te 27 px i prawa kolumna wystawala
   pod dol sekcji. */
.mr-diagnosis__praca > .mr-watki-uklad.mr-watki-uklad,
.mr-diagnosis__praca > .mr-podglad.mr-podglad {
	margin-block: 0;
}

/* ============================================================
   WATKI — KAFLE ZE ZDJECIEM, MOZAIKA ZAMIAST ROWNYCH TRZECICH

   Dwie rzeczy naraz, obie zamowione:

   1. ZDJECIE. Kafel dostaje obraz wyrozniajacy wpisu w kadrze 16/9,
      kadrowanym `cover`, z promieniem siatki (3-4 px z teczki).
      Kadr jest PIERWSZY wizualnie (`order: -1`) niezaleznie od tego, gdzie
      wyladuje w markupie - kolejnosc bloku nie ma rzadzic kompozycja karty.

   2. NIEROWNY PODZIAL. Teczka, `wyglad.profil_ukladu.asymetria`: „podzialy 7/5
      i 6.4/5.6 zamiast rownych trzecich - rowne kafle sa wygladem, ktory
      wlasciciel odrzucil". Szesc jednakowych kafli 3x2 bylo dokladnie tym.
      Pierwszy kafel bierze teraz dwie kolumny i dwa wiersze, reszta wypelnia
      obrzeze - to jest mozaika redakcyjna, nie rzad pudelek.

   WYSOKOSCI. Zgloszony kiedys defekt to byly kafle roznej wysokosci przy
   roznej dlugosci tytulu. Trzyma je tu para regul: `li` jest siatka rozciagana
   przez `stretch`, a `.mr-objaw` ma `height: 100%`. Tytul rosnie
   (`flex: 1 1 auto`), wiec to on zjada roznice, a dolna linia meta wszystkich
   kafli w rzedzie stoi na tej samej wspolrzednej y.

   KONTRAST (rachunek wlasny, WCAG 2.1, tlo `karta` #212A2C):
     tytul  `tekst` #E9EFF0 -> 12,62    dzial `konsola` #4FC3CC -> 6,99
   Najazd podnosi plaszczyzne do `dywan` #262F31 (11,78 / 6,53). Poprzednie tlo
   najazdu `color-mix(tekst 12%, podloga)` = #31383A ma L 0,0379, czyli PONAD
   sufitem 0,0274 z teczki - bursztyn mialby na nim 3,96. Nazwane plaszczyzny
   trzymaja sufit, mieszanka go przekraczala. */
/* ============================================================
   27 PIKSELI BLOCKSY — JEDNO MIEJSCE NA WSZYSTKIE SIATKI KART

   Blocksy dokłada kazdemu dziecku ukladu przeplywowego
   `margin-block-end: var(--theme-content-spacing)` = 1,5em = 27 px, ale
   OSTATNIEMU dziecku ten margines zeruje. W siatce daje to kafle roznej
   wysokosci: zmierzone 115 px u trzech pierwszych i 142 px u ostatniego,
   czyli dokladnie te 27 px - i jest to ten sam defekt nierownych kafli, ktory
   na tym serwisie zgloszono juz raz.

   Odstepy w siatkach robi `gap`, wiec marginesy sa tu wylacznie szkoda.
   Klasa podwojona daje (0,2,0) - regula Blocksy ma (0,1,0), ale jej arkusz
   laduje sie po arkuszu motywu potomnego i wygrywalaby kolejnoscia.
   Bez `!important`, bo to nie jest wojna o wlasnosc, tylko o specyficznosc.
   ============================================================ */
.mr-objawy > .wp-block-post.wp-block-post,
.mr-guides .wp-block-post-template > .wp-block-post.wp-block-post,
.mr-watki-uklad > .wp-block-query.wp-block-query,
.mr-tlo-uklad > .wp-block-query.wp-block-query,
.mr-dzialy-siatka > .mr-dzial-karta {
	margin-block: 0;
}

.mr-objawy {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	align-content: start;
}

.mr-objawy > .wp-block-post,
.mr-objaw-item {
	display: grid;
	min-width: 0;
}

/* UKLAD SEKCJI. `core/post-template` nie umie nadac klasy tylko pierwszej
   pozycji, wiec sekcja stoi na DWOCH zapytaniach ze zgranymi offsetami:
   `--wiodacy` (1 wpis) i `--reszta` (4 wpisy). Bez tej reguly oba zapytania
   ustawiaja sie w slupek - zmierzone 1140x1136 przed poprawka.

   Podzial 7/5, nie polowa na polowe: teczka, `wyglad.profil_ukladu.asymetria`
   - „podzialy 7/5 i 6.4/5.6 zamiast rownych trzecich". */
.mr-watki-uklad {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 18px;
	align-items: stretch;
	min-width: 0;
}

/* Lancuch wysokosci robiony SIATKA, nie procentami. `height: 100%` na dziecku
   pojemnika o wysokosci `auto` nie ma sie do czego odniesc i wraca do `auto` -
   przez to kafle „reszty" mialy 115 i 142 px zamiast jednej wysokosci, czyli
   dokladnie ten defekt nierownych kafli, ktory na tym serwisie juz raz
   zgloszono. Element siatki rozciagniety przez `stretch` ma wysokosc
   DEFINITYWNA, wiec `1fr` w srodku ma z czego liczyc. */
.mr-watki-lista--wiodacy,
.mr-watki-lista--reszta {
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	min-width: 0;
}

.mr-watki-lista--wiodacy .wp-block-post {
	height: 100%;
}

.mr-watki-lista--wiodacy .mr-objawy {
	grid-template-columns: minmax(0, 1fr);
}

.mr-objaw {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	min-width: 0;
	padding: 0 0 16px;
	overflow: hidden;
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 4px;
	background: var(--theme-palette-color-8);
	color: var(--theme-palette-color-4);
	font-size: 16.5px;
	text-decoration: none;
	transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.mr-objaw > :not(.wp-block-post-featured-image):not(figure) {
	padding-inline: 18px;
}

.mr-objaw > :first-child:not(.wp-block-post-featured-image):not(figure) {
	padding-top: 18px;
}

/* KADR KAFLA. Proporcja jest jawna, wiec miejsce pod zdjecie jest zarezerwowane
   przed jego pobraniem - inaczej caly rzad skacze przy doczytaniu (CLS). */
.mr-objaw .wp-block-post-featured-image {
	order: -1;
	width: 100%;
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-bottom: 1px solid var(--theme-palette-color-5);
	background: var(--theme-palette-color-6);
}

.mr-objaw .wp-block-post-featured-image a,
.mr-objaw .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	object-position: center;
}

.mr-objaw .wp-block-post-featured-image img {
	transition: transform .38s ease, opacity .38s ease;
}

.mr-objaw:hover {
	transform: translateY(-3px);
	border-color: var(--theme-palette-color-1);
	background: var(--theme-palette-color-6);
}

.mr-objaw:hover .wp-block-post-featured-image img,
.mr-objaw:focus-within .wp-block-post-featured-image img {
	transform: scale(1.045);
}

/* Tytul zjada roznice wysokosci; meta zostaje przyklejona do dolu. */
.mr-objaw h3,
.mr-objaw em {
	flex: 1 1 auto;
	margin: 0;
	font-family: "Archivo", system-ui, sans-serif;
	font-size: 19px;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
}

.mr-objaw h3 a {
	color: inherit;
	text-decoration: none;
}

/* Odnosnik tytulu rozciaga sie na caly kafel - klikalne ma byc zdjecie i karta,
   nie sam wiersz tekstu. */
.mr-objaw h3 a::after {
	position: absolute;
	z-index: 1;
	inset: 0;
	content: "";
}

.mr-objaw .taxonomy-category,
.mr-objaw span {
	color: var(--theme-palette-color-2);
	font-family: var(--mr-meta-font);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.mr-objaw .taxonomy-category a {
	color: inherit;
	text-decoration: none;
}

/* Kafel wiodacy: kadr rosnie do calej wolnej wysokosci kolumny, tytul idzie
   o pietro w gore skali. To jest ten sam skok, ktorym zyje hero - pietro nizej. */
.mr-objaw--wiodacy {
	padding-bottom: 24px;
}

.mr-objaw--wiodacy .wp-block-post-featured-image {
	flex: 1 1 auto;
	aspect-ratio: auto;
	min-height: 280px;
}

.mr-objaw--wiodacy > :not(.wp-block-post-featured-image):not(figure) {
	padding-inline: 26px;
}

.mr-objaw--wiodacy h3 {
	flex: 0 0 auto;
	font-size: clamp(24px, 1.9vw, 32px);
	font-variation-settings: "wdth" 104;
	line-height: 1.06;
}

.mr-objaw--wiodacy .wp-block-post-excerpt {
	flex: 0 0 auto;
	color: var(--theme-palette-color-3);
	font-size: 16.5px;
	line-height: 1.5;
}

.mr-objaw--wiodacy .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* RESZTA WATKOW: KAFLE POZIOME. Cztery kafle pionowe w waskiej kolumnie
   zrobilyby czwarty rzad pudelek pod trzema poprzednimi - a to jest dokladnie
   ten wyglad, ktory wlasciciel odrzuca. Kadr z boku zamienia je w liste
   redakcyjna i domyka kolumne do wysokosci kafla wiodacego obok.

   Wysokosci rzedow rozdziela `grid-auto-rows: minmax(0, 1fr)`, wiec dlugosc
   tytulu nie rozjezdza sasiadow - to ten sam warunek, ktory kiedys zgloszono
   na tym serwisie jako defekt nierownych kafli. */
.mr-watki-lista--reszta .mr-objawy {
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: minmax(0, 1fr);
	gap: 14px;
}

/* Siatka, nie rzad flexa: tytul i dzial maja stanac JEDEN POD DRUGIM obok
   kadru, a nie obok siebie - w markupie nie ma wokol nich wspolnego opakowania,
   wiec pozycje sa wskazane jawnie. */
.mr-watki-lista--reszta .mr-objaw {
	display: grid;
	grid-template-columns: 40% minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) auto;
	gap: 0 18px;
	padding: 0 18px 0 0;
}

.mr-watki-lista--reszta .mr-objaw .wp-block-post-featured-image {
	grid-column: 1;
	grid-row: 1 / -1;
	aspect-ratio: auto;
	border-right: 1px solid var(--theme-palette-color-5);
	border-bottom: 0;
}

.mr-watki-lista--reszta .mr-objaw > :not(.wp-block-post-featured-image):not(figure) {
	padding-inline: 0;
}

.mr-watki-lista--reszta .mr-objaw h3 {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	padding-top: 16px;
	font-size: 17px;
}

.mr-watki-lista--reszta .mr-objaw .taxonomy-category {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	padding-bottom: 16px;
}

/* Jawne podloze utrzymuje mierzalny kontrast calej tresci panelu. Minimalna
 * wysokosc rezerwuje jego miejsce przed pierwszym synchronicznym wyborem. */
.mr-podglad {
	display: grid;
	gap: 16px;
	min-height: 480px;
	padding: 17px;
	border: 1px solid color-mix(in srgb, var(--theme-palette-color-4) 16%, var(--theme-palette-color-7));
	border-radius: 3px;
	background: color-mix(in srgb, var(--theme-palette-color-4) 6%, var(--theme-palette-color-7));
}

/* Stala proporcja kadru rezerwuje identyczne miejsce dla zdjec o roznych wymiarach. */
.mr-podglad__kadr {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 3px;
	background: color-mix(in srgb, var(--theme-palette-color-4) 12%, var(--theme-palette-color-7));
}

/* Jawna regula jest potrzebna, bo display block ma pierwszenstwo przed atrybutem. */
.mr-podglad__kadr[hidden] {
	display: none;
}

.mr-podglad__kadr img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .2s ease;
}

.mr-podglad__kadr:hover img {
	transform: scale(1.02);
}

/* Panel obok mozaiki mial tu pusty prostokat z napisem „DOBA AI" i to byl
   najbiedniejszy element sekcji. Dostaje wlasny kadr - plik motywu, nie
   zalacznik: `assets/watki-panel.webp` (780x520, 17 KB).

   Podpis lezy na WLASNEJ, nieprzezroczystej plytce `podloga`, a nie wprost na
   zdjeciu. Powod jest dwojaki: bramka kontrastu nie umie zmierzyc piksela
   obrazu i schodzi po jawny kolor nizej, a bez plytki tym kolorem bylby dopiero
   kadr panelu. Z plytka para jest jednoznaczna: `tekst` #E9EFF0 na
   `podloga` #181F21 = 14,38. */
.mr-podglad__kadr--brak {
	display: grid;
	align-items: end;
	justify-items: start;
	padding: 14px;
	border-left: 3px solid var(--theme-palette-color-1);
	background:
		linear-gradient(
			to top,
			color-mix(in srgb, var(--theme-palette-color-7) 72%, transparent) 0%,
			color-mix(in srgb, var(--theme-palette-color-7) 12%, transparent) 52%,
			color-mix(in srgb, var(--theme-palette-color-7) 0%, transparent) 100%
		),
		url("assets/watki-panel.webp") center / cover no-repeat,
		var(--theme-palette-color-6);
	transition: transform .25s ease;
}

.mr-podglad__brak {
	padding: 6px 10px;
	border-radius: 3px;
	background: var(--theme-palette-color-7);
	color: var(--theme-palette-color-4);
	font-family: var(--mr-meta-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.mr-podglad__tresc {
	display: grid;
	gap: 12px;
	align-content: start;
}

/* Rezerwacja zmierzona, nie zgadnieta: wszystkie 20 nazw objawow renderuje sie
   w JEDNYM wierszu po 23,8 px przy szerokosci panelu 364 px. Dwa wiersze zostawialy
   24 px stalej pustki pod tytulem. */
.mr-podglad__objaw {
	min-height: 24px;
	margin: 0;
	color: var(--theme-palette-color-4);
	font-size: 19px;
	line-height: 1.25;
}

/* To samo dla opisu: zmierzone maksimum z 20 objawow to 93 px (cztery wiersze),
   minimum 69,8 px. Rezerwacja rowna maksimum trzyma panel nieruchomo przy kazdym
   przelaczeniu, a szesc wierszy zostawialo 46 px pustki nad przyciskiem. */
.mr-podglad__opis {
	min-height: 93px;
	margin: 0;
	color: color-mix(in srgb, var(--theme-palette-color-4) 82%, var(--theme-palette-color-7));
	font-size: 15px;
	line-height: 1.55;
}

.mr-podglad__link {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	min-height: 42px;
	padding: 8px 14px;
	border-radius: 3px;
	background: var(--theme-palette-color-1);
	color: var(--theme-palette-color-7);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.mr-podglad__link:hover,
.mr-podglad__link:focus-visible {
	background: var(--theme-palette-color-2);
	color: var(--theme-palette-color-7);
}

/* ============================================================
   NAJNOWSZE — PRAWA KOLUMNA DOMKNIETA KRONIKA

   Zgloszenie: prawa kolumna konczyla sie wysoko (karuzela + kropki to okolo
   jedna trzecia wysokosci duzej karty obok) i pod nia ziala pustka na dwie
   trzecie sekcji. Kronika ma te pustke ZAJAC, a nie tylko wypelnic gorne kilka
   pikseli - dlatego siatka dostaje dwa wiersze zamiast jednego:

     kolumna 1 (7fr): duza karta, `grid-row: 1 / -1` - siega obu wierszy
     kolumna 2 (5fr): karuzela w wierszu 1 (auto), kronika w wierszu 2 (1fr)

   Wiersz drugi jest `minmax(0, 1fr)`, wiec bierze WSZYSTKO, co zostaje do
   wysokosci duzej karty, a `.mr-kronika` rozdziela to miedzy pozycje. Kolumna
   konczy sie tam, gdzie karta obok - to jest caly sens tej poprawki.

   Podzial 7/5 zostaje nietkniety: teczka odrzuca rowne kolumny. */
.mr-news-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	grid-template-rows: auto minmax(0, 1fr);
	gap: 30px;
	align-items: stretch;
}

.mr-news-grid > .mr-news-main {
	grid-column: 1;
	grid-row: 1 / -1;
	min-width: 0;
}

.mr-news-grid > .mr-news-side {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

/* Klasa podwojona z tego samego powodu, co przy `.mr-section` na gorze pliku:
   Blocksy dokleja kazdemu dziecku `margin-block-end: 1.5em` (27 px) regula
   o tej samej specyficznosci, a jego arkusz laduje sie pozniej. Te 27 px
   wychodzily poza dol wiersza i kronika konczyla sie NIZEJ niz karta obok -
   czyli dokladnie odwrotnie do tego, po co ja tu wstawiono. */
.mr-news-grid > .mr-kronika.mr-kronika,
.mr-news-grid > .mr-news-side.mr-news-side,
.mr-news-grid > .mr-news-main.mr-news-main {
	margin-block: 0;
}

.mr-news-grid > .mr-kronika {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
}

/* Wariant zapasowy: gdyby kronika wyladowala WEWNATRZ prawej kolumny, a nie
   obok niej, ten sam skutek osiaga sie kolumna elastyczna. Obie sciezki
   prowadza do jednego: lista rosnie do wysokosci karty obok. */
.mr-news-side:has(.mr-kronika) {
	display: flex;
	flex-direction: column;
}

.mr-news-side .mr-kronika {
	flex: 1 1 auto;
	margin-top: 18px;
}

/* ============================================================
   KRONIKA — LISTA CHRONOLOGICZNA

   Rytm bierze sie z pionowej kreski i kropek, nie z ramek: sufit jasnosci
   plaszczyzn (L <= 0,0274) nie pozwala budowac glebi rozjasnianiem pudelek,
   wiec glebia idzie w linie i swiatlo.

   KONTRAST (rachunek wlasny, tlo `podloga` #181F21):
     `.mr-kronika__data`  `przygasz` #9BAAAC -> 6,95
     `.mr-kronika__dzial` `konsola`  #4FC3CC -> 7,97
     `.mr-kronika__tytul` `tekst`    #E9EFF0 -> 14,38
     najazd tytulu        `konsola`          -> 7,97
   Na sekcji `--card` (#212A2C) te same pary daja 6,10 / 6,99 / 12,62 / 6,99 -
   wszystkie ponad progiem 4,5. */
/* UWAGA NA STRUKTURE. `core/post-template` wstawia miedzy `.mr-kronika`
   a `.mr-kronika__pozycja` wlasne `<ul class="wp-block-post-template">`
   i `<li class="wp-block-post">`. Selektor dziecka bezposredniego z kontraktu
   klas NIE zadziala - kolumna elastyczna musi siedziec na `.mr-kronika__lista`,
   a rozciagane sa `li`, nie same pozycje. */
.mr-kronika {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding-top: 18px;
	border-top: 1px solid var(--theme-palette-color-5);
	list-style: none;
}

.mr-kronika__lista {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Klasa podwojona: bez tego kazda pozycja niesie doklejone przez Blocksy
   `margin-block-end: 1.5em`, odstepy zjadaja cala wolna wysokosc i `flex` nie
   ma czego rozdzielic - lista domykalaby kolumne PRZYPADKIEM, przez sume
   marginesow, a nie przez rozciagniecie. */
.mr-kronika__lista > .wp-block-post.wp-block-post {
	display: flex;
	flex: 1 1 0;
	min-height: 0;
	margin-block: 0;
}

.mr-kronika > h3,
.mr-kronika__naglowek {
	flex: 0 0 auto;
	margin: 0 0 6px;
	padding-left: 26px;
	color: var(--theme-palette-color-3);
	font-family: var(--mr-meta-font);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Os czasu. Kreska jest ozdobna, wiec nie podlega progowi 3:1 - tresc niesie
   tekst pozycji, nie linia. */
.mr-kronika::before {
	position: absolute;
	z-index: 0;
	top: 34px;
	bottom: 12px;
	left: 5px;
	width: 1px;
	background: linear-gradient(
		to bottom,
		var(--theme-palette-color-5) 0%,
		var(--theme-palette-color-5) 88%,
		transparent 100%
	);
	content: "";
}

.mr-kronika__pozycja {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: center;
	gap: 4px 14px;
	width: 100%;
	min-height: 0;
	padding: 10px 0 10px 26px;
	border-top: 1px solid color-mix(in srgb, var(--theme-palette-color-5) 55%, transparent);
}

.mr-kronika__lista > .wp-block-post:first-child .mr-kronika__pozycja {
	border-top: 0;
}

/* Kropka na osi. Pierwsza pozycja - bursztynowa: to jest „teraz". */
.mr-kronika__pozycja::before {
	position: absolute;
	top: 50%;
	left: 1px;
	width: 9px;
	height: 9px;
	margin-top: -4px;
	border: 1px solid var(--theme-palette-color-7);
	border-radius: 50%;
	background: var(--theme-palette-color-5);
	content: "";
}

.mr-kronika__lista > .wp-block-post:first-child .mr-kronika__pozycja::before {
	background: var(--theme-palette-color-1);
}

.mr-kronika__data {
	grid-column: 1;
	color: var(--theme-palette-color-3);
	font-family: var(--mr-meta-font);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mr-kronika__dzial {
	grid-column: 2;
	color: var(--theme-palette-color-2);
	font-family: var(--mr-meta-font);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mr-kronika__dzial a {
	color: inherit;
	text-decoration: none;
}

.mr-kronika__tytul {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--theme-palette-color-4);
	font-family: "Archivo", system-ui, sans-serif;
	font-size: 17px;
	font-variation-settings: "wdth" 100;
	font-weight: 700;
	line-height: 1.24;
	text-wrap: pretty;
}

.mr-kronika__tytul a {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}

.mr-kronika__pozycja:hover .mr-kronika__tytul a,
.mr-kronika__pozycja:focus-within .mr-kronika__tytul a {
	color: var(--theme-palette-color-2);
}

.mr-kronika__pozycja:hover::before,
.mr-kronika__pozycja:focus-within::before {
	background: var(--theme-palette-color-1);
}

.mr-news-main .wp-block-post-template,
.mr-news-side .wp-block-post-template,
.mr-guides .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mr-news-side .wp-block-post-template {
	display: grid;
	gap: 14px;
}

.mr-news-card,
.mr-guide-card {
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 4px;
	background: var(--theme-palette-color-8);
	color: var(--theme-palette-color-4);
	transition: border-color .15s ease, transform .15s ease;
}

.mr-news-card:hover,
.mr-guide-card:hover {
	transform: translateY(-2px);
	border-color: var(--theme-palette-color-2);
}

.mr-news-card--large {
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
}

.mr-news-card--large .wp-block-post-featured-image {
	margin: 0;
	border-bottom: 1px solid var(--theme-palette-color-5);
	background: var(--theme-palette-color-6);
}

.mr-news-card--large .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.mr-news-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 24px;
}

.mr-news-card__body h3 {
	font-size: clamp(24px, 2.2vw, 32px);
	font-variation-settings: "wdth" 104;
	line-height: 1.08;
}

.mr-news-card__body h3 a,
.mr-news-card--small h3 a,
.mr-guide-card h3 a {
	color: inherit;
	text-decoration: none;
}

.mr-news-card__body .wp-block-post-excerpt {
	color: var(--theme-palette-color-3);
	font-size: 16.5px;
	line-height: 1.5;
}

.mr-news-card__body .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.mr-meta-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mr-meta-row .taxonomy-category a {
	color: var(--theme-palette-color-2);
	text-decoration: none;
}

.mr-news-card--small {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 18px;
}

.mr-news-card--small h3 {
	font-size: 17.5px;
	font-variation-settings: "wdth" 100;
	line-height: 1.24;
}

/* TLO (dawne Poradniki).
   Reguly filtra `.mr-poziom` / `.mr-levels__label` i plakietki `.mr-level-marker`
   usuniete 2026-08-26 razem z systemem poziomow czytelnika - patrz komentarz
   przy liscie klas meta na gorze pliku. */

/* Tak jak Watki: dwa zapytania ze zgranymi offsetami, bo `core/post-template`
   nie umie wyroznic pierwszej pozycji. Bez tej reguly stoja w slupku
   (zmierzone 1568x998), a pierwsza karta „reszty" lapala rozciagniecie
   przeznaczone dla wiodacej i sekcja rozjezdzala sie na wylot.

   Podzial 7/5, ten sam co w Watkach i w Najnowszych. Prawa kolumna to slupek
   piatki bez zdjec - i to jest jej rola: kontrapunkt dla jednego duzego
   wyjasnienia z kadrem, a nie kolejna scianka kafli. */
.mr-tlo-uklad {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 20px;
	align-items: stretch;
	min-width: 0;
}

.mr-guides--wiodacy,
.mr-guides--reszta {
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	min-width: 0;
}

.mr-guides .wp-block-post-template {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

.mr-guides .wp-block-post {
	display: grid;
	min-width: 0;
}

.mr-guides--wiodacy .wp-block-post {
	height: 100%;
}

.mr-guides--reszta .wp-block-post-template {
	grid-auto-rows: minmax(0, 1fr);
}

/* Karta wiodaca dostaje kadr. Zdjecie w tej sekcji bylo jedynym poza hero -
   teraz jest kotwica calego bloku. */
.mr-guide-card--wiodacy {
	padding: 0 0 24px;
	overflow: hidden;
}

.mr-guide-card--wiodacy > :not(.wp-block-post-featured-image):not(figure) {
	padding-inline: 30px;
}

.mr-guide-card--wiodacy .wp-block-post-featured-image {
	flex: 1 1 auto;
	width: 100%;
	min-height: 260px;
	margin: 0 0 8px;
	overflow: hidden;
	border-bottom: 1px solid var(--theme-palette-color-5);
	background: var(--theme-palette-color-6);
}

.mr-guide-card--wiodacy .wp-block-post-featured-image a,
.mr-guide-card--wiodacy .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	object-position: center;
}

.mr-guide-card--wiodacy .wp-block-post-featured-image img {
	transition: transform .38s ease;
}

.mr-guide-card--wiodacy:hover .wp-block-post-featured-image img,
.mr-guide-card--wiodacy:focus-within .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.mr-guide-card--wiodacy h3 {
	flex: 0 0 auto;
	font-size: clamp(24px, 2vw, 32px);
	font-variation-settings: "wdth" 104;
	line-height: 1.08;
}

.mr-guide-card--wiodacy .wp-block-post-excerpt {
	flex: 0 0 auto;
	max-width: 62ch;
	font-size: 17.5px;
}

.mr-guide-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	padding: 22px 22px 20px;
}

.mr-guide-card[hidden] {
	display: none;
}

.mr-guide-card h3 {
	font-size: 20px;
	font-variation-settings: "wdth" 102;
	line-height: 1.2;
}

.mr-guide-card .wp-block-post-excerpt {
	color: var(--theme-palette-color-3);
	font-size: 16px;
	line-height: 1.5;
}

.mr-guide-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.mr-guide-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--theme-palette-color-5);
}

.mr-checked {
	color: var(--theme-palette-color-2);
	letter-spacing: .06em;
}

.mr-checked::before {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--theme-palette-color-2);
	content: "";
}

.mr-checked time::before {
	content: "Sprawdzone ";
}

/* ============================================================
   DZIALY — OD NOWA, 2026-08-26

   Bylo: piec kolumn siatki na cztery dzialy, w kazdej waskie pudelko
   z ikonka 38 px i licznikiem. Piata kolumna byla pusta, wiec cztery karty
   konczyly sie na 4/5 szyny i kulily sie po lewej - a „nie wasko" to twarda
   zasada wlasciciela. Zmierzone na zrzucie 1920: karty siegaly 1336 px
   z 1680 dostepnych.

   Jest: cztery karty ze ZDJECIEM, tytulem, opisem i licznikiem, rozciagniete
   na cala szyne `rail_szeroki` 1680 przez `repeat(4, minmax(0, 1fr))`.
   Zaden kontener wewnetrzny nie zweza sekcji - to jest ta sama regula, ktora
   teczka zapisala przy siatce.

   KADR jest portretowy 4/5. To nie jest kaprys: cztery kadry 402x502 czytaja
   sie jako rzad plakatow, a cztery kadry 16/9 - jako rzad pudelek z paskiem
   grafiki. Sekcja miala przestac byc najslabszym elementem strony, wiec
   obraz musi w niej wazyc wiecej niz obwodka.

   ZDJECIA sa plikami motywu (`assets/dzial-*.webp`, 840x630, razem 85 KB),
   nie zalacznikami - kategoria w WordPressie nie ma pola na obraz, a lazenie
   po bazie nie nalezy do tej roli. Przypisanie idzie po kolejnosci terminow,
   czyli alfabetycznie: AI, Humanoidy, Roboty, Swiat AI. Gdy dojdzie dzial,
   trzeba dolozyc kadr - inaczej piata karta zostanie bez obrazu.

   KONTRAST (rachunek wlasny, WCAG 2.1):
     tytul   `tekst`    #E9EFF0 na karcie #212A2C -> 12,62 | na dywanie -> 11,78
     opis    `przygasz` #9BAAAC na karcie         ->  6,10 | na dywanie ->  5,70
     licznik `bursztyn` #E07A17 na karcie         ->  4,86 | na dywanie ->  4,54
   Najazd podnosi plaszczyzne do `dywan` #262F31 i to jest GORNA granica:
   przy L 0,02667 bursztyn ma 4,54 przy progu 4,5. Jasniejsza plaszczyzna
   wypycha licznik spod progu. */
.mr-dzialy-siatka {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mr-dzialy-siatka > * {
	display: grid;
	min-width: 0;
}

.mr-dzial-karta {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	min-width: 0;
	padding: 0 0 18px;
	overflow: hidden;
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 4px;
	background: var(--theme-palette-color-8);
	color: var(--theme-palette-color-4);
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.mr-dzial-karta > :not(.mr-dzial-karta__kadr) {
	padding-inline: 20px;
}

/* Kadr jest nieruchomy, rusza sie obraz w srodku - skalowanie samego kadru
   przesuwaloby jego dolna kreske. Zdjecia dzialow siedza w bazie (`_mr_kadr`,
   z altami), wiec nie ma tu zadnej warstwy zapasowej z plikow motywu: podklad
   to `dywan`, ktory widac tylko przez ulamek sekundy przed doczytaniem. */
.mr-dzial-karta__kadr {
	position: relative;
	order: -1;
	display: block;
	width: 100%;
	margin: 0 0 6px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-bottom: 1px solid var(--theme-palette-color-5);
	background: var(--theme-palette-color-6);
}

.mr-dzial-karta__kadr img,
.mr-dzial-karta__zdjecie {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .45s ease;
}

/* RYTM ZAMIAST CZTERECH IDENTYCZNYCH PUDELEK.

   Karty wypelniaja szyne (4 x 378,5 px + 3 x 18 px odstepu = 1568 px, czyli
   cala szerokosc `.mr-wide` przy railu 1680 i rynience 56 px), ale rowna
   szerokosc to jeszcze nie rytm. Rytm robia dwie rzeczy naraz:
     - kadr parzystych kart jest kwadratowy (1/1), nieparzystych portretowy (4/5),
     - karty parzyste zaczynaja sie 58 px nizej.
   Doly zostaja rowne, bo karty dalej sie rozciagaja - zejscie z rownych kafli
   nie moze wrocic postrzepiona krawedzia na dole sekcji.

   Ponizej 1281 px siatka schodzi do dwoch kolumn i przesuniecie znika: przy
   dwoch kartach w rzedzie zygzak przestaje byc rytmem, a staje sie bledem. */
@media (min-width: 1281px) {
	/* `height: auto` jest tu konieczne: karta JEST elementem siatki, wiec
	   `height: 100%` z reguly bazowej brałoby pelna wysokosc wiersza i karta
	   przesunieta o 58 px wystawalaby o tyle samo pod dol sekcji. Z `auto`
	   rozciaganie odejmuje margines i doly wracaja do jednej linii. */
	.mr-dzialy-siatka > :nth-child(even) {
		height: auto;
		margin-top: 58px;
	}

	.mr-dzialy-siatka > :nth-child(even) .mr-dzial-karta__kadr {
		aspect-ratio: 1 / 1;
	}
}

.mr-dzial-karta__tytul {
	margin: 0;
	font-family: "Archivo", system-ui, sans-serif;
	font-size: clamp(20px, 1.5vw, 26px);
	font-variation-settings: "wdth" 104;
	font-weight: 700;
	line-height: 1.1;
}

.mr-dzial-karta__tytul a {
	color: inherit;
	text-decoration: none;
}

/* Klikalna jest cala karta, nie sam wiersz tytulu. */
.mr-dzial-karta__tytul a::after {
	position: absolute;
	z-index: 1;
	inset: 0;
	content: "";
}

.mr-dzial-karta__opis {
	flex: 1 1 auto;
	margin: 0;
	color: var(--theme-palette-color-3);
	font-size: 16px;
	line-height: 1.5;
}

.mr-dzial-karta__licznik {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid color-mix(in srgb, var(--theme-palette-color-5) 60%, transparent);
	color: var(--theme-palette-color-1);
	font-family: var(--mr-meta-font);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Najazd NIE jest odwrotka na jasne - na ciemnej stronie karta zrobilaby sie
   bialym blyskiem. Plaszczyzna idzie o jeden stopien w gore (dywan), obwodka
   w bursztyn, kadr lekko naciera. */
.mr-dzial-karta:hover,
.mr-dzial-karta:focus-within {
	transform: translateY(-4px);
	border-color: var(--theme-palette-color-1);
	background: var(--theme-palette-color-6);
}

.mr-dzial-karta:hover .mr-dzial-karta__kadr img,
.mr-dzial-karta:focus-within .mr-dzial-karta__kadr img {
	transform: scale(1.05);
}

/* Redakcja */
.mr-editorial {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

.mr-editorial__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.mr-editorial h2 {
	font-size: clamp(32px, 4.2vw, 60px);
	font-variation-settings: "wdth" 106;
	line-height: 1.04;
}

.mr-editorial__lead {
	max-width: 44ch;
	color: var(--theme-palette-color-3);
}

/* Podloze przeswitujace miedzy regulami idzie w PODLOGE, nie w kreske.
   Powod zmierzony na zrzucie 1920: Blocksy dokłada kazdemu dziecku
   `margin-block-end: 1.5em`, wiec zaprojektowana 2-pikselowa szczelina
   renderuje sie jako ~27-pikselowy pas. Na jasnej wersji byla to kreska
   #DDD9D1 na bieli - niewidoczna. Na ciemnej ten sam pas swiecil jasnym
   prostokatem przez cala szerokosc panelu i czytal sie jak usterka.
   Podloga zamienia go w ciemny rowek, ktory rozdziela reguly zamiast krzyczec. */
.mr-editorial__rules {
	display: grid;
	gap: 2px;
	overflow: hidden;
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 4px;
	background: var(--theme-palette-color-7);
}

.mr-editorial-rule {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 24px;
	background: var(--theme-palette-color-8);
}

.mr-editorial-rule h3 {
	font-size: 17px;
	font-variation-settings: "wdth" 100;
}

.mr-editorial-rule p {
	color: var(--theme-palette-color-3);
	font-size: 16px;
	line-height: 1.5;
}

/* ============================================================
   REDAKCJA — OBRAZ, DWIE WARSTWY

   Zamowienie wlasciciela: „to tez powinno byc jakies zdjecie tematyczne,
   ewentualnie mozesz jakies ujecie co masz i nie uzyles tu wrzucic w tlo
   sekcji". Wchodza dwie warstwy, obie z ujec, ktore lezaly nieuzyte:

   1. SCIANA — `assets/redakcja-tlo.webp` (kadr K08, 1600x900, 22 KB) na calej
      szerokosci sekcji, przyciemniona podloga w 90 %. To jest ten sam wzorzec,
      co plakat hero: obraz siedzi na JAWNYM, NIEPRZEZROCZYSTYM kolorze
      (`--theme-palette-color-8`), bo bramka kontrastu nie umie zmierzyc piksela
      obrazu i schodzi po kolor pod nim. Bez tego koloru: `kontrast_niemierzalny`.

      Zaslona strojona na PIKSELACH, nie na oko. Przepuscilem wszystkie piksele
      pliku przez model skladania przegladarki (piksel -> zaslona 90 % podlogi
      -> WCAG) i wzialem najgorszy, nie sredni:
        najjasniejszy piksel calego obrazu po zaslonie: L = 0,0343
          `tekst`    #E9EFF0 -> 10,72   `przygasz` #9BAAAC -> 5,19
          `konsola`  #4FC3CC ->  5,94   `bursztyn` #E07A17 -> 4,13
      W kolumnie tekstu (lewe 47 % kadru) najgorszy piksel daje 11,18 / 5,41.
      WNIOSEK, KTORY TRZEBA ZNAC PRZED EDYCJA: `przygasz`, `konsola` i `tekst`
      przechodza tu z zapasem, BURSZTYN NIE (4,13 przy progu 4,5). Nad tym
      obrazem nie wolno postawic bursztynowego tekstu - dlatego etykieta sekcji
      zostaje przygaszona, a nie akcentowana.

   2. PASMO — `assets/redakcja-pasmo.webp` (kadr K04B, 1680x420, 28 KB) jako
      trzeci wiersz siatki przez obie kolumny. Nie lezy pod nim zaden tekst,
      wiec dziala pelna sila, bez zaslony. To ono niesie „zdjecie tematyczne";
      sciana niesie glebie.
   ============================================================ */
.mr-section:has(.mr-editorial) {
	position: relative;
	background:
		linear-gradient(
			color-mix(in srgb, var(--theme-palette-color-7) 90%, transparent),
			color-mix(in srgb, var(--theme-palette-color-7) 90%, transparent)
		),
		url("assets/redakcja-tlo.webp") center / cover no-repeat,
		var(--theme-palette-color-8);
}

/* ============================================================
   PRZYPINANIE WIERSZY TYLKO DLA UKLADU DWUKOLUMNOWEGO — 2026-08-26

   ZMIERZONY DEFEKT, NIE ZAPOBIEGAWCZOSC. `grid-row: 1` na obu blokach stalo
   wczesniej bezwarunkowo. Ponizej 1081 px siatka ma JEDNA kolumne jawna
   (regula w @media max-width:1080px), wiec dwa elementy przypiete do tego
   samego wiersza nie miesza sie w niej obok siebie: automatyczne rozmieszczanie
   tworzy KOLUMNE NIEJAWNA. Ta kolumna jest `auto`, czyli sizowana trescia,
   i zjada cala szerokosc - a jawne `minmax(0, 1fr)` zostaje z zerem.

   Zmierzone w oknie 390: `.mr-editorial` mialo `grid-template-columns:
   0px 322px`, `.mr-editorial__intro` szerokosc 0, `.mr-editorial__lead` 94 px,
   guzik „Jak pracuje redakcja" lamal sie na slupek pojedynczych liter,
   a panel regul lezal NA naglowku sekcji (pomiar nakladania: 5 par lisci
   tekstowych przy 390 px, 4 pary przy 768 px - jedyne nakladanie na calym
   serwisie). Pasmo `::after` z `grid-column: 1 / -1` liczylo `-1` po siatce
   JAWNEJ, wiec siedzialo w tej samej zerowej kolumnie i bylo niewidoczne.

   To jest przyczyna trzech osobno zgloszonych objawow naraz: kolumny zerowej
   szerokosci, akapitu wiodacego na 94 px i tekstu nachodzacego na tekst.

   Przypiecie zostaje tam, gdzie ma sens - w ukladzie dwukolumnowym, gdzie
   naglowek i panel regul maja stanac OBOK siebie, a pasmo pod nimi. Ponizej
   progu obowiazuje naturalny przeplyw: naglowek, reguly, pasmo - trzy wiersze
   jednej kolumny. Nie ma tu zadnego nowego progu; jest ten sam prog 1080 px,
   ktory juz rozstrzyga o liczbie kolumn.
   ============================================================ */
@media (min-width: 1081px) {
	.mr-editorial {
		grid-template-rows: auto auto;
	}

	.mr-editorial__intro,
	.mr-editorial__rules {
		grid-row: 1;
	}

	.mr-editorial::after {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* Pasmo domyka sekcje obrazem i jednoczesnie stawia znak marki tam, gdzie
   redakcja sie podpisuje. Wordmark jest ozdoba na obrazie (nazwa serwisu stoi
   obok w naglowku i w stopce jako tekst), wiec nie podlega progowi tekstowemu. */
.mr-editorial::after {
	display: block;
	width: 100%;
	margin-top: clamp(28px, 3.4vw, 56px);
	aspect-ratio: 1680 / 300;
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 4px;
	background:
		linear-gradient(
			to right,
			color-mix(in srgb, var(--theme-palette-color-7) 55%, transparent) 0%,
			color-mix(in srgb, var(--theme-palette-color-7) 8%, transparent) 34%,
			color-mix(in srgb, var(--theme-palette-color-7) 0%, transparent) 68%
		),
		url("assets/redakcja-pasmo.webp") center 46% / cover no-repeat,
		var(--theme-palette-color-7);
	content: "";
}

.mr-editorial__intro::after {
	display: block;
	width: 148px;
	height: 36px;
	margin-top: 6px;
	background: url("assets/wordmark-jasny.svg") left center / contain no-repeat;
	opacity: .38;
	content: "";
}

@media (max-width: 1280px) {
	.mr-dzialy-siatka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mr-dzial-karta__kadr {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 1080px) {
	.mr-hero__layout,
	.mr-editorial,
	.mr-diagnosis__praca,
	.mr-watki-uklad,
	.mr-tlo-uklad {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Po zejsciu do jednej kolumny kafel wiodacy nie ma juz czego wypelniac
	   wysokoscia - kadr wraca do proporcji 16/9, inaczej rozciagnalby sie
	   na cala dlugosc ekranu. */
	.mr-objaw--wiodacy .wp-block-post-featured-image,
	.mr-guide-card--wiodacy .wp-block-post-featured-image {
		flex: 0 0 auto;
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.mr-watki-lista--wiodacy,
	.mr-watki-lista--reszta,
	.mr-guides--wiodacy,
	.mr-guides--reszta {
		grid-template-rows: auto;
	}

	.mr-watki-lista--wiodacy .wp-block-post,
	.mr-guides--wiodacy .wp-block-post {
		height: auto;
	}

	.mr-watki-lista--reszta .mr-objawy,
	.mr-guides--reszta .wp-block-post-template {
		grid-auto-rows: auto;
	}

	.mr-watki-lista--reszta .mr-objawy {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* KADR KAFLA POZIOMEGO NA STALEJ MIERZE, NIE NA PROCENCIE — 2026-08-26.

	   Zmierzony rozjazd w SRODKOWYM zakresie, ktorego prog 620 px nie lapal:
	   przy 768 px cztery kafle stoja po dwa w rzedzie, wiec kazdy ma 349 px,
	   a `40 %` z reguly bazowej dawalo kadr 131,7 px i tytul 179,6 px -
	   okolo 21 znakow w wierszu, czyli CIASNIEJ niz przy 390 px (206 px).
	   Procent oddaje miniaturze staly udzial karty i im ciasniej, tym wiecej
	   jej zabiera. Stale 92 px oddaje kazdy nastepny piksel tytulowi:
	     768 px -> 349 - 92 - 18 (odstep) - 18 (wciecie) = 221 px
	     390 px -> 350 - 92 - 14 - 14                    = 230 px
	   Powyzej 1081 px zostaje `40 %`: tam kafel siedzi w kolumnie 5fr o okolo
	   600 px i kadr ma sie skalowac razem z nia. */
	.mr-watki-lista--reszta .mr-objaw {
		grid-template-columns: 92px minmax(0, 1fr);
	}

	.mr-podglad {
		min-height: 0;
	}

	/* Jedna kolumna: kronika przestaje domykac cokolwiek i wraca do naturalnej
	   wysokosci - rozciaganie pozycji ma sens tylko obok wysokiej karty. */
	.mr-news-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
	}

	.mr-news-grid > .mr-news-main,
	.mr-news-grid > .mr-news-side,
	.mr-news-grid > .mr-kronika {
		grid-column: 1;
		grid-row: auto;
	}

	/* ZMIERZONY DEFEKT, NIE ZAPOBIEGAWCZOSC. W jednej kolumnie `.mr-kronika`
	   nie ma juz definitywnej wysokosci (nie stoi obok wysokiej karty), wiec
	   pozycje z `flex-basis: 0` i `min-height: 0` kurczyly sie do zera i wszystkie
	   szesc nachodzilo na siebie w jednym miejscu - zlapane na zrzucie 390 px.
	   Bez definitywnej wysokosci nie ma czego rozdzielac: baza wraca na `auto`. */
	.mr-kronika__lista > .wp-block-post.wp-block-post {
		flex: 0 0 auto;
	}

	.mr-kronika__pozycja {
		min-height: 58px;
	}

	.mr-guides .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mr-objawy {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Zacheta do przewijania ma sens tylko obok tekstu, w drugiej kolumnie.
	   W jednej kolumnie ladowala pod paskiem faktow, czyli juz pod krawedzia
	   ekranu - nie zachecala do niczego, a rozpychala hero ponad 100svh. */
	.mr-hero__scroll {
		display: none;
	}

	/* Pasmo redakcji przestaje byc szyna na cala szyne i staje sie kadrem
	   nad stopka. Proporcja 1680/300 dawala przy 350 px szerokosci pasek
	   62 px - tyle, ze na zdjeciu nie widac juz nic poza rozmyta smuga. */
	.mr-editorial::after {
		aspect-ratio: 16 / 7;
	}
}

@media (max-width: 620px) {
	.mr-wide,
	.mr-content {
		padding-inline: 20px;
	}

	.mr-section-heading {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		justify-items: start;
	}

	.mr-hero h1 {
		font-size: clamp(40px, 13vw, 58px);
	}

	.mr-diagnosis__praca {
		grid-template-columns: minmax(0, 1fr);
	}

	.mr-objawy,
	.mr-dzialy-siatka,
	.mr-guides .wp-block-post-template,
	.mr-watki-lista--reszta .mr-objawy {
		grid-template-columns: minmax(0, 1fr);
	}

	/* KAFEL POZIOMY ZOSTAJE POZIOMY — ROZSTRZYGNIETE 2026-08-26.

	   Pytanie bylo: czy przy 390 px te cztery pozycje maja sie ulozyc pionowo.
	   Nie maja. Nad nimi stoi juz kafel wiodacy z kadrem 16/9 na cala szerokosc;
	   cztery kolejne kafle pionowe to bylby ten sam kafel piec razy pod rzad,
	   sekcja urosla by z okolo 450 px do okolo 1800 px, a rzad jednakowych
	   pudelek jest dokladnie tym wygladem, ktory wlasciciel odrzucil w teczce
	   (`wyglad.profil_ukladu.asymetria`). Jeden duzy kadr plus lista pozycji
	   z miniatura to jest gatunek redakcyjny tej sekcji i on sie na telefonie
	   nie zmienia.

	   Stala miara kadru (92 px) stoi w progu 1080 px razem z uzasadnieniem -
	   tutaj schodza tylko odstepy, bo przy 350 px karty 18 px rynienki
	   i wciecia zabieraja tytulowi wiecej, niz sa warte. */
	.mr-watki-lista--reszta .mr-objaw {
		gap: 0 14px;
		padding-right: 14px;
	}

	.mr-dzial-karta__kadr {
		aspect-ratio: 16 / 9;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mr-section *,
	.mr-section *::before,
	.mr-section *::after {
		scroll-behavior: auto;
		transition-duration: 0s;
	}

	/* Przy ograniczonym ruchu zostaje sam plakat - wideo sie nie odtwarza. */
	.mr-hero__video {
		display: none;
	}
}

/* ============================================================
   POPRAWKA KONTRASTU NA HOVERZE — zgloszona przez wlasciciela 2026-08-25:
   „tekst w hoverze zlewa sie kolorem z boxami".

   Przyczyna: komponent zmienia tlo na ciemne i ustawia `color` na kontenerze,
   ale link w srodku ma WLASNY kolor z palety motywu i go nie dziedziczy.
   Zmierzone: teal #17555A na grafitowym #221F1C daje 1.9:1 przy progu 4.5.

   Regula, ktora z tego wynika: komponent zmieniajacy tlo na hoverze MUSI
   jawnie ustawic kolor kazdego potomka niosacego tekst. Dziedziczenie nie
   wystarcza, bo linki maja wlasna deklaracje o wyzszej specyficznosci.
   ============================================================ */

/* Karta dzialu na najezdzie: plaszczyzna idzie w dywan, wiec KAZDY potomek
   niosacy tekst dostaje kolor jawnie. Zmierzone na dywanie #262F31:
   tytul `tekst` 11,78 · opis `przygasz` 5,70 · licznik `bursztyn` 4,54. */
.mr-dzial-karta:hover .mr-dzial-karta__tytul,
.mr-dzial-karta:hover .mr-dzial-karta__tytul a,
.mr-dzial-karta:hover .mr-dzial-karta__tytul a:visited,
.mr-dzial-karta:focus-within .mr-dzial-karta__tytul,
.mr-dzial-karta:focus-within .mr-dzial-karta__tytul a {
	color: var(--theme-palette-color-4);
}

.mr-dzial-karta:hover .mr-dzial-karta__opis,
.mr-dzial-karta:focus-within .mr-dzial-karta__opis {
	color: var(--theme-palette-color-3);
}

.mr-dzial-karta:hover .mr-dzial-karta__licznik,
.mr-dzial-karta:focus-within .mr-dzial-karta__licznik {
	color: var(--theme-palette-color-1);
}

/* Kafel watku: to samo, plaszczyzna dywanu pod tytulem (11,78) i dzialem (6,53). */
.mr-objaw:hover,
.mr-objaw:hover h3,
.mr-objaw:hover h3 a,
.mr-objaw:hover em,
.mr-objaw:focus-within,
.mr-objaw:focus-within h3,
.mr-objaw:focus-within h3 a {
	color: var(--theme-palette-color-4);
}

.mr-objaw:hover .taxonomy-category,
.mr-objaw:hover .taxonomy-category a,
.mr-objaw:hover span,
.mr-objaw:focus-within .taxonomy-category,
.mr-objaw:focus-within .taxonomy-category a {
	color: var(--theme-palette-color-2);
}

.mr-news-card:hover .mr-card-title,
.mr-guide-card:hover .mr-card-title,
.mr-news-card:focus-within .mr-card-title,
.mr-guide-card:focus-within .mr-card-title {
	color: var(--theme-palette-color-2);
}

/* ============================================================
   BURSZTYN WRACA POD TEKST — 2026-08-26

   HISTORIA: 2026-08-25 bramka `kontrast` wyrzucila bursztyn spod tekstu, bo
   na papierze #EFEEEA mial 2,60 przy progu 4,5. Rola akcentu przeszla wtedy
   awaryjnie na teal. To bylo poprawne rozstrzygniecie DLA JASNEJ PODLOGI.

   TERAZ: podloga jest ciemna (#181F21) i ten sam bursztyn ma 5,54 - przechodzi
   AA takze pod tekstem zwyklym. Zakaz z teczki („NIGDY pod maly tekst na jasnym
   tle") dotyczyl JASNEGO tla i nie obowiazuje tutaj. Wracamy do bursztynu jako
   akcentu nadnaglowkow, bo tego wprost chcial wlasciciel:
   „mega mi sie ten pomaranczowy jako kontrastowe elementy i naglowki podoba".

   Rachunek wlasny, WCAG 2.1, wszystkie trzy plaszczyzny serwisu:
     bursztyn na podlodze #181F21 -> 5,54
     bursztyn na karcie   #212A2C -> 4,86
     bursztyn na dywanie  #262F31 -> 4,54
   Najciezszy przypadek ma 0,04 zapasu nad progiem. Kazde rozjasnienie
   plaszczyzny wypycha go ponizej - dywan nie moze isc wyzej niz #262F31.
   ============================================================ */

.mr-label--accent,
.mr-hero .mr-label--accent {
	color: var(--theme-palette-color-1);
}

.ct-header-cta .ct-button,
.ct-header-cta .ct-button:visited,
.mr-button--primary .wp-block-button__link {
	color: var(--theme-palette-color-7);
	font-weight: 600;
}

/* Etykiety w sekcjach na ciemnym tle. 76 % jasnego tekstu zlozone z podloga
   daje ~#B4BCBD, czyli 8,4 na podlodze - z zapasem nad progiem 4,5. */
.mr-section--dark .mr-label,
.mr-diagnosis .mr-label,
.mr-diagnosis .mr-section-heading__copy p {
	color: color-mix(in srgb, var(--theme-palette-color-4) 76%, transparent);
}

/* Kropka w wordmarku bierze akcent, tak jak w zatwierdzonej makiecie. */
.site-title { font-variation-settings: "wdth" 88; }

/* ============================================================
   HERO NA CIEMNYM TLE. Ta sama regula, co w poprawce hoverow wyzej:
   komponent zmieniajacy tlo MUSI jawnie ustawic kolor kazdego potomka
   niosacego tekst. Dziedziczenie nie wystarcza, bo elementy maja wlasne
   deklaracje z palety o wyzszej specyficznosci.

   Policzone na nowej podlodze #181F21 (prog 4.5, dla h1 prog 3.0 jako duzy
   tekst) - rachunek wlasny, 2026-08-26:
   - stary teal #17555A -> 1.72  ODPADA, dlatego em w h1 i etykieta ida w bursztyn;
   - bursztyn #E07A17   -> 5.54  przechodzi takze pod tekstem zwyklym;
   - tekst jasny #E9EFF0 -> 14.38 przechodzi;
   - stary przygaszony #6B6660 -> 2.36 ODPADA, pasek faktow idzie w tekst jasny
     zlozony do 76 % (~8,4).
   ============================================================ */

.mr-hero.mr-section--dark .mr-label--accent {
	color: var(--theme-palette-color-1);
}

.mr-hero.mr-section--dark h1 {
	color: var(--theme-palette-color-4);
}

.mr-hero.mr-section--dark h1 em {
	color: var(--theme-palette-color-1);
}

.mr-hero.mr-section--dark .mr-hero__lead {
	color: color-mix(in srgb, var(--theme-palette-color-4) 88%, transparent);
}

.mr-hero.mr-section--dark .mr-hero__stats {
	border-top-color: color-mix(in srgb, var(--theme-palette-color-4) 22%, transparent);
	color: color-mix(in srgb, var(--theme-palette-color-4) 76%, transparent);
}

.mr-hero.mr-section--dark .mr-hero__stats strong {
	color: var(--theme-palette-color-4);
}

.mr-hero.mr-section--dark .mr-button--outline .wp-block-button__link {
	border-color: color-mix(in srgb, var(--theme-palette-color-4) 46%, transparent);
	color: var(--theme-palette-color-4);
}

.mr-hero.mr-section--dark .mr-button--outline .wp-block-button__link:hover,
.mr-hero.mr-section--dark .mr-button--outline .wp-block-button__link:focus-visible {
	border-color: var(--theme-palette-color-4);
	background: var(--theme-palette-color-4);
	color: var(--theme-palette-color-7);
}

/* ============================================================
   STOPKA — 2026-08-26

   Bylo: cztery kolumny czystego tekstu, bez znaku, bez kreski, bez rytmu.
   Wygladalo na stopke domyslna motywu, bo nia bylo.

   Wchodzi ZNAK. Nie wordmark: w kolumnie pierwszej stoi juz naglowek „Doba AI"
   pisany przez Piszarza, a wordmark to ten sam napis w krzywych - obok siebie
   czytalyby sie jak pomylka. Zamiast tego lockup: kwadratowy znak + nazwa
   jako tekst, czyli logo zlozone z dwoch czesci, ktore sie nie powtarzaja.
   Wordmark w wersji pelnej stoi w naglowku strony i podpisuje sekcje Redakcja.

   `assets/znak-jasny.svg` to nowy plik: oryginal ma obwodke #221F1C (na ciemnej
   podlodze 1,15 - nie istnieje) i slad w starym tealu #17555A (1,72). Wersja
   jasna ma obwodke w `przygasz` (6,95) i slad w `konsola` (7,97), kropka
   bursztynowa bez zmian.

   KONTRAST (rachunek wlasny, tlo `podloga` #181F21):
   TLO STOPKI NIE JEST MOJE i celowo go nie przejmuje. Blocksy maluje je
   z Customizera na `[data-row*="middle"]` i `[data-row*="bottom"]`, oba na
   `#212A2C`, czyli `karta` - sprawdzone w `uploads/blocksy/css/global.css`.
   Deklaracja tla na `.ct-footer` byla martwa (wiersze ja zakrywaja), a przez
   to komentarz z liczbami na podlodze bylby nieprawda. Stad rachunek na karcie:

   KONTRAST (rachunek wlasny, tlo `karta` #212A2C):
     nazwa marki i linki  `tekst`    #E9EFF0 -> 12,62
     opis, podpisy kolumn `przygasz` #9BAAAC ->  6,10
     najazd linku         `konsola`  #4FC3CC ->  6,99
     nota z kreska        `przygasz`         ->  6,10
   ============================================================ */
.ct-footer {
	border-top: 1px solid var(--theme-palette-color-5);
	color: var(--theme-palette-color-4);
}

.ct-footer [data-row="middle"] > .ct-container {
	padding-block: clamp(48px, 5vw, 84px) clamp(36px, 4vw, 60px);
}

/* Znak marki. `inline-flex` z odstepem robi z naglowka lockup, a nie napis
   z obrazkiem doklejonym z boku. */
.ct-footer [data-column="widget-area-1"] .ct-widget > h3 {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 14px;
	color: var(--theme-palette-color-4);
	font-family: "Archivo", system-ui, sans-serif;
	font-size: 26px;
	font-variation-settings: "wdth" 92;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1;
}

.ct-footer [data-column="widget-area-1"] .ct-widget > h3::before {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	background: url("assets/znak-jasny.svg") center / contain no-repeat;
	content: "";
}

.ct-footer [data-column="widget-area-1"] p {
	max-width: 46ch;
	margin: 0;
	color: var(--theme-palette-color-3);
	font-size: 16px;
	line-height: 1.55;
}

/* Nota o nazwie serwisu jest przypisem, nie akapitem - dostaje krój meta,
   bursztynowa kreske po lewej i schodzi o stopien nizej w hierarchii.
   `przygasz` #9BAAAC na podlodze #181F21 = 6,95. */
.ct-footer [data-column="widget-area-1"] .mr-stopka__nota {
	margin-top: 18px;
	padding-left: 14px;
	border-left: 2px solid var(--theme-palette-color-1);
	color: var(--theme-palette-color-3);
	font-family: var(--mr-meta-font);
	font-size: 11.5px;
	letter-spacing: .08em;
	line-height: 1.6;
	text-transform: uppercase;
}

/* Podpisy kolumn ida w krój meta - ten sam glos, co etykiety sekcji wyzej. */
.ct-footer .widget-title,
.ct-footer [data-column] .ct-widget > .widget-title {
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid color-mix(in srgb, var(--theme-palette-color-5) 70%, transparent);
	color: var(--theme-palette-color-3);
	font-family: var(--mr-meta-font);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ct-footer .widget-menu {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-footer .widget-menu li {
	margin: 0;
}

.ct-footer .widget-menu a {
	display: inline-block;
	color: var(--theme-palette-color-4);
	font-size: 16.5px;
	line-height: 1.35;
	text-decoration: none;
	transition: color .15s ease, transform .15s ease;
}

.ct-footer .widget-menu a:hover,
.ct-footer .widget-menu a:focus-visible {
	transform: translateX(3px);
	color: var(--theme-palette-color-2);
}

.ct-footer [data-row="bottom"] > .ct-container {
	padding-block: 20px 26px;
	border-top: 1px solid var(--theme-palette-color-5);
}

.ct-footer [data-row="bottom"] .ct-footer-copyright {
	color: var(--theme-palette-color-3);
	font-family: var(--mr-meta-font);
	font-size: 11.5px;
	letter-spacing: .1em;
	line-height: 1.6;
	text-transform: uppercase;
}

.ct-footer a:focus-visible {
	outline: 3px solid var(--theme-palette-color-1);
	outline-offset: 3px;
}

/* ============================================================
   SZABLON WPISU — 521 PX PUSTEJ KOLUMNY, 2026-08-26

   Zgloszenie wlasciciela: „we wpisach jest dalej cos takiego, ze 2/3 ekranu
   jest tylko tresc, a reszta to puste miejsce".

   PRZYCZYNA, ZMIERZONA, NIE ZGADNIETA. Pojemnik `.ct-container` na wpisie ma
   atrybut `data-sidebar="right"`. Blocksy (`static/bundle/sidebar.min.css`)
   robi z niego wtedy siatke:

     [data-sidebar]      { display: grid; grid-template-columns: var(--grid-template-columns, 100%);
                           grid-column-gap: var(--sidebar-gap, 4%) }
     [data-sidebar=right]{ --grid-template-columns: minmax(100px, 1fr) var(--sidebar-width, 27%) }

   Rachunek na szynie 1680: 1680 x 27 % = 453,59 px kolumny paska plus
   1680 x 4 % = 67,2 px odstepu; tresc dostaje 1680 - 453,59 - 67,2 = 1159,22.
   Zmierzone w oknie 1920: `grid-template-columns: 1159.22px 453.594px`,
   `article` 1159 px. Zgadza sie co do drugiego miejsca po przecinku.

   Czego brakowalo w poprzednich probach: `.single-post .ct-container
   { max-width: 1680px }` z `mr-seo.php` naprawialo SZEROKOSC pojemnika, ktora
   byla juz dobra. Waska byla KOLUMNA W SIATCE, a tej `max-width` nie dotyka.

   I rzecz, ktora rozstrzyga sprawe: `aside` w drugiej kolumnie jest PUSTY -
   `innerHTML` ma zero znakow, `textContent.length` = 0. Blocksy rezerwuje
   kolumne za sam atrybut, niezaleznie od tego, czy pasek cokolwiek renderuje.
   To nie jest „za waski artykul", tylko 521 px oddane pustemu elementowi.

   NAPRAWA CELUJE W TEN WARUNEK, NIE W OBJAW. Nie ma tu `width: 100%` na
   `article` - jest zdanie „siatka dwukolumnowa obowiazuje, gdy pasek boczny
   cos niesie". Gdy ktos wstawi widget do paska, `:empty` przestaje pasowac
   i uklad dwukolumnowy wraca sam, bez ruszania tego pliku.

   Szerokosc artykulu po naprawie jest jawna, bo jego naturalna miara to suma
   trzech rzeczy, ktore juz stoja w `mr-seo.php`: kolumna prozy (74ch = 754,58 px
   przy Newsreaderze 18 px), odstep siatki `.mr-artykul` (96 px przy 1920)
   i szyna boczna (380 px) - razem 1231 px. Rozciagniecie artykulu na pelne
   1680 przenioslo by dziure z prawej krawedzi w srodek ukladu, miedzy proze
   a szyne. Blok idzie wiec na 1240 px i staje na srodku szyny.
   ============================================================ */
.ct-container[data-sidebar]:has(> aside:empty) {
	--grid-template-columns: minmax(0, 1fr);
	--sidebar-gap: 0px;
}

.ct-container[data-sidebar]:has(> aside:empty) > aside:empty {
	display: none;
}

.single-post .ct-container[data-sidebar]:has(> aside:empty) > article {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
}

/* ============================================================
   PANEL MOBILNY — MENU HAMBURGEROWE, 2026-08-26

   ZGLOSZENIE WLASCICIELA: pamietaj o menu hamburgerowym - i osobno, z listy
   czterech rzeczy, ktore widzi od razu: domyslne menu buildera.

   CO BYLO, ZMIERZONE PRZY 390 px:
     - guzik `.ct-header-trigger` mial 18x18 px. Blocksy trzyma jego rozmiar
       w `[class*=ct-toggle] { --toggle-button-size: 18px }` (static/bundle),
       a `--theme-icon-size: 18px` idzie z Customizera. 18 px to nie jest cel
       dotyku, to jest ikona bez celu dotyku wokol niej.
     - panel niosl JEDNA pozycje - naglowkowe menu poziome. Cztery dzialy
       stawaly w rzedzie obok siebie, wielkimi literami po 12 px, wysrodkowane
       w pionie na wysokosc calego ekranu. Nie bylo znaku, wyszukiwarki,
       guzika Najnowsze ani stron redakcyjnych.
     - plaszczyzna panelu to `rgba(18, 21, 25, 0.98)` z Blocksy. To NIE jest
       kolor nieprzezroczysty: bramka `kontrast` schodzi po przodkach do
       pierwszego nieprzezroczystego `background-color` i 0,98 by pominela,
       schodzac az na `body`. Panel z polprzezroczystym tlem to panel,
       ktorego kontrastu nie da sie zmierzyc.

   CO WCHODZI. Sklad panelu ustawia `narzedzia/panel-mobilny.php` przez
   `header_placements` - piec KOMPONENTOW buildera jeden pod drugim:
   znak (`offcanvas-logo`), wyszukiwarka (`text`), cztery dzialy
   (`mobile-menu`), Najnowsze (`button`), strony redakcyjne
   (`text~redakcja`). Wyszukiwarka i drugie menu ida komponentem HTML,
   bo Blocksy wyklucza je z offcanvas jawnie w konfiguracji
   (`search/config.php`, `menu-secondary/config.php`: `excluded_from`).
   Ten arkusz odpowiada wylacznie za WYGLAD tych pieciu blokow.

   PLASZCZYZNY I KONTRAST (rachunek wlasny, WCAG 2.1):
     panel        `podloga` #181F21  - NIEPRZEZROCZYSTY, mierzalny
       znak i nazwy dzialow  `tekst`    #E9EFF0 -> 14,38
       etykiety i strony     `przygasz` #9BAAAC ->  6,95
       najazd linku          `konsola`  #4FC3CC ->  7,97
       ikona zamkniecia      `przygasz`         ->  6,95 (prog 3,0 - sterownik)
     pole szukania `karta`  #212A2C
       wpisany tekst         `tekst`            -> 12,62
       podpowiedz w polu     `przygasz`         ->  6,10
       obwodka pola          `przygasz`         ->  6,10 (prog 3,0 - sterownik)
     guzik Najnowsze  bursztyn #E07A17 z atramentem `podloga` -> 5,54

   Zadna z tych plaszczyzn nie jest nowa i zadna nie przekracza sufitu
   jasnosci L <= 0,0274 z teczki: podloga ma L 0,01284, karta 0,0219.
   Bursztyn zostaje uzywalny pod tekstem wszedzie w panelu.

   CELE DOTYKU: kazdy sterownik panelu ma co najmniej 48 px wysokosci,
   guzik hamburgera 44x44.
   ============================================================ */

/* GUZIK HAMBURGERA. Rozmiar idzie WLASNA ZMIENNA komponentu, nie nadpisaniem
   `width`/`height`: `[class*=ct-toggle]` czyta `--toggle-button-size` i to
   ona jest tu przeznaczonym pokretlem. Klasa podwojona nie z kaprysu -
   `static/bundle/main.min.css` laduje sie PO arkuszu motywu potomnego
   (zmierzona kolejnosc <link>: global.css, blocksy/style.css, mojrobot,
   ... main.min.css), wiec przy rownej specyficznosci (0,1,0) wygralby bundle.
   `.ct-header-trigger.ct-toggle` to (0,2,0) i obie klasy naprawde stoja
   na elemencie.

   Ujemny margines koncowy oddaje guzikowi 12 px z wciecia szyny. Bez niego
   ikona przesuwa sie o 13 px do srodka - guzik rosnie od prawej krawedzi
   w lewo, a ikona zostaje na jego srodku. Zmierzone przy 390 px: prawa
   krawedz ikony ladowala 36 px od brzegu ekranu, a lewa krawedz znaku marki
   stoi 23 px od swojego - naglowek przestawal byc symetryczny. Z marginesem
   ikona konczy sie 24,4 px od brzegu, czyli tyle samo, co znak z drugiej strony.

   MARGINES MA WLASNE POKRETLO I NIE JEST NIM `--toggle-button-margin-end`.
   Wyliczone z listy regul pasujacych do elementu:
     [class*=ct-toggle]                                  margin-inline: auto 0   (0,1,0)
     #header [data-items] > *                            margin: var(--margin, 0 10px)  (1,1,0)
     [data-column=end] [data-items=primary] > :last-child --margin: 0 0 0 10px   (0,3,0)
   Regula z `#header` bije obie proby zapisu wprost - i `--toggle-button-margin-end`,
   i `margin-inline-end` na samej klasie (zmierzone: zmienna dochodzi, ale
   `margin-right` dalej wylicza sie na 0). Wlasciwym miejscem jest `--margin`,
   a zeby je nadpisac, trzeba przebic (0,3,0) - stad `#header` w selektorze.
   Lewe 10 px zostaje takie, jak bylo: to odstep od sasiada w szynie.

   Prawa krawedz guzika siega 11,4 px od brzegu ekranu i NIE wychodzi poza
   niego: przepelnienie poziome zostaje zerowe (sprawdzone pomiarem). */
#header .ct-header-trigger.ct-toggle {
	--toggle-button-size: 44px;
	--toggle-button-radius: 3px;
	--margin: 0 -12px 0 10px;
}

#header .ct-header-trigger.ct-toggle:focus-visible {
	outline: 3px solid var(--theme-palette-color-1);
	outline-offset: 2px;
}

/* PLASZCZYZNA PANELU. Nieprzezroczysta z tego samego powodu, co tlo
   `.mr-section--dark` na gorze pliku: bramka kontrastu wyznacza tlo tekstu,
   wchodzac po przodkach do pierwszego nieprzezroczystego `background-color`.
   Selektor z id i dwiema klasami (1,2,0) bije regule z Customizera
   `[data-header*="type-1"] #offcanvas .ct-panel-inner` kolejnoscia. */
#offcanvas.ct-panel.ct-header .ct-panel-inner {
	background-color: var(--theme-palette-color-7);
	border-left: 1px solid var(--theme-palette-color-5);
}

/* Kurtyna pod panelem. Blocksy zostawia ja przezroczysta (`CT_CSS_SKIP_RULE`),
   wiec strona za panelem swieci pelna jasnoscia i panel nie odcina sie od niej.
   Przyciemnienie jest ozdobne - nie niesie tresci, nie podlega progowi. */
#offcanvas.ct-panel.ct-header {
	background-color: color-mix(in srgb, var(--theme-palette-color-7) 72%, transparent);
}

/* Wciecie panelu i rytm miedzy blokami. Blocksy daje kazdemu dziecku
   `margin: 0 0 20px 0` regula `#offcanvas .ct-panel-content-inner > *`
   o specyficznosci (1,1,0) z bundle - stad tu (1,2,0). To ten sam mechanizm,
   co `margin-block-end: 1.5em` opisany przy siatkach kart: odstepy robi
   `gap`, marginesy sa szkoda. */
#offcanvas.ct-panel .ct-panel-inner {
	--panel-padding: 24px;
}

#offcanvas.ct-panel .ct-panel-content-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 26px;
	padding: 4px 24px calc(28px + env(safe-area-inset-bottom));
}

#offcanvas.ct-panel .ct-panel-content-inner > * {
	margin: 0;
}

/* Wiersz zamkniecia. Znak marki stoi PONIZEJ, jako pierwszy blok tresci -
   Blocksy trzyma guzik zamkniecia w osobnym `.ct-panel-actions` nad trescia
   i nie da sie ich wsadzic do jednego wiersza bez ruszania szablonu motywu
   nadrzednego. Zamiast tego oba dostaja to samo wciecie boczne i wysokosc
   celu dotyku, wiec czytaja sie jako jeden naglowek panelu. */
#offcanvas.ct-panel .ct-panel-actions {
	justify-content: flex-end;
	min-height: 44px;
	padding: 14px 24px 0;
}

#offcanvas.ct-panel .ct-toggle-close {
	--toggle-button-size: 44px;
	--toggle-button-padding: 12px;
	--toggle-button-margin-end: -12px;
	--toggle-button-radius: 3px;
	--theme-icon-color: var(--theme-palette-color-3);
	--theme-icon-hover-color: var(--theme-palette-color-4);
}

#offcanvas.ct-panel .ct-toggle-close:focus-visible {
	outline: 3px solid var(--theme-palette-color-1);
	outline-offset: 2px;
}

/* ZNAK. Ten sam wordmark, co w naglowku strony - `custom_logo` motywu,
   wersja jasna. Kreska pod nim zamyka naglowek panelu. */
#offcanvas.ct-panel [data-id="offcanvas-logo"] {
	display: block;
	align-self: flex-start;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--theme-palette-color-5);
	line-height: 0;
}

#offcanvas.ct-panel [data-id="offcanvas-logo"] img {
	width: 148px;
	height: auto;
}

#offcanvas.ct-panel .ct-header-text {
	display: block;
	width: 100%;
}

/* Blok HTML w panelu: Blocksy owija tresc w `.entry-content`, ktoremu doklada
   `margin-block-end: 1.5em`. Klasa podwojona z tego samego powodu, co przy
   `.mr-section` - regula Blocksy ma (0,1,0), a jego arkusz laduje sie pozniej. */
#offcanvas.ct-panel .ct-header-text .entry-content > .mr-panel-blok.mr-panel-blok {
	margin-block: 0;
}

/* Etykieta bloku - ten sam glos, co etykiety sekcji na stronie: kroj danych,
   wielkie litery, bursztynowa kreska. Kreska jest ozdobna, wiec nie podlega
   progowi 3:1; sam tekst ma na podlodze 6,95. */
.mr-panel-etykieta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	color: var(--theme-palette-color-3);
	font-family: var(--mr-meta-font);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.mr-panel-etykieta::before {
	width: 20px;
	height: 2px;
	background: var(--theme-palette-color-1);
	content: "";
}

/* WYSZUKIWARKA. Pole na plaszczyznie `karta`, o stopien nad podloga panelu -
   glebia idzie w plaszczyzne i kreske, nie w rozjasnianie, bo sufit jasnosci
   L <= 0,0274 nie pozwala isc wyzej niz `dywan`. */
.mr-panel-szukaj__pole {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 48px;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--theme-palette-color-3);
	border-radius: 3px;
	background: var(--theme-palette-color-8);
}

/* KLASA PODWOJONA NA POLU I NA GUZIKU. Blocksy stroi formularze regulami
   o selektorach `[type=submit]` i `input[type=search]` - specyficznosc (0,1,0),
   ta sama, co pojedyncza klasa, a `static/bundle/main.min.css` laduje sie PO
   arkuszu motywu potomnego. Zmierzone bez podwojenia: guzik lupy dostawal
   bursztynowe tlo `--theme-button-background-initial-color` i tracil swoja
   lewa kreske, bo skrot `border: var(--theme-button-border)` kasowal ja w
   calosci. Nie `!important` - to nie jest wojna o wlasnosc, tylko o kolejnosc.

   16 px w polu to nie wybor typograficzny, tylko warunek: Safari na iOS
   powieksza cala strone, gdy dotknie sie pola o mniejszym rozmiarze. */
.mr-panel-szukaj .mr-panel-szukaj__wpis {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--theme-palette-color-4);
	font-family: "Newsreader", Georgia, serif;
	font-size: 16px;
	line-height: 1.4;
	appearance: none;
}

.mr-panel-szukaj .mr-panel-szukaj__wpis::placeholder {
	color: var(--theme-palette-color-3);
	opacity: 1;
}

.mr-panel-szukaj .mr-panel-szukaj__wpis:focus {
	outline: 0;
	box-shadow: none;
}

.mr-panel-szukaj__pole:focus-within {
	border-color: var(--theme-palette-color-1);
	box-shadow: 0 0 0 1px var(--theme-palette-color-1);
}

.mr-panel-szukaj .mr-panel-szukaj__guzik {
	display: grid;
	place-items: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--theme-palette-color-5);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--theme-palette-color-3);
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease;
}

.mr-panel-szukaj .mr-panel-szukaj__guzik svg {
	fill: currentcolor;
}

.mr-panel-szukaj .mr-panel-szukaj__guzik:hover,
.mr-panel-szukaj .mr-panel-szukaj__guzik:focus-visible {
	background: var(--theme-palette-color-6);
	color: var(--theme-palette-color-4);
}

/* CZTERY DZIALY. To jest glowna nawigacja panelu, wiec dostaje skale
   naglowkowa i kroj wyswietlaniowy serwisu - Archivo, nie proze. Kazda
   pozycja ma wlasna linie i wlasna kreske; kreski robia rytm listy,
   ktorego cztery slowa w rzedzie nie mialy.

   Selektor z id, bo `.mobile-menu .ct-menu-link` z bundle ma (0,2,0)
   i laduje sie pozniej. */
#offcanvas.ct-panel .mobile-menu {
	width: 100%;
	padding-top: 2px;
}

#offcanvas.ct-panel .mobile-menu > ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border-top: 0;
	list-style: none;
}

#offcanvas.ct-panel .mobile-menu li {
	display: block;
	margin: 0;
}

#offcanvas.ct-panel .mobile-menu li + li {
	border-top: 1px solid color-mix(in srgb, var(--theme-palette-color-5) 70%, transparent);
}

#offcanvas.ct-panel .mobile-menu .ct-menu-link {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 10px 0;
	color: var(--theme-palette-color-4);
	font-family: "Archivo", system-ui, sans-serif;
	font-size: 26px;
	font-variation-settings: "wdth" 104;
	font-weight: 700;
	letter-spacing: -.018em;
	line-height: 1.1;
	text-decoration: none;
	text-transform: none;
	transition: color .15s ease;
}

#offcanvas.ct-panel .mobile-menu .ct-menu-link:hover,
#offcanvas.ct-panel .mobile-menu .ct-menu-link:focus-visible,
#offcanvas.ct-panel .mobile-menu li[class*="current-menu-"] > .ct-menu-link {
	color: var(--theme-palette-color-1);
}

#offcanvas.ct-panel .mobile-menu .ct-menu-link:focus-visible {
	outline: 3px solid var(--theme-palette-color-1);
	outline-offset: 2px;
}

/* GUZIK NAJNOWSZE. Ten sam element `button`, co w naglowku desktopowym -
   w panelu przestaje byc malym guzikiem obok menu i staje sie pelnym
   wierszem wezwania. `[data-size=small]` z bundle ma (0,2,0), stad id. */
#offcanvas.ct-panel .ct-header-cta {
	display: block;
	width: 100%;
}

#offcanvas.ct-panel .ct-header-cta .ct-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	border-radius: 3px;
	background: var(--theme-palette-color-1);
	color: var(--theme-palette-color-7);
	font-family: "Archivo", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
}

#offcanvas.ct-panel .ct-header-cta .ct-button:hover,
#offcanvas.ct-panel .ct-header-cta .ct-button:focus-visible {
	background: var(--theme-palette-color-2);
	color: var(--theme-palette-color-7);
}

/* STRONY REDAKCYJNE. Drugi, cichszy poziom: kroj prozy zamiast
   wyswietlaniowego, `przygasz` zamiast jasnego tekstu, bez kresek.
   Ma sie czytac jako przypis pod nawigacja, a nie jako druga nawigacja. */
.mr-panel-strony {
	padding-top: 4px;
	border-top: 1px solid var(--theme-palette-color-5);
}

.mr-panel-strony ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mr-panel-strony li {
	margin: 0;
}

.mr-panel-strony a {
	display: flex;
	align-items: center;
	min-height: 48px;
	color: var(--theme-palette-color-3);
	font-size: 16.5px;
	line-height: 1.35;
	text-decoration: none;
	transition: color .15s ease;
}

.mr-panel-strony a:hover,
.mr-panel-strony a:focus-visible {
	color: var(--theme-palette-color-2);
}

.mr-panel-strony a:focus-visible {
	outline: 3px solid var(--theme-palette-color-1);
	outline-offset: 2px;
}

/* ============================================================
   CELE DOTYKU PONIZEJ 1081 px — 2026-08-26

   Zmierzone przy 390 px na stronie glownej: 44 odnosniki i guziki mialy
   mniej niz 44 px w ktorymkolwiek wymiarze. Palec nie ma kursora, wiec
   wysokosc wiersza tekstu NIE jest celem dotyku - i to jest jedyny powod
   tych regul, nie estetyka.

   DWA PROGI, BO WCAG MA DWA:
     44x44 - kryterium 2.5.5 (AAA) i wytyczna platform mobilnych. Dostaja je
             SAMODZIELNE sterowniki: hamburger, zamkniecie panelu, strzalki
             i kropki karuzeli, tytuly w kronice, linki stopki, guziki.
     24x24 - kryterium 2.5.8 (AA, obowiazkowe). Dostaja je plakietki dzialu
             wewnatrz kart. Nie ida na 44, bo w karcie o wysokosci 92 px
             plakietka na 44 px zjadlaby polowe kafla, a caly kafel jest juz
             jednym wielkim celem: `.mr-objaw h3 a::after { inset: 0 }`.
             Tam, gdzie kafel NIE ma rozciagnietego odnosnika (karty newsow),
             tytul dostaje pelne 44 px osobno.

   POWIEKSZENIE IDZIE WCIECIEM Z UJEMNYM MARGINESEM, nie zmiana kroju ani
   odstepow. Suma wciecia i marginesu to zero, wiec tekst zostaje dokladnie
   tam, gdzie stal, a rosnie sam prostokat trafienia.

   PROG 1080 px, nie nowy: to ten sam prog, na ktorym uklady schodza do jednej
   kolumny. Desktop zostaje nietkniety - wlasciciel go przyjal.
   ============================================================ */

/* Poza progiem tez: 42 px to o dwa piksele za malo, a panel diagnostyki
   ma ten sam guzik na kazdej szerokosci. */
.mr-podglad__link {
	min-height: 44px;
}

@media (max-width: 1080px) {
	/* POWIEKSZENIE JEST KIERUNKOWE, NIE SYMETRYCZNE — ZMIERZONY POWOD.
	   Pierwsza proba dawala kazdemu celowi `padding: 5px; margin: -5px`
	   ze wszystkich stron. Prostokaty trafienia sasiadow zaczely wtedy
	   NACHODZIC na siebie po 5 px (wykryte tym samym pomiarem nakladania,
	   ktory zlapal sekcje Redakcji: trzy pary tytul-plakietka przy 390 px).
	   Dwa cele dotyku, ktore sie pokrywaja, to gorszy blad niz cel za maly:
	   palec na granicy trafia w to, co lezy wyzej w drzewie, a nie w to,
	   w co celowal. Kazdy cel rosnie wiec TYLKO w strone, gdzie ma wolne
	   miejsce, i tyle, ile go tam jest. */

	/* KRONIKA. Tytul jest jedynym odnosnikiem pozycji i mial 42 px. Rosnie
	   w DOL, bo nad nim, w odstepie 4 px, stoi wiersz daty i dzialu,
	   a pod nim jest 10 px wciecia samej pozycji. */
	.mr-kronika__tytul a {
		display: block;
		min-height: 44px;
		padding-bottom: 3px;
		margin-bottom: -3px;
	}

	/* KARTY NEWSOW i PORADNIKOW nie maja rozciagnietego odnosnika
	   (w przeciwienstwie do `.mr-objaw` i `.mr-dzial-karta`), wiec ich tytul
	   jest calym celem. Brakowalo mu jednego piksela - rosnie w dol, bo nad
	   nim stoi wiersz meta z wlasnym celem. */
	.mr-news-card--small h3 a,
	.mr-news-card__body h3 a,
	.mr-guide-card h3 a {
		display: block;
		min-height: 44px;
		padding-bottom: 2px;
		margin-bottom: -2px;
	}

	/* PLAKIETKI DZIALU W KARTACH: prog 24 px. Nad plakietka stoi tytul
	   w odstepie 8-10 px, pod nia konczy sie karta - wiec 2 px w gore,
	   6 px w dol i 5 px na boki. 14 + 2 + 6 = 22 px wysokosci prostokata
	   i 25 px szerokosci przy najkrotszej plakietce „AI" (15 px tekstu).
	   Dwa piksele ponizej 24 sa swiadome: wieksze wciecie zaczyna zabierac
	   miejsce tytulowi nad plakietka, a caly kafel `.mr-objaw` jest juz
	   jednym celem przez `h3 a::after { inset: 0 }`. */
	.mr-objaw .taxonomy-category a,
	.mr-meta-row .taxonomy-category a,
	.mr-guide-card__footer .taxonomy-category a {
		display: inline-flex;
		align-items: center;
		padding: 2px 5px 6px;
		margin: -2px -5px -6px;
	}

	/* PLAKIETKA DZIALU W KRONICE rosnie ODWROTNIE - w gore, bo pod nia,
	   w odstepie 4 px, lezy tytul, a nad nia 10 px wciecia pozycji. */
	.mr-kronika__dzial a {
		display: inline-flex;
		align-items: center;
		padding: 8px 5px 0;
		margin: -8px -5px 0;
	}

	/* STOPKA. Linki menu mialy 22 px. Odstep siatki schodzi z 9 px do 2 px,
	   zeby rytm kolumny zostal ten sam mimo dwukrotnie wyzszych wierszy:
	   bylo 22 + 9 = 31 px podzialki, jest 44 + 2 = 46 px. */
	.ct-footer .widget-menu {
		gap: 2px;
	}

	.ct-footer .widget-menu a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ============================================================
   CELE DOTYKU POZA STRONA GLOWNA — 2026-08-26

   Trzy pozycje z pomiaru archiwum i wpisu przy 390 i 768 px. Wszystkie leza
   w cudzych arkuszach i zaden z nich nie jest moj do edycji:

     `.mr-objaw-b`   41 px  - mu-plugins/mr-seo.php:465 (padding 10px, 14,5/1,3)
     `.mr-lista-kat` 42 px  - mu-plugins/mr-seo.php:891 (padding 8px, 15,5)
     `.entry-meta a` 12 px  - Blocksy, meta wpisu

   Dwa pierwsze arkusze wypisuje `mr-seo.php` jako `mr-artykul-inline-css`
   i robi to PO arkuszu motywu potomnego (zmierzona kolejnosc w <head>:
   ... mojrobot/style.css, main.min.css, ..., mr-artykul-inline-css).
   Przy rownej specyficznosci wygralby tamten, stad selektory z przodkiem.

   Oba elementy sa juz `display: flex; align-items: center`, wiec sama
   `min-height` wystarczy - tekst zostaje na swoim miejscu, rosnie pudelko.
   ============================================================ */
@media (max-width: 1080px) {
	.mr-karta-boczna .mr-objaw-b,
	.mr-karta-boczna .mr-lista-kat a {
		min-height: 44px;
	}

	/* KARTA WPISU w archiwum i w wynikach szukania. Tytul dwuwierszowy ma
	   46 px i przechodzi sam; JEDNOWIERSZOWY ma 21 px - zlapane na
	   `/?s=humanoid`, gdzie w wynikach staja strony o krotkich tytulach.
	   Tu nie wystarczy wciecie z ujemnym marginesem: wolnego miejsca jest
	   po 10 px z gory i z dolu (`gap` karty), czyli za malo. Rosnie wiec samo
	   pudelko - kartom z dlugim tytulem nie zmienia to nic, bo juz maja 44 px. */
	.mr-karta-wpisu .mr-karta-wpisu__tytul a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/* Meta wpisu: dzial obok daty w naglowku artykulu. Wiersz meta jest lista
	   pozioma, wiec powiekszenie idzie wciecien z ujemnym marginesem - tak
	   samo, jak plakietki dzialu w kartach na stronie glownej. Prog 24 px
	   (WCAG 2.5.8), nie 44: to jest podpis pod tytulem, nie sterownik. */
	.entry-header .entry-meta a {
		display: inline-flex;
		align-items: center;
		padding: 6px 5px;
		margin: -6px -5px;
	}
}

/* --- Wpis: spis tresci, "Czytaj dalej", metryczka zrodel (klasy generuje
   motyw/narzedzia/buduj-wpis.mjs; runda tresci 2026-09-01) --- */
.entry-content .mr-spis{background:var(--karta,#212A2C); border:1px solid var(--kreska,#445254);
	border-left:3px solid var(--konsola,#4FC3CC); padding:18px 22px; margin:8px 0 28px;}
.mr-spis .mr-spis-tytul{font-family:var(--font-meta); font-size:11px; letter-spacing:.12em;
	text-transform:uppercase; color:var(--przygasz,#9BAAAC); margin:0 0 10px;}
.entry-content ul.mr-spis-lista{list-style:none; padding-left:0; margin:0; columns:2; column-gap:36px;}
.mr-spis-lista li{break-inside:avoid; padding:5px 0; margin:0;}
.mr-spis-lista a{text-decoration:none; font-weight:600; font-family:var(--font-display); font-size:15px;
	color:var(--tekst,#E9EFF0);}
.mr-spis-lista a:hover{color:var(--konsola,#4FC3CC); text-decoration:underline;}
.entry-content ul.mr-czytaj{list-style:none; padding-left:0; columns:2; column-gap:40px;}
.mr-czytaj li{break-inside:avoid; padding:10px 0; margin:0; border-bottom:1px solid var(--kreska,#445254);}
.mr-czytaj a{font-family:var(--font-display); font-weight:600; text-decoration:none;}
.mr-czytaj a:hover{text-decoration:underline;}
.entry-content h2#zrodla-i-data-sprawdzenia{font-size:1.05rem; letter-spacing:.02em; margin-top:56px;
	padding-top:20px; border-top:1px solid var(--kreska,#445254);}
.entry-content h2#zrodla-i-data-sprawdzenia ~ p, .entry-content h2#zrodla-i-data-sprawdzenia ~ ul:not(.mr-czytaj){
	font-size:.92em; color:var(--przygasz,#9BAAAC);}
.entry-content h2#zrodla-i-data-sprawdzenia ~ ul:not(.mr-czytaj) a{color:var(--konsola,#4FC3CC);}
@media (max-width:720px){ .entry-content ul.mr-spis-lista, .entry-content ul.mr-czytaj{columns:1;} }

/* ============================================================
   STRONY TEMATYCZNE (warstwa wyjasniajaca, od 2026-09-05)

   Strony z mapy `seo/mapa-10-podstron.json` skladaja sie z komponentow, ktore
   juz na tej stronie sa: `.mr-section`, `.mr-wide`, `.mr-stack`,
   `.mr-section-heading`, `.mr-editorial__rules` + `.mr-editorial-rule`.
   Nizej stoi WYLACZNIE to, czego w tym slowniku nie bylo:

   1. naglowek strony na zdjeciu (`core/cover`), bo hero strony glownej stoi
      na wideo i ma wlasny uklad z liczbami,
   2. numer kroku,
   3. kadr w kolumnie,
   4. cytat-przyklad (tresc promptu, nie cudza wypowiedz),
   5. lista zrodel na koncu strony,
   6. rzad trzech kart — `.mr-editorial__rules` jest domyslnie jednokolumnowy,
      a trzy kolumny to gorna granica z rejestru wyjatkow (pozycja 5).

   Zaden z tych selektorow nie dotyka `.entry-content` ani komponentow wpisu:
   strony i wpisy maja rozne wlascicielstwo stylu i mieszanie ich konczy sie
   tym, ze poprawka na stronie rusza tysiac wpisow.
   ============================================================ */

/* Strona zlozona z sekcji nie ma kolumny czytelniczej: mu-plugin `mr-seo`
   zwezal `.page .entry-content` do 74ch i sekcje staly wcieta wyspa (741 px
   w oknie 1440). Mu-plugin omija teraz strony z metadana `_mr_uklad=sekcje`
   i wystawia klase `mr-uklad-sekcje` na <body>; tu zdejmujemy jeszcze limit
   szerokosci dzieci, ktory naklada uklad `is-layout-constrained` rdzenia. */
body.mr-uklad-sekcje .entry-content,
body.mr-uklad-sekcje .entry-content > * {
	max-width: none;
}

body.mr-uklad-sekcje .entry-content > .alignfull {
	width: 100%;
	margin-inline: 0;
}

.mr-strona-hero {
	align-items: end;
	padding-block: clamp(64px, 8vw, 132px);
	color: var(--theme-palette-color-4);
}

/* Przycienienie kadru jest KIERUNKOWE, nie rowne. Rowna zaslona (dimRatio
   bloku) gasi cale zdjecie po to, zeby tekst wygral przy lewej krawedzi -
   czyli placi caly kadr za jeden rog. Gradient zostawia twarz i neony po
   prawej prawie nietkniete, a pod kolumna tekstu daje mocniejsze podloze
   niz rowne 80%. Nadpisujemy tlo warstwy przycienienia bloku, zeby nie
   dokladac drugiego elementu do markupu. */
.mr-strona-hero .wp-block-cover__background {
	background-image: linear-gradient(
		100deg,
		color-mix(in srgb, var(--theme-palette-color-7) 94%, transparent) 0%,
		color-mix(in srgb, var(--theme-palette-color-7) 88%, transparent) 34%,
		color-mix(in srgb, var(--theme-palette-color-7) 58%, transparent) 62%,
		color-mix(in srgb, var(--theme-palette-color-7) 34%, transparent) 100%
	);
	opacity: 1;
}

.mr-strona-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: none;
	padding: 0;
}

.mr-strona-hero__copy {
	display: flex;
	max-width: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.mr-strona-hero__tytul {
	max-width: 18ch;
	color: var(--theme-palette-color-4);
	font-size: clamp(38px, 5.6vw, 84px);
	font-variation-settings: "wdth" 106;
	letter-spacing: -.022em;
	line-height: .98;
	text-wrap: balance;
}

.mr-strona-hero__lead {
	max-width: 58ch;
	color: color-mix(in srgb, var(--theme-palette-color-4) 82%, transparent);
	font-size: clamp(17px, 1.4vw, 21px);
	line-height: 1.5;
}

/* Etykieta i metryczka na kadrze: kadr jest ciemny, ale nie jednolity, wiec
   przygaszona szarosc z palety (color-3) potrafi na jasnym miejscu zdjecia
   zejsc ponizej AA. Bierzemy jasny tekst i przygaszamy go domieszka, nie
   osobnym odcieniem — kontrast liczy sie wtedy wzgledem przycienienia kadru. */
.mr-strona-hero .mr-meta {
	color: color-mix(in srgb, var(--theme-palette-color-4) 70%, transparent);
}

/* Karty w siatce nie moga miec marginesow blokowych. Blocksy/rdzen nadaje
   dzieciom grupy `is-layout-flow` `margin-block-end: var(--theme-content-spacing)`,
   a w siatce ten margines nie zwija sie z gap - kazda karta dostaje wtedy wlasny
   ogon, karty przestaja byc rownej wysokosci i miedzy nimi widac ciemne pasy
   zamiast 2 px szczeliny. Ta sama przyczyna, co przy stykaniu sekcji wyzej. */
.mr-editorial__rules {
	align-items: stretch;
}

.mr-editorial__rules > .wp-block-group {
	margin-block: 0;
}

/* Rzad trzech kart. Granica trzech kolumn jest w rejestrze wyjatkow (5):
   `auto-fill` w kontenerze 1680 px rozlewa sie na piec i rozjezdza z makieta. */
.mr-rzed--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.mr-rzed--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* AKORDEONY FAQ — `core/details`, bez ani jednej linii JavaScriptu.
   Blok rdzenia daje <details>/<summary>, czyli otwieranie, klawiature i odczyt
   przez czytniki ekranu za darmo. Wlasny skrypt dalby to samo gorzej.
   Strzalka jest wlasna (`::after`), bo domyslny trojkat `list-style` przegladarki
   nie da sie ustawic po prawej stronie ani obrocic plynnie. */
.mr-faq {
	display: grid;
	gap: 2px;
	overflow: hidden;
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 4px;
	background: var(--theme-palette-color-7);
}

.mr-faq .wp-block-details {
	margin-block: 0;
	background: var(--theme-palette-color-8);
	transition: background .15s ease;
}

.mr-faq .wp-block-details[open] {
	background: color-mix(in srgb, var(--theme-palette-color-1) 5%, var(--theme-palette-color-8));
}

.mr-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	/* 22 px z gory i z dolu daje cel dotykowy powyzej 44 px razem z linia tekstu -
	   to jest sterownik, wiec obowiazuje go prog 44, nie 24. */
	padding: 22px 24px;
	/* Blocksy nadaje `margin-block-end: var(--theme-content-spacing)` takze
	   elementowi <summary>. W <details> ten margines sie nie zwija i doklada
	   27 px pustego pola pod zamknietym pytaniem - wiersze wygladaly na wyzsze,
	   niz sa, a tekst siedzial przy gornej krawedzi. */
	margin-block: 0;
	color: var(--theme-palette-color-4);
	cursor: pointer;
	/* Pytanie jest naglowkiem listy, wiec idzie krojem naglowkowym (Archivo),
	   nie szeryfowym krojem tekstu (Newsreader). Bez tego akordeon czytal sie
	   jak akapit z ozdobna strzalka. */
	font-family: Archivo, var(--theme-font-family), sans-serif;
	font-size: 18px;
	font-variation-settings: "wdth" 102;
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
	transition: color .15s ease;
}

.mr-faq summary::-webkit-details-marker,
.mr-faq summary::marker {
	display: none;
	content: "";
}

.mr-faq summary:hover,
.mr-faq .wp-block-details[open] summary {
	color: var(--theme-palette-color-1);
}

.mr-faq summary:focus-visible {
	outline: 3px solid var(--theme-palette-color-1);
	outline-offset: -3px;
}

/* Strzalka rysowana granica kwadratu obroconego o 45 stopni - jeden element,
   zero zasobow, skaluje sie z tekstem. */
.mr-faq summary::after {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	margin-top: -4px;
	transform: rotate(45deg);
	transition: transform .2s ease;
	content: "";
}

.mr-faq .wp-block-details[open] summary::after {
	transform: rotate(-135deg);
	margin-top: 3px;
}

.mr-faq .wp-block-details > :not(summary) {
	max-width: 88ch;
	margin-block: 0;
	padding: 0 24px 24px;
	color: var(--theme-palette-color-3);
	font-size: 16.5px;
	line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
	.mr-faq summary::after {
		transition: none;
	}
}

/* Karta-przeciwwaga: stoi na koncu listy przykladow i mowi, czego zasada NIE
   zalatwia. Bursztynowa krawedz odroznia ja od przykladow do przeklejenia,
   zeby czytelnik nie wzial ostrzezenia za czwarty gotowiec. */
.mr-regula--odwrotna {
	border-left: 3px solid var(--theme-palette-color-1);
}

.mr-krok {
	position: relative;
	padding-top: 26px;
}

.mr-krok__nr {
	color: var(--theme-palette-color-1);
	font-family: var(--mr-meta-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
}

.mr-strona-foto img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	object-fit: cover;
}

/* Kolumna z kadrem ma byc tej samej wysokosci co kolumna z trescia obok —
   inaczej zdjecie konczy sie w polowie i pod nim zieje pusty pas. */
.mr-uklad--7-5 .wp-block-column,
.mr-uklad--5-7 .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mr-uklad--7-5 .mr-strona-foto,
.mr-uklad--5-7 .mr-strona-foto {
	flex: 1 1 auto;
	min-height: 260px;
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
}

/* Cytat-przyklad. To NIE jest cudza wypowiedz, tylko tresc do przepisania do
   okna rozmowy — stad krój danych, a nie kursywa cytatu, i stad brak podpisu. */
.mr-cytat--przyklad {
	margin: 0;
	padding: 14px 16px;
	border-left: 3px solid var(--theme-palette-color-2);
	background: var(--theme-palette-color-7);
}

.mr-cytat--przyklad p {
	color: var(--theme-palette-color-4);
	font-family: var(--mr-meta-font);
	font-size: 14px;
	letter-spacing: 0;
	line-height: 1.6;
	text-transform: none;
}

.mr-zrodla--lista {
	max-width: 92ch;
	padding-left: 18px;
	color: var(--theme-palette-color-3);
	font-size: 15.5px;
	line-height: 1.6;
}

.mr-zrodla--lista li {
	margin-bottom: 8px;
}


/* ============================================================
   IKONY, STRZALKI I RUCH STRON TEMATYCZNYCH (2026-09-05)

   IKONY SA MASKA, NIE OBRAZKIEM. `mask-image` z data-URI bierze kolor
   z `background-color`, czyli z palety motywu - ta sama ikona sluzy na
   bursztynie i na przygaszonej szarosci i zmieni sie razem z paleta.
   Obrazek `background-image` mialby kolor wpisany w plik i przy zmianie
   palety zostalby w starej. Zero zapytan sieciowych, zero blokow `core/html`,
   wiec rejestr wyjatkow motywu nie rosnie.

   RUCH NADAJE `assets/strony.js`, NIE ARKUSZ. Klasa `mr-ruch` na <html>
   pojawia sie dopiero, gdy skrypt wystartuje i uzytkownik nie prosi o
   ograniczony ruch. Bez tego warunku strona bez JavaScriptu zostalaby pusta -
   ukrycie byloby na stale, a nic by go nie zdjelo.
   ============================================================ */

/* --- ikony w kartach --- */

.mr-editorial-rule[class*="mr-ikona--"]::before {
	display: block;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	background-color: var(--theme-palette-color-1);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	transition: transform .2s ease;
	content: "";
}

/* Ikona nad naglowkiem w kolumnie bez karty. Ten sam zestaw masek, inne
   pudelko: w karcie ikona jest osobnym wierszem siatki, tutaj stoi nad
   naglowkiem i ma wlasny odstep. */
.mr-naglowek-ikona[class*="mr-ikona--"]::before {
	display: block;
	width: 26px;
	height: 26px;
	margin-bottom: 14px;
	background-color: var(--theme-palette-color-1);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	content: "";
}

/* Karta z ikona ma o oczko mniejszy odstep - ikona przejmuje role wizualnego
   poczatku karty i podworko nad tekstem robi sie zbedne. */
.mr-editorial-rule[class*="mr-ikona--"] {
	gap: 10px;
}

.mr-editorial-rule[class*="mr-ikona--"]:hover::before {
	transform: translateY(-2px) scale(1.06);
}

.mr-ikona--adres::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M3%2012h18M12%203c2.5%202.7%202.5%2015.3%200%2018M12%203c-2.5%202.7-2.5%2015.3%200%2018%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M3%2012h18M12%203c2.5%202.7%202.5%2015.3%200%2018M12%203c-2.5%202.7-2.5%2015.3%200%2018%22/%3E%3C/svg%3E"); }
.mr-ikona--konto::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%223.6%22/%3E%3Cpath%20d=%22M4.5%2020c.6-3.9%203.6-6%207.5-6s6.9%202.1%207.5%206%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%223.6%22/%3E%3Cpath%20d=%22M4.5%2020c.6-3.9%203.6-6%207.5-6s6.9%202.1%207.5%206%22/%3E%3C/svg%3E"); }
.mr-ikona--jezyk::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%2014.5c0%201.4-1.1%202.5-2.5%202.5H9l-4%203v-3H6.5C5.1%2017%204%2015.9%204%2014.5v-8C4%205.1%205.1%204%206.5%204h11C18.9%204%2020%205.1%2020%206.5z%22/%3E%3Cpath%20d=%22M8.5%208.5h7M8.5%2012h4.5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%2014.5c0%201.4-1.1%202.5-2.5%202.5H9l-4%203v-3H6.5C5.1%2017%204%2015.9%204%2014.5v-8C4%205.1%205.1%204%206.5%204h11C18.9%204%2020%205.1%2020%206.5z%22/%3E%3Cpath%20d=%22M8.5%208.5h7M8.5%2012h4.5%22/%3E%3C/svg%3E"); }
.mr-ikona--gosc::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M2.5%2012S6%205.5%2012%205.5%2021.5%2012%2021.5%2012%2018%2018.5%2012%2018.5%202.5%2012%202.5%2012z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%223%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M2.5%2012S6%205.5%2012%205.5%2021.5%2012%2021.5%2012%2018%2018.5%2012%2018.5%202.5%2012%202.5%2012z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%223%22/%3E%3C/svg%3E"); }
.mr-ikona--klucz::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%228%22%20cy=%2212%22%20r=%224%22/%3E%3Cpath%20d=%22M12%2012h9M18%2012v3.5M15%2012v2.5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%228%22%20cy=%2212%22%20r=%224%22/%3E%3Cpath%20d=%22M12%2012h9M18%2012v3.5M15%2012v2.5%22/%3E%3C/svg%3E"); }
.mr-ikona--tarcza::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203l7%203v6c0%204.2-2.8%207.6-7%209-4.2-1.4-7-4.8-7-9V6z%22/%3E%3Cpath%20d=%22M9%2012l2%202%204-4%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203l7%203v6c0%204.2-2.8%207.6-7%209-4.2-1.4-7-4.8-7-9V6z%22/%3E%3Cpath%20d=%22M9%2012l2%202%204-4%22/%3E%3C/svg%3E"); }
.mr-ikona--iskra::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203l1.9%205.6L19.5%2010l-5.6%201.9L12%2017.5l-1.9-5.6L4.5%2010l5.6-1.4z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203l1.9%205.6L19.5%2010l-5.6%201.9L12%2017.5l-1.9-5.6L4.5%2010l5.6-1.4z%22/%3E%3C/svg%3E"); }
.mr-ikona--wzwyz::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2020V5M6%2011l6-6%206%206%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2020V5M6%2011l6-6%206%206%22/%3E%3C/svg%3E"); }
.mr-ikona--gwiazda::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203.5l2.6%205.5%205.9.8-4.3%204.2%201.1%206-5.3-2.9-5.3%202.9%201.1-6L3.5%209.8l5.9-.8z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203.5l2.6%205.5%205.9.8-4.3%204.2%201.1%206-5.3-2.9-5.3%202.9%201.1-6L3.5%209.8l5.9-.8z%22/%3E%3C/svg%3E"); }
.mr-ikona--blysk::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M13.5%203L5.5%2013.5H11L10.5%2021l8-10.5H13z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M13.5%203L5.5%2013.5H11L10.5%2021l8-10.5H13z%22/%3E%3C/svg%3E"); }
.mr-ikona--koperta::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%225.5%22%20width=%2218%22%20height=%2213%22%20rx=%222%22/%3E%3Cpath%20d=%22M3.8%206.7l8.2%206%208.2-6%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%225.5%22%20width=%2218%22%20height=%2213%22%20rx=%222%22/%3E%3Cpath%20d=%22M3.8%206.7l8.2%206%208.2-6%22/%3E%3C/svg%3E"); }
.mr-ikona--ksiazka::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%205.5A2.5%202.5%200%20016.5%203H20v15H6.5A2.5%202.5%200%20004%2020.5z%22/%3E%3Cpath%20d=%22M4%2018.5h16V21H6.5A2.5%202.5%200%20014%2018.5z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%205.5A2.5%202.5%200%20016.5%203H20v15H6.5A2.5%202.5%200%20004%2020.5z%22/%3E%3Cpath%20d=%22M4%2018.5h16V21H6.5A2.5%202.5%200%20014%2018.5z%22/%3E%3C/svg%3E"); }
.mr-ikona--olowek::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2020l1-4.2L16.2%204.6a2%202%200%20012.8%200l.4.4a2%202%200%20010%202.8L8.2%2019z%22/%3E%3Cpath%20d=%22M14.5%206.5l3%203%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2020l1-4.2L16.2%204.6a2%202%200%20012.8%200l.4.4a2%202%200%20010%202.8L8.2%2019z%22/%3E%3Cpath%20d=%22M14.5%206.5l3%203%22/%3E%3C/svg%3E"); }
.mr-ikona--uwaga::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%204l8.5%2015h-17z%22/%3E%3Cpath%20d=%22M12%2010v4M12%2016.6v.1%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%204l8.5%2015h-17z%22/%3E%3Cpath%20d=%22M12%2010v4M12%2016.6v.1%22/%3E%3C/svg%3E"); }
.mr-ikona--warstwy::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203.5l8.5%204.2-8.5%204.2-8.5-4.2z%22/%3E%3Cpath%20d=%22M4%2012.5l8%204%208-4M4%2016.5l8%204%208-4%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203.5l8.5%204.2-8.5%204.2-8.5-4.2z%22/%3E%3Cpath%20d=%22M4%2012.5l8%204%208-4M4%2016.5l8%204%208-4%22/%3E%3C/svg%3E"); }
.mr-ikona--data::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223.5%22%20y=%225%22%20width=%2217%22%20height=%2215%22%20rx=%222%22/%3E%3Cpath%20d=%22M3.5%209.5h17M8%203v4M16%203v4%22/%3E%3Cpath%20d=%22M8%2013.5h3v3H8z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223.5%22%20y=%225%22%20width=%2217%22%20height=%2215%22%20rx=%222%22/%3E%3Cpath%20d=%22M3.5%209.5h17M8%203v4M16%203v4%22/%3E%3Cpath%20d=%22M8%2013.5h3v3H8z%22/%3E%3C/svg%3E"); }

/* --- strzalki --- */

/* Odnosnik „dalej". Strzalka jest elementem `::after`, a nie znakiem w tresci:
   znak w tekscie trafia do wyniku wyszukiwania, do czytnika ekranu i do
   zajawki, a poza tym nie da sie go plynnie przesunac. */
.mr-link-dalej {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	text-decoration: none;
}

.mr-link-dalej::after {
	width: 18px;
	height: 10px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2012h17M14%206l6%206-6%206%22/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2012h17M14%206l6%206-6%206%22/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform .2s ease;
	content: "";
}

.mr-link-dalej:hover::after,
.mr-link-dalej:focus-visible::after {
	transform: translateX(5px);
}

.mr-link-dalej:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Numer kroku dostaje kreske, ktora rosnie przy najechaniu na karte. */
.mr-krok__nr {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mr-krok__nr::after {
	width: 24px;
	height: 2px;
	background: var(--theme-palette-color-1);
	transition: width .25s ease;
	content: "";
}

.mr-krok:hover .mr-krok__nr::after {
	width: 56px;
}

/* --- ruch: odslanianie --- */

html.mr-ruch .mr-odslon {
	opacity: 0;
	transform: translateY(20px);
}

html.mr-ruch .mr-odslon--widoczny {
	opacity: 1;
	transform: none;
	transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
}

/* Karty w siatce wchodza po kolei, ale opoznienie ma granice. Piata karta
   czekajaca 400 ms wyglada jak zacinajaca sie strona, dlatego kaskada
   konczy sie na czwartej pozycji. */
html.mr-ruch .mr-editorial__rules.mr-odslon > .wp-block-group {
	opacity: 0;
	transform: translateY(14px);
}

html.mr-ruch .mr-editorial__rules.mr-odslon--widoczny > .wp-block-group {
	opacity: 1;
	transform: none;
	transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
}

html.mr-ruch .mr-editorial__rules.mr-odslon--widoczny > .wp-block-group:nth-child(2) { transition-delay: .07s; }
html.mr-ruch .mr-editorial__rules.mr-odslon--widoczny > .wp-block-group:nth-child(3) { transition-delay: .14s; }
html.mr-ruch .mr-editorial__rules.mr-odslon--widoczny > .wp-block-group:nth-child(n+4) { transition-delay: .21s; }

/* --- ruch: kadry --- */

/* Zblizenie o 5% w 26 sekund. Ruch na granicy zauwazalnosci: kadr ma zyc,
   a nie jechac. `transform` idzie po kompozytorze, wiec nie przelicza ukladu
   strony przy kazdej klatce. */
@keyframes mr-zblizenie {
	from { transform: scale(1); }
	to   { transform: scale(1.05); }
}

.mr-strona-hero .wp-block-cover__image-background {
	transform-origin: 62% 45%;
}

html.mr-ruch .mr-strona-hero .mr-kadr--zyje {
	animation: mr-zblizenie 26s ease-in-out infinite alternate;
}

/* Kadr w kolumnie zbliza sie przy najechaniu - ta sama zasada, co w karcie
   wiodacej na stronie glownej. */
.mr-strona-foto img {
	transition: transform .45s ease;
}

.mr-strona-foto:hover img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.mr-link-dalej::after,
	.mr-krok__nr::after,
	.mr-strona-foto img,
	.mr-editorial-rule[class*="mr-ikona--"]::before {
		transition: none;
	}

	.mr-strona-foto:hover img {
		transform: none;
	}
}


/* ============================================================
   MEGA MENU (2026-09-05)

   Struktura jest natywna: `li.mr-mega > ul.sub-menu`. Klase `mr-mega` nadaje
   `functions.php` kazdej pozycji nadrzednej pierwszego poziomu w menu glownym.
   Bez tego arkusza zostaje zwykla lista rozwijana Blocksy — i to jest celowe,
   bo panel ma byc ulepszeniem, a nie warunkiem dzialania nawigacji.
   ============================================================ */

/* Szerokosc panelu ustawiamy DWOMA drogami, bo Blocksy podaje ja przez wlasna
   zmienna `--dropdown-width` w arkuszu wstawianym do naglowka — sama regula na
   `.sub-menu` przegrywala i panel scisnal sie do 200 px (zmierzone). Zmienna
   ustawiona na pozycji nadrzednej dziala u zrodla, a podwojona klasa zabezpiecza
   na wypadek, gdyby motyw kiedys przestal tej zmiennej uzywac. */
.mr-mega {
	--dropdown-width: min(940px, calc(100vw - 48px));
}

.mr-mega.mr-mega > .sub-menu {
	width: min(940px, calc(100vw - 48px));
}

.mr-mega > .sub-menu {
	display: grid;
	/* Trzy kolumny to gorna granica z rejestru wyjatkow motywu (pozycja 5).
	   Przy dziewieciu pozycjach daje rowne 3x3 bez sierot w ostatnim rzedzie. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
	width: min(940px, calc(100vw - 48px));
	max-height: none;
	padding: 2px;
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 4px;
	background: var(--theme-palette-color-7);
}

.mr-mega > .sub-menu > .menu-item {
	width: auto;
}

.mr-mega > .sub-menu > .menu-item > a {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	align-items: start;
	gap: 4px 14px;
	/* 18 px w pionie plus dwie linie tekstu daje cel dotykowy grubo powyzej 44 px. */
	padding: 18px 20px;
	background: var(--theme-palette-color-8);
	color: var(--theme-palette-color-4);
	font-family: Archivo, var(--theme-font-family), sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.mr-mega > .sub-menu > .menu-item > a::before {
	grid-row: span 2;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	background-color: var(--theme-palette-color-1);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform .2s ease;
	content: "";
}

.mr-mega > .sub-menu > .menu-item > a:hover,
.mr-mega > .sub-menu > .menu-item > a:focus-visible {
	background: color-mix(in srgb, var(--theme-palette-color-1) 8%, var(--theme-palette-color-8));
	color: var(--theme-palette-color-1);
}

.mr-mega > .sub-menu > .menu-item > a:hover::before {
	transform: translateX(2px);
}

/* Opis pozycji. Kroj tekstowy i przygaszony kolor — ma byc podpisem, nie drugim
   naglowkiem, inaczej panel czyta sie jak sciana rownorzednych hasel. */
.mr-mega__opis {
	display: block;
	grid-column: 2;
	color: var(--theme-palette-color-3);
	font-family: var(--theme-font-family), serif;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.45;
}

.mr-mega > .sub-menu > .menu-item > a:hover .mr-mega__opis {
	color: var(--theme-palette-color-3);
}

.mr-mega .menu-item-300 > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M3%2012h18M12%203c2.5%202.7%202.5%2015.3%200%2018M12%203c-2.5%202.7-2.5%2015.3%200%2018%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M3%2012h18M12%203c2.5%202.7%202.5%2015.3%200%2018M12%203c-2.5%202.7-2.5%2015.3%200%2018%22/%3E%3C/svg%3E"); }
.mr-mega .menu-item-301 > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203l1.9%205.6L19.5%2010l-5.6%201.9L12%2017.5l-1.9-5.6L4.5%2010l5.6-1.4z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203l1.9%205.6L19.5%2010l-5.6%201.9L12%2017.5l-1.9-5.6L4.5%2010l5.6-1.4z%22/%3E%3C/svg%3E"); }
.mr-mega .menu-item-302 > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M13.5%203L5.5%2013.5H11L10.5%2021l8-10.5H13z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M13.5%203L5.5%2013.5H11L10.5%2021l8-10.5H13z%22/%3E%3C/svg%3E"); }
.mr-mega .menu-item-303 > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2020l1-4.2L16.2%204.6a2%202%200%20012.8%200l.4.4a2%202%200%20010%202.8L8.2%2019z%22/%3E%3Cpath%20d=%22M14.5%206.5l3%203%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2020l1-4.2L16.2%204.6a2%202%200%20012.8%200l.4.4a2%202%200%20010%202.8L8.2%2019z%22/%3E%3Cpath%20d=%22M14.5%206.5l3%203%22/%3E%3C/svg%3E"); }
.mr-mega .menu-item-304 > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%2014.5c0%201.4-1.1%202.5-2.5%202.5H9l-4%203v-3H6.5C5.1%2017%204%2015.9%204%2014.5v-8C4%205.1%205.1%204%206.5%204h11C18.9%204%2020%205.1%2020%206.5z%22/%3E%3Cpath%20d=%22M8.5%208.5h7M8.5%2012h4.5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%2014.5c0%201.4-1.1%202.5-2.5%202.5H9l-4%203v-3H6.5C5.1%2017%204%2015.9%204%2014.5v-8C4%205.1%205.1%204%206.5%204h11C18.9%204%2020%205.1%2020%206.5z%22/%3E%3Cpath%20d=%22M8.5%208.5h7M8.5%2012h4.5%22/%3E%3C/svg%3E"); }
.mr-mega .menu-item-305 > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203.5l2.6%205.5%205.9.8-4.3%204.2%201.1%206-5.3-2.9-5.3%202.9%201.1-6L3.5%209.8l5.9-.8z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203.5l2.6%205.5%205.9.8-4.3%204.2%201.1%206-5.3-2.9-5.3%202.9%201.1-6L3.5%209.8l5.9-.8z%22/%3E%3C/svg%3E"); }
.mr-mega .menu-item-306 > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223.5%22%20y=%225%22%20width=%2217%22%20height=%2215%22%20rx=%222%22/%3E%3Cpath%20d=%22M3.5%209.5h17M8%203v4M16%203v4%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223.5%22%20y=%225%22%20width=%2217%22%20height=%2215%22%20rx=%222%22/%3E%3Cpath%20d=%22M3.5%209.5h17M8%203v4M16%203v4%22/%3E%3C/svg%3E"); }
.mr-mega .menu-item-307 > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%223.6%22/%3E%3Cpath%20d=%22M4.5%2020c.6-3.9%203.6-6%207.5-6s6.9%202.1%207.5%206%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%223.6%22/%3E%3Cpath%20d=%22M4.5%2020c.6-3.9%203.6-6%207.5-6s6.9%202.1%207.5%206%22/%3E%3C/svg%3E"); }
.mr-mega .menu-item-308 > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%228%22%20cy=%2212%22%20r=%224%22/%3E%3Cpath%20d=%22M12%2012h9M18%2012v3.5M15%2012v2.5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%228%22%20cy=%2212%22%20r=%224%22/%3E%3Cpath%20d=%22M12%2012h9M18%2012v3.5M15%2012v2.5%22/%3E%3C/svg%3E"); }

/* PANEL MOBILNY. Blocksy sklada menu do panelu bocznego i renderuje je BEZ klasy
   `mr-mega` (panel dostaje wlasny przebieg, bez `theme_location`), wiec reguly
   panelu tam nie siegaja — i dobrze, bo siatka trzy na trzy nie ma na telefonie
   sensu. Zostaja same opisy, ktore na malym ekranie pomagaja nawet bardziej.
   Odnosnik pozycji jest tam ukladem elastycznym, wiec bez `flex-basis` opis
   wchodzil OBOK tytulu i lamal go na dwie linie (zmierzone na 390 px). */
@media (max-width: 999px) {
	/* Odnosnik pozycji ma w panelu `display:flex` i `flex-wrap:nowrap`, wiec sama
	   podstawa 100% nic nie dawala — opis wychodzil poza krawedz zamiast zejsc
	   do nowej linii (zmierzone: szerokosc opisu 272 px przy panelu 326 px).
	   Zawijanie wlaczamy na odnosniku, bo to on jest kontenerem elastycznym. */
	.sub-menu > .menu-item > a {
		flex-wrap: wrap;
	}

	.mr-mega__opis {
		flex: 1 0 100%;
		margin-top: 3px;
		font-size: 13px;
		line-height: 1.4;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mr-mega > .sub-menu > .menu-item > a,
	.mr-mega > .sub-menu > .menu-item > a::before {
		transition: none;
	}
}

/* Tytul karty bedacy odnosnikiem ma wygladac jak naglowek, nie jak link w tekscie.
   Ta sama zasada, ktora obowiazuje juz karty wyjasnien na stronie glownej
   (`.mr-guide-card h3 a`): kolor dziedziczony, akcent dopiero przy najechaniu. */
.mr-editorial-rule h3 a {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}

.mr-editorial-rule h3 a:hover,
.mr-editorial-rule h3 a:focus-visible {
	color: var(--theme-palette-color-1);
}

.mr-editorial-rule:hover h3 a {
	color: var(--theme-palette-color-1);
}