/* D-Vision — style motywu. Mobile first; układ i proporcje 1:1 z designu (Claude Design, system „Modernist”). */

/* — font (lokalnie, nie z Google Fonts: RODO) — oś szerokości 62–125% jest potrzebna do zwężonych cyfr — */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("../fonts/archivo-latin-ext-wdth.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("../fonts/archivo-latin-wdth.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--ink: #141211;
	--paper: #fff;
	--accent: #d24b27;
	--accent-text: #b8401f; /* ciemniejszy akcent do małego tekstu — kontrast z bielą ≥ 4.5:1 */
	--muted: #605d5d;
	--done: #7d7979;
	--tint: #f3f2f2;
	--rule-w: 2px;
	--rule: var(--rule-w) solid var(--ink);
	--gutter: clamp(16px, 4vw, 48px);
	--font: "Archivo", system-ui, sans-serif;
}

/* — podstawy — */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
	position: absolute; left: 8px; top: -100px; z-index: 10;
	padding: 8px 12px; background: var(--ink); color: var(--paper); font-weight: 700;
}
.skip-link:focus { top: 8px; color: var(--paper); }

/* Mała etykieta wersalikami (w designie h6) — nagłówki sekcji, „Finał przeglądu”, role organizatorów. */
.label {
	font-size: 13px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * Siatka z liniami 2 px między komórkami — przy dowolnej liczbie kolumn (auto-fit), także na telefonie,
 * gdzie komórki stają jedna pod drugą. Każda komórka rysuje linię z prawej i od dołu w szczelinie siatki;
 * linie wystające poza krawędź ucina overflow. W designie był border-right + margin-right: -2px,
 * co na telefonie dawało 2 px przewijania w bok i brak linii między komórkami jedna pod drugą.
 */
.grid-ruled {
	display: grid;
	gap: var(--rule-w);
	overflow: hidden;
	overflow: clip;
}
.grid-ruled > * {
	box-shadow: var(--rule-w) 0 0 var(--ink), 0 var(--rule-w) 0 var(--ink), var(--rule-w) var(--rule-w) 0 var(--ink);
}

/* — nagłówek strony — */
.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px var(--gutter);
	border-bottom: var(--rule);
}
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--ink);
	text-decoration: none;
}
.brand__sep { color: var(--accent); }
.site-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.site-nav a { padding-block: 4px; color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--accent-text); }

/*
 * Menu w hamburgerze poniżej 1024 px — tam 7 pozycji nie mieści się obok nazw organizatorów w jednej linii.
 * Działa tylko z .has-menu-js (assets/js/menu.js); bez JS menu zostaje rozwinięte jak w designie.
 */
.nav-toggle { display: none; }
@media (max-width: 1023.98px) {
	.has-menu-js .nav-toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 8px 12px;
		border: var(--rule);
		background: none;
		color: var(--ink);
		font: inherit;
		font-size: 13px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		cursor: pointer;
	}
	/* Czarny = menu otwarte. Najechanie tylko przy myszce — na ekranie dotykowym :hover „przykleja się” po stuknięciu. */
	.has-menu-js .nav-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
	@media (hover: hover) {
		.has-menu-js .nav-toggle:hover { background: var(--ink); color: var(--paper); }
	}
	.nav-toggle[aria-expanded="true"] .nav-toggle__open,
	.nav-toggle[aria-expanded="false"] .nav-toggle__close { display: none; }

	.has-menu-js .site-nav { display: none; }
	/* Rozwinięte: lista na całą szerokość pod nagłówkiem, linie 2 px między pozycjami jak w reszcie strony. */
	.has-menu-js.is-open .site-nav {
		display: flex;
		flex-direction: column;
		/* Szerokość nagłówka + oba marginesy: sam ujemny margines przesuwał listę w lewo, ale linie nie dochodziły do prawej krawędzi. */
		flex: 0 0 calc(100% + 2 * var(--gutter));
		gap: 0;
		margin: 0 calc(-1 * var(--gutter)) -16px;
	}
	.has-menu-js.is-open .site-nav a { padding: 14px var(--gutter); border-top: var(--rule); font-size: 15px; }
}

/* — sekcje — */
.section,
.hero,
.intro,
.downloads,
.finale,
.organizers { border-bottom: var(--rule); }

.section-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	padding: 20px var(--gutter);
	border-bottom: var(--rule);
}
.section-head--inline { padding: 0; border-bottom: 0; }
.section-head__num { color: var(--accent-text); }

/* — hero — */
.hero {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	container: hero / inline-size;
}

.hero__art {
	position: relative;
	min-height: clamp(320px, 48vw, 620px);
	overflow: hidden;
	background: var(--paper);
	container-type: size;
}
/*
 * Jedna kolumna (sekcja węższa niż 2 × 420 px + 2 px szczeliny): wysokość komórki z kamerą podana wprost.
 * Przy samym min-height Chromium liczy cqh jako 0 i na telefonie kamera z ukosem znikały całkiem
 * (w designie też — Claude Design pokazuje tylko desktop). W dwóch kolumnach wysokość daje rozciągnięcie
 * w siatce i tak ma zostać, żeby obrazek sięgał dołu sekcji. Zapytanie o szerokość sekcji, nie okna,
 * bo pasek przewijania w Windows zabiera ~17 px i próg z @media rozjeżdżałby się z siatką.
 */
@container hero (width < 842px) {
	.hero__art { height: clamp(320px, 48vw, 620px); }
}
/* Scena o proporcjach 1.27, przyklejona do lewego dolnego rogu; wszystko w środku w jednostkach jej wysokości. */
.hero__stage {
	position: absolute;
	left: 0;
	bottom: 0;
	width: min(100%, 127cqh);
	aspect-ratio: 1.27;
	container-type: size;
}
.hero__diagonal {
	position: absolute;
	left: 0;
	top: -100cqh;
	width: 230cqh;
	height: 200cqh;
	background: var(--accent);
	clip-path: polygon(0 81.7cqh, 61.5cqh 146.1cqh, 201cqh 0, 227cqh 0, 68.1cqh 158.3cqh, 110cqh 200cqh, 0 200cqh);
}
.hero__ribbon {
	position: absolute;
	left: 69.8cqh;
	top: 50.4cqh;
	transform-origin: 0 50%;
	transform: translateY(-50%) rotate(-45.5deg);
	font-size: 3.5cqh;
	font-weight: 900;
	font-stretch: 62%;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ink);
}
.hero__camera {
	position: absolute;
	left: 37cqh;
	top: 42.6cqh;
	width: auto;
	height: 52.4cqh;
	max-width: none;
}

.hero__info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: clamp(24px, 4vw, 56px) var(--gutter);
}
.hero__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.badge--outline { padding: 4px 10px; border: var(--rule); }
.badge--accent { padding: 6px 10px; background: var(--accent); color: var(--paper); }

.hero__title {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: min(100%, 640px);
}
.hero__title img { width: 100%; height: auto; }
.hero__title img + img { width: 56.9%; }

.hero__finale {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 24px;
	align-items: end;
}
.hero__date { display: flex; flex-direction: column; gap: 2px; color: var(--accent); }
.hero__date .label { color: var(--ink); }
.hero__day {
	font-size: clamp(56px, 7vw, 96px);
	font-weight: 900;
	font-stretch: 75%;
	line-height: 0.9;
}
.hero__year { font-size: 22px; font-weight: 800; }
.hero__place {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-left: 20px;
	border-left: 4px solid var(--accent);
}
.hero__place-name {
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	line-height: 1;
	color: var(--accent);
}
.hero__countdown { font-size: 14px; font-weight: 600; }

/* — wstęp — */
.intro {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 32px;
	padding: clamp(40px, 6vw, 88px) var(--gutter);
}
.intro__heading {
	max-width: 14ch;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.05;
	text-wrap: pretty;
}
.intro__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 62ch;
	font-size: 17px;
	line-height: 1.6;
	text-wrap: pretty;
}

/* — harmonogram — */
.timeline {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
.timeline__step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px var(--gutter) 40px;
}
.timeline__step--done { color: var(--done); }
.timeline__step--current { background: var(--ink); color: var(--paper); }
.timeline__status {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.timeline__date {
	font-size: clamp(40px, 4.4vw, 60px);
	font-weight: 900;
	font-stretch: 70%;
	line-height: 0.95;
}
.timeline__label { font-size: 16px; font-weight: 600; }

/* — kategorie — */
.formats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.format {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: start;
	padding: 40px var(--gutter);
}
.format__body { display: flex; flex-direction: column; gap: 20px; }
.format__head { display: flex; flex-direction: column; gap: 4px; letter-spacing: 0; }
.format__ratio {
	font-size: 64px;
	font-weight: 900;
	font-stretch: 70%;
	line-height: 0.9;
	color: var(--accent);
}
.format__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 18px;
	font-weight: 600;
}
.format__list li { padding: 10px 0; border-top: var(--rule); }
.format__list li:last-child { border-bottom: var(--rule); }
.format__frame { border: 4px solid var(--ink); }
.format__frame--horizontal { width: clamp(96px, 12vw, 160px); aspect-ratio: 16 / 9; }
.format__frame--vertical { width: clamp(54px, 6.75vw, 90px); aspect-ratio: 9 / 16; }

.specs {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	margin: 0;
	border-top: var(--rule);
	background: var(--tint);
}
.specs__item { display: flex; flex-direction: column; gap: 4px; padding: 24px var(--gutter); }
.specs dt {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.specs dd { margin: 0; font-size: 17px; font-weight: 700; }

/* — do pobrania — */
.downloads { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.downloads__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 40px var(--gutter);
}
.downloads__intro p { max-width: 40ch; font-size: 15px; line-height: 1.6; }
.downloads__list { margin: 0; padding: 0; list-style: none; }
.downloads__list li + li { border-top: var(--rule); }
.download {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 24px var(--gutter);
	color: var(--ink);
	text-decoration: none;
}
.download:hover { background: var(--ink); color: var(--paper); }
.download:focus-visible { outline-offset: -4px; } /* obrys w środku — na zewnątrz ucięłaby go siatka */
.download__text { display: flex; flex-direction: column; gap: 4px; }
.download__title { font-size: clamp(18px, 1.8vw, 22px); font-weight: 800; line-height: 1.2; }
.download__type {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

/* — finał — */
.finale {
	background: var(--accent);
	color: var(--ink);
}
/* Siatka tylko na górny blok: pas programu na całą szerokość w tej samej siatce auto-fit dokładał
   pustą trzecią kolumnę na szerokich ekranach (zajęty przez rozpięty element tor się nie zwija). */
.finale__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.finale__date,
.finale__about {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: clamp(40px, 6vw, 88px) var(--gutter);
}
.finale__day {
	font-size: clamp(96px, 15vw, 220px);
	font-weight: 900;
	font-stretch: 62%;
	line-height: 0.82;
	color: var(--paper);
}
.finale__when { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; line-height: 1.1; }
.finale__heading { max-width: 18ch; font-size: clamp(26px, 2.8vw, 36px); text-wrap: pretty; }
.finale__about p { max-width: 52ch; font-size: 17px; font-weight: 500; line-height: 1.6; }

/* Dwie kolumny (2 × 380 px): nagłówek opisu na wysokości dużej daty, jak w designie. */
@media (min-width: 760px) {
	.finale__heading { margin-top: 39px; }
}

/* Program finału: pas pod datą, 4 punkty w rzędzie na laptopie, jeden pod drugim na telefonie. */
.finale__program { border-top: var(--rule); }
.finale__program-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 20px var(--gutter);
	border-bottom: var(--rule);
}
.program {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
.program__item { display: flex; flex-direction: column; gap: 10px; padding: 28px var(--gutter) 36px; }
.program__time {
	font-size: clamp(40px, 4.4vw, 60px);
	font-weight: 900;
	font-stretch: 70%;
	line-height: 0.95;
	color: var(--paper);
}
.program__title { font-size: 18px; font-weight: 800; line-height: 1.2; text-wrap: balance; }
.program__desc { max-width: 36ch; font-size: 15px; font-weight: 500; line-height: 1.5; }

/* — jury — 5 osób w jednym rzędzie na laptopie (5 × 260 px), 3 + 2 na tablecie, jedna pod drugą na telefonie — */
.jury {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
.juror {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 32px var(--gutter) 40px;
}
/* Zdjęcia w czerni i bieli — zasada systemu „Modernist” z designu; różne źródła zdjęć wyglądają wtedy spójnie. */
.juror__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin-bottom: 12px;
	filter: grayscale(1) contrast(1.08);
}
.juror__credit { margin: -8px 0 8px; font-size: 11px; color: var(--muted); }
.juror__credit a { color: inherit; }
.juror__name { font-size: 24px; font-weight: 800; line-height: 1.1; }
.juror__role { color: var(--accent-text); }
.juror__bio { max-width: 42ch; margin-top: 8px; font-size: 15px; line-height: 1.55; text-wrap: pretty; }

/*
 * — partnerzy — 6 w rzędzie na laptopie i tablecie poziomo (12 partnerów = 2 równe rzędy), 2 na telefonie.
 * auto-fill, nie auto-fit: dwóch patronów medialnych zostaje w wąskich kratkach zamiast rozciągać się na całą szerokość.
 */
.section-head--sub { border-top: var(--rule); }
.partners {
	grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 16vw, 220px), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
.partner { display: flex; }
.partner__link {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 128px;
	padding: 24px 20px;
	color: var(--ink);
	text-decoration: none;
	text-align: center;
}
/*
 * Logotypy w oryginalnych kolorach. Szarość próbowaliśmy (spójniej z designem), ale jasne logo Gminy Dywity
 * robiło się blade, a na telefonie nie ma najechania, które przywracało kolor. Partnerzy chcą swoje barwy.
 */
.partner__logo {
	width: auto;
	max-width: 100%;
	max-height: 64px;
	object-fit: contain;
	transition: transform 0.2s;
}
a.partner__link:hover .partner__logo { transform: scale(1.05); }
a.partner__link:focus-visible { outline-offset: -4px; }
.partner__name { font-size: 15px; font-weight: 800; line-height: 1.2; text-wrap: balance; }
a.partner__link:hover .partner__name { color: var(--accent-text); }

/* — organizatorzy — */
.organizers { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.organizer { display: flex; flex-direction: column; gap: 8px; padding: 40px var(--gutter); }
.organizer__role { color: var(--muted); }
.organizer__name { font-size: 24px; font-weight: 800; }
.organizer__name a { color: var(--ink); text-decoration: none; }
.organizer__name a:hover { color: var(--accent-text); text-decoration: underline; }
.organizer__desc a { color: inherit; }
.organizer__desc { max-width: 36ch; font-size: 15px; line-height: 1.55; }

/* — stopka — */
.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	padding: 24px var(--gutter);
	font-size: 13px;
	font-weight: 600;
}
.site-footer__tags { color: var(--accent-text); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-footer__links a { color: var(--ink); }
.site-footer__links a:hover { color: var(--accent-text); }

/* — zwykłe strony (polityka prywatności) — */
.page {
	max-width: calc(72ch + 2 * var(--gutter));
	padding: clamp(40px, 6vw, 88px) var(--gutter);
	font-size: 17px;
	line-height: 1.6;
}
.page__title { margin-bottom: 32px; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; }
.page__content > * + * { margin-top: 1em; }
.page__content h2 { margin-top: 1.6em; font-size: 24px; }
.page__content h3 { margin-top: 1.4em; font-size: 19px; }