/* ewardega UI v3 "Meridian": strona /campy-masazowe/ (ui/campy.php).
   Wspólne komponenty (hero podstrony .ui-ph, płyta, bilet .ui-ticket/.ui-camp-t, .ui-proof, .ui-ewa, .ui-reviews,
   .ui-faqs, formularz newslettera) są w ui.css. Tu tylko układ strony campu, prefiks .ui-cp-. */

/* <picture> w .ui-win: ui.css (fundament); tu tylko kadr hero. */
.ui-cp .ui-ph__media picture { display: contents; }

/* ============ HERO (D) ============ */
/* Runda 2: dzienny kadr grupy z pucharem (cp-hero-grupa, grading wpalony w plik, zero CSS filter). Bez globalnej
   brązowej nakładki. Od 1024 px kadr stoi w prawej części (--cp-split) i wtapia się maską w czerń, tekst leży
   na czystej czerni z ziarnem, więc żadna twarz nie jest pod tekstem ani pod kartą. Telefon i tablet: kadr jako
   okno nad tekstem. Fakty hero (4 dni, 9 technik, SPA) są w karcie edycji na każdej szerokości. */
.ui-cp-hero { --cp-split: 46vw; display: grid; align-content: end; padding-bottom: calc(clamp(56px, 7vw, 88px) + 28px); }
.ui-cp-hero .ui-ph__media img { opacity: 1; }
.ui-cp-hero__in { position: relative; display: grid; gap: 26px; justify-items: start; }
.ui-cp-hero__h { max-width: 11.5em; }
.ui-cp-hero__by { display: block; margin-top: .14em; font-size: .42em; letter-spacing: -.02em; line-height: 1.15; color: var(--ui-snow-2); }
.ui-cp-hero__by .ui-dot { font-size: 1.6em; line-height: 0; }
.ui-cp-hero .ui-lead { max-width: 30em; }
/* "Zobacz program": strzałka w dół (kotwica do 03), na hover zjeżdża */
.ui-cp-hero__prog .ui-ic { rotate: 90deg; transition: translate var(--ui-t2) var(--ui-ease); }
.ui-cp-hero__prog:hover .ui-ic { translate: 0 2px; }
/* Kadr osiada raz przy wejściu (skala, bez przezroczystości: LCP maluje się od pierwszej klatki) */
@media (prefers-reduced-motion: no-preference) {
	.js:not(.ui-lite) .ui-cp-hero .ui-ph__media img { animation: ui-cp-settle 1.8s var(--ui-ease-out-expo) both; }
}
@keyframes ui-cp-settle { from { scale: 1.06; } }
@media (min-width: 1024px) {
	.ui-cp-hero { min-height: clamp(660px, calc(100svh - var(--ui-promo)), 940px); }
	.ui-cp-hero .ui-ph__media { left: var(--cp-split); -webkit-mask: linear-gradient(90deg, transparent, #000 26%); mask: linear-gradient(90deg, transparent, #000 26%); }
	.ui-cp-hero .ui-ph__media img { object-position: 50% 56%; }
	/* Tylko krawędzie: góra pod nawigacją (jasny sufit z bali), dół do arkusza */
	.ui-cp-hero .ui-ph__media::after { background: linear-gradient(180deg, rgba(11, 9, 7, .74), rgba(11, 9, 7, .34) 13%, rgba(11, 9, 7, 0) 28%, rgba(11, 9, 7, 0) 82%, rgba(11, 9, 7, .6)); }
	/* Kolumna tekstu kończy się przed kadrem: lewa krawędź wrapu do --cp-split minus odstęp */
	.ui-cp-hero__in { grid-template-columns: minmax(0, calc(var(--cp-split) - (100vw - min(100vw - 2 * var(--ui-g), var(--ui-max))) / 2 - 24px)); }
	.ui-cp-hero__h { font-size: clamp(3.5rem, 1.5rem + 4.3vw, 6rem); }
	.ui-cp-hero .ui-lead { font-size: 1.125rem; }
}
/* Laptop 1024 do 1365: szersza kolumna tekstu, mniejszy H1, "Zobacz program" jako link tekstowy (przyciski
   w jednym rzędzie, karta edycji bliżej pierwszego ekranu). */
@media (min-width: 1024px) and (max-width: 1365px) {
	.ui-cp-hero { --cp-split: 50vw; }
	.ui-cp-hero__h { font-size: 4.25rem; }
	.ui-cp-hero .ui-lead { font-size: 1.0625rem; }
	.ui-cp-hero .ui-ph__cta .ui-cp-hero__prog { padding-inline: 10px; border-color: transparent; background: none; box-shadow: none; color: var(--ui-snow-2); }
	.ui-cp-hero .ui-ph__cta .ui-cp-hero__prog:hover { color: var(--ui-snow); background: none; }
}
/* Telefon i tablet: okno kadru nad tekstem, tekst wchodzi na dolną krawędź kadru. Gradient od góry pod okruszkami
   (czytelność na jasnym suficie), środek kadru czysty, czerń dopiero pod tekstem. */
@media (max-width: 1023px) {
	.ui-cp-hero { --cp-win: clamp(220px, 34svh, 360px); min-height: 0; padding-top: calc(var(--ui-hd) + var(--cp-win)); }
	.ui-cp-hero .ui-ph__media { bottom: auto; height: calc(var(--ui-hd) + var(--cp-win) + 56px); }
	.ui-cp-hero .ui-ph__media img { object-position: 50% 42%; }
	.ui-cp-hero .ui-ph__media::after { background: linear-gradient(180deg, rgba(11, 9, 7, .74), rgba(12, 10, 8, .62) 132px, rgba(12, 10, 8, 0) 184px, rgba(11, 9, 7, 0) 60%, rgba(11, 9, 7, .72) 84%, var(--ui-noir)); }
	/* Okruszki leżą na jasnym suficie z bali: scrim pod nimi, pełna biel zamiast półprzezroczystej i cień tekstu
	   (kontrast 13 px min. 4,5:1 w każdym pikselu tła, pomiar noc/qa-campy/r4) */
	.ui-cp-hero .ui-ph__crumbs, .ui-cp-hero .ui-ph__crumbs * { color: var(--ui-snow); text-shadow: 0 1px 8px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .45); }
}
/* Telefon: jedno główne działanie (pełna pigułka), "Zobacz program" jako link tekstowy pod nim (44 px).
   Okno kadru (-m 720x660 z sufitem nad grupą: logo i okruszki leżą na suficie, nie na twarzach) tak wysokie,
   żeby CTA mieściło się w pierwszym ekranie (390x844). */
@media (max-width: 599px) {
	.ui-cp-hero { --cp-win: clamp(196px, 29svh, 270px); }
	.ui-cp-hero .ui-lead { font-size: 1.0625rem; line-height: 1.55; }
	.ui-cp-hero .ui-ph__cta { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2px; }
	.ui-cp-hero .ui-ph__cta .ui-btn { width: 100%; }
	.ui-cp-hero .ui-ph__cta .ui-cp-hero__prog { width: auto; min-height: 44px; padding: 0 6px; border: 0; background: none; box-shadow: none; font-size: var(--ui-fs-s); color: var(--ui-snow-2); gap: 8px; }
	.ui-cp-hero .ui-ph__cta .ui-cp-hero__prog:hover { color: var(--ui-snow); background: none; }
	.ui-cp-hero__in { gap: 18px; }
}
/* Karta ostatniej edycji (szkło: jedyny backdrop-filter w hero). Runda 2: zwarty wiersz statusu pod przyciskami
   na każdej szerokości (data, miejsce, fakty; chip po prawej), więc nie leży na kadrze grupy. */
.ui-cp-hcard {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 20px;
	width: min(100%, 540px); padding: 16px 20px; border-radius: var(--ui-r-l);
	color: var(--ui-snow); background: rgba(20, 16, 12, .5); border: 1px solid var(--ui-hair-2);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	transition: border-color var(--ui-t2), background-color var(--ui-t2), transform var(--ui-t2) var(--ui-ease);
}
.ui-cp-hcard:hover { border-color: var(--ui-gold-a); background: rgba(20, 16, 12, .62); transform: translateY(-2px); }
.ui-cp-hcard:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.ui-cp-hcard__k { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 26px; }
.ui-cp-hcard__k .ui-ic { width: 18px; height: 18px; color: var(--ui-gold); }
/* Karta jest kotwicą do #camp-termin niżej: strzałka w dół, na hover zjeżdża (translate działa po rotate, w osi ekranu). */
.ui-cp-hcard__k .ui-cp-hcard__down { rotate: 90deg; transition: translate var(--ui-t2) var(--ui-ease); }
.ui-cp-hcard:hover .ui-cp-hcard__k .ui-cp-hcard__down { translate: 0 3px; }
.ui-cp-hcard__d { grid-column: 1; font-size: 1.875rem; font-weight: 200; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.ui-cp-hcard__m { grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; font-size: var(--ui-fs-s); color: var(--ui-snow-2); }
.ui-cp-hcard__m .ui-ic { width: 15px; height: 15px; margin-right: 8px; color: var(--ui-gold); }
.ui-cp-hcard__x { display: contents; }
.ui-cp-hcard .ui-chip { grid-column: 2; grid-row: 2 / span 2; align-self: center; justify-self: end; }
/* Wejście krótkie (ui.css 22.3): z dołu, rama karty stoi */
.ui-cp-hcard.ui-enter { --enter-x: 0px; --enter-y: 16px; }
/* Telefon: etykieta i chip w jednej linii, data ze strzałką, pod spodem miejsce i fakty */
@media (max-width: 599px) {
	.ui-cp-hcard { column-gap: 12px; row-gap: 6px; padding: 14px 16px; }
	.ui-cp-hcard__k { display: contents; }
	.ui-cp-hcard__k .ui-label { grid-column: 1; grid-row: 1; align-self: center; }
	.ui-cp-hcard .ui-chip { grid-column: 2; grid-row: 1; }
	.ui-cp-hcard__d { grid-column: 1 / -1; grid-row: 2; font-size: 1.625rem; }
	.ui-cp-hcard__k .ui-cp-hcard__down { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; }
	.ui-cp-hcard__m { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 359px) { .ui-cp-hcard .ui-chip { grid-column: 1 / -1; grid-row: 4; justify-self: start; } }

/* ============ 01 PO CO CI CAMP (L, arkusz) ============ */
/* Sygnatura strony "Kolaż Folwarku" (elewacja §3.6, runda 3: scena zamiast trzech parallax w małych kadrach).
   Telefon: nagłówek, stolik 4:5 (-m) od krawędzi do krawędzi ekranu z podpisem, pod nim dwa kadry pracy przy stole
   w układzie 7/5 z przesunięciem 48 px. Każdy kadr odsłania się raz (.ui-unveil) z odstępem 90 ms (--i z szablonu).
   Od 1024 px: stolik przypięty (sticky) w kolumnach 6 do 12, obok przejeżdżają dwa kadry w różnych tempach. */
.ui-cp-col { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 12px; align-items: start; margin-bottom: clamp(56px, 7vw, 112px); }
.ui-cp-col__head { grid-column: 1 / -1; margin-bottom: 24px; }
.ui-cp-col__head .ui-lead { max-width: 34em; }
.ui-cp-col__big { grid-column: 1 / -1; margin: 0 calc(-1 * var(--ui-g)) 28px; }
.ui-cp-col__big .ui-cap { padding-inline: var(--ui-g); }
.ui-cp-col__f { aspect-ratio: 4 / 5; }
.ui-cp-col__big .ui-cp-col__f { --cp-r: 0px; border-radius: 0; }
.ui-cp-col__par { height: 100%; }
.ui-cp-col__low { margin-top: 48px; }
/* Odsłona: kurtyna od dołu naprawdę jedzie (do inset(0), nie do none, które nie interpoluje), kolejne kadry co 90 ms */
.ui-cp-col .ui-unveil { clip-path: inset(0 0 0 0 round var(--cp-r, var(--ui-r-l))); }
.ui-cp-col .ui-unveil, .ui-cp-col .ui-unveil img { transition-delay: calc(var(--i, 0) * 90ms); }
@media (min-width: 720px) and (max-width: 1023px) { .ui-cp-col__big .ui-cp-col__f { aspect-ratio: 3 / 2; } }
@media (min-width: 1024px) {
	/* Oś przewijania całego kolażu (--cpcol): stolik i małe kadry liczą tempo od jednej sceny. overflow-x: clip
	   nie tworzy kontenera przewijania, więc sticky działa. Wysokość lewej kolumny wyznacza czas przypięcia. */
	.ui-cp-col { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 24px; overflow-x: clip; view-timeline: --cpcol block; padding-bottom: 10vh; }
	.ui-cp-col__head { grid-column: 1 / 6; grid-row: 1; margin: 0 0 clamp(56px, 6vw, 96px); padding-top: 8px; }
	.ui-cp-col__big { grid-column: 6 / 13; grid-row: 1 / span 3; position: sticky; top: calc(var(--ui-hd) + 28px); margin: 0; }
	.ui-cp-col__big .ui-cp-col__f { --cp-r: var(--ui-r-l); aspect-ratio: auto; height: clamp(500px, calc(100svh - var(--ui-hd) - 112px), 780px); border-radius: var(--ui-r-l); }
	.ui-cp-col__big .ui-cap { padding-inline: 0; }
	/* 2.2.1: oba małe kadry w lewych kolumnach 1 do 4, bez nachodzenia na stolik (wcześniej dolny zasłaniał ludzi
	   przy stole i podpis). Różne tempo przewijania zostaje, ruch idzie obok dużego kadru, nie po nim. */
	.ui-cp-col__mid { grid-column: 1 / 4; grid-row: 2; }
	.ui-cp-col__low { grid-column: 2 / 5; grid-row: 3; margin-top: 14vh; }
}
@supports (animation-timeline: view()) {
	@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
		/* Stolik stoi, obraz w nim dryfuje lekko (skala 1,09: bez podciągania 2400 px). Małe kadry jadą całe, bez
		   skali: średni z tempem 14vh, mały 28vh w obie strony, więc mijają stolik wyraźnie szybciej niż strona. */
		html:not(.ui-lite) .ui-cp-col__par { scale: 1.09; animation: ui-cp-drift linear both; animation-timeline: --cpcol; animation-range: cover 0% cover 100%; }
		html:not(.ui-lite) :is(.ui-cp-col__mid, .ui-cp-col__low) { animation: ui-cp-pass linear both; animation-timeline: --cpcol; animation-range: cover 0% cover 100%; }
		html:not(.ui-lite) .ui-cp-col__mid { --cp-v: 14vh; }
		html:not(.ui-lite) .ui-cp-col__low { --cp-v: 28vh; }
	}
}
@keyframes ui-cp-drift { from { translate: 0 calc(var(--par, -4%) * -1); } to { translate: 0 var(--par, -4%); } }
@keyframes ui-cp-pass { from { translate: 0 var(--cp-v, 0px); } to { translate: 0 calc(var(--cp-v, 0px) * -1); } }
.ui-cp-why.ui-sec { padding-top: calc(var(--ui-sec) - 28px); }
.ui-cp-why__grid { display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 900px) { .ui-cp-why__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; column-gap: 48px; } }
/* Jedna kolumna tekstu (max 36em) obok listy "Dla Ciebie / Dla Twojej pracy". Akapity 3 i 4 za "Czytaj więcej". */
.ui-cp-why__txt { display: grid; gap: 18px; align-content: start; color: var(--ui-ink-2); font-size: 1.0625rem; line-height: 1.7; max-width: 36em; text-wrap: pretty; }
.ui-cp-more > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--ui-line-2); list-style: none; cursor: pointer;
	font-size: var(--ui-fs-s); font-weight: 600; color: var(--ui-ink); transition: border-color var(--ui-t2), background-color var(--ui-t2); }
.ui-cp-more > summary::-webkit-details-marker { display: none; }
.ui-cp-more > summary:hover { border-color: var(--ui-gold); background: rgba(201, 164, 106, .08); }
.ui-cp-more > summary:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.ui-cp-more > summary .ui-ic { width: 16px; height: 16px; color: var(--ui-gold-ink); rotate: 90deg; transition: rotate var(--ui-t2) var(--ui-ease); }
.ui-cp-more[open] > summary .ui-ic { rotate: -90deg; }
.ui-cp-more__c, .ui-cp-more[open] .ui-cp-more__o { display: none; }
.ui-cp-more[open] .ui-cp-more__c { display: inline; }
.ui-cp-more__in { display: grid; gap: 18px; padding-top: 18px; }
.ui-cp-more[open] > summary { order: 2; }
@media (prefers-reduced-motion: no-preference) {
	.ui-cp-more[open] .ui-cp-more__in { animation: ui-cp-more .5s var(--ui-ease); }
}
@keyframes ui-cp-more { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.ui-cp-sign { display: grid; gap: 0; border-top: 1px solid var(--ui-line-2); }
.ui-cp-sign li { position: relative; display: grid; gap: 8px; padding: 22px 0 22px 28px; border-bottom: 1px solid var(--ui-line); }
.ui-cp-sign li::before { content: ""; position: absolute; left: 0; top: 28px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--ui-gold); background: var(--ui-ivory); }
.ui-cp-sign li + li::after { content: ""; position: absolute; left: 4px; top: -22px; height: 50px; width: 1px; background: linear-gradient(var(--ui-gold-a), var(--ui-gold)); }
.ui-cp-sign__k { font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ui-gold-ink); }
.ui-cp-sign b { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.875rem); font-weight: 300; letter-spacing: -.025em; line-height: 1.25; text-wrap: balance; }
/* Telefon i tablet: ostatnia pozycja bez linii (pod listą kończy się sekcja) */
@media (max-width: 899px) {
	.ui-cp-sign li:last-child { border-bottom: 0; }
}

/* ============ 02 FILM + KADRY (D, płyta) ============ */
.ui-cp-film .ui-plate__glow { inset: -30% auto auto -20%; }
.ui-cp-gal__hd { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.ui-cp-gal__hd .ui-label { white-space: nowrap; }
.ui-cp-gal__hint { text-align: right; }
.ui-cp-gal__hint-c { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) { .ui-cp-gal__hint-t { display: none; } .ui-cp-gal__hint-c { display: inline; } }
.ui-cp-gal {
	display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 10px;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
	margin-inline: calc(-1 * var(--ui-g)); padding: 2px var(--ui-g) 6px; scroll-padding-inline: var(--ui-g);
}
.ui-cp-gal::-webkit-scrollbar { display: none; }
.ui-cp-gal:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 4px; }
.ui-cp-gal > li { min-width: 0; scroll-snap-align: start; }
@media (min-width: 600px) and (max-width: 999px) { .ui-cp-gal { grid-auto-columns: 38%; } }
/* Szyna: kropki pozycji (jak opinie) i strzałki tylko przy myszy; od 1000 px siatka, stopka znika */
.ui-cp-car { gap: 14px; }
.ui-cp-car__ft { min-height: 22px; }
.ui-cp-car__nav { display: none; }
@media (hover: hover) and (pointer: fine) { .ui-cp-car__nav { display: flex; } }
@media (min-width: 1000px) { .ui-cp-car__ft { display: none; } }
/* Desktop (elewacja: film + 5 kadrów): film 4:5 w dużym kaflu | pierwszy kadr na dwa rzędy | cztery małe kadry 2 x 2.
   Siatka 30 ścieżek: duży 12, wąski 6, małe po 6; wysokość dużego = dwa rzędy małych.
   v4 po weryfikacji: film i pierwszy kadr zamieniły się kaflami (film to najmocniejszy materiał strony). */
@media (min-width: 1000px) {
	.ui-cp-gal { grid-auto-flow: row; grid-template-columns: repeat(30, minmax(0, 1fr)); grid-auto-columns: auto; gap: 12px; overflow: visible; margin: 0; padding: 0; }
	.ui-cp-gal > li { grid-column: span 6; }
	.ui-cp-gal > .ui-cp-gal__film { grid-column: 1 / span 12; grid-row: 1 / span 2; }
	.ui-cp-gal > li:nth-child(2) { grid-column: 13 / span 6; grid-row: 1 / span 2; }
	.ui-cp-gal > li:nth-child(3) { grid-column: 19 / span 6; grid-row: 1; }
	.ui-cp-gal > li:nth-child(4) { grid-column: 25 / span 6; grid-row: 1; }
	.ui-cp-gal > li:nth-child(5) { grid-column: 19 / span 6; grid-row: 2; }
	.ui-cp-gal > li:nth-child(6) { grid-column: 25 / span 6; grid-row: 2; }
	.ui-cp-gal > li:nth-child(2) .ui-cp-tile { aspect-ratio: auto; height: 100%; }
}
.ui-cp-tile { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--ui-r); text-align: left; cursor: zoom-in; }
.ui-cp-tile img { position: absolute; inset: 0; }
.ui-cp-tile:hover img { transform: scale(1.05); }
/* Kafel filmu: przyciemnienie dołu pod podpisem "Obejrzyj film". Kadry bez numerów (odbiór 2026-10-12: numeracja rwała się na filmie). */
.ui-cp-tile--film::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 65%, rgba(11, 9, 7, .62)); pointer-events: none; }
.ui-cp-tile:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.ui-cp-tile--film { cursor: pointer; }
@media (min-width: 1000px) { .ui-cp-tile--film { aspect-ratio: auto; height: 100%; } }
.ui-cp-tile--film::before { background: linear-gradient(180deg, rgba(11, 9, 7, .1), transparent 30%, transparent 52%, rgba(11, 9, 7, .85)); }
.ui-cp-tile__play { position: absolute; left: 50%; top: 44%; z-index: 2; translate: -50% -50%; display: grid; place-items: center; width: 76px; height: 76px; }
.ui-cp-tile__play::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--ui-gold-a); }
.ui-cp-tile__play i { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: var(--ui-noir); background: var(--ui-snow); transition: transform var(--ui-t2) var(--ui-spring); }
.ui-cp-tile__play .ui-ic { width: 26px; height: 26px; margin-left: 3px; }
.ui-cp-tile--film:hover .ui-cp-tile__play i { transform: scale(1.08); }
/* Elewacja: bez pulsującego pierścienia (pętla spoza inwentarza §3.0); nad posterem pigułka kursora "Odtwórz" (ui.js 22c) */
/* Telefon i tablet: play 56 px w lewym dolnym rogu nad podpisem (jak w aplikacjach wideo), twarze grupy wolne */
@media (max-width: 999px) {
	.ui-cp-tile__play { left: 16px; top: auto; bottom: 74px; translate: none; width: 56px; height: 56px; }
	.ui-cp-tile__play i { width: 56px; height: 56px; }
	.ui-cp-tile__play::before { inset: -6px; }
	.ui-cp-tile__play .ui-ic { width: 20px; height: 20px; margin-left: 2px; }
}
.ui-cp-tile__cap { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: grid; gap: 2px; }
.ui-cp-tile__cap b { font-size: 1.0625rem; font-weight: 600; color: var(--ui-snow); }
.ui-cp-tile__cap small { font-size: var(--ui-fs-xs); color: var(--ui-snow-2); }

/* ============ 03 PROGRAM (L) ============ */
/* Elewacja §4.6: 9 technik w dwóch kolumnach (numer 13 px, bez kółek, nici i ilustracji), chip z czasem campu.
   Pod spodem trzy karty pobytu w jednym rzędzie od 900 px. */
.ui-cp-tech { padding: clamp(22px, 3vw, 40px); display: grid; gap: 18px; }
.ui-cp-tech__hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--ui-line-2); }
.ui-cp-tech__list { display: grid; }
.ui-cp-tech__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ui-line); font-size: 1.0625rem; line-height: 1.45; }
.ui-cp-tech__n { font-size: var(--ui-fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--ui-gold-ink); }
.ui-cp-tech__list li:first-child > span:last-child { font-weight: 600; }
@media (min-width: 900px) {
	.ui-cp-tech__list { grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); }
	.ui-cp-tech__list li:nth-child(5), .ui-cp-tech__list li:last-child { border-bottom: 0; }
}
@media (max-width: 899px) { .ui-cp-tech__list li:last-child { border-bottom: 0; } }
.ui-cp-inc { display: grid; gap: 14px; margin-top: 14px; }
@media (min-width: 900px) { .ui-cp-inc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } }
.ui-cp-inc__c { padding: 22px; display: grid; gap: 14px; align-content: start; }
.ui-cp-inc__c h3 { display: flex; align-items: center; gap: 12px; }
.ui-cp-inc__i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; background: rgba(201, 164, 106, .1); border: 1px solid var(--ui-gold-a); color: var(--ui-gold-ink); }
.ui-cp-inc__i .ui-ic { width: 20px; height: 20px; }
/* Certyfikat rysowany linią (camp-cert.svg, statyczny) na dole ostatniej karty */
.ui-cp-inc__c--cert { grid-template-rows: auto auto minmax(0, 1fr); }
.ui-cp-inc__il { display: block; align-self: end; justify-self: end; width: 132px; margin: 4px -4px -6px 0; }
.ui-cp-inc__il .il { display: block; width: 100%; height: auto; color: var(--ui-gold-ink); }

/* Listy campu (check albo drobna) */
.ui-cp-list { display: grid; gap: 10px; color: var(--ui-ink-2); }
.ui-cp-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; line-height: 1.5; }
.ui-cp-list .ui-ic { width: 16px; height: 16px; margin-top: 3px; color: var(--ui-gold-ink); stroke-width: 2; }
.ui-cp-list--s { gap: 8px; font-size: var(--ui-fs-s); }
.ui-cp-list--dash li::before { content: ""; width: 14px; height: 1px; margin-top: .8em; background: var(--ui-gold); }

/* ============ 04 DLA KOGO (D, płyta): persony na statycznej nici meridianu ============ */
/* Medalion z ilustracją (camp-who-*.svg) wisi na złotej nici łączącej karty. Elewacja: nić i ilustracje stoją
   narysowane (płyta bez własnego ruchu, sygnatura strony to kolaż 01), bez pulsu, iskry i poziomic wokół
   medalionu. Ilustracja min. 64 px, treść 17 do 19 px, numer persony jako etykieta 13 px (zasada 4). */
.ui-cp-who { --who-p: clamp(22px, 2.6vw, 32px); --who-d: 80px; }
.ui-cp-who.ui-sec { padding-bottom: calc(var(--ui-sec) * .8); }
.ui-cp-who.ui-dark .ui-cp-who__list li.ui-card { color: var(--ui-snow); background: var(--ui-noir-2); border-color: var(--ui-hair); box-shadow: none; }
.ui-cp-who.ui-dark .ui-cp-who__il { background: var(--ui-noir-2); box-shadow: 0 0 0 6px var(--ui-noir-2); }
.ui-cp-who.ui-dark .ui-cp-who__il .il, .ui-cp-who.ui-dark .ui-cp-who__n { color: var(--ui-gold); }
.ui-cp-who.ui-dark .ui-cp-who__list p { color: var(--ui-snow); }
.ui-cp-who__list { display: grid; gap: 14px; }
.ui-cp-who__list li { position: relative; display: grid; grid-template-columns: var(--who-d) minmax(0, 1fr); gap: 4px 18px; align-content: start; padding: var(--who-p); }
.ui-cp-who__il { position: relative; z-index: 2; grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: var(--who-d); height: var(--who-d); border-radius: 50%; border: 1px solid var(--ui-gold-a); transition: border-color var(--ui-t2); }
.ui-cp-who__il .il { display: block; width: 80%; height: auto; }
.ui-cp-who__list li:hover .ui-cp-who__il { border-color: var(--ui-gold); }
.ui-cp-who__n { grid-column: 2; align-self: end; font-size: var(--ui-fs-xs); font-weight: 700; letter-spacing: .14em; line-height: 1.2; }
.ui-cp-who__list p { grid-column: 2; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.55; text-wrap: pretty; }
.ui-cp-who__list li:not(:last-child)::before { content: ""; position: absolute; z-index: 1; left: calc(var(--who-p) + var(--who-d) / 2 - .5px); top: calc(var(--who-p) + var(--who-d) / 2); width: 1px; height: calc(100% + 14px); background: var(--ui-gold); }
/* Telefon: medalion w wierszu z numerem, tekst na pełną szerokość karty. Nić biegnie pionowo po lewej,
   poza kartami (szyna z węzłem na wysokości każdego medalionu), więc nie przecina tekstu. */
@media (max-width: 599px) {
	.ui-cp-who { --who-p: 20px; --rail: 22px; }
	.ui-cp-who__list { padding-left: var(--rail); }
	.ui-cp-who__list li { gap: 14px 16px; }
	.ui-cp-who__il { grid-row: 1; }
	.ui-cp-who__n { grid-row: 1; align-self: center; }
	.ui-cp-who__list p { grid-column: 1 / -1; }
	.ui-cp-who__list li:not(:last-child)::before { left: calc(-1 * var(--rail) + 5.5px); }
	.ui-cp-who__list li::after { content: ""; position: absolute; z-index: 2; left: calc(-1 * var(--rail) + 1px); top: calc(var(--who-p) + var(--who-d) / 2 - 5px); width: 10px; height: 10px; border-radius: 50%;
		border: 1px solid var(--ui-gold); background: var(--ui-noir); }
}
/* Desktop: medaliony wiszą NAD kartami na jednej złotej nici, każdy z krótką nitką w dół do swojej karty.
   Nić biegnie przez środki medalionów i nie wychodzi poza kolumnę treści (wejście i wyjście wygaszone). */
@media (min-width: 900px) {
	.ui-cp-who { --who-d: 112px; --who-lift: 30px; --who-y: calc(-1 * (var(--who-lift) + var(--who-d) / 2)); }
	.ui-cp-who__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: calc(var(--who-d) + var(--who-lift) + 10px); }
	.ui-cp-who__list li { grid-template-columns: minmax(0, 1fr); gap: 14px; transition: translate var(--ui-t3) var(--ui-ease), box-shadow var(--ui-t3); }
	/* grid-area: auto, bo absolutny element z umieszczeniem w siatce liczy top od obszaru siatki, nie od krawędzi karty */
	.ui-cp-who__il { position: absolute; grid-area: auto; left: var(--who-p); top: calc(-1 * (var(--who-d) + var(--who-lift))); }
	.ui-cp-who.ui-dark .ui-cp-who__il { box-shadow: none; }
	.ui-cp-who__il .il { width: 74%; }
	.ui-cp-who__n { grid-column: 1; grid-row: 1; align-self: start; }
	.ui-cp-who__list p { grid-column: 1; }
	.ui-cp-who__n::before { content: ""; position: absolute; left: calc(var(--who-p) + var(--who-d) / 2 - .5px); top: calc(-1 * var(--who-lift)); width: 1px; height: var(--who-lift); background: linear-gradient(var(--ui-gold), var(--ui-gold-a)); }
	.ui-cp-who__n::after { content: ""; position: absolute; left: calc(var(--who-p) + var(--who-d) / 2 - 3.5px); top: -4px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ui-gold); background: var(--ui-noir-2); }
	.ui-cp-who__list li:not(:last-child)::before { left: calc(var(--who-p) + var(--who-d) / 2); top: var(--who-y); width: calc(100% + 16px); height: 1px; }
	.ui-cp-who__list li:first-child::after, .ui-cp-who__list li:last-child::after { content: ""; position: absolute; z-index: 1; top: var(--who-y); height: 1px; pointer-events: none; }
	.ui-cp-who__list li:first-child::after { left: 0; width: calc(var(--who-p) + var(--who-d) / 2); background: linear-gradient(90deg, transparent, var(--ui-gold)); }
	.ui-cp-who__list li:last-child::after { left: calc(var(--who-p) + var(--who-d) / 2); right: 0; background: linear-gradient(90deg, var(--ui-gold), rgba(201, 164, 106, .4) 60%, transparent); }
	.ui-cp-who__list li:hover { translate: 0 -4px; box-shadow: var(--ui-sh-2); }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) { .ui-cp-who__list li:hover { translate: none; } }

/* ============ 05 ROZWÓJ I RELACJE (L) ============ */
.ui-cp-learn__grid { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (min-width: 900px) { .ui-cp-learn__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.ui-cp-learn__fig { position: relative; max-width: 520px; }
/* Prostokąt --ui-r-l z odsłoną .ui-unveil (ui.css 22.4) i podpisem .ui-cap, bez ram i narożników */
.ui-cp-learn__win { aspect-ratio: 4 / 5; }
@media (max-width: 899px) { .ui-cp-learn__win { aspect-ratio: 4 / 3; } }
/* Desktop: kadr ma wysokość kolumny tekstu (równe kolumny, bez 120 px pustki pod listą) */
@media (min-width: 900px) {
	.ui-cp-learn__grid { align-items: stretch; }
	.ui-cp-learn__fig { grid-template-rows: minmax(0, 1fr) auto; }
	.ui-cp-learn__win { aspect-ratio: auto; min-height: 460px; }
	.ui-cp-learn__win img { position: absolute; inset: 0; }
	.ui-cp-learn__txt { align-self: center; }
}
.ui-cp-learn__txt .ui-head { margin-bottom: 32px; }
.ui-cp-learn__cols { display: grid; gap: 28px; }
@media (min-width: 600px) { .ui-cp-learn__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.ui-cp-learn__h { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--ui-line-2); font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ui-ink); }
.ui-cp-learn__h .ui-ic { width: 20px; height: 20px; color: var(--ui-gold-ink); }
/* Przełącznik segmentowy (z JS): pigułka z ciemnym suwakiem, który przejeżdża pod wybraną zakładką.
   Telefon: nieaktywny panel znika (bez pustego pasa pod krótszą listą), aktywny wjeżdża. Desktop: panele
   w jednej komórce siatki obok kadru, wysokość = wyższy panel, więc kolumna nie skacze przy zmianie. */
.ui-cp-seg:not([hidden]) { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; margin-bottom: 22px; border-radius: 999px; background: var(--ui-paper); border: 1px solid var(--ui-line); }
.ui-cp-seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ui-ink); box-shadow: var(--ui-sh-1);
	transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .45s var(--ui-spring); }
.ui-cp-seg__t { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 999px;
	font-size: var(--ui-fs-s); font-weight: 600; color: var(--ui-ink-2); transition: color var(--ui-t2); }
.ui-cp-seg__t .ui-ic { width: 18px; height: 18px; flex: none; color: var(--ui-gold-ink); transition: color var(--ui-t2); }
.ui-cp-seg__t small { min-width: 22px; padding: 1px 6px; border-radius: 999px; font-size: var(--ui-fs-xs); font-weight: 700; line-height: 1.5; color: var(--ui-gold-ink); background: rgba(201, 164, 106, .14); }
.ui-cp-seg__t:hover { color: var(--ui-ink); }
.ui-cp-seg__t[aria-selected="true"] { color: var(--ui-snow); }
.ui-cp-seg__t[aria-selected="true"] .ui-ic { color: var(--ui-gold-hi, var(--ui-gold)); }
.ui-cp-seg__t[aria-selected="true"] small { color: var(--ui-noir); background: var(--ui-gold); }
.ui-cp-seg__t:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.is-tabs .ui-cp-learn__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.is-tabs .ui-cp-pan:not(.is-on) { display: none; }
@media (prefers-reduced-motion: no-preference) { .is-tabs .ui-cp-pan.is-on { animation: ui-cp-pan .45s var(--ui-ease); } }
@keyframes ui-cp-pan { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (min-width: 900px) {
	.is-tabs .ui-cp-pan, .is-tabs .ui-cp-pan:not(.is-on) { display: block; grid-area: 1 / 1; }
	.is-tabs .ui-cp-pan:not(.is-on) { visibility: hidden; }
}
.is-tabs .ui-cp-pan:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 6px; border-radius: 4px; }
/* Nagłówki paneli dubluje przełącznik */
.is-tabs .ui-cp-learn__h { display: none; }
.is-tabs .ui-cp-list { gap: 0; }
.is-tabs .ui-cp-list li { padding: 13px 0; border-bottom: 1px solid var(--ui-line); }
.is-tabs .ui-cp-list li:first-child { padding-top: 4px; }
@media (prefers-reduced-motion: reduce) { .ui-cp-seg::before { transition: none; } }

/* ============ 06 TERMIN: bilet + powiadomienie ============ */
/* Telefon i tablet: nagłówek, formularz (główna akcja), dopiero potem bilet zakończonej edycji */
.ui-cp-term__grid { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-areas: "head" "form" "ticket"; }
@media (min-width: 1024px) { .ui-cp-term__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head ticket" "form ticket"; column-gap: clamp(40px, 5vw, 72px); row-gap: 28px; align-items: start; } }
.ui-cp-term__head { grid-area: head; margin-bottom: 0; }
/* Bilet stoi dołem równo z dołem karty formularza (kolumny kończą się na jednej linii) */
.ui-cp-t { grid-area: ticket; align-self: end; }
.ui-cp-t__top { min-height: 280px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* Odbiór 2026-10-12: poziomice topo-camp (ui.css 13.10) w górnej prawej części biletu, gasną przed datą:
   linie nie wchodzą pod etykietę ani pod datę. */
.ui-cp-t__top .il--topo { inset: 0 0 auto auto; width: 62%; height: 64%; opacity: .55; -webkit-mask: linear-gradient(180deg, #000 40%, transparent 92%); mask: linear-gradient(180deg, #000 40%, transparent 92%); }
@media (max-width: 719px) { .ui-cp-t__top .il--topo { top: 40px; width: 58%; height: 44%; } }
/* Etykieta edycji u góry, data i chip razem na dole części górnej */
.ui-cp-t__top > .ui-label { margin-bottom: auto; }
.ui-cp-t__chip { justify-self: start; }
/* Bilet jako bohater (elewacja §4.6): szersza kolumna, bez zdjęcia, data jako wielka cienka liczba (.ui-num
   w złocie na ciemnym), jedna statyczna rama. Runda 2: bez półokrągłych wycięć i przerywanej perforacji
   (lista kiczu: paragony i ząbki), granicę góra / dół wyznacza sama hairline. Bez poziomic i przechyłu. */
.ui-cp-t { box-shadow: inset 0 0 0 1px var(--ui-hair-2); -webkit-mask: none; mask: none; }
.ui-cp-t .ui-ticket__perf { display: none; }
.ui-cp-t__date.ui-num { font-size: clamp(2.5rem, .6rem + 5.6vw, 5.5rem); letter-spacing: -.045em; line-height: .95; white-space: nowrap; color: var(--ui-gold); }
/* Desktop z JS: bilet na pełną wysokość lewej kolumny (nagłówek + formularz), równe kolumny od góry do dołu.
   Część górna rośnie (klasa .is-fit z ui-campy.js). Bez JS stoi min. 280 px, dołem. */
@media (min-width: 1024px) {
	.ui-cp-t.is-fit { align-self: stretch; grid-template-rows: minmax(400px, 1fr) auto; }
}
.ui-cp-t__go .ui-ic { color: var(--ui-gold); }
.ui-cp-t__bot { position: relative; display: grid; gap: 20px; padding: clamp(22px, 3vw, 30px); border-top: 1px solid var(--ui-hair-2); }
.ui-cp-t__meta { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: 18px 24px; }
.ui-cp-t__meta dt { font-size: var(--ui-fs-xs); color: var(--ui-snow-3); }
.ui-cp-t__meta dd { margin: 4px 0 0; }
/* Trzy wartości w jednym rytmie: ta sama wielkość i waga (cena bez osobnej, cienkiej wagi display) */
.ui-cp-t__meta b { display: block; font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; color: var(--ui-snow); }
.ui-cp-t__meta small { display: block; margin-top: 2px; font-size: var(--ui-fs-xs); color: var(--ui-snow-2); line-height: 1.45; }
/* Trzy kolumny się ściskały ("Folwark Cyziówka" w dwóch liniach, adres w trzech): na każdej szerokości miejsce
   na całą szerokość, pod nim czas i cena. */
.ui-cp-t__meta { grid-template-columns: minmax(0, 1fr) auto; }
.ui-cp-t__meta div:first-child { grid-column: 1 / -1; }
.ui-cp-t__meta div:last-child { text-align: right; }
@media (max-width: 599px) { .ui-cp-t__top { min-height: 220px; } }
.ui-cp-notify { grid-area: form; display: grid; gap: 18px; padding: clamp(20px, 2.6vw, 28px); border-radius: var(--ui-r-l); background: var(--ui-card); border: 1px solid var(--ui-line); box-shadow: var(--ui-sh-1); scroll-margin-top: calc(var(--ui-hd) + 24px); }
.ui-cp-notify:target { border-color: var(--ui-gold); }
.ui-cp-notify__h { display: flex; align-items: center; gap: 14px; }
.ui-cp-notify__h b { display: block; font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.ui-cp-notify__h small { display: block; font-size: var(--ui-fs-xs); color: var(--ui-ink-3); margin-top: 2px; }
.ui-cp-notify__i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; color: var(--ui-snow); background: var(--ui-ink); }
.ui-cp-notify__i .ui-ic { width: 20px; height: 20px; }
.ui-cp-notify .ui-nl__form { padding: 0; }
/* Ta sama akcja co biały przycisk w hero i finale: na jasnej karcie wariant ink, nie pomarańcz (pomarańcz
   tylko na rezerwacji, elewacja §1 zasada 7). */
.ui-cp-notify .ui-btn--cta { --b-bg: var(--ui-ink); --b-fg: var(--ui-snow); --b-bd: var(--ui-ink); box-shadow: none; }
.ui-cp-notify .ui-btn--cta:hover { --b-bg: #2a231c; --b-bd: #2a231c; box-shadow: none; }
.ui-cp-term__more { grid-area: form; }

/* ============ 07 PROWADZI EWA (D, płyta) ============ */
/* Druga pełna ciemna sekcja w drugiej połowie strony (rytm: płyta 02, bilet 06, płyta 07, finał).
   Elewacja: bez poziomic i bez dryfu w tle (płyta bez własnego ruchu, ziarno z .ui-plate). */
.ui-cp-ewa .ui-plate__glow { inset: auto auto -40% -15%; }
.ui-cp-ewa .ui-ewa__fig { max-width: 480px; }
.ui-cp-ewa .ui-ewa__win { background: var(--ui-noir-3, #1a1511); }
.ui-cp-ewa .ui-ewa__win { border-radius: var(--ui-r-l); }
.ui-cp-ewa .ui-ewa__win img { object-position: 50% 30%; }
.ui-cp-ewa .ui-laurel { top: auto; bottom: 16px; }
/* Cascade-guard: jasny tekst na ciemnej płycie */
.ui-cp-ewa, .ui-cp-ewa .ui-d2, .ui-cp-ewa h2 { color: var(--ui-snow); }
.ui-cp-ewa .ui-lead { color: var(--ui-snow-2); }
.ui-cp-ewa__txt .ui-head { margin-bottom: 24px; }
.ui-cp-ewa__txt .ui-lead { max-width: 28em; }
/* Trzy fakty z /o-mnie/ jako wiersze z węzłem na złotej nici */
.ui-cp-ewa__cred { position: relative; display: grid; margin-top: 28px; padding-left: 26px; max-width: 32em; }
.ui-cp-ewa__cred::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(var(--ui-gold), rgba(201, 164, 106, .25)); }
.ui-cp-ewa__cred li { position: relative; display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--ui-hair); }
.ui-cp-ewa__cred li:last-child { border-bottom: 0; }
.ui-cp-ewa__cred li::before { content: ""; position: absolute; left: -26px; top: 19px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--ui-gold); background: var(--ui-noir); }
.ui-cp-ewa__cred b { font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ui-gold); }
.ui-cp-ewa__cred span { font-size: 1.0625rem; line-height: 1.45; color: var(--ui-snow); text-wrap: pretty; }
.ui-cp-ewa__cta { margin-top: 28px; }

/* ============ 08 OPINIE ============ */
/* Runda 2: pas grupy wypadł (grupa raz na stronę, w hero). 08 i 09 na jednym tle (kość słoniowa), szew
   hairline z reguły rytmu niżej; dół 08 krótszy, żeby między opiniami a FAQ nie stał pusty pas. */
.ui-cp-op.ui-sec { padding-bottom: calc(var(--ui-sec) * .6); }
.ui-cp-op .ui-score { justify-self: end; }
@media (max-width: 899px) { .ui-cp-op .ui-score { justify-self: start; } }
.ui-cp-op__s { display: grid; gap: 4px; }
.ui-cp-op__src { margin-top: 20px; }
/* Źródło opinii pod nagłówkiem: opinie dotyczą kursów Ewy, nie campu */
.ui-cp-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); }
/* Desktop: karty opinii mają wysokość ciemnego cytatu, nawigacja karuzeli stoi na linii jego dolnej krawędzi */
@media (min-width: 1024px) {
	.ui-cp-op .ui-reviews > .ui-cp-op__q { display: grid; }
	.ui-cp-op .ui-car { grid-template-rows: minmax(0, 1fr) auto; }
	.ui-cp-op .ui-car__track { align-items: stretch; }
	.ui-cp-op .ui-rev { height: 100%; }
}

/* ============ 09 FAQ ============ */
.ui-cp-faq .ui-faqs__side .ui-head { margin-bottom: 28px; }
.ui-cp-faq .ui-faq__a .ui-cp-list { margin-top: 2px; }

/* ============ Rytm: sąsiednie sekcje tego samego tonu ============ */
/* 05 i 06 są obie jasne: bez podwójnego paddingu (wcześniej ok. 270 px pustki), cienka linia jako szew. */
.ui-cp .ui-sec[data-tone="light"]:not(.ui-sec--paper) + .ui-sec[data-tone="light"]:not(.ui-sec--paper) { padding-top: calc(var(--ui-sec) * .55); }
.ui-cp .ui-sec[data-tone="light"]:not(.ui-sec--paper) + .ui-sec[data-tone="light"]:not(.ui-sec--paper)::before {
	content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0; width: min(100% - 2 * var(--ui-g), var(--ui-max, 1240px)); border-top: 1px solid var(--ui-line);
}

/* ============ Finał (wspólny, footer-ui.php): rytm końca strony campu ============ */
/* Wspólne min-height 100svh zostawiało ok. 250 px pustej czerni pod CTA (tekst finału jest tu krótki). Na tej
   stronie blok ma wysokość treści i okna ensō; propozycja dla fundamentu w raporcie. */
@media (min-width: 1024px) {
	.ui-final__in--win { min-height: 0; padding-block: clamp(88px, 8vw, 128px) clamp(64px, 6vw, 96px); }
}

/* ============ Podgląd kadrów (#ui-viewer) ============ */
/* Jasny podpis w podglądzie: ui.css (.ui-viewer .ui-small). */
.ui-cp-vnav { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
.ui-cp-vnav[hidden] { display: none; }
.ui-cp-vnav .ui-hd__ib { width: 44px; height: 44px; color: var(--ui-snow); }
.ui-cp-vnav .ui-hd__ib:hover { background: rgba(246, 242, 236, .08); }
.ui-cp-vnav .ui-hd__ib:focus-visible { outline: 2px solid var(--ui-gold-hi); outline-offset: 2px; }
.ui-cp-vnav .ui-ic { width: 20px; height: 20px; }
.ui-cp-vnav__n { min-width: 4.2em; text-align: center; font-size: var(--ui-fs-s); font-weight: 600; color: var(--ui-snow-2); }
.ui-viewer.is-group .ui-viewer__stage { touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.ui-viewer.is-group .ui-viewer__stage img { -webkit-user-drag: none; }
.ui-viewer.is-group [data-close] { flex: none; }
.ui-viewer.is-group [data-vname] { flex: 1 1 12em; min-width: 0; }
@media (max-width: 599px) {
	.ui-viewer.is-group .ui-viewer__bar { flex-wrap: wrap; row-gap: 0; padding: 10px 6px 6px 16px; }
	.ui-viewer.is-group [data-vname] { flex-basis: 100%; order: -1; padding-right: 10px; }
	.ui-viewer.is-group .ui-cp-vnav { margin-left: -12px; }
	.ui-viewer.is-group [data-close] { margin-left: auto; }
}
/* Kadry i film z galerii campu: okno o szerokości medium (4:5, film 9:16), bez czarnych pasów po bokach.
   Klasę .ui-cp-pv daje ui-campy.js przy otwarciu z [data-cp-gal]. */
#ui-viewer.ui-cp-pv { --pv-h: min(calc(100svh - 160px), 860px); width: min(100% - 24px, calc(var(--pv-h) * .8)); }
#ui-viewer.ui-cp-pv.is-film { width: min(100% - 24px, calc(var(--pv-h) * .5625)); }
#ui-viewer.ui-cp-pv .ui-viewer__stage { max-height: none; min-height: 0; }
#ui-viewer.ui-cp-pv .ui-viewer__stage img { width: 100%; height: auto; max-width: none; max-height: var(--pv-h); aspect-ratio: 4 / 5; object-fit: cover; }
#ui-viewer.ui-cp-pv.is-film .ui-viewer__stage video { width: 100%; height: auto; max-width: none; max-height: var(--pv-h); aspect-ratio: 9 / 16; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
	.ui-viewer__stage img.is-in { animation: ui-cp-in .32s var(--ui-ease); }
}
@keyframes ui-cp-in { from { opacity: .35; } to { opacity: 1; } }

/* ============ Elewacja: ilustracje strony stoją narysowane ============ */
/* Na campach jedynym momentem ruchu jest kolaż 01 (inwentarz §3.0): rysunki .il (medaliony 04, certyfikat 03,
   laur 07) nie rysują się przy wejściu, sekcje wchodzą tylko .ui-rise. */
.ui-cp .il .il__d { transition: none; }
.js .ui-cp .il:not(.in) .il__d { stroke-dashoffset: 0; }
.js .ui-cp .il:not(.in) :is(.il__pt, .il__leaf) { opacity: 1; }

/* ============ Odbiór r6 (2026-10-12) ============ */
/* Finał: okno ensō jako koło wewnątrz pierścienia (maska enso-disk.svg zostawiała poszarpaną krawędź zdjęcia
   w przerwie pędzla u góry z lewej). Rozmiar i odsłona maski (mask-size 30% -> 100%) zostają z ui.css. */
.ui-final__disk { -webkit-mask-image: radial-gradient(circle closest-side, #000 calc(71% - 1px), transparent 71%); mask-image: radial-gradient(circle closest-side, #000 calc(71% - 1px), transparent 71%); }
/* Bez JS: formularz powiadomienia znika (POST bez nonce), zostaje mail i telefon */
.ui-cp-notify__ns { font-size: var(--ui-fs-s); line-height: 1.6; color: var(--ui-ink-2); }
.ui-cp-notify__ns a { color: var(--ui-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ui-gold); }
/* CTA „Powiadom mnie o kolejnym campie” (brief 1.6, pełne brzmienie): na 1440 obok niego „Zobacz program” jako link
   tekstowy (jak 1024 do 1365), żeby oba stały w jednym rzędzie; na telefonie pigułka mieści się w jednej linii. */
@media (min-width: 1366px) {
	.ui-cp-hero .ui-ph__cta { flex-wrap: nowrap; }
	.ui-cp-hero .ui-ph__cta .ui-cp-hero__prog { padding-inline: 10px; border-color: transparent; background: none; box-shadow: none; color: var(--ui-snow-2); }
	.ui-cp-hero .ui-ph__cta .ui-cp-hero__prog:hover { color: var(--ui-snow); background: none; }
}
@media (max-width: 599px) {
	.ui-cp-hero .ui-ph__cta .ui-btn--lg:not(.ui-cp-hero__prog), .ui-final__cta .ui-btn--lg[href="#powiadom"] { padding-inline: 18px; gap: 10px; font-size: .9688rem; white-space: nowrap; }
}
/* Hero od 1024 px: krótsze przejście maski (było 26% szerokości kadru), osoby przy lewej krawędzi kadru nie toną w czerni */
@media (min-width: 1024px) {
	.ui-cp-hero .ui-ph__media { -webkit-mask: linear-gradient(90deg, transparent, #000 13%); mask: linear-gradient(90deg, transparent, #000 13%); }
	.ui-cp-hero .ui-ph__media img { object-position: 55% 56%; }
}
/* 07: kadr Ewy przy pracy, w oknie zostają obie głowy */
.ui-cp-ewa .ui-ewa__win img { object-position: 50% 12%; }
@media (max-width: 374px) {
	.ui-cp-hero .ui-ph__cta .ui-btn--lg:not(.ui-cp-hero__prog), .ui-final__cta .ui-btn--lg[href="#powiadom"] { padding-inline: 14px; gap: 8px; font-size: .875rem; }
}
/* 01 od 1024 px: krótszy tor przypięcia stolika (ok. 1440 -> 1220 px), mniej pustego pola pod nagłówkiem i pod
   kolażem. Mały kadr jedzie wolniej (20vh zamiast 28vh), więc przy odstępie 8vh nie dogania średniego. */
@media (min-width: 1024px) {
	.ui-cp-col { padding-bottom: 3vh; }
	.ui-cp-col__head { margin-bottom: clamp(40px, 4vw, 64px); }
	.ui-cp-col__low { margin-top: 8vh; }
}
@supports (animation-timeline: view()) {
	@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
		html:not(.ui-lite) .ui-cp-col__low { --cp-v: 20vh; }
	}
}

/* ============ Odbiór r7 (2026-10-12) ============ */
/* 01 od 1024 px: małe kadry jadą tylko w dół od swojego miejsca (od +v do 0), nigdy wyżej. Przy wysokim oknie
   (iPad Pro pion, 1024x1366) symetryczny ruch ±14vh wciągał średni kadr ok. 190 px w górę, na lead pod H2.
   Mały kadr startuje niżej niż średni (24vh vs 14vh), więc odstęp między nimi tylko rośnie i maleje do bazowego. */
@keyframes ui-cp-pass-in { from { translate: 0 var(--cp-v, 0px); } to { translate: 0 0; } }
@supports (animation-timeline: view()) {
	@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
		html:not(.ui-lite) :is(.ui-cp-col__mid, .ui-cp-col__low) { animation-name: ui-cp-pass-in; }
		html:not(.ui-lite) .ui-cp-col__mid { --cp-v: min(14vh, 128px); }
		html:not(.ui-lite) .ui-cp-col__low { --cp-v: min(24vh, 216px); } /* limit: przy 1366 px wysokości mały kadr schodził na akapit pod kolażem */
	}
}
/* 07: plakietka laurowa wypada. H2 mówi to samo („Mistrzyni Świata”), a na telefonie leżała na dłoniach przy stole;
   miała też backdrop-filter spoza kontraktu (blur tylko header, pasek zakupu, karta hero, dok). */
.ui-cp-ewa .ui-laurel { display: none; }
/* Karta hero po edycji („Kolejny camp”): na telefonie miejsce w drugim wierszu pod datą, bez kropki na końcu wiersza */
@media (max-width: 599px) {
	.ui-cp-hcard--next .ui-cp-hcard__m .ui-sep { display: none; }
	.ui-cp-hcard--next .ui-cp-hcard__m > span:last-child { flex-basis: 100%; padding-left: 23px; }
}
/* Hero od 1024 px: krótsza maska i kadr przesunięty w prawo, twarze przy lewej krawędzi kadru nie są półcieniem */
@media (min-width: 1024px) {
	.ui-cp-hero .ui-ph__media { -webkit-mask: linear-gradient(90deg, transparent, #000 7%); mask: linear-gradient(90deg, transparent, #000 7%); }
	.ui-cp-hero .ui-ph__media img { object-position: 64% 56%; }
}

/* ============ v6 (2026-10-13): 03 galeria III edycji ============ */
/* Siatka bento. Telefon: 2 kolumny, rząd = szerokość kolumny (kwadraty), kafle b i w na całą szerokość (2:1),
   dense dopełnia pary. Od 760 px: 4 kolumny o stałej wysokości rzędu, b = 2x2, t = 1x2, w = 2x1, s = 1x1;
   kolejność w inc/ui/campy.php daje układ bez dziur. Rogi i ramka z .ui-win, kadr przez --pos. */
.ui-cp-gl__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((min(100vw - 2 * var(--ui-g), var(--ui-max)) - 8px) / 2); grid-auto-flow: row dense; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-cp-gl__i { min-width: 0; }
.ui-cp-gl__i--b, .ui-cp-gl__i--w { grid-column: span 2; }
.ui-cp-gl__b { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: zoom-in; }
.ui-cp-gl__b img { object-position: var(--pos, 50% 50%); }
.ui-cp-gl__b:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ui-cp-gl__b:hover img { transform: scale(1.04); } }
@media (min-width: 760px) {
	.ui-cp-gl__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 16vw, 232px); grid-auto-flow: row; gap: 12px; }
	.ui-cp-gl__i--b, .ui-cp-gl__i--t { grid-row: span 2; }
}