/* ==========================================================================
   ewardega ui v3 "Meridian": strona terminu (ui/termin.php)
   Wzorzec: docs/redesign/makiety/v3/final/termin.html, style.css sekcja 15.
   Fundament (tokeny, karty, bilet .ui-ticket, .ui-price-box, wiersze .ui-dr, FAQ, pasek zakupu) w ui.css.
   ========================================================================== */

/* 1. Hero terminu (ciemne): przygaszony kadr z maską z lewej, tekst + bilet zakupu ---------------- */
.ui-th { position: relative; isolation: isolate; color: var(--ui-snow); background: var(--ui-noir); overflow: clip; padding: calc(var(--ui-hd) + var(--ui-hero-pt)) 0 clamp(56px, 7vw, 96px); }
.ui-th::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("img/grain.webp") repeat 0 0 / 96px; opacity: .07; mix-blend-mode: screen; }
.ui-th__bg { position: absolute; inset: 0 auto 0 0; width: min(100%, 62vw); z-index: -2; }
.ui-th__bg picture { display: contents; }
.ui-th__bg img {
	width: 100%; height: 100%; object-fit: cover; opacity: .46;
	-webkit-mask: linear-gradient(90deg, #000 30%, transparent), linear-gradient(180deg, #000 55%, transparent); -webkit-mask-composite: source-in;
	mask: linear-gradient(90deg, #000 30%, transparent) intersect, linear-gradient(180deg, #000 55%, transparent);
}
/* Telefon i tablet (runda 3): kadr widoczny za nagłówkiem i danymi terminu (do biletu), w naturalnej skali. Wycinek -m
   (ewardega_ui_termin_kadr) ma motyw w prawej części i nad biletem, twarz najwyżej w prawym górnym rogu poza tekstem.
   Kontrast H1 i okruszków (min. 4,5:1) niesie zasłona od lewej i od góry (::after), nie przygaszenie całego kadru. */
@media (max-width: 1023px) {
	.ui-th__bg { width: 100%; height: clamp(560px, 150vw, 820px); }
	.ui-th__bg img {
		opacity: var(--tm-o, .9);
		-webkit-mask: linear-gradient(180deg, #000 55%, transparent 96%); mask: linear-gradient(180deg, #000 55%, transparent 96%);
	}
	.ui-th__bg::after {
		content: ""; position: absolute; inset: 0; pointer-events: none;
		background:
			linear-gradient(90deg, rgba(15, 13, 11, .74) 0%, rgba(15, 13, 11, .5) 52%, rgba(15, 13, 11, .08) 88%),
			linear-gradient(180deg, rgba(15, 13, 11, .62) 0, rgba(15, 13, 11, .3) 16%, rgba(15, 13, 11, 0) 28%);
	}
}
/* Desktop: tło hero bez zdjęcia (źródło <picture> od 1024 px to piksel, nic się nie pobiera); jedyny kadr stoi ostro
   w oknie pod danymi terminu, obok biletu (.ui-th__win). Bez filtrów CSS na zdjęciach (elewacja.md §1 zas. 3). */
@media (min-width: 1024px) { .ui-th__bg { display: none; } }
.ui-th .ui-plate__glow { inset: auto auto -40% -20%; }
.ui-th__in { display: grid; gap: 32px; margin-top: 20px; align-items: start; }
/* Desktop: eyebrow na linii górnej krawędzi biletu (jak makieta), bez pustej czerni między okruszkami a nagłówkiem */
@media (min-width: 1024px) { .ui-th { padding-bottom: clamp(48px, 5vw, 72px); } .ui-th__in { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 56px; margin-top: 40px; align-items: start; } .ui-th__copy { padding-top: 8px; } }
@media (min-width: 1280px) { .ui-th__in { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 72px; } }
.ui-th__copy { display: grid; gap: 22px; align-content: start; min-width: 0; }
@media (min-width: 1024px) {
	.ui-th__in { align-items: start; }
	.ui-th__copy { display: flex; flex-direction: column; gap: 26px; }
}
/* Okno kadru 16:10 (runda 2: pas ok. 2,5:1 z pionowego kadru pokazywał głównie ścianę). Kadry tm-* są poziomymi
   klatkami 1600x1000, więc okno pokazuje całą scenę. Kolumna z oknem jest wyższa niż bilet, więc bilet przykleja się
   pod nagłówkiem strony, dopóki okno nie przejedzie (bez JS). Stoi od pierwszej klatki (wejście krótkie §2.3). */
.ui-th__win { display: none; }
@media (min-width: 1024px) {
	.ui-th__win { display: block; flex: none; aspect-ratio: 16 / 10; margin: 6px 0 0; border-radius: var(--ui-r-l); box-shadow: 0 0 0 1px var(--ui-hair), 0 40px 80px -40px rgba(0, 0, 0, .75); }
	.ui-th .ui-tm-buy { position: sticky; top: calc(var(--ui-hd) + 20px); align-self: start; }
	.ui-th__win picture { display: contents; }
	.ui-th__win img { position: absolute; inset: 0; }
	.ui-th__win::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(15, 13, 11, .45)); }
	/* Termin pełny albo zamknięty: bilet bez ceny i formularza jest krótki (odbiór 2026-10-12: ok. 370 px pustej czerni
	   pod nim przy 1440). Niższe okno kadru i bilet na środku wysokości kolumny, więc hero się nie przechyla. */
	.ui-tm--off .ui-th__win { aspect-ratio: 21 / 9; }
	.ui-tm--off .ui-th .ui-tm-buy { align-self: center; }
}
.ui-th__name { display: block; }
.ui-th h1 { letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; } /* stopień: --ui-h1-page (ui.css 21) */
/* Desktop: stopień H1 z makiety terminu (do 72 px), nazwa kursu z biletem obok mieści się w jednej linii jak w makiecie */
@media (min-width: 1024px) {
	.ui-th h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); }
}
/* 1024-1279: węższy bilet, kolumna nagłówka szersza (przy 382 px nazwa kursu łamała się na trzy linie) */
@media (min-width: 1024px) and (max-width: 1279px) { .ui-th__in { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; } }
.ui-th__sub { display: block; margin-top: .3em; font-size: .56em; letter-spacing: -.03em; line-height: 1.12; color: var(--ui-snow-2); text-wrap: pretty; }
.ui-th__meta { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 28px; margin: 0; padding-top: 20px; border-top: 1px solid var(--ui-hair); max-width: 36rem; }
.ui-th__meta > div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.ui-th__meta dt { font-size: var(--ui-fs-xs); color: var(--ui-snow-3); }
.ui-th__meta dd { margin: 0; }
.ui-th__meta b { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .ui-th__meta { max-width: none; } } /* jedna prawa krawędź kolumny: linia danych, dowód i okno kadru */
.ui-th__meta .ui-st { margin-top: 2px; }
/* Telefon: dane terminu jako rząd chipów (dni, status; miasto jest już w podtytule H1), krótszy hero */
@media (max-width: 599px) {
	.ui-th__meta { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; border-top: 0; }
	.ui-th__meta > div { display: flex; align-items: center; min-height: 38px; padding: 6px 14px; border: 1px solid var(--ui-hair-2); border-radius: 999px; background: rgba(15, 13, 11, .5); }
	.ui-th__meta dt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
	.ui-th__meta b { font-size: var(--ui-fs-s); }
	.ui-th__meta .ui-st { margin: 0; }
	.ui-th__meta :is(.ui-th__m-city, .ui-th__m-pl) { display: none; } /* miasto i miejsce campu są w podtytule H1, pełny adres w bilecie */
}
.ui-th .ui-trust { margin-top: 2px; }
/* Telefon i tablet: bilet zaraz pod danymi terminu, pasek dowodu pod biletem (brief: karta, telefon, dowód) */
@media (max-width: 1023px) {
	.ui-th__in { gap: 22px; }
	.ui-th__copy { display: contents; }
	.ui-th__copy > .ui-trust { order: 2; margin-top: 10px; }
	.ui-th .ui-tm-buy { order: 1; margin-top: 6px; }
}

/* Komunikaty Woo (woocommerce_before_single_product) na ciemnym tle */
.ui-tm-notes:not(:has(li, .woocommerce-message, .woocommerce-info, .woocommerce-error)) { display: none; }
.ui-tm-notes :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	display: grid; gap: 4px; margin: 16px 0 0; padding: 14px 18px; list-style: none;
	font-size: var(--ui-fs-s); line-height: 1.5; color: var(--ui-snow);
	background: rgba(246, 242, 236, .06); border: 1px solid var(--ui-hair-2); border-left: 2px solid var(--ui-gold); border-radius: var(--ui-r);
}
.ui-tm-notes .woocommerce-error { border-left-color: #e0806f; }
.ui-tm-notes :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) li { margin: 0; }
.ui-tm-notes a { color: var(--ui-snow); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ui-gold); text-underline-offset: 3px; }
.ui-tm-notes .button { display: inline-flex; align-items: center; min-height: 44px; margin-right: 12px; }

/* 2. Bilet zakupu (aside.ui-tm-buy.ui-cert.ui-ticket): etykieta | odliczanie, data .ui-num | kurs, perforacja, kwoty
   i formularz Woo. Sygnatura strony (elewacja.md §3.3): płytka daty biletu nosi stałą nazwę przejścia tm-date, więc
   po kliknięciu wiersza terminu (harmonogram, kurs, "Inne terminy"; ui.js 22d) data przelatuje do biletu. -------- */
/* Perforacja w przepływie (runda 2, działa bez JS): bilet nie ma własnego tła ani maski; tło, ziarno, ramę hairline
   i półkoliste wycięcia niosą dwie części (__top: wycięcia w dolnych rogach, __bot: w górnych), a kreska perforacji
   to element między nimi. Wycięcia stoją zawsze dokładnie na linii perforacji, bez liczenia wysokości. */
.ui-tm-buy { position: relative; display: grid; color: var(--ui-snow); background: none; overflow: visible; isolation: auto; -webkit-mask: none; mask: none; }
.ui-tm-buy::before, .ui-tm-buy > .ui-cert-frame { display: none; }
.ui-tm-buy__top, .ui-tm-buy__bot { isolation: isolate; background: var(--ui-noir-2); }
.ui-tm-buy__top::before, .ui-tm-buy__bot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("img/grain.webp") 0 0 / 96px; opacity: .06; mix-blend-mode: screen; }
.ui-tm-buy__top::after, .ui-tm-buy__bot::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border: 1px solid rgba(201, 164, 106, .42); } /* jedna statyczna rama hairline na krawędzi biletu (runda 3: bez ramy odsuniętej o 10 px i bez ramy karty ceny; wycięcia perforacji przerywają ją po bokach) */
.ui-tm-buy__top {
	border-radius: var(--ui-r-l) var(--ui-r-l) 0 0;
	-webkit-mask: radial-gradient(circle var(--hole) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--hole) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
	mask: radial-gradient(circle var(--hole) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--hole) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.ui-tm-buy__top::after { inset: 0; border-bottom: 0; border-radius: var(--ui-r-l) var(--ui-r-l) 0 0; }
.ui-tm-buy__bot {
	position: relative; border-radius: 0 0 var(--ui-r-l) var(--ui-r-l);
	-webkit-mask: radial-gradient(circle var(--hole) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--hole) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
	mask: radial-gradient(circle var(--hole) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--hole) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
}
.ui-tm-buy__bot::after { inset: 0; border-top: 0; border-radius: 0 0 var(--ui-r-l) var(--ui-r-l); }
/* Karta ceny: samo tło, bez obramowania (jedna rama na bilecie) */
.ui-tm-buy .ui-price-box { border: 0; background: rgba(246, 242, 236, .045); }
.ui-tm-buy > .ui-ticket__perf { position: relative; top: auto; left: auto; right: auto; height: 0; margin: 0 var(--hole); border-top: 1.5px dashed rgba(201, 164, 106, .45); background: var(--ui-noir-2); }
.ui-tm-buy__top { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "row row" "date what"; gap: 18px 22px; align-items: center; padding: 24px 28px 32px; }
.ui-tm-buy__row { grid-area: row; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; min-width: 0; }
.ui-tm-buy__row .ui-label { font-size: var(--ui-fs-xs); }
.ui-tm-buy__date { grid-area: date; display: grid; justify-items: start; gap: 10px; padding-right: 22px; border-right: 1px solid var(--ui-hair-2); line-height: 1; view-transition-name: tm-date; }
.ui-tm-buy__date .ui-num { font-size: 4.5rem; }
@media (min-width: 1280px) { .ui-tm-buy__date .ui-num { font-size: 5.5rem; } }
.ui-tm-buy__date--long .ui-num { font-size: 2.75rem; letter-spacing: -.04em; }
.ui-tm-buy__date small { font-size: var(--ui-fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ui-snow-2); font-weight: 600; }
.ui-tm-buy__what { grid-area: what; display: grid; gap: 6px; min-width: 0; }
.ui-tm-buy__top:not(:has(.ui-tm-buy__date)) .ui-tm-buy__what { grid-column: 1 / -1; }
.ui-tm-buy__what > b { display: block; font-size: 1.25rem; font-weight: 400; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance; }
.ui-tm-buy__what > small { font-size: var(--ui-fs-s); color: var(--ui-snow-2); text-wrap: pretty; }
.ui-tm-buy__pl { display: block; color: var(--ui-snow); } /* długie miejsce (camp) w osobnej linii */
.ui-tm-nw { white-space: nowrap; }
.ui-tm-buy__bot { display: grid; gap: 16px; padding: 30px 28px 26px; }
@media (max-width: 479px) {
	.ui-tm-buy__date .ui-num { font-size: 4rem; }
	.ui-tm-buy__date--long .ui-num { font-size: 2.125rem; }
	.ui-tm-buy__date { padding-right: 16px; gap: 8px; }
	.ui-tm-buy__top { gap: 14px 16px; padding: 20px 20px 24px; }
	.ui-tm-buy__what > b { font-size: 1.125rem; }
	.ui-tm-buy__bot { padding: 24px 18px 20px; gap: 14px; }
	/* Kwoty ciaśniej: "Zapisz się z zadatkiem" na pierwszym ekranie 390x844 (elewacja.md §4.3) */
	.ui-tm-buy .ui-price-box { gap: 10px; padding: 14px 16px; }
}
/* Telefon: eyebrow znika (typ terminu i dni stoją w H1, chipach i bilecie), żeby CTA biletu weszło na pierwszy ekran */
@media (max-width: 599px) { .ui-th .ui-th__copy > .ui-eyebrow { display: none; } }
/* Telefon i tablet: nazwa kursu tylko dla czytników (stoi w H1 tuż nad biletem); obok daty miasto i dni */
@media (max-width: 899px) {
	.ui-tm-buy__name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
	.ui-tm-buy__what > small { font-size: 1rem; line-height: 1.45; color: var(--ui-snow); }
	.ui-tm-buy__what > small > .ui-tm-nw:first-child { display: block; }
	.ui-tm-buy__what > small > .ui-tm-nw:first-child + .ui-tm-sep { display: none; }
}
/* 2.2.1: do 360 px każda część w swoim wierszu, bez kropek (na 320 "pt-nd ·" zostawało samo na końcu wiersza) */
@media (max-width: 360px) {
	.ui-tm-buy__what > small > .ui-tm-nw { display: block; }
	.ui-tm-buy__what > small > .ui-tm-sep { display: none; }
}
/* Odliczanie do startu: złoty pierścień zamyka się wraz z datą (statyczny, liczy ui-termin.js 1b) */
.ui-tm-cd { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ui-fs-xs); color: var(--ui-snow-2); }
.ui-tm-cd[hidden] { display: none; }
.ui-tm-cd b { color: var(--ui-snow); font-weight: 600; }
.ui-tm-cd__ring { width: 22px; height: 22px; flex: none; transform: rotate(-90deg); }
.ui-tm-cd__ring circle { fill: none; stroke: var(--ui-hair-2); stroke-width: 2; }
.ui-tm-cd__ring .ui-tm-cd__arc { stroke: var(--ui-gold); stroke-linecap: round; }
/* Kwoty: mnożnik liczby miejsc i błysk liczby po zmianie */
.ui-tm-x { margin-left: 6px; color: var(--ui-gold); font-variant-numeric: tabular-nums; }
.ui-tm-buy [data-tm-v].is-new { animation: ui-tm-tick .5s var(--ui-ease); }
@keyframes ui-tm-tick { from { opacity: .2; transform: translateY(6px); } }
.ui-tm-buy .ui-price-box b[data-tm-v] { display: inline-block; }

/* Formularz Woo (form.cart): podpis | ilość w jednej linii, przycisk pod spodem; wtyczki na całą szerokość */
.ui-tm-form { display: grid; gap: 14px; }
.ui-tm-form .stock { display: none; }
.ui-tm-form form.cart { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 12px; margin: 0; }
.ui-tm-form form.cart > * { grid-column: 1 / -1; min-width: 0; }
.ui-tm-form form.cart > .ui-tm-qty__l { grid-column: 1; }
.ui-tm-form form.cart > .quantity { grid-column: 2; }
.ui-tm-form form.cart > .quantity:has(input[type="hidden"]) { display: none; }
.ui-tm-qty__l { display: grid; gap: 2px; font-size: var(--ui-fs-s); color: var(--ui-snow); }
.ui-tm-qty__l small { font-size: var(--ui-fs-xs); color: var(--ui-snow-3); }
.ui-tm-form .quantity { display: inline-flex; align-items: center; justify-self: end; min-height: 46px; border: 1px solid var(--ui-hair-2); border-radius: 999px; transition: border-color var(--ui-t1); }
.ui-tm-form .quantity:hover, .ui-tm-form .quantity:focus-within { border-color: rgba(246, 242, 236, .4); }
.ui-tm-form input.qty {
	width: 72px; height: 44px; margin: 0; padding: 0 6px; text-align: center; color: var(--ui-snow); background: transparent; border: 0; border-radius: 999px;
	font-weight: 600; font-size: 1.0625rem; line-height: 1; font-family: inherit; font-variant-numeric: tabular-nums; color-scheme: dark;
}
.ui-tm-form input.qty:focus-visible { outline: 2px solid var(--ui-gold-hi); outline-offset: 2px; }
.ui-tm-form .quantity.is-step input.qty { width: 44px; padding: 0; -moz-appearance: textfield; appearance: textfield; }
.ui-tm-form .quantity.is-step input.qty::-webkit-inner-spin-button, .ui-tm-form .quantity.is-step input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ui-qs { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: var(--ui-snow); background: transparent; cursor: pointer; transition: background-color var(--ui-t1), transform var(--ui-t2) var(--ui-spring); }
.ui-qs .ui-ic { width: 16px; height: 16px; }
.ui-qs:hover { background: rgba(246, 242, 236, .08); }
.ui-qs:active { transform: scale(.9); }
.ui-qs:disabled { opacity: .3; cursor: default; background: transparent; transform: none; }
/* Przycisk formularza (bez JS): wygląd .ui-btn--cta --lg --block */
.ui-tm-form .single_add_to_cart_button {
	display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; margin: 0; padding: 0 28px;
	border: 1px solid var(--ui-orange); border-radius: 999px; color: var(--ui-on-orange); background: var(--ui-orange);
	font-weight: 600; font-size: 1.0313rem; line-height: 1.1; font-family: inherit; letter-spacing: -.005em; text-align: center; cursor: pointer;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 12px 28px -14px rgba(239, 133, 11, .8);
	transition: background-color var(--ui-t1), border-color var(--ui-t1), transform var(--ui-t2) var(--ui-spring);
}
.ui-tm-form .single_add_to_cart_button:hover { background: var(--ui-orange-hi); border-color: var(--ui-orange-hi); }
.ui-tm-form .single_add_to_cart_button:active { transform: scale(.97); }
.ui-tm-form .single_add_to_cart_button:focus-visible { outline: 2px solid var(--ui-gold-hi); outline-offset: 3px; }
.ui-tm-form .single_add_to_cart_button:is(:disabled, .disabled) { opacity: .5; cursor: not-allowed; }
.ui-tm-form .single_add_to_cart_button.loading { opacity: .7; pointer-events: none; }
.ui-tm-go { margin-top: 0; }
.ui-tm-fine { margin: 0; font-size: var(--ui-fs-xs); line-height: 1.55; color: var(--ui-snow-3); text-align: center; text-wrap: pretty; }
.ui-tm-tel { justify-self: center; font-size: var(--ui-fs-s); }
.ui-tm-tel .ui-ic { color: var(--ui-gold); }
/* Termin pełny albo zamknięty */
.ui-tm-off { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ui-snow-2); text-wrap: pretty; }
.ui-tm-acts { display: grid; gap: 10px; justify-items: center; }
.ui-tm-acts .ui-link { margin-top: 4px; }
#powiadom { scroll-margin-top: calc(var(--ui-hd) + 24px); }
.ui-tm-nl { display: grid; gap: 12px; padding: 18px; border-radius: var(--ui-r); background: rgba(246, 242, 236, .04); border: 1px solid var(--ui-hair); }
.ui-tm-nl .ui-input { min-height: 50px; }
.ui-tm-nl .ui-check { font-size: var(--ui-fs-xs); }
.ui-tm-nl .ui-check a { color: var(--ui-snow); text-decoration: underline; text-underline-offset: 3px; }
.ui-tm-nl .ui-msg.is-ok { color: var(--ui-free-d); }
.ui-tm-nl .ui-msg.is-err { color: #f0a493; }
/* Formularz wysyła tylko newsletter.js (AJAX). Bez działającego JS zwykły POST dawał białą stronę "0", więc wtedy
   formularz znika, a zostaje zdanie z e-mailem i telefonem (ewardega_ui_termin_notify, ta sama kotwica #powiadom). */
.ui-tm-nl-alt { display: none; margin: 0; font-size: var(--ui-fs-s); line-height: 1.6; color: var(--ui-snow-2); text-wrap: pretty; }
.ui-tm-nl-alt a { color: var(--ui-snow); text-decoration: underline; text-underline-offset: 3px; }
html:not(.ui-js) .ui-tm-nl, html:not(.ui-js) .ui-tm-nlgo { display: none; }
html:not(.ui-js) .ui-tm-nl-alt { display: block; }
.ui-tm--off .ui-tm-buy .ui-price-box { opacity: .8; }

/* Wejście krótkie biletu (fundament .ui-enter, --ui-spring-calm od 500 ms): telefon z dołu, desktop z prawej.
   Rama i perforacja stoją. Po przejściu z wiersza terminu (html.ui-tm-vt, ui-termin.js 0) bilet stoi od razu,
   bo jego data właśnie przyleciała w przejściu i nie może zniknąć pod opacity wejścia. */
.ui-tm-buy.ui-enter { --enter-y: 24px; }
@media (min-width: 1024px) { .ui-tm-buy.ui-enter { --enter-x: 24px; --enter-y: 0; } }
html.ui-tm-vt .ui-tm-buy.ui-enter { animation: none; }
/* Lot daty (VT tm-date, runda 2): stary raster płytki z listy (ciemny tekst, powiększany ok. 2,3x) gaśnie w 120 ms,
   nowa złota data leci bez przenikania, więc w połowie przejścia nie ma rozmytej kopii nad perforacją. */
::view-transition-old(tm-date) { animation: ui-vt-out .12s ease both; }
::view-transition-new(tm-date) { animation: none; }
::view-transition-image-pair(tm-date) { isolation: auto; }
/* Ta sama sygnatura bez przejścia (wejście z reklamy, z zewnątrz): data biletu wchodzi maską od dołu po wejściu
   biletu. Bez JS, przy reduced motion i po przejściu stron (data właśnie przyleciała) stoi od razu. */
@media (prefers-reduced-motion: no-preference) {
	.js .ui-tm-buy__date .ui-num { animation: ui-tm-date .8s var(--ui-ease-out-expo) .62s both; }
	html.ui-tm-vt .ui-tm-buy__date .ui-num { animation: none; }
}
@keyframes ui-tm-date { from { clip-path: inset(100% 0 -10% 0); translate: 0 .18em; } to { clip-path: inset(-10% 0 -10% 0); translate: 0 0; } }

/* Camp na telefonie: w bilecie sama nazwa miejsca ("Folwark Cyziówka", jak miasto na kursie), bez adresu; pełny adres
   jest w danych terminu pod H1 */
@media (max-width: 479px) {
	.ui-tm--camp .ui-tm-pl-a { display: none; }
	.ui-tm--off .ui-tm-buy__bot { padding-top: 20px; }
	.ui-tm-buy .ui-tm-nl { gap: 10px; padding: 14px; }
}

/* 3. 01 Inne terminy: nagłówek z linkami po prawej ------------------------------------------------- */
.ui-tm-ohead__more { margin: 0; }
@media (min-width: 900px) { .ui-tm-ohead__more { justify-self: end; align-self: end; justify-content: flex-end; } }
@media (max-width: 599px) { .ui-tm-ohead__more { display: grid; gap: 4px; justify-items: start; } }
/* Nazwa kursu w wierszu terminu: cel 44 px (fundament daje 40 px) */
.ui-tm-list .ui-dr__main a { min-height: 44px; }
/* Wiersz innego terminu: to zawsze ten sam kurs, więc w każdej szerokości główną linią jest miasto (nazwa kursu
   zostaje dla czytników), a w kolumnie miasta stoją dni tygodnia. */
.ui-dr__main a > .ui-tm-dr__c { display: none; } /* fundament: .ui-dr__main a > span { display: inline } */
.ui-tm-list .ui-dr__main a > .ui-tm-dr__c { display: inline; }
.ui-tm-list .ui-tm-dr__n { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.ui-tm-list .ui-dr__city { display: none; }
.ui-tm-list .ui-dr__days::before { content: none; } /* kropka po mieście zostawała na początku linii dni */
@container (max-width: 559px) {
	.ui-tm-list .ui-dr { grid-template-areas: "dp main main main" "dp st st st" "dp days days days" "dp price price act"; }
}
@container (min-width: 560px) {
	.ui-tm-list .ui-dr { grid-template-areas: "dp main main act" "dp days days act" "dp price st act"; }
}
@container (min-width: 760px) {
	.ui-tm-list .ui-dr { grid-template-areas: "dp main days price act" "dp main days st act"; }
	.ui-tm-list .ui-dr__days { align-self: center; }
}
@container (min-width: 1080px) {
	.ui-tm-list .ui-dr { grid-template-columns: 72px minmax(0, 1.4fr) minmax(0, 1fr) 112px 176px 172px; grid-template-areas: "dp main days price st act"; }
}
/* Krótka lista (1-2 terminy): mniejszy dół sekcji, bez pustego pasa przed 02 */
#inne-terminy:has(.ui-tm-list > li:nth-child(-n+2):last-child) { padding-bottom: clamp(48px, 6vw, 80px); }

/* 4. 02 Organizacja: telefon = jedna karta z wierszami (jak ustawienia w aplikacji), desktop = 4 karty --- */
.ui-org { display: grid; gap: 14px; }
.ui-org__c { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px; }
.ui-org__i { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; color: var(--ui-gold-ink); background: var(--ui-ivory); box-shadow: 0 0 0 1px var(--ui-line); }
.ui-org__i .ui-ic { width: 22px; height: 22px; }
.ui-org__c .ui-label { color: var(--ui-gold-ink); }
.ui-org__c b { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.ui-org__c p, .ui-org__c li { margin: 0; font-size: var(--ui-fs-s); line-height: 1.5; color: var(--ui-ink-2); }
.ui-org__c ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-org__c li { display: flex; gap: 10px; }
.ui-org__c li::before { content: ""; width: 12px; height: 0; margin-top: .75em; border-top: 1px solid var(--ui-gold); flex: none; }
.ui-org__c .ui-org__given { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ui-line); color: var(--ui-ink-2); }
.ui-org__given .ui-ic { flex: none; width: 16px; height: 16px; margin-top: .15em; color: var(--ui-gold-ink); }
/* Karta "Termin": kafelki dni z daty sesji (dzień tygodnia, dzień, miesiąc), bez przypisywania technik do dni */
.ui-tm-days { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; margin: 4px 0 2px; padding: 0; list-style: none; max-width: 360px; }
.ui-org__c .ui-tm-days li { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 11px; line-height: 1; border: 1px solid var(--ui-line); border-radius: var(--ui-r); background: var(--ui-ivory); }
.ui-org__c .ui-tm-days li::before { content: none; }
.ui-tm-days small { font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-gold-ink); }
.ui-tm-days b { font-size: 1.75rem; font-weight: 300; letter-spacing: -.03em; color: var(--ui-ink); }
.ui-tm-days span { font-size: var(--ui-fs-xs); color: var(--ui-ink-2); }
@media (min-width: 900px) {
	.ui-org { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
	.ui-org__c--days { grid-column: span 2; }
	.ui-org__c { transition: transform var(--ui-t2) var(--ui-ease), box-shadow var(--ui-t2) var(--ui-ease); }
	.ui-org__c:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(40, 28, 14, .05), 0 22px 44px -22px rgba(40, 28, 14, .28); }
}
/* Od 1280 px "Co zabrać" na dwa tory (punkty w jednej linii): karty mają zbliżoną wysokość, bez pustych dołów */
@media (min-width: 1280px) {
	.ui-org__c--prep { grid-column: span 2; }
}
@media (max-width: 899px) {
	.ui-org { gap: 0; background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: var(--ui-r-l); box-shadow: var(--ui-sh-1); overflow: hidden; }
	.ui-org__c { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 18px 18px 20px; background: none; border: 0; border-radius: 0; box-shadow: none; }
	.ui-org__c + .ui-org__c { border-top: 1px solid var(--ui-line); }
	.ui-org__c > :not(.ui-org__i) { grid-column: 2; }
	.ui-org__i { grid-row: 1 / span 4; width: 44px; height: 44px; margin: 0; }
	.ui-org__i .ui-ic { width: 20px; height: 20px; }
	.ui-org__c .ui-label { margin-top: 2px; }
	.ui-org__c ul { margin-top: 4px; }
}

/* 5. 03 O szkoleniu: nagłówek i kadr kursu w ciemnym oknie z ilustracją techniki, obok opis Woo ---------- */
.ui-tm-about { align-items: start; }
.ui-tm-about__side { display: grid; gap: 28px; align-content: start; min-width: 0; }
.ui-tm-about__head { margin-bottom: 0; }
.ui-tm-about__head .ui-btn { justify-self: start; }
.ui-tm-about__fig { margin: 0; aspect-ratio: 16 / 11; border-radius: var(--ui-r-l); }
.ui-tm-about__fig img { position: absolute; inset: 0; object-position: 50% 35%; }
@media (min-width: 900px) and (max-width: 1023px) {
	.ui-tm-about__side { position: sticky; top: calc(var(--ui-hd) + 24px); }
	.ui-tm-about__fig { aspect-ratio: 4 / 3; max-width: 460px; }
}
/* Od 1024 px: nagłówek przyklejony po lewej, kadr szeroko pod opisem w prawej kolumnie (krótki opis nie zostawia
   pustego papieru pod listą, a zdjęcie domyka tekst zamiast wisieć pod przyciskiem) */
@media (min-width: 1024px) {
	.ui-tm-about { grid-template-rows: auto 1fr; row-gap: 40px; }
	.ui-tm-about__side { display: contents; }
	.ui-tm-about__head { grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--ui-hd) + 24px); }
	.ui-tm-prose { grid-column: 2; grid-row: 1; }
	.ui-tm-about__fig { grid-column: 2; grid-row: 2; align-self: start; width: 100%; max-width: none; aspect-ratio: 16 / 10; }
	.ui-tm-about .ui-tm-prose { max-width: none; } /* opis i kadr na tej samej prawej krawędzi co karty i wiersze terminów */
}
@media (hover: hover) and (min-width: 900px) { .ui-tm-about__fig:hover img { transform: scale(1.03); } }
/* Camp: para pionowych kadrów 4:5 (źródła 720x900; w szerokiej ramie 16:10 były rozciągnięte i ucięte). Od 1024 px para
   stoi w lewej kolumnie pod przyciskiem i razem z nagłówkiem przykleja się przy długiej liście technik (runda 3: pod H2
   zostawało ok. 900 px pustego tła). */
.ui-tm-about__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ui-tm-about .ui-tm-about__fig--pion { aspect-ratio: 4 / 5; width: 100%; max-width: none; }
@media (min-width: 1024px) {
	.ui-tm-about:has(.ui-tm-about__pair) .ui-tm-about__side { display: grid; gap: 32px; grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--ui-hd) + 24px); }
	.ui-tm-about:has(.ui-tm-about__pair) .ui-tm-about__head { position: static; grid-row: auto; }
	.ui-tm-about:has(.ui-tm-about__pair) .ui-tm-prose { grid-row: 1 / span 2; }
	.ui-tm-about__pair { gap: 16px; }
	.ui-tm-about__pair .ui-tm-about__fig { grid-column: auto; grid-row: auto; }
}
/* v4: pętla technik (ewardega_ui_termin_loop): poster <picture> pod wideo, wideo widoczne dopiero po "playing"
   (ui.js 9 dodaje .is-on). Telefon do 767 px: kadr 4:5 (plik -m), ten sam próg co data-loop-m w ui.js. */
.ui-tm-about__fig--loop img, .ui-tm-about__fig--loop video { position: absolute; inset: 0; object-position: 50% 40%; }
.ui-tm-about__fig--loop video { opacity: 0; }
.ui-tm-about__fig--loop video.is-on { opacity: 1; }
@media (max-width: 767px) { .ui-tm-about .ui-tm-about__fig--loop { aspect-ratio: 4 / 5; width: 100%; max-width: 480px; } }
@media (hover: hover) and (min-width: 900px) { .ui-tm-about__fig--loop:hover video { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .ui-tm-about__fig--loop video { display: none; } }

/* 03 jako ciemna płyta: tekst opisu w śniegu, linie listy we włosie; pion płyty o ok. 30% niższy niż fundament
   (runda 3: ok. 620 px czerni przy 3 punktach listy) */
.ui-plate .ui-tm-prose > p:first-child, .ui-plate .ui-tm-prose ul li { color: var(--ui-snow); }
.ui-plate .ui-tm-prose ul li { border-color: var(--ui-hair); }
#o-szkoleniu.ui-plate.ui-sec { padding-block: calc(var(--ui-sec) * .58); }
.ui-plate .ui-tm-about__fig { box-shadow: 0 0 0 1px var(--ui-hair), 0 40px 80px -40px rgba(0, 0, 0, .8); }
.ui-tm-prose { max-width: 40em; }
@media (min-width: 900px) { .ui-tm-prose { padding-top: 6px; } }
.ui-tm-prose > p:first-child { font-size: var(--ui-fs-lead); line-height: 1.6; color: var(--ui-ink); }
.ui-tm-prose ul { margin: 0; padding: 0; list-style: none; }
.ui-tm-prose ul li { padding: 12px 0; border-bottom: 1px solid var(--ui-line); color: var(--ui-ink); }
.ui-tm-prose ul li:first-child { border-top: 1px solid var(--ui-line); }
/* Punkt listy jako blok z kreską z lewej (fundament: flex, który rozcinał "<strong>Nazwa</strong>: opis" na kolumny) */
.ui-tm-prose ul > li { display: block; position: relative; padding-left: 26px; }
.ui-tm-prose ul > li::before { position: absolute; left: 0; top: calc(12px + .8em); height: 0; margin: 0; background: none; border-top: 1px solid var(--ui-gold); } /* ramka przyciąga się do siatki pikseli: każda kreska równie ostra */
@media (max-width: 599px) { .ui-tm-prose { max-width: none; } .ui-tm-prose li { text-wrap: wrap; } }
/* Od 1024 px lista od 4 punktów w dwóch kolumnach (krótsza płyta, mniej pustego dołu); kreska nad pierwszym wierszem
   obu kolumn. 3 punkty zostają w jednej kolumnie: wysokość wyrównuje rysunek po lewej. */
@media (min-width: 1024px) {
	.ui-tm-prose ul:has(> li:nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
	.ui-tm-prose ul:has(> li:nth-child(4)) > li:nth-child(2) { border-top: 1px solid var(--ui-line); }
	.ui-plate .ui-tm-prose ul:has(> li:nth-child(4)) > li:nth-child(2) { border-color: var(--ui-hair); }
}

/* 6. 04 Opinie: etykieta źródła tylko od 600 px (na telefonie łamała rozdział na dwie linie) */
@media (max-width: 599px) { #opinie .ui-chap__x { display: none; } }
/* Karta opinii bez stałej wysokości (fundament 260 px): wysokość toru wyznacza najdłuższy cytat, autor na dole */
#opinie .ui-rev { min-height: 0; }
/* Desktop: ciemny cytat i karuzela kończą się na jednej linii (karty na pełną wysokość, kropki na dole),
   cytat o stopień mniejszy, żeby ciemna karta nie przerastała kart obok */
@media (min-width: 1024px) {
	#opinie .ui-reviews > .ui-rise { display: grid; }
	#opinie .ui-car { grid-template-rows: minmax(0, 1fr) auto; }
	#opinie .ui-bigq blockquote p { font-size: clamp(1.375rem, .95rem + .85vw, 1.875rem); }
}

/* 7. 05 FAQ */
.ui-tm-faq__head { margin-bottom: 24px; }

/* Jedna linia pod leadem finału terminu (ui/termin.php, extra; odbiór 2026-10-12 zamiast kroków 01-03): zadatek i dojazd
   albo link do harmonogramu przy campie po terminie. Pod hairline, wyśrodkowana jak finał, od 1024 px przy oknie do lewej. */
.ui-final .ui-tm-steps1 { max-width: 34rem; margin: 0 auto; padding-top: 14px; border-top: 1px solid var(--ui-hair-2); font-size: var(--ui-fs-xs); line-height: 1.55; color: var(--ui-snow-2); text-align: center; text-wrap: pretty; }
@media (min-width: 1024px) { .ui-final__in--win .ui-tm-steps1 { margin-inline: 0; text-align: left; } }
/* Finał na telefonie: przyciski w jednej kolumnie na całą szerokość */
@media (max-width: 479px) {
	.ui-final__cta { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; width: 100%; }
	.ui-final__cta .ui-btn { width: 100%; }
}
/* "Powiadom mnie o kolejnym campie" (bilet i finał campu): poniżej 480 px widoczne "Powiadom mnie", pełna nazwa dla czytników */
@media (max-width: 479px) {
	.ui-tm-long { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* 8. Pasek zakupu: status tylko od 480 px (fundament: .ui-buybar__opt) */
.ui-tm-bar small .ui-st { flex: none; }

/* 9. Ograniczony ruch: kwoty zmieniają się bez animacji */
@media (prefers-reduced-motion: reduce) {
	.ui-tm-buy [data-tm-v].is-new { animation: none; }
	.ui-qs, .ui-org__c { transition: none; }
}

/* 10. Pasek ogłoszeń "W Solcu Kujawskim nocleg i wyżywienie w cenie" (header-ui.php) tylko na terminie w Solcu:
   na terminie w innym mieście przeczył karcie "Nocleg" ("Polecimy sprawdzone noclegi w pobliżu"). */
body:has(.ui-tm[data-solec="0"]) .ui-promo { display: none; }

/* 11. Finał: okno ensō pełnym kołem (odbiór 2026-10-12). Maska fundamentu svg/enso-disk.svg ma w otwarciu pierścienia
   krawędź ze schodków (ścieżka z całkowitych współrzędnych), a suche kreski .il__dry wisiały obok jak "<". Na terminie
   dysk to gładkie koło o promieniu dysku z maski (91 z 120 jednostek = 76%), pędzel i otwarcie zostają w samym
   pierścieniu .ui-final__ring. Odsłona (mask-size 30% -> 100%, ui.css 22.11) działa bez zmian. Propozycja dla
   fundamentu: przerysować enso-disk.svg krzywymi i usunąć .il__dry z otwarcia, wtedy ten blok można zdjąć. */
.ewa-ui--termin .ui-final__disk {
	-webkit-mask-image: radial-gradient(closest-side, #000 calc(76% - .5px), transparent 76%);
	mask-image: radial-gradient(closest-side, #000 calc(76% - .5px), transparent 76%);
}
.ewa-ui--termin .ui-final__ring .il__dry { display: none; }

/* 12. Okruszki: "Start" ma cel 44 px (ui.css), ale tekst stoi do lewej, więc odstęp przed pierwszą kropką był większy
   niż przed drugą. Pole klikania zostaje 44 px, wystaje pod odstęp ujemnym marginesem (kropki są tylko ozdobą). */
.ui-th .ui-crumbs a:first-child { min-width: 0; padding-inline-end: 14px; margin-inline-end: -14px; }

/* 13. Finał z oknem ensō na desktopie: bez min-height 880 px (pod przyciskami zostawało ok. 250 px pustej czerni),
   wysokość niesie dysk i tekst, dolny oddech mniejszy niż górny. Propozycja dla fundamentu: to samo w ui.css 22.11. */
@media (min-width: 1024px) {
	.ewa-ui--termin .ui-final__in--win { min-height: 0; padding-block: clamp(96px, 9vw, 136px) clamp(64px, 6vw, 88px); }
}

/* 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); }