/* =========================================================================
 * G4U — LANDING ODDZIAŁU
 *
 * Rejestr: minimalistyczny, poważny, drogi. Środki wyrazu to światło, włosowe
 * linie i mikrotypografia — nie kolor, nie cienie, nie zaokrąglenia.
 *
 * Referencje (Mobbin): Koto — lista wydarzeń w wierszach rozdzielonych liniami;
 * Legora — pasek logotypów kancelarii; Origin i Titan — hero i liczby;
 * Ragged Edge — siatka zespołu bez kafelków.
 *
 * Zbudowane wyłącznie na tokenach z tokens.css.
 * ========================================================================= */

/* --- Nadtytuł ---------------------------------------------------------------
 * Klasa została po przebudowie, ale nie stoi już nad żadnym nagłówkiem:
 * kicker nad nagłówkiem to wzorzec, którego nie warto bronić — nagłówek niesie
 * się sam. Zostaje do etykiet, które są samodzielną informacją.
 */
.g4u-eyebrow {
	display: block;
	margin: 0 0 var(--g4u-space-tiny);
	color: var(--g4u-text-muted);
	font-family: var(--g4u-font-ui);
	font-size: 11px;
	font-weight: var(--g4u-weight-strong);
	letter-spacing: .18em;
	line-height: 1;
	text-transform: uppercase;
}

/* --- Hero ------------------------------------------------------------------
 * Wzorzec produkcyjnych stron oddziałowych: biała wyspa (powierzchnia `light`
 * nadawana w szablonie), treść wyśrodkowana, pełne zdanie w nagłówku, pod nim
 * lead i linia tożsamości. Środki są tu jedynym odstępstwem od układu do lewej
 * krawędzi, który prowadzi resztę strony — bo hero nie jest sekcją treści,
 * a tablicą z nazwą.
 */
.g4u-section--hero > .g4u-container { text-align: center; }

.g4u-hero__title {
	max-width: 34ch;
	margin: 0 auto;
	font-size: var(--g4u-h1-size);
	line-height: 1.02;
	letter-spacing: -.025em;
	text-wrap: balance;
}

.g4u-hero__title .g4u-eyebrow {
	margin-bottom: var(--g4u-space-small);
	letter-spacing: .2em;
}

/* Lead jedzie na tokenach tekstu, nie na własnym rozmiarze: na produkcji ma
   dokładnie rozmiar i interlinię tekstu podstawowego (17 px / 1,68). */
.g4u-hero__lead {
	max-width: 62ch;
	margin: var(--g4u-space-small) auto 0;
	color: var(--g4u-text);
	font-size: var(--g4u-text-size);
	line-height: var(--g4u-text-lh);
	text-wrap: pretty;
}

.g4u-hero__image {
	margin-top: var(--g4u-space-large);
	aspect-ratio: 21 / 9;
}

.g4u-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.g4u-branch__description {
	max-width: 62ch;
	color: var(--g4u-text-muted);
}

/* --- Liczby ------------------------------------------------------------------
 * Wzorzec Titan: kolumny rozdzielone włosową linią, bez ramek i bez kafelków.
 * „Bez tła" znaczy bez tła pod każdą liczbą — sekcja jako całość stoi na
 * powierzchni `light` (patrz `g4u_section_open()` w template-parts/cunters.php).
 *
 * `dt`/`dd` w odwrotnym porządku wizualnym, jak w `.g4u-office__fact`: znacznik
 * niesie najpierw podpis (semantyka, kolejność dla czytnika ekranu), `column-
 * reverse` stawia dużą liczbę na wierzchu — jeden wzorzec w całym motywie.
 */
.g4u-grid--stats {
	gap: 0;
	border-top: 1px solid var(--g4u-border);
}

.g4u-stat {
	display: flex;
	flex-direction: column-reverse;
	padding: var(--g4u-space-medium) var(--g4u-space-small) 0;
	border-right: 1px solid var(--g4u-border);
}

/* Pierwsza kolumna nie ma wcięcia z lewej, bo to ona wyznacza lewą krawędź
   strony (zasada „jedna lewa krawędź" z DESIGN.md). Wcięcie w pozostałych
   odsuwa liczbę od pionowej linii, o którą wcześniej się opierała. */
.g4u-stat:first-child { padding-left: 0; }
.g4u-stat:last-child { border-right: 0; }

.g4u-stat__value {
	margin: 0;
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: var(--g4u-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.03em;
	line-height: 1;
}

/* Liczba i przyrostek (+, %+) dzielą jedną `dd` — dwa osobne elementy, żeby
   `motion.js` mógł doliczać samą liczbę bez nadpisywania przyrostka. */
.g4u-counter,
.g4u-stat__suffix { display: inline; }

.g4u-stat__label {
	max-width: 20ch;
	margin: .6rem 0 0;
	color: var(--g4u-text-muted);
	font-size: var(--g4u-meta-size);
	line-height: 1.4;
}

/* --- Licznik: zero przed animacją ------------------------------------------------
 * Wartość docelowa NIE MA PRAWA mignąć przed animacją, a wyprzedzić pierwsze
 * malowanie potrafi tylko arkusz stylów: `motion.js` jedzie w stopce, a skryptu
 * w <head> nie da się na to użyć, bo LiteSpeed przepisuje inline'y na
 * `src="data:…" defer`. Dlatego licznik startuje UKRYTY — to jest stan domyślny,
 * bez żadnej klasy — a zero rysuje pseudoelement.
 *
 * `display: none` na liczbie, nie `visibility` ani `color: transparent`: pudełko
 * musi się ZWINĄĆ. Inaczej trzymałoby szerokość „10 000" i przyrostek „+"
 * odjechałby o pół kolumny w prawo, a po starcie animacji wskoczył na miejsce.
 *
 * Odsłonięcie prawdziwej wartości ma trzy drogi, wszystkie niżej: klasa od
 * `motion.js`, media query `prefers-reduced-motion` i arkusz w `<noscript>`
 * (`g4u_oddzial_counter_fallback()` w inc/assets.php).
 */
.g4u-counter__value { display: none; }
.g4u-counter::before { content: "0"; }

/* 1. `motion.js` przejął liczniki: wpisał zero do środka i nadał klasę na <html>
      w tej samej klatce, w której CSS gasi pseudoelement — podmiana jest
      niewidoczna, bo zero było i zero zostaje. Od tej chwili tekstem rządzi JS. */
html.g4u-count-ready .g4u-counter__value { display: inline; }
html.g4u-count-ready .g4u-counter::before { content: none; }

/* 2. Reduced-motion: nic się nie będzie doliczać, więc liczba od razu prawdziwa.
      CSS wie o tej preferencji sam, bez pytania JavaScriptu — i dobrze, bo tak
      nie ma tu ani jednej klatki z zerem. */
@media (prefers-reduced-motion: reduce) {
	html .g4u-counter__value { display: inline; }
	html .g4u-counter::before { content: none; }
}

/* --- Zespół ---------------------------------------------------------------
 * Bez kafelków i bez ramek: zdjęcie, nazwisko, stanowisko.
 *
 * Zdjęcia są w kolorze — tak jak na obecnych stronach (`filter: none` na
 * `.sc_team_item_thumb img`). Wyszarzenie zabierało z sesji zdjęciowej to,
 * za co klient zapłacił, a przy jednolitym czarnym tle zdjęć nie dawało nawet
 * spójności: zostawał hover, który wyglądał na awarię ładowania.
 *
 * Kadr trzyma `--g4u-portrait-ratio` (proporcje `assembly-thumb-rectangle`)
 * z kadrowaniem od środka — tak samo kadruje WordPress, generując ten rozmiar.
 * `object-position: top` psuło wyrównanie: przy różnych proporcjach źródeł
 * postacie wychodziły w różnej skali i na różnych wysokościach.
 */
.g4u-team__title { max-width: 20ch; }

/* Kadr musi obcinać powiększenie, więc wrapper przycina zawartość. */
.g4u-person__photo {
	display: block;
	position: relative;
	overflow: hidden;
}

.g4u-person__photo img {
	width: 100%;
	aspect-ratio: var(--g4u-portrait-ratio);
	object-fit: cover;
	/* Twarz siedzi w górnej części portretu. Przy zgodnej proporcji nie zmienia
	   to nic, ale ratuje kadr, gdy trafi się zdjęcie o innych proporcjach
	   (np. fallback na `large`, gdy kadru nie ma na dysku). */
	object-position: center top;
	transform: scale(1);
	transition: transform var(--g4u-transition), opacity var(--g4u-transition);
}

/* Welon wskazania — odpowiednik `trx_addons_hover_mask` z assembly-child.
   Tam maska wnosi nazwisko na zdjęcie; tutaj nazwisko zostaje POD zdjęciem
   (decyzja klienta o pełnej siatce), więc welon sam potwierdza wskazanie.
   Indygo, nie czerń: zdjęcia są ciemne na ciemnym tle, więc przygaszenie
   czernią było praktycznie niewidoczne. Akcent wolno tu użyć — kafelek jest
   odnośnikiem, a indygo w tym motywie znaczy „tu można działać". */
.g4u-person__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--g4u-accent);
	opacity: 0;
	transition: opacity var(--g4u-transition);
	pointer-events: none;
	mix-blend-mode: screen;
}

/* Reaguje CAŁY kafelek, nie samo zdjęcie — tak zachowuje się `.sc_team_item`
   w assembly-child: wskazanie nazwiska też powiększa portret.
   Skala 1.08 (assembly ma 1.1) — portret jest tu większy niż w tamtej siatce. */
.g4u-person:hover .g4u-person__photo:not(.g4u-person__photo--full) img,
.g4u-person__photo:not(.g4u-person__photo--full):focus-visible img { transform: scale(1.08); }

.g4u-person:hover .g4u-person__photo:not(.g4u-person__photo--full)::after,
.g4u-person__photo:not(.g4u-person__photo--full):focus-visible::after { opacity: .22; }

/* Nazwisko idzie w akcent razem ze zdjęciem, niezależnie od tego, co wskazano. */
.g4u-person:hover .g4u-person__name a { color: var(--g4u-accent); }

/* Na stronie osoby portret jest bohaterem, nie odnośnikiem — bez welonu i zoomu. */
.g4u-person__photo--full { overflow: visible; }
.g4u-person__photo--full::after { content: none; }

.g4u-person__photo--full img {
	aspect-ratio: auto;
	object-fit: contain;
	transform: none;
}

.g4u-person__name {
	margin: var(--g4u-space-tiny) 0 .15rem;
	font-size: 1rem;
	font-weight: var(--g4u-weight-strong);
	line-height: 1.3;
}

.g4u-person__position {
	color: var(--g4u-text-muted);
	font-size: var(--g4u-meta-size);
	line-height: 1.4;
}

/* --- Partnerzy -------------------------------------------------------------
 * Wzorzec Legory: nazwy w jednym pasie, bez ramek wokół pojedynczego logotypu.
 * Statyczny układ (bez JS i przy reduced-motion): rzędy od lewej — długie
 * nazwy kancelarii łamią się w kolejne wiersze bez dziur. Pod ruchem pas
 * przejmuje motion.css i nazwy dryfują w jednej wstędze.
 */
.g4u-partners__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--g4u-space-small) var(--g4u-space-large);
	margin: 0;
	padding: 0;
	list-style: none;
}

.g4u-partner {
	display: flex;
	align-items: center;
}

/* Logotyp dostaje STAŁE gniazdo, nie tylko sufit wysokości. Logotypy partnerów
   przychodzą w każdych proporcjach, a przy samym `max-height` pas rozjeżdżał się:
   szeroki wordmark zajmował 82 px, a wysoki znak zwężał się do 25 px i wyglądał
   jak śmieć w pasie. `contain` wpisuje każdy plik w to samo pudełko, więc pas
   jest równy niezależnie od tego, co przyśle partner. */
.g4u-partner__logo {
	width: var(--g4u-partner-logo-w);
	height: var(--g4u-partner-logo-h);
	object-fit: contain;
	object-position: center;
	filter: grayscale(1);
	opacity: .85;
	transition: opacity var(--g4u-transition), filter var(--g4u-transition);
}

.g4u-partner__link:hover .g4u-partner__logo,
.g4u-partner__link:focus-visible .g4u-partner__logo { opacity: 1; filter: grayscale(0); }

.g4u-partner__plate {
	color: var(--g4u-text);
	font-family: var(--g4u-font-heading);
	font-size: 14px;
	font-weight: var(--g4u-weight-strong);
	letter-spacing: -.005em;
	line-height: 1.25;
	white-space: nowrap;
}

.g4u-partner__link { text-decoration: none; }
.g4u-partner__link:hover .g4u-partner__plate { color: var(--g4u-accent); }

/* --- Wydarzenia ------------------------------------------------------------
 * Wzorzec Koto: wiersz zamiast kafelka. Numer porządkowy, tytuł, termin i cena
 * po prawej, zakup na końcu. Wiersze rozdzielone włosowymi liniami.
 */
.g4u-events {
	margin: var(--g4u-space-medium) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--g4u-border);
}

.g4u-event-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: start;
	gap: 0 var(--g4u-space-medium);
	padding: var(--g4u-space-medium) 0;
	border-bottom: 1px solid var(--g4u-border);
}

.g4u-event-row__main { min-width: 0; }

.g4u-event-row__title {
	max-width: 44ch;
	margin: 0;
	font-size: 1.1875rem;
	font-weight: var(--g4u-weight-strong);
	line-height: 1.3;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.g4u-event-row__title a { color: var(--g4u-heading); text-decoration: none; }
.g4u-event-row__title a:hover,
.g4u-event-row__title a:focus-visible { color: var(--g4u-accent); }

.g4u-event-row__city {
	margin: .4rem 0 0;
	color: var(--g4u-text-muted);
	font-size: var(--g4u-meta-size);
}

.g4u-event-row__meta { text-align: right; }

.g4u-event-row__date {
	margin: 0;
	color: var(--g4u-text);
	font-family: var(--g4u-font-ui);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .1em;
	line-height: 1.7;
	text-transform: uppercase;
	white-space: nowrap;
}

.g4u-event-row__cost {
	margin: .3rem 0 0;
	color: var(--g4u-text-muted);
	font-family: var(--g4u-font-ui);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.g4u-event-row__action { text-align: right; }

/* Wyprzedane w wierszu: komunikat w mikrotypografii akcentu ostrzegawczego,
   nie przycisk. Wiersz ma powiedzieć „już nie", nie zapraszać do kliknięcia. */
.g4u-event-row__closed {
	margin: 0;
	color: var(--g4u-text-muted);
	font-family: var(--g4u-font-ui);
	font-size: 12px;
	font-weight: var(--g4u-weight-strong);
	letter-spacing: .1em;
	line-height: 1.7;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Archiwum: te same wiersze, przygaszone. Lista minionych terminów jest
   kontekstem („to się już działo"), nie ofertą — nie ma konkurować
   z nadchodzącymi. */
.g4u-events--past .g4u-event-row__title a { color: var(--g4u-text); }
.g4u-events--past .g4u-event-row__date { color: var(--g4u-text-muted); }

.g4u-events__empty {
	max-width: 62ch;
	margin: var(--g4u-space-medium) auto 0;
	color: var(--g4u-text-muted);
	text-align: center;
}

/* --- Pas hero strony „Wydarzenia" ------------------------------------------------
 * Odtworzenie planszy Slider Revolution z centrali: zdjęcie na całą szerokość
 * sekcji, nad nim nadtytuł, duży nagłówek i przycisk — wszystko wyśrodkowane.
 * Nakładka trzyma kontrast białego tekstu niezależnie od tego, jakie zdjęcie
 * dostanie oddział.
 */
.g4u-page-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--g4u-page-hero-min-h);
	overflow: hidden;
}

.g4u-page-hero__media {
	position: absolute;
	inset: 0;
}

.g4u-page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Dwie warstwy: płaskie przygaszenie całości i gradient od dołu, żeby przycisk
   nie leżał na najjaśniejszym miejscu zdjęcia. */
.g4u-page-hero--image .g4u-page-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, var(--g4u-bg-a70), transparent 70%),
		var(--g4u-scrim);
}

.g4u-page-hero__body {
	position: relative;
	width: 100%;
	padding: var(--g4u-space-large) 0;
	text-align: center;
}

.g4u-page-hero__eyebrow { color: var(--g4u-heading); }

.g4u-page-hero__title {
	max-width: 24ch;
	margin: 0 auto;
	color: var(--g4u-heading);
	font-size: var(--g4u-h1-size);
	line-height: 1.06;
	letter-spacing: -.025em;
	text-wrap: balance;
}

.g4u-page-hero__action { margin: var(--g4u-space-medium) 0 0; }

/* --- Jasny pas wyróżnienia --------------------------------------------------------
 * Nagłówek i przycisk po lewej, miniatura filmu po prawej — jak na centrali.
 * Bez obrazka pas zwęża się do jednej kolumny i zostaje wyśrodkowany, żeby nie
 * został pustą połową.
 */
.g4u-feature {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--g4u-space-large);
	text-align: center;
}

@media (min-width: 900px) {
	.g4u-feature--media {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--g4u-space-huge);
	}
}

.g4u-feature__title {
	max-width: 28ch;
	margin: 0 auto;
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: var(--g4u-h2-size);
	font-weight: var(--g4u-weight-bold);
	line-height: 1.3;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.g4u-feature__action { margin: var(--g4u-space-medium) 0 0; }

.g4u-feature__media { margin: 0; }
.g4u-feature__media img { width: 100%; height: auto; }

/* --- Katalog wydarzeń (strona „Wydarzenia") --------------------------------------
 * Odwzorowanie kafelka `sc_events_default` ze skórki Assembly — tego samego,
 * którym centrala składa listę na `/wydarzenia/`. Układ poziomy: blok daty,
 * zdjęcie, treść, cena. Kafelki rozdziela włosowa linia (na centrali
 * `+ .sc_events_item { border-top }`), więc lista nie ma ramki zewnętrznej.
 *
 * Nagłówki sekcji na tej stronie są wyśrodkowane i pełnej szerokości — zmierzone
 * na centrali: Montserrat 700 / 47 px dla sekcji, 600 / 35 px dla „Na to wydarzenie:".
 */
.g4u-events__heading {
	margin: 0;
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: var(--g4u-h2-size);
	font-weight: var(--g4u-weight-bold);
	line-height: var(--g4u-h2-lh);
	letter-spacing: -.02em;
	text-align: center;
	text-wrap: balance;
}

.g4u-event-cards {
	margin: var(--g4u-space-large) 0 0;
	padding: 0;
	list-style: none;
}

.g4u-event-card {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0;
}

.g4u-event-card + .g4u-event-card {
	margin-top: var(--g4u-event-card-gap);
	padding-top: var(--g4u-event-card-gap);
	border-top: 1px solid var(--g4u-border);
}

/* Blok daty: duży dzień nad skrótem miesiąca. `aria-hidden`, bo pełna data stoi
   w wierszu meta obok — dla czytnika ekranu ten blok byłby powtórzeniem. */
.g4u-event-card__date {
	flex: 0 0 auto;
	min-width: 80px;
	margin-right: var(--g4u-space-medium);
	padding-top: .4em;
}

.g4u-event-card__day {
	display: block;
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: var(--g4u-event-card-day);
	font-weight: var(--g4u-weight-medium);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.g4u-event-card__month {
	display: block;
	margin-top: 7px;
	color: var(--g4u-text-muted);
	font-family: var(--g4u-font-ui);
	font-size: var(--g4u-meta-size);
	line-height: 1.35;
}

.g4u-event-card__thumb {
	flex: 0 0 var(--g4u-event-card-thumb);
	margin-right: var(--g4u-space-medium);
	overflow: hidden;
}

.g4u-event-card__thumb img {
	width: 100%;
	aspect-ratio: var(--g4u-event-card-ratio);
	object-fit: cover;
	transition: transform var(--g4u-transition);
}

.g4u-event-card:hover .g4u-event-card__thumb img { transform: scale(1.07); }

.g4u-event-card__body {
	flex: 1 1 260px;
	min-width: 0;
	padding-top: .3em;
}

.g4u-event-card__title {
	max-width: 44ch;
	margin: 0;
	font-size: var(--g4u-event-card-title);
	font-weight: var(--g4u-weight-strong);
	line-height: 1.2;
	letter-spacing: -.01em;
}

.g4u-event-card__title a { color: var(--g4u-heading); text-decoration: none; }
.g4u-event-card__title a:hover,
.g4u-event-card__title a:focus-visible { color: var(--g4u-accent); }

.g4u-event-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3em var(--g4u-space-small);
	margin: .6em 0 0;
	color: var(--g4u-text-muted);
	font-size: var(--g4u-meta-size);
	line-height: 1.45;
}

.g4u-event-card__city {
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-weight: var(--g4u-weight-strong);
}

/* Kalendarz przy terminie jest w akcencie — tak samo jak glif `\E9B7` na centrali. */
.g4u-event-card__when {
	display: inline-flex;
	align-items: center;
	gap: .5em;
}

.g4u-event-card__when .g4u-icon { color: var(--g4u-accent); flex-shrink: 0; }

.g4u-event-card__more { margin: .8em 0 0; }

/* Cena po prawej krawędzi wiersza, z ikoną biletu — jak `.sc_events_item_price`. */
.g4u-event-card__price {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	flex: 0 0 auto;
	margin: .3em 0 0 var(--g4u-space-medium);
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: var(--g4u-event-card-price);
	font-weight: var(--g4u-weight-medium);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	white-space: nowrap;
}

.g4u-event-card__price .g4u-icon { color: var(--g4u-accent); flex-shrink: 0; }

/* Pasek „Na to wydarzenie:" — na centrali dwie kolumny po połowie kontenera:
   podpis po lewej, licznik w ramce po prawej. */
.g4u-event-card__stock {
	flex: 1 0 100%;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--g4u-space-small);
	margin-top: var(--g4u-space-medium);
}

@media (min-width: 900px) {
	.g4u-event-card__stock { grid-template-columns: 1fr 1fr; gap: var(--g4u-space-medium); }
}

.g4u-event-card__stock-label {
	margin: 0;
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: var(--g4u-h3-size);
	font-weight: var(--g4u-weight-strong);
	line-height: 1.05;
	letter-spacing: -.01em;
	text-align: center;
	text-wrap: balance;
}

.g4u-event-card__stock-box {
	padding: var(--g4u-space-small) var(--g4u-space-medium);
	border: 1px solid var(--g4u-border);
	text-align: center;
	transition: border-color var(--g4u-transition);
}

.g4u-event-card__stock-box:hover { border-color: var(--g4u-accent); }
.g4u-event-card__stock-box .g4u-stock { letter-spacing: .1em; }

/* Archiwum: te same kafelki, przygaszone. Minione terminy są kontekstem,
   nie ofertą — nie mają konkurować z nadchodzącymi. */
.g4u-event-cards--past .g4u-event-card__title a { color: var(--g4u-text); }
.g4u-event-cards--past .g4u-event-card__day { color: var(--g4u-text); }

@media (max-width: 767px) {
	.g4u-event-card__date {
		flex: 1 0 100%;
		margin: 0 0 var(--g4u-space-small);
		padding-top: 0;
	}

	.g4u-event-card__thumb {
		flex: 1 0 100%;
		margin: 0 0 var(--g4u-space-small);
	}

	.g4u-event-card__price { margin-left: 0; }
}

/* Zakup jako link ze strzałką. Rząd wypełnionych prostokątów na liście kilku
   wydarzeń przytłacza i psuje powagę całej sekcji. */
.g4u-link-arrow {
	color: var(--g4u-accent);
	font-family: var(--g4u-font-ui);
	font-size: 12px;
	font-weight: var(--g4u-weight-strong);
	letter-spacing: .1em;
	line-height: 1.7;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.g4u-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .4em;
}

.g4u-link-arrow .g4u-icon {
	transition: transform var(--g4u-dur-icon) var(--g4u-ease-out);
}

.g4u-link-arrow:hover,
.g4u-link-arrow:focus-visible { color: var(--g4u-accent-hover); }
.g4u-link-arrow:hover .g4u-icon,
.g4u-link-arrow:focus-visible .g4u-icon { transform: translate(2px, -2px); }

.g4u-link-arrow--quiet { color: var(--g4u-text-muted); }

@media (max-width: 899px) {
	.g4u-event-row {
		grid-template-columns: minmax(0, 1fr);
		gap: .5rem 0;
	}

	.g4u-event-row__meta,
	.g4u-event-row__action { text-align: left; }
	.g4u-event-row__meta { display: flex; flex-wrap: wrap; gap: var(--g4u-space-small); }
	.g4u-event-row__cost { margin: 0; line-height: 1.7; }
}

/* --- CTA -------------------------------------------------------------------- */

.g4u-cta__action { margin: 0; }

/* --- Specjalizacja ----------------------------------------------------------- */

.g4u-specialization__title { margin-top: 0; }

.g4u-specialization__value {
	margin: 0;
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: var(--g4u-h4-size);
	font-weight: var(--g4u-weight-strong);
	line-height: 1.3;
}

/* --- Pozostałe oddziały ------------------------------------------------------ */

.g4u-branches__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--g4u-border);
}

.g4u-branches__list li { border-bottom: 1px solid var(--g4u-border); }

.g4u-branches__list a {
	display: block;
	padding: .75rem 0;
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: 1.0625rem;
	font-weight: var(--g4u-weight-strong);
	text-decoration: none;
}

.g4u-branches__list a:hover,
.g4u-branches__list a:focus-visible { color: var(--g4u-accent); }

/* --- Strona wydarzenia ---------------------------------------------------------
 * Układ odtwarza stronę wydarzenia na centrali, gdzie pas obrazu, nadtytuł i tytuł
 * to JEDEN blok, a nie trzy sekcje rozsunięte pełnym odstępem. Mierzone na
 * `/wydarzenie/…-gdansk-08-07-2026/`: nadtytuł Montserrat 600 / 35 px, tytuł 700 /
 * 47 px, oba wyśrodkowane i białe; proza DM Sans 17 px na całą szerokość kontenera.
 *
 * Rytm: sekcje hero → tytuł → bilety → szczegóły domykają się bez linii i bez
 * pełnego `--g4u-sec-pad`, bo razem są nagłówkiem strony. Linie sekcji wracają
 * dopiero od organizatora.
 */

.g4u-event__overline {
	margin: 0 0 var(--g4u-space-tiny);
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: var(--g4u-h3-size);
	font-weight: var(--g4u-weight-strong);
	line-height: 1.1;
	letter-spacing: -.01em;
	text-align: center;
}

.g4u-event__title {
	max-width: 34ch;
	margin: 0 auto;
	font-size: var(--g4u-h2-size);
	line-height: 1.05;
	letter-spacing: -.02em;
	text-align: center;
	text-wrap: balance;
}

/* Pas obrazu w całości: plakat wydarzenia niesie tytuł i datę, więc kadrowanie
   zabierałoby mu treść. Wysokość ograniczona, żeby zdjęcie panoramiczne nie
   zjadło pierwszego ekranu. */
.g4u-event__hero {
	display: flex;
	justify-content: center;
}

.g4u-event__hero img {
	width: auto;
	max-width: 100%;
	max-height: var(--g4u-event-hero-max-h);
	object-fit: contain;
}

.g4u-event__description { color: var(--g4u-text); }

/* Powtórzone CTA na końcu treści — wyśrodkowane, jak na centrali. Przycisk
   dociśnięty do lewej krawędzi wyglądał jak zapomniany element listy. */
.g4u-section--event-cta-repeat > .g4u-container { text-align: center; }
.g4u-event__cta { margin: 0; }

.g4u-event__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--g4u-border);
}

.g4u-event__meta-row {
	padding: var(--g4u-space-small) var(--g4u-space-small) var(--g4u-space-small) 0;
	border-right: 1px solid var(--g4u-border);
}

.g4u-event__meta-row:last-child { border-right: 0; }

.g4u-event__meta dt {
	margin-bottom: .4rem;
	color: var(--g4u-text-muted);
	font-family: var(--g4u-font-ui);
	font-size: 11px;
	font-weight: var(--g4u-weight-strong);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.g4u-event__meta dd {
	margin: 0;
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: 1.0625rem;
	font-weight: var(--g4u-weight-strong);
	line-height: 1.35;
}

.g4u-tickets__title { margin: 0; font-size: var(--g4u-h5-size); }

.g4u-stock {
	margin: 0;
	color: var(--g4u-heading);
	font-family: var(--g4u-font-ui);
	font-size: var(--g4u-meta-size);
	letter-spacing: .08em;
}

.g4u-stock--out { color: var(--g4u-accent-2); }
.g4u-stock a { color: inherit; text-decoration: none; }

.g4u-event__branch { margin: 0; }

.g4u-event__branch a {
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: var(--g4u-h5-size);
	font-weight: var(--g4u-weight-strong);
	text-decoration: none;
}

.g4u-event__branch a:hover { color: var(--g4u-accent); }

/* --- Struktura dokumentu ----------------------------------------------------
 * Sekcje sąsiadujące o tej samej powierzchni rozdziela włosowa linia zamiast
 * samego odstępu. To ona daje stronie charakter dokumentu, a nie zestawu bloków.
 */
/* Świadomie bez linii między każdą parą sekcji — przy dziewięciu sekcjach strona
   wyglądała jak tabela. Rozdziela je sam rytm pionowy, a włosowe linie zostają
   tam, gdzie faktycznie coś porządkują: w listach, faktach i pasach. */

/* --- Stopka ------------------------------------------------------------------ */

.g4u-footer__title { color: var(--g4u-text-muted); }

.g4u-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--g4u-space-medium);
}

.g4u-footer__links a { font-size: var(--g4u-meta-size); }

/* --- CTA: nagłówek po lewej, przycisk po prawej (wzorzec Webflow) ---------- */

.g4u-cta {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--g4u-space-small);
}

@media (min-width: 900px) {
	.g4u-cta {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--g4u-space-large);
		align-items: center;
	}
}

.g4u-cta__copy > .g4u-eyebrow { margin-bottom: var(--g4u-space-tiny); }

.g4u-cta__text {
	max-width: 48ch;
	margin: var(--g4u-space-tiny) 0 0;
	color: var(--g4u-text-muted);
}

.g4u-cta__action { margin: 0; }

/* --- Pasek biletowy (wzorzec DICE) -----------------------------------------
 * Jedyny element na stronie z ramką. To celowe: na stronie zbudowanej z samych
 * linii ramka natychmiast wyróżnia to, po co odwiedzający tu przyszedł.
 */
.g4u-ticket-bar {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--g4u-space-small);
	padding: var(--g4u-space-medium);
	border: 1px solid var(--g4u-border);
}

@media (min-width: 700px) {
	.g4u-ticket-bar {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--g4u-space-medium);
		align-items: center;
	}
}

/* Wyprzedane: bez przycisku ramka miałaby pustą prawą kolumnę i komunikat
   dociśnięty do lewej krawędzi. Jedna kolumna, treść na środku. */
.g4u-ticket-bar--closed,
.g4u-ticket-bar--closed .g4u-ticket-bar__info {
	grid-template-columns: 1fr;
	text-align: center;
}

.g4u-ticket-bar__info > .g4u-eyebrow { margin-bottom: .5rem; }

.g4u-ticket-bar__price {
	margin: 0;
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: var(--g4u-h4-size);
	font-weight: var(--g4u-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
	line-height: 1.1;
}

.g4u-ticket-bar__stock { margin-top: .5rem; }
.g4u-ticket-bar__action { margin: 0; }

/* Podręczny pasek zakupu (wzorzec DICE/Eventbrite): wjeżdża od dołu, gdy
   główny pasek biletowy ucieknie za górną krawędź ekranu; steruje nim
   assets/js/ticket.js. Wychodzi szybciej, niż wchodzi — jak każda warstwa. */
.g4u-ticket-float {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 800;
	background-color: var(--g4u-bg);
	border-top: 1px solid var(--g4u-border);
	transform: translateY(100%);
	transition: transform var(--g4u-dur-exit) var(--g4u-ease-out);
}

.g4u-ticket-float.is-visible {
	transform: none;
	transition: transform var(--g4u-dur-enter) var(--g4u-ease-out);
}

.g4u-ticket-float__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--g4u-space-small);
	padding-top: var(--g4u-space-tiny);
	padding-bottom: var(--g4u-space-tiny);
}

/* Przycisk trzyma prawą krawędź także bez etykiety po lewej. */
.g4u-ticket-float__row .g4u-button { margin-left: auto; }

.g4u-ticket-float__price {
	margin: 0;
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: var(--g4u-h6-size);
	font-weight: var(--g4u-weight-strong);
	font-variant-numeric: tabular-nums;
}

/* --- Szablony pozostałe: strona, wyniki, 404 ------------------------------- */

.g4u-page__title,
.g4u-section--error404 h1,
.g4u-section--search h1 {
	max-width: 24ch;
	margin-top: 0;
	letter-spacing: -.02em;
}

.g4u-page__content { max-width: 68ch; }

.g4u-search__list {
	margin: var(--g4u-space-small) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--g4u-border);
}

.g4u-search__list li { border-bottom: 1px solid var(--g4u-border); }

.g4u-search__list a {
	display: block;
	padding: .85rem 0;
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-weight: var(--g4u-weight-strong);
	text-decoration: none;
}

.g4u-search__list a:hover { color: var(--g4u-accent); }

/* --- Strona osoby ----------------------------------------------------------- */

.g4u-section--person .g4u-person__photo { max-width: 320px; margin-bottom: var(--g4u-space-small); }
.g4u-section--person .g4u-person__name { margin: 0 0 .3rem; font-size: var(--g4u-h2-size); letter-spacing: -.02em; }
.g4u-section--person .g4u-person__position { font-size: 1rem; }
.g4u-person__brief { max-width: 62ch; margin-top: var(--g4u-space-small); color: var(--g4u-text-muted); }

.g4u-person__contact {
	margin: var(--g4u-space-small) 0 0;
	padding: var(--g4u-space-small) 0 0;
	border-top: 1px solid var(--g4u-border);
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--g4u-space-small);
	font-size: var(--g4u-meta-size);
}

/* --- Tożsamość oddziału ------------------------------------------------------
 * Elementy, które odróżniają landing jednej placówki od strony centrali.
 */

.g4u-hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 var(--g4u-space-small);
	margin: var(--g4u-space-small) 0 0;
	color: var(--g4u-text-muted);
	font-family: var(--g4u-font-ui);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.g4u-hero__meta span + span::before {
	content: "·";
	margin-right: var(--g4u-space-small);
}

/* --- Fakty (wzorzec Legory) --------------------------------------------------- */

.g4u-facts__statement {
	max-width: 56ch;
	margin: 0 0 var(--g4u-space-medium);
	color: var(--g4u-text);
	font-family: var(--g4u-font-heading);
	font-size: var(--g4u-h5-size);
	font-weight: var(--g4u-weight-strong);
	line-height: 1.4;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.g4u-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 0;
	border-top: 1px solid var(--g4u-border);
}

.g4u-fact {
	padding: var(--g4u-space-medium) var(--g4u-space-small) var(--g4u-space-small) 0;
	border-right: 1px solid var(--g4u-border);
}

.g4u-fact:last-child { border-right: 0; }

.g4u-fact__value {
	margin: 0;
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	font-weight: var(--g4u-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.035em;
	line-height: 1;
}

.g4u-fact__label {
	max-width: 18ch;
	margin: .7rem 0 0;
	color: var(--g4u-text-muted);
	font-size: var(--g4u-meta-size);
	line-height: 1.4;
}

/* --- Oddział jako miejsce (wzorzec Koto) --------------------------------------
 * Trzy kolumny rozdzielone włosowymi liniami: miejsce, ludzie, kontakt.
 */
.g4u-office {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--g4u-space-medium);
	padding-top: var(--g4u-space-medium);
	border-top: 1px solid var(--g4u-border);
}

@media (min-width: 900px) {
	.g4u-office {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 0;
	}

	/* Kolumny rozdzielone włosowymi liniami — dokończenie wzorca Koto
	   („miejsce, ludzie, kontakt — w trzech kolumnach rozdzielonych liniami"). */
	.g4u-office > * { padding-right: var(--g4u-space-large); }

	.g4u-office > * + * {
		border-left: 1px solid var(--g4u-border);
		padding-left: var(--g4u-space-large);
	}

	.g4u-office > :last-child { padding-right: 0; }
}

/* Fakty w pierwszej kolumnie — wzorzec Legory: duża liczba, podpis pod nią,
   wiersze rozdzielone włosowymi liniami. W DOM etykieta (dt) stoi przed
   wartością (dd), kolejność wizualną odwraca flex — semantyka zostaje. */
.g4u-office__facts { margin: 0; }

.g4u-office__fact {
	display: flex;
	flex-direction: column-reverse;
	padding: var(--g4u-space-small) 0;
	border-top: 1px solid var(--g4u-border);
}

.g4u-office__fact:first-child { padding-top: 0; border-top: 0; }

.g4u-office__fact dt {
	margin-top: .45rem;
	color: var(--g4u-text-muted);
	font-size: var(--g4u-meta-size);
	line-height: 1.4;
}

.g4u-office__fact dd {
	margin: 0;
	font-family: var(--g4u-font-heading);
	font-size: clamp(2rem, 3vw, 2.75rem);
	font-weight: var(--g4u-weight-bold);
	letter-spacing: -.03em;
	line-height: 1;
}

.g4u-office__city {
	margin: 0;
	font-size: var(--g4u-h3-size);
	line-height: 1;
	letter-spacing: -.03em;
}

.g4u-office__index {
	margin: var(--g4u-space-tiny) 0 0;
	color: var(--g4u-text-muted);
	font-family: var(--g4u-font-ui);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.g4u-office__person {
	margin: 0 0 var(--g4u-space-small);
	line-height: 1.4;
}

.g4u-office__person a {
	display: block;
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: 1.0625rem;
	font-weight: var(--g4u-weight-strong);
	text-decoration: none;
}

.g4u-office__person a:hover,
.g4u-office__person a:focus-visible { color: var(--g4u-accent); }

.g4u-office__role {
	display: block;
	color: var(--g4u-text-muted);
	font-size: var(--g4u-meta-size);
}

.g4u-office__line { margin: 0 0 .35rem; }

.g4u-office__line a {
	color: var(--g4u-text);
	font-family: var(--g4u-font-ui);
	font-size: var(--g4u-meta-size);
	text-decoration: none;
}

.g4u-office__line a:hover { color: var(--g4u-accent); }

.g4u-office__address {
	margin: var(--g4u-space-small) 0 0;
	color: var(--g4u-text-muted);
	font-family: var(--g4u-font-ui);
	font-size: var(--g4u-meta-size);
	line-height: 1.6;
}


/* --- Akcent jako aktywny element ----------------------------------------------
 * Indygo wraca tam, gdzie coś się dzieje: kropka domykająca nazwę miasta,
 * przyciski zakupu w wierszach, wartości faktów, aktywne stany. Kolor znaczy
 * „tu można działać" — dlatego nie trafia na elementy czysto opisowe.
 */

.g4u-hero__period { color: var(--g4u-accent); }

.g4u-hero__lead strong { color: var(--g4u-accent); }

.g4u-office__fact dd { color: var(--g4u-accent); }

/* Wiersz wydarzenia reaguje na wskazanie całą powierzchnią. */
.g4u-event-row { position: relative; }

.g4u-event-row::before {
	content: "";
	position: absolute;
	inset: 0 calc(-1 * var(--g4u-space-small));
	background-color: var(--g4u-bg-alt);
	opacity: 0;
	transition: opacity var(--g4u-dur-hover) var(--g4u-ease-out);
	pointer-events: none;
}

.g4u-event-row:hover::before,
.g4u-event-row:focus-within::before { opacity: 1; }

.g4u-event-row > * { position: relative; }

.g4u-event-row:hover .g4u-event-row__title a { color: var(--g4u-accent); }

/* Przycisk w wierszu jest mniejszy niż globalny small — to element listy. */
.g4u-event-row .g4u-button--small {
	padding: 10px 20px;
	font-size: 11px;
}

@media (max-width: 899px) {
	.g4u-event-row::before { inset: 0 calc(-1 * var(--g4u-space-tiny)); }
}


/* --- Zespół: pełna siatka na jeden ekran ---------------------------------------
 * Wszyscy widoczni bez przesuwania. Kolumny z minmax(): sześć osób daje jeden
 * rząd na desktopie, dwa na tablecie, dwie kolumny na telefonie.
 */
.g4u-team {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--g4u-gap);
	margin: var(--g4u-space-medium) 0 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 599px) {
	.g4u-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Obrazy w figurach: WebP Express opakowuje je w <picture> ------------------ */
.g4u-event__hero picture,
.g4u-hero__image picture,
.g4u-person__photo picture { display: contents; }

/* --- Drobne wskaźniki -----------------------------------------------------------
 * Kropka stanu przy dostępności biletów i przy najbliższym terminie. To stany,
 * nie ozdoby: mówią „sprzedaż trwa" i „to jest najbliżej".
 */
.g4u-stock {
	display: inline-flex;
	align-items: center;
	gap: .55em;
}

.g4u-stock::before {
	content: "";
	width: 7px;
	height: 7px;
	flex-shrink: 0;
	background-color: var(--g4u-accent);
}

.g4u-stock--out::before { background-color: var(--g4u-accent-2); }

@media (prefers-reduced-motion: no-preference) {
	.g4u-stock--in::before { animation: g4u-pulse var(--g4u-dur-pulse) var(--g4u-ease-pulse) infinite; }
}

@keyframes g4u-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

/* Najbliższy termin na liście wydarzeń. */
.g4u-event-row--next .g4u-event-row__date {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	color: var(--g4u-heading);
}

.g4u-event-row--next .g4u-event-row__date::before {
	content: "";
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	background-color: var(--g4u-accent);
}

@media (prefers-reduced-motion: no-preference) {
	.g4u-event-row--next .g4u-event-row__date::before {
		animation: g4u-pulse var(--g4u-dur-pulse) var(--g4u-ease-pulse) infinite;
	}
}

/* --- Partnerzy: pas wordmarków --------------------------------------------------
 * Typografia nagłówkowa w kolorze wyciszonym, pełny kolor przy wskazaniu.
 * Bez space-between: sześć długich nazw łamało się w dziurawe rzędy,
 * a na wąskich ekranach kolumny siatki nachodziły na siebie.
 */
.g4u-partner__plate {
	color: var(--g4u-text-muted);
	font-size: 15px;
	letter-spacing: .01em;
	transition: color var(--g4u-transition);
}

.g4u-partner:hover .g4u-partner__plate { color: var(--g4u-heading); }