/* =========================================================================
 * G4U — WARSTWA BAZOWA
 *
 * Style elementów HTML i podstawowych klas układu. Zbudowane WYŁĄCZNIE
 * na tokenach z tokens.css — w tym pliku nie ma ani jednego dosłownego
 * koloru, rozmiaru w px czy nazwy fontu.
 *
 * Kolejność ładowania: tokens.css → base.css → style.css (motyw)
 *                      → components/*.css (dokładane w miarę powstawania)
 * ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: var(--g4u-root-size);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--g4u-bg);
	color: var(--g4u-text);
	font-family: var(--g4u-font-body);
	font-size: var(--g4u-text-size);
	font-weight: var(--g4u-weight-body);
	line-height: var(--g4u-text-lh);
	-webkit-font-smoothing: antialiased;
}

/* --- Nagłówki ---------------------------------------------------------
 * Rozmiary, interlinie i marginesy odwzorowują skalę motywu Assembly.
 * Marginesy są w `em`, więc skalują się razem z rozmiarem nagłówka —
 * to one prowadzą rytm pionowy strony.
 */
h1, h2, h3, h4, h5, h6 {
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	letter-spacing: var(--g4u-tracking-heading);
	text-transform: none;
}

h1 { font-size: var(--g4u-h1-size); line-height: var(--g4u-h1-lh); font-weight: var(--g4u-weight-bold);   margin: var(--g4u-h1-mt) 0 var(--g4u-h1-mb); }
h2 { font-size: var(--g4u-h2-size); line-height: var(--g4u-h2-lh); font-weight: var(--g4u-weight-bold);   margin: var(--g4u-h2-mt) 0 var(--g4u-h2-mb); }
h3 { font-size: var(--g4u-h3-size); line-height: var(--g4u-h3-lh); font-weight: var(--g4u-weight-strong); margin: var(--g4u-h3-mt) 0 var(--g4u-h3-mb); }
h4 { font-size: var(--g4u-h4-size); line-height: var(--g4u-h4-lh); font-weight: var(--g4u-weight-strong); margin: var(--g4u-h4-mt) 0 var(--g4u-h4-mb); }
h5 { font-size: var(--g4u-h5-size); line-height: var(--g4u-h5-lh); font-weight: var(--g4u-weight-strong); margin: var(--g4u-h5-mt) 0 var(--g4u-h5-mb); }
h6 { font-size: var(--g4u-h6-size); line-height: var(--g4u-h6-lh); font-weight: var(--g4u-weight-strong); margin: var(--g4u-h6-mt) 0 var(--g4u-h6-mb); }

/* Pierwszy nagłówek w sekcji nie odsuwa się od jej górnej krawędzi. */
.g4u-section > .g4u-container > :first-child,
.g4u-section > .g4u-container > .g4u-section__label + * {
	margin-top: 0;
}

p {
	margin: 0 0 var(--g4u-p-mb);
}

/* --- Odnośniki --------------------------------------------------------- */
a {
	color: var(--g4u-accent);
	text-decoration: none;
	transition: color var(--g4u-transition);
}

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

:focus-visible {
	outline: 2px solid var(--g4u-accent);
	outline-offset: 2px;
}

/* --- Media -------------------------------------------------------------- */
img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

figure {
	margin: 0;
}

/* --- Listy -------------------------------------------------------------- */
ul, ol {
	margin: 0 0 var(--g4u-p-mb);
	padding-left: 1.2em;
}

/* --- Kontener i sekcja --------------------------------------------------- */
.g4u-container {
	width: 100%;
	max-width: var(--g4u-container);
	margin-inline: auto;
	padding-inline: var(--g4u-container-pad);
}

.g4u-section {
	padding: 0;
	background-color: var(--g4u-bg);
	color: var(--g4u-text);
}

/* Schemat sekcji: każda otwiera się pełną włosową linią, po niej stały odstęp,
   treść i stały odstęp przed następną linią. Jeden rytm dla całej strony —
   żadnych wyjątków per sekcja. Hero jest jedynym wyjątkiem: zaczyna dokument,
   więc nie ma nad sobą linii. */
.g4u-section > .g4u-container {
	border-top: 1px solid var(--g4u-border);
	padding-top: var(--g4u-sec-gap);
	padding-bottom: var(--g4u-sec-pad);
}

.g4u-section--hero > .g4u-container,
.g4u-section--event-hero > .g4u-container {
	border-top: 0;
	padding-top: clamp(56px, 8vw, 110px);
}

/* Nagłówek strony wydarzenia to JEDEN blok: pas obrazu, nadtytuł, tytuł, pasek
   biletowy i szczegóły. Na centrali nie ma między nimi ani linii, ani pełnego
   odstępu sekcji — dopiero pod nimi zaczyna się treść. Bez tego wyjątku strona
   krótkiego wydarzenia to cztery pola tekstu w czterech ekranach pustki. */
.g4u-section--event-hero > .g4u-container,
.g4u-section--event-title > .g4u-container,
.g4u-section--event-tickets > .g4u-container,
.g4u-section--event-meta > .g4u-container {
	border-top: 0;
	padding-bottom: 0;
}

.g4u-section--event-title > .g4u-container,
.g4u-section--event-tickets > .g4u-container,
.g4u-section--event-meta > .g4u-container,
.g4u-section--event-description > .g4u-container {
	padding-top: var(--g4u-sec-gap);
}

.g4u-section--event-description > .g4u-container { border-top: 0; }

/* Strona „Wydarzenia" nie ma nagłówka strony — centrala ukrywa go arkuszem
   wklejonym w treść. Dokument otwiera pas hero, i to on niesie `h1`. Pas idzie
   na całą szerokość okna i sam trzyma swoje światło, więc kontener sekcji nie
   dokłada tu ani linii, ani odstępów. */
.g4u-section--events-hero > .g4u-container {
	max-width: none;
	border-top: 0;
	padding: 0;
}

.g4u-section--events-upcoming > .g4u-container,
.g4u-section--events-feature > .g4u-container,
.g4u-section--events-past > .g4u-container {
	border-top: 0;
}

/* Jeden styl nagłówka sekcji — rozmiar, waga i odstęp identyczne wszędzie. */
.g4u-section-title {
	max-width: 26ch;
	margin: 0 0 var(--g4u-space-medium);
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: var(--g4u-h3-size);
	font-weight: var(--g4u-weight-bold);
	line-height: 1.1;
	letter-spacing: -.02em;
	text-wrap: balance;
}

/* --- Siatki -------------------------------------------------------------
 * Liczba kolumn wynika z `minmax()`, nie z progów — dzięki temu siatka
 * schodzi płynnie i nie wymaga osobnych media queries per komponent.
 */
.g4u-grid {
	display: grid;
	gap: var(--g4u-gap);
}

.g4u-grid--team    { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.g4u-grid--events  { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.g4u-grid--stats   { grid-template-columns: repeat(auto-fit,  minmax(180px, 1fr)); }
.g4u-grid--split   { grid-template-columns: 1fr; }

@media (min-width: 768px) {
	.g4u-grid--split { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* --- Przycisk ------------------------------------------------------------
 * Odwzorowanie `.sc_button` motywu: prostokąt bez zaokrągleń, wersaliki,
 * rozstrzelone litery. Font UI to Montserrat — tak samo, jak wymuszają to
 * dziś wszystkie przyciski na stronach oddziałów i wydarzeń.
 */
.g4u-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: top;
	max-width: 100%;
	padding: var(--g4u-button-padding);
	border: 0;
	border-radius: var(--g4u-button-radius);
	background-color: var(--g4u-button-bg);
	color: var(--g4u-button-text);
	font-family: var(--g4u-button-font);
	font-size: var(--g4u-button-size);
	font-weight: var(--g4u-button-weight);
	line-height: var(--g4u-button-lh);
	letter-spacing: var(--g4u-button-tracking);
	text-transform: var(--g4u-button-transform);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--g4u-transition), color var(--g4u-transition);
}

.g4u-button:hover,
.g4u-button:focus-visible {
	background-color: var(--g4u-button-bg-hover);
	color: var(--g4u-button-text);
}

.g4u-button--small { padding: var(--g4u-button-padding-sm); }
.g4u-button--large { padding: var(--g4u-button-padding-lg); }

.g4u-button--outline {
	background-color: transparent;
	border: 2px solid var(--g4u-button-bg);
	color: var(--g4u-accent);
	padding: 16px 38px;
}

.g4u-button--outline:hover,
.g4u-button--outline:focus-visible {
	background-color: var(--g4u-button-bg);
	color: var(--g4u-button-text);
}

/* Wariant „link ze strzałką" — odpowiednik `.sc_button_simple`. */
.g4u-button--plain {
	padding: 0;
	background: none;
	color: var(--g4u-accent);
}

.g4u-button--plain:hover,
.g4u-button--plain:focus-visible {
	background: none;
	color: var(--g4u-accent-hover);
}

.g4u-button--shadow {
	box-shadow: var(--g4u-button-shadow);
}

/* --- Pola formularzy ----------------------------------------------------
 * Motyw używa pól bez ramki, z samą linią u dołu.
 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select {
	width: 100%;
	padding: 0.6em 0;
	border: 0;
	border-bottom: 1px solid var(--g4u-input-border);
	border-radius: var(--g4u-radius);
	background-color: var(--g4u-input-bg);
	color: var(--g4u-input-text);
	font-family: var(--g4u-font-body);
	font-size: var(--g4u-text-size);
	transition: border-color var(--g4u-transition), color var(--g4u-transition);
}

input:hover,
textarea:hover,
select:hover,
input:focus,
textarea:focus,
select:focus {
	border-bottom-color: var(--g4u-input-border-hover);
	color: var(--g4u-input-text-focus);
	outline: none;
}

/* --- Elementy pomocnicze -------------------------------------------------- */
.g4u-meta {
	color: var(--g4u-text-muted);
	font-size: var(--g4u-meta-size);
	line-height: var(--g4u-meta-lh);
}

.g4u-skip-link {
	position: absolute;
	left: -9999px;
}

.g4u-skip-link:focus {
	left: 1rem;
	top: 1rem;
	z-index: 100;
	padding: 0.5rem 1rem;
	background-color: var(--g4u-bg);
	color: var(--g4u-heading);
}

/* --- Szacunek dla ustawień systemowych ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Kafelek wydarzenia jako pionowa karta został usunięty razem z markupem, który
   go używał: archiwum i „Inne nadchodzące wydarzenia" korzystają teraz z tych
   samych komponentów list, co strona „Wydarzenia" i landing. Klasa `.g4u-event-card`
   należy dziś do katalogu wydarzeń (landing.css) i jest układem POZIOMYM — stary
   `flex-direction: column` stąd wywracał go na pion. */

/* --- Osoba w siatce zespołu ------------------------------------------------ */
.g4u-person__name { margin: .6rem 0 .2rem; font-size: var(--g4u-h6-size); line-height: var(--g4u-h6-lh); }
.g4u-person__name a { color: var(--g4u-heading); text-decoration: none; }
.g4u-person__name a:hover { color: var(--g4u-accent); }

.g4u-person__position { margin: 0; color: var(--g4u-text-muted); font-size: var(--g4u-meta-size); }

.g4u-person__socials { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 0; padding: 0; list-style: none; font-size: var(--g4u-meta-size); }

.g4u-slider--static .g4u-slider__controls { display: none; }


/* --- Powierzchnie przeglądarki ----------------------------------------------
 * Zaznaczenie, karetka, pasek przewijania i podkreślenia mają domyślne style,
 * które nie należą do żadnego systemu. Ubieramy je w paletę — inaczej strona
 * zdradza, że została złożona, a nie zbudowana.
 */
::selection {
	background-color: var(--g4u-accent);
	color: var(--g4u-on-accent);
}

html { caret-color: var(--g4u-accent); scrollbar-color: var(--g4u-border) transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--g4u-border); }
::-webkit-scrollbar-thumb:hover { background-color: var(--g4u-border-hover); }

a { text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* Liczby w kolumnach i terminach mają się wyrównywać. */
time, .g4u-event-row__date, .g4u-event-row__cost, .g4u-office__fact dd { font-variant-numeric: tabular-nums; }