.elementor-5801 .elementor-element.elementor-element-4fd6f93{--display:flex;}/* Start custom CSS *//* PORTFOLIO — PODSTRONY KLIENTA: hero case study, sekcje, kafle, player.
   Trzyma się języka wizualnego podstron: akcent #E8262C, tło #131218, shell 1440,
   Plus Jakarta Sans, plakietka „/// Case study", kreska przy nagłówku sekcji.
   Klasy hero (.case-study-hero, .v-*) są te same co dotychczas, więc styl zgadza się
   niezależnie od tego, czy stary arkusz podstrony zostanie, czy zniknie.
   Wklejane w Elementor → Ustawienia witryny → Custom CSS. */

:root {
	--pm-accent: #e8262c;
	--pm-accent-soft: rgba(232,38,44,.14);
	--pm-page: #131218;
	--pm-surface: #1c1b22;
	--pm-line: rgba(255,255,255,.10);
	--pm-fg: #ffffff;
	--pm-fg-dim: #9ba7c0;
	--pm-fg-mute: #555555;
	--pm-font: 'Plus Jakarta Sans', sans-serif;

	--pm-shell: 1440px;
	--pm-shell-pad: 5px;
	--pm-grid-gap: 30px;
	--pm-nav-h: 64px;              /* wysokość górnego navbara */
}


/* ══════════════════════════════════════════════════════════════
   1. SHELL — ta sama szerokość co reszta podstrony
   ══════════════════════════════════════════════════════════════ */

.pm-case,
.pm-showcase {
	width: min(100%, var(--pm-shell));
	margin: 0 auto;
	padding-inline: var(--pm-shell-pad);
	box-sizing: border-box;
	font-family: var(--pm-font);
	text-align: left;
}


/* ══════════════════════════════════════════════════════════════
   2. GÓRNY PASEK — renderuje go [pm_case], chowa się przy przewijaniu w dół
   ══════════════════════════════════════════════════════════════ */

.pm-navbar-desktop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--pm-nav-h);
	display: flex;
	align-items: center;
	z-index: 9999;
	background: rgba(19,18,24,.98);
	border-bottom: 1px solid rgba(255,255,255,.05);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: transform .28s ease;
	will-change: transform;
}
.pm-navbar-desktop.pm-nav-hidden { transform: translateY(calc(-1 * var(--pm-nav-h) - 8px)); }

body.admin-bar .pm-navbar-desktop { top: 32px; }
body.admin-bar .pm-navbar-desktop.pm-nav-hidden { transform: translateY(calc(-1 * var(--pm-nav-h) - 40px)); }

.pm-nav-container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	box-sizing: border-box;
}

/* ── logo ── */

.pm-logo-core {
	--s: .55;
	display: flex;
	align-items: center;
	min-width: 0;
	flex: 1 1 auto;
	font-family: var(--pm-font) !important;
	text-decoration: none !important;
}
.pm-icon-side { flex-shrink: 0; }

.pm-frame {
	position: relative;
	width: calc(64px * var(--s));
	height: calc(64px * var(--s));
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pm-surface);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: calc(16px * var(--s));
	flex-shrink: 0;
}

.pm-tri-group {
	position: relative;
	display: block;
	width: 50%;
	height: 50%;
	transform: translateX(15%);
}

.t-layer {
	position: absolute;
	width: 100%;
	height: 100%;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	background: linear-gradient(135deg, #e60000, #ff4d4d);
	transition: transform .4s cubic-bezier(.175,.885,.32,1.2);
}
.pm-logo-core .t1 { transform: translateX(calc(-20px * var(--s))) scale(.85); opacity: .5; filter: brightness(.4); z-index: 1; }
.pm-logo-core .t2 { transform: translateX(calc(-10px * var(--s))) scale(.92); opacity: .8; filter: brightness(.8); z-index: 2; }
.pm-logo-core .t3 { transform: translateX(0) scale(1); opacity: 1; filter: brightness(1.1); z-index: 3; }
.pm-logo-core:hover .t1 { transform: translateX(calc(-28px * var(--s))) scale(.8); }
.pm-logo-core:hover .t2 { transform: translateX(calc(-14px * var(--s))) scale(.9); }

.pm-text-side {
	display: flex;
	align-items: baseline;
	min-width: 0;
	margin-left: calc(18px * var(--s));
	font-size: calc(34px * var(--s));
	line-height: 1;
	text-transform: uppercase;
	color: var(--pm-fg);
	white-space: nowrap;
}
.p-bold { font-weight: 800; }
.p-thin { margin-left: 4px; color: var(--pm-fg-dim); font-weight: 500; }

/* ── powrót ── */

.pm-nav-links { display: flex; align-items: center; flex: 0 0 auto; }

.pm-nav-links a {
	min-height: 40px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border: 1px solid rgba(255,255,255,.09);
	border-radius: 999px;
	background: rgba(255,255,255,.03);
	color: var(--pm-fg-dim) !important;
	font-family: var(--pm-font) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .7px;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.pm-nav-links a svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .25s ease; }
.pm-nav-links a:hover {
	color: var(--pm-fg) !important;
	background: rgba(255,255,255,.055);
	border-color: rgba(255,255,255,.16);
	box-shadow: 0 10px 22px rgba(0,0,0,.18);
	transform: translateY(-1px);
}
.pm-nav-links a:hover svg { transform: translateX(-3px); }


/* ══════════════════════════════════════════════════════════════
   3. HERO CASE STUDY
   ══════════════════════════════════════════════════════════════ */

.pm-case .case-study-hero {
	padding-top: 160px;
	padding-bottom: 80px;
}

.pm-case .v-badge {
	display: block;
	margin-bottom: 20px;
	color: var(--pm-accent);
	font-family: var(--pm-font);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.pm-case .v-title-big {
	margin: 0 0 25px;
	color: var(--pm-fg);
	font-family: var(--pm-font);
	font-size: clamp(40px, 6vw, 85px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.03em;
	text-transform: uppercase;
}

.pm-case .v-subtitle {
	max-width: 650px;
	margin: 0;
	color: var(--pm-fg-dim);
	font-family: var(--pm-font);
	font-size: 18px;
	line-height: 1.6;
}

.pm-case .v-meta-grid {
	display: flex;
	gap: 80px;
	margin-top: 60px;
	padding-top: 30px;
	border-top: 1px solid var(--pm-line);
}

.pm-case .v-meta-item { min-width: 0; }

.pm-case .v-meta-item span {
	display: block;
	margin-bottom: 8px;
	color: var(--pm-fg-mute);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.5px;
	line-height: 1.2;
	text-transform: uppercase;
}

.pm-case .v-meta-item strong {
	display: block;
	color: var(--pm-fg);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════════
   3. NAWIGACJA SEKCJI
   ══════════════════════════════════════════════════════════════ */

/* Pionowa listwa przy prawej krawędzi. Wyjęta z układu strony, więc nie zostawia
   odstępu nad treścią i nie wchodzi w drogę górnemu paskowi. */
.pm-case__nav {
	position: fixed;
	top: 50%;
	right: 22px;
	transform: translateY(-50%);
	z-index: 30;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	margin: 0;
	padding: 0;
	background: none;
}

.pm-case__navlink {
	min-height: 36px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(255,255,255,.09);
	border-radius: 999px;
	background: rgba(19,18,24,.82);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--pm-fg-dim) !important;
	font-family: var(--pm-font) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .8px;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}

/* Kropka przed etykietą: przy aktywnej sekcji zapala się na czerwono. */
.pm-case__navlink::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: rgba(255,255,255,.28);
	transition: background .25s ease, box-shadow .25s ease;
}

.pm-case__navlink:hover,
.pm-case__navlink:focus-visible {
	color: var(--pm-fg) !important;
	background: rgba(19,18,24,.95);
	border-color: rgba(255,255,255,.18);
	transform: translateX(-3px);
}

.pm-case__navlink.is-active {
	color: var(--pm-fg) !important;
	border-color: rgba(232,38,44,.45);
	background: rgba(232,38,44,.14);
}
.pm-case__navlink.is-active::before {
	background: var(--pm-accent);
	box-shadow: 0 0 8px rgba(232,38,44,.8);
}


/* ══════════════════════════════════════════════════════════════
   4. NAGŁÓWEK SEKCJI
   ══════════════════════════════════════════════════════════════ */

/* Kotwica musi ominąć navbar I przyklejony pasek sekcji. */
.pm-case__section { scroll-margin-top: calc(var(--pm-nav-h) + 80px); }

.pm-case .v-section-header {
	padding-top: 100px;
	padding-bottom: 30px;
}

.pm-case .v-line {
	width: 35px;
	height: 2px;
	margin-bottom: 25px;
	background: var(--pm-accent);
}

/* !important, bo motyw ma na nagłówkach regułę mocniejszą — bez tego wraca szeryf. */
.pm-case .v-section-header h2 {
	margin: 0 0 10px !important;
	color: var(--pm-fg) !important;
	font-family: var(--pm-font) !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
}

.pm-case .v-section-header p {
	margin: 0 !important;
	max-width: 650px;
	color: var(--pm-fg-dim) !important;
	font-family: var(--pm-font) !important;
	font-size: 16px !important;
	line-height: 1.55 !important;
}


/* ══════════════════════════════════════════════════════════════
   5. SIATKI — dwie kolumny poziomo, cztery dla reelsów
   ══════════════════════════════════════════════════════════════ */

.pm-tiles { display: grid; gap: var(--pm-grid-gap); }

.pm-tiles--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pm-tiles--reel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pm-tiles--hero { grid-template-columns: 1fr; }

.pm-tiles--strip {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
	scrollbar-width: none;
}
.pm-tiles--strip::-webkit-scrollbar { display: none; }
.pm-tiles--strip .pm-tile { flex: 0 0 calc(50% - var(--pm-grid-gap)); scroll-snap-align: start; }
.pm-tiles--strip .pm-tile--pion { flex-basis: calc(25% - var(--pm-grid-gap)); }


/* ══════════════════════════════════════════════════════════════
   6. KAFEL
   ══════════════════════════════════════════════════════════════ */

.pm-tile { min-width: 0; font-family: var(--pm-font) !important; }

.pm-tile__btn {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.pm-tile__btn:focus-visible { outline: 2px solid var(--pm-accent); outline-offset: 4px; border-radius: 14px; }

.pm-tile__media {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--pm-line);
	border-radius: 14px;
	background: var(--pm-surface);
	transition: border-color .3s ease, box-shadow .3s ease, transform .35s ease;
}
.pm-tile--poziom .pm-tile__media { aspect-ratio: 16 / 9; }
.pm-tile--pion   .pm-tile__media { aspect-ratio: 9 / 16; }

.pm-tile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}

/* Przyciemnienie dołu miniatury — tytuł leży NA obrazie i musi być czytelny
   niezależnie od tego, co akurat jest pod nim. */
.pm-tile__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top,
		rgba(10,9,13,.82) 0%,
		rgba(10,9,13,.45) 14%,
		rgba(10,9,13,.10) 30%,
		rgba(10,9,13,0) 46%);
}

/* Plakietka wyświetleń w rogu miniatury. */
.pm-tile__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 999px;
	background: rgba(19,18,24,.82);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 8px 20px rgba(0,0,0,.3);
	color: var(--pm-fg) !important;
	font-family: var(--pm-font) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 1.2px !important;
	line-height: 1 !important;
	text-transform: uppercase;
	white-space: nowrap;
}
.pm-tile__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--pm-accent);
	box-shadow: 0 0 8px rgba(232,38,44,.7);
}
.pm-tile__eye { width: 13px; height: 13px; flex-shrink: 0; opacity: .85; }

/* Tytuł na dole miniatury. Span, nie nagłówek — siedzi w przycisku. */
.pm-tile__title {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	margin: 0 !important;
	color: var(--pm-fg) !important;
	font-family: var(--pm-font) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.32 !important;
	letter-spacing: -.01em !important;
	text-align: left;
	text-shadow: 0 2px 12px rgba(0,0,0,.55);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pm-tile--pion .pm-tile__title { left: 14px; right: 14px; bottom: 14px; font-size: 14px !important; }
.pm-tile--pion .pm-tile__badge { top: 10px; right: 10px; padding: 6px 10px; }

/* Kółko odtwarzania wychodzi dopiero pod kursorem — na dotyku jest zawsze,
   bo tam nie ma najechania i trzeba pokazać, że kafel się klika. */
.pm-tile__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 62px;
	height: 62px;
	border-radius: 999px;
	background: rgba(232,38,44,.92);
	box-shadow: 0 12px 30px rgba(0,0,0,.4);
	opacity: 0;
	transform: scale(.86);
	transition: opacity .25s ease, transform .25s cubic-bezier(.25,.46,.45,.94);
}
.pm-tile__play::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #fff;
	transform: translateX(2px);         /* optyczne wyśrodkowanie trójkąta w kole */
}

.pm-tile__btn:hover .pm-tile__play,
.pm-tile__btn:focus-visible .pm-tile__play { opacity: 1; transform: scale(1); }

.pm-tile__btn:hover .pm-tile__img,
.pm-tile__btn:focus-visible .pm-tile__img { transform: scale(1.06); }

.pm-tile__btn:hover .pm-tile__media,
.pm-tile__btn:focus-visible .pm-tile__media {
	border-color: rgba(232,38,44,.5);
	box-shadow: 0 22px 46px rgba(0,0,0,.42);
}

@media (hover: none) {
	.pm-tile__play { opacity: .92; transform: scale(1); width: 54px; height: 54px; }
}

/* ── hero: tekst pod wideo, nie na nim ── */

.pm-tile__title--hero {
	position: static;
	margin: 26px 0 0 !important;
	font-size: clamp(24px, 3vw, 38px) !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	letter-spacing: -.02em !important;
	text-shadow: none;
	-webkit-line-clamp: 3;
}

.pm-tile__lead {
	margin: 16px 0 0 !important;
	max-width: 650px;
	color: var(--pm-fg-dim) !important;
	font-family: var(--pm-font) !important;
	font-size: 16px !important;
	line-height: 1.55 !important;
}

.pm-hint {
	padding: 14px 18px;
	border-left: 2px solid var(--pm-accent);
	background: var(--pm-accent-soft);
	color: var(--pm-fg-dim);
	font-family: var(--pm-font);
	font-size: 15px;
}


/* ══════════════════════════════════════════════════════════════
   7. PLAYER
   ══════════════════════════════════════════════════════════════ */

.pm-modal[hidden] { display: none; }

.pm-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;                     /* nad navbarem (9999) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: var(--pm-font);
}

.pm-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(19,18,24,.94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	animation: pm-fade .18s ease both;
}

.pm-modal__dialog {
	position: relative;
	width: 100%;
	animation: pm-rise .24s cubic-bezier(.25,.46,.45,.94) both;
}

/* Szerokość ogranicza wysokość ekranu — pionowy film nie wystaje poza widok. */
.pm-modal--poziom { max-width: min(1100px, calc((100vh - 48px) * 16 / 9)); }
.pm-modal--pion   { max-width: min(420px,  calc((100vh - 48px) * 9 / 16)); }

.pm-modal__frame {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--pm-line);
	border-radius: 14px;
	background: #000;
	box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.pm-modal--poziom .pm-modal__frame { aspect-ratio: 16 / 9; }
.pm-modal--pion   .pm-modal__frame { aspect-ratio: 9 / 16; }

.pm-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.pm-modal__close {
	position: absolute;
	top: -48px;
	right: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255,255,255,.13);
	border-radius: 999px;
	background: rgba(19,18,24,.78);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--pm-fg);
	font-family: var(--pm-font);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}
.pm-modal__close:hover,
.pm-modal__close:focus-visible { background: var(--pm-accent); border-color: rgba(232,38,44,.9); }

body.pm-modal-open { overflow: hidden; }

@keyframes pm-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pm-rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }


/* ══════════════════════════════════════════════════════════════
   8. TABLET
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
	:root { --pm-shell-pad: 24px; --pm-nav-h: 62px; }

	.pm-nav-container { padding: 0 24px; gap: 16px; }
	.pm-logo-core { --s: .48; }
	.pm-nav-links a { min-height: 38px; padding: 0 14px; font-size: 11px !important; letter-spacing: .6px; }

	.pm-case .v-meta-grid { gap: 24px; flex-wrap: wrap; }
	.pm-case .v-meta-item { min-width: 180px; }

	.pm-tiles--reel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ══════════════════════════════════════════════════════════════
   9. MOBILE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
	:root { --pm-shell-pad: 20px; --pm-nav-h: 68px; --pm-grid-gap: 18px; }

	body.admin-bar .pm-navbar-desktop { top: 46px; }
	body.admin-bar .pm-navbar-desktop.pm-nav-hidden { transform: translateY(calc(-1 * var(--pm-nav-h) - 54px)); }
	.pm-nav-container { padding: 0 16px; gap: 12px; }
	.pm-logo-core { --s: .43; }
	.pm-nav-links a { min-height: 42px; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); font-size: 11px !important; }

	.pm-case .case-study-hero { padding-top: 110px; padding-bottom: 42px; }
	.pm-case .v-badge { margin-bottom: 14px; font-size: 10px; letter-spacing: 2px; }
	.pm-case .v-title-big { margin-bottom: 18px; font-size: clamp(30px, 9vw, 44px); line-height: 1.08; }
	.pm-case .v-subtitle { max-width: none; font-size: 15px; line-height: 1.55; }

	.pm-case .v-meta-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px 18px;
		margin-top: 30px;
		padding-top: 18px;
	}
	.pm-case .v-meta-item { padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
	.pm-case .v-meta-item span { margin-bottom: 6px; color: rgba(155,167,192,.62); font-size: 8px; letter-spacing: 1.05px; }
	.pm-case .v-meta-item strong { font-size: 14px; font-weight: 700; word-break: break-word; }

	.pm-case .v-section-header { padding-top: 58px; padding-bottom: 20px; }
	.pm-case .v-section-header h2 { font-size: 24px; line-height: 1.2; }
	.pm-case .v-section-header p { font-size: 14px; line-height: 1.5; }

	/* Na wąskim ekranie listwa przy krawędzi nie ma gdzie stanąć — schodzi na dół,
	   wyśrodkowana, poziomo. Dalej poza układem strony, więc nic nie przesuwa. */
	.pm-case__nav {
		top: auto;
		bottom: 16px;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		flex-direction: row;
		align-items: center;
		max-width: calc(100% - 32px);
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
		padding: 0;
	}
	.pm-case__nav::-webkit-scrollbar { display: none; }
	.pm-case__navlink:hover { transform: none; }

	/* Poziome jedna pod drugą, reelsy przewijane w bok ze snapem — bez karuzeli na JS. */
	.pm-tiles--grid { grid-template-columns: 1fr; }

	.pm-tiles--reel {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 6px;
	}
	.pm-tiles--reel::-webkit-scrollbar { display: none; }
	.pm-tiles--reel .pm-tile { flex: 0 0 74vw; scroll-snap-align: center; }

	.pm-tile__title { font-size: 15px; }
	.pm-modal__close { top: 10px; right: 10px; }
}

@media (max-width: 480px) {
	:root { --pm-shell-pad: 16px; --pm-nav-h: 70px; }

	.pm-nav-container { padding: 0 12px; gap: 10px; }
	.pm-logo-core { --s: .39; }
	/* Na najwęższych ekranach pełny tekst przycisku się nie mieści. */
	.pm-nav-links a span { display: none; }
	.pm-nav-links a::after { content: "Wróć"; display: inline-block; }

	.pm-case .v-title-big { font-size: clamp(28px, 9.5vw, 38px); }
	.pm-case .v-subtitle { font-size: 14px; }
	.pm-case .v-section-header h2 { font-size: 22px; }
	.pm-tiles--reel .pm-tile { flex-basis: 80vw; }
}


@media (prefers-reduced-motion: reduce) {
	.pm-tile__img, .pm-tile__play, .pm-tile__media { transition: none; }
	.pm-tile__btn:hover .pm-tile__img { transform: none; }
	.pm-modal__backdrop, .pm-modal__dialog { animation: none; }
}


/* ══════════════════════════════════════════════════════════════
   10. UNIESIENIE I POŚWIATA
   Kafel w spoczynku ma cień osadzający go na tle, pod kursorem unosi się
   i zapala łunę w kolorze akcentu. Łuna to osobna warstwa pod kaflem
   (rozmyty gradient), nie box-shadow — dzięki temu rozlewa się miękko
   i nie obrysowuje prostokąta.
   ══════════════════════════════════════════════════════════════ */

.pm-tile {
	position: relative;
	isolation: isolate;                 /* łuna zostaje pod kaflem, nie pod sąsiadami */
}

.pm-tile::after {
	content: "";
	position: absolute;
	inset: 8% 6% -6%;
	z-index: -1;
	border-radius: 40px;
	background: radial-gradient(closest-side, rgba(232,38,44,.42), rgba(232,38,44,0) 72%);
	filter: blur(34px);
	opacity: 0;
	transform: translateY(6px) scale(.94);
	transition: opacity .38s ease, transform .38s cubic-bezier(.25,.46,.45,.94);
	pointer-events: none;
}

.pm-tile__media {
	box-shadow: 0 14px 34px rgba(0,0,0,.42);
	transform: translateY(0);
	transition:
		transform .38s cubic-bezier(.25,.46,.45,.94),
		box-shadow .38s ease,
		border-color .3s ease;
}

.pm-tile:hover .pm-tile__media,
.pm-tile__btn:focus-visible .pm-tile__media {
	transform: translateY(-10px);
	border-color: rgba(232,38,44,.45);
	box-shadow:
		0 30px 60px rgba(0,0,0,.55),
		0 0 0 1px rgba(232,38,44,.22);
}

.pm-tile:hover::after,
.pm-tile:focus-within::after { opacity: 1; transform: translateY(0) scale(1); }

/* Podniesiony kafel nie ma ciągnąć za sobą sąsiadów w kolejności rysowania. */
.pm-tile:hover { z-index: 2; }

@media (hover: none) {
	/* Na dotyku nie ma najechania — łuna byłaby dekoracją, której nikt nie wywoła. */
	.pm-tile::after { display: none; }
	.pm-tile__media { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pm-tile__media, .pm-tile::after { transition: none; }
	.pm-tile:hover .pm-tile__media { transform: none; }
}


/* ══════════════════════════════════════════════════════════════
   11. PODGLĄD NA NAJECHANIE
   Warstwa wchodzi NAD miniaturę, pod przyciemnienie i tytuł — podpis zostaje
   czytelny, a materiał gra pod spodem. Wygaszenie na wejściu, żeby nie mrugało.
   ══════════════════════════════════════════════════════════════ */

.pm-tile__preview {
	position: absolute;
	inset: 0;
	z-index: 1;                          /* nad img, pod scrim/tytułem/plakietką */
	overflow: hidden;
	background: #000;
	opacity: 0;
	animation: pm-preview-in .45s ease forwards;
	pointer-events: none;
}

.pm-tile__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Odtwarzacz nie umie object-fit — powiększamy go tak, żeby wypełnił kafel
   bez czarnych pasów przy zaokrągleniu proporcji. */
.pm-tile__preview iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border: 0;
	transform: translate(-50%, -50%) scale(1.32);
}

.pm-tile__scrim,
.pm-tile__badge,
.pm-tile__title,
.pm-tile__play { z-index: 2; }

/* Przy grającym podglądzie miniatura nie musi już „oddychać". */
.pm-tile.is-previewing .pm-tile__img { transform: none; }

@keyframes pm-preview-in { from { opacity: 0 } to { opacity: 1 } }


/* ══════════════════════════════════════════════════════════════
   12. PRÓG SEKCJI — „Pokaż pozostałe"
   Nadmiar jest w HTML, tylko schowany. Rozwinięcie nie doładowuje niczego
   i nie przeskakuje stroną.
   ══════════════════════════════════════════════════════════════ */

.pm-tile--extra { display: none; }
.pm-tiles.is-expanded .pm-tile--extra { display: block; animation: pm-tile-in .4s ease both; }

.pm-tiles-more {
	display: flex;
	justify-content: center;
	margin-top: 34px;
}

.pm-more-btn {
	min-height: 46px;
	padding: 0 26px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 999px;
	background: rgba(255,255,255,.03);
	color: var(--pm-fg-dim) !important;
	font-family: var(--pm-font) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .8px;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.pm-more-btn:hover,
.pm-more-btn:focus-visible {
	color: var(--pm-fg) !important;
	background: rgba(232,38,44,.1);
	border-color: rgba(232,38,44,.45);
	transform: translateY(-1px);
}


@keyframes pm-tile-in { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
	.pm-tiles.is-expanded .pm-tile--extra { animation: none; }
}


/* ══════════════════════════════════════════════════════════════
   13. STOPKA
   Oddech przed nią jest większy niż odstęp między sekcjami — stopka ma zamykać
   stronę, a nie wyglądać jak kolejna sekcja.
   ══════════════════════════════════════════════════════════════ */

.pm-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 60px;
	padding: 36px 0 48px;
	border-top: 1px solid rgba(255,255,255,.07);
	font-family: var(--pm-font) !important;
}

.pm-footer__brand {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-size: 15px;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.pm-footer__bold { color: var(--pm-fg); font-weight: 800; }
.pm-footer__thin { color: var(--pm-fg-dim); font-weight: 500; }

.pm-footer__copy {
	color: var(--pm-fg-mute);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

/* Przycisk „Pokaż pozostałe" nie może kleić się do kreski stopki. */
.pm-tiles-more { margin-bottom: 8px; }

@media (max-width: 600px) {
	.pm-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		margin-top: 40px;
		padding: 28px 0 36px;
	}
}



/* ── kafel prowadzący na stronę (kursy, landingi) ──
   Ten sam kadr co przy filmie, inny sygnał: strzałka zamiast trójkąta. */

.pm-tile__play--link::after {
	content: "↗";
	width: auto;
	height: auto;
	border: 0;
	color: #fff;
	font-family: var(--pm-font);
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	transform: none;
}


/* ══════════════════════════════════════════════════════════════
   15. KARUZELA ROLEK NA PODSTRONIE
   Kafle zostają w rozmiarze z siatki. Krawędzie wygaszane maską, a nie ucinane,
   i tylko po tej stronie, po której faktycznie coś jeszcze jest.
   ══════════════════════════════════════════════════════════════ */

.pm-carousel { position: relative; }

.pm-carousel .pm-tiles--reel {
	display: flex;
	gap: var(--pm-grid-gap);
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 10px 0 14px;                 /* miejsce na uniesienie kafla */

	/* ★ Wygaszenie krawędzi ZDJĘTE 19.08. Maska rozmywała kafle na rantach i user
	   uznał to za brzydkie. Karuzela pokazuje teraz wyłącznie całe kafle —
	   liczbę kolumn wylicza JS i podaje w `--pm-cols`. */
	scroll-snap-type: x mandatory;
}
.pm-carousel .pm-tiles--reel::-webkit-scrollbar { display: none; }

/* Kafel dzieli szerokość rzędu równo. Bez tego ostatni zawsze wystaje poza
   krawędź, bo stała szerokość nie dzieli się przez szerokość kontenera. */
.pm-carousel .pm-tiles--reel .pm-tile {
	flex: 0 0 calc((100% - (var(--pm-cols, 3) - 1) * var(--pm-car-gap, 22px)) / var(--pm-cols, 3));
	scroll-snap-align: start;
}

/* Ta sama szerokość co w siatce czterokolumnowej — karuzela nie ma zmniejszać rolek. */
.pm-carousel .pm-tiles--reel .pm-tile {
	flex: 0 0 calc((100% - 3 * var(--pm-grid-gap)) / 4);
	min-width: 240px;
	scroll-snap-align: start;
}

/* Strzałki nad kaflami, wyśrodkowane na samej miniaturze — nie na całym boksie,
   bo ten ma jeszcze zapas na uniesienie. */
.pm-carousel__arrow {
	position: absolute;
	top: calc(50% - 2px);
	transform: translateY(-50%);
	z-index: 6;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 2px 3px 0;                 /* optyczne wyśrodkowanie znaku w kole */
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 999px;
	background: rgba(19,18,24,.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 14px 32px rgba(0,0,0,.5);
	color: var(--pm-fg);
	font-family: var(--pm-font) !important;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background .22s ease, border-color .22s ease, opacity .22s ease, transform .22s ease;
}
.pm-carousel__arrow.prev { left: 10px; }
.pm-carousel__arrow.next { right: 10px; }

.pm-carousel__arrow:hover {
	background: var(--pm-accent);
	border-color: rgba(232,38,44,.9);
	transform: translateY(-50%) scale(1.06);
}
.pm-carousel__arrow[disabled] { opacity: 0; pointer-events: none; }

/* Nie ma czego przewijać — nie ma strzałek. */
.pm-carousel.is-static .pm-carousel__arrow { display: none; }

/* ★ Nadpisania `flex-basis` na wąskich ekranach ZDJĘTE 19.08 wraz z maską.
   Wymuszały trzy kolumny na tablecie i 60vw na telefonie, czyli znowu kafel
   przycięty na krawędzi. Liczbę kolumn wylicza teraz JS dla każdej szerokości. */

@media (max-width: 768px) {
	.pm-carousel .pm-tiles--reel { gap: 14px; --pm-car-gap: 14px; }
	.pm-carousel .pm-tiles--reel .pm-tile { min-width: 0; }
	.pm-carousel__arrow { display: none; }
}


/* ── stepper pod karuzelą ──
   Segment na ekran zawartości, nie na kafel. Aktywny rozciąga się w pigułkę,
   więc pozycję widać kątem oka, bez liczenia kropek. */

.pm-carousel__steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
}
.pm-carousel__steps[hidden] { display: none; }

.pm-carousel__step {
	width: 26px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255,255,255,.16);
	cursor: pointer;
	transition: width .3s cubic-bezier(.25,.46,.45,.94), background .25s ease, box-shadow .25s ease;
}
/* Pasek jest cienki, więc obszar kliknięcia rozszerza pseudoelement. */
.pm-carousel__step {
	position: relative;
}
.pm-carousel__step::after {
	content: "";
	position: absolute;
	inset: -12px -4px;
}

.pm-carousel__step:hover { background: rgba(255,255,255,.34); }

.pm-carousel__step.is-active {
	width: 52px;
	background: linear-gradient(90deg, var(--pm-accent-dark, #af0000), var(--pm-accent));
	box-shadow: 0 0 14px rgba(232,38,44,.45);
}

@media (prefers-reduced-motion: reduce) {
	.pm-carousel__step { transition: none; }
}/* End custom CSS */