/*
Theme Name: TadeuszTchorzewski
Theme URI: https://tadeusztchorzewski.pl
Author: pracownia
Description: Motyw blokowy dla strony rzeźbiarza i medaliera Tadeusza Tchórzewskiego. Kierunek „Katalog": struktura z linii włosowych, prace w jednakowym passe-partout, numeracja katalogowa, paleta z materiału (wapienny papier, grafit, patynowany brąz). Tryb jasny i ciemny.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tadeusztchorzewski
Tags: block-theme, portfolio, one-column, wide-blocks, custom-colors, custom-menu, dark-mode
*/

/* ==========================================================================
   0. Tryb ciemny — nadpisanie zmiennych presetów.
   Wszystkie style bloków używają var(--wp--preset--color--*), więc
   podmiana tych zmiennych przestawia całą witrynę.
   ========================================================================== */
:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
	:root:not([data-tt-theme="light"]) {
		--wp--preset--color--paper:    #121110;
		--wp--preset--color--mount:    #1C1A18;
		--wp--preset--color--ink:      #ECE7DF;
		--wp--preset--color--ink-soft: #9A9289;
		--wp--preset--color--bronze:   #C09A62;
		--wp--preset--color--patina:   #7FA898;
	}
}
:root[data-tt-theme="dark"] {
	--wp--preset--color--paper:    #121110;
	--wp--preset--color--mount:    #1C1A18;
	--wp--preset--color--ink:      #ECE7DF;
	--wp--preset--color--ink-soft: #9A9289;
	--wp--preset--color--bronze:   #C09A62;
	--wp--preset--color--patina:   #7FA898;
}

/* skróty lokalne */
:root {
	--tt-hair: color-mix(in oklab, var(--wp--preset--color--ink) 14%, transparent);
	--tt-hair-strong: color-mix(in oklab, var(--wp--preset--color--ink) 30%, transparent);
	--tt-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--tt-gutter: var(--wp--custom--gutter);
	/* czas przejścia motywu — JS odczytuje tę wartość, więc jest jedno źródło prawdy */
	--tt-theme-fade: 420ms;
}

/* Płynne przejście jasny ↔ ciemny.
   Zmiana własności custom (--wp--preset--color--*) sama się nie animuje, ale
   wyliczone `background-color` / `color` już tak. Klasa jest dodawana przez JS
   tylko na czas przełączenia i zaraz zdejmowana — stałe `transition` na całym
   drzewie kolidowałoby z mikrointerakcjami i kosztowało przy każdym malowaniu. */
@media (prefers-reduced-motion: no-preference) {
	:root.tt-theming,
	:root.tt-theming *,
	:root.tt-theming *::before,
	:root.tt-theming *::after {
		transition:
			background-color var(--tt-theme-fade) var(--tt-ease),
			color var(--tt-theme-fade) var(--tt-ease),
			border-color var(--tt-theme-fade) var(--tt-ease),
			box-shadow var(--tt-theme-fade) var(--tt-ease),
			fill var(--tt-theme-fade) var(--tt-ease),
			stroke var(--tt-theme-fade) var(--tt-ease),
			text-decoration-color var(--tt-theme-fade) var(--tt-ease) !important;
	}
}

/* ==========================================================================
   1. Podstawy
   ========================================================================== */
body { text-rendering: optimizeLegibility; font-optical-sizing: auto; }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: color-mix(in oklab, var(--wp--preset--color--bronze) 30%, transparent); }

/* jeden, spójny pierścień fokusu w całej witrynie */
:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--patina);
	outline-offset: 3px;
	border-radius: 1px;
}

.skip-link:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: 0.9rem 1.2rem;
}

/* etykiety — wersaliki Archivo; używane w treści przez klasę `is-style-label` */
.tt-label,
.is-style-label {
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.4;
}

/* numer katalogowy */
.tt-cat-no {
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--bronze);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* ==========================================================================
   2. Masthead
   ========================================================================== */
.tt-masthead {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in oklab, var(--wp--preset--color--paper) 88%, transparent);
	backdrop-filter: blur(12px) saturate(1.2);
	border-bottom: 1px solid var(--tt-hair);
	padding-block: 0.7rem;
}
@supports not (backdrop-filter: blur(1px)) {
	.tt-masthead { background: var(--wp--preset--color--paper); }
}

.tt-masthead__in { align-items: center; gap: clamp(1rem, 3vw, 3rem); }

.tt-wordmark { gap: 0.3rem !important; }
.tt-wordmark .wp-block-site-title a { text-decoration: none; }
.tt-wordmark .wp-block-site-title { line-height: 1.05; }
.tt-wordmark .wp-block-site-tagline { margin: 0; }

/* nawigacja */
.tt-nav .wp-block-navigation-item__content {
	text-decoration: none;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	padding-inline: 0.8rem;
	position: relative;
}
.tt-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0.8rem;
	bottom: 13px;
	height: 1px;
	background: currentColor;
	scale: 0 1;
	transform-origin: left;
	transition: scale 0.35s var(--tt-ease);
}
.tt-nav .wp-block-navigation-item__content:hover::after,
.tt-nav .current-menu-item .wp-block-navigation-item__content::after { scale: 1 1; }

/* hamburger i overlay WP — powiększone cele dotyku i wygląd „arkusza".
   Bez `display` — core sam decyduje, kiedy pokazać hamburger; wymuszenie
   `display: flex !important` pokazywało go (i przycisk zamykania) na desktopie. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 48px;
	min-height: 48px;
	align-items: center;
	justify-content: center;
}
/* WAŻNE: WordPress wypisuje arkusze bloków PO arkuszu motywu, więc reguły
   o tej samej specyficzności co core przegrywają. Zakres `.tt-nav` podnosi
   specyficzność do (0,3,0) i wygrywa niezależnie od kolejności wypisania.
   Bez tego overlay zostawał biały, bez paddingu i wysoki na 84 px. */
.tt-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	height: 100dvh;
	padding: calc(var(--tt-gutter) + 3rem) var(--tt-gutter) var(--tt-gutter);
	align-items: stretch;
	justify-content: flex-start;
}
.tt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	margin-block: auto;
}
.tt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.tt-nav .wp-block-navigation__responsive-container.is-menu-open ul {
	align-items: stretch;
	width: 100%;
	gap: 0;
}
.tt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-top: 1px solid var(--tt-hair);
	width: 100%;
}
.tt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: 1px solid var(--tt-hair);
}
.tt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	text-transform: none;
	letter-spacing: -0.015em;
	min-height: 60px;
	width: 100%;
	padding-inline: 0;
	justify-content: flex-start;
}
.tt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
.tt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: var(--tt-gutter);
	right: var(--tt-gutter);
	color: var(--wp--preset--color--ink);
}

/* przełącznik motywu */
.tt-theme-toggle {
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	min-width: 48px;
	min-height: 48px;
	display: inline-grid;
	place-items: center;
	padding: 0;
}
/* Ikony leżą w tej samej komórce siatki i przechodzą jedna w drugą —
   podmiana `display: none` była skokowa. */
.tt-theme-toggle svg {
	width: 18px;
	height: 18px;
	display: block;
	grid-area: 1 / 1;
}
.tt-theme-toggle .tt-icon-sun { opacity: 0; rotate: -70deg; scale: 0.6; }
.tt-theme-toggle .tt-icon-moon { opacity: 1; rotate: 0deg; scale: 1; }

:root[data-tt-theme="dark"] .tt-theme-toggle .tt-icon-sun { opacity: 1; rotate: 0deg; scale: 1; }
:root[data-tt-theme="dark"] .tt-theme-toggle .tt-icon-moon { opacity: 0; rotate: 70deg; scale: 0.6; }

@media (prefers-color-scheme: dark) {
	:root:not([data-tt-theme="light"]) .tt-theme-toggle .tt-icon-sun { opacity: 1; rotate: 0deg; scale: 1; }
	:root:not([data-tt-theme="light"]) .tt-theme-toggle .tt-icon-moon { opacity: 0; rotate: 70deg; scale: 0.6; }
}

@media (prefers-reduced-motion: no-preference) {
	.tt-theme-toggle svg {
		transition:
			opacity var(--tt-theme-fade) var(--tt-ease),
			rotate var(--tt-theme-fade) var(--tt-ease),
			scale var(--tt-theme-fade) var(--tt-ease);
	}
}

/* ==========================================================================
   3. Szkielet strony
   ========================================================================== */
.tt-main { padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(3rem, 8vw, 7rem); }

/* nagłówek strony: tytuł + hairline */
.tt-page-head { border-bottom: 1px solid var(--tt-hair); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.tt-page-head .wp-block-post-title { margin: 0; }

/* powrót do zbioru nadrzędnego (functions.php) */
.tt-back { margin: 0 0 0.2rem; }
.tt-back a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}
.tt-back a:hover { color: var(--wp--preset--color--bronze); }
.tt-back svg { flex: none; }

@media (prefers-reduced-motion: no-preference) {
	.tt-back svg { transition: translate 0.3s var(--tt-ease); }
	.tt-back a:hover svg { translate: -3px 0; }
}

/* licznik prac dopisywany do tytułu (functions.php) */
.tt-count {
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	margin: 0.6rem 0 0;
}

/* dwukolumnowy układ kategorii: żywa pagina + siatka prac.
   Uruchamiany tylko wtedy, gdy strona naprawdę zawiera galerię. */
@media (width >= 75rem) {
	/* 12rem, nie 13rem: te 16 px decydują o liczbie kolumn w siatce prac.
	   Przy 1440 px auto-fill daje 4 kolumny z 1075 px, ale już tylko 3 z 1059 px,
	   co wydłużało stronę kategorii o ~70%. */
	.tt-page:has(.wp-block-gallery) {
		display: grid;
		grid-template-columns: 12rem minmax(0, 1fr);
		gap: clamp(2rem, 4vw, 4rem);
		align-items: start;
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
	}
	.tt-page:has(.wp-block-gallery) .tt-page-head {
		position: sticky;
		top: 6rem;
		border-bottom: 0;
		padding-bottom: 0;
	}
	/* Żywa pagina to etykieta, nie tytuł ekspozycyjny — mniejszy stopień pisma.
	   Przy 36 px „Płaskorzeźba" ma 204 px i nie mieszczy się w kolumnie, a globalne
	   style WP ustawiają na nagłówkach `word-break: break-word`, więc wyraz łamał
	   się w środku, zostawiając sierotę „a" w drugim wierszu. */
	.tt-page:has(.wp-block-gallery) .tt-page-head .wp-block-post-title {
		font-size: var(--wp--preset--font-size--large);
		word-break: normal;
		overflow-wrap: normal;
		text-wrap: pretty;
		hyphens: auto;
	}
	/* treść wypełnia drugą kolumnę — bez wewnętrznego ograniczenia do 760px */
	.tt-page:has(.wp-block-gallery) .tt-content > *,
	.tt-page:has(.wp-block-gallery) .tt-content > .alignwide { max-width: none; }
}

/* ==========================================================================
   4. Galeria — znormalizowane passe-partout
   Nadpisuje reguły core; ten sam trik z :not(#individual-image) daje
   równą specyficzność, a arkusz motywu ładuje się później.
   ========================================================================== */
.wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(clamp(9.5rem, 22vw, 15rem), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	align-items: start;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	/* core ustawia width: calc(50% - gap) i flex-grow — stąd sztywne 2/3 kolumny.
	   Musi być 100%, nie auto: obraz jest pozycjonowany absolutnie, więc kafelek
	   nie ma treści w przepływie, a przy `align-items: start` + `aspect-ratio`
	   element o szerokości auto liczy rozmiar z treści i zapada się do ~60 px. */
	width: 100%;
	flex: initial;
	margin: 0;
	position: relative;
	aspect-ratio: 1;
	background: var(--wp--preset--color--mount);
	overflow: clip;
	justify-content: initial;
}

.wp-block-gallery.has-nested-images figure.wp-block-image a,
.wp-block-gallery.has-nested-images figure.wp-block-image > img {
	display: block;
	position: absolute;
	inset: 0;
	margin: auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

/* Obraz pozycjonowany absolutnie, nie wyśrodkowany w przepływie:
   wyśrodkowany obraz z procentowym max-width oddaje własną szerokość
   (tu do 3407 px) do wyliczania kolumny i rozsadza siatkę poza viewport. */
.wp-block-gallery.has-nested-images figure.wp-block-image img {
	position: absolute;
	inset: 0;
	margin: auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: scale 0.6s var(--tt-ease);
}
.wp-block-gallery.has-nested-images figure.wp-block-image a img { position: static; }

/* delikatna ramka na styku pracy i passe-partout */
.wp-block-gallery.has-nested-images figure.wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px var(--tt-hair);
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-gallery.has-nested-images figure.wp-block-image:hover img { scale: 1.04; }
}

/* kursor „powiększ" tam, gdzie działa lightbox */
.wp-block-gallery figure.wp-block-image .wp-lightbox-container button { cursor: zoom-in; }

/* podpisy pod kadrem, nie na obrazie (core kładzie je absolutnie z gradientem) */
.wp-block-gallery.has-nested-images figure.wp-block-image:has(> figcaption) { margin-bottom: 3.6rem; }
.wp-block-gallery.has-nested-images figure.wp-block-image > figcaption {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	bottom: auto;
	margin-top: 0.6rem;
	padding: 0;
	background: none;
	text-align: start;
	max-height: none;
	overflow: visible;
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.45;
}
.wp-block-gallery.has-nested-images figure.wp-block-image > figcaption::before { display: none; }

/* „Wybrane realizacje" na stronie startowej to kuratorski wybór 6 prac, nie
   katalog — liczba kolumn musi dzielić 6, inaczej ostatnia praca zostaje sama
   w wierszu (auto-fill dawał na szerokim ekranie 5 kolumn i sierotę).
   Strony zbiorów zachowują auto-fill: w katalogu niepełny ostatni wiersz jest
   naturalny, a wymuszanie liczby kolumn zmniejszałoby kafelki. */
.wp-block-gallery.has-nested-images.tt-selected {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (width >= 48rem) {
	.wp-block-gallery.has-nested-images.tt-selected {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* pojedynczy obraz w treści (nie w galerii) */
.tt-content > .wp-block-image { background: var(--wp--preset--color--mount); }
.tt-content > .wp-block-image img { display: block; margin-inline: auto; }

/* ==========================================================================
   5. Lightbox core — dopasowanie do palety
   ========================================================================== */
/* jak wyżej — zakres `body` podnosi specyficzność nad arkusz core */
body .wp-lightbox-overlay .scrim { background: #0b0a09; opacity: 0.94; }
body .wp-lightbox-overlay button {
	min-width: 48px;
	min-height: 48px;
	color: #F4F1EC;
}

/* ==========================================================================
   6. Indeks katalogu (/galeria/) — shortcode [tt_gallery_index]
   ========================================================================== */
.tt-index {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}
@media (width >= 60rem) {
	.tt-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* rytm redakcyjny: druga kolumna opada niżej */
	.tt-index > li:nth-child(even) { margin-block-start: clamp(2rem, 6vw, 6rem); }
}
.tt-index a { display: grid; gap: 0.9rem; text-decoration: none; }
.tt-index__frame {
	display: block;
	background: var(--wp--preset--color--mount);
	overflow: clip;
	aspect-ratio: 4 / 3;
	position: relative;
}
.tt-index__frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.7s var(--tt-ease), filter 0.7s var(--tt-ease);
	filter: saturate(0.9);
}
@media (prefers-reduced-motion: no-preference) {
	.tt-index a:hover .tt-index__frame img { scale: 1.035; filter: saturate(1); }
}
.tt-index__line {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	border-top: 1px solid var(--tt-hair-strong);
	padding-top: 0.7rem;
}
.tt-index__line h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	letter-spacing: -0.015em;
}
.tt-index__count { margin-inline-start: auto; white-space: nowrap; }
.tt-index__sub {
	margin: 0.35rem 0 0;
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

/* ==========================================================================
   7. Strona startowa — plansza otwierająca
   ========================================================================== */
.tt-opening { padding-block: clamp(1.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4rem); }
.tt-opening h1,
.tt-opening h2.tt-opening__title {
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.92;
	letter-spacing: -0.03em;
	margin: 0.6rem 0 0;
}
.tt-opening em { font-style: italic; color: var(--wp--preset--color--bronze); }
.tt-opening__lede {
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	color: var(--wp--preset--color--ink-soft);
}

/* Wejście do katalogu wprost z planszy otwierającej — dotąd jedyną drogą
   do prac było menu. Domyka też kompozycję kolumny wyrównanej do dołu. */
.tt-cta a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 48px;
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--tt-hair-strong);
	padding-block-end: 0.35rem;
}
.tt-cta a:hover { color: var(--wp--preset--color--bronze); border-color: currentColor; }
.tt-cta svg { flex: none; }

@media (prefers-reduced-motion: no-preference) {
	.tt-cta svg { transition: translate 0.3s var(--tt-ease); }
	.tt-cta a:hover svg { translate: 4px 0; }
}

/* ==========================================================================
   7a. Baner otwierający — tekst na fotografii
   Kadr 2560×1440 przygotowany specjalnie pod baner (oryginał 4000×2992,
   dolne 300 px odcięte razem ze znakiem wodnym telefonu).
   ========================================================================== */
/* Wysokość musi pomieścić twarz rzeźby U GÓRY i blok tekstu NA DOLE — przy
   niższym banerze nagłówek nachodził na popiersie, a górna krawędź ucinała
   głowę. */
.tt-hero.wp-block-cover {
	min-height: clamp(32rem, 76vh, 46rem);
	padding: 0;
	align-items: flex-end;
	color: #F4F1EC;
	isolation: isolate;
}

/* Delikatna kurtyna z góry na dół: ciemniej pod paskiem nawigacji, prześwit
   w środku (fotografia ma oddychać), ponownie ciemniej pod tekstem.
   Gradient siedzi na ::after, nie na warstwie „dim" bloku Cover — reguły core
   dla .has-background-dim-* mają tę samą specyficzność, a arkusze bloków
   ładują się PO arkuszu motywu, więc wygrałyby z motywem. */
.tt-hero.wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Dwie warstwy. Elipsa zakotwiczona w lewym dolnym narożniku daje ciemną
	   „sadzawkę" dokładnie pod blokiem tekstu i gaśnie przed twarzą rzeźby
	   (prawy górny obszar zostaje jasny). Sam gradient pionowy nie wystarczał:
	   nagłówek biegnie przez rozjaśnioną ścianę kamienicy i kontrast spadał
	   tam do 2,1:1 — mierzone na najjaśniejszym fragmencie, nie na średniej. */
	background-image:
		radial-gradient(
			ellipse 74% 74% at 16% 80%,
			rgb(11 10 9 / 0.70) 0%,
			rgb(11 10 9 / 0.62) 58%,
			rgb(11 10 9 / 0) 100%
		),
		linear-gradient(
			to bottom,
			rgb(11 10 9 / 0.68) 0%,
			rgb(11 10 9 / 0.38) 26%,
			rgb(11 10 9 / 0.38) 46%,
			rgb(11 10 9 / 0.74) 82%,
			rgb(11 10 9 / 0.88) 100%
		);
}

.tt-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(1rem, 3vw, 2rem);
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: clamp(2rem, 6vw, 4rem) var(--tt-gutter) clamp(1.25rem, 3vw, 2rem);
}

/* tekst zawsze na jasno — leży na fotografii, nie na tle motywu */
.tt-hero .tt-label { color: rgb(244 241 236 / 0.82); }

/* Własna skala nagłówka: reguła `.tt-opening h1` już nie działa (nagłówek
   przeniósł się do baneru), a pełny stopień „display" (96 px) sięgałby twarzy
   rzeźby. Ten zakres mieści trzy wiersze w dolnym pasie kurtyny. */
.tt-hero .tt-opening__title {
	color: #F4F1EC;
	font-size: clamp(2.25rem, 4.4vw, 4.25rem);
	line-height: 0.98;
	letter-spacing: -0.03em;
}
.tt-hero .tt-opening__title em { color: #E2C48E; }
.tt-hero .tt-opening__lede { color: rgb(244 241 236 / 0.92); }
.tt-hero .tt-cta a { color: #F4F1EC; border-color: rgb(244 241 236 / 0.45); }
.tt-hero .tt-cta a:hover { color: #E2C48E; border-color: currentColor; }

.tt-hero__type {
	display: grid;
	gap: clamp(0.5rem, 1.4vw, 0.9rem);
	max-width: 46rem;
}
.tt-hero__type > * { margin-block: 0; }
.tt-hero__type .tt-cta { margin-block-start: clamp(0.25rem, 1vw, 0.6rem); }

/* Miękki cień pod literami — nie zastępuje kurtyny (WCAG liczy sam kontrast
   tła), ale domyka czytelność tam, gdzie za tekstem trafi się jasny detal. */
.tt-hero__type .tt-label,
.tt-hero__type .tt-opening__title,
.tt-hero__type .tt-opening__lede {
	text-shadow: 0 1px 2px rgb(11 10 9 / 0.5), 0 2px 28px rgb(11 10 9 / 0.55);
}

/* podpis pracy w prawym dolnym narożniku */
.tt-hero__credit {
	margin: 0;
	justify-self: end;
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	color: rgb(244 241 236 / 0.78);
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
}
.tt-hero__credit .tt-cat-no { color: #E2C48E; }

/* Kadrowanie od góry (Y blisko 0%), bo głowa rzeźby jest w górnej ćwiartce
   fotografii — domyślne wyśrodkowanie w pionie obcinało twarz. */
.tt-hero .wp-block-cover__image-background { object-position: 45% 6%; }

/* ==========================================================================
   7b. Baner na telefonie — fotografia u góry, tekst POD nią na papierze.
   Tekst na fotografii jest na małym ekranie nie do utrzymania: przy
   `object-fit: cover` to, jaki fragment zdjęcia trafi pod napisy, zależy od
   proporcji baneru, a te zmieniają się z każdym modelem telefonu. Kolejne
   wzmacnianie kurtyny działało w emulacji 390×844 i zawodziło na realnym
   ekranie (jasny, kwitnący krzew pod akapitem). Rozdzielenie warstw usuwa
   problem u źródła: kontrast jest wtedy kontrastem motywu (15–16:1),
   niezależnym od kadru, a fotografia zostaje nieprzyciemniona.
   ========================================================================== */
@media (width < 48rem) {
	.tt-hero.wp-block-cover {
		display: block;
		min-height: 0;
		padding: 0 0 clamp(1.5rem, 5vw, 2.5rem);
		color: inherit;
	}

	/* obraz wraca do przepływu jako pasmo o stałej wysokości */
	.tt-hero.wp-block-cover img.wp-block-cover__image-background {
		position: relative;
		inset: auto;
		width: 100%;
		height: min(52vh, 24rem);
		object-position: 45% 14%;
	}

	/* kurtyna tylko na pasmie obrazu — dla ciągłości z wersją na desktopie,
	   już nie dla czytelności tekstu */
	.tt-hero.wp-block-cover::after {
		inset: 0 0 auto 0;
		height: min(52vh, 24rem);
		background-image: linear-gradient(
			to bottom,
			rgb(11 10 9 / 0.34) 0%,
			rgb(11 10 9 / 0.06) 38%,
			rgb(11 10 9 / 0) 100%
		);
	}

	.tt-hero .wp-block-cover__inner-container {
		display: flex;
		flex-direction: column;
		gap: clamp(0.75rem, 3vw, 1.25rem);
		padding-block: clamp(1.25rem, 4vw, 1.75rem) 0;
	}

	/* podpis pracy trafia bezpośrednio pod fotografię */
	.tt-hero__credit { order: -1; justify-self: start; }

	/* na papierze obowiązują kolory motywu — działają też w trybie ciemnym */
	.tt-hero .tt-label,
	.tt-hero .tt-opening__lede,
	.tt-hero__credit { color: var(--wp--preset--color--ink-soft); }
	.tt-hero .tt-opening__title { color: var(--wp--preset--color--ink); }
	.tt-hero .tt-opening__title em { color: var(--wp--preset--color--bronze); }
	.tt-hero .tt-cta a { color: var(--wp--preset--color--ink); border-color: var(--tt-hair-strong); }
	.tt-hero .tt-cta a:hover { color: var(--wp--preset--color--bronze); }

	/* cień pod literami był potrzebny tylko na zdjęciu */
	.tt-hero__type .tt-label,
	.tt-hero__type .tt-opening__title,
	.tt-hero__type .tt-opening__lede { text-shadow: none; }
}

/* Plansza: praca na passe-partout, nigdy skalowana w górę.
   Ograniczenia szerokości i wysokości są konieczne — bez nich proporcja 3:4
   przy kolumnie 724 px dawała obraz wysoki na 965 px, sekcję otwierającą
   wysoką na 1148 px i nagłówek ucięty na dole ekranu (kolumny są wyrównane
   do dołu, więc cała wysokość obrazu spycha tekst w dół). */
.tt-plate {
	background: var(--wp--preset--color--mount);
	margin: 0;
	max-width: min(100%, 30rem);
	margin-inline-start: auto;
}
.tt-plate img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	max-height: min(58vh, 600px);
	object-fit: cover;
}
.tt-plate figcaption {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	align-items: baseline;
	padding: 0.75rem clamp(0.75rem, 1.5vw, 1.25rem);
	margin: 0;
}

/* portret w nocie biograficznej — bez rozciągania kolumny */
.tt-portrait { background: var(--wp--preset--color--mount); align-self: start; margin: 0; }
.tt-portrait img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }

/* kamienie milowe — datowana lista, kolejność niesie informację */
.tt-milestones { list-style: none; margin: 0; padding: 0; }
.tt-milestones li {
	display: grid;
	gap: 0.15rem 1.5rem;
	padding-block: 0.9rem;
	border-top: 1px solid var(--tt-hair);
	grid-template-columns: 5.5rem minmax(0, 1fr);
}
.tt-milestones li > :first-child {
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--bronze);
	font-variant-numeric: tabular-nums;
	line-height: 1.7;
}
.tt-milestones li > * { margin: 0; }

/* ==========================================================================
   8. Kontakt — klikalne, nie dekoracyjne
   ========================================================================== */
.tt-actions { display: grid; gap: 0.6rem; }

/* Etykieta NAD wartością, jak „PRACOWNIA" w kolumnie obok. Układ w jednym
   wierszu zostawiał na wartość tylko 225–244 px, a adres e-mail potrzebuje
   do 322 px — łamał się więc w środku na „…@g / mail.com". */
.tt-action {
	display: grid;
	gap: 0.1rem;
	align-content: center;
	min-height: 56px;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--tt-hair-strong);
	text-decoration: none;
	transition: background 0.25s var(--tt-ease), border-color 0.25s var(--tt-ease);
}
.tt-action:hover { background: var(--wp--preset--color--mount); border-color: var(--wp--preset--color--ink); }
.tt-action .tt-label { color: var(--wp--preset--color--bronze); }
.tt-action strong {
	font-weight: 400;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.01em;
	min-width: 0;
	overflow-wrap: anywhere; /* tylko siatka bezpieczeństwa — nie powinna się włączać */
}

/* Adresy e-mail są z natury długie: mniejszy stopień pisma mieści je w jednym
   wierszu. Selektor po href, więc nowy adres nie wymaga zmiany w treści. */
.tt-action[href^="mailto:"] strong {
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0;
}

/* ==========================================================================
   9. Stopka
   ========================================================================== */
.tt-colophon {
	border-top: 1px solid var(--tt-hair);
	padding-block: clamp(2rem, 4vw, 3.5rem);
	margin-block-start: auto;
}
.tt-colophon .wp-block-columns { gap: 1.5rem 2rem; }
.tt-colophon p { margin: 0; }
.tt-colophon a { text-decoration-color: var(--tt-hair-strong); }
.tt-colophon .wp-block-site-title { font-size: var(--wp--preset--font-size--large); }
.tt-colophon .wp-block-site-title a { text-decoration: none; }

/* ==========================================================================
   10. Ruch — tylko tam, gdzie służy treści
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		/* Bez fill-mode i bez opacity w klatkach: gdy timeline jest nieaktywny
		   lub poza zakresem, element musi pozostać w pełni widoczny. */
		.wp-block-gallery.has-nested-images figure.wp-block-image,
		.tt-index > li,
		.tt-milestones li {
			animation: tt-rise linear;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
		@keyframes tt-rise { from { translate: 0 1.5rem; } to { translate: 0 0; } }
	}
}

/* ==========================================================================
   11. Druk — katalog na papierze
   ========================================================================== */
@media print {
	.tt-masthead, .tt-theme-toggle, .wp-block-navigation { display: none !important; }
	.wp-block-gallery.has-nested-images { grid-template-columns: repeat(3, 1fr); }
	.tt-main { padding: 0; }
	a { text-decoration: none; }
}