/* ==========================================================================
   ewardega UI v3 "Meridian": /o-mnie/ (ui/o-mnie.php). Wspólne komponenty w ui.css; tu tylko układ strony.
   Mapa: D hero · D moment „Mistrzyni” (sygnatura) · L 01 Bio (cztery role) · L przerywnik · D 02 Znane twarze
   (płyta) · L 03 Media · L/papier 04 Opinie · D finał z oknem ensō i 3 terminami. Ruch z ui.js (.ui-rise, .ui-unveil,
   [data-split]), sygnatura z ui-o-mnie.js (scroll tylko przez rAF). Zero pętli ciągłych i filtrów na zdjęciach.
   ========================================================================== */

/* 1. Hero -------------------------------------------------------------------- */
/* Dół hero i góra momentu razem dają ok. 110 px oddechu na 1440 (wcześniej 187 px pustej czerni) */
.ui-om-hero { padding-top: calc(var(--ui-hd) + clamp(12px, 2vw, 32px)); padding-bottom: clamp(32px, 3vw, 48px); }
.ui-om-hero::after { content: ""; position: absolute; z-index: -1; right: -12%; top: -20%; width: 70%; aspect-ratio: 1; pointer-events: none;
	background: radial-gradient(closest-side, rgba(201, 164, 106, .14), transparent 70%); }
.ui-om-hero__grid { display: grid; gap: 28px; align-items: center; }
.ui-om-hero__body { display: grid; gap: 22px; justify-items: start; min-width: 0; }
/* H1 hero: stopień --ui-h1-hero. Moment „Mistrzyni” niżej jest większy, ale to akapit sygnatury (p), nie H2,
   więc hierarchia nagłówków zostaje: H1 hero, potem H2 sekcji. */
/* Audyt 2026-10-14: H1 z imieniem i tytułem ma ok. 56 znaków, więc stopień stron z dłuższym H1 (--ui-h1-page, jak
   kursy) zamiast --ui-h1-hero: 4 wiersze na 1440 i na 390. Pod nim podtytuł „Cześć, jestem Ewa.” (ui-d3, na telefonie
   stopień H3). */
.ui-om-h1 { max-width: 12em; font-size: var(--ui-h1-page); }
.ui-om-hi { margin: 0; }
.ui-om-hero__body .ui-lead { max-width: 30em; }
.ui-om-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (min-width: 960px) { .ui-om-hero__crumbs { display: none; } }

.ui-om-hero__fig { position: relative; isolation: isolate; width: 100%; max-width: 460px; justify-self: end; }
.ui-om-hero__win { aspect-ratio: 4 / 5; border-radius: var(--ui-r-l); box-shadow: var(--ui-sh-d); }
.ui-om-hero__win img { object-position: 50% 50%; } /* v6: v6-om-ewa-portret (zdjęcie z campu, kadr 4:5): czubek głowy na 26%, oczy na 38%, usta na 46% wysokości pliku */
/* Drobne ziarno (to samo co na kartach "Znane twarze") zostaje dla spójności z płytą niżej; wprowadzone, gdy kadrem była
   klatka filmu 1080p. Od v6 kadr to zdjęcie fotografa w pełnej rozdzielczości. Nakładka, nie filtr: LCP bez zmian. */
.ui-om-hero__win::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("img/grain.webp") 0 0 / 96px; opacity: .1; mix-blend-mode: overlay; }
.ui-om-hero__play { position: absolute; left: 18px; bottom: 18px; z-index: 3; }
.ui-om-hero__play .ui-ic { width: 16px; height: 16px; }

/* Cztery liczby w hero (ciemna wersja .ui-proof) */
.ui-om-proof { margin-top: clamp(28px, 3vw, 48px); border-color: var(--ui-hair); }
.ui-om-proof .ui-proof__i + .ui-proof__i, .ui-om-proof .ui-proof__i:nth-child(n+3) { border-color: var(--ui-hair); }
.ui-om-proof .ui-proof__v { color: var(--ui-snow); font-variant-numeric: proportional-nums; letter-spacing: -.03em; }
/* Bez złota na pierwszej liczbie: złoto na tej stronie należy do "Świata" w momencie niżej */
.ui-om-proof .ui-proof__k { color: var(--ui-snow-2); max-width: 22em; }
/* r5: kafel TVP2 to link do sekcji Media: wygląda jak inne kafle, po najechaniu podpis podkreślony */
.ui-om-proof__a { color: inherit; text-decoration: none; }
.ui-om-proof__a .ui-proof__k { text-decoration: underline; text-decoration-color: var(--ui-hair-2); text-underline-offset: .25em; transition: text-decoration-color var(--ui-t2), color var(--ui-t2); }
.ui-om-proof__a:hover .ui-proof__k { color: var(--ui-snow); text-decoration-color: var(--ui-gold); }

/* r2 od 960 px: portret na pełną wysokość hero ze spadem do prawej krawędzi okna (46vw), bez ram i narożników,
   miękkie przejście w --ui-noir po lewej, u góry (pod nawigacją) i u dołu (pasek liczb). Tekst w lewych 7/12.
   Kadr bez filtrów i bez opacity (LCP): przejścia robi nakładka ::after okna. */
@media (min-width: 960px) {
	.ui-om-hero::after { display: none; }
	.ui-om-hero__grid { position: relative; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 104px);
		min-height: clamp(540px, calc(100svh - var(--ui-hd) - 210px), 700px); }
	/* Okruszki stoją absolutnie (ui.css): 48 px oddechu nad eyebrow, reszta wyśrodkowana na wysokości kadru */
	.ui-om-hero__body { position: relative; z-index: 1; grid-column: 1; align-self: center; padding-block: 48px 16px; }
	.ui-om-hero__fig { position: absolute; top: calc(-1 * (var(--ui-hd) + clamp(12px, 2vw, 32px))); bottom: 0; right: calc(50% - 50vw);
		width: 46vw; max-width: none; justify-self: auto; }
	.ui-om-hero__win { height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
	.ui-om-hero__win::after { border-radius: 0; box-shadow: none;
		/* r5: lewa krawędź z wygładzonym spadkiem (krzywa bez skoku nachylenia na starcie): liniowe przejście od
		   --ui-noir dawało pionowy szew (pasmo Macha) na styku czerni i kadru przez całą wysokość hero */
		background: linear-gradient(90deg, var(--ui-noir), rgba(11, 9, 7, .985) 3%, rgba(11, 9, 7, .93) 7%, rgba(11, 9, 7, .85) 10%,
				rgba(11, 9, 7, .74) 13%, rgba(11, 9, 7, .61) 17%, rgba(11, 9, 7, .47) 20%, rgba(11, 9, 7, .34) 23%, rgba(11, 9, 7, .22) 27%,
				rgba(11, 9, 7, .12) 30%, rgba(11, 9, 7, .05) 33%, rgba(11, 9, 7, .015) 37%, rgba(11, 9, 7, 0) 40%),
			linear-gradient(180deg, rgba(11, 9, 7, .9), rgba(11, 9, 7, .72) 120px, rgba(11, 9, 7, 0) 240px),
			linear-gradient(180deg, rgba(11, 9, 7, 0) 76%, var(--ui-noir)); }
	.ui-om-hero__win img { object-position: 50% 42%; }
	/* Pigułka filmu w lewej dolnej części kadru, na wygaszonym wachlarzu, z dala od twarzy */
	.ui-om-hero__play { left: 16%; bottom: 40px; }
}
@media (min-width: 960px) and (max-width: 1199px) {
	.ui-om-hero__fig { width: 44vw; }
	.ui-om-hero__body .ui-lead { max-width: 24em; }
}

/* Telefon: portret od krawędzi do krawędzi, treść nachodzi na wygaszony dół (ekran profilu). Okno zaczyna się pod
   headerem: logo stoi na czerni, a kwiat (górna część kadru om-ewa) cały pod nim, bez dotykania. */
@media (max-width: 959px) {
	.ui-om-hero { padding-top: 0; }
	.ui-om-hero::after { display: none; }
	/* Okruszki absolutne (u góry) wisiały na włosach: na telefonie stoi kopia w treści hero, nad H1, na miejscu
	   etykiety "O mnie · Art Massage Academy" (to samo "O mnie" dwa razy jedno pod drugim) */
	.ui-om-hero .ui-ph__crumbs, .ui-om-hero__body > .ui-eyebrow { display: none; }
	.ui-om-hero__crumbs { margin-bottom: -10px; }
	.ui-om-hero__crumbs .ui-crumbs { margin-block: 0; }
	.ui-om-hero__fig { max-width: none; justify-self: stretch; margin-inline: calc(-1 * var(--ui-g)); width: auto; padding-top: var(--ui-hd); }
	/* Okno 48svh: CTA hero mieści się w pierwszym ekranie (dok wjeżdża dopiero po zjechaniu CTA). Audyt 2026-10-14: 40svh
	   i H1 o stopień mniejszy (3 wiersze zamiast 4), bo H1 z imieniem i podtytuł dały ok. 110 px. Pomiar 390x664: główne
	   CTA kończy się na 662 px (przed audytem 682, z samą zmianą treści 750). */
	.ui-om-hero__win { aspect-ratio: 4 / 5; max-height: 40svh; width: 100%; border-radius: 0; box-shadow: none; }
	.ui-om-h1 { font-size: clamp(28px, 8.2vw, 38px); }
	.ui-om-hero__win::after { border-radius: 0; box-shadow: none; background: linear-gradient(180deg, var(--ui-noir), rgba(11, 9, 7, 0) 9%, transparent 52%, var(--ui-noir) 97%); }
	/* v6: okno ok. 390x405 z pliku 4:5 (nadmiar ok. 80 px): 40% stawia czubek głowy ok. 90 px pod górą okna (pigułka filmu kończy się
	   na ok. 66 px), oczy na ok. 37% okna, usta nad wygaszeniem od 52% */
	.ui-om-hero__win img { object-position: 50% 40%; }
	/* Film w pierwszym ekranie: pigułka u góry okna, na górnym wachlarzu. Na dole zasłaniała usta i brodę
	   (twarz stoi w środku kadru om-ewa-hero, a okno ma tylko 48svh) */
	.ui-om-hero__play { left: var(--ui-g); top: calc(var(--ui-hd) + 16px); bottom: auto; }
	.ui-om-hero__body { position: relative; z-index: 2; margin-top: -72px; gap: 14px; }
	.ui-om-hi { font-size: var(--ui-fs-h3); letter-spacing: -.02em; line-height: 1.2; }
	.ui-om-hero__cta { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
}
/* Tablet: okno szersze niż wysokie, więc wyżej (60svh) i kadr na twarz, nie na wachlarz */
@media (min-width: 600px) and (max-width: 959px) {
	.ui-om-hero__win { max-height: 60svh; }
	.ui-om-hero__win img { object-position: 50% 45%; } /* v6: oczy na ok. 1/3 okna, usta nad wygaszeniem, głowa pod pigułką filmu */
}
@media (max-width: 599px) {
	.ui-om-hero__cta .ui-btn--lg:not(.ui-btn--icon) { width: 100%; }
	/* Cztery liczby jako jeden wiersz przewijany ze snapem: trzecia wystaje (widać, że jest dalej), kreski pionowe */
	.ui-om-proofs { margin-top: clamp(28px, 3vw, 48px); margin-inline: calc(-1 * var(--ui-g)); overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scroll-padding-inline: var(--ui-g); scrollbar-width: none; border-radius: 2px; }
	.ui-om-proofs::-webkit-scrollbar { display: none; }
	.ui-om-proofs:focus-visible { outline-offset: -2px; }
	.ui-om-proof { margin-top: 0; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; width: max-content; min-width: 100%;
		padding-inline: var(--ui-g); }
	.ui-om-proof .ui-proof__i { scroll-snap-align: start; padding-block: 18px; width: 42vw; }
	.ui-om-proof .ui-proof__i + .ui-proof__i, .ui-om-proof .ui-proof__i:nth-child(3) { padding-left: 16px; border-left: 1px solid var(--ui-hair); }
	.ui-om-proof .ui-proof__i:nth-child(n+3) { border-top: 0; }
	.ui-om-proof .ui-proof__v { font-size: 1.875rem; }
}

/* 2. Moment „Mistrzyni” (ciemne, bez przerwy po hero): sygnatura strony (elewacja.md §3.5) ---------- */
/* Sama typografia w skrajnej skali (72 px na 390, 128 px na 1440), fala słów z ui.css 22.6. Złota linia meridianu
   (3 px, na telefonie 2 px) zaczyna się 1 em przed ostatnim wierszem (wejście wygaszone na tym 1 em), biegnie pod nim
   i stycznie przechodzi w ensō z pędzla za ostatnim słowem. r3: ensō 1,18 em (na telefonie 1 em), od linii pod bazą
   po wierzch wersalików i wyżej, odsunięte od litery o 0,2 em: większe niż każda litera, nie czyta się jak „o”. Jedno pociągnięcie czasem, nie przewijaniem: linia 0,9 s z przyspieszeniem, ensō 1,25 s od 0,88 s (razem
   ok. --ui-t5). --om-w (od początku linii do środka ensō) liczy ui-o-mnie.js; bez JS 5,4 em. Stan bez JS i przy
   reduced motion: narysowane. */
.ui-om-champ { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(40px, 5vw, 88px) calc(clamp(72px, 9vw, 144px) + 32px); }
.ui-om-champ::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--ui-grain) repeat 0 0 / 96px; opacity: .04; mix-blend-mode: screen; }
/* Poświata za ostatnim wierszem: środek nisko, więc gaśnie przed górną krawędzią płyty (bez twardej krawędzi przy hero) */
.ui-om-champ::after { content: ""; position: absolute; z-index: -2; right: -8%; bottom: -46%; width: min(780px, 150%); aspect-ratio: 1; pointer-events: none;
	background: radial-gradient(closest-side, rgba(201, 164, 106, .12), transparent 72%); }
.ui-om-champ__h { margin: 0; max-width: 11em; font-size: clamp(4.5rem, 1.5rem + 7.2vw, 8rem); font-weight: 300; line-height: .98; letter-spacing: -.05em; color: var(--ui-snow); text-wrap: balance; }
.ui-om-champ__h .w { white-space: nowrap; }
/* Pion: linia leży ok. 0,08 em pod linią bazową (nie dotyka liter), ensō stoi na niej stycznie dolnym punktem.
   vertical-align = -(0,08 em + 9,6% wysokości ensō): dolny punkt linii środkowej pędzla leży 9,6% nad dołem pudełka.
   Środek ensō ok. 0,4 em nad bazą, wierzch ok. 1 em: koło obejmuje cały wiersz pisma. Ujemny margin-top: pudełko nie
   podnosi wiersza (koło wystaje nad wiersz wizualnie), więc odstęp między wierszami nie rośnie. */
.ui-om-enso { --om-s: 1.18em; position: relative; display: inline-block; width: var(--om-s); height: var(--om-s); margin: -.25em 0 0 .2em;
	vertical-align: calc(-.08em - var(--om-s) * .096); color: var(--ui-gold); letter-spacing: 0; }
.ui-om-enso__o { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 .14em rgba(201, 164, 106, .34)); }
/* Pędzel grubszy o obrys w kolorze wypełnienia (jednostki viewBox 0 do 100): przy tej skali sam kształt był za cienki */
.ui-om-enso__o g > path:first-child { stroke: currentColor; stroke-width: 1.6px; stroke-linejoin: round; }
.ui-om-enso__m { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
/* Linia kończy się w środku ensō w poziomie, na wysokości dolnego punktu linii środkowej pędzla (9,6% od dołu) */
.ui-om-enso__l { position: absolute; right: 50%; bottom: calc(9.6% - 1.5px); width: var(--om-w, 5.4em); height: 3px; border-radius: 2px;
	background: linear-gradient(90deg, rgba(201, 164, 106, 0), var(--ui-gold) 1em); transform-origin: 0 50%; }
/* Bez JS fala słów (ui.css 22.6, scroll timeline w CSS) zostawała w połowie (opacity .32): stan końcowy od razu.
   Lokalnie do czasu zawężenia reguły w fundamencie do html.ui-js. */
html:not(.ui-js) .ui-om-champ .ui-words .w { animation: none; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
	.ui-om-champ.is-armed:not(.in) .ui-om-enso__l { scale: 0 1; }
	.ui-om-champ.is-armed:not(.in) .ui-om-enso__m { stroke-dashoffset: 1; }
	.ui-om-enso__l { transition: scale .9s cubic-bezier(.42, 0, .78, .5); }
	.ui-om-enso__m { transition: stroke-dashoffset 1.25s cubic-bezier(.22, .6, .3, 1) .88s; }
}
/* Od 1024 px: ostatni wiersz do prawej krawędzi kolumny (kompozycja po przekątnej zamiast pustej prawej połowy);
   linia zaczyna się 1 em przed „w Masażu”, nie na krawędzi płyty */
@media (min-width: 1024px) {
	.ui-om-champ__h { max-width: none; }
	.ui-om-champ__h .w:last-child { display: block; text-align: right; }
}
/* Audyt 2026-10-14: akapit o mistrzostwach pod tytułem (kolor z .ui-dark .ui-lead). Od 1024 px blok przy prawej krawędzi,
   pod „w Masażu”, więc kompozycja dalej schodzi po przekątnej; tekst wyrównany do lewej. */
.ui-om-champ__p { margin: clamp(28px, 3vw, 48px) 0 0; }
@media (min-width: 1024px) { .ui-om-champ__p { max-width: 30em; margin-left: auto; } }
/* Telefon: "Mistrzyni" mieści się w 358 px; wyższa interlinia, żeby akcent Ś nie dotykał ogonka y.
   Odbiór: skala 17,2vw bez progu 3,75rem. "w Masażu" z ensō zajmuje ok. 5,23 em, więc pierścień kończy się 16 px
   przed krawędzią okna na 320 (wcześniej 330 px przy oknie 320, ucięty) i ok. 20 px na 360 i 390. */
@media (max-width: 599px) {
	.ui-om-champ__h { font-size: clamp(3.25rem, 17.2vw, 4.5rem); line-height: 1.06; letter-spacing: -.055em; }
	.ui-om-enso { --om-s: 1em; margin-left: .16em; margin-top: -.1em; }
	.ui-om-enso__l { height: 2px; bottom: calc(9.6% - 1px); }
}
/* v4: kadr na płycie „Mistrzyni” (v4-o-mistrzyni, master 4K 108 s). Krawędzie pliku schodzą do #0b0907, więc kadr
   leży na płycie bez ramki, cienia i zaokrągleń. Pod tytułem, od lewej krawędzi kolumny (ostatni wiersz tytułu stoi
   od 1024 px po prawej, więc kompozycja idzie po przekątnej). Telefon: kadr 4:5 (-m) na szerokość kolumny. */
.ui-om-champ__in picture { display: block; }
.ui-om-champ__img { display: block; width: 100%; height: auto; margin-top: clamp(24px, 4vw, 56px); }
@media (min-width: 1024px) { .ui-om-champ__img { width: min(820px, 62%); margin-top: clamp(32px, 3vw, 48px); } }

/* 3. 01 Bio (jasne): cztery role połączone statyczną pionową linią, bez kadru ----------------------- */
/* Wejście arkuszem (.ui-over z ui.css) na ciemny moment. overflow: clip zostaje na sekcji. r3: bez szarej belki
   uchwytu (wyglądała na element do przeciągania, a nic nie robi); krawędź arkusza i element .ui-over__grab zostają,
   bo ui.js liczy od niego wejście doku. */
.ui-om-over .ui-over__grab::before { content: none; }
.ui-om-bio { overflow: clip; }
.ui-om-over > .ui-om-bio { padding-top: calc(var(--ui-sec) - 28px); }
.ui-om-bio__grid { display: grid; gap: clamp(48px, 6vw, 96px); }
.ui-om-bio__head { margin-bottom: 0; }
.ui-om-bio__head h2 { text-wrap: balance; }
/* Role: linia 1 px złota (--ui-gold-ink, tylko linia) przez punkty ról; bez numerów i dat (to nie oś czasu) */
.ui-om-roles { position: relative; display: grid; gap: clamp(28px, 3vw, 40px); margin: clamp(36px, 4vw, 56px) 0 0; padding: 0 0 0 36px; list-style: none; }
.ui-om-roles::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(var(--ui-gold-ink), var(--ui-line-2)); }
.ui-om-role { position: relative; display: grid; gap: 10px; }
.ui-om-role::before { content: ""; position: absolute; left: -36px; top: .62em; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--ui-gold-ink); background: var(--ui-ivory); }
.ui-om-role__h { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.15; color: var(--ui-ink); text-wrap: balance; }
/* r4: jedno zdanie Ewy pod rolą (akapit), zamiast listy tytułów */
.ui-om-role__f { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ui-ink-2); max-width: 34em; text-wrap: pretty; }
.ui-om-bio__fig, .ui-om-break__fig { grid-template-columns: minmax(0, 1fr); } /* kadr z aspect-ratio nie rozpycha siatki .ui-fig */
.ui-om-bio__fig { width: 100%; max-width: 480px; }
@media (min-width: 900px) {
	.ui-om-bio__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
	.ui-om-bio__fig { position: sticky; top: calc(var(--ui-hd) + 32px); justify-self: end; }
}
@media (max-width: 899px) {
	/* Kolejność: nagłówek, kadr, role (kolumna tekstu rozpuszczona w siatkę sekcji) */
	.ui-om-bio__grid { gap: 0; }
	.ui-om-bio__txt { display: contents; }
	.ui-om-bio__head { order: 1; }
	.ui-om-bio__fig { order: 2; justify-self: center; margin-top: 36px; }
	.ui-om-roles { order: 3; margin-top: 48px; }
}

/* 3a. Przerywnik (jasne): Ewa w plenerze i motto akademii ------------------------------------------ */
/* Odwrotnie niż bio (kadr z lewej), żeby dwa portrety nie stały w jednym rzędzie; most do „Znanych twarzy”.
   r5: motto w skali H3 z etykietą nad zdaniem (bez cudzysłowów i podpisu), wyśrodkowane na wysokości kadru;
   wcześniej wielki cytat przy dolnej krawędzi zdjęcia i ok. 270 px pustego pola nad nim (1440). */
.ui-om-break.ui-sec { padding-top: clamp(16px, 2vw, 24px); }
.ui-om-break__grid { display: grid; gap: clamp(28px, 5vw, 80px); align-items: center; }
.ui-om-break__fig { width: 100%; max-width: 560px; }
/* r2: ciasny kadr jest w pliku (4:5 we wszystkich wariantach srcset), bez powiększania w CSS */
.ui-om-motto { display: grid; gap: 16px; }
.ui-om-motto__l { margin: 0; display: flex; align-items: center; gap: 14px; }
.ui-om-motto__l::before { content: ""; width: 40px; height: 1px; background: var(--ui-gold-ink); }
/* Odbiór: motto w skali display (cienkie 300 jak "Mistrzyni"), kolumna ok. 9 em: na 1440 zdanie wypełnia prawą
   połowę obok kadru zamiast jednego wiersza H3 w środku pustego kremu (ok. 700 x 700 px). */
.ui-om-motto__t { margin: 0; font-size: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); font-weight: 300; line-height: 1.04; letter-spacing: -.045em; color: var(--ui-ink); text-wrap: balance; max-width: 9em; }
@media (min-width: 900px) {
	/* dwie równe kolumny: kadr dochodzi do 560 px na 1440, a na 900 do 1100 motto nie ściska się w wąskim pasku */
	.ui-om-break__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.ui-om-break__fig { justify-self: start; }
	.ui-om-motto { padding-left: clamp(0px, 3vw, 48px); }
}
@media (max-width: 899px) {
	.ui-om-break__fig { justify-self: center; }
}

/* 4. 02 Znane twarze (płyta) ---------------------------------------------- */
/* Seria jak jeden materiał: kadry om-face-* mają wspólny grading wpalony w pliki (bez filtrów CSS), tu ziarno
   i jednakowy gradient pod podpisem. */
.ui-om-faces .ui-face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("img/grain.webp") 0 0 / 96px; opacity: .08; mix-blend-mode: overlay; }
.ui-om-faces .ui-face::after { background: linear-gradient(180deg, rgba(11, 9, 7, .22), transparent 22%, transparent 48%, rgba(11, 9, 7, .62) 72%, rgba(11, 9, 7, .95)); }
/* Płyta zwarta: pod kartami 72 px zamiast 110 px pustej czerni (1440) */
.ui-om-faces.ui-plate.ui-sec { padding-block: clamp(64px, 6.5vw, 96px) clamp(48px, 5vw, 72px); }
.ui-om-faces .ui-head { position: relative; }
/* Chip tylko tam, gdzie karta gra film; "Zdjęcie" nic nie mówiło */
.ui-om-faces .ui-face:not([data-video]) .ui-face__tag { display: none; }
.ui-om-faces .ui-face__cap small { text-wrap: balance; }
@media (max-width: 599px) {
	/* nitka szwu kończy się nad etykietą "Zaufali mi", nie na literach */
	.ui-om-faces .ui-seam { height: 40px; }
	/* rola zawsze na dwa wersy: nazwiska we wszystkich kartach na jednej linii */
	.ui-om-faces .ui-face__cap small { min-height: 2.9em; min-height: 2lh; }
}

/* 5. 03 Media (jasne karty z ciemnym kadrem) ------------------------------ */
/* Od kart TV do "04 Opinie": ok. 140 px na 1440 i 100 px na 390 (wcześniej 268 px) */
.ui-om-media.ui-sec { padding-bottom: clamp(40px, 4vw, 64px); }
.ui-om-media__grid { display: grid; gap: clamp(28px, 4vw, 48px); }
.ui-om-media__head .ui-head { margin-bottom: 0; }
@media (min-width: 1024px) {
	.ui-om-media__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: end; column-gap: clamp(48px, 5vw, 88px); }
	.ui-om-media__head { padding-bottom: 12px; }
}
.ui-om-tv { display: grid; grid-auto-flow: column; grid-auto-columns: 66%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	margin-inline: calc(-1 * var(--ui-g)); padding: 4px var(--ui-g) 14px; scroll-padding-inline: var(--ui-g); }
.ui-om-tv::-webkit-scrollbar { display: none; }
.ui-om-tv > li { min-width: 0; scroll-snap-align: start; }
@media (min-width: 700px) {
	.ui-om-tv { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 16px; }
}
.ui-om-tv__b { display: grid; width: 100%; height: 100%; padding: 8px 8px 0; text-align: left; color: var(--ui-ink);
	transition: transform var(--ui-t2) var(--ui-ease), box-shadow var(--ui-t2) var(--ui-ease), border-color var(--ui-t2); }
.ui-om-tv__b:hover { transform: translateY(-3px); box-shadow: var(--ui-sh-2); border-color: var(--ui-line-2); }
.ui-om-tv__b:active { transform: scale(.985); }
.ui-om-tv__win { display: block; aspect-ratio: 9 / 13; border-radius: calc(var(--ui-r-l) - 8px); }
.ui-om-tv__win::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11, 9, 7, .45), transparent 26%, transparent 64%, rgba(11, 9, 7, .55)); pointer-events: none; }
.ui-om-tv__b:hover .ui-om-tv__img { transform: scale(1.04); }
.ui-om-tv__ch { position: absolute; z-index: 2; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 99px;
	font-size: var(--ui-fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--ui-snow); background: rgba(11, 9, 7, .74); border: 1px solid var(--ui-hair-2); }
.ui-om-tv__rec { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-gold); color: rgba(201, 164, 106, .7); }
.ui-om-tv__play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 64px; height: 64px; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%;
	color: var(--ui-noir); background: rgba(246, 242, 236, .94); box-shadow: 0 0 0 8px rgba(246, 242, 236, .14), 0 18px 40px -16px rgba(0, 0, 0, .7);
	transition: transform var(--ui-t2) var(--ui-spring), box-shadow var(--ui-t2) var(--ui-ease); }
.ui-om-tv__play .ui-ic { width: 20px; height: 20px; margin-left: 3px; }
.ui-om-tv__b:hover .ui-om-tv__play { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(246, 242, 236, .16), 0 18px 40px -16px rgba(0, 0, 0, .7); }
.ui-om-tv__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 8px 18px; }
.ui-om-tv__cap b { display: block; font-weight: 600; line-height: 1.3; }
.ui-om-tv__sub { display: block; font-size: var(--ui-fs-xs); color: var(--ui-ink-3); }
.ui-om-tv__go { width: 18px; height: 18px; color: var(--ui-ink-2); transition: transform var(--ui-t2) var(--ui-ease); }
.ui-om-tv__b:hover .ui-om-tv__go { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
	.ui-om-tv__b, .ui-om-tv__b:hover { transform: none; }
}

/* 6. 04 Opinie (papier) ------------------------------------------------------ */
.ui-om-rev .ui-score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 6px; }
.ui-om-score { display: grid; gap: 4px; justify-items: start; }
.ui-om-score__a { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 900px) { .ui-om-rev .ui-head--split .ui-score { justify-self: end; } }
.ui-om-rev .ui-rev { background: var(--ui-card); }
/* Karty opinii: tekst większy (17 px na telefonie, 20 px na 1440), bo karty dorównują wysokością ciemnemu cytatowi;
   autor na dole oddzielony włosową linią (stopka karty), zamiast pustej bieli */
.ui-om-rev .ui-rev p { font-size: clamp(1.0625rem, .9rem + .45vw, 1.25rem); line-height: 1.55; letter-spacing: -.01em; }
.ui-om-rev .ui-rev .ui-who { padding-top: 16px; border-top: 1px solid var(--ui-line); }
/* Papier opinii wchodzi arkuszem na kremowe Media: wyraźna krawędź i cień, żeby promień czytał się jak arkusz.
   Finał wchodzi na papier tym samym promieniem: narożniki finału pokazują papier, nie inne tło */
.ui-om-rev.ui-sec { z-index: 1; border-radius: var(--ui-r-xl) var(--ui-r-xl) 0 0; box-shadow: 0 -1px 0 var(--ui-line-2), 0 -24px 48px -28px rgba(40, 28, 14, .3);
	padding-top: clamp(56px, 6vw, 96px); padding-bottom: calc(clamp(40px, 5vw, 80px) + var(--ui-r-xl)); }
.ewa-ui--o-mnie .ui-final { z-index: 2; margin-top: calc(-1 * var(--ui-r-xl)); }
@media (max-width: 599px) {
	/* Przyciski finału na pełną szerokość, jak w hero i wierszach terminów */
	.ewa-ui--o-mnie .ui-final__cta { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
	.ewa-ui--o-mnie .ui-final__cta .ui-btn { width: 100%; }
}
@media (max-width: 699px) {
	/* karuzela do krawędzi ekranu, jak Media i Znane twarze */
	.ui-om-rev .ui-car__track { margin-inline: calc(-1 * var(--ui-g)); padding-inline: var(--ui-g); scroll-padding-inline: var(--ui-g); }
}

/* 7. Finał: okno ensō wyrównane do tytułu, trzy najbliższe terminy na ciemnym -------------------- */
/* Od 1024 px: kolumna treści jest wysoka (3 terminy). Odbiór: dysk przy górnej krawędzi zostawiał ok. 350 px pustej
   czerni pod kołem (1440), więc stoi w środku wysokości kolumny (domyślne align-items: center z ui.css), a przy
   przewijaniu jedzie przyklejony w środku okna przeglądarki, aż kolumna się skończy. */
@media (min-width: 1024px) {
	.ewa-ui--o-mnie .ui-final__in--win .ui-final__win { position: sticky; top: max(var(--ui-hd), calc(50svh - min(260px, 18vw))); }
}
.ui-om-next { display: grid; gap: 14px; margin-top: 8px; }
.ui-om-next__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding-top: 16px; border-top: 1px solid var(--ui-hair); }
@media (max-width: 599px) { .ui-om-next__h .ui-xs { flex-basis: 100%; } }
.ui-om-next .ui-dr__main a { min-height: 44px; }
.ui-final .ui-om-next__h .ui-xs { color: var(--ui-snow-3); }
.ui-final .ui-om-next .ui-dr { background: var(--ui-noir-2); border-color: var(--ui-hair); color: var(--ui-snow); }
.ui-final .ui-om-next .ui-dr:hover { border-color: var(--ui-hair-2); box-shadow: none; background: var(--ui-noir-3); }
.ui-final .ui-om-next .ui-dr__city, .ui-final .ui-om-next .ui-dr__days { color: var(--ui-snow-2); }
.ui-final .ui-om-next .ui-dr__city .ui-ic { color: var(--ui-gold); }
.ui-final .ui-om-next .ui-price { color: var(--ui-snow); }
.ui-final .ui-om-next .ui-dr.is-full .ui-dp b, .ui-final .ui-om-next .ui-dr.is-full .ui-dr__main a { color: var(--ui-snow-3); }
/* Poniżej 360 px (320): miasto, dni i cena w osobnych wierszach, "Zapisz się" na całą szerokość karty (wcześniej
   wychodził 18 px poza kartę i 2 px poza okno). Klasa add_to_cart_button i atrybuty bez zmian. */
@media (max-width: 359px) {
	.ui-final .ui-om-next .ui-dr { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "dp main" "dp st" "dp city" "dp days" "dp price" "act act"; }
	.ui-final .ui-om-next .ui-dr__city + .ui-dr__days::before { content: none; }
	.ui-final .ui-om-next .ui-dr__act { justify-self: stretch; }
	.ui-final .ui-om-next .ui-dr__act .ui-btn { flex: 1; width: 100%; }
}

/* 8. Bez JS: nagłówek nad ciemnym hero ma klasę is-top z PHP i nikt jej nie zdejmuje, więc na jasnych sekcjach
   białe logo i menu ginęły na kości słoniowej. Bez .ui-js tło paska zostaje (ciemne szkło, jasny tekst). Poprawka
   lokalna do czasu zmiany w fundamencie (ui.css 415). */
html:not(.ui-js) .ui-hd.is-top[data-tone="dark"]::before { opacity: 1; }

/* 9. Stopka poniżej 900 px: kolumna Akademia na całą szerokość, separatory list równe z Szkoleniami i Kontaktem */
@media (max-width: 899px) {
	.ui-ft__cols > .ui-ft__col { grid-column: 1 / -1; }
}

/* Omnibus (audyt Magdy): dopisek pod nagłówkiem opinii, jak .ui-cp-op__note na campach. */
.ui-op-note { grid-column: 1 / -1; margin: 0; font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .04em; color: var(--ui-ink-2); }