/*
 * Tokeny projektu — jedyne miejsce z wartościami.
 *
 * Kolory mapują paletę globalną Astry (Wygląd → Kastomizer → Kolory globalne),
 * więc zmiana koloru u klienta to jedno pole w panelu, a nie zmiana w blokach.
 * Bloki używają wyłącznie var(--tc-*) i nigdy nie wpisują hexów ani font-family.
 */

:root {
	/* Kolory — nazwy slotów Astry: 0 Brand, 1 Alternate Brand, 2 Headings, 3 Text,
	   4 Primary Background, 5 Secondary Background, 6 Alternate Background,
	   7 Subtle Background, 8 Other Supporting */
	--tc-color-primary: var(--ast-global-color-0);
	--tc-color-primary-hover: var(--ast-global-color-1);
	--tc-color-heading: var(--ast-global-color-2);
	--tc-color-text: var(--ast-global-color-3);
	--tc-color-bg: var(--ast-global-color-4);
	--tc-color-bg-soft: var(--ast-global-color-5);
	--tc-color-bg-dark: var(--ast-global-color-6);
	--tc-color-bg-subtle: var(--ast-global-color-7);
	--tc-color-border: var(--ast-global-color-7);
	--tc-color-accent: var(--ast-global-color-8);

	/* Nowe Pogłosy: niebieski ze slotu 1 to kolor etykiet sekcji, szarość ze slotu 7
	   to tekst na ciemnym tle, a akcent ze slotu 8 to placeholdery i napisy pomocnicze. */
	--tc-color-label: var(--ast-global-color-1);
	--tc-color-text-on-dark: var(--ast-global-color-7);
	--tc-color-muted: var(--ast-global-color-8);

	/* Poświaty ciemnych sekcji (zielona z lewej, niebieska z prawej). Celowo poza paletą:
	   to inne odcienie niż limonka i niebieski marki, dobrane do świecenia na czerni. */
	--tc-glow-zielona: rgb(110 230 0 / 30%);
	--tc-glow-zielona-slaba: rgb(80 190 0 / 11%);
	--tc-glow-niebieska: rgb(0 110 255 / 36%);
	--tc-glow-niebieska-slaba: rgb(0 80 220 / 13%);

	/* Czerwień błędu jest poza paletą marki celowo: komunikat o błędzie ma być
	   czytelny niezależnie od tego, jakie kolory ma klient. */
	--tc-color-error: #e5002b;

	/* Rytm pionowy sekcji — zmiana tu przestraja całą stronę */
	--tc-space-section: clamp(72px, 9vw, 128px);
	--tc-space-section-m: clamp(64px, 7vw, 80px);
	--tc-space-section-s: clamp(56px, 6vw, 64px);
	--tc-space-xs: 0.5rem;
	--tc-space-s: 1rem;
	--tc-space-m: 1.5rem;
	--tc-space-l: 2.5rem;
	--tc-space-xl: 4rem;

	/* Typografia: rodzinę ustawia Astra, tu tylko skala rozmiarów.
	   Wartości z projektu w px, nie w rem: Astra ustawia html na 93,75% (15px),
	   więc rem dawałby wszystko o 6,25% mniejsze niż w projekcie. */
	--tc-font-h1: clamp(34px, 4.6vw, 60px);
	--tc-font-h2: clamp(30px, 3.4vw, 46px);
	--tc-font-h3: clamp(24px, 2.6vw, 36px);
	--tc-font-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
	--tc-font-text: 15px;
	--tc-font-small: 14px;
	--tc-font-label: 13px;
	--tc-font-button: 12px;
	--tc-font-mikro: clamp(9px, 0.9vw, 11px);
	--tc-font-termin: clamp(15px, 1.3vw, 18px);
	--tc-font-licznik: clamp(30px, 4.4vw, 62px);
	--tc-font-data: clamp(14px, 1.2vw, 17px);
	--tc-font-meta: 11px;
	--tc-font-karta: 17px;
	--tc-line-tight: 1.06;
	--tc-line-normal: 1.75;
	--tc-tracking-label: 0.16em;
	--tc-tracking-button: 0.06em;

	/* Projekt ma ostre krawędzie: przyciski, zdjęcia i karty bez zaokrągleń. */
	--tc-radius: 0;
	--tc-radius-s: 6px;
	--tc-radius-button: 0;
	--tc-shadow: 0 10px 30px rgb(0 0 0 / 8%);
	--tc-transition: 200ms ease;

	--tc-container: 1140px;
	--tc-container-narrow: 640px;
	--tc-gutter: clamp(16px, 4vw, 32px);
}

/*
 * Szkielet sekcji — wspólny dla wszystkich bloków, żeby szerokości i rytm pionowy
 * były identyczne niezależnie od tego, kto pisał blok. Blok odpowiada tylko za swoje wnętrze.
 */

.tc-section {
	padding-block: var(--tc-space-section);
}

.tc-container {
	width: 100%;
	/* Szerokość treści to --tc-container; margines boczny dochodzi z zewnątrz. */
	max-width: calc(var(--tc-container) + 2 * var(--tc-gutter));
	margin-inline: auto;
	padding-inline: var(--tc-gutter);
}

.tc-container--waski {
	max-width: var(--tc-container-narrow);
}

/* Etykieta nad tytułem sekcji („POZNAJ NASZ FESTIWAL”, „OŚ CZASU”).
   Selektor z .tc-section, bo Astra daje akapitom w treści własny margines (.entry-content p). */
.tc-section .tc-section__label {
	margin: 0 0 var(--tc-space-xs);
	color: var(--tc-color-label);
	font-size: var(--tc-font-label);
	font-weight: 600;
	letter-spacing: var(--tc-tracking-label);
	text-transform: uppercase;
}

/* Nagłówek sekcji: tytuł plus opcjonalna zajawka, zawsze ten sam odstęp do treści. */
.tc-section__header {
	max-width: var(--tc-container-narrow);
	margin-bottom: var(--tc-space-l);
}

.tc-section__title {
	margin: 0;
	font-size: var(--tc-font-h2);
	line-height: var(--tc-line-tight);
	color: var(--tc-color-heading);
}

.tc-section__lead {
	margin: var(--tc-space-s) 0 0;
	font-size: var(--tc-font-lead);
	line-height: var(--tc-line-normal);
}

/*
 * Przycisk jest wspólny dla kilku bloków, więc mieszka tu, a nie w CSS jednego z nich.
 * Selektor z .tc-section jest potrzebny, żeby wygrać z podkreśleniem linków z Astry
 * (.entry-content a) bez sięgania po !important.
 */
.tc-section a.tc-button,
.tc-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 17px 24px;
	border: 1px solid transparent;
	border-radius: var(--tc-radius-button);
	background-color: var(--tc-color-bg);
	color: var(--tc-color-heading);
	font-size: var(--tc-font-button);
	font-weight: 800;
	letter-spacing: var(--tc-tracking-button);
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--tc-transition), color var(--tc-transition), border-color var(--tc-transition);
}

/*
 * Stany muszą mieć tę samą specyficzność co reguła bazowa, inaczej selektor
 * z .tc-section wygrywa i hover nie działa wcale.
 */
.tc-section a.tc-button:hover,
.tc-section a.tc-button:focus-visible,
.tc-button:hover,
.tc-button:focus-visible {
	background-color: var(--tc-color-primary);
	color: var(--tc-color-heading);
}

.tc-section a.tc-button:focus-visible,
.tc-button:focus-visible {
	outline: 2px solid var(--tc-color-label);
	outline-offset: 3px;
}

/* Warianty przycisku. Domyślny (bez modyfikatora) to biały — „jasny” z projektu. */
.tc-section a.tc-button--ciemny,
.tc-button--ciemny {
	background-color: var(--tc-color-bg-dark);
	color: var(--tc-color-bg);
}

.tc-section a.tc-button--obrys,
.tc-button--obrys {
	border-color: var(--tc-color-bg);
	background-color: transparent;
	color: var(--tc-color-bg);
}

.tc-section a.tc-button--obrys:hover,
.tc-section a.tc-button--obrys:focus-visible,
.tc-button--obrys:hover,
.tc-button--obrys:focus-visible {
	background-color: var(--tc-color-bg);
	color: var(--tc-color-heading);
}

.tc-section a.tc-button--formularz,
.tc-button--formularz {
	background-color: var(--tc-color-bg-dark);
	color: var(--tc-color-primary);
}

.tc-section a.tc-button--formularz:hover,
.tc-section a.tc-button--formularz:focus-visible,
.tc-button--formularz:hover,
.tc-button--formularz:focus-visible {
	background-color: var(--tc-color-bg);
	color: var(--tc-color-heading);
}

@media (prefers-reduced-motion: reduce) {
	.tc-button {
		transition: none;
	}
}

/* Odstęp przycisku od treści ustala sekcja, nie sam przycisk. */
.tc-section__actions {
	margin-top: var(--tc-space-l);
}

/* Warianty tła sekcji. Redaktor wybiera wariant z listy, nigdy koloru z pipety. */
.tc-section--jasny {
	background-color: var(--tc-color-bg);
}

.tc-section--przygaszony {
	background-color: var(--tc-color-bg-soft);
}

.tc-section--ciemny {
	background-color: var(--tc-color-bg-dark);
	color: var(--tc-color-text-on-dark);
}

.tc-section--limonka {
	background-color: var(--tc-color-primary);
	color: var(--tc-color-heading);
}

.tc-section--ciemny :is(h1, h2, h3, h4) {
	color: var(--tc-color-bg);
}

/*
 * Zdjęcie z efektem „glare”: na najechaniu myszą lekki zoom z obrotem i przelatujący błysk.
 * Znaczniki: <div class="tc-glare" data-glare> <img …> <span class="tc-glare__blask"></span> </div>
 * Wspólne dla wielu bloków, dlatego tutaj. Biel błysku to ten sam token co tło jasne.
 */
.tc-glare {
	position: relative;
	overflow: hidden;
}

.tc-glare img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1) rotate(0deg);
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	will-change: transform;
}

.tc-glare__blask {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(-45deg, transparent 60%, color-mix(in srgb, var(--tc-color-bg) 45%, transparent) 70%, transparent 100%) no-repeat -100% -100% / 250% 250%;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.tc-glare:hover img {
		transform: scale(1.1) rotate(2deg);
	}

	.tc-glare:hover .tc-glare__blask {
		background-position: 100% 100%;
		transition: background-position 0.85s ease;
	}
}

/* Elementy animowane przez assets/js/np.js startują niewidoczne tylko wtedy, gdy JS działa
   (klasa tc-js na <html>), więc bez JS treść jest zawsze widoczna. */
.tc-js [data-reveal],
.tc-js [data-intro] {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tc-js [data-reveal],
	.tc-js [data-intro] {
		opacity: 1;
	}
}

/*
 * Scena: ciemne tło z grafiką i dwiema poświatami (Harmonogram, Aktualności).
 * Kadr jest przyklejony do okna (position: fixed) i przycięty do sekcji przez clip-path,
 * więc dwie sąsiednie sekcje ze sceną pokazują jedno, ciągłe tło — jak sticky-tło w projekcie.
 */
.tc-scena {
	position: absolute;
	inset: 0;
	clip-path: inset(0);
	pointer-events: none;
}

.tc-scena__kadr {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	overflow: hidden;
	background: var(--tc-color-bg-dark) url(../img/harmonogram-bg.jpg) center / cover no-repeat;
}

.tc-scena__poswiata {
	position: absolute;
}

.tc-scena__poswiata span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.tc-scena__poswiata--zielona {
	left: -260px;
	top: 38%;
	width: 560px;
	height: 560px;
	margin-top: -280px;
}

.tc-scena__poswiata--zielona span {
	background: radial-gradient(closest-side, var(--tc-glow-zielona), var(--tc-glow-zielona-slaba) 45%, transparent 100%);
}

.tc-scena__poswiata--niebieska {
	right: -240px;
	top: 28%;
	width: 540px;
	height: 540px;
	margin-top: -270px;
}

.tc-scena__poswiata--niebieska span {
	background: radial-gradient(closest-side, var(--tc-glow-niebieska), var(--tc-glow-niebieska-slaba) 45%, transparent 100%);
}