/* ==========================================================================
   WroobelDJ 2026 — „Łuk i światło”
   Łuk (ślubna elegancja): rama zdjęcia w „O mnie” i kształt, w którym na pierwszym ekranie
   odsłania się kolejne zdjęcie z imprezy; magentowe snopy z ruchomych głów (nowoczesna scena) jako światło.
   ========================================================================== */

:root {
	/* Kolory */
	--noc: #150914;          /* tło: śliwkowa czerń sali po zmroku */
	--noc-2: #211022;        /* podniesiona powierzchnia */
	--noc-3: #2e1730;
	--magenta: #b200a8;      /* kolor marki (logo, aplikacja) */
	--magenta-jasna: #c81bbe;
	--roz: #f48aee;          /* akcent tekstowy na ciemnym tle */
	--mleko: #fbf2f8;        /* jasne tło i tekst na ciemnym */
	--sliwka: #2b1029;       /* tekst na jasnym tle */
	--szary: #b7a3b5;        /* tekst drugoplanowy na ciemnym */
	--szary-ciemny: #6e5670; /* tekst drugoplanowy na jasnym */
	--line: rgba(251, 242, 248, .12);
	--line-strong: rgba(251, 242, 248, .24);
	--line-light: rgba(43, 16, 41, .14);

	/* Typografia */
	--font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
	--font-text: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* Układ */
	--wrap: 1240px;
	--gutter: clamp(20px, 4vw, 48px);
	--header-h: 76px;
	--section-y: clamp(80px, 10vw, 144px);
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- podstawy ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
	margin: 0;
	background: var(--noc);
	color: var(--mleko);
	font-family: var(--font-text);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
html.is-locked { overflow: hidden; }
img, video, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.site-main:focus { outline: none; }

:focus-visible { outline: 2px solid var(--roz); outline-offset: 3px; }
::selection { background: var(--magenta); color: #fff; }
html { scrollbar-color: #4a2348 var(--noc); }
.section--light :focus-visible, .page-body :focus-visible { outline-color: var(--magenta); }

.screen-reader-text, .form__trap {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link {
	position: absolute; left: 12px; top: -100px; z-index: 100;
	padding: 12px 18px; border-radius: 999px;
	background: var(--mleko); color: var(--sliwka); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--prose { max-width: calc(720px + 2 * var(--gutter)); }
.wrap--wide { max-width: calc(1040px + 2 * var(--gutter)); }
.wrap--form { max-width: calc(980px + 2 * var(--gutter)); }

/* ---------- typografia ---------- */
.h2 {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.85rem, 1.2rem + 2.4vw, 3.3rem);
	line-height: 1.08;
	letter-spacing: -.035em;
	text-wrap: balance;
}
.section-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head__lead { margin-top: 18px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); color: var(--szary); max-width: 40em; }
.section--light .section-head__lead { color: var(--szary-ciemny); }

.link {
	color: var(--roz);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .28em;
	transition: text-decoration-thickness .15s;
}
.link:hover { text-decoration-thickness: 2px; }
.section--light .link { color: var(--magenta); }
.section-more { margin-top: clamp(32px, 4vw, 48px); }

.icon { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- przyciski ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 26px;
	border: 1px solid transparent; border-radius: 999px;
	font-family: var(--font-text); font-weight: 600; font-size: 1rem; line-height: 1.2;
	text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.btn .icon { width: 18px; height: 18px; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.btn--primary { background: var(--magenta); color: #fff; }
.btn--primary:hover { background: var(--magenta-jasna); }
.btn--ghost { border-color: var(--line-strong); background: transparent; color: var(--mleko); }
.btn--ghost:hover { border-color: var(--mleko); background: rgba(251, 242, 248, .06); }
.btn--light { background: var(--mleko); color: var(--sliwka); }
.btn--light:hover { background: #fff; }
.btn--white { background: #fff; color: var(--magenta); }
.btn--white:hover { background: var(--noc); color: #fff; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- nagłówek ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header::before {
	content: ""; position: absolute; inset: 0;
	background: rgba(21, 9, 20, .94);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	border-bottom: 1px solid var(--line);
	opacity: 0; transition: opacity .3s;
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header__in { position: relative; display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { position: relative; z-index: 2; display: block; flex: none; }
.brand__logo { display: block; width: auto; height: 20px; }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: 6px 28px; margin: 0; padding: 0; list-style: none; }
.nav__list a {
	position: relative; display: block; padding: 8px 0;
	color: rgba(251, 242, 248, .82); font-size: .9375rem; font-weight: 500; text-decoration: none;
	transition: color .2s;
}
.nav__list a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
	background: var(--roz); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav__list a:hover, .nav__list .current-menu-item > a { color: #fff; }
.nav__list a:hover::after, .nav__list .current-menu-item > a::after { transform: scaleX(1); }
.nav__contact { display: none; }
.site-header__call { position: relative; z-index: 2; }
.nav-toggle {
	position: relative; z-index: 2; display: none; align-items: center; gap: 10px;
	min-height: 44px; padding: 0 4px 0 12px; margin-right: -4px;
	background: none; border: 0; color: var(--mleko); font-weight: 600; font-size: .9375rem; cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), background-color .2s; }
.nav-toggle__bars { position: relative; background: transparent; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { transform: translateY(-4px); }
.nav-toggle__bars::after { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg); }

@media (max-width: 1000px) {
	.nav-toggle { display: inline-flex; }
	.site-header__call { margin-left: auto; }
	.nav {
		position: fixed; inset: 0; z-index: 1;
		display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
		padding: calc(var(--header-h) + 24px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
		background: var(--noc);
		overflow-y: auto;
		visibility: hidden; opacity: 0;
		transition: opacity .25s, visibility 0s .25s;
	}
	.nav.is-open { visibility: visible; opacity: 1; transition: opacity .25s; }
	.nav__list { flex-direction: column; gap: 0; }
	.nav__list a { padding: 10px 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 7vw, 2.3rem); letter-spacing: -.03em; color: var(--mleko); }
	.nav__list a::after { display: none; }
	.nav__contact { display: grid; gap: 6px; padding-top: 24px; border-top: 1px solid var(--line); }
	.nav__contact a { color: var(--roz); font-size: 1.125rem; font-weight: 500; text-decoration: none; }
}
@media (max-width: 560px) {
	.site-header__call { width: 44px; padding: 0; }
	.site-header__call span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
	.nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
	.nav-toggle { padding: 0 10px; }
}

/* ---------- sekcje ---------- */
.section { position: relative; padding-block: var(--section-y); }
.section--light { background: var(--mleko); color: var(--sliwka); }
/* zwykłe bloki (akapit, nagłówek…) wstawione w edytorze między sekcje — bez podwójnego odstępu obok jasnej sekcji */
.section--light + .wdj-tresc, .wdj-tresc + .section--light { padding-top: 0; }

/* ---------- hero: zdjęcia z imprez jako tło sceny ---------- */
.hero {
	/* rozmiar hasła — z niego liczymy też, gdzie kończy się tekst, a zaczyna odsłonięte zdjęcie */
	--hero-title: clamp(2rem, 1rem + 3.7vw, 4.15rem);
	--hero-text-end: calc(max(var(--gutter), (100vw - var(--wrap)) / 2) + 10.6 * var(--hero-title));
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; align-items: center;
	min-height: min(100svh, 1000px);
	padding: calc(var(--header-h) + clamp(32px, 5vw, 72px)) 0 clamp(96px, 9vw, 132px);
	background: var(--noc);
}
.hero__in { position: relative; z-index: 3; }
.hero__text { max-width: calc(10.6 * var(--hero-title)); }
.hero__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: var(--hero-title);
	line-height: 1.06;
	letter-spacing: -.04em;
	text-wrap: balance;
	text-shadow: 0 2px 32px rgba(21, 9, 20, .6);
}
.hero__typed {
	margin-top: clamp(16px, 2vw, 24px);
	font-family: var(--font-display); font-weight: 300;
	font-size: clamp(1.02rem, .82rem + .9vw, 1.55rem); letter-spacing: -.02em; line-height: 1.3;
	color: rgba(251, 242, 248, .74);
}
.typed { color: var(--roz); white-space: nowrap; }
.hero__lead { max-width: 31em; margin-top: clamp(22px, 3vw, 32px); color: rgba(251, 242, 248, .8); font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3.5vw, 40px); }

/* scena ze zdjęciami: od końca tekstu do prawej krawędzi, od góry do dołu; lewą część przykrywa .hero__veil */
.hero-slider { position: absolute; inset: 0; }
.hero__photos {
	position: absolute; inset: 0 0 0 clamp(26%, var(--hero-text-end) - 220px, 46%);
	overflow: hidden; background: var(--noc-2);
}
.slide { position: absolute; inset: 0; display: none; margin: 0; }
.slide.is-active { display: block; z-index: 2; }
.slide.was-active { display: block; z-index: 1; }
.slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 40%); }

/* cień pod tekstem i menu, przejście w pasek imprez, winieta */
.hero__veil {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(21, 9, 20, .86) 0, rgba(21, 9, 20, .5) 100px, rgba(21, 9, 20, 0) 240px),
		linear-gradient(0deg, var(--noc) 0, rgba(21, 9, 20, .62) 80px, rgba(21, 9, 20, 0) 32%),
		linear-gradient(90deg, var(--noc) calc(var(--hero-text-end) - 200px), rgba(21, 9, 20, .9) calc(var(--hero-text-end) - 60px), rgba(21, 9, 20, .62) calc(var(--hero-text-end) + 40px), rgba(21, 9, 20, .28) calc(var(--hero-text-end) + 140px), rgba(21, 9, 20, .08) calc(var(--hero-text-end) + 240px), rgba(21, 9, 20, 0) calc(var(--hero-text-end) + 320px)),
		radial-gradient(120% 95% at 74% 42%, rgba(21, 9, 20, 0) 55%, rgba(21, 9, 20, .5) 100%);
}
/* ziarno jak na kliszy — maskuje pasy w gradientach i miękkość powiększonego zdjęcia */
.hero::before {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 160px;
	opacity: .1; mix-blend-mode: overlay;
}
/* magentowa mgła nad parkietem, na styku tekstu i zdjęcia */
.hero::after {
	content: ""; position: absolute; z-index: 2; left: calc(var(--hero-text-end) - 460px); bottom: -46%;
	width: min(1100px, 90vw); height: 92%;
	background: radial-gradient(closest-side, rgba(178, 0, 168, .36), rgba(178, 0, 168, .1) 58%, rgba(178, 0, 168, 0));
	mix-blend-mode: screen; pointer-events: none;
}

/* sterowanie pokazem: licznik, paski postępu, pauza — w prawym dolnym rogu sceny */
.slider-ui {
	position: absolute; z-index: 3;
	right: max(var(--gutter), (100% - var(--wrap)) / 2); bottom: clamp(26px, 3.4vw, 44px);
	display: flex; align-items: center; gap: 14px; width: min(360px, 34%);
}
.slider-count { flex: none; font-family: var(--font-display); font-weight: 300; font-size: .8125rem; letter-spacing: .04em; color: rgba(251, 242, 248, .62); font-variant-numeric: tabular-nums; }
.slider-count span { color: var(--mleko); }
.slider-dots { display: flex; flex: 1; gap: 6px; margin: 0; padding: 0; list-style: none; }
.slider-dots li { flex: 1; }
.slider-dot { display: block; width: 100%; padding: 12px 0; background: none; border: 0; cursor: pointer; }
.slider-dot span { position: relative; display: block; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(251, 242, 248, .24); transition: background-color .2s; }
.slider-dot:hover span { background: rgba(251, 242, 248, .45); }
.slider-dot span::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, var(--magenta), var(--roz));
	transform: scaleX(0); transform-origin: left;
}
.slider-dot[aria-current="true"] span::after { transform: scaleX(1); }
.slider-dot.is-done span::after { transform: scaleX(1); opacity: .45; }
.slider-toggle {
	display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0;
	background: rgba(21, 9, 20, .35); border: 1px solid var(--line-strong); border-radius: 50%; color: var(--mleko); cursor: pointer;
	transition: border-color .2s, background-color .2s;
}
.slider-toggle:hover { border-color: var(--mleko); background: rgba(251, 242, 248, .08); }
.slider-toggle .icon { width: 16px; height: 16px; }
.slider-toggle .icon--play, .hero-slider.is-paused .slider-toggle .icon--pause { display: none; }
.hero-slider.is-paused .slider-toggle .icon--play { display: block; }

/* „Przewiń” */
.hero__scroll {
	position: absolute; z-index: 3; left: 50%; bottom: 22px; translate: -50% 0;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	color: var(--szary); font-size: .8125rem; font-weight: 500; text-decoration: none; letter-spacing: .02em;
	transition: color .2s;
}
.hero__scroll i { position: relative; display: block; width: 1px; height: 42px; overflow: hidden; background: rgba(251, 242, 248, .2); }
.hero__scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: var(--roz); }
.hero__scroll:hover { color: var(--mleko); }

/* snopy światła z ruchomych głów — padają na zdjęcie */
.hero__beams { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.hero__beams i {
	position: absolute; top: -12%;
	width: min(38vw, 560px); height: 135%;
	translate: -50% 0;
	transform-origin: 50% 0;
	background: linear-gradient(180deg, rgba(244, 138, 238, .5) 0%, rgba(178, 0, 168, .18) 34%, rgba(178, 0, 168, 0) 66%);
	clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
	filter: blur(16px);
	mix-blend-mode: screen;
	opacity: 0;
	rotate: var(--rot);
	animation: beam-in 1.8s var(--ease) var(--delay, .2s) forwards, beam-sway var(--dur, 12s) ease-in-out calc(var(--delay, .2s) + 1.8s) infinite alternate;
}
.hero__beams i:nth-child(1) { left: 58%; --rot: 34deg; --o: .5; --delay: .15s; --dur: 13s; --sway: -6deg; }
.hero__beams i:nth-child(2) { left: 80%; --rot: 7deg; --o: .58; --delay: .35s; --dur: 11s; --sway: 5deg; }
.hero__beams i:nth-child(3) { left: 96%; --rot: 26deg; --o: .38; --delay: .55s; --dur: 15s; --sway: -4deg; }
@keyframes beam-in {
	from { opacity: 0; rotate: calc(var(--rot) - 16deg); }
	to { opacity: var(--o); rotate: var(--rot); }
}
@keyframes beam-sway {
	from { rotate: var(--rot); }
	to { rotate: calc(var(--rot) + var(--sway, 5deg)); }
}

/* ---------- pasek: rodzaje imprez (taśma jak ekran LED) ---------- */
.events {
	overflow: hidden; border-block: 1px solid var(--line); background: var(--noc);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.events__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.events:hover .events__track { animation-play-state: paused; }
.events__list { display: flex; flex: none; margin: 0; padding-block: clamp(20px, 2.6vw, 30px); }
.events__list li {
	display: flex; align-items: center; gap: clamp(20px, 2.4vw, 34px); padding-right: clamp(20px, 2.4vw, 34px);
	font-family: var(--font-display); font-weight: 300;
	font-size: clamp(1.05rem, .8rem + .8vw, 1.5rem); letter-spacing: -.02em; white-space: nowrap;
	transition: color .3s;
}
.events__list li::after {
	content: ""; width: 11px; height: 11px; flex: none; background: var(--magenta);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.events__list li:hover { color: var(--roz); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- łuk: rama zdjęcia (O mnie) ---------- */
.arch { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 999px 999px 6px 6px; background: var(--noc-2); }
.arch img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- o mnie ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.about__media { width: 100%; max-width: 440px; }
.about__prose { margin-top: clamp(24px, 3vw, 36px); }
.prose--dark { color: rgba(251, 242, 248, .86); }
.prose--dark p { max-width: 62ch; }
.prose--dark p + p { margin-top: 1.1em; }
.about__signature { margin-top: 28px; }
.signature { display: block; width: 185px; height: auto; opacity: .92; }

.certs { margin-top: clamp(72px, 9vw, 128px); }
.certs__title { font-family: var(--font-text); font-weight: 600; font-size: 1.125rem; margin-bottom: 22px; }
.certs__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; }
.cert { display: block; color: inherit; text-decoration: none; }
.cert__frame {
	display: block; aspect-ratio: 4 / 3; padding: 10px;
	background: var(--noc-2); border: 1px solid var(--line); border-radius: 6px;
	transition: border-color .2s;
}
.cert__frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cert__caption { display: block; margin-top: 10px; color: var(--szary); font-size: .9375rem; line-height: 1.4; }
.cert:hover .cert__frame { border-color: var(--roz); }
.cert:hover .cert__caption { color: var(--mleko); }

/* ---------- współpraca ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; }
.steps::before {
	content: ""; position: absolute; top: 28px; left: 28px; right: 0; height: 1px;
	background: linear-gradient(90deg, var(--magenta), rgba(178, 0, 168, .12));
}
.step { position: relative; }
.step__num {
	position: relative; z-index: 1;
	display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 26px;
	border: 1px solid var(--magenta); border-radius: 50%;
	background: var(--mleko); color: var(--magenta);
	font-family: var(--font-display); font-weight: 400; font-size: 1.2rem;
}
.step:last-child .step__num { background: var(--magenta); color: #fff; }
.step__title { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.02em; margin-bottom: 12px; }
.step__text { color: var(--szary-ciemny); max-width: 30ch; }

/* ---------- galeria ---------- */
.justified { --row: clamp(170px, 22vw, 300px); display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.justified::after { content: ""; flex-grow: 1000000; }
.justified li {
	position: relative; overflow: hidden;
	flex-grow: calc(var(--r) * 100);
	flex-basis: calc(var(--r) * var(--row));
	aspect-ratio: var(--r);
	border-radius: 4px; background: var(--noc-2);
}
.justified a { display: block; width: 100%; height: 100%; }
.justified img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), opacity .3s; }
.justified a:hover img { transform: scale(1.035); }
.justified a:focus-visible { outline-offset: -3px; }
.js .justified > li.is-more { display: none; } /* dokłada je przycisk „Pokaż więcej zdjęć” */
.js .justified.has-more::after { content: none; } /* póki są ukryte zdjęcia, ostatni rząd też jest równy */
.gallery__more { text-align: center; }
.gallery__count { opacity: .6; font-variant-numeric: tabular-nums; }

/* ---------- opinie ---------- */
.review--featured {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(16px, 3vw, 32px);
	max-width: 1000px; margin-bottom: clamp(56px, 7vw, 88px);
}
.review--featured .icon--quote { width: clamp(40px, 5vw, 60px); height: auto; color: var(--magenta); grid-row: span 2; }
.review--featured blockquote p { font-size: clamp(1.18rem, 1rem + .7vw, 1.55rem); font-weight: 500; line-height: 1.5; letter-spacing: -.005em; }
.review figcaption { margin-top: 16px; color: var(--magenta); font-weight: 600; font-size: .9375rem; }
.reviews__cols { columns: 3 300px; column-gap: clamp(28px, 4vw, 48px); }
.reviews__cols .review { break-inside: avoid; margin: 0 0 40px; padding-top: 22px; border-top: 1px solid var(--line-light); }
.reviews__cols blockquote p { color: var(--sliwka); }

/* ---------- muzyka i filmy: deck ze Spotify + filmy jak ekrany w ciemnej sali ---------- */
.media { overflow: hidden; isolation: isolate; }
/* poświata sceny za filmami — samo światło, bez płaskiego różu */
.media::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	top: 50%; right: max(-14vw, -200px); width: min(1000px, 84vw); aspect-ratio: 1; translate: 0 -50%;
	background: radial-gradient(closest-side, rgba(178, 0, 168, .2), rgba(178, 0, 168, .06) 55%, rgba(178, 0, 168, 0));
}
.media--solo::before { top: auto; bottom: -45%; right: auto; left: -10%; translate: none; width: min(900px, 90vw); }
.media__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.media__grid--solo { grid-template-columns: minmax(0, 720px); }

/* tło sali: odblaski kuli dyskotekowej na ścianie + korektor LED przy podłodze (ruch i „ożywanie” w effects.css).
   Odblaski gasną przy prawej krawędzi, żeby nie migały przy przycisku ankiety. */
.media__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.media__ball {
	position: absolute; inset: 0; overflow: hidden; opacity: .9; transition: opacity 1.4s;
	-webkit-mask-image: radial-gradient(ellipse 52% 72% at 60% 45%, #000 20%, transparent 80%);
	mask-image: radial-gradient(ellipse 52% 72% at 60% 45%, #000 20%, transparent 80%);
}
/* warstwa szersza o jeden kafelek: przesunięcie o kafelek zapętla się bez szwu */
.media__ball i {
	--tile: 460px;
	position: absolute; top: 0; bottom: 0; left: 0; right: calc(-1 * var(--tile));
	background-size: var(--tile) 320px;
	background-image:
		radial-gradient(6px 4px at 7% 12%, #fff 0 20%, rgba(244, 138, 238, .55) 45%, transparent),
		radial-gradient(5px 4px at 31% 44%, #fff 0 20%, rgba(244, 138, 238, .5) 45%, transparent),
		radial-gradient(8px 5px at 52% 9%, #fff 0 18%, rgba(244, 138, 238, .5) 45%, transparent),
		radial-gradient(5px 3px at 68% 63%, #fff 0 25%, rgba(244, 138, 238, .5) 50%, transparent),
		radial-gradient(7px 5px at 86% 27%, #fff 0 18%, rgba(244, 138, 238, .5) 45%, transparent),
		radial-gradient(7px 4px at 18% 78%, #fff 0 18%, rgba(244, 138, 238, .45) 45%, transparent),
		radial-gradient(5px 4px at 44% 89%, #fff 0 22%, rgba(244, 138, 238, .5) 50%, transparent),
		radial-gradient(6px 4px at 92% 85%, #fff 0 20%, rgba(244, 138, 238, .5) 45%, transparent);
}
/* druga, bliższa warstwa: większe, miękkie plamy w magencie — wyraźna dopiero, gdy coś gra */
.media__ball i:nth-child(2) {
	--tile: 300px;
	background-size: var(--tile) 240px;
	background-image:
		radial-gradient(9px 6px at 15% 30%, rgba(255, 214, 250, .9) 0 16%, rgba(178, 0, 168, .5) 48%, transparent),
		radial-gradient(7px 5px at 60% 15%, rgba(255, 214, 250, .85) 0 16%, rgba(178, 0, 168, .45) 48%, transparent),
		radial-gradient(10px 7px at 80% 70%, rgba(255, 214, 250, .8) 0 14%, rgba(178, 0, 168, .45) 46%, transparent),
		radial-gradient(6px 5px at 35% 80%, rgba(255, 214, 250, .85) 0 18%, rgba(178, 0, 168, .45) 50%, transparent),
		radial-gradient(5px 4px at 92% 40%, rgba(255, 214, 250, .85) 0 18%, rgba(178, 0, 168, .45) 50%, transparent);
}
/* korektor: słupki skalują się od dołu pod stałą siatką „diod” (maska na rodzicu), boki wygaszone */
.media__spectrum {
	position: absolute; left: 0; right: 0; bottom: 0; height: clamp(64px, 11vw, 150px);
	opacity: .55; transition: opacity 1.4s;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.media__bars {
	display: flex; align-items: flex-end; gap: clamp(3px, .45vw, 6px); height: 100%; padding-inline: var(--gutter);
	-webkit-mask-image: repeating-linear-gradient(0deg, #000 0 5px, transparent 5px 7px);
	mask-image: repeating-linear-gradient(0deg, #000 0 5px, transparent 5px 7px);
}
.media__bars i {
	flex: 1; height: 100%; transform-origin: bottom; scale: 1 var(--lo);
	background: linear-gradient(0deg, rgba(178, 0, 168, .9), rgba(244, 138, 238, .6) 60%, rgba(251, 242, 248, .45));
}

/* deck: talerz jog + opis + przyciski; pod spodem rozwija się odtwarzacz */
.spotify {
	--jog: 148px;
	margin-top: 32px; overflow: hidden;
	background: linear-gradient(160deg, #29122b 0%, var(--noc-2) 52%, #1a0b1b 100%);
	border: 1px solid var(--line); border-radius: 20px;
	box-shadow: inset 0 1px 0 rgba(251, 242, 248, .07), 0 30px 60px -32px rgba(5, 1, 5, .9);
	transition: border-color .5s, box-shadow .8s;
}
.spotify.is-on { border-color: rgba(244, 138, 238, .28); box-shadow: inset 0 1px 0 rgba(251, 242, 248, .08), 0 34px 80px -34px rgba(178, 0, 168, .7); }
.spotify__deck { display: grid; grid-template-columns: var(--jog) minmax(0, 1fr); gap: 18px 28px; align-items: center; padding: 24px 26px 24px 24px; }
.spotify__title { font-weight: 600; line-height: 1.35; }
.spotify__note { margin-top: 6px; color: var(--szary); font-size: .875rem; line-height: 1.45; }
.spotify__note a { color: var(--roz); }
.spotify__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 16px; }
.spotify__actions .link { font-size: .9375rem; }
.spotify [data-spotify-load] .icon--stop, .spotify.is-on [data-spotify-load] .icon--play { display: none; }
/* bez JavaScriptu odtwarzacza nie da się włączyć — zostaje link do Spotify */
html:not(.js) .spotify [data-spotify-load], html:not(.js) .spotify [data-spotify-note] { display: none; }
.spotify.is-on [data-spotify-load] .icon--stop { display: block; }
.spotify__player { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.spotify.is-on .spotify__player { grid-template-rows: 1fr; }
.spotify__frame { min-height: 0; overflow: hidden; }
.spotify iframe { display: block; width: calc(100% - 28px); height: 352px; margin: 0 14px 14px; border: 0; border-radius: 12px; background: var(--noc); }

/* talerz jog jak w kontrolerze DJ-a: rowkowany chwyt, znacznik pozycji, łuk światła, który kręci się z talerzem */
.jog {
	position: relative; width: var(--jog); aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle, #1c0d1d 0 62%, #0c050c 63% 97%, #3a2a3b 98.5%, #0c050c 100%);
	box-shadow: inset 0 0 0 1px rgba(251, 242, 248, .1), 0 16px 30px -12px rgba(5, 1, 5, .95);
	transition: box-shadow .8s;
}
/* tor pierścienia światła (stoi), po nim jedzie jasny łuk z talerza */
.jog::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: rgba(244, 138, 238, .18);
	-webkit-mask: radial-gradient(circle, transparent 0 91%, #000 91.5% 95.5%, transparent 96%);
	mask: radial-gradient(circle, transparent 0 91%, #000 91.5% 95.5%, transparent 96%);
}
.jog__platter {
	position: absolute; inset: 7%; border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, #331a37 0%, #1d0e1f 58%, #130913 100%);
	box-shadow: inset 0 0 0 1px rgba(251, 242, 248, .1), inset 0 -10px 18px rgba(0, 0, 0, .45);
	transition: transform 1.4s var(--ease);
}
.jog__platter::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: repeating-conic-gradient(rgba(251, 242, 248, .22) 0deg 1.4deg, transparent 1.4deg 7.5deg);
	-webkit-mask: radial-gradient(circle, transparent 0 67%, #000 68% 96%, transparent 97%);
	mask: radial-gradient(circle, transparent 0 67%, #000 68% 96%, transparent 97%);
}
.jog__platter::after {
	content: ""; position: absolute; inset: -6.5%; border-radius: 50%;
	background: conic-gradient(from -8deg, rgba(244, 138, 238, 0) 0deg, rgba(178, 0, 168, .5) 60deg, #f48aee 118deg, rgba(244, 138, 238, 0) 120deg, rgba(244, 138, 238, 0) 360deg);
	-webkit-mask: radial-gradient(circle, transparent 0 93%, #000 94% 98.5%, transparent 99.5%);
	mask: radial-gradient(circle, transparent 0 93%, #000 94% 98.5%, transparent 99.5%);
	opacity: .55; filter: drop-shadow(0 0 4px rgba(244, 138, 238, .9));
	transition: opacity .8s;
}
.jog__mark { position: absolute; top: 3.5%; left: 50%; width: 3px; height: 15%; translate: -50% 0; border-radius: 3px; background: var(--mleko); opacity: .75; box-shadow: 0 0 8px rgba(244, 138, 238, .9); }
.jog__hub {
	position: absolute; inset: 31%; display: grid; place-items: center; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #2e1a31, #0f070f 72%);
	box-shadow: 0 0 0 1px rgba(251, 242, 248, .12), 0 0 0 6px rgba(12, 5, 12, .7);
	color: #1ed760;
}
.jog__hub .icon { width: 50%; height: 50%; }
/* odblask stoi w miejscu, kiedy talerz się kręci — dlatego obrót widać po znaczniku i łuku */
.jog::after {
	content: ""; position: absolute; inset: 7%; border-radius: 50%; pointer-events: none;
	background: conic-gradient(from 200deg, transparent 0deg, rgba(255, 255, 255, .11) 26deg, transparent 52deg, transparent 180deg, rgba(255, 255, 255, .06) 206deg, transparent 232deg);
}
.spotify:hover .jog__platter { transform: rotate(32deg); }
.spotify.is-on .jog { box-shadow: inset 0 0 0 1px rgba(244, 138, 238, .2), 0 16px 30px -12px rgba(5, 1, 5, .95), 0 0 46px -8px rgba(178, 0, 168, .75); }
.spotify.is-on .jog__platter::after { opacity: 1; }

/* filmy: pionowe ekrany w ramce, poświata z kolorów kadru (podczas odtwarzania — na żywo z filmu) */
/* margin-right: przy węższych ekranach ekrany nie wchodzą pod przycisk ankiet przyklejony do prawej krawędzi (ok. 14–50 px) */
.media__videos {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px);
	width: 100%; max-width: 580px; justify-self: end; align-items: start;
	margin-right: max(0px, 72px - max(var(--gutter), (100vw - var(--wrap)) / 2));
}
.media__videos--one { grid-template-columns: minmax(0, 1fr); max-width: 320px; justify-self: center; }
.reel { position: relative; }
.reel:nth-child(2) { margin-top: clamp(40px, 6vw, 88px); }
.reel [hidden] { display: none !important; }
.reel__stage { position: relative; isolation: isolate; }
.reel__glow {
	position: absolute; inset: -9% -20%; z-index: 0; pointer-events: none;
	background: var(--poster, radial-gradient(closest-side, rgba(178, 0, 168, .7), transparent)) center / cover no-repeat;
	filter: blur(44px) saturate(1.6); opacity: .42;
	-webkit-mask: radial-gradient(closest-side, #000 45%, transparent);
	mask: radial-gradient(closest-side, #000 45%, transparent);
	transition: opacity 1s;
}
.reel__glow canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s; }
.reel.is-live .reel__glow canvas { opacity: 1; }
.reel.is-playing .reel__glow { opacity: .62; }
.reel__screen {
	--tilt: -2.5deg;
	position: relative; z-index: 1; overflow: hidden; aspect-ratio: 9 / 16; border-radius: 22px;
	background: #000;
	box-shadow: 0 0 0 1px rgba(251, 242, 248, .16), 0 0 0 6px rgba(16, 6, 15, .92), 0 0 0 7px rgba(251, 242, 248, .09), 0 44px 70px -34px rgba(5, 1, 5, .95);
	rotate: var(--tilt);
	transition: rotate .8s var(--ease), box-shadow .6s;
}
.reel:nth-child(2) .reel__screen { --tilt: 2deg; }
.reel:hover .reel__screen, .reel:focus-within .reel__screen, .reel.is-started .reel__screen { rotate: 0deg; }
.reel.is-playing .reel__screen { box-shadow: 0 0 0 1px rgba(244, 138, 238, .4), 0 0 0 6px rgba(16, 6, 15, .92), 0 0 0 7px rgba(244, 138, 238, .16), 0 44px 70px -34px rgba(5, 1, 5, .95); }
.reel__screen video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
/* przyciemnienie u góry i u dołu — pod czasem trwania i sterowaniem */
.reel__screen::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 3, 10, .5) 0, rgba(10, 3, 10, 0) 22%, rgba(10, 3, 10, 0) 64%, rgba(10, 3, 10, .78) 100%);
	transition: opacity .4s;
}
.reel.is-playing.is-idle .reel__screen::after { opacity: 0; }

.reel__time {
	position: absolute; z-index: 3; top: 14px; left: 14px;
	display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px;
	border-radius: 999px; background: rgba(21, 9, 20, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	color: var(--mleko); font-size: .8125rem; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums;
	transition: opacity .3s;
}
.reel__time::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--roz); box-shadow: 0 0 8px var(--roz); }
.reel.is-started .reel__time { opacity: 0; }

.reel__play {
	position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
	padding: 0; border: 0; border-radius: inherit; background: none; color: #fff; cursor: pointer;
	transition: opacity .35s;
}
.reel__play:focus-visible { outline-offset: -5px; }
.reel__play-ico {
	position: relative; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
	background: rgba(21, 9, 20, .5); border: 1px solid rgba(251, 242, 248, .55);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	box-shadow: 0 12px 30px rgba(5, 1, 5, .5);
	transition: scale .35s var(--ease), border-color .3s, box-shadow .3s;
}
.reel__play-ico .icon { width: 26px; height: 26px; margin-left: 3px; }
.reel__play:hover .reel__play-ico, .reel__play:focus-visible .reel__play-ico { scale: 1.08; border-color: var(--roz); box-shadow: 0 12px 30px rgba(5, 1, 5, .5), 0 0 0 6px rgba(244, 138, 238, .16), 0 0 36px rgba(178, 0, 168, .8); }
.reel.is-playing .reel__play { opacity: 0; pointer-events: none; }

.reel__bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 10px 8px; transition: opacity .4s, translate .4s var(--ease); }
.reel:not(.is-started) .reel__bar { visibility: hidden; opacity: 0; translate: 0 10px; }
.reel.is-playing.is-idle .reel__bar { opacity: 0; translate: 0 10px; }
.reel.is-playing.is-idle .reel__screen { cursor: none; }
.reel__row { display: flex; align-items: center; gap: 2px; }
.reel__clock { flex: 1; min-width: 0; padding-left: 4px; color: rgba(251, 242, 248, .92); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reel__btn {
	display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0;
	border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer;
	transition: background-color .2s;
}
.reel__btn:hover { background: rgba(251, 242, 248, .14); }
.reel__btn .icon { width: 20px; height: 20px; }
.reel__btn .icon--pause, .reel.is-playing .reel__btn .icon--play,
.reel__btn .icon--muted, .reel.is-muted .reel__btn .icon--sound { display: none; }
.reel.is-playing .reel__btn .icon--pause, .reel.is-muted .reel__btn .icon--muted { display: block; }

/* pasek postępu: suwak (klawiatura: strzałki), wypełnienie liczone w JS (--p) */
.reel__seek { --p: 0%; display: block; width: 100%; height: 22px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.reel__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--magenta), var(--roz) var(--p), rgba(251, 242, 248, .28) var(--p)); }
.reel__seek::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--magenta), var(--roz) var(--p), rgba(251, 242, 248, .28) var(--p)); }
.reel__seek::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(244, 138, 238, .9); -webkit-appearance: none; appearance: none; }
.reel__seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(244, 138, 238, .9); }
.reel__seek:focus-visible { outline-offset: 0; border-radius: 6px; }

.reel figcaption { margin-top: 20px; padding-left: 4px; color: var(--szary); font-size: .9375rem; line-height: 1.45; }

/* pełny ekran (bez iPhone'a — tam włącza się odtwarzacz systemowy) */
.reel__screen:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; rotate: none; }
.reel__screen:fullscreen video { object-fit: contain; }
.reel__screen:fullscreen .reel__bar { padding: 0 max(16px, 50% - 280px) 16px; }

/* ---------- voucher „na scenie” ---------- */
.voucher {
	overflow: hidden; isolation: isolate; color: var(--mleko);
	background:
		radial-gradient(55% 75% at 27% 50%, rgba(178, 0, 168, .42), rgba(178, 0, 168, 0) 70%),
		radial-gradient(40% 60% at 95% 100%, rgba(126, 143, 214, .16), transparent 70%),
		linear-gradient(165deg, #2a0b2b 0%, #1a0a1b 45%, var(--noc) 100%);
	border-block: 1px solid rgba(244, 138, 238, .12);
}
.voucher__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 112px); align-items: center; }

/* scena: reflektor + płyta + refleks, karty na wierzchu */
.voucher__media { position: relative; display: grid; place-items: center; min-height: clamp(320px, 38vw, 520px); }
.voucher__stage { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.voucher__vinyl { position: absolute; width: min(470px, 92%); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 30px 70px rgba(5, 1, 5, .7), 0 0 0 1px rgba(251, 242, 248, .06), 0 0 90px rgba(178, 0, 168, .35); }
.voucher__vinyl svg { display: block; width: 100%; height: 100%; }
.voucher__shine {
	position: absolute; width: min(470px, 92%); aspect-ratio: 1; border-radius: 50%;
	background: conic-gradient(from 210deg, transparent 0deg, rgba(255, 255, 255, .12) 18deg, transparent 40deg, transparent 180deg, rgba(255, 255, 255, .08) 198deg, transparent 220deg);
	mix-blend-mode: screen;
}
.voucher__spot {
	position: absolute; top: -40%; left: 50%; width: 120%; height: 120%; translate: -50% 0;
	background: linear-gradient(180deg, rgba(244, 138, 238, .35), rgba(178, 0, 168, .12) 50%, transparent 85%);
	clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
	filter: blur(18px); mix-blend-mode: screen; opacity: .7;
}
.voucher__media img.voucher__cards {
	position: relative; display: block; width: 100%; max-width: 420px; margin-inline: auto;
	filter: drop-shadow(0 46px 40px rgba(5, 1, 5, .75)) drop-shadow(0 0 36px rgba(178, 0, 168, .35));
}

/* ikonki DJ-skie w tle */
.voucher__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.voucher__ic { position: absolute; display: block; color: var(--roz); opacity: .22; }
.voucher__ic .licon { width: 100%; height: 100%; }
.voucher__ic--1 { width: 54px; height: 54px; top: 12%; left: 6%; rotate: -14deg; }
.voucher__ic--2 { width: 36px; height: 36px; top: 70%; left: 3%; rotate: 10deg; opacity: .16; }
.voucher__ic--3 { width: 26px; height: 26px; top: 20%; left: 44%; opacity: .35; }
.voucher__ic--4 { width: 44px; height: 44px; top: 8%; right: 9%; rotate: 16deg; }
.voucher__ic--5 { width: 40px; height: 40px; bottom: 10%; right: 5%; opacity: .18; }
.voucher__ic--6 { width: 60px; height: 60px; bottom: 6%; left: 40%; opacity: .12; }
.voucher__ic--7 { width: 30px; height: 30px; bottom: 28%; right: 12%; rotate: -12deg; opacity: .2; }
.voucher__ic--8 { width: 20px; height: 20px; bottom: 26%; left: 47%; opacity: .4; }

/* tekst */
.voucher__text p { max-width: 34em; margin-top: 22px; color: rgba(251, 242, 248, .86); font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); }
.voucher__points { display: grid; gap: 12px; margin: 28px 0 0; }
.voucher__points li { display: flex; align-items: center; gap: 14px; font-weight: 500; }
.voucher__pi {
	display: grid; place-items: center; flex: none; width: 44px; height: 44px;
	border: 1px solid rgba(244, 138, 238, .35); border-radius: 50%;
	background: rgba(178, 0, 168, .16); color: var(--roz);
	box-shadow: 0 8px 22px -8px rgba(178, 0, 168, .8);
}
.voucher__pi .licon { width: 22px; height: 22px; }
.voucher__text .btn { margin-top: 34px; box-shadow: 0 16px 36px -12px rgba(178, 0, 168, .9), 0 0 0 1px rgba(255, 255, 255, .25); }
.voucher__text .btn .licon { width: 20px; height: 20px; }
.voucher .btn--white:hover { background: var(--magenta); color: #fff; }

/* ---------- porady ---------- */
.post-rows { margin: 0; border-top: 1px solid var(--line); }
.post-row a {
	display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 40px;
	padding-block: clamp(22px, 3vw, 32px);
	border-bottom: 1px solid var(--line);
	color: inherit; text-decoration: none;
}
.post-row time { grid-row: span 2; padding-top: .3em; color: var(--szary); font-size: .9375rem; }
.post-row__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem); line-height: 1.3; letter-spacing: -.02em; transition: color .2s; }
.post-row__excerpt { max-width: 64ch; color: var(--szary); }
.post-row a:hover .post-row__title { color: var(--roz); }

/* ---------- kontakt ---------- */
.contact { overflow: hidden; background: var(--noc-2); }
.contact::before {
	content: ""; position: absolute; top: -20%; left: -10%; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
	background: radial-gradient(closest-side, rgba(178, 0, 168, .22), rgba(178, 0, 168, 0));
	pointer-events: none;
}
.contact__grid { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact__phone {
	display: inline-block; margin-top: clamp(28px, 4vw, 44px);
	color: var(--mleko); text-decoration: none;
	font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); letter-spacing: -.04em; line-height: 1.1;
	transition: color .2s;
}
.contact__phone:hover { color: var(--roz); }
.contact__mail { display: inline-block; margin-top: 10px; color: var(--roz); font-size: 1.125rem; font-weight: 500; }
.contact__region { max-width: 32em; margin-top: 24px; color: var(--szary); }
.contact__ai { margin-top: 14px; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.socials a {
	display: grid; place-items: center; width: 44px; height: 44px;
	border: 1px solid var(--line-strong); border-radius: 50%; color: var(--mleko);
	transition: border-color .2s, background-color .2s;
}
.socials a:hover { border-color: var(--mleko); background: rgba(251, 242, 248, .06); }
.socials .icon { width: 20px; height: 20px; }

/* formularz */
.form { position: relative; display: grid; gap: 18px; padding: clamp(22px, 3vw, 40px); background: var(--noc); border: 1px solid var(--line); border-radius: 16px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field label { display: block; margin-bottom: 8px; font-size: .9375rem; font-weight: 500; }
.field__opt { color: var(--szary); font-weight: 400; }
.field input, .field select, .field textarea {
	display: block; width: 100%; min-height: 50px; padding: 12px 14px;
	color: var(--mleko); background: var(--noc-2);
	border: 1px solid var(--line-strong); border-radius: 8px;
	transition: border-color .2s, box-shadow .2s;
	color-scheme: dark;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
	appearance: none; padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f48aee'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 22px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(251, 242, 248, .4); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--roz); box-shadow: 0 0 0 3px rgba(244, 138, 238, .25); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #ff9c9c; }
.field__error { margin-top: 6px; color: #ffb3b3; font-size: .875rem; }
.form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }
.form__note { flex: 1 1 240px; color: var(--szary); font-size: .875rem; line-height: 1.5; }
.form__note a { color: var(--roz); }
.form__status { font-weight: 500; }
.form__status:empty { display: none; }
.form__status.is-ok { color: #9be8bd; }
.form__status.is-error { color: #ffb3b3; }

/* ---------- stopka ---------- */
.site-footer { padding-block: clamp(64px, 8vw, 96px) 32px; background: #0e050d; color: var(--szary); font-size: .9375rem; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.site-footer__logo { display: inline-block; margin-bottom: 18px; }
.site-footer__logo .brand__logo { height: 22px; }
.site-footer__brand p { max-width: 30em; }
.site-footer__title { margin-bottom: 14px; color: var(--mleko); font-family: var(--font-text); font-size: .9375rem; font-weight: 600; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li + li { margin-top: 6px; }
.site-footer a { color: var(--szary); text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--mleko); }
.site-footer .socials { margin-top: 22px; }
.site-footer .socials a { color: var(--mleko); }
.site-footer__note { margin-top: 12px; font-size: .875rem; line-height: 1.5; }
.site-footer__menu { margin-top: 14px !important; }
.site-footer__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; padding-top: 24px; font-size: .875rem; }
.site-footer__bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }

/* ---------- pasek „Zadzwoń / Napisz” na telefonie ---------- */
.callbar { display: none; }
@media (max-width: 760px) {
	.callbar {
		position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
		display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
		transform: translateY(calc(100% + 24px)); transition: transform .35s var(--ease);
	}
	.callbar.is-visible { transform: none; }
	.callbar__btn {
		display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
		background: rgba(33, 16, 34, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
		border: 1px solid var(--line-strong); border-radius: 999px;
		color: var(--mleko); font-weight: 600; text-decoration: none;
	}
	.callbar__btn { box-shadow: 0 10px 28px rgba(10, 2, 9, .45); }
	.callbar__btn--call { background: var(--magenta); border-color: rgba(255, 255, 255, .35); color: #fff; }
	.callbar .icon { width: 18px; height: 18px; }
	.site-footer { padding-bottom: calc(32px + 76px + env(safe-area-inset-bottom)); }
}

/* ---------- lightbox ---------- */
.lightbox {
	width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
	background: rgba(12, 4, 11, .96); color: var(--mleko); overflow: hidden;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .5); }
.lightbox__figure { position: absolute; inset: 72px 88px 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; }
.lightbox__figure img { display: block; max-width: 100%; max-height: calc(100% - 44px); width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.lightbox__figure figcaption { margin-top: 14px; color: var(--szary); font-size: .9375rem; text-align: center; }
.lightbox__btn {
	position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
	background: rgba(251, 242, 248, .08); border: 1px solid var(--line-strong); border-radius: 50%;
	color: var(--mleko); cursor: pointer; transition: background-color .2s;
}
.lightbox__btn:hover { background: rgba(251, 242, 248, .16); }
.lightbox__btn .icon { width: 22px; height: 22px; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 20px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 20px; top: 50%; translate: 0 -50%; }
.lightbox__count { position: absolute; top: 28px; left: 24px; color: var(--szary); font-size: .9375rem; }
@media (max-width: 760px) {
	.lightbox__figure { inset: 64px 12px 96px; }
	.lightbox__prev, .lightbox__next { top: auto; bottom: 24px; translate: none; }
	.lightbox__prev { left: calc(50% - 60px); }
	.lightbox__next { right: calc(50% - 60px); }
}

/* ==========================================================================
   Podstrony
   ========================================================================== */
.page-hero {
	position: relative; overflow: hidden; isolation: isolate;
	padding: calc(var(--header-h) + clamp(48px, 7vw, 104px)) 0 clamp(40px, 5vw, 64px);
}
.page-hero::after {
	content: ""; position: absolute; z-index: -1; top: -40%; right: -10%; width: 60vw; height: 60vw; max-width: 800px; max-height: 800px;
	background: radial-gradient(closest-side, rgba(178, 0, 168, .28), rgba(178, 0, 168, 0));
	pointer-events: none;
}
.page-hero__kicker { margin-bottom: 14px; color: var(--roz); font-weight: 500; }
.page-hero__title {
	max-width: 22ch;
	font-family: var(--font-display); font-weight: 300;
	font-size: clamp(1.85rem, 1.2rem + 2.5vw, 3.5rem); line-height: 1.08; letter-spacing: -.035em;
	text-wrap: balance;
}
.page-hero--post .page-hero__title { max-width: none; }
.page-hero__lead { max-width: 40em; margin-top: 18px; color: var(--szary); }
.page-body { padding-block: clamp(48px, 6vw, 88px); background: var(--mleko); color: var(--sliwka); }
.entry__cover { margin-bottom: clamp(32px, 5vw, 56px); }
.entry__cover img { display: block; width: 100%; border-radius: 8px; }
.entry-form { color: var(--sliwka); }

/* Ankiety (wtyczka DJ Ankieta) w kolorach marki zamiast złota — tylko na stronach z ankietą */
.entry-form #daw-haslo-btn, .entry-form #dap-haslo-btn, .entry-form #dau-haslo-btn {
	background: var(--magenta); border-radius: 999px;
}
.entry-form #daw-haslo-btn:hover, .entry-form #dap-haslo-btn:hover, .entry-form #dau-haslo-btn:hover { background: var(--magenta-jasna); }
.entry-form #daw-submit-btn, .entry-form #dap-submit-btn, .entry-form #dau-submit-btn {
	background: var(--magenta) !important; box-shadow: 0 8px 24px rgba(178, 0, 168, .3) !important; border-radius: 999px !important;
}
.entry-form #daw-submit-btn:hover:not(:disabled), .entry-form #dap-submit-btn:hover:not(:disabled), .entry-form #dau-submit-btn:hover:not(:disabled) {
	background: var(--magenta-jasna) !important; box-shadow: 0 10px 28px rgba(178, 0, 168, .4) !important;
}
.entry-form #daw-haslo-input:focus, .entry-form #dap-haslo-input:focus, .entry-form #dau-haslo-input:focus,
.entry-form .daw-pole input:focus, .entry-form .daw-pole select:focus, .entry-form .daw-pole textarea:focus, .entry-form .daw-lista-piosenek input:focus {
	border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(178, 0, 168, .18);
}
.entry-form .daw-haslo-tytul, .entry-form .daw-opcja-tresc strong, .entry-form .daw-regulamin-label a { color: var(--sliwka); }
.entry-form .daw-naglowek { background: linear-gradient(135deg, var(--noc), var(--noc-3)); }
.entry-form .daw-naglowek h1 { color: var(--roz); font-family: var(--font-display); font-weight: 300; letter-spacing: -.03em; }
.entry-form #daw-formularz-wrapper legend.daw-sekcja-tytul { color: var(--sliwka) !important; border-bottom-color: var(--magenta) !important; }
.entry-form #daw-formularz-wrapper .daw-nr { background: var(--magenta) !important; background-color: var(--magenta) !important; }
.entry-form .daw-radio-grupa label:hover, .entry-form .daw-checkbox-grupa label:hover { background: #fbeefa; }
.entry-form .daw-radio-grupa input[type="radio"], .entry-form .daw-checkbox-grupa input[type="checkbox"],
.entry-form .daw-opcja-box input[type="checkbox"], .entry-form .daw-regulamin-label input[type="checkbox"] { accent-color: var(--magenta); }
.entry-form .daw-opcja-box:hover { border-color: var(--magenta); }
.entry-form .daw-opcja-cena { background: var(--sliwka); color: var(--roz); }

/* treść wpisów i stron */
.prose { font-size: 1.0938rem; line-height: 1.7; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2em; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.8rem); line-height: 1.22; letter-spacing: -.025em; }
.prose h3 { margin-top: 1.8em; font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.prose h4 { margin-top: 1.6em; font-size: 1.0938rem; font-weight: 600; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose a { color: var(--magenta); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--magenta); }
.prose blockquote { padding-left: 22px; border-left: 3px solid var(--magenta); font-size: 1.15rem; }
.prose blockquote cite { display: block; margin-top: 8px; font-size: .9375rem; font-style: normal; color: var(--szary-ciemny); }
.prose img, .prose video { border-radius: 6px; }
.prose figcaption, .prose .wp-caption-text { margin-top: 8px; color: var(--szary-ciemny); font-size: .9rem; }
.prose hr { height: 1px; border: 0; background: var(--line-light); margin-block: 2.4em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line-light); text-align: left; }
.prose code { padding: .15em .35em; background: rgba(43, 16, 41, .07); border-radius: 4px; font-size: .9em; }
.prose .alignwide { width: min(1040px, 100vw - 2 * var(--gutter)); max-width: none; margin-left: 50%; translate: -50% 0; }
.prose .alignfull { width: 100vw; max-width: none; margin-left: 50%; translate: -50% 0; }
.prose .alignleft { float: left; margin: .3em 1.4em 1em 0; max-width: 50%; }
.prose .alignright { float: right; margin: .3em 0 1em 1.4em; max-width: 50%; }
.prose .aligncenter { margin-inline: auto; }
.prose .wp-block-button__link { padding: 14px 26px; background: var(--magenta); color: #fff; border-radius: 999px; font-weight: 600; text-decoration: none; }
.page-links { margin-top: 2em; font-weight: 600; }

/* lista wpisów */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 28px; margin: 0; }
.card__link { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border: 1px solid var(--line-light); border-radius: 12px; color: var(--sliwka); text-decoration: none; transition: border-color .2s; }
.card__link:hover { border-color: var(--magenta); }
.card__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__body { display: grid; gap: 10px; padding: 22px 24px 26px; }
.card__body time { color: var(--szary-ciemny); font-size: .875rem; }
.card__title { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.3; letter-spacing: -.02em; }
.card__excerpt { color: var(--szary-ciemny); font-size: .9688rem; }
.card__meta, .page-hero__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.card__meta { color: var(--szary-ciemny); font-size: .875rem; }
.card__more { margin-top: 6px; color: var(--magenta); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
.card--featured { grid-column: 1 / -1; }
.card--featured .card__link { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.card--featured .card__link:not(:has(.card__media)) { grid-template-columns: minmax(0, 1fr); }
.card--featured .card__media img { height: 100%; min-height: 320px; aspect-ratio: auto; }
.card--featured .card__body { align-content: center; gap: 14px; padding: clamp(28px, 4vw, 56px); }
.card--featured .card__title { font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.15; letter-spacing: -.035em; }
.card--featured .card__excerpt { font-size: 1.0625rem; max-width: 46ch; }
.card--featured .card__link:hover .card__more { text-decoration-thickness: 2px; }
@media (max-width: 760px) {
	.card--featured .card__link { grid-template-columns: minmax(0, 1fr); }
	.card--featured .card__media img { min-height: 0; aspect-ratio: 3 / 2; }
}
.pagination, .comments-pagination { margin-top: 48px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.page-numbers { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-light); border-radius: 999px; color: var(--sliwka); text-decoration: none; }
.page-numbers.current { background: var(--magenta); border-color: transparent; color: #fff; }
.empty { max-width: 560px; }
.empty__title { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin-bottom: 10px; }
.empty .search-form { margin-top: 24px; }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(48px, 6vw, 72px); }
.post-nav__link { display: block; padding: 18px 20px; border: 1px solid var(--line-light); border-radius: 12px; color: var(--sliwka); text-decoration: none; font-weight: 600; line-height: 1.4; }
.post-nav__link span { display: block; margin-bottom: 4px; color: var(--szary-ciemny); font-size: .875rem; font-weight: 400; }
.post-nav__link--next { grid-column: 2; text-align: right; }
.post-nav__link:hover { border-color: var(--magenta); }

.cta-band { padding-block: clamp(48px, 6vw, 72px); background: var(--noc-2); }
.cta-band__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.cta-band__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); letter-spacing: -.03em; line-height: 1.15; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.comments { padding-block: 0 clamp(48px, 6vw, 88px); background: var(--mleko); color: var(--sliwka); }
.comments__title { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; letter-spacing: -.02em; margin-bottom: 20px; }
.comments__list { padding: 0; list-style: none; }
.comments__list .comment { padding: 18px 0; border-top: 1px solid var(--line-light); }
.comment-form label { display: block; margin-bottom: 6px; font-weight: 500; }
.comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea, .search-form input[type="search"] {
	width: 100%; min-height: 48px; padding: 12px 14px; background: #fff; color: var(--sliwka);
	border: 1px solid rgba(43, 16, 41, .24); border-radius: 8px;
}
.comment-form p { margin-top: 14px; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
.comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; }
.comment-form input[type="checkbox"] { margin-top: .35em; accent-color: var(--magenta); }
.search-form { display: flex; gap: 10px; }

/* 404 */
.notfound { position: relative; display: grid; align-items: center; min-height: 100svh; overflow: hidden; isolation: isolate; padding: var(--header-h) 0 64px; }
.notfound__in { position: relative; z-index: 1; }
.notfound__code { font-family: var(--font-display); font-weight: 200; font-size: clamp(5rem, 18vw, 13rem); line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px var(--roz); margin-bottom: 12px; }
.notfound .h2 { max-width: 20ch; }
.notfound p:not(.notfound__code) { max-width: 36em; margin-top: 18px; color: var(--szary); }

/* ==========================================================================
   Responsywność
   ========================================================================== */
@media (max-width: 1100px), (max-height: 760px) {
	.hero__scroll { display: none; }
}

@media (max-width: 1100px) {
	.certs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* hero na tablecie i telefonie: zdjęcie w górnej części („okno”), tekst wchodzi na jego wygaszony dół.
   Przyciski idą zaraz pod hasłem, a wysokość okna zależy od wysokości ekranu tak, żeby oba przyciski
   mieściły się na pierwszym ekranie nad przyciskiem czatu (lewy dolny róg, ok. 84–140 px od dołu). */
@media (max-width: 1000px) {
	.hero {
		--hero-window: clamp(150px, 100svh - 560px, 420px);
		display: block; min-height: 0;
		padding: calc(var(--header-h) + var(--hero-window)) 0 clamp(48px, 9vw, 80px);
	}
	.hero__text { display: flex; flex-direction: column; max-width: 640px; }
	.hero__lead { order: 1; }
	.hero__photos { inset: 0 0 auto; height: calc(var(--header-h) + var(--hero-window) + 190px); }
	.hero__veil {
		background:
			linear-gradient(180deg, rgba(21, 9, 20, .72) 0, rgba(21, 9, 20, 0) calc(var(--header-h) + 60px)),
			linear-gradient(180deg, rgba(21, 9, 20, 0) calc(var(--header-h) + var(--hero-window) - 150px), rgba(21, 9, 20, .55) calc(var(--header-h) + var(--hero-window) - 30px), rgba(21, 9, 20, .86) calc(var(--header-h) + var(--hero-window) + 60px), var(--noc) calc(var(--header-h) + var(--hero-window) + 190px));
	}
	.hero::after { left: -30%; bottom: auto; top: calc(var(--header-h) + var(--hero-window) - 12%); width: 160%; height: 80%; opacity: .7; }
	/* sterowanie leży na zdjęciu — przydymiona kapsuła trzyma kontrast licznika na każdym kadrze */
	.slider-ui {
		top: calc(var(--header-h) + var(--hero-window) - 66px); bottom: auto; left: var(--gutter); right: var(--gutter); width: auto;
		padding: 2px 2px 2px 16px; border: 1px solid rgba(251, 242, 248, .1); border-radius: 999px;
		background: rgba(21, 9, 20, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	}
	.slider-count { color: rgba(251, 242, 248, .72); }
	.slider-toggle { border-color: transparent; background: none; }
	.hero__scroll { display: none; }
	.hero__beams i { width: 70vw; }
	/* snopy padają na całe zdjęcie — słabiej, żeby jasne kadry nie robiły się różowe */
	.hero__beams i:nth-child(1) { left: 30%; --rot: 18deg; --o: .36; }
	.hero__beams i:nth-child(2) { left: 55%; --rot: 2deg; --o: .44; }
	.hero__beams i:nth-child(3) { left: 85%; --rot: -14deg; --o: .3; }
}

@media (max-width: 900px) {
	.about__grid, .media__grid, .voucher__grid, .contact__grid { grid-template-columns: minmax(0, 1fr); }
	.about__media { max-width: 380px; }
	.media__videos { justify-self: start; }
	.media::before { top: auto; bottom: -10%; right: -30%; translate: none; width: 130vw; }
	.media__ball {
		-webkit-mask-image: radial-gradient(ellipse 60% 46% at 46% 62%, #000 20%, transparent 80%);
		mask-image: radial-gradient(ellipse 60% 46% at 46% 62%, #000 20%, transparent 80%);
	}
	.voucher__media { min-height: min(86vw, 380px); }
	.voucher__media img.voucher__cards { max-width: min(280px, 66vw); }
	.voucher__vinyl, .voucher__shine { width: min(360px, 86vw); }
	.voucher__ic--2, .voucher__ic--3, .voucher__ic--6, .voucher__ic--8 { display: none; }

	.steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.steps::before { display: none; }
	.step:not(:last-child)::before {
		/* odcinek do następnego kroku: od dołu kółka do góry kolejnego (odstęp 36px) */
		content: ""; position: absolute; left: 28px; top: 56px; bottom: -36px; width: 1px;
		background: var(--magenta); opacity: .55;
	}
	.step { padding-left: 84px; min-height: 56px; }
	.step__num { position: absolute; left: 0; top: 0; margin: 0; }
	.step__title { padding-top: 14px; }
	.step__text { max-width: 46ch; }

	.post-row a { grid-template-columns: minmax(0, 1fr); }
	.post-row time { grid-row: auto; padding: 0; }
}

@media (max-width: 760px) {
	.events__track { animation-duration: 32s; }
	.certs__list {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%;
		overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
		margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
	}
	.certs__list li { scroll-snap-align: start; }
	.justified { --row: 150px; gap: 6px; }
	.review--featured { grid-template-columns: minmax(0, 1fr); }
	.review--featured .icon--quote { grid-row: auto; margin-bottom: 14px; }
	.form__row, .form__row--3 { grid-template-columns: minmax(0, 1fr); }
	/* deck na telefonie: mniejszy talerz obok opisu, przyciski pod spodem na całą szerokość */
	.spotify { --jog: 92px; }
	.spotify__deck { grid-template-columns: var(--jog) minmax(0, 1fr); gap: 14px 18px; padding: 20px 18px; }
	.spotify__body { display: contents; }
	.spotify__title { grid-column: 2; align-self: center; }
	.spotify__note { grid-column: 1 / -1; margin-top: 0; }
	.spotify__actions { grid-column: 1 / -1; margin-top: 2px; }
	.spotify__actions .btn { flex: 1 1 100%; }
	.spotify__actions .link { margin-inline: auto; }
	.spotify iframe { width: calc(100% - 20px); margin: 0 10px 10px; }
	.site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.post-nav { grid-template-columns: minmax(0, 1fr); }
	.post-nav__link--next { grid-column: auto; text-align: left; }
	.prose .alignleft, .prose .alignright { float: none; max-width: 100%; margin: 1em 0; }
}

/* filmy na telefonie: przewijana poziomo taśma ze snapem, drugi ekran wystaje zza krawędzi.
   Pionowy zapas (padding) zostawia miejsce na poświatę, której overflow taśmy by nie przyciął. */
@media (max-width: 600px) {
	.media__videos {
		display: flex; gap: 16px; width: auto; max-width: none; justify-self: stretch;
		margin: -44px calc(-1 * var(--gutter)); padding: 44px var(--gutter);
		overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}
	.media__videos::-webkit-scrollbar { display: none; }
	/* ostatni ekran przyciąga się do prawej krawędzi — jego „start” leży dalej, niż da się przewinąć */
	.reel { flex: 0 0 min(72vw, 300px); scroll-snap-align: start; }
	.reel:last-child:not(:first-child) { scroll-snap-align: end; }
	.media__videos--one .reel { flex-basis: min(80vw, 320px); margin-inline: auto; }
	.reel:nth-child(2) { margin-top: 0; }
	.reel__screen, .reel:nth-child(2) .reel__screen { --tilt: 0deg; }
	.reel__glow { inset: -8% -10%; }
	/* na wąskim ekranie co drugi słupek korektora — szersze „diody”, mniej elementów w ruchu */
	.media__spectrum { height: 60px; }
	.media__bars i:nth-child(2n) { display: none; }
}

@media (max-width: 420px) {
	.hero__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; }
	.hero__beams i { animation: none; opacity: var(--o); }
	.justified a:hover img { transform: none; }
}

@media print {
	.site-header, .callbar, .hero__beams, .hero__veil, .slider-ui, .contact__form, .site-footer .socials { display: none !important; }
	body { background: #fff; color: #000; }
}

/* Duży znak w stopce */
.site-footer__mark { margin-top: clamp(48px, 7vw, 88px); }
.site-footer__mark img {
	display: block; width: 100%; height: auto; opacity: .07;
	-webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.site-footer__mark + .site-footer__bottom { margin-top: 24px; }

/* ==========================================================================
   Baner zgód na pliki cookie — „Odrzuć” i „Akceptuj” równorzędne (wytyczne EDPB/UODO)
   ========================================================================== */
.zgody {
	position: fixed; z-index: 9995; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	width: min(560px, calc(100vw - 40px));
	color: var(--mleko); font-size: .9375rem; line-height: 1.55;
	opacity: 0; transform: translateY(16px);
	transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.zgody.is-on { opacity: 1; transform: none; }
.zgody__in {
	display: grid; gap: 16px; padding: 22px 22px 18px;
	border: 1px solid rgba(244, 138, 238, .3); border-radius: 18px;
	background: radial-gradient(120% 120% at 0% 0%, rgba(178, 0, 168, .28), transparent 55%), var(--noc-2);
	box-shadow: 0 24px 60px -16px rgba(10, 2, 9, .75);
}
.zgody__tytul { margin-bottom: 6px; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: -.02em; }
.zgody__opis { color: rgba(251, 242, 248, .85); }
.zgody__opis a { color: var(--roz); }
.zgody__panel { display: grid; gap: 4px; max-height: 46vh; overflow-y: auto; padding: 4px 0; border-block: 1px solid var(--line); }
.zgody__kat { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 2px; cursor: pointer; }
.zgody__kat input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.zgody__switch { position: relative; width: 44px; height: 26px; flex: none; border-radius: 999px; background: rgba(251, 242, 248, .2); transition: background-color .2s; }
.zgody__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.zgody__kat input:checked + .zgody__switch { background: var(--magenta); }
.zgody__kat input:checked + .zgody__switch::after { transform: translateX(18px); }
.zgody__kat input:disabled + .zgody__switch { opacity: .6; }
.zgody__kat input:focus-visible + .zgody__switch { outline: 2px solid var(--roz); outline-offset: 3px; }
.zgody__kat-tekst { display: grid; gap: 2px; }
.zgody__kat-tekst strong { font-weight: 600; }
.zgody__kat-tekst em { font-style: normal; font-weight: 400; color: var(--szary); }
.zgody__kat-tekst span { color: var(--szary); font-size: .875rem; }
.zgody__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.zgody__btn {
	flex: 1 1 auto; min-height: 46px; padding: 0 20px;
	border: 0; border-radius: 999px; background: var(--magenta); color: #fff;
	font: 600 .9375rem/1.2 var(--font-text); cursor: pointer; transition: background-color .2s;
}
.zgody__btn:hover { background: var(--magenta-jasna); }
.zgody__btn--jasny { background: var(--mleko); color: var(--sliwka); }
.zgody__btn--jasny:hover { background: #fff; }
.zgody__btn--link { flex: 0 0 auto; padding: 0 8px; background: none; color: var(--mleko); text-decoration: underline; text-underline-offset: .25em; }
.zgody__btn--link:hover { background: none; color: var(--roz); }
.zgody__btn[hidden], .zgody__panel[hidden] { display: none; }
.site-footer__cookies { padding: 0; border: 0; background: none; color: var(--szary); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.site-footer__cookies:hover { color: var(--mleko); }
@media (max-width: 760px) {
	.zgody { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: auto; }
	.zgody__in { padding: 18px 16px 14px; }
	.zgody__akcje .zgody__btn:not(.zgody__btn--link) { flex-basis: 100%; }
	/* przy banerze chowamy pasek „Zadzwoń / Napisz” i przycisk czatu, żeby nic się nie nakładało */
	.zgody-otwarte .callbar, .zgody-otwarte .wai { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .zgody { transition: none; } }
@media print { .zgody { display: none !important; } }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.prose-table { overflow-x: auto; margin-block: 1.2em; }
.prose-table table { min-width: 620px; }
.prose-table th { background: rgba(43, 16, 41, .05); font-weight: 600; }