/* Treść wpisów i stron: zwykłe bloki WordPressa (lista, obrazek, cytat, przyciski, tabela, rozwijane, plik,
   kolumny, film, galeria) w wyglądzie strony. Plik motywu, nie makiety: assets/css/style.css zostaje 1:1 z makietą.
   Ładowany na stronie i w edytorze (add_editor_style).

   Bezpieczeństwo układu makiety: selektory działają tylko na klasach bloków WordPressa, na .lista i .h4
   oraz na parach elementów, których obecne strony nie mają (sprawdzone 13.11 na wszystkich stronach;
   po zmianach: node weryfikacja/porownaj.mjs i porownaj.mjs podstrony → bez różnic, wzorcownik.mjs → wygląd).

   „body” przed klasami bloków: style bloków WordPress dokleja w treści strony, czyli po tym pliku,
   więc przy tej samej wadze selektora wygrywałyby one. W edytorze „body” zamienia się na .editor-styles-wrapper. */

/* Odstępy między blokami: wpis, strona bez bloków motywu (.article) i „Sekcja” (.sec > .wrap). */
:is(.article, .sec > .wrap) > :is(.wp-block-image, .wp-block-quote, .wp-block-pullquote, .wp-block-buttons, .wp-block-table, .wp-block-details, .wp-block-file, .wp-block-columns, .wp-block-embed, .wp-block-media-text, .wp-block-gallery, .wp-block-group, .wp-block-video):not(.alignleft, .alignright) { margin: 32px 0; }
:is(.article, .sec > .wrap) > .wp-block-separator { margin: 40px 0; }
:is(.article, .sec > .wrap) > :first-child { margin-top: 0; }
:is(.article, .sec > .wrap) > :last-child { margin-bottom: 0; }
:is(.article, .sec > .wrap) > .wp-block-details + .wp-block-details { margin-top: -32px; border-top: 0; } /* kilka pod rząd = jedna lista pytań */
.article > * + .h2 { margin-top: 48px; }
:is(.article, .sec > .wrap) > :is(.h4, .h5, .h6) { margin: 32px 0 10px; }
.sec > .wrap > p + p { margin-top: 18px; }
.sec > .wrap > :is(p:not([class]), .lista) + .h3 { margin-top: 40px; }
.sec > .wrap > :is(.h3, .h4, .h5, .h6) + p:not([class]) { margin-top: 14px; }
/* W kolumnach (.prose, odpowiedź na pytanie) odstęp daje już „gap”, więc bez marginesów. */
:is(.prose, .acc-panel) > :is(figure, .wp-block-buttons, .wp-block-file, .wp-block-columns, .wp-block-separator, .lista) { margin-block: 0; }
:is(.wp-block-column, .wp-block-group, .wp-block-media-text__content, .wp-block-quote, .wp-block-details) > * + * { margin-top: 12px; }

/* Nagłówki od czwartego poziomu w dół: bez szeryfów, jak mocniejszy akapit (H2 i H3 mają style makiety). */
:is(.h4, .h5, .h6) { margin-block: 0; font: 600 18px/1.4 var(--sans); color: var(--grafit); }

/* Listy: kropka jak w nadtytułach (.eyebrow) i na osi czasu, numery Lorą w kolorze nagłówków. */
.lista { margin-block: 18px; }
.lista > li + li { margin-top: 8px; } /* odstęp marginesem, nie „gap”: w edytorze flex wyśrodkowałby punkty (bloki z marginesem „auto”) */
ul.lista > li { position: relative; padding-left: 26px; }
ul.lista > li::before { content: ""; position: absolute; left: 3px; top: calc(.825em - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--pomarancz); }
ol.lista { padding-left: 28px; list-style: decimal; }
ol.lista > li { padding-left: 4px; }
ol.lista > li::marker { color: var(--zielen); font-family: var(--serif); font-weight: 500; }
.lista .lista { margin-block: 8px 0; }

/* Zdjęcia, film i galeria: zaokrąglone jak zdjęcia makiety; podpis drobny i szary. */
body :is(.wp-block-image, .wp-block-media-text__media, .wp-block-video) :is(img, video),
body .wp-block-embed__wrapper { border-radius: 16px; }
body .wp-block-embed__wrapper { overflow: hidden; }
body :is(.wp-block-image, .wp-block-table, .wp-block-embed, .wp-block-video) > figcaption { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--pole); text-align: left; }

/* Cytat jak blok „Cytat” makiety (.quote): pomarańczowy znak cudzysłowu nad tekstem (ten sam kształt i kolor),
   kursywa Lora, podpis bezszeryfowy. Tekst mniejszy niż w sekcji, bo kolumna wpisu jest węższa. */
body .wp-block-quote { margin-inline: 0; font: italic 400 21px/1.45 var(--serif); color: var(--grafit); text-wrap: pretty; }
body .wp-block-quote::before { content: ""; display: block; width: 40px; height: 34px; margin-bottom: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath fill='%23D07D32' d='M0 40V24.6C0 12.4 6.2 4.3 18.4 0l2.4 4.6C13.9 7.6 10.6 12 10.3 18H20v22H0Zm27 0V24.6C27 12.4 33.2 4.3 45.4 0l2.4 4.6C40.9 7.6 37.6 12 37.3 18H47v22H27Z'/%3E%3C/svg%3E") no-repeat 0 0 / contain; }
body .wp-block-quote cite { display: block; margin-top: 16px; font: 600 15px/1.4 var(--sans); }
body .wp-block-pullquote { margin-inline: 0; padding: 32px 0; border: 0; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); text-align: center; }
body .wp-block-pullquote blockquote { margin: 0; }
body .wp-block-pullquote p { font: italic 400 24px/1.4 var(--serif); color: var(--zielen); text-wrap: balance; }
body .wp-block-pullquote cite { display: block; margin-top: 16px; font: 600 15px/1.4 var(--sans); color: var(--grafit); text-transform: none; }

/* Przyciski jak .btn--primary / .btn--secondary makiety (tekst może się zawinąć na telefonie). */
body .wp-block-buttons { gap: 12px; }
body .wp-block-button__link { display: inline-block; padding: 16px 28px; border: 0; border-radius: 8px; background: var(--zielen); color: #fff; font: 600 16px/20px var(--sans); text-align: center; text-decoration: none; transition: background-color .15s; }
body .wp-block-button__link:hover { background: var(--zielen-d); color: #fff; }
body .wp-block-button.is-style-outline > .wp-block-button__link { border: 0; padding: 16px 28px; box-shadow: inset 0 0 0 1.5px var(--zielen); background: transparent; color: var(--zielen); }
body .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--zielen-10); }

/* Linia oddzielająca w kolorze linii makiety. */
body .wp-block-separator { margin-inline: 0; border: 0; border-top: 1px solid var(--linia); opacity: 1; }

/* Tabela: poziome linie jak listy makiety, nagłówek w kolorze nagłówków. Na telefonie przewija się sama tabela. */
body .wp-block-table { overflow-x: auto; }
body .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
body .wp-block-table :is(th, td) { padding: 12px 16px 12px 0; border: 0; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: top; }
body .wp-block-table :is(thead, tfoot) { border: 0; }
body .wp-block-table thead th { border-bottom-color: var(--zielen); font-weight: 600; color: var(--zielen); }
body .wp-block-table.is-style-stripes { border: 0; }
body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: #EEF3F5; }
body .wp-block-table.is-style-stripes :is(th, td) { padding-left: 12px; }

/* Rozwijane: jak pytania w „Jak pracuję” (.acc), plus w kółku zmienia się w minus na niebieskim. */
body .wp-block-details { border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
body .wp-block-details > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; list-style: none; cursor: pointer; font: 500 21px/1.3 var(--serif); color: var(--grafit); }
body .wp-block-details > summary::-webkit-details-marker { display: none; }
body .wp-block-details > summary::after { content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linia);
	background: linear-gradient(var(--zielen), var(--zielen)) center / 14px 2px no-repeat, linear-gradient(var(--zielen), var(--zielen)) center / 2px 14px no-repeat; }
body .wp-block-details[open] > summary::after { box-shadow: none; background: linear-gradient(#fff, #fff) center / 14px 2px no-repeat, var(--zielen); }
body .wp-block-details[open] > :last-child { margin-bottom: 24px; }

/* Plik do pobrania: nazwa jak link, „Pobierz” jak przycisk z obrysem. */
body .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; font-size: inherit; }
body .wp-block-file > a:not(.wp-block-file__button) { font-weight: 600; }
body .wp-block-file .wp-block-file__button { margin: 0; padding: 12px 22px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--zielen); background: transparent; color: var(--zielen); font: 600 15px/20px var(--sans); text-decoration: none; }
body .wp-block-file .wp-block-file__button:hover { background: var(--zielen-10); }

/* Okładka (zdjęcie z tekstem na nim): zaokrąglona jak zdjęcia; nagłówki w kolorze tekstu okładki, nie niebieskie. */
body .wp-block-cover { border-radius: 16px; overflow: hidden; }
body .wp-block-cover__inner-container :is(.h2, .h3, .h4, .h5, .h6) { color: inherit; }

/* Kolumny i „Media i tekst”: tekst równo z lewą krawędzią treści, na telefonie pod zdjęciem. */
body .wp-block-columns { gap: 24px 32px; }
body .wp-block-media-text > .wp-block-media-text__content { padding: 0 0 0 32px; }
body .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content { padding: 0 32px 0 0; }

/* Okładka wpisu bez obrazka wyróżniającego (inc/podstrony.php): pole jak w makiecie, w środku falka z logo. */
.ph--okladka .wave-dot { width: 28%; height: 16px; transform: none; }

@media (max-width: 600px) {
	body .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content { padding: 16px 0 0; }
}

@media (min-width: 1024px) {
	.article > * + .h2 { margin-top: 64px; }
	:is(.h4, .h5, .h6) { font-size: 19px; }
	body .wp-block-quote { font-size: 24px; } /* jak cytat makiety na telefonie; 30 px z sekcji byłoby za duże w kolumnie wpisu */
	body .wp-block-pullquote p { font-size: 30px; }
	body .wp-block-details > summary { gap: 24px; padding: 28px 0; font-size: 24px; }
}

/* Łagodne przejścia między stronami: natywne View Transitions, bez skryptu (Chrome i Edge 126+, Safari 18.2+;
   Firefox przechodzi zwyczajnie). Cała strona przenika się w 0,4 s; nagłówek, który na obu stronach wygląda
   tak samo, przy przenikaniu stoi. Bez osobnego view-transition-name na nagłówku: zmieniał jego piksele na
   1440 px także poza przejściem. „Szybkie wyjście” prowadzi na inną domenę, więc zostaje natychmiastowe.
   Przy „ogranicz ruch” w systemie wyłączone, tak jak płynne przewijanie do kotwic w style.css. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root),
	::view-transition-new(root) { animation-duration: .4s; }
}

/* Bezwładne przewijanie (Lenis, functions.php): w trakcie rozpędu ramki (film, mapa) nie łapią kółka myszy,
   inaczej przewijanie stawałoby, gdy pod kursor wjedzie film. Z dist/lenis.css tylko ta reguła: pozostałe
   dotyczą opcji, których motyw nie używa (stop, autoToggle, data-lenis-prevent, wysokość 100% na html). */
.lenis.lenis-smooth iframe { pointer-events: none; }