/* Landing Ośrodka w Turzy (page-osrodek-w-turzy.php). Ładowany tylko na tej stronie. Tokeny i przyciski z style.css. */

/* Otwarcie: tytuł i opis na niebie zdjęcia, przyciski na dole kadru. Zdjęcie w naturalnych kolorach, bez nakładki i filtrów.
   Czytelność daje kadr (object-position osobno dla telefonu, tabletu i komputera) i jasna poświata pod literami.
   Kontrast na pikselach zdjęcia mierzy bin/kontrast-hero.py. Wysokość rośnie z szerokością okna, żeby kadr nie ucinał siedzących. */
.tz-hero{position:relative;height:clamp(540px,47vw,min(900px,100vh - 180px));max-width:1920px;margin:0 auto;overflow:hidden;background:#a9cfe0}
.tz-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0}
.tz-hero-t{position:absolute;left:0;right:0;top:44px}
.tz-hero h1{font:700 54px/1.06 var(--naglowki);color:var(--noc);margin:0 0 14px;text-shadow:0 0 18px rgba(255,255,255,.55)}
.tz-hero-t p{font:500 20px/1.5 var(--tekstowy);color:#0E1A20;max-width:25em;margin:0;text-shadow:0 0 12px rgba(255,255,255,.75),0 0 3px rgba(255,255,255,.6)}
.tz-hero-k{position:absolute;left:0;right:0;bottom:40px;display:flex;flex-wrap:wrap;gap:12px}
.tz-biala{background:#fff;border-color:#fff;color:var(--granat)}
.tz-biala:hover{background:var(--granat);border-color:var(--granat);color:#fff}

/* Wspólne */
.tz-naglowek{margin:0 0 36px}
.tz-naglowek .pod{margin:0;font-size:19px;max-width:38em}
.sek h3{font:700 21px/1.3 var(--naglowki);margin:0 0 12px}
.sek p{max-width:38em}
.sek p a:not(.kn),.sek li a,.tz-plan a,.tz-terminy a,.fakty a{color:var(--czerwien);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.fakty a{text-decoration:none}
.tz-ukr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tz-ciag{padding-top:0}
.tz-dwa{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px}
.tz-dwa p{margin:0}
.tz-pod-gal{margin:28px 0 0}
.tz-lista{margin:0;padding:0 0 0 1.1em}
.tz-lista li{margin:0 0 8px;padding-left:2px}
.tz-lista li::marker{color:var(--szary)}
.tz-det{border-top:1px solid #D9DCE0;border-bottom:1px solid #D9DCE0;margin:24px 0 0}
.tz-det summary{cursor:pointer;padding:16px 0;font:600 17px/1.3 var(--naglowki);color:var(--granat)}
.tz-det summary:hover{color:var(--czerwien)}
.tz-det>.tz-lista{margin:0 0 18px}

/* Zdjęcia. Siatka: gęste kadry bez podpisu pod miniaturą (opis w alt i w powiększeniu). Foty: większe zdjęcia z podpisem. */
.tz-siatka{display:grid;gap:8px}
.tz-siatka figure,.tz-foty figure,.tz-fig{margin:0;position:relative}
.tz-siatka .f{aspect-ratio:4/3;border-radius:2px}
.tz-siatka img,.tz-foty img,.tz-fig img{display:block;width:100%;height:100%;object-fit:cover}
.tz-piec{grid-template-columns:repeat(5,1fr)}
.tz-cztery{grid-template-columns:repeat(4,1fr)}
.tz-cztery .f{aspect-ratio:1}
.tz-foty{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 20px}
.tz-foty .f{aspect-ratio:4/3}
.tz-kwadraty .f{aspect-ratio:1}
.tz-foty figcaption,.tz-fig figcaption{font-size:14px;color:var(--szary);margin:8px 0 0}
#zazen .tz-foty{margin-top:40px}
.tz-szerokie{grid-column:span 2;display:flex;flex-direction:column}
.tz-foty .tz-szerokie .f{aspect-ratio:auto;flex:1;min-height:0;position:relative}
.tz-szerokie .f img{position:absolute;inset:0}
.tz-pary{grid-template-columns:1fr 1fr;margin:36px 0 0}
.tz-f43 .f{aspect-ratio:4/3}

/* Praca, kuchnia, wezwanie do wsparcia */
.sek .tz-pod-h{margin:52px 0 8px}
.tz-pod-p{margin:0 0 24px;max-width:44em}
.tz-wezwanie{margin:44px 0 0}
.tz-wezwanie p{font:600 21px/1.4 var(--naglowki);color:var(--granat);margin:0;max-width:30em}

/* Przyjazd */
.tz-plan li,.tz-terminy li{grid-template-columns:150px 1fr;border-color:#D9DCE0}
.tz-terminy li{grid-template-columns:190px 1fr}
.tz-terminy span{color:var(--szary)}
.tz-plan b,.tz-terminy b{white-space:normal}
.tz-zapis{margin:24px 0 0}

/* Dojazd */
.tz-dojazd{display:grid;grid-template-columns:1.7fr 1fr;gap:48px;align-items:start}
.tz-mapa{position:relative;border-radius:4px;overflow:hidden;background:var(--jasny);aspect-ratio:16/9}
.tz-mapa img,.tz-mapa iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.tz-mapa-kn{position:absolute;left:16px;bottom:16px}
.tz-mapa-a{position:absolute;right:0;bottom:0;background:rgba(255,255,255,.85);font-size:12px;padding:2px 8px;color:var(--tekst)}
.tz-adr{font:600 19px/1.5 var(--naglowki);color:var(--granat)}
.tz-kn3{display:grid;gap:10px;margin:20px 0 0}
.tz-kn3 .kn{text-align:center}
.tz-wskazowki{margin:40px 0 0}

/* Film: kadr z biblioteki, odtwarzacz YouTube wstawiany po kliknięciu (zazen.js) */
.tz-film{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center;margin:28px 0 0}
.tz-film .nagranie .graj::before{width:48px;height:48px;margin:-24px 0 0 -24px;background-size:24px}
.tz-film.gra{grid-template-columns:1fr}
.tz-film-t{font-size:15px;color:var(--szary);margin:0}
.tz-film-t b{display:block;font:700 17px/1.3 var(--naglowki);color:var(--granat);margin-bottom:4px}

/* Postępy prac: oś czasu. Data po lewej, pionowa kreska z punktem, treść wpisu po prawej */
.tz-postepy{max-width:860px}
.tz-rok{font:700 30px/1.1 var(--naglowki);color:var(--czerwien);margin:22px 0 14px}
.tz-postepy>.tz-rok:first-child{margin-top:0}
.tz-os{list-style:none;margin:0;padding:0}
.tz-os li{display:grid;grid-template-columns:150px 1fr}
.tz-os time{font:600 15px/1.65 var(--naglowki);color:var(--granat);padding:1px 20px 0 0;text-align:right}
.tz-os li>div{position:relative;border-left:2px solid #C9CED4;padding:0 0 26px 28px}
.tz-os li:last-child>div{padding-bottom:6px}
.tz-os li>div::before{content:"";position:absolute;left:-7px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--granat);box-shadow:0 0 0 4px var(--jasny)}
.tz-os h4{font:700 17px/1.4 var(--naglowki);color:var(--granat);margin:0 0 2px}
.tz-os p{margin:0}
.tz-wpis-f{margin:14px 0 0;max-width:420px}
.tz-wpis-f figure{margin:0}
.tz-wpis-f .f{border-radius:4px}
.tz-wpis-f img{display:block;width:100%;height:auto}
.tz-wpis-f.kilka{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:520px}
.tz-wpis-f.kilka .f{aspect-ratio:4/3}
.tz-wpis-f.kilka img{height:100%;object-fit:cover}
.tz-starsze{margin-top:10px}
.tz-przedpo{display:grid;grid-template-columns:340px 1fr;gap:36px;align-items:center;margin:44px 0 0}
.tz-przedpo .f{background:none}
.tz-przedpo img{height:auto}
.tz-zbieramy,.tz-plany{margin:48px 0 0}
.tz-po{margin:36px 0 0}

/* Wsparcie */
.tz-wsparcie{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:start}
.tz-przelew{background:var(--jasny);border-radius:4px;padding:32px}
.tz-przelew dl{margin:0}
.tz-przelew dl>div{padding:16px 0;border-top:1px solid var(--linia)}
.tz-przelew dl>div:first-child{border-top:0;padding-top:0}
.tz-przelew dt{font-size:14px;color:var(--szary);margin:0 0 4px}
.tz-przelew dd{margin:0;display:flex;justify-content:space-between;align-items:center;gap:16px;font:600 17px/1.4 var(--naglowki);color:var(--granat)}
.tz-nr{font-variant-numeric:tabular-nums;font-size:19px}
.tz-kop{flex:none;font:600 14px/1 var(--naglowki);padding:11px 14px;min-height:44px;border-radius:4px;border:2px solid var(--granat);background:#fff;color:var(--granat);cursor:pointer}
.tz-kop:hover,.tz-kop.ok{background:var(--granat);color:#fff}
.tz-stan{min-height:1.5em;margin:12px 0 0;font-size:15px;color:var(--granat)}
.tz-obok h3{margin-top:28px}
.tz-obok h3:first-child{margin-top:0}
.tz-dziekujemy{margin:40px 0 0;font:600 21px/1.4 var(--naglowki);color:var(--granat)}

/* Tablet: wyższy kadr otwarcia, żeby pod tekstem zostało niebo, a po prawej siedzący */
@media (min-width:761px) and (max-width:1099px){
	.tz-hero{height:680px}
	.tz-hero-img{object-position:26% 0}
	.tz-hero h1{font-size:44px}
	.tz-hero-t p{max-width:400px;font-size:19px}
}
@media (max-width:1000px){
	.tz-dojazd,.tz-wsparcie,.tz-przedpo{grid-template-columns:1fr;gap:32px}
	.tz-przedpo .tz-fig{max-width:340px}
	.tz-piec{grid-template-columns:repeat(3,1fr)}
	.tz-kn3{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
	/* Telefon: kadr przesunięty tak, żeby po lewej zostało niebo pod tekst, a po prawej siedzący. Tekst węższy niż ekran,
	   bo prawy górny róg kadru to korona drzewa. Drugie zdanie opisu nie mieści się na niebie, więc go tu nie ma. */
	.tz-hero{height:620px}
	.tz-hero-img{object-position:50% 0}
	.tz-hero-t{top:18px}
	.tz-hero h1{font-size:31px;max-width:250px;margin-bottom:8px}
	.tz-hero-t p{font-size:17px;line-height:1.45;max-width:262px}
	.tz-szer{display:none}
	.tz-hero-k{bottom:24px}
	.tz-naglowek{margin-bottom:26px}
	.tz-naglowek .pod{font-size:17px}
	.tz-piec,.tz-cztery{grid-template-columns:1fr 1fr}
	.tz-foty{grid-template-columns:1fr 1fr;gap:18px 14px}
	.tz-foty .tz-szerokie .f{aspect-ratio:16/9;flex:none}
	.tz-szerokie .f img{position:static}
	.tz-dwa{grid-template-columns:1fr;gap:14px}
	.tz-plany{gap:28px}
	.tz-os li{grid-template-columns:1fr}
	.tz-os time{text-align:left;border-left:2px solid #C9CED4;margin-left:5px;padding:0 0 2px 16px}
	.tz-os li>div{margin-left:5px;padding-left:16px;padding-bottom:22px}
	.tz-os li>div::before{top:-19px}
	.tz-rok{font-size:26px}
	.tz-plan li,.tz-terminy li{grid-template-columns:1fr;gap:2px}
	.tz-przelew{padding:20px 18px}
	.tz-przelew dd{flex-direction:column;align-items:flex-start;gap:10px;font-size:16px}
	.tz-nr{font-size:17px}
	.tz-kn3{grid-template-columns:1fr}
	.tz-film{grid-template-columns:130px 1fr}
	.tz-mapa{aspect-ratio:4/3}
	.tz-przedpo .tz-fig{max-width:300px}
	.tz-wezwanie p{font-size:19px}
}
/* Przyciski wymagające JavaScriptu są w kodzie ukryte (hidden), a .kn i .tz-kop mają własne display. */
.tz-kop[hidden],.tz-hero~* .kn[hidden]{display:none}
/* Skróty do sekcji pod otwarciem: zwykłe linki w jednym wierszu. Sekcje mają scroll-margin pod przyklejonym paskiem (html{scroll-padding-top}). */
.tz-skroty{display:flex;flex-wrap:wrap;gap:0 26px;padding-top:14px;padding-bottom:2px;font:600 15px var(--naglowki)}
.tz-skroty a{display:flex;align-items:center;min-height:44px;color:var(--granat);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.tz-skroty a:hover{color:var(--czerwien)}
@media (max-width:760px){.tz-foty figcaption,.tz-fig figcaption,.tz-przelew dt{font-size:15px}.tz-mapa-a{font-size:14px}}