/**
 * Theme Name: Blocksy Child
 * Description: Motyw potomny Blocksy dla jagnapomorska.pl. Źródło: repozytorium JP-cc, katalog wp/blocksy-child.
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* Przyciski konturowe: grafitowy tekst i ramka w kolorze tekstu (DESIGN.md). Hover z Blocksy: tło brick, tekst biały. */
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	--theme-button-text-initial-color: var(--theme-palette-color-3);
}
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(:hover) {
	border-color: currentColor;
}

/* ==========================================================================
   Strona tymczasowa (strona główna, ID 2345, klasa .jp-tymczasowa).
   Usunąć razem ze stroną tymczasową.
   ========================================================================== */

/* Telefon: niższy kadr portretu i bez linii „Pełna strona wkrótce”, żeby nagłówek i główny przycisk były na pierwszym ekranie. */
@media (max-width: 781px) {
	.jp-tymczasowa .wp-block-image img {
		aspect-ratio: auto !important;
		width: 100%;
		height: 36svh;
		object-fit: cover;
		object-position: 50% 15%;
	}
	.jp-tymczasowa .wp-block-column > .wp-block-group:first-child > p {
		display: none;
	}
}

/* Komputer: jeden ekran (100vh), logo u góry, stopka na dole. */
@media (min-width: 782px) {
	.jp-tymczasowa {
		min-height: 100vh;
		min-height: 100svh;
	}
	.jp-tymczasowa > .wp-block-column:first-child {
		position: relative;
	}
	.jp-tymczasowa > .wp-block-column:first-child > .wp-block-image {
		position: absolute;
		inset: 0;
		margin: 0;
	}
	.jp-tymczasowa > .wp-block-column:first-child img {
		aspect-ratio: auto !important;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 20%;
	}
	.jp-tymczasowa > .wp-block-column:last-child {
		align-self: stretch;
		display: flex;
		flex-direction: column;
		padding-top: clamp(1.5rem, 4vh, 3rem) !important;
		padding-bottom: clamp(1.5rem, 4vh, 3rem) !important;
	}
	.jp-tymczasowa > .wp-block-column:last-child > * + * {
		margin-block-start: clamp(0.75rem, 2.4vh, 2rem) !important;
	}
	.jp-tymczasowa > .wp-block-column:last-child > h1,
	.jp-tymczasowa > .wp-block-column:last-child > .is-layout-grid {
		margin-block-start: auto !important;
	}
	.jp-tymczasowa > .wp-block-column:last-child > h1 {
		font-size: clamp(2.5rem, min(6vw, 9.5vh), 5.25rem) !important;
	}
}

/* ==========================================================================
   Style bloków (wybierane w edytorze: prawa kolumna → Style).
   Kolory, tła, odstępy, rozmiary tekstu i układ ustawiamy w blokach;
   tutaj tylko to, czego bloki nie potrafią: hover, pseudoelementy, animacje,
   układ na telefonie.
   ========================================================================== */

/* Nadtytuł nad nagłówkiem sekcji */
.is-style-jp-nadtytul {
	font-family: 'Sora', sans-serif;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #5c5c5c;
}

/* Hasło: tekst pochylony (kursywa w edytorze) wyświetla się jako obrys */
.is-style-jp-haslo em {
	font-style: normal;
	-webkit-text-stroke: 1.5px var(--theme-palette-color-4);
	color: transparent;
}

/* Etykieta (np. przy opinii) */
.is-style-jp-etykieta {
	width: fit-content;
	padding: 4px 10px;
	border: 1px solid var(--theme-palette-color-6);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--theme-palette-color-1);
}

/* Odnośnik: akapit z ramką i jednym linkiem (np. temat → wydarzenie niżej na stronie).
   Tło, ramkę i odstępy ustawia blok; tu: klikalna cała etykieta i hover. */
.is-style-jp-odnosnik {
	position: relative;
	width: fit-content;
	transition: border-color .2s, color .2s;
}
.is-style-jp-odnosnik a {
	color: inherit;
	text-decoration: none;
}
.is-style-jp-odnosnik a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.is-style-jp-odnosnik:hover,
.is-style-jp-odnosnik:focus-within {
	border-color: var(--theme-palette-color-1) !important;
	color: var(--theme-palette-color-1) !important;
}

/* Kotwice na stronie: płynne przewijanie i odstęp od górnej krawędzi */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
/* Kotwice: odstęp na zmniejszony przyklejony nagłówek (64 px) + oddech */
:target {
	scroll-margin-top: 96px;
}

/* Przyklejony nagłówek (wariant A z kanwy, 29.10.2026; js/naglowek.js): fixed na górze, body ma odstęp
   o pierwotnej wysokości (--header-height Blocksy: 96 px desktop, 72 px telefon), więc treść nie przeskakuje.
   Po przewinięciu (klasa jp-przewiniete na body): 96 → 64 px (telefon 72 → 60), logo 40 → 32 px,
   białe tło z cieniem zamiast jasnoszarego. Panel menu na telefonie (#offcanvas) ma wyższy z-index. */
body:not(.wp-admin):not(.editor-styles-wrapper):has(> #main-container > #header.ct-header, #header.ct-header) {
	padding-top: var(--header-height);
}
#header.ct-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 100;
	transition: box-shadow .3s;
}
#header [data-row*="middle"] {
	transition: background-color .3s;
}
#header [data-row*="middle"] > .ct-container {
	transition: height .3s, min-height .3s;
}
#header .site-logo-container img {
	transition: max-height .3s, height .3s;
}
#header .ct-header-cta .ct-button {
	transition: min-height .3s, height .3s, padding .3s, font-size .3s, background-color .25s, color .25s;
}
body.jp-przewiniete #header.ct-header {
	box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}
body.jp-przewiniete #header [data-row*="middle"] {
	--height: 64px;
	background-color: #fff;
	border-bottom-color: transparent;
}
body.jp-przewiniete #header .site-logo-container {
	--logo-max-height: 32px;
}
body.jp-przewiniete #header .ct-header-cta .ct-button {
	--theme-button-min-height: 36px;
	min-height: 36px;
	height: 36px;
	padding-left: 16px;
	padding-right: 16px;
	font-size: 14px;
}
@media (max-width: 999px) {
	body.jp-przewiniete #header [data-row*="middle"] {
		--height: 60px;
	}
}
/* Przyklejone kolumny (grupa z pozycją „przyklejona” – WP zawsze daje top: 0 i ignoruje wartość z bloku):
   zatrzymują się pod zmniejszonym nagłówkiem (64 px) + 32 px oddechu */
body:has(#header.ct-header) .is-position-sticky {
	top: calc(96px + var(--wp-admin--admin-bar--position-offset, 0px));
}

/* Karta: podniesienie i przybliżenie zdjęcia po najechaniu */
/* Bez automatycznego odstępu grup z tłem (WordPress/Blocksy), zdjęcie dochodzi do krawędzi. */
.wp-block-group.is-style-jp-karta {
	padding: 0;
}
.is-style-jp-karta {
	transition: box-shadow .35s, transform .35s;
}
.is-style-jp-karta:hover {
	box-shadow: 0 24px 48px rgba(0, 0, 0, .09);
	transform: translateY(-4px);
}
.is-style-jp-karta > .wp-block-image {
	overflow: hidden;
}
.is-style-jp-karta > .wp-block-image img {
	transition: transform .7s;
}
.is-style-jp-karta:hover > .wp-block-image img {
	transform: scale(1.05);
}
.is-style-jp-karta > :last-child {
	flex-grow: 1;
}

/* Mentoring – karty programów (uwaga Jagny 3.11.2026): program = akapit jp-program z jednym linkiem,
   wiersze oddzielone linią, strzałka po nazwie; ostatni wiersz nie rozciąga karty */
.jp-program-karta > .jp-program:last-child {
	flex-grow: 0;
}
.jp-program {
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--theme-palette-color-5);
	font-family: var(--wp--preset--font-family--sora);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.4;
}
.jp-program a {
	color: var(--theme-palette-color-4);
	text-decoration: none;
	transition: color .2s;
}
.jp-program a::after {
	content: ' \2197\FE0E'; /* FE0E = wersja tekstowa znaku: iOS bez niego rysuje ↗ jako niebieskie emoji */
	color: var(--theme-palette-color-1);
}
.jp-program a:hover {
	color: var(--theme-palette-color-1);
}

/* Ciemna sekcja: jasny tekst, linki i przyciski konturowe (tło wybierane w bloku) */
.is-style-jp-ciemna {
	color: #e3e3e3;
}
.is-style-jp-ciemna :is(h1, h2, h3) {
	color: #fff;
}
.is-style-jp-ciemna .is-style-jp-nadtytul {
	color: rgba(255, 255, 255, .72);
}
.is-style-jp-ciemna a:not(.wp-block-button__link) {
	color: #fff;
}
.is-style-jp-ciemna .wp-block-button.is-style-outline > .wp-block-button__link {
	--theme-button-text-initial-color: #f6f6f6;
}

/* Newsletter [jp_newsletter] (inc/newsletter.php): pole + przycisk w jednym rzędzie; na tle oxblood
   przycisk biały, hover grafit (przycisk Blocksy w kolorze tła byłby niewidoczny) */
.jp-newsletter__pola {
	display: flex;
	gap: 8px;
}
.jp-newsletter input[type='email'] {
	flex: 1;
	min-width: 0;
	height: 56px;
	padding: 0 20px;
	border: 1px solid #8c8c8c;
	border-radius: 0;
	background: #fff;
	color: var(--theme-palette-color-4);
	font-size: 17px;
}
.jp-newsletter button {
	height: 56px;
	padding: 0 28px;
	border: 0;
	background: #fff;
	color: var(--theme-palette-color-4);
	font-family: 'Sora', sans-serif;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background .25s, color .25s;
}
.jp-newsletter button:hover,
.jp-newsletter button:focus-visible {
	background: var(--theme-palette-color-4);
	color: #fff;
}
.jp-newsletter button:disabled {
	opacity: .6;
	cursor: wait;
}
.jp-newsletter input:focus-visible,
.jp-newsletter button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.jp-newsletter__pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.jp-newsletter__komunikat {
	min-height: 1.5em;
	margin: 12px 0 0;
	font-size: 15px;
	font-weight: 500;
}
.jp-newsletter.is-blad .jp-newsletter__komunikat::before {
	content: '⚠ ';
}
@media (max-width: 599px) {
	.jp-newsletter__pola {
		flex-direction: column;
	}
	.jp-newsletter input[type='email'] {
		flex: none;
	}
}

/* Formularz kontaktowy [jp_kontakt] (inc/kontakt.php) – według planszy „Kontakt z formularzem”:
   pola w 2 kolumnach, tematy jako „pigułki” (radio), komunikat w ramce pod przyciskiem */
.jp-kontakt__pola {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 36px;
}
.jp-kontakt__pole {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.jp-kontakt__pole--cale {
	grid-column: 1 / -1;
}
.jp-kontakt__pole[hidden] {
	display: none;
}
.jp-kontakt label:not(.jp-kontakt__temat),
.jp-kontakt legend {
	padding: 0;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--theme-palette-color-4);
}
.jp-kontakt legend {
	margin: 0 0 10px; /* Blocksy daje legendzie -15px z lewej */
}
.jp-kontakt label span {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	color: #6b6b6b;
}
.jp-kontakt input[type='text'],
.jp-kontakt input[type='email'],
.jp-kontakt textarea {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border: 1px solid #8c8c8c;
	border-radius: 3px;
	background: #fff;
	color: var(--theme-palette-color-3);
	font: inherit;
	font-size: 17px;
}
.jp-kontakt textarea {
	height: 168px;
	padding-top: 14px;
	line-height: 1.55;
	resize: vertical;
}
.jp-kontakt ::placeholder {
	color: #8c8c8c;
	opacity: 1;
}
.jp-kontakt input:focus-visible,
.jp-kontakt textarea:focus-visible {
	outline: 0;
	border: 2px solid var(--theme-palette-color-1);
	padding-left: 15px;
}
.jp-kontakt .is-blad input,
.jp-kontakt .is-blad textarea {
	border: 2px solid var(--theme-palette-color-2);
	padding-left: 15px;
}
.jp-kontakt__blad:empty {
	display: none;
}
.jp-kontakt__blad {
	font-size: 14px;
	font-weight: 500;
	color: var(--theme-palette-color-2);
}
.jp-kontakt__tematy {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.jp-kontakt__temat {
	position: relative;
	cursor: pointer;
}
.jp-kontakt__temat input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.jp-kontakt__temat span {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 18px;
	border: 1px solid #8c8c8c;
	border-radius: 21px;
	background: #fff;
	font-size: 15px;
	font-weight: 500;
	color: var(--theme-palette-color-3);
	transition: background .2s, border-color .2s, color .2s;
}
.jp-kontakt__temat:hover span {
	border-color: var(--theme-palette-color-4);
}
.jp-kontakt__temat input:checked + span {
	background: var(--theme-palette-color-4);
	border-color: var(--theme-palette-color-4);
	color: #fff;
}
.jp-kontakt__temat input:focus-visible + span {
	outline: 2px solid var(--theme-palette-color-1);
	outline-offset: 2px;
}
.jp-kontakt .is-blad .jp-kontakt__temat span {
	border-color: var(--theme-palette-color-2);
}
.jp-kontakt__pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.jp-kontakt__wyslij {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 32px;
}
.jp-kontakt__wyslij button {
	height: 48px;
	padding: 0 28px;
	border: 0;
	border-radius: 3px;
	background: var(--theme-palette-color-1);
	color: #fff;
	font-family: 'Sora', sans-serif;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background .25s;
}
.jp-kontakt__wyslij button:hover,
.jp-kontakt__wyslij button:focus-visible {
	background: var(--theme-palette-color-2);
}
.jp-kontakt__wyslij button:disabled {
	opacity: .6;
	cursor: wait;
}
.jp-kontakt__wyslij span,
.jp-kontakt__rodo {
	font-size: 13px;
	line-height: 1.55;
	color: #6b6b6b;
}
.jp-kontakt__rodo {
	margin: 20px 0 0;
}
.jp-kontakt__komunikat {
	margin: 0;
}
.jp-kontakt__komunikat:empty {
	display: none;
}
.jp-kontakt.is-ok .jp-kontakt__komunikat,
.jp-kontakt.is-blad .jp-kontakt__komunikat {
	margin-top: 20px;
	padding: 18px 22px;
	border-left: 4px solid var(--theme-palette-color-6);
	background: #fbf3f3;
	font-size: 16px;
	line-height: 1.55;
	color: var(--theme-palette-color-4);
}
.jp-kontakt.is-ok .jp-kontakt__komunikat {
	border-color: #3d7a4f;
	background: #eef6f0;
	font-weight: 600;
}
@media (max-width: 599px) {
	.jp-kontakt-karta {
		padding: 32px 20px 28px !important;
	}
	.jp-kontakt__pola {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.jp-kontakt__wyslij button {
		width: 100%;
	}
}

/* Opinia: duży cudzysłów nad treścią */
.is-style-jp-opinia::before {
	content: '\201d';
	display: block;
	height: 48px;
	font-family: 'Sora', sans-serif;
	font-size: 100px;
	line-height: 1;
	color: var(--theme-palette-color-6);
}

/* Wiersz publikacji: linia, logo w szarości, strzałka przy tytule */
.is-style-jp-publikacja {
	flex-wrap: nowrap !important;
	border-bottom: 1px solid #d6d6d6;
	transition: background .25s, padding .3s;
}
.is-style-jp-publikacja:hover {
	background: #fff;
	padding-left: 20px !important;
}
.is-style-jp-publikacja img {
	filter: grayscale(1);
	opacity: .75;
	transition: filter .3s, opacity .3s;
}
.is-style-jp-publikacja:hover img {
	filter: none;
	opacity: 1;
}
.is-style-jp-publikacja p a {
	color: inherit;
	text-decoration: none;
}
.is-style-jp-publikacja p a::after {
	content: ' \2197\FE0E';
	color: var(--theme-palette-color-1);
}
/* Tytuł publikacji zmienia kolor po najechaniu na wiersz (uwaga Jagny 28.10.2026) */
.is-style-jp-publikacja p a {
	transition: color .2s;
}
.is-style-jp-publikacja:hover p a {
	color: var(--theme-palette-color-1);
}

/* Media – lista publikacji (blok Query jp-publikacje-lista): nazwa medium wyróżniona, format po prawej */
.jp-pub-medium {
	margin: 0;
	font-family: 'Sora', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--theme-palette-color-1);
}
.jp-pub-format {
	margin: 0;
	font-family: 'Sora', sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
	color: #5c5c5c;
}
.jp-publikacje-lista .wp-block-post[hidden] {
	display: none !important;
}

/* Media – filtry publikacji (grupa przycisków jp-filtry, js/media.js) */
.jp-filtry .wp-block-button__link {
	min-height: 0;
	padding: 9px 16px;
	border-width: 1px;
	border-radius: 999px;
	font-size: 14px;
}
.jp-filtry .is-aktywny .wp-block-button__link {
	background: var(--theme-palette-color-4);
	border-color: var(--theme-palette-color-4);
	color: #fff;
}
/* Tabela w tekstach (polityka prywatności – blok Tabela z klasą jp-tabela): mniejszy tekst, wyrównanie
   do lewej i do góry, cienkie linie; na telefonie przewijana w bok (min. 720 px) */
.jp-tabela {
	margin-top: 24px !important;
	overflow-x: auto;
}
.jp-tabela table {
	min-width: 720px;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.5;
}
.jp-tabela th,
.jp-tabela td {
	padding: 12px 14px;
	border: 1px solid #e0e0e0;
	text-align: left;
	vertical-align: top;
}
.jp-tabela thead th {
	background: var(--theme-palette-color-8);
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 600;
	color: var(--theme-palette-color-4);
	border-bottom: 1px solid #c8c8c8;
}
.jp-tabela td:first-child {
	font-weight: 600;
	color: var(--theme-palette-color-4);
}
/* Stronicowanie listy publikacji (js/media.js, 10 na stronę): kwadraty jak strzałki karuzeli, bieżąca strona ciemna */
.jp-stronicowanie {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px !important; /* kontener grupy WP zeruje marginesy dzieci (.wp-container-… > * + *) */
}
.jp-stronicowanie[hidden] {
	display: none;
}
.jp-stronicowanie button {
	min-width: 46px;
	height: 46px;
	padding: 0 12px;
	border: 1.5px solid var(--theme-palette-color-3);
	border-radius: 3px;
	background: none;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: var(--theme-palette-color-3);
	cursor: pointer;
	transition: background .25s, border-color .25s, color .25s;
}
.jp-stronicowanie button:hover:not(:disabled):not([aria-current]) {
	border-color: var(--theme-palette-color-2);
	background: var(--theme-palette-color-2);
	color: #fff;
}
.jp-stronicowanie button[aria-current] {
	border-color: var(--theme-palette-color-4);
	background: var(--theme-palette-color-4);
	color: #fff;
	cursor: default;
}
.jp-stronicowanie button:disabled {
	opacity: .3;
	cursor: default;
}

/* Media – filmy: okładka 16:9 z przyciskiem odtwarzania, odtwarzacz po kliknięciu (js/media.js) */
.jp-wideo-okladka {
	margin: 0;
	aspect-ratio: 16 / 9;
}
.jp-wideo-okladka a,
.jp-wideo-okladka img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jp-wideo-ramka {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}
/* Siatka filmów: WP 7.1 nie generuje kolumn dla siatki bloku Query (post-template) – ustawiamy je tu */
.jp-wideo-lista .wp-block-post-template {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1023px) {
	.jp-wideo-lista .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 599px) {
	.jp-wideo-lista .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}
.jp-wideo-lista .is-style-jp-wideo a::before {
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
}
.jp-wideo-lista .is-style-jp-wideo a::after {
	margin: -10px 0 0 -5px;
	border-left-width: 16px;
	border-top-width: 10px;
	border-bottom-width: 10px;
}
.is-style-jp-ciemna .jp-wideo-zrodlo {
	color: var(--theme-palette-color-6);
}
.jp-wideo-lista h3 a {
	text-decoration: none;
}
.is-style-jp-ciemna .jp-wideo-lista h3 a:hover {
	color: var(--theme-palette-color-6);
}

/* Media – logo do pobrania na białym tle */
.jp-logo-karta {
	background: #fff;
}
.jp-logo-karta img {
	object-fit: contain !important;
	padding: 18%;
}

/* Medium bez logo (inc/publikacje.php): nazwa w miejscu logo, ta sama szerokość kolumny */
.is-style-jp-publikacja .jp-pub-nazwa {
	flex: 0 0 150px;
	margin: 0;
	font-family: 'Sora', sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--theme-palette-color-3);
}

/* Karta rozmowy (O mnie, „W co wierzę”): miniatura 220 px z mniejszym przyciskiem, link koralowy na ciemnym tle */
.jp-rozmowa .is-style-jp-wideo a::before {
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
}
.jp-rozmowa .is-style-jp-wideo a::after {
	margin: -12px 0 0 -6px;
	border-left-width: 19px;
	border-top-width: 12px;
	border-bottom-width: 12px;
}
.is-style-jp-ciemna .jp-rozmowa .jp-obejrzyj a {
	color: var(--theme-palette-color-6);
}
.jp-rozmowa h3 a {
	text-decoration: none;
}
@media (max-width: 599px) {
	.jp-rozmowa > .wp-block-image {
		flex-basis: 120px !important;
		width: 120px !important;
	}
	.jp-rozmowa .is-style-jp-wideo a::before {
		width: 44px;
		height: 44px;
		margin: -22px 0 0 -22px;
	}
	.jp-rozmowa .is-style-jp-wideo a::after {
		margin: -9px 0 0 -4px;
		border-left-width: 14px;
		border-top-width: 9px;
		border-bottom-width: 9px;
	}
}
/* jp-rozmowa-pod (Mentoring, podcast PARP): duży film 16:9 obok opisu (48% karty, ok. 360 px przy 1440),
   poniżej 1200 px (wąska kolumna) na pełną szerokość nad tekstem */
.jp-rozmowa-pod > .wp-block-image {
	flex-basis: 48% !important;
	width: 48% !important;
}
.jp-rozmowa-pod > .wp-block-image img {
	width: 100% !important;
}
@media (max-width: 1199px) {
	.jp-rozmowa.jp-rozmowa-pod {
		flex-wrap: wrap !important;
		gap: 20px;
	}
	.jp-rozmowa-pod > .wp-block-image {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

/* Strona główna – „Jak mogę pomóc” (29.10.2026, wariant 2A z kanwy): karta z ikoną liniową w koralowym kole
   i numerem; ikona = klasa karty jp-ikona-{vr|mentoring|scena|finanse}; cała karta klikalna (link w jp-pomoc-link) */
.jp-pomoc-karta {
	position: relative;
	transition: box-shadow .35s, transform .35s;
}
.jp-pomoc-karta:hover {
	box-shadow: 0 24px 48px rgba(0, 0, 0, .08);
	transform: translateY(-4px);
}
.jp-pomoc-karta .jp-pomoc-nr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	font-family: 'Sora', sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .1em;
	color: #8c8c8c;
}
.jp-pomoc-karta .jp-pomoc-nr::before {
	content: '';
	flex: 0 0 84px;
	height: 84px;
	border-radius: 50%;
	background: #fbeeee var(--jp-ikona) center / 52px no-repeat;
	transition: background-color .35s;
}
.jp-pomoc-karta:hover .jp-pomoc-nr::before {
	background-color: #f6dcdc;
}
.jp-pomoc-karta h3 {
	margin: 32px 0 0;
}
.jp-pomoc-karta h3 + p {
	flex-grow: 1;
	margin: 14px 0 28px;
	font-size: 15.5px;
	line-height: 1.6;
}
.jp-pomoc-karta .jp-pomoc-link {
	margin: 0;
}
.jp-pomoc-karta .jp-pomoc-link a {
	text-decoration: none;
}
.jp-pomoc-karta .jp-pomoc-link a::after {
	content: '';
	position: absolute;
	inset: 0;
}
.jp-ikona-vr {
	--jp-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23db6161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 17h32a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9l-3-4h-8l-3 4H8a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3z'/%3E%3Cpath d='M5 22H2M46 22h-3'/%3E%3Ccircle cx='15' cy='24.5' r='3'/%3E%3Ccircle cx='33' cy='24.5' r='3'/%3E%3Cpath d='M14 17l3-5h14l3 5'/%3E%3C/svg%3E");
}
.jp-ikona-mentoring {
	--jp-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23db6161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10h24a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H16l-7 6v-6H6a3 3 0 0 1-3-3V13a3 3 0 0 1 3-3z'/%3E%3Cpath d='M37 18h5a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3h-3v6l-7-6H24a3 3 0 0 1-3-3v-1'/%3E%3Cpath d='M11 17h14M11 21h9'/%3E%3C/svg%3E");
}
.jp-ikona-scena {
	--jp-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23db6161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='17' y='4' width='14' height='24' rx='7'/%3E%3Cpath d='M11 22a13 13 0 0 0 26 0'/%3E%3Cpath d='M24 35v8M16 43h16'/%3E%3Cpath d='M17 12h5M17 18h5'/%3E%3C/svg%3E");
}
.jp-ikona-finanse {
	--jp-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23db6161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 43h38'/%3E%3Crect x='9' y='29' width='7' height='14'/%3E%3Crect x='21' y='21' width='7' height='22'/%3E%3Crect x='33' y='13' width='7' height='30'/%3E%3Cpath d='M8 20 20 10l7 5L40 4'/%3E%3Cpath d='M33 4h7v7'/%3E%3C/svg%3E");
}
/* Wiersz z ikoną zamiast numeru (Finansowanie – „Zakres mojego wsparcia”, uwaga Jagny 3.11.2026): grupa flex
   z klasą jp-ikona-wiersz + jp-ikona-{sciezka|audyt|montaz|pitch}; ikona w koralowym kole jako ::before */
.jp-ikona-wiersz::before {
	content: '';
	flex: 0 0 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(219, 97, 97, .14) var(--jp-ikona) center / 44px no-repeat;
}
/* Ikony „Co dziś daje VR” (Technologie, uwaga Jagny 3.11.2026): awatar AI, maszyna, BHP, onboarding */
.jp-ikona-awatar {
	--jp-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23db6161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17' cy='19' r='6'/%3E%3Cpath d='M5 42c0-7 5-12 12-12s12 5 12 12'/%3E%3Cpath d='M29 5h13a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-6l-5 4v-4h-2a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3z'/%3E%3Cpath d='M32 12h7'/%3E%3C/svg%3E");
}
.jp-ikona-maszyna {
	--jp-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23db6161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M37.1 20.7L41.8 21.0L41.8 27.0L37.1 27.3L35.6 31.0L38.6 34.5L34.5 38.6L31.0 35.6L27.3 37.1L27.0 41.8L21.0 41.8L20.7 37.1L17.0 35.6L13.5 38.6L9.4 34.5L12.4 31.0L10.9 27.3L6.2 27.0L6.2 21.0L10.9 20.7L12.4 17.0L9.4 13.5L13.5 9.4L17.0 12.4L20.7 10.9L21.0 6.2L27.0 6.2L27.3 10.9L31.0 12.4L34.5 9.4L38.6 13.5L35.6 17.0z'/%3E%3Ccircle cx='24' cy='24' r='5.5'/%3E%3C/svg%3E");
}
.jp-ikona-bhp {
	--jp-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23db6161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 4l16 6v12c0 10-7 18-16 22C15 40 8 32 8 22V10z'/%3E%3Cpath d='M24 16v12M18 22h12'/%3E%3C/svg%3E");
}
.jp-ikona-onboarding {
	--jp-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23db6161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='10' y='8' width='28' height='35' rx='3'/%3E%3Cpath d='M20 8V4h8v4'/%3E%3Ccircle cx='24' cy='21' r='5'/%3E%3Cpath d='M16 36c0-5 4-8 8-8s8 3 8 8'/%3E%3C/svg%3E");
}
/* Komórka z ikoną nad tekstem zamiast numeru (Mentoring – „Dla kogo jest mentoring”, uwaga Jagny 3.11.2026):
   grupa z klasą jp-ikona-komorka + jp-ikona-{montaz|mentoring|sciezka|…} */
.jp-ikona-komorka::before {
	content: '';
	display: block;
	width: 72px;
	height: 72px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: rgba(219, 97, 97, .14) var(--jp-ikona) center / 44px no-repeat;
}
.jp-ikona-sciezka {
	--jp-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23db6161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 44V27'/%3E%3Cpath d='M24 27c0-8-9-9-13-16'/%3E%3Cpath d='M24 27c0-8 9-9 13-16'/%3E%3Cpath d='M11 11v7M11 11h7'/%3E%3Cpath d='M37 11v7M37 11h-7'/%3E%3Ccircle cx='24' cy='27' r='2'/%3E%3C/svg%3E");
}
.jp-ikona-audyt {
	--jp-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23db6161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='5' width='24' height='32' rx='2'/%3E%3Cpath d='M13 13h12M13 19h12M13 25h6'/%3E%3Ccircle cx='32' cy='32' r='7'/%3E%3Cpath d='M37 37l7 7'/%3E%3C/svg%3E");
}
.jp-ikona-montaz {
	--jp-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23db6161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 6 42 15 24 24 6 15z'/%3E%3Cpath d='M6 24l18 9 18-9'/%3E%3Cpath d='M6 33l18 9 18-9'/%3E%3C/svg%3E");
}
.jp-ikona-pitch {
	--jp-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23db6161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='6' width='38' height='25' rx='2'/%3E%3Cpath d='M24 31v6M17 43l7-6 7 6'/%3E%3Cpath d='M11 25l7-7 6 5 9-9'/%3E%3Cpath d='M28 14h5v5'/%3E%3C/svg%3E");
}
@media (max-width: 781px) {
	.jp-ikona-wiersz::before {
		flex-basis: 56px;
		height: 56px;
		background-size: 34px;
	}
	.jp-ikona-komorka::before {
		width: 56px;
		height: 56px;
		background-size: 34px;
	}
}
@media (max-width: 599px) {
	.jp-pomoc-karta {
		display: grid !important;
		grid-template-columns: 60px 1fr;
		column-gap: 20px !important; /* odstęp ikona–tekst; bez !important nadpisywał go gap z układu bloku (0) */
		padding: 26px 22px !important;
	}
	.jp-pomoc-karta .jp-pomoc-nr {
		grid-row: 1 / 4;
		align-self: start;
		font-size: 0;
	}
	.jp-pomoc-karta .jp-pomoc-nr::before {
		flex-basis: 60px;
		height: 60px;
		background-size: 36px;
	}
	.jp-pomoc-karta h3 {
		margin-top: 0;
	}
	.jp-pomoc-karta h3 + p {
		margin: 8px 0 14px;
	}
}

/* Strona główna – hero na telefonie (4.11.2026, uwaga Mario): kolumna tekstu ma na desktopie 72 px dolnego
   odstępu (w bloku) – na telefonie z odstępem kolumn dawało to 70 px między przyciskami a zdjęciem; teraz ok. 32 px */
@media (max-width: 781px) {
	.jp-hero .wp-block-column.jp-wejscie[style*="padding-bottom:72px"] {
		padding-bottom: 34px !important;
	}
	/* Zdjęcie w hero (5.11.2026, uwaga Mario): okładka ma w bloku 680 px wysokości, przy ~330 px
	   szerokości pionowy portret 2:3 był mocno przycięty po bokach (ręce, ramiona) – na telefonie
	   okładka w proporcji zdjęcia. */
	body.home .jp-hero .wp-block-cover {
		min-height: 0 !important;
		aspect-ratio: 2 / 3 !important;
	}
}

/* Strona główna – pasek liczb (3.11.2026, wersja pierwotna: pasek bez odstępów sekcji, kreski między liczbami).
   Na telefonie (4.11.2026) rząd przewijany w bok z przyciąganiem: jedna karta na szerokość ekranu, pod nią
   kropki (js/karuzela.js dodaje .jp-kropki pod .jp-liczby; bieżąca kropka wydłużona, koralowa). */
@media (max-width: 781px) {
	.jp-liczby {
		display: flex !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.jp-liczby::-webkit-scrollbar {
		display: none;
	}
	.jp-liczby > .wp-block-group {
		flex: 0 0 100%;
		padding: 28px 0 20px !important;
		border-left: 0 !important;
		text-align: center;
		scroll-snap-align: start;
		animation: none !important; /* view() w poziomym scrollerze liczyłby się od przewijania w bok */
	}
	/* Ten sam wygląd na każdej stronie (O mnie ma na desktopie siatkę w ramce i sekcję z odstępami):
	   bez ramek kart, sekcja bez odstępów pionowych, linie u góry i u dołu jak na stronie głównej */
	.jp-liczby,
	.jp-liczby > .wp-block-group {
		border: 0 !important;
	}
	.jp-liczby {
		align-items: center; /* karty z krótszym podpisem wyśrodkowane w pionie względem najwyższej */
	}
	.alignfull:has(> .jp-liczby) {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		border-top: 1px solid #e8e8e8;
		border-bottom: 1px solid #e8e8e8;
	}
}
/* Karty przewijane na telefonie (Mentoring – Programy, 4.11.2026, uwaga Mario z kanwy): siatka kart z klasą
   jp-karty-przewijane = rząd jak pasek liczb (jedna karta na szerokość, przyciąganie, kropki pod spodem).
   To samo dla listy filmów na Media (5.11.2026, prośba klienta: bez długiego przewijania sekcji). */
@media (max-width: 781px) {
	.jp-karty-przewijane,
	.jp-wideo-lista .wp-block-post-template {
		display: flex !important;
		align-items: stretch;
		gap: 16px !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.jp-karty-przewijane::-webkit-scrollbar,
	.jp-wideo-lista .wp-block-post-template::-webkit-scrollbar {
		display: none;
	}
	.jp-karty-przewijane > *,
	.jp-wideo-lista .wp-block-post-template > * {
		flex: 0 0 100%;
		scroll-snap-align: start;
		animation: none !important;
	}
	.jp-karty-przewijane + .jp-kropki,
	.jp-wideo-lista .wp-block-post-template + .jp-kropki {
		padding: 12px 0 0;
	}
}
/* Przycisk = pole dotyku 24 × 24 px (WCAG 2.5.8, PageSpeed 8.11.2026), widoczna kropka 8 px w ::before –
   wygląd i odstępy kropek jak wcześniej (8 px kropki co 16 px), tylko większy obszar kliknięcia. */
.jp-kropki {
	display: flex;
	justify-content: center;
	gap: 0;
	padding: 0 0 16px;
	margin: 0 !important;
}
.jp-kropki button {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: width .25s;
}
.jp-kropki button::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	transform: translate(-50%, -50%);
	border-radius: 4px;
	background: #d6d6d6;
	transition: width .25s, background-color .25s;
}
.jp-kropki button[aria-current] {
	width: 40px;
}
.jp-kropki button[aria-current]::before {
	width: 24px;
	background: var(--theme-palette-color-6);
}
.jp-kropki button:focus-visible {
	outline: 2px solid var(--theme-palette-color-1);
	outline-offset: -2px;
}
@media (min-width: 782px) {
	.jp-kropki {
		display: none;
	}
}

/* Obramowanie jednej krawędzi z ustawień bloku (kolor + grubość): WP daje styl linii tylko grupom, akapit
   z koralową kreską z lewej (Mentoring, O mnie, Technologie) miał border-style: none – kreski nie było widać. */
:where(p)[style*="border-top-width"] { border-top-style: solid; }
:where(p)[style*="border-right-width"] { border-right-style: solid; }
:where(p)[style*="border-bottom-width"] { border-bottom-style: solid; }
:where(p)[style*="border-left-width"] { border-left-style: solid; }

/* Okładka wideo: przycisk odtwarzania na zdjęciu z linkiem */
.is-style-jp-wideo {
	position: relative;
	overflow: hidden;
	background: #000;
}
.is-style-jp-wideo img {
	opacity: .85;
	transition: transform .6s, opacity .3s;
}
.is-style-jp-wideo:hover img {
	transform: scale(1.03);
	opacity: 1;
}
.is-style-jp-wideo a::before,
.is-style-jp-wideo a::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	pointer-events: none;
	transition: transform .3s;
}
.is-style-jp-wideo a::before {
	width: 96px;
	height: 96px;
	margin: -48px 0 0 -48px;
	border-radius: 50%;
	background: var(--theme-palette-color-6);
	z-index: 1;
}
.is-style-jp-wideo a::after {
	margin: -16px 0 0 -8px;
	border-left: 26px solid #fff;
	border-top: 16px solid transparent;
	border-bottom: 16px solid transparent;
	z-index: 2;
}
.is-style-jp-wideo:hover a::before {
	transform: scale(1.08);
}
/* Przycisk odtwarzania z lewej, nisko – gdy na środku okładki jest twarz (Technologie, wideo XYZ) */
.jp-wideo-play-lewo a::before,
.jp-wideo-play-lewo a::after {
	left: 24%;
	top: 70%;
}
/* Wywiad na O mnie (Kulisy biznesu online): przycisk na stole, z dala od twarzy */
.jp-wideo-play-prawo a::before,
.jp-wideo-play-prawo a::after {
	left: 70%;
	top: 68%;
}
/* Wideo XYZ na Technologiach (zygzak z sekcją Connected Realities): na telefonie film pod tekstem,
   z marginesem bocznym (na desktopie kolumna filmu nie ma lewego odstępu) */
@media (max-width: 781px) {
	.jp-wideo-kolumna {
		padding-top: 0 !important;
		padding-left: var(--wp--preset--spacing--60) !important;
	}
}
/* Connected Realities na Technologiach (sekcja jp-foto-mobile-pod, 4.11.2026, uwaga z kanwy): na telefonie zdjęcie
   pod tekstem, z marginesem bocznym jak film XYZ powyżej, kwadrat z całą postacią (zamiast 640 px na całą szerokość) */
@media (max-width: 781px) {
	.jp-foto-mobile-pod > .wp-block-columns {
		flex-direction: column-reverse;
	}
	.jp-foto-mobile-pod > .wp-block-columns > .wp-block-column {
		flex-basis: auto !important; /* 100% w kierunku pionowym liczyłoby wysokość, nie szerokość */
	}
	.jp-foto-mobile-pod .wp-block-cover {
		min-height: 0 !important;
		/* kwadrat: wysokość = szerokość; aspect-ratio w kolumnowym flexie liczył się do 0 (blok ma też aspect-ratio: unset) */
		height: calc(100vw - 2 * var(--wp--preset--spacing--60));
		margin: 0 var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	}
	.jp-foto-mobile-pod .wp-block-cover img {
		object-position: 29% 50% !important;
	}
}
/* Koralowy link w ciemnej sekcji (np. „Przeczytaj artykuł…”) */
.is-style-jp-ciemna .jp-link-koral a {
	color: var(--theme-palette-color-6);
}
.is-style-jp-ciemna .jp-link-koral a:hover {
	color: #fff;
}

/* Hero: nagłówek + hero mieszczą się w oknie (zasada dla wszystkich hero, gdy wynika to z projektu).
   Użycie: klasa „jp-hero” na sekcji (grupie) z okładką w środku albo na samym bloku okładki.
   Wysokość okładki = okno − nagłówek Blocksy (+1 px linii) − górny odstęp sekcji, w granicach min–max.
   Zmienne do nadpisania w sekcji: --jp-hero-gora (górny odstęp sekcji, domyślnie 64px),
   --jp-hero-min (480px), --jp-hero-max (680px). Okładka jako całe hero: górny odstęp 0, bez górnej granicy.
   Blok okładki przyjmuje tylko stałą minimalną wysokość, stąd CSS. */
@media (min-width: 782px) {
	.jp-hero .wp-block-cover,
	.wp-block-cover.jp-hero {
		min-height: clamp(var(--jp-hero-min, 480px), calc(100svh - var(--header-height, 96px) - 1px - var(--jp-hero-gora, 64px) - var(--wp-admin--admin-bar--height, 0px)), var(--jp-hero-max, 680px)) !important;
	}
	.wp-block-cover.jp-hero {
		--jp-hero-gora: 0px;
		--jp-hero-max: 100svh;
	}
}

/* Wiersze tabel z blokiem flex (zdjęcie, data, wydarzenie, temat, etykieta): w bloku zawijanie włączone
   dla telefonu, na desktopie jedna linia. Rozpoznawane po etykiecie (styl „Etykieta”) jako bezpośrednim dziecku. */
@media (min-width: 782px) {
	.is-layout-flex:has(> .is-style-jp-etykieta):has(> .wp-block-image, > .wp-block-group, > .wp-block-post-featured-image) {
		flex-wrap: nowrap !important;
	}
}

/* Logotypy mediów (grupa jp-loga): w szarości, kolor po najechaniu */
.jp-loga .wp-block-image img {
	filter: grayscale(1);
	opacity: .75;
	transition: filter .3s, opacity .3s;
}
.jp-loga .wp-block-image img:hover {
	filter: none;
	opacity: 1;
}
/* Na telefonie logotypy na pełną szerokość (5.11.2026, uwaga Mario z kanwy): siatka 3 kolumn, logo wyśrodkowane
   w komórce i zmniejszone do jej szerokości; nadtytuł nad siatką (Media, O mnie) */
@media (max-width: 781px) {
	.jp-loga {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px 16px !important;
		align-items: center;
		justify-items: center;
	}
	.jp-loga > p {
		grid-column: 1 / -1;
		justify-self: start;
	}
	.jp-loga > .wp-block-image {
		margin: 0;
		max-width: 100%;
	}
	.jp-loga > .wp-block-image img {
		width: auto !important;
		max-width: 100%;
		height: auto !important;
		max-height: 32px;
		object-fit: contain;
	}
}

/* Karuzela opinii (blok Query z klasą jp-karuzela, skrypt js/karuzela.js):
   rząd przewijany w bok z przyciąganiem kart – 3 / 2 / 1 karta na ekranie */
.jp-karuzela .wp-block-post-template {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 24px;
	margin: 0;
	padding: 0 0 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--theme-palette-color-6) transparent;
	list-style: none;
}
.jp-karuzela .wp-block-post-template > li {
	display: flex;
	flex: 0 0 calc((100% - 48px) / 3);
	margin: 0;
	scroll-snap-align: start;
}
.jp-karuzela .is-style-jp-opinia {
	display: flex;
	flex-direction: column;
	width: 100%;
	animation: none !important; /* animacja view() liczyłaby się od przewijania w bok */
}
.jp-karuzela .is-style-jp-opinia > .wp-block-group:last-child {
	margin-top: auto !important;
	padding-top: 28px;
}
.jp-karuzela .jp-opinia-tresc:not(.jp-rozwiniete) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 9;
	overflow: hidden;
}
.jp-czytaj {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 15px;
	font-weight: 500;
	color: var(--theme-palette-color-1);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.jp-czytaj:hover {
	color: var(--theme-palette-color-2);
}
.jp-karuzela-nawigacja {
	gap: 8px;
}
.jp-karuzela-nawigacja[hidden] {
	display: none !important;
}
.jp-strzalka {
	width: 46px;
	height: 46px;
	border: 1.5px solid var(--theme-palette-color-3);
	border-radius: 3px;
	background: none;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 20px;
	line-height: 1;
	color: var(--theme-palette-color-3);
	cursor: pointer;
	transition: background .25s, border-color .25s, color .25s;
}
.jp-strzalka:hover:not(:disabled) {
	border-color: var(--theme-palette-color-2);
	background: var(--theme-palette-color-2);
	color: #fff;
}
.jp-strzalka:disabled {
	opacity: .3;
	cursor: default;
}
/* Jedna opinia (np. Finansowanie, uwaga Jagny 3.11.2026): na całą szerokość i bez skracania */
.jp-karuzela .wp-block-post-template > li:only-child {
	flex-basis: 100% !important;
}
.jp-karuzela li:only-child .jp-opinia-tresc:not(.jp-rozwiniete) {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}
@media (max-width: 1199px) {
	.jp-karuzela .wp-block-post-template > li {
		flex-basis: calc((100% - 24px) / 2);
	}
}
@media (max-width: 781px) {
	.jp-karuzela .wp-block-post-template > li {
		flex-basis: 85%;
	}
}

/* Pasek przewijany (marquee) – grupa jp-marquee, js/marquee.js przenosi elementy do toru i je powiela;
   pętla przesuwa tor o połowę (+ pół odstępu). Bez JS albo przy „ogranicz ruch” – zwykły zawijany rząd. */
.jp-marquee {
	flex: 1 1 20rem;
	min-width: 0;
}
.jp-marquee.jp-marquee-aktywny {
	display: block !important;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.jp-marquee-tor {
	display: flex;
	gap: 10px;
	width: max-content;
	animation: jp-marquee var(--jp-marquee-czas, 40s) linear infinite;
}
.jp-marquee:hover .jp-marquee-tor {
	animation-play-state: paused;
}
.jp-marquee-tor > * {
	flex: none;
	margin: 0 !important;
	white-space: nowrap;
}
/* Kafelki z koralową ramką z ustawień bloku: WP nie daje akapitom stylu linii (patrz reguła :where(p) niżej) */
.jp-marquee p[style*="border-width"] {
	border-style: solid;
}
@keyframes jp-marquee {
	to {
		transform: translateX(calc(-50% - 5px));
	}
}

/* Galeria zdjęć jako karuzela (Wystąpienia – „Od keynote'u po moderację”, uwaga Jagny 3.11.2026): grupa
   z klasami jp-galeria jp-karuzela z blokami obrazu (podpis = nazwa wydarzenia); 2 zdjęcia na ekranie,
   na telefonie 1 z wysuniętym następnym; strzałki jak przy opiniach (js/karuzela.js) */
.jp-galeria {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 16px;
	padding: 0 0 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--theme-palette-color-6) transparent;
}
.jp-galeria > .wp-block-image {
	flex: 0 0 calc((100% - 16px) / 2);
	margin: 0 !important;
	scroll-snap-align: start;
}
.jp-galeria > .wp-block-image img {
	width: 100%;
}
.jp-galeria figcaption {
	margin: 12px 0 0;
	font-size: 14px;
	text-align: left;
	color: #6b6b6b;
}
@media (max-width: 781px) {
	.jp-galeria > .wp-block-image {
		flex-basis: 85%;
	}
}

/* Etykieta w opinii (kontekst bywa długi, np. nazwa wydarzenia z tytułem) – zawija się jak tekst */
.is-style-jp-opinia .is-style-jp-etykieta {
	max-width: 100%;
	white-space: normal;
}

/* Etykieta z powiązania bez wartości (np. opinia bez kontekstu, wystąpienie bez formatu) – ukryta */
.is-style-jp-etykieta:empty {
	display: none;
}

/* FAQ (grupa z klasą jp-faq, bloki „Szczegóły”): znak +/− zamiast trójkąta */
.jp-faq .wp-block-details summary {
	font-family: var(--wp--preset--font-family--sora);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--theme-palette-color-4);
	position: relative;
	padding-right: 48px;
	list-style: none;
	cursor: pointer;
}
.jp-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}
.jp-faq .wp-block-details summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	color: var(--theme-palette-color-6);
}
.jp-faq .wp-block-details[open] summary::after {
	content: "−";
}
.jp-faq .wp-block-details summary:hover {
	color: var(--theme-palette-color-1);
}

/* Wystąpienie bez zdjęcia: zaślepka „foto” (wstawia ją inc/wystapienia.php), stały rozmiar w wierszu flex */
.jp-foto {
	flex-shrink: 0;
}
.jp-foto-brak {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed #b5b5b5;
	background: var(--theme-palette-color-7);
}

/* Telefon: karta usługi poziomo (zdjęcie obok tekstu), logo publikacji nad tytułem */
@media (max-width: 781px) {
	.is-style-jp-publikacja {
		flex-wrap: wrap !important;
	}
	.jp-publikacje-lista .is-style-jp-publikacja {
		row-gap: 6px !important;
	}
	.jp-publikacje-lista .jp-pub-medium {
		flex-basis: 100% !important;
	}
	.jp-publikacje-lista .jp-pub-format {
		display: none;
	}
	/* Strzałka ↗ przy prawej krawędzi wiersza, jak na planszy (5.11.2026, uwaga Mario), a nie doklejona do tytułu */
	.jp-publikacje-lista .is-style-jp-publikacja p a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
	}
	.jp-publikacje-lista .is-style-jp-publikacja p a::after {
		content: '\2197\FE0E';
		flex: none;
		font-family: 'Manrope', sans-serif;
		font-size: 20px;
		font-weight: 400;
		line-height: 1;
		color: var(--theme-palette-color-1);
	}
	.is-style-jp-karta.jp-poziomo-mobile {
		display: grid !important;
		grid-template-columns: 120px 1fr;
	}
	.is-style-jp-karta.jp-poziomo-mobile > .wp-block-image {
		position: relative;
		min-height: 160px;
	}
	.is-style-jp-karta.jp-poziomo-mobile > .wp-block-image img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto !important;
	}
	.is-style-jp-karta.jp-poziomo-mobile > :last-child {
		padding: 20px !important;
	}
}

/* ==========================================================================
   Animacje (tylko na stronie, nie w edytorze). Bez obsługi view()
   przeglądarka pokazuje stan końcowy; wyłączone przy „ogranicz ruch”.
   ========================================================================== */
@keyframes jp-up {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}
@keyframes jp-reveal {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0); }
}
body:not(.editor-styles-wrapper) .jp-wejscie > * {
	animation: jp-up .9s cubic-bezier(.2, .7, .2, 1) both;
}
body:not(.editor-styles-wrapper) .jp-wejscie > :nth-child(2) { animation-delay: .12s; }
body:not(.editor-styles-wrapper) .jp-wejscie > :nth-child(3) { animation-delay: .24s; }
body:not(.editor-styles-wrapper) .jp-wejscie > :nth-child(4) { animation-delay: .36s; }
body:not(.editor-styles-wrapper) .jp-odslona {
	animation: jp-reveal 1.2s cubic-bezier(.7, 0, .2, 1) both .1s;
}
@supports (animation-timeline: view()) {
	@keyframes jp-rv {
		from { opacity: 0; transform: translateY(48px); }
		to { opacity: 1; transform: none; }
	}
	@keyframes jp-sl {
		from { transform: translateX(-6%); }
		to { transform: none; }
	}
	body:not(.editor-styles-wrapper) :is(.is-style-jp-karta, .is-style-jp-opinia, .is-style-jp-publikacja, .is-style-jp-wideo, .jp-pojaw) {
		animation: jp-rv linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 100%;
	}
	body:not(.editor-styles-wrapper) .is-style-jp-haslo {
		animation: jp-sl linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 50%;
	}
}
@media (prefers-reduced-motion: reduce) {
	body *,
	body *::before {
		animation: none !important;
		transition: none !important;
	}
}

/* Baner zgody na Google Analytics (6.11.2026, inc/analityka.php + js/analityka.js): karta w lewym dolnym
   rogu, na telefonie na całą szerokość; „Akceptuję” i „Odrzucam” wyglądają tak samo (równorzędny wybór). */
.jp-zgoda {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 1000;
	max-width: 420px;
	padding: 24px;
	background: #fff;
	color: var(--theme-palette-color-3);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
	font-size: 15px;
	line-height: 1.5;
}
.jp-zgoda[hidden] {
	display: none;
}
.jp-zgoda__tytul {
	margin: 0 0 8px;
	font-family: 'Sora', sans-serif;
	font-weight: 600;
	font-size: 17px;
	color: var(--theme-palette-color-4);
}
.jp-zgoda__opis {
	margin: 0;
}
.jp-zgoda__opis a {
	color: var(--theme-palette-color-1);
	text-decoration: underline;
}
.jp-zgoda__przyciski {
	display: flex;
	gap: 12px;
	margin-top: 18px;
}
.jp-zgoda__przyciski button {
	flex: 1;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--theme-palette-color-4);
	background: #fff;
	color: var(--theme-palette-color-4);
	font-family: 'Sora', sans-serif;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.jp-zgoda__przyciski button:hover,
.jp-zgoda__przyciski button:focus-visible {
	background: var(--theme-palette-color-1);
	border-color: var(--theme-palette-color-1);
	color: #fff;
}
@media (max-width: 781px) {
	.jp-zgoda {
		left: 12px;
		right: 12px;
		bottom: 12px;
		max-width: none;
		padding: 20px;
	}
}