/*
 * Stopka, strona 404 i zachowanie przy ograniczonym ruchu.
 */

/* =============================================================== stopka */

.stopka {
	position: relative;
	overflow: hidden;
	margin-top: var(--o7);
	background: var(--zielen-gleboka);
	color: var(--papier);
}

.stopka a { color: var(--papier-jasny); }

.stopka__wnetrze {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--o5);
	padding-block: var(--o6);
}

.stopka__nazwa {
	font-weight: 800;
	font-stretch: 122%;
	font-size: 1.3rem;
	letter-spacing: 0.04em;
	margin-bottom: var(--o3);
}

.stopka__tytul { font-weight: 700; font-stretch: 110%; margin-bottom: var(--o3); }
.stopka__wejscie,
.stopka__opis { opacity: 0.82; font-size: var(--krok-drobny); }
.stopka p { margin-bottom: var(--o3); }

.menu--stopka { flex-direction: column; gap: var(--o2); }
.menu--stopka a { color: var(--papier-jasny); border: 0; padding: var(--o1) 0; }
.menu--stopka a:hover { text-decoration: underline; }

.spolecznosciowe { display: flex; gap: var(--o4); }

.godziny {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--o1) var(--o3);
	font-size: var(--krok-drobny);
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--o3);
}

.godziny dt { opacity: 0.78; }
.godziny dd { margin: 0; }

.stopka__dol {
	position: relative;
	border-top: 1px solid color-mix(in srgb, var(--papier) 18%, transparent);
	padding: var(--o4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--o3) var(--o5);
	justify-content: space-between;
	max-width: var(--szerokosc-max);
	margin-inline: auto;
	font-size: var(--krok-drobny);
}

.stopka__dol p { margin: 0; }
.stopka__nip { margin-left: var(--o3); opacity: 0.72; }

/* ============================================================= 404 */

.blad { position: relative; overflow: hidden; }

/* Rozeta zachowuje proporcje: rozciagnieta na cala szerokosc gubi
   regularnosc linii i przestaje wygladac jak gilosz. */
.gilosz--blad {
	background-size: contain;
	background-position: center;
	opacity: 0.2;
}

.blad__wnetrze {
	position: relative;
	max-width: var(--szerokosc-max);
	margin-inline: auto;
	padding: var(--o7) var(--o4);
	display: grid;
	grid-template-columns: minmax(180px, 320px) 1fr;
	gap: var(--o6);
	align-items: center;
}

.blad__linki { list-style: none; padding: 0; display: grid; gap: var(--o2); }

@media (max-width: 720px) {
	.blad__wnetrze { grid-template-columns: 1fr; gap: var(--o4); }
	.blad__rycina { max-width: 200px; }
}

/* ================================================== ograniczony ruch */

@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;
	}

	/* Pasek przestaje biec i daje sie przewinac palcem albo kolkiem. */
	.pasek__okno { overflow-x: auto; }
	.pasek__tasma { animation: none; }
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}