/*
 * Hero — ładowane tylko na stronach, na których blok występuje (style w block.json).
 * Breakpointy z projektu: desktop od 1080px, mobile poniżej 720px.
 * Czerń przezroczysta w nakładkach to zawsze color-mix z --tc-color-bg-dark.
 */

.tc-section.tc-hero {
	--czern: var(--tc-color-bg-dark);
	/* Szerokość sceny ustawia view.js, gdy hero jest wyższe niż proporcja zdjęcia. */
	--scena-w: 100vw;
	--scena-l: 0px;

	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-block: 0;
}

.tc-hero--podstrona {
	min-height: clamp(520px, 42vw, 640px);
}

/* ---------- Tło: zdjęcie, poświaty, dym, scena, nakładki ---------- */

.tc-hero__tlo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.tc-hero__zdjecie {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% center;
}

.tc-hero__poswiata {
	position: absolute;
}

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

.tc-hero__poswiata--zielona {
	left: -220px;
	top: 62%;
	width: 620px;
	height: 620px;
	margin-top: -310px;
}

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

.tc-hero__poswiata--niebieska {
	right: -180px;
	top: 34%;
	width: 680px;
	height: 680px;
	margin-top: -340px;
}

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

/* Na podstronach poświata leży na zdjęciu, więc jest odrobinę słabsza. */
.tc-hero--podstrona .tc-hero__poswiata {
	opacity: 0.87;
}

.tc-hero__dym {
	position: absolute;
	right: 0;
	bottom: -2px;
	left: 0;
	height: clamp(210px, 29vw, 420px);
	overflow: hidden;
}

.tc-hero__dym-tasma {
	display: flex;
	width: max-content;
	height: 100%;
	animation: tc-hero-dym 90s linear infinite;
	will-change: transform;
}

.tc-hero__dym-tasma img {
	display: block;
	flex: none;
	width: auto;
	height: 100%;
	max-width: none;
}

.tc-hero__dym-odbicie {
	transform: scaleX(-1);
}

@keyframes tc-hero-dym {
	to {
		transform: translateX(-50%);
	}
}

.tc-hero__scena {
	position: absolute;
	top: -70px;
	left: var(--scena-l);
	width: var(--scena-w);
}

.tc-hero__postac {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	transform-origin: 70% 100%;
}

/* Piktogram: siedem słupków z gradientem; wysokość słupka to clip-path (zmienia go audio). */
.tc-hero__piktogram {
	/* Bez z-index: piktogram jest w DOM przed zdjęciem, więc leży pod postacią — jak w projekcie. */
	position: absolute;
	top: calc(var(--scena-w) * 0.155 + 15px);
	right: 23.5%;
	width: clamp(70px, calc(var(--scena-w) * 0.1), 164px);
	aspect-ratio: 164 / 160;
}

.tc-hero__piktogram span {
	position: absolute;
	top: 0;
	width: 7.9%;
	height: 100%;
	background: linear-gradient(var(--czern) 0%, var(--tc-color-primary) 40%, var(--tc-color-label) 60%, var(--czern) 100%);
}

.tc-hero__piktogram span:nth-child(1) { left: 0%; clip-path: inset(33.1% 0 32.9% 0 round 999px); }
.tc-hero__piktogram span:nth-child(2) { left: 15.3%; clip-path: inset(21.3% 0 21.8% 0 round 999px); }
.tc-hero__piktogram span:nth-child(3) { left: 30.6%; clip-path: inset(0% 0 0% 0 round 999px); }
.tc-hero__piktogram span:nth-child(4) { left: 45.8%; clip-path: inset(21.5% 0 21.6% 0 round 999px); }
.tc-hero__piktogram span:nth-child(5) { left: 60.7%; clip-path: inset(39.1% 0 39.4% 0 round 999px); }
.tc-hero__piktogram span:nth-child(6) { left: 76.4%; clip-path: inset(29.5% 0 28.1% 0 round 999px); }
.tc-hero__piktogram span:nth-child(7) { left: 91.7%; clip-path: inset(11.9% 0 11.7% 0 round 999px); }

/* Nakładki przyciemniające: ::before z lewej, element z góry i dołu, ::after tylko na węższych ekranach. */
.tc-hero__cien,
.tc-hero__cien::before,
.tc-hero__cien::after {
	position: absolute;
	inset: 0;
}

.tc-hero__cien::before,
.tc-hero__cien::after {
	content: "";
}

.tc-hero--glowna .tc-hero__cien {
	background: linear-gradient(180deg, var(--czern) 0%, transparent 33%, color-mix(in srgb, var(--czern) 40%, transparent) 66%, color-mix(in srgb, var(--czern) 80%, transparent) 100%);
}

.tc-hero--glowna .tc-hero__cien::before {
	background: linear-gradient(90deg, color-mix(in srgb, var(--czern) 70%, transparent) 0%, color-mix(in srgb, var(--czern) 35%, transparent) 30%, transparent 55%);
}

.tc-hero--glowna .tc-hero__cien::after {
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--czern) 15%, transparent) 0%, color-mix(in srgb, var(--czern) 50%, transparent) 35%, color-mix(in srgb, var(--czern) 60%, transparent) 60%, color-mix(in srgb, var(--czern) 75%, transparent) 100%),
		radial-gradient(120% 70% at 0% 55%, color-mix(in srgb, var(--czern) 45%, transparent), transparent 70%);
}

.tc-hero--podstrona .tc-hero__cien {
	background: linear-gradient(180deg, color-mix(in srgb, var(--czern) 85%, transparent) 0%, transparent 30%, transparent 65%, color-mix(in srgb, var(--czern) 55%, transparent) 100%);
}

.tc-hero--podstrona .tc-hero__cien::before {
	background: linear-gradient(90deg, color-mix(in srgb, var(--czern) 82%, transparent) 0%, color-mix(in srgb, var(--czern) 55%, transparent) 40%, color-mix(in srgb, var(--czern) 20%, transparent) 70%, color-mix(in srgb, var(--czern) 10%, transparent) 100%);
}

.tc-hero--podstrona .tc-hero__cien::after {
	background: color-mix(in srgb, var(--czern) 40%, transparent);
}

/* Dokument (Regulamin): mocniejsze przyciemnienie od lewej, zielona poświata z lewego dołu. */
.tc-hero--dokument .tc-hero__cien {
	background: linear-gradient(180deg, color-mix(in srgb, var(--czern) 70%, transparent) 0%, transparent 35%, transparent 70%, color-mix(in srgb, var(--czern) 55%, transparent) 100%);
}

.tc-hero--dokument .tc-hero__cien::before {
	background: linear-gradient(90deg, color-mix(in srgb, var(--czern) 82%, transparent) 0%, color-mix(in srgb, var(--czern) 55%, transparent) 55%, color-mix(in srgb, var(--czern) 35%, transparent) 100%);
}

.tc-hero--dokument .tc-hero__cien::after {
	background: radial-gradient(60% 90% at 0% 100%, var(--tc-glow-dokument), transparent 70%);
}

/* ---------- Treść ---------- */

.tc-hero__inner {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 16px;
	padding-top: clamp(130px, calc(80px + 6.9vw), 180px);
	padding-bottom: clamp(48px, 5.6vw, 80px);
}

.tc-hero--podstrona .tc-hero__inner {
	justify-content: center;
	padding-top: clamp(130px, calc(80px + 6.9vw), 160px);
	padding-bottom: clamp(56px, 6vw, 88px);
}

.tc-hero__tresc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	max-width: 600px;
}

/* Szerokość tekstu podstrony (pole „Szerokość tekstu”) — wartości z projektu każdej podstrony,
   od nich zależy, w ilu liniach łamie się nagłówek i zajawka. */
.tc-hero--podstrona {
	--hero-tresc-max: 560px;
	--hero-lead-max: 500px;
}

.tc-hero--srednia {
	--hero-tresc-max: 600px;
	--hero-lead-max: 560px;
}

.tc-hero--szeroka {
	--hero-tresc-max: 860px;
	--hero-lead-max: 640px;
}

.tc-hero--podstrona .tc-hero__tresc {
	max-width: var(--hero-tresc-max);
}

/* Na stronie głównej linie nagłówka wyznacza Enter w polu (3 linie z projektu). Limit 600 px
   przycinał „Festiwal Piosenki” (593 px przy 60 px) — przy minimalnie szerszym renderowaniu
   fontu linia łamała się na dwie i wychodziły 4 linie. Akapit ma własny limit (560 px). */
.tc-hero--glowna .tc-hero__tresc {
	max-width: none;
}

.tc-hero .tc-hero__etykieta {
	margin: 0;
}

.tc-hero .tc-hero__title {
	margin: 0;
	/* Na wąskich ekranach rozmiar dopasowany tak, żeby najdłuższa linia (~10 × rozmiar fontu)
	   zmieściła się w szerokości treści i nie łamała się na dodatkową linię. */
	font-size: min(var(--tc-font-h1), calc((100vw - 2 * var(--tc-gutter)) / 10.4));
	line-height: var(--tc-line-tight);
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.tc-hero .tc-hero__lead {
	max-width: 560px;
	margin: 0;
	color: var(--tc-color-text-on-dark);
	font-size: var(--tc-font-hero-lead);
	line-height: 1.65;
	text-wrap: pretty;
}

.tc-hero--podstrona .tc-hero__tresc .tc-hero__lead {
	max-width: var(--hero-lead-max);
	color: var(--tc-color-bg);
	line-height: var(--tc-line-normal);
}

/* Dokument: niski, tekst przy dolnej krawędzi, szeroki nagłówek w mniejszym stopniu. */
.tc-hero--dokument {
	min-height: clamp(360px, 34vw, 490px);
}

.tc-hero--dokument .tc-hero__inner {
	justify-content: flex-end;
	padding-top: clamp(130px, 14vw, 150px);
	padding-bottom: clamp(56px, 7vw, 96px);
}

.tc-hero--dokument .tc-hero__tresc {
	gap: 14px;
	max-width: 960px;
}

.tc-section.tc-hero--dokument .tc-hero__etykieta {
	/* Bez marginesu etykiety z tokens.css — odstęp do nagłówka daje sam gap (14 px). */
	margin: 0;
	line-height: normal;
	font-weight: 800;
	letter-spacing: 0.14em;
}

.tc-hero--dokument .tc-hero__title {
	font-size: var(--tc-font-h1-dokument);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.tc-hero--podstrona .tc-hero__przycisk {
	margin-top: 6px;
}

/* Licznik: opcjonalny napis nad kafelkami („Do Finału Festiwalu pozostało:”). */
.tc-hero__licznik {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tc-hero .tc-hero__licznik-napis {
	margin: 0;
	color: var(--tc-color-bg);
	font-size: var(--tc-font-termin);
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* Odliczanie: szklane kafelki z poświatą idącą za kursorem (--x, --y, --o z view.js). */
.tc-hero__odliczanie {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 148px));
	gap: clamp(8px, 1.2vw, 16px);
}

.tc-hero__kafelek {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(6px, 1vw, 14px);
	aspect-ratio: 148 / 175;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--tc-color-bg) 10%, transparent);
	border-radius: var(--tc-radius-s);
	background: linear-gradient(160deg, color-mix(in srgb, var(--tc-color-bg) 10%, transparent) 0%, color-mix(in srgb, var(--tc-color-bg) 3%, transparent) 55%, color-mix(in srgb, var(--tc-color-bg) 6%, transparent) 100%);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tc-color-bg) 8%, transparent);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
}

.tc-hero__kafelek::before,
.tc-hero__kafelek::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: var(--o, 0);
	transition: opacity 0.4s ease;
}

.tc-hero__kafelek::before {
	background: radial-gradient(240px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--tc-color-primary) 7%, transparent), transparent 60%);
}

.tc-hero__kafelek::after {
	padding: 1px;
	border-radius: var(--tc-radius-s);
	background: radial-gradient(120px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--tc-color-primary) 95%, transparent), color-mix(in srgb, var(--tc-color-primary) 25%, transparent) 45%, transparent 75%);
	-webkit-mask: linear-gradient(var(--czern) 0 0) content-box, linear-gradient(var(--czern) 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.tc-hero__liczba {
	position: relative;
	color: var(--tc-color-bg);
	font-size: var(--tc-font-licznik);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	line-height: 1;
}

.tc-hero__kafelek:first-child .tc-hero__liczba {
	color: var(--tc-color-label);
}

.tc-hero__podpis {
	position: relative;
	color: var(--tc-color-text-on-dark);
	font-size: var(--tc-font-mikro);
	font-weight: 600;
	letter-spacing: var(--tc-tracking-label);
	text-transform: uppercase;
}

/* Nabór */
.tc-hero__nabor {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.tc-hero .tc-hero__nabor-tytul {
	margin: 0;
	font-size: var(--tc-font-h2);
	line-height: 1;
}

.tc-hero .tc-hero__nabor-tekst {
	margin: 0;
	color: var(--tc-color-text-on-dark);
	font-size: var(--tc-font-text);
	line-height: 1.6;
}

.tc-hero .tc-hero__termin {
	margin: 0;
	color: var(--tc-color-bg);
	font-size: var(--tc-font-termin);
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.tc-hero__termin span {
	color: var(--tc-color-label);
}

/* Przycisk naboru: limonkowy, po najechaniu biały — odwrotnie niż przycisk domyślny.
   Selektor mocniejszy niż w tokens.css, bo tokens.css ładuje się po CSS bloku. */
.tc-hero a.tc-button.tc-hero__nabor-przycisk {
	margin-top: 12px;
	padding-inline: 22px;
	background-color: var(--tc-color-primary);
}

.tc-hero a.tc-button.tc-hero__nabor-przycisk:hover,
.tc-hero a.tc-button.tc-hero__nabor-przycisk:focus-visible {
	background-color: var(--tc-color-bg);
}

/* Pasek słupków na dole hero; słupki wstawia view.js. */
.tc-hero__slupki {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	height: 30px;
}

.tc-hero__slupki span {
	flex: none;
	width: 2px;
	border-radius: 2px 2px 0 0;
	background: var(--tc-color-bg);
	transform-origin: bottom;
}

/* ---------- Układ: poniżej desktopu wszystko w jednej kolumnie ---------- */

@media (max-width: 1079px) {
	/* Kafelki odliczania wchodzą do boxu „Nabór” między termin a przycisk. */
	.tc-hero__lewa,
	.tc-hero__nabor {
		display: contents;
	}

	.tc-hero__tresc { order: 1; margin-bottom: 32px; }
	/* Odstęp do boxu „Nabór” jest tylko na stronie głównej — na podstronie tekst kończy się przy krawędzi jak w projekcie. */
	.tc-hero--podstrona .tc-hero__tresc { margin-bottom: 0; }

	/* Linie z Entera w polu są dla desktopu. Niżej tekst łamie się sam w 600 px, jak w projekcie
	   (na tablecie nagłówek strony głównej ma 2 linie, nie 3). */
	.tc-hero--glowna .tc-hero__tresc { max-width: 600px; }
	.tc-hero--glowna .tc-hero__title br { display: none; }

	.tc-hero__nabor-tytul { order: 2; }
	.tc-hero__nabor-tekst { order: 3; }
	.tc-hero__termin { order: 4; }
	.tc-hero__licznik { order: 5; margin: 8px 0 4px; }
	.tc-hero a.tc-button.tc-hero__nabor-przycisk { order: 6; align-self: flex-start; }
}

@media (min-width: 1080px) {
	.tc-hero__inner {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: 48px 40px;
	}

	.tc-hero__lewa {
		display: flex;
		flex: 1 1 560px;
		flex-direction: column;
		gap: clamp(40px, 5.5vw, 72px);
		min-width: 0;
	}

	.tc-hero__nabor {
		flex: 0 1 340px;
		align-items: flex-end;
		text-align: right;
	}

	.tc-hero--glowna .tc-hero__cien::before {
		opacity: 0.6;
	}

	.tc-hero__cien::after {
		display: none;
	}

	/* W dokumencie ::after to zielona poświata z lewego dołu — zostaje także na desktopie. */
	.tc-hero--dokument .tc-hero__cien::after {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tc-hero__dym-tasma {
		animation: none;
	}

	.tc-hero__kafelek::before,
	.tc-hero__kafelek::after {
		transition: none;
	}
}