/**
 * System projektowy — tokeny.
 *
 * Charakter wizualny: Bieszczady to las, drewno, jezioro i przestrzeń.
 * Paleta jest stonowana i naturalna, ale współczesna — bez folkloru
 * i bez „skansenu" (spec §19).
 *
 * Każdy komponent korzysta wyłącznie z tych wartości. Wartości przypadkowe
 * w komponentach są błędem (spec §20).
 */

:root {
	/* --- Kolory: marka --- */
	--color-forest: #2f5d4e;
	--color-forest-dark: #1e4034;
	--color-forest-light: #4a8271;
	--color-forest-soft: #e8f0ec;

	/* Akcent — ciepły, jak zachód słońca nad połoninami. */
	--color-accent: #c2703d;
	--color-accent-dark: #a25a2c;
	--color-accent-soft: #fbf0e8;

	/* --- Kolory: neutralne --- */
	--color-stone-900: #16211d;
	--color-stone-700: #3a463f;
	--color-stone-500: #6b7770;
	--color-stone-400: #8e9a93;
	--color-stone-300: #c3ccc7;
	--color-stone-200: #e2e8e4;
	--color-stone-100: #f2f5f3;
	--color-sand: #f7f4ee;
	--color-white: #ffffff;

	/* --- Role semantyczne --- */
	--color-text: var(--color-stone-900);
	--color-text-muted: var(--color-stone-500);
	--color-text-inverse: var(--color-white);
	--color-surface: var(--color-white);
	--color-surface-alt: var(--color-sand);
	--color-surface-sunken: var(--color-stone-100);
	--color-border: var(--color-stone-200);
	--color-border-strong: var(--color-stone-300);

	--color-success: #2c6e49;
	--color-success-soft: #e7f3ec;
	--color-warning: #8a6100;
	--color-warning-soft: #fdf4e0;
	--color-error: #9a2c2c;
	--color-error-soft: #fbeceb;

	--color-focus: #1f6feb;

	/* --- Typografia --- */
	/* Wyłącznie fonty systemowe: zero żądań sieciowych, zero CLS z podmiany
	   kroju, natychmiastowy pierwszy render (spec §33). */
	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, "Noto Sans", sans-serif;
	--font-display: var(--font-sans);
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

	/* Skala modularna 1.25, płynna między 375 px a 1440 px. */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
	--text-xl: clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);
	--text-2xl: clamp(1.375rem, 1.25rem + 0.8vw, 1.75rem);
	--text-3xl: clamp(1.625rem, 1.4rem + 1.2vw, 2.25rem);
	--text-4xl: clamp(1.875rem, 1.5rem + 2vw, 3rem);
	--text-5xl: clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem);

	--leading-tight: 1.15;
	--leading-snug: 1.3;
	--leading-normal: 1.6;
	--leading-relaxed: 1.75;

	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.04em;

	/* --- Odstępy: skala 4 px --- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Odstęp między sekcjami — rośnie z szerokością ekranu. */
	--space-section: clamp(2.5rem, 6vw, 5rem);

	/* --- Zaokrąglenia --- */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 14px;
	--radius-xl: 20px;
	--radius-full: 999px;

	/* --- Cienie --- */
	--shadow-sm: 0 1px 2px rgba(22, 33, 29, 0.06);
	--shadow-md: 0 2px 8px rgba(22, 33, 29, 0.08);
	--shadow-lg: 0 8px 24px rgba(22, 33, 29, 0.1);
	--shadow-xl: 0 16px 48px rgba(22, 33, 29, 0.14);

	/* --- Szerokości --- */
	--container-narrow: 42rem;
	--container-text: 52rem;
	--container: 75rem;
	--container-wide: 90rem;
	--container-padding: clamp(1rem, 4vw, 2rem);

	/* --- Warstwy --- */
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-header: 300;
	--z-overlay: 400;
	--z-modal: 500;

	/* --- Ruch --- */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--duration-fast: 120ms;
	--duration-base: 200ms;
	--duration-slow: 320ms;

	/* --- Cele dotykowe (WCAG 2.2 AA, kryterium 2.5.8) --- */
	--tap-target: 44px;
}

/**
 * Użytkownicy z ograniczeniem animacji dostają statyczny interfejs.
 * Nie wyłączamy przejść całkowicie — skracamy je do niedostrzegalnych,
 * żeby nie zepsuć komponentów zależnych od zdarzenia `transitionend`.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0.01ms;
		--duration-base: 0.01ms;
		--duration-slow: 0.01ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/**
 * Reset i style elementów natywnych.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Nagłówek jest przyklejony — kotwice nie mogą chować się pod nim. */
	scroll-padding-top: 5rem;
}

body {
	background: var(--color-surface);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	margin: 0;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Blokada przewijania pod otwartym menu lub modalem. */
body.is-locked {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--color-stone-900);
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-tight);
	margin: 0 0 var(--space-4);
	text-wrap: balance;
}

h1 {
	font-size: var(--text-4xl);
}

h2 {
	font-size: var(--text-3xl);
}

h3 {
	font-size: var(--text-2xl);
}

h4 {
	font-size: var(--text-xl);
}

h5,
h6 {
	font-size: var(--text-lg);
}

p {
	margin: 0 0 var(--space-4);
	text-wrap: pretty;
}

a {
	color: var(--color-forest);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
	color: var(--color-forest-dark);
}

/* Widoczny focus jest wymogiem dostępności, nie ozdobą (spec §35). */
:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
	outline: none;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

ul,
ol {
	margin: 0 0 var(--space-4);
	padding-left: var(--space-6);
}

li + li {
	margin-top: var(--space-1);
}

blockquote {
	border-left: 3px solid var(--color-forest-light);
	color: var(--color-stone-700);
	margin: var(--space-6) 0;
	padding: var(--space-1) 0 var(--space-1) var(--space-5);
}

hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: var(--space-10) 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

th,
td {
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-3) var(--space-2);
	text-align: left;
}

th {
	font-weight: var(--weight-semibold);
}

code,
pre {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

/* --- Elementy formularzy --- */

input,
select,
textarea,
button {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/* --- Dostępność --- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.skip-link {
	background: var(--color-forest);
	color: var(--color-text-inverse);
	left: var(--space-4);
	padding: var(--space-3) var(--space-5);
	position: absolute;
	top: -100px;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	z-index: var(--z-modal);
	text-decoration: none;
	transition: top var(--duration-base) var(--ease-out);
}

.skip-link:focus {
	top: 0;
	color: var(--color-text-inverse);
}

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

.prose {
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	max-width: var(--container-text);
}

.prose > * + * {
	margin-top: var(--space-4);
}

.prose h2 {
	font-size: var(--text-2xl);
	margin-top: var(--space-10);
}

.prose h3 {
	font-size: var(--text-xl);
	margin-top: var(--space-8);
}

.prose img {
	border-radius: var(--radius-md);
	margin: var(--space-6) 0;
}

.prose ul,
.prose ol {
	padding-left: var(--space-6);
}

.prose a {
	text-decoration: underline;
}

/* Stary serwis zawierał treści wklejone z edytora WYSIWYG z inline'owymi
   stylami (kolory, kroje, tła). Neutralizujemy je, żeby migrowane opisy
   wyglądały spójnie i pozostały czytelne na ciemnym tle oraz na mobile. */
.prose [style] {
	background-color: transparent !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
	width: auto !important;
}

.prose font {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
}

/* Zabezpieczenie przed poziomym przewijaniem strony (spec §48).
   W migrowanej treści są tabele, blok <pre> i bardzo długie ciągi znaków
   (adresy, nazwy plików) — każdy z nich potrafi rozepchnąć layout na
   telefonie. Szerokie elementy przewijają się WEWNĄTRZ swojego kontenera,
   a nie razem z całą stroną. */
.prose table,
.prose pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.prose table {
	border-collapse: collapse;
	white-space: nowrap;
}

.prose {
	overflow-wrap: break-word;
	word-break: break-word;
}

.prose img,
.prose iframe,
.prose video,
.prose embed {
	max-width: 100%;
	height: auto;
}

.prose iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
}

/* Ostatnia linia obrony: nic nie ma prawa rozepchnąć dokumentu. */
html,
body {
	overflow-x: clip;
	max-width: 100%;
}

/**
 * Komponenty interfejsu.
 */

/* -------------------------------------------------------------------------
 * Przyciski
 * ---------------------------------------------------------------------- */

.btn {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	display: inline-flex;
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	gap: var(--space-2);
	justify-content: center;
	line-height: 1.2;
	min-height: var(--tap-target);
	padding: var(--space-3) var(--space-6);
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out);
	white-space: nowrap;
}

.btn--primary {
	background: var(--color-forest);
	color: var(--color-text-inverse);
}

.btn--primary:hover {
	background: var(--color-forest-dark);
	color: var(--color-text-inverse);
}

.btn--accent {
	background: var(--color-accent);
	color: var(--color-text-inverse);
}

.btn--accent:hover {
	background: var(--color-accent-dark);
	color: var(--color-text-inverse);
}

.btn--secondary {
	background: var(--color-surface);
	border-color: var(--color-border-strong);
	color: var(--color-stone-900);
}

.btn--secondary:hover {
	background: var(--color-surface-sunken);
	border-color: var(--color-stone-400);
	color: var(--color-stone-900);
}

.btn--ghost {
	background: transparent;
	color: var(--color-forest);
	padding-inline: var(--space-3);
}

.btn--ghost:hover {
	background: var(--color-forest-soft);
}

.btn--sm {
	font-size: var(--text-sm);
	min-height: 36px;
	padding: var(--space-2) var(--space-4);
}

.btn--block {
	display: flex;
	width: 100%;
}

.btn[aria-disabled="true"],
.btn:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

/* -------------------------------------------------------------------------
 * Odznaki
 * ---------------------------------------------------------------------- */

.badge {
	align-items: center;
	background: var(--color-surface-sunken);
	border-radius: var(--radius-full);
	color: var(--color-stone-700);
	display: inline-flex;
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	gap: var(--space-1);
	line-height: 1.4;
	padding: var(--space-1) var(--space-3);
	white-space: nowrap;
}

.badge--featured {
	background: var(--color-accent-soft);
	color: var(--color-accent-dark);
}

.badge--premium {
	background: var(--color-forest-soft);
	color: var(--color-forest-dark);
}

.badge--overlay {
	backdrop-filter: blur(6px);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------------------
 * Karty
 * ---------------------------------------------------------------------- */

.card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	transition:
		border-color var(--duration-base) var(--ease-out),
		box-shadow var(--duration-base) var(--ease-out),
		transform var(--duration-base) var(--ease-out);
}

.card:hover,
.card:focus-within {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-lg);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.card:hover {
		transform: translateY(-2px);
	}
}

.card__media {
	aspect-ratio: 3 / 2;
	background: var(--color-surface-sunken);
	overflow: hidden;
	position: relative;
}

.card__media img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.card__media-placeholder {
	align-items: center;
	color: var(--color-stone-400);
	display: flex;
	font-size: var(--text-sm);
	height: 100%;
	justify-content: center;
}

.card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	inset-inline-start: var(--space-3);
	position: absolute;
	top: var(--space-3);
	z-index: 1;
}

.card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-5) var(--space-5);
}

.card__eyebrow {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.card__title {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-normal);
	line-height: var(--leading-snug);
	margin: 0;
}

.card__title a {
	color: inherit;
	text-decoration: none;
}

/* Cała karta jest klikalna, ale w DOM pozostaje jeden odnośnik —
   dzięki temu czytniki ekranu nie ogłaszają duplikatów. */
.card__title a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 2;
}

.card__features {
	color: var(--color-stone-700);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-sm);
	gap: var(--space-1) var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.card__features li {
	margin: 0;
}

.card__footer {
	align-items: center;
	display: flex;
	gap: var(--space-3);
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--space-3);
}

.card__price {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
}

.card__price--ask {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: var(--weight-normal);
}

.card__cta {
	color: var(--color-forest);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

/* -------------------------------------------------------------------------
 * Okruszki
 * ---------------------------------------------------------------------- */

.breadcrumbs {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin-bottom: var(--space-4);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumbs li {
	align-items: center;
	display: flex;
	gap: var(--space-2);
	margin: 0;
}

.breadcrumbs li:not(:last-child)::after {
	color: var(--color-stone-400);
	content: "›";
}

.breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--color-forest);
	text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
	color: var(--color-stone-700);
}

/* -------------------------------------------------------------------------
 * Formularze
 * ---------------------------------------------------------------------- */

.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.field__label {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

.field__hint {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.field__error {
	color: var(--color-error);
	font-size: var(--text-sm);
}

.input,
.select,
.textarea {
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	min-height: var(--tap-target);
	padding: var(--space-3) var(--space-4);
	transition: border-color var(--duration-fast) var(--ease-out);
	width: 100%;
	/* 16 px zapobiega automatycznemu przybliżeniu pola na iOS. */
	font-size: max(16px, var(--text-base));
}

.input:hover,
.select:hover,
.textarea:hover {
	border-color: var(--color-stone-400);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
	border-color: var(--color-error);
}

.textarea {
	min-height: 7rem;
	resize: vertical;
}

.select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b7770' stroke-width='1.6' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-position: right var(--space-4) center;
	background-repeat: no-repeat;
	padding-right: var(--space-10);
}

.checkbox {
	align-items: flex-start;
	display: flex;
	gap: var(--space-3);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
}

.checkbox input {
	accent-color: var(--color-forest);
	flex-shrink: 0;
	height: 20px;
	margin-top: 2px;
	width: 20px;
}

/* Pole pułapka dla botów — ukryte przed człowiekiem, ale nie przez
   `display: none`, które część botów wykrywa. */
.honeypot {
	left: -9999px;
	position: absolute;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Komunikaty
 * ---------------------------------------------------------------------- */

.alert {
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	padding: var(--space-4) var(--space-5);
}

.alert--success {
	background: var(--color-success-soft);
	border-color: rgba(44, 110, 73, 0.25);
	color: var(--color-success);
}

.alert--warning {
	background: var(--color-warning-soft);
	border-color: rgba(138, 97, 0, 0.25);
	color: var(--color-warning);
}

.alert--error {
	background: var(--color-error-soft);
	border-color: rgba(154, 44, 44, 0.25);
	color: var(--color-error);
}

.alert--info {
	background: var(--color-forest-soft);
	border-color: rgba(47, 93, 78, 0.25);
	color: var(--color-forest-dark);
}

/* -------------------------------------------------------------------------
 * Stany puste
 * ---------------------------------------------------------------------- */

.empty-state {
	background: var(--color-surface-alt);
	border-radius: var(--radius-lg);
	padding: var(--space-12) var(--space-6);
	text-align: center;
}

.empty-state__title {
	font-size: var(--text-xl);
	margin-bottom: var(--space-2);
}

.empty-state__text {
	color: var(--color-text-muted);
	margin: 0 auto var(--space-6);
	max-width: 44ch;
}

.empty-state__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
}

/* -------------------------------------------------------------------------
 * Stan ładowania
 * ---------------------------------------------------------------------- */

.skeleton {
	background: linear-gradient(
		90deg,
		var(--color-stone-100) 25%,
		var(--color-stone-200) 50%,
		var(--color-stone-100) 75%
	);
	background-size: 200% 100%;
	border-radius: var(--radius-md);
	animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
	from {
		background-position: 200% 0;
	}

	to {
		background-position: -200% 0;
	}
}

.is-loading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity var(--duration-base) var(--ease-out);
}

/* -------------------------------------------------------------------------
 * Paginacja
 * ---------------------------------------------------------------------- */

.pagination {
	display: flex;
	gap: var(--space-2);
	justify-content: center;
	margin-top: var(--space-12);
}

.pagination .page-numbers {
	align-items: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-stone-700);
	display: inline-flex;
	justify-content: center;
	min-height: var(--tap-target);
	min-width: var(--tap-target);
	padding: 0 var(--space-3);
	text-decoration: none;
}

.pagination .page-numbers:hover {
	background: var(--color-surface-sunken);
}

.pagination .page-numbers.current {
	background: var(--color-forest);
	border-color: var(--color-forest);
	color: var(--color-text-inverse);
}

.pagination .dots {
	border-color: transparent;
}

/* -------------------------------------------------------------------------
 * Zbiór faktów (parametry obiektu)
 * ---------------------------------------------------------------------- */

.facts {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	margin: 0;
}

.facts__item {
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-3);
}

.facts__label {
	color: var(--color-text-muted);
	display: block;
	font-size: var(--text-sm);
}

.facts__value {
	display: block;
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Lista udogodnień
 * ---------------------------------------------------------------------- */

.amenities {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.amenities li {
	align-items: center;
	display: flex;
	gap: var(--space-2);
	margin: 0;
}

.amenities li::before {
	color: var(--color-forest);
	content: "✓";
	font-weight: var(--weight-bold);
}

/* -------------------------------------------------------------------------
 * FAQ
 * ---------------------------------------------------------------------- */

.faq {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.faq__item {
	background: var(--color-surface-alt);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
}

.faq__question {
	cursor: pointer;
	font-weight: var(--weight-medium);
	list-style: none;
	padding-right: var(--space-8);
	position: relative;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question::after {
	content: "+";
	font-size: var(--text-xl);
	line-height: 1;
	position: absolute;
	right: 0;
	top: 0;
	transition: transform var(--duration-base) var(--ease-out);
}

.faq__item[open] .faq__question::after {
	transform: rotate(45deg);
}

.faq__answer {
	color: var(--color-stone-700);
	padding-top: var(--space-3);
}

.faq__answer > *:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Galeria
 * ---------------------------------------------------------------------- */

.gallery {
	display: grid;
	gap: var(--space-2);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 48rem) {
	.gallery {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}

	.gallery__item:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
}

.gallery__item {
	aspect-ratio: 4 / 3;
	border: 0;
	border-radius: var(--radius-md);
	cursor: zoom-in;
	overflow: hidden;
	padding: 0;
	position: relative;
}

.gallery__item img {
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-out);
	width: 100%;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.gallery__item:hover img {
		transform: scale(1.04);
	}
}

.gallery__more {
	align-items: center;
	background: rgba(22, 33, 29, 0.6);
	color: var(--color-text-inverse);
	display: flex;
	font-weight: var(--weight-medium);
	inset: 0;
	justify-content: center;
	position: absolute;
}

/* -------------------------------------------------------------------------
 * Lightbox
 * ---------------------------------------------------------------------- */

.lightbox {
	background: rgba(12, 18, 15, 0.94);
	border: 0;
	height: 100%;
	max-height: 100%;
	max-width: 100%;
	padding: 0;
	width: 100%;
}

.lightbox::backdrop {
	background: rgba(12, 18, 15, 0.94);
}

.lightbox__figure {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	margin: 0;
	padding: var(--space-12) var(--space-4);
}

.lightbox__figure img {
	max-height: 85vh;
	max-width: 100%;
	object-fit: contain;
}

.lightbox__close,
.lightbox__nav {
	align-items: center;
	background: rgba(255, 255, 255, 0.12);
	border: 0;
	border-radius: var(--radius-full);
	color: #fff;
	display: flex;
	height: var(--tap-target);
	justify-content: center;
	position: absolute;
	width: var(--tap-target);
}

.lightbox__close {
	right: var(--space-4);
	top: var(--space-4);
}

.lightbox__nav--prev {
	left: var(--space-4);
	top: 50%;
	transform: translateY(-50%);
}

.lightbox__nav--next {
	right: var(--space-4);
	top: 50%;
	transform: translateY(-50%);
}

.lightbox__counter {
	bottom: var(--space-5);
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--text-sm);
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
}

/* -------------------------------------------------------------------------
 * Mapa
 * ---------------------------------------------------------------------- */

.map {
	background: var(--color-surface-sunken);
	border-radius: var(--radius-lg);
	/* Wysokość jest zadana z góry, żeby wczytanie mapy nie przesuwało
	   treści (CLS). */
	height: clamp(280px, 45vh, 480px);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.map__placeholder {
	align-items: center;
	color: var(--color-text-muted);
	display: flex;
	font-size: var(--text-sm);
	inset: 0;
	justify-content: center;
	position: absolute;
	text-align: center;
	padding: var(--space-4);
}

.map .leaflet-container {
	font-family: var(--font-sans);
	height: 100%;
	width: 100%;
}

.map-popup__title {
	font-weight: var(--weight-semibold);
	margin-bottom: var(--space-1);
}

.map-popup__meta {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* -------------------------------------------------------------------------
 * Karta wydarzenia
 * ---------------------------------------------------------------------- */

/* Data jest tu najważniejszą informacją — dostaje własną, czytelną plakietkę
   w rogu zdjęcia, zamiast ginąć w wierszu metadanych. */
.event-date {
	align-items: center;
	backdrop-filter: blur(6px);
	background: rgba(255, 255, 255, 0.94);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	inset-inline-start: var(--space-3);
	justify-content: center;
	line-height: 1;
	min-width: 3.25rem;
	padding: var(--space-2);
	position: absolute;
	top: var(--space-3);
	z-index: 1;
}

.event-date__day {
	color: var(--color-forest-dark);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
}

.event-date__month {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	margin-top: 2px;
	text-transform: uppercase;
}

/* Wydarzenie minione zostaje na stronie jako zapis, ale nie konkuruje
   uwagą z nadchodzącymi. */
.card--event.is-past .card__media img {
	filter: grayscale(0.6);
	opacity: 0.75;
}

/* -------------------------------------------------------------------------
 * Zakładki
 * ---------------------------------------------------------------------- */

.tabs {
	display: flex;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
	/* Pasek sam się przewija; nie może dyktować szerokości rodzicowi. */
	min-width: 0;
	overflow-x: auto;
	padding-bottom: var(--space-2);
	scrollbar-width: thin;
	/* Na telefonie zakładki przewijają się poziomo WEWNĄTRZ swojego paska,
	   nie rozpychając strony. */
	-webkit-overflow-scrolling: touch;
}

.tabs__item {
	align-items: center;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-stone-700);
	display: inline-flex;
	flex-shrink: 0;
	font-size: var(--text-sm);
	gap: var(--space-2);
	min-height: 38px;
	padding: var(--space-2) var(--space-4);
	text-decoration: none;
	transition:
		background-color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out);
}

.tabs__item:hover {
	border-color: var(--color-forest-light);
	color: var(--color-forest-dark);
}

.tabs__item[aria-current="true"] {
	background: var(--color-forest);
	border-color: var(--color-forest);
	color: var(--color-text-inverse);
}

.tabs__count {
	background: var(--color-surface-sunken);
	border-radius: var(--radius-full);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	padding: 0 var(--space-2);
}

.tabs__item[aria-current="true"] .tabs__count {
	background: rgba(255, 255, 255, 0.22);
	color: var(--color-white);
}

/* -------------------------------------------------------------------------
 * Pogoda
 * ---------------------------------------------------------------------- */

.weather {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

.weather__now {
	align-items: center;
	display: flex;
	gap: var(--space-4);
}

.weather__icon {
	color: var(--color-forest);
	flex-shrink: 0;
}

.weather__reading p {
	margin: 0;
}

.weather__temp {
	font-size: var(--text-3xl);
	font-weight: var(--weight-semibold);
	line-height: 1.1;
}

.weather__label {
	color: var(--color-stone-700);
}

.weather__meta {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.weather__days {
	border-top: 1px solid var(--color-border);
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: var(--space-4) 0 0;
}

.weather__day {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	text-align: center;
}

.weather__day .weather__icon {
	height: 28px;
	width: 28px;
}

.weather__day-name {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-transform: capitalize;
}

.weather__day-temp {
	font-size: var(--text-sm);
}

.weather__day-temp span {
	color: var(--color-text-muted);
}

.weather__source {
	color: var(--color-stone-400);
	font-size: var(--text-xs);
	margin: var(--space-4) 0 0;
}

.weather__source a {
	color: inherit;
}

.weather--compact .weather__days,
.weather--compact .weather__source {
	display: none;
}

/* -------------------------------------------------------------------------
 * Aktualności — mozaika
 * ---------------------------------------------------------------------- */

.news-mosaic {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.news-mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Kafel wiodący rozciągamy tylko wtedy, gdy inaczej zostałaby dziura
	   w siatce: przy jednym i trzech wpisach. Przy dwóch i czterech
	   kolumny wypełniają się równo. */
	.news-mosaic--compact.news-mosaic--n1 .news-tile--lead,
	.news-mosaic--compact.news-mosaic--n3 .news-tile--lead {
		grid-column: span 2;
	}
}

/* Pełna mozaika: kafel wiodący zajmuje dwie kolumny na dwa wiersze,
   cztery mniejsze wypełniają pozostałe dwie kolumny. Włącza się dopiero
   od pięciu wpisów — przy mniejszej liczbie zostawiałaby dziury. */
@media (min-width: 64rem) {
	.news-mosaic--mosaic {
		grid-auto-rows: 14rem;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.news-mosaic--mosaic .news-tile--lead {
		grid-column: span 2;
		grid-row: span 2;
	}

	.news-mosaic--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.news-tile {
	background: var(--color-stone-900);
	border-radius: var(--radius-lg);
	display: flex;
	isolation: isolate;
	min-height: 14rem;
	overflow: hidden;
	position: relative;
}

.news-mosaic--compact .news-tile--lead {
	min-height: 22rem;
}

@media (min-width: 64rem) {
	.news-mosaic--mosaic .news-tile {
		min-height: 0;
	}
}

.news-tile__image {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.news-tile__image--empty {
	background: linear-gradient(160deg, var(--color-forest) 0%, var(--color-forest-dark) 100%);
}

/* Powłoka jest warunkiem czytelności, nie ozdobą: tytuł jest biały,
   a zdjęcie może być dowolnie jasne. Gradient sięga połowy wysokości,
   żeby wielolinijkowy tytuł też miał pod sobą ciemne tło. */
.news-tile::after {
	background: linear-gradient(
		to top,
		rgba(11, 17, 15, 0.92) 0%,
		rgba(11, 17, 15, 0.72) 28%,
		rgba(11, 17, 15, 0.18) 58%,
		rgba(11, 17, 15, 0) 100%
	);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.news-tile__badge {
	background: var(--color-forest);
	border-radius: var(--radius-sm);
	color: var(--color-text-inverse);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	inset-inline-end: var(--space-3);
	padding: var(--space-1) var(--space-3);
	position: absolute;
	top: var(--space-3);
	z-index: 2;
}

.news-tile__body {
	align-self: flex-end;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
	position: relative;
	width: 100%;
	z-index: 2;
}

.news-tile__title {
	color: var(--color-white);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	margin: 0;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.news-mosaic--mosaic .news-tile--lead .news-tile__title,
.news-mosaic--compact .news-tile--lead .news-tile__title {
	font-size: var(--text-xl);
}

.news-tile__title a {
	color: inherit;
	text-decoration: none;
}

/* Cały kafel jest klikalny, ale w DOM zostaje jeden odnośnik — czytnik
   ekranu nie ogłasza wtedy tej samej pozycji dwa razy. */
.news-tile__title a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 3;
}

.news-tile:hover .news-tile__title a,
.news-tile:focus-within .news-tile__title a {
	text-decoration: underline;
}

.news-tile__date {
	align-items: center;
	color: rgba(255, 255, 255, 0.86);
	display: flex;
	font-size: var(--text-sm);
	gap: var(--space-2);
	margin: 0;
}

.news-tile__date .icon {
	height: 16px;
	width: 16px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.news-tile__image {
		transition: transform var(--duration-slow, 400ms) var(--ease-out);
	}

	.news-tile:hover .news-tile__image {
		transform: scale(1.04);
	}
}

.news-mosaic__rest {
	margin-top: var(--space-4);
}

/**
 * Układ strony: kontenery, siatki, nagłówek, stopka.
 */

/* -------------------------------------------------------------------------
 * Kontenery
 * ---------------------------------------------------------------------- */

.container {
	margin-inline: auto;
	max-width: var(--container);
	padding-inline: var(--container-padding);
	width: 100%;
}

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

.container--text {
	max-width: var(--container-text);
}

.container--wide {
	max-width: var(--container-wide);
}

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

.section--sunken {
	background: var(--color-surface-alt);
}

.section__header {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: space-between;
	margin-bottom: var(--space-8);
}

.section__title {
	margin: 0;
}

.section__lead {
	color: var(--color-text-muted);
	margin: var(--space-2) 0 0;
	max-width: 60ch;
}

.section__link {
	font-weight: var(--weight-medium);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Siatki
 * ---------------------------------------------------------------------- */

.grid {
	display: grid;
	gap: var(--space-5);
}

/* Siatki są w pełni płynne — bez punktów przełamania, więc nie ma szans
   na „uciekający" układ pomiędzy breakpointami (spec §48). */
.grid--cards {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.grid--cards-wide {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}

.grid--two {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* -------------------------------------------------------------------------
 * Nagłówek
 * ---------------------------------------------------------------------- */

.site-header {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: var(--z-header);
}

.site-header__inner {
	align-items: center;
	display: flex;
	gap: var(--space-4);
	justify-content: space-between;
	min-height: 4rem;
}

.site-brand {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	gap: var(--space-2);
	letter-spacing: var(--tracking-tight);
	text-decoration: none;
}

.site-brand,
.site-brand:hover {
	color: var(--color-forest-dark);
}

/* Logo to plik 150×70 px. Przy wysokości 2,25 rem (36 px) zajmuje ~77 px
   szerokości, czyli niemal dwa piksele źródła na piksel ekranu — dzięki temu
   pozostaje ostre także na ekranach o dużej gęstości. */
.site-brand img,
.site-brand .custom-logo {
	display: block;
	height: auto;
	max-height: 2.25rem;
	width: auto;
}

.site-brand--image {
	line-height: 0;
}

.site-brand--image a {
	display: inline-block;
}

.site-nav {
	display: none;
}

.site-nav ul {
	align-items: center;
	display: flex;
	gap: var(--space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav li {
	margin: 0;
}

.site-nav a {
	border-radius: var(--radius-md);
	color: var(--color-stone-700);
	display: block;
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	padding: var(--space-2) var(--space-3);
	text-decoration: none;
}

.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current-menu-parent > a {
	background: var(--color-forest-soft);
	color: var(--color-forest-dark);
}

.site-header__actions {
	align-items: center;
	display: flex;
	gap: var(--space-2);
}

.nav-toggle {
	align-items: center;
	background: transparent;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	display: flex;
	height: var(--tap-target);
	justify-content: center;
	width: var(--tap-target);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	background: var(--color-stone-900);
	border-radius: 2px;
	display: block;
	height: 2px;
	transition: transform var(--duration-base) var(--ease-out);
	width: 20px;
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
}

.nav-toggle__bars::before {
	top: -6px;
}

.nav-toggle__bars::after {
	top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Menu mobilne — proste, jednopoziomowe (spec §93). */
.mobile-nav {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	display: none;
	inset-inline: 0;
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	padding: var(--space-4) 0 var(--space-8);
	position: absolute;
	top: 100%;
}

.mobile-nav.is-open {
	display: block;
}

.mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-nav li {
	margin: 0;
}

.mobile-nav a {
	border-bottom: 1px solid var(--color-border);
	color: var(--color-stone-900);
	display: block;
	font-size: var(--text-lg);
	min-height: var(--tap-target);
	padding: var(--space-4) 0;
	text-decoration: none;
}

.mobile-nav .btn {
	margin-top: var(--space-6);
}

@media (min-width: 60rem) {
	.site-nav {
		display: block;
	}

	.nav-toggle {
		display: none;
	}

	.mobile-nav {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
 * Stopka
 * ---------------------------------------------------------------------- */

.site-footer {
	background: var(--color-forest-dark);
	color: rgba(255, 255, 255, 0.82);
	margin-top: var(--space-section);
	padding-block: var(--space-16) var(--space-8);
}

.site-footer a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--color-white);
	text-decoration: underline;
}

.site-footer__grid {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

/* Kolumna marki jest szersza od pozostałych — mieści logo, zdanie opisu
   i dane kontaktowe, reszta to same listy odnośników. */
@media (min-width: 64rem) {
	.site-footer__grid {
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
	}
}

.site-footer__column {
	min-width: 0;
}

.site-footer__heading {
	color: var(--color-white);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	margin-bottom: var(--space-4);
	text-transform: uppercase;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer li {
	margin: 0 0 var(--space-2);
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.site-footer__brand p {
	margin: 0;
	max-width: 34ch;
}

.site-footer__logo {
	display: inline-block;
	line-height: 0;
	/* Bez tego odnośnik rozciągnąłby się na całą szerokość kolumny
	   i łapał kliknięcia obok grafiki. */
	width: fit-content;
}

.site-footer__logo img {
	display: block;
	height: auto;
	max-height: 2.75rem;
	width: auto;
}

.site-footer__logo:hover {
	text-decoration: none;
}

.site-footer__wordmark {
	color: var(--color-white);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-snug);
}

.site-footer__tagline {
	color: rgba(255, 255, 255, 0.72);
}

.site-footer__contact a {
	color: var(--color-white);
	font-weight: var(--weight-medium);
}

.site-footer__social {
	display: flex;
	gap: var(--space-2);
}

.site-footer__social li {
	margin: 0;
}

.site-footer__social a {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--radius-full);
	display: inline-flex;
	height: var(--tap-target);
	justify-content: center;
	transition:
		background-color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out);
	width: var(--tap-target);
}

.site-footer__social a:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
}

/* Licznik obiektów przy miejscowości — informacja drugorzędna, więc
   przygaszona, ale nadal powyżej progu kontrastu 4.5:1 na tle stopki. */
.site-footer__count {
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--text-sm);
}

.site-footer__bottom {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-sm);
	gap: var(--space-3) var(--space-6);
	justify-content: space-between;
	margin-top: var(--space-12);
	padding-top: var(--space-6);
}

.site-footer__bottom p {
	margin: 0;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__legal li {
	margin: 0;
}

.site-footer__attribution {
	color: rgba(255, 255, 255, 0.6);
}

/* -------------------------------------------------------------------------
 * Pasek zachęty nad stopką
 * ---------------------------------------------------------------------- */

.footer-cta {
	background: var(--color-surface-alt);
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-12);
}

/* Stopka ma własny odstęp górny; gdy jest nad nią pasek zachęty,
   podwójna przerwa wyglądałaby jak błąd. */
.footer-cta + .site-footer {
	margin-top: 0;
}

.footer-cta__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	justify-content: space-between;
}

.footer-cta__title {
	font-size: var(--text-xl);
	margin: 0 0 var(--space-2);
}

.footer-cta__text {
	color: var(--color-stone-700);
	margin: 0;
	max-width: 46ch;
}

.footer-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* -------------------------------------------------------------------------
 * Sticky CTA na mobile (spec §23)
 * ---------------------------------------------------------------------- */

.sticky-cta {
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	bottom: 0;
	box-shadow: 0 -2px 12px rgba(22, 33, 29, 0.08);
	display: flex;
	gap: var(--space-3);
	inset-inline: 0;
	padding: var(--space-3) var(--container-padding);
	padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
	position: fixed;
	z-index: var(--z-sticky);
}

.sticky-cta .btn {
	flex: 1;
}

/* Pasek zasłaniałby koniec treści — rezerwujemy na niego miejsce. */
body.has-sticky-cta {
	padding-bottom: 5.5rem;
}

@media (min-width: 60rem) {
	.sticky-cta {
		display: none;
	}

	body.has-sticky-cta {
		padding-bottom: 0;
	}
}

/**
 * Style specyficzne dla widoków.
 */

/* -------------------------------------------------------------------------
 * Hero strony głównej
 * ---------------------------------------------------------------------- */

/* Hero jest JASNE: zdjęcie gór prześwituje przez delikatną białą mgiełkę,
   a treść jest ciemna. Ciemny overlay z poprzedniej wersji przygaszał
   krajobraz, który ma tu być głównym bohaterem. */
.hero {
	background: var(--color-forest-soft);
	color: var(--color-text);
	overflow: hidden;
	position: relative;
}

.hero__media {
	inset: 0;
	position: absolute;
}

.hero__media img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Mgiełka utrzymuje kontrast tekstu niezależnie od tego, jak jasne
   albo ciemne zdjęcie wgra administrator. Mocniejsza u góry, gdzie stoi
   nagłówek; słabsza na dole, gdzie „pigułka" ma własne białe tło.

   Wartości sprawdzone dla najgorszego przypadku — całkowicie czarnego
   zdjęcia. W górnych 40% wysokości, gdzie stoi nagłówek i akapit, kontrast
   wynosi wtedy 5,45:1 i 4,71:1 — powyżej progu 4,5:1 z WCAG 2.2 AA.
   Niżej mgiełka jest słabsza, ale nie leży tam żaden goły tekst:
   wyszukiwarka ma białe tło, a szybkie wejścia własne jasne tło. */
.hero__media::after {
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.82) 0%,
			rgba(255, 255, 255, 0.7) 40%,
			rgba(255, 255, 255, 0.55) 100%
		);
	content: "";
	inset: 0;
	position: absolute;
}

.hero__inner {
	padding-block: clamp(3rem, 10vw, 7rem);
	position: relative;
}

.hero__title {
	color: var(--color-forest-dark);
	font-size: var(--text-5xl);
	margin-bottom: var(--space-4);
	max-width: 16ch;
}

.hero__lead {
	color: var(--color-stone-700);
	font-size: var(--text-xl);
	margin-bottom: var(--space-8);
	max-width: 48ch;
}

/* -------------------------------------------------------------------------
 * Wyszukiwarka hero — jedna biała „pigułka"
 * ---------------------------------------------------------------------- */

.hero-search {
	align-items: center;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	display: grid;
	gap: var(--space-2);
	max-width: 46rem;
	padding: var(--space-3);
}

@media (min-width: 48rem) {
	.hero-search {
		border-radius: var(--radius-full);
		gap: 0;
		grid-template-columns: 1fr auto 1fr auto;
		padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
	}
}

.hero-search__field {
	align-items: center;
	border-radius: var(--radius-md);
	color: var(--color-stone-500);
	display: flex;
	gap: var(--space-3);
	min-height: var(--tap-target);
	padding: 0 var(--space-3);
	position: relative;
}

@media (min-width: 48rem) {
	.hero-search__field {
		border-radius: var(--radius-full);
		padding: 0 var(--space-4);
	}
}

/* Podświetlenie całego pola, gdy fokus jest na kontrolce w środku —
   ikona i tekst należą wizualnie do jednego elementu. */
.hero-search__field:hover,
.hero-search__field:focus-within {
	background: var(--color-surface-sunken);
}

.hero-search__field .icon {
	color: var(--color-forest);
	flex-shrink: 0;
}

.hero-search__control {
	appearance: none;
	background: transparent;
	border: 0;
	color: var(--color-stone-900);
	flex: 1;
	min-height: var(--tap-target);
	min-width: 0;
	padding: 0;
	width: 100%;
	/* 16 px zapobiega automatycznemu przybliżeniu pola na iOS. */
	font-size: max(16px, var(--text-base));
}

.hero-search__control:focus {
	outline: none;
}

/* Fokus rysujemy na całym polu, nie na samej kontrolce — inaczej obramowanie
   przecinałoby ikonę. */
.hero-search__field:focus-within {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

/* Pierwsza opcja („Dokąd jedziesz?") pełni rolę podpowiedzi, więc dopóki
   nic nie wybrano, tekst jest wyszarzony jak placeholder. */
.hero-search__control:has(option[value=""]:checked) {
	color: var(--color-stone-500);
}

/* Natywne pole daty nie obsługuje atrybutu placeholder. Dopóki jest puste,
   przykrywamy je własnym napisem „Kiedy?" (klasę ustawia site.js).
   Bez JavaScriptu widać natywny format dd.mm.rrrr — pole nadal działa. */
.hero-search__ghost {
	color: var(--color-stone-500);
	display: none;
	inset-inline-start: calc(var(--space-3) + 20px + var(--space-3));
	pointer-events: none;
	position: absolute;
}

@media (min-width: 48rem) {
	.hero-search__ghost {
		inset-inline-start: calc(var(--space-4) + 20px + var(--space-3));
	}
}

.hero-search__field.is-empty .hero-search__ghost {
	display: block;
}

.hero-search__field.is-empty .hero-search__control--date {
	color: transparent;
}

.hero-search__field.is-empty:focus-within .hero-search__ghost {
	display: none;
}

.hero-search__field.is-empty:focus-within .hero-search__control--date {
	color: var(--color-stone-900);
}

.hero-search__control--date::-webkit-calendar-picker-indicator {
	opacity: 0;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.hero-search__divider {
	background: var(--color-border);
	display: none;
	height: 1.75rem;
	width: 1px;
}

@media (min-width: 48rem) {
	.hero-search__divider {
		display: block;
	}
}

.hero-search__submit {
	align-items: center;
	background: var(--color-forest);
	border: 0;
	border-radius: var(--radius-full);
	color: var(--color-text-inverse);
	display: flex;
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	justify-content: center;
	min-height: var(--tap-target);
	padding: var(--space-3) var(--space-6);
	transition: background-color var(--duration-fast) var(--ease-out);
	white-space: nowrap;
}

.hero-search__submit:hover {
	background: var(--color-forest-dark);
}

@media (min-width: 48rem) {
	/* Na szerokim ekranie przycisk jest okrągłą „kropką" domykającą pigułkę. */
	.hero-search__submit {
		aspect-ratio: 1;
		min-height: 3.25rem;
		padding: 0 var(--space-2);
		min-width: 3.25rem;
	}
}

/* -------------------------------------------------------------------------
 * Szybkie wejścia pod wyszukiwarką
 * ---------------------------------------------------------------------- */

.hero-quick {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

.hero-quick a {
	align-items: center;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-forest-dark);
	display: inline-flex;
	font-size: var(--text-sm);
	min-height: 36px;
	padding: var(--space-2) var(--space-4);
	text-decoration: none;
}

.hero-quick a:hover {
	background: var(--color-white);
	border-color: var(--color-forest-light);
	color: var(--color-forest-dark);
}

/* -------------------------------------------------------------------------
 * Archiwum z filtrami
 * ---------------------------------------------------------------------- */

.archive-header {
	padding-block: var(--space-10) var(--space-6);
}

.archive-header__title {
	margin-bottom: var(--space-3);
}

.archive-header__lead {
	color: var(--color-stone-700);
	font-size: var(--text-lg);
	max-width: 65ch;
}

.archive-layout {
	display: grid;
	gap: var(--space-8);
}

@media (min-width: 64rem) {
	.archive-layout {
		align-items: start;
		grid-template-columns: 17rem minmax(0, 1fr);
	}
}

/* Element siatki ma domyślnie `min-width: auto`, więc nie zejdzie poniżej
   szerokości min-content swojej zawartości. Pasek zakładek na /atrakcje/ ma
   dziesięć pigułek z `flex-shrink: 0` — bez tego zerowania rozpychał kolumnę
   `1fr` i cały układ archiwum wyjeżdżał poza kontener. */
.archive-results {
	min-width: 0;
}

/* Filtry: na mobile w rozwijanym panelu, na desktopie w przyklejonej kolumnie. */
.filters {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

@media (min-width: 64rem) {
	.filters {
		position: sticky;
		top: 5rem;
		max-height: calc(100vh - 6rem);
		overflow-y: auto;
	}
}

.filters__toggle {
	width: 100%;
}

@media (min-width: 64rem) {
	.filters__toggle {
		display: none;
	}
}

.filters__body {
	display: none;
}

.filters__body.is-open {
	display: block;
}

@media (min-width: 64rem) {
	.filters__body {
		display: block;
	}
}

.filters__group + .filters__group {
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-5);
	padding-top: var(--space-5);
}

.filters__legend {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	margin-bottom: var(--space-3);
	padding: 0;
}

.filters__options {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	max-height: 15rem;
	overflow-y: auto;
}

.filters__range {
	display: flex;
	gap: var(--space-3);
}

.filters__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

.results-bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: space-between;
	margin-bottom: var(--space-5);
}

.results-bar__count {
	color: var(--color-stone-700);
	font-size: var(--text-sm);
}

.results-bar__tools {
	align-items: center;
	display: flex;
	gap: var(--space-2);
}

.view-switch {
	background: var(--color-surface-sunken);
	border-radius: var(--radius-full);
	display: inline-flex;
	padding: 3px;
}

.view-switch a {
	border-radius: var(--radius-full);
	color: var(--color-stone-700);
	font-size: var(--text-sm);
	padding: var(--space-2) var(--space-4);
	text-decoration: none;
}

.view-switch a[aria-current="true"] {
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	color: var(--color-stone-900);
}

.active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
}

.active-filters__chip {
	align-items: center;
	background: var(--color-forest-soft);
	border-radius: var(--radius-full);
	color: var(--color-forest-dark);
	display: inline-flex;
	font-size: var(--text-sm);
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	text-decoration: none;
}

.active-filters__chip::after {
	content: "×";
	font-size: var(--text-base);
}

/* Informacja o wybranym terminie nad listą wyników. */
.date-notice {
	margin-bottom: var(--space-5);
}

/* -------------------------------------------------------------------------
 * Pojedynczy obiekt
 * ---------------------------------------------------------------------- */

.entry-header {
	padding-block: var(--space-6) var(--space-4);
}

.entry-header__title {
	margin-bottom: var(--space-2);
}

.entry-header__meta {
	align-items: center;
	color: var(--color-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	font-size: var(--text-base);
}

/* Kropki rozdzielające wstawiamy w CSS, nie w PHP — dzięki temu przy
   zawinięciu wiersza nie zostaje sierota na początku linii. */
.entry-header__meta > * + *::before {
	color: var(--color-stone-400);
	content: "·";
	margin-inline-end: var(--space-3);
}

.entry-meta__author {
	color: var(--color-stone-700);
	font-weight: var(--weight-medium);
}

.entry-meta__updated {
	font-size: var(--text-sm);
}


.entry-layout {
	display: grid;
	gap: var(--space-10);
	padding-block: var(--space-8);
}

@media (min-width: 64rem) {
	.entry-layout {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) 21rem;
	}
}

.entry-main > section + section {
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-10);
	padding-top: var(--space-10);
}

.entry-main h2 {
	font-size: var(--text-2xl);
}

/* Panel kontaktowy — na desktopie przyklejony, na mobile zwykły blok
   (tam rolę CTA przejmuje pasek na dole ekranu). */
.entry-aside {
	display: none;
}

@media (min-width: 64rem) {
	.entry-aside {
		display: block;
		position: sticky;
		top: 5rem;
	}
}

.contact-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: var(--space-6);
}

.contact-card__price {
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	margin-bottom: var(--space-1);
}

.contact-card__price-note {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin-bottom: var(--space-5);
}

.contact-card__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.contact-card__note {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin-top: var(--space-4);
	margin-bottom: 0;
}

.entry-updated {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin-top: var(--space-8);
}

/* -------------------------------------------------------------------------
 * Hub miejscowości
 * ---------------------------------------------------------------------- */

.locality-hero {
	background: var(--color-surface-alt);
	padding-block: var(--space-12);
}

.locality-hero__title {
	margin-bottom: var(--space-4);
}

.locality-hero__lead {
	color: var(--color-stone-700);
	font-size: var(--text-lg);
	max-width: 65ch;
}

.locality-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	margin-top: var(--space-6);
}

.locality-stats__item strong {
	display: block;
	font-size: var(--text-2xl);
	line-height: 1.1;
}

.locality-stats__item span {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.neighbours {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.neighbours a {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-stone-700);
	font-size: var(--text-sm);
	min-height: 36px;
	align-items: center;
	display: inline-flex;
	padding: var(--space-2) var(--space-4);
	text-decoration: none;
}

.neighbours a:hover {
	border-color: var(--color-forest-light);
	color: var(--color-forest-dark);
}

/* -------------------------------------------------------------------------
 * Wyszukiwarka podpowiedzi
 * ---------------------------------------------------------------------- */

.search-suggest {
	position: relative;
}

.search-suggest__results {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	display: none;
	left: 0;
	list-style: none;
	margin: var(--space-1) 0 0;
	max-height: 22rem;
	overflow-y: auto;
	padding: var(--space-2);
	position: absolute;
	right: 0;
	top: 100%;
	z-index: var(--z-dropdown);
}

.search-suggest__results.is-open {
	display: block;
}

.search-suggest__results li {
	margin: 0;
}

.search-suggest__results a {
	align-items: center;
	border-radius: var(--radius-sm);
	color: var(--color-stone-900);
	display: flex;
	gap: var(--space-3);
	min-height: var(--tap-target);
	padding: var(--space-2) var(--space-3);
	text-decoration: none;
}

.search-suggest__results a:hover,
.search-suggest__results a:focus,
.search-suggest__results [aria-selected="true"] a {
	background: var(--color-forest-soft);
}

.search-suggest__thumb {
	border-radius: var(--radius-sm);
	height: 40px;
	object-fit: cover;
	width: 40px;
}

.search-suggest__label {
	font-weight: var(--weight-medium);
}

.search-suggest__subtitle {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* -------------------------------------------------------------------------
 * Strona 404 i 410
 * ---------------------------------------------------------------------- */

.error-page {
	padding-block: var(--space-24);
	text-align: center;
}

.error-page__title {
	font-size: var(--text-4xl);
	margin-bottom: var(--space-4);
}

.error-page__text {
	color: var(--color-stone-700);
	font-size: var(--text-lg);
	margin: 0 auto var(--space-8);
	max-width: 48ch;
}

.error-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
}

/* -------------------------------------------------------------------------
 * Landing filtrowy
 * ---------------------------------------------------------------------- */

.landing-intro {
	background: var(--color-surface-alt);
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-8);
	padding: var(--space-6) var(--space-8);
}

.landing-intro > *:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Powiadomienie środowiska roboczego
 * ---------------------------------------------------------------------- */

.env-notice {
	background: var(--color-warning-soft);
	border-bottom: 1px solid rgba(138, 97, 0, 0.25);
	color: var(--color-warning);
	font-size: var(--text-sm);
	padding: var(--space-2) var(--container-padding);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Mapa z pogodą obok
 * ---------------------------------------------------------------------- */

.map-with-weather {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 64rem) {
	.map-with-weather {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) 19rem;
	}
}

/* Na telefonie pogoda ląduje NAD mapą: to informacja, po którą sięga się
   najczęściej, a mapa wymaga przewinięcia i interakcji. */
@media (max-width: 63.999rem) {
	.map-with-weather .weather {
		order: -1;
	}
}

/* -------------------------------------------------------------------------
 * Oznaczenie źródła
 * ---------------------------------------------------------------------- */

.entry-image-credit {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin: var(--space-2) 0 0;
}

/* Wskazanie źródła musi być widoczne, ale nie może konkurować z treścią —
   to przypis, nie akapit artykułu. */
.entry-source {
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin-top: var(--space-8);
	padding-top: var(--space-4);
}

.entry-source a {
	color: var(--color-forest);
}

/**
 * Panel gospodarza.
 *
 * Osobny plik, bo to jedyna część serwisu, której nie widzi zwykły
 * odwiedzający — trzymanie tych reguł razem z resztą tylko zaciemniałoby
 * obraz przy edycji stron publicznych.
 */

/* -------------------------------------------------------------------------
 * Pasek panelu
 * ---------------------------------------------------------------------- */

.portal-bar {
	align-items: center;
	background: var(--color-surface-alt);
	border-radius: var(--radius-lg);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: space-between;
	margin-bottom: var(--space-8);
	padding: var(--space-4) var(--space-5);
}

.portal-bar__identity {
	display: flex;
	flex-direction: column;
	line-height: var(--leading-snug);
}

.portal-bar__hello {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.portal-bar__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	/* Pasek nie może rozpychać rodzica, gdy pozycji przybędzie. */
	min-width: 0;
}

.portal-bar__link {
	border-radius: var(--radius-full);
	color: var(--color-stone-700);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	padding: var(--space-2) var(--space-4);
	text-decoration: none;
	transition: background-color var(--duration-fast) var(--ease-out);
}

.portal-bar__link:hover {
	background: var(--color-surface);
	color: var(--color-forest-dark);
}

.portal-bar__link[aria-current="page"] {
	background: var(--color-forest);
	color: var(--color-text-inverse);
}

.portal-bar__link--muted {
	color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
 * Nagłówek widoku
 * ---------------------------------------------------------------------- */

.portal-header {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: space-between;
	margin-bottom: var(--space-6);
}

.portal-header__title {
	font-size: var(--text-2xl);
	margin: 0 0 var(--space-2);
}

.portal-header__lead {
	color: var(--color-stone-700);
	margin: 0;
	max-width: 60ch;
}

.portal-notices {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

/* -------------------------------------------------------------------------
 * Lista obiektów
 * ---------------------------------------------------------------------- */

.portal-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.portal-item {
	align-items: center;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 5rem minmax(0, 1fr);
	margin: 0;
	padding: var(--space-4);
}

@media (min-width: 48rem) {
	.portal-item {
		grid-template-columns: 6rem minmax(0, 1fr) auto;
	}
}

.portal-item__media {
	aspect-ratio: 1;
	background: var(--color-surface-sunken);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.portal-item__media img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.portal-item__placeholder {
	align-items: center;
	color: var(--color-stone-400);
	display: flex;
	height: 100%;
	justify-content: center;
}

.portal-item__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

.portal-item__title {
	font-size: var(--text-lg);
	margin: 0;
}

.portal-item__meta {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin: 0;
}

.portal-item__reason {
	background: var(--color-error-soft);
	border-radius: var(--radius-md);
	color: var(--color-error);
	font-size: var(--text-sm);
	margin: 0;
	padding: var(--space-2) var(--space-3);
}

.portal-item__missing {
	color: var(--color-warning);
	font-size: var(--text-sm);
	margin: 0;
}

.portal-item__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	/* Na wąskim ekranie akcje przechodzą pod treść, na całą szerokość. */
	grid-column: 1 / -1;
}

@media (min-width: 48rem) {
	.portal-item__actions {
		grid-column: auto;
	}
}

/* -------------------------------------------------------------------------
 * Znaczniki statusu
 * ---------------------------------------------------------------------- */

.portal-status {
	align-self: flex-start;
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	padding: var(--space-1) var(--space-3);
}

.portal-status.is-published {
	background: var(--color-success-soft);
	color: var(--color-success);
}

.portal-status.is-pending {
	background: var(--color-warning-soft);
	color: var(--color-warning);
}

.portal-status.is-draft {
	background: var(--color-surface-sunken);
	color: var(--color-stone-700);
}

/* -------------------------------------------------------------------------
 * Wybór typu wpisu
 * ---------------------------------------------------------------------- */

.portal-choice {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	color: inherit;
	display: block;
	padding: var(--space-6);
	text-decoration: none;
	transition:
		border-color var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out);
}

.portal-choice:hover {
	border-color: var(--color-forest-light);
	box-shadow: var(--shadow-md);
}

.portal-choice__title {
	font-size: var(--text-xl);
	margin: 0 0 var(--space-2);
}

.portal-choice__text {
	color: var(--color-stone-700);
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Formularz zgłoszenia
 * ---------------------------------------------------------------------- */

.portal-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	max-width: 52rem;
}

.portal-step {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	/* `fieldset` ma domyślne marginesy i obramowanie przeglądarki. */
	margin: 0;
	min-width: 0;
	padding: var(--space-6);
}

.portal-step__legend {
	align-items: center;
	display: flex;
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	gap: var(--space-3);
	padding: 0;
}

.portal-step__number {
	align-items: center;
	background: var(--color-forest-soft);
	border-radius: var(--radius-full);
	color: var(--color-forest-dark);
	display: inline-flex;
	font-size: var(--text-sm);
	height: 1.75rem;
	justify-content: center;
	width: 1.75rem;
}

/* Pola tekstowe rozciągane na całą szerokość siatki dwukolumnowej. */
.field--wide {
	grid-column: 1 / -1;
}

.field--checkbox {
	justify-content: center;
}

.portal-checks {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

.portal-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.portal-form__note {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Galeria w formularzu
 * ---------------------------------------------------------------------- */

.portal-gallery {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
}

.portal-gallery__item {
	background: var(--color-surface-sunken);
	border-radius: var(--radius-md);
	margin: 0;
	overflow: hidden;
	position: relative;
}

.portal-gallery__item img {
	aspect-ratio: 1;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.portal-gallery__badge {
	background: rgba(255, 255, 255, 0.92);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	inset-inline-start: var(--space-2);
	padding: 0 var(--space-2);
	position: absolute;
	top: var(--space-2);
}

.portal-gallery__remove {
	align-items: center;
	background: rgba(255, 255, 255, 0.92);
	display: flex;
	font-size: var(--text-xs);
	gap: var(--space-2);
	padding: var(--space-2);
}

.portal-gallery__remove input {
	accent-color: var(--color-error);
}

/* -------------------------------------------------------------------------
 * Logowanie i rejestracja
 * ---------------------------------------------------------------------- */

.portal-auth {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	margin-inline: auto;
	max-width: 34rem;
	padding: var(--space-8) var(--space-6);
}

.portal-auth__title {
	font-size: var(--text-2xl);
	margin: 0 0 var(--space-2);
}

.portal-auth__lead {
	color: var(--color-stone-700);
	margin: 0 0 var(--space-6);
}

.portal-auth__links {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin: var(--space-6) 0 0;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Usunięcie obiektu
 * ---------------------------------------------------------------------- */

.portal-danger {
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-10);
	padding-top: var(--space-6);
}

.portal-danger__button {
	background: none;
	border: 0;
	color: var(--color-error);
	cursor: pointer;
	font-size: var(--text-sm);
	padding: var(--space-2) 0;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Kreator (włącza JavaScript)
 * ---------------------------------------------------------------------- */

.portal-form.is-wizard .portal-step[hidden] {
	display: none;
}

.portal-wizard-nav {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: space-between;
}

.portal-wizard-progress {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/**
 * Przewodnik kulinarny — sekcja /gdzie-zjesc/.
 *
 * Wyłącznie to, czego nie da się złożyć z istniejących komponentów.
 * Karta, przyciski, siatka, chipsy filtrów, tabela faktów i pusty stan
 * pochodzą z `components.css` — tutaj są tylko elementy specyficzne dla
 * gastronomii: stan otwarcia, ocena, poziom cen i tabela godzin.
 *
 * Wszystkie wartości pochodzą z tokenów (spec §20).
 */

/* -------------------------------------------------------------------------
 * Stan otwarcia
 *
 * Trzy stany, nie dwa. „Nie wiemy" musi wyglądać inaczej niż „otwarte",
 * bo turysta jadący 30 km do zamkniętej knajpy nie wróci na stronę.
 * ---------------------------------------------------------------------- */

.place-status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	white-space: nowrap;
}

.place-status::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--radius-full);
	background: currentColor;
	flex: none;
}

.place-status--open {
	background: var(--color-success-soft);
	color: var(--color-success);
}

.place-status--closed {
	background: var(--color-stone-100);
	color: var(--color-stone-700);
}

.place-status--unknown {
	background: var(--color-warning-soft);
	color: var(--color-warning);
}

/* Plakietka na zdjęciu karty — musi być czytelna na dowolnym tle. */
.place-status--overlay {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 1;
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
}

.place-status--overlay.place-status--open {
	color: var(--color-success);
}

.place-status--overlay.place-status--unknown {
	color: var(--color-warning);
}

/* -------------------------------------------------------------------------
 * Ocena
 * ---------------------------------------------------------------------- */

.score {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-1);
	color: var(--color-forest-dark);
}

.score strong {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	line-height: 1;
	letter-spacing: var(--tracking-tight);
}

.score__scale {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.score__label {
	margin-left: var(--space-2);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.score--sm strong {
	font-size: var(--text-lg);
}

/* Ocena zewnętrzna nigdy nie wygląda jak nasza — to dane cudzego serwisu. */
.score--external {
	color: var(--color-stone-700);
}

.price-level {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	letter-spacing: 0.1em;
}

/* -------------------------------------------------------------------------
 * Nagłówek profilu
 * ---------------------------------------------------------------------- */

.place-header__signals {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4) var(--space-6);
	margin-top: var(--space-4);
}

.place-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-5);
}

/* Na telefonie „Nawiguj" ma być kciukiem do trafienia bez celowania. */
@media (max-width: 599px) {
	.place-actions .btn {
		flex: 1 1 calc(50% - var(--space-3));
		min-height: var(--tap-target);
	}
}

.place-address {
	margin-bottom: var(--space-4);
	color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
 * Karta lokalu
 * ---------------------------------------------------------------------- */

.card--place .card__media {
	position: relative;
}

.card--place .card__footer {
	align-items: center;
}

.card__nav {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	padding: 0 var(--space-3);
	border-radius: var(--radius-md);
	background: var(--color-forest-soft);
	color: var(--color-forest-dark);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	text-decoration: none;
	transition: background var(--duration-fast) var(--ease-out);
}

.card__nav:hover,
.card__nav:focus-visible {
	background: var(--color-forest);
	color: var(--color-text-inverse);
}

/* -------------------------------------------------------------------------
 * Chipsy szybkiego wyboru
 * ---------------------------------------------------------------------- */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
}

/* Na telefonie chipsy przewijają się w poziomie zamiast zjadać pół ekranu. */
@media (max-width: 599px) {
	.chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: var(--space-2);
		-webkit-overflow-scrolling: touch;
	}

	.chips::-webkit-scrollbar {
		display: none;
	}

	.chips__item {
		white-space: nowrap;
	}
}

.chips__item {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	padding: 0 var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	text-decoration: none;
	transition: border-color var(--duration-fast) var(--ease-out),
		background var(--duration-fast) var(--ease-out);
}

.chips__item:hover,
.chips__item:focus-visible {
	border-color: var(--color-forest);
	background: var(--color-forest-soft);
}

.chips__item--accent {
	border-color: var(--color-accent);
	color: var(--color-accent-dark);
}

.chips__item--accent:hover,
.chips__item--accent:focus-visible {
	border-color: var(--color-accent);
	background: var(--color-accent-soft);
}

/* -------------------------------------------------------------------------
 * Godziny otwarcia
 * ---------------------------------------------------------------------- */

.hours {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.hours th,
.hours td {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	font-weight: var(--weight-normal);
}

.hours th {
	color: var(--color-text-muted);
	width: 55%;
}

.hours td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.hours__today th,
.hours__today td {
	color: var(--color-text);
	font-weight: var(--weight-semibold);
}

.hours__badge {
	margin-left: var(--space-2);
	padding: 0 var(--space-2);
	border-radius: var(--radius-full);
	background: var(--color-forest-soft);
	color: var(--color-forest-dark);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.hours__note {
	margin-top: var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
 * Atrybucja i odnośniki poboczne
 * ---------------------------------------------------------------------- */

.attribution {
	margin-top: var(--space-4);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	line-height: var(--leading-normal);
}

.aside-links {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

.aside-links a {
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	text-decoration: none;
	color: var(--color-text);
}

.aside-links a:hover,
.aside-links a:focus-visible {
	border-color: var(--color-forest);
	background: var(--color-forest-soft);
}

/* -------------------------------------------------------------------------
 * Karta dań
 * ---------------------------------------------------------------------- */

.dish-picks {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dish-pick {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-accent-soft);
}

.dish-pick__name {
	font-weight: var(--weight-semibold);
}

.dish-pick__price {
	font-variant-numeric: tabular-nums;
	color: var(--color-text-muted);
	white-space: nowrap;
}

.menu-section__title {
	margin-top: var(--space-6);
	margin-bottom: var(--space-3);
	font-size: var(--text-lg);
	color: var(--color-forest-dark);
}

.menu-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-list__item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
}

.menu-list__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.menu-list__name {
	font-weight: var(--weight-medium);
}

.menu-list__desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.menu-list__price {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--color-text);
}

.menu-meta {
	margin-top: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
 * Ranking dania
 * ---------------------------------------------------------------------- */

.dish-ranking {
	margin: 0 0 var(--space-8);
	padding: 0;
	list-style: none;
	counter-reset: dish;
}

.dish-ranking__item {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--color-border);
}

.dish-ranking__position {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border-radius: var(--radius-full);
	background: var(--color-forest-soft);
	color: var(--color-forest-dark);
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
}

.dish-ranking__body {
	flex: 1 1 auto;
	min-width: 0;
}

.dish-ranking__title {
	margin: 0 0 var(--space-1);
	font-size: var(--text-xl);
}

.dish-ranking__title a {
	text-decoration: none;
	color: var(--color-text);
}

.dish-ranking__title a:hover,
.dish-ranking__title a:focus-visible {
	color: var(--color-forest);
}

.dish-ranking__meta {
	margin: 0 0 var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.dish-ranking__desc {
	margin: 0 0 var(--space-2);
	font-size: var(--text-sm);
}

.dish-ranking__figures {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-2);
	text-align: right;
}

.dish-ranking__price {
	font-variant-numeric: tabular-nums;
	color: var(--color-text-muted);
	white-space: nowrap;
}

.dish-ranking__unrated {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Na telefonie liczby wracają pod treść — inaczej tytuł ściska się do
   dwóch słów w linii. */
@media (max-width: 599px) {
	.dish-ranking__item {
		flex-wrap: wrap;
	}

	.dish-ranking__figures {
		flex-direction: row;
		align-items: center;
		gap: var(--space-4);
		width: 100%;
		padding-left: calc(2.5rem + var(--space-4));
		text-align: left;
	}
}

.ranking-note {
	margin-bottom: var(--space-8);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.chips__count {
	margin-left: var(--space-2);
	padding: 0 var(--space-2);
	border-radius: var(--radius-full);
	background: var(--color-stone-100);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	font-variant-numeric: tabular-nums;
}

.section-title {
	margin-bottom: var(--space-2);
	font-size: var(--text-2xl);
}

.section-lead {
	margin-bottom: var(--space-4);
	color: var(--color-text-muted);
}