/*
 * Pasek komunikatu pod banerem i okienko ze szczegółami.
 *
 * Znaczniki składa `klucz-core` (`Klucz_Komunikat`), ruch i okienko obsługuje
 * `assets/js/komunikat.js`. Arkusz wczytywany tylko na stronach oferty i tylko
 * wtedy, gdy pasek jest włączony w panelu.
 *
 * DWA STANY PASKA
 * - nieruchomy (bez skryptu, przy „Zatrzymaj ruch” z panelu dostępności):
 *   napis łamie się w wiersze i widać go w całości;
 * - ruchomy (klasa `klucz-komunikat--ruch` od skryptu): napis w jednym wierszu
 *   jedzie od prawej do lewej, kopie leżą w `__tor`. Oryginał zostaje dla
 *   czytnika ekranu, schowany wizualnie.
 *
 * OKIENKO ma wygląd banera: kreska z nadtytułem, ciasny gruby nagłówek,
 * czerwony przycisk-pigułka, punkty listy z czerwonymi ptaszkami jak na kartkach
 * pakietów.
 *
 * Tryb wysokiego kontrastu załatwiają ogólne reguły z `dostepnosc.css`
 * (czarne tło, biały tekst, żółte odsyłacze i przyciski). Przezroczyste ramki
 * są tu po to, żeby w tamtym trybie zrobiły się białe i pasek miał krawędź;
 * kartę okienka trzeba przemalować wprost, bo ogólna reguła robi ją przezroczystą.
 */

/* ==================================================================== pasek */

.klucz-komunikat {
	--komunikat-tlo: var(--pakiet-red, #c94d4d);
	background-color: var(--komunikat-tlo);
	color: #fff;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	font-family: var(--klucz-font-ui, inherit);
}

/* Barwy z panelu. Każda z białym napisem ma kontrast co najmniej 4,5 : 1. */
.klucz-komunikat--grafitowy {
	--komunikat-tlo: #2f3437;
}

.klucz-komunikat--zielony {
	--komunikat-tlo: #1d6b45;
}

.klucz-komunikat--granatowy {
	--komunikat-tlo: #1f3a68;
}

.klucz-komunikat__wnetrze {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 1240px;
	min-height: 52px;
	margin: 0 auto;
	padding: 8px 24px;
}

.klucz-komunikat__etykieta {
	flex: none;
	padding: 4px 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: #fff;
	color: var(--komunikat-tlo);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
}

.klucz-komunikat__okno {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.klucz-komunikat__tekst {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

/* Przycisk po prawej — `<button>` przy okienku, `<a>` przy odsyłaczu. */
.klucz-komunikat__przycisk {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	margin: 0;
	padding: 6px 16px;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.klucz-komunikat__przycisk[hidden] {
	display: none;
}

.klucz-komunikat__przycisk::after {
	content: "→";
}

.klucz-komunikat__przycisk:hover,
.klucz-komunikat__przycisk:focus-visible {
	background-color: #fff;
	color: var(--komunikat-tlo);
}

.klucz-komunikat__przycisk:focus-visible,
.klucz-komunikat__ruch:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---- Stan ruchomy ---------------------------------------------------- */

.klucz-komunikat__tor {
	display: none;
}

.klucz-komunikat--ruch .klucz-komunikat__tekst {
	/* Schowany wizualnie, nie `display: none` — czytnik ekranu ma go przeczytać. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.klucz-komunikat--ruch .klucz-komunikat__okno {
	/* Napis wyłania się i znika miękko zamiast urywać się na krawędzi. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.klucz-komunikat--ruch .klucz-komunikat__tor {
	display: flex;
	width: max-content;
	animation: klucz-komunikat-przewijanie var(--komunikat-czas, 30s) linear infinite;
	will-change: transform;
}

.klucz-komunikat__kopia {
	flex: none;
	padding-right: 56px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	white-space: nowrap;
}

/* Kropka między powtórzeniami — bez niej koniec zdania zlewa się z początkiem. */
.klucz-komunikat__kopia::after {
	content: "•";
	margin-left: 56px;
	opacity: 0.7;
}

/* Fokus wewnątrz paska albo pauza (przycisk, dotknięcie napisu) — napis staje. */
.klucz-komunikat--ruch:focus-within .klucz-komunikat__tor,
.klucz-komunikat--pauza .klucz-komunikat__tor {
	animation-play-state: paused;
}

/* Najechanie — tylko przy myszce. Na ekranie dotykowym „najechanie” zostaje
   po dotknięciu i gryzłoby się z przełączaniem pauzy dotknięciem napisu. */
@media (hover: hover) {
	.klucz-komunikat--ruch:hover .klucz-komunikat__tor {
		animation-play-state: paused;
	}
}

@keyframes klucz-komunikat-przewijanie {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-1 * var(--komunikat-krok, 50%)));
	}
}

/* ---- Przycisk zatrzymania (dokłada skrypt) --------------------------- */

.klucz-komunikat__ruch {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.klucz-komunikat__ruch[hidden] {
	display: none;
}

.klucz-komunikat__ruch:hover {
	background-color: rgba(255, 255, 255, 0.18);
}

/* Znak pauzy: dwie belki z ramek. */
.klucz-komunikat__ruch::before {
	content: "";
	width: 8px;
	height: 11px;
	border-right: 3px solid currentColor;
	border-left: 3px solid currentColor;
	box-sizing: border-box;
}

/* Znak wznowienia: trójkąt z ramek. */
.klucz-komunikat--pauza .klucz-komunikat__ruch::before {
	width: 0;
	height: 0;
	margin-left: 3px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid currentColor;
	border-right: 0;
}

/* ---- Telefon --------------------------------------------------------- */

/*
 * Telefon: JEDEN wiersz ~44 px. Etykieta mniejsza, „Szczegóły” i pauza jako
 * małe okrągłe przyciski — napis przycisku zostaje w znaczniku (font-size: 0),
 * więc czytnik ekranu dalej go czyta. Wcześniej były dwa wiersze, ~100 px nad
 * banerem — „zajmuje za dużo miejsca” (uwaga właściciela 10.11.2026). Oknu
 * napisu zostaje ok. 215 px przy ekranie 375 px.
 */
@media (max-width: 600px) {
	.klucz-komunikat__wnetrze {
		gap: 8px;
		min-height: 44px;
		padding: 6px 12px;
	}

	.klucz-komunikat__etykieta {
		padding: 2px 7px;
		font-size: 10px;
		letter-spacing: 0.06em;
	}

	.klucz-komunikat__tekst,
	.klucz-komunikat__kopia {
		font-size: 13.5px;
	}

	/* Bez przewijania (bez skryptu, „Zatrzymaj ruch”) napis łamie się w wiersze —
	   mniejsza interlinia, żeby pasek nie puchł. */
	.klucz-komunikat__tekst {
		line-height: 1.35;
	}

	.klucz-komunikat__kopia {
		padding-right: 40px;
	}

	.klucz-komunikat__kopia::after {
		margin-left: 40px;
	}

	.klucz-komunikat__przycisk {
		justify-content: center;
		width: 30px;
		height: 30px;
		min-height: 0;
		padding: 0;
		gap: 0;
		font-size: 0;
	}

	.klucz-komunikat__przycisk::after {
		font-size: 15px;
		line-height: 1;
	}

	/* Pauza bez przycisku: napis staje i rusza po dotknięciu go (skrypt).
	   Przycisk na telefonie zbędny — decyzja właściciela 10.11.2026. */
	.klucz-komunikat__ruch,
	.klucz-komunikat__ruch[hidden] {
		display: none;
	}
}

/* =================================================================== okienko */

.klucz-okno {
	width: calc(100% - 32px);
	/* Szerokie, bo treść idzie w dwie kolumny (niżej) — przy 640 px w jednej
	   kolumnie okienko ledwo mieściło się w oknie przeglądarki (uwaga właściciela
	   10.11.2026). */
	max-width: 980px;
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	color: var(--pakiet-ink, #515555);
}

.klucz-okno::backdrop {
	background: rgba(30, 28, 26, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

/* Strona pod otwartym okienkiem się nie przewija. Klasę i dopełnienie z prawej
   o szerokość schowanego paska przewijania ustawia skrypt — bez dopełnienia
   strona przeskakiwała w prawo (uwaga właściciela 10.11.2026). `scrollbar-gutter`
   sprawdzony i w Chrome tego nie załatwia. */
html.klucz-okno-otwarte {
	overflow: hidden;
}

.klucz-okno__karta {
	position: relative;
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	padding: 34px 40px 30px;
	border: 1px solid transparent;
	border-radius: 28px;
	/* Ozdobne koło w prawym górnym rogu — echo kręgów z banera. */
	background:
		radial-gradient(circle at calc(100% + 40px) -40px, rgba(201, 77, 77, 0.16) 0, rgba(201, 77, 77, 0.16) 130px, transparent 131px),
		var(--pakiet-cream, #f6f3ee);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
	font-family: var(--klucz-font-ui, inherit);
	overscroll-behavior: contain;
}

.klucz-okno[open] .klucz-okno__karta {
	animation: klucz-okno-wejscie 220ms ease-out;
}

/* Chrome robi z przewijanej karty element, na który da się wejść klawiaturą —
   ramkę fokusu zostawiamy tylko dla klawiatury, nie po kliknięciu myszą. */
.klucz-okno:focus,
.klucz-okno__karta:focus:not(:focus-visible) {
	outline: none;
}

html.klucz-bez-ruchu .klucz-okno[open] .klucz-okno__karta {
	animation: none;
}

@keyframes klucz-okno-wejscie {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.klucz-okno__nadtytul {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	color: var(--pakiet-muted, #6f6b68);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.klucz-okno__kreska {
	flex: none;
	width: 28px;
	height: 2px;
	background: var(--pakiet-red, #c94d4d);
}

.klucz-okno__tytul {
	margin: 0 0 22px;
	padding-right: 44px;
	color: var(--pakiet-ink, #515555);
	font-family: var(--klucz-font-ui, inherit);
	font-size: clamp(1.625rem, 3.4vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1.02;
}

.klucz-okno__tresc {
	font-size: 0.9375rem;
	line-height: 1.55;
}

/*
 * Dwie kolumny od 860 px. Treść przychodzi pocięta na części po śródtytułach
 * (`Klucz_Komunikat::czesci()`) i żadna część nie rwie się między kolumnami.
 * Śródtytuły bez górnego marginesu — inaczej ten na szczycie drugiej kolumny
 * stałby niżej niż pierwszy; odstęp między częściami daje margines części.
 */
@media (min-width: 860px) {
	.klucz-okno__tresc {
		column-count: 2;
		column-gap: 44px;
	}

	/* Dwie klasy, bo zwykła reguła śródtytułu (niżej w pliku) ma tę samą wagę
	   i wygrywałaby kolejnością — lewa kolumna stała o 24 px niżej od prawej. */
	.klucz-okno .klucz-okno__tresc h3 {
		margin-top: 0;
	}

	.klucz-okno__czesc,
	.klucz-okno__wstep {
		break-inside: avoid;
		margin-bottom: 18px;
	}

	.klucz-okno__cialo > :last-child,
	.klucz-okno__wstep > :last-child {
		margin-bottom: 0;
	}
}

/* ---- Harmonijka na telefonie (przyciski w śródtytułach dokłada skrypt) ---- */

.klucz-okno__rozwin {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 15px 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Strzałka w kółku: w dół — zwinięte, w górę — rozwinięte. */
.klucz-okno__rozwin::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin: 0 6px 4px 0;
	border-right: 2px solid var(--pakiet-red, #c94d4d);
	border-bottom: 2px solid var(--pakiet-red, #c94d4d);
	transform: rotate(45deg);
	transition: transform 150ms ease;
}

.klucz-okno__rozwin[aria-expanded="true"]::after {
	margin-bottom: -4px;
	transform: rotate(-135deg);
}

.klucz-okno__rozwin:focus-visible {
	outline: 2px solid var(--pakiet-red, #c94d4d);
	outline-offset: 2px;
}

.klucz-okno--harmonijka .klucz-okno__czesc {
	border-top: 1px solid var(--pakiet-line, #ded9d2);
}

.klucz-okno--harmonijka .klucz-okno__czesc:last-child {
	border-bottom: 1px solid var(--pakiet-line, #ded9d2);
}

.klucz-okno--harmonijka .klucz-okno__tresc h3 {
	margin: 0;
}

.klucz-okno--harmonijka .klucz-okno__cialo {
	padding-bottom: 12px;
}

.klucz-okno__tresc > :first-child {
	margin-top: 0;
}

.klucz-okno__tresc p {
	margin: 0 0 12px;
}

.klucz-okno__tresc h3 {
	margin: 24px 0 8px;
	color: var(--pakiet-ink, #515555);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.klucz-okno__tresc ul,
.klucz-okno__tresc ol {
	margin: 0 0 12px;
	padding: 0;
}

.klucz-okno__tresc ul {
	list-style: none;
}

.klucz-okno__tresc ol {
	padding-left: 1.4em;
}

.klucz-okno__tresc li {
	margin: 0 0 8px;
}

.klucz-okno__tresc ol li::marker {
	color: var(--pakiet-red, #c94d4d);
	font-weight: 800;
}

/* Ptaszek z dwóch ramek obróconego prostokąta — jak na kartkach pakietów. */
.klucz-okno__tresc ul li {
	position: relative;
	padding-left: 28px;
}

.klucz-okno__tresc ul li::before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: 6px;
	width: 6px;
	height: 11px;
	border-right: 2.5px solid var(--pakiet-red, #c94d4d);
	border-bottom: 2.5px solid var(--pakiet-red, #c94d4d);
	transform: rotate(45deg);
}

.klucz-okno__tresc a {
	color: var(--pakiet-red, #c94d4d);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Komunikatory: białe pigułki z ikoną, jak przyciski zakładek oferty. */
.klucz-okno__komunikatory {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 2px 0 14px;
}

.klucz-okno__tresc .klucz-okno__komunikator {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px 7px 10px;
	border: 1px solid var(--pakiet-line, #ded9d2);
	border-radius: 999px;
	background: #fff;
	color: var(--pakiet-ink, #515555);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 150ms ease, color 150ms ease;
}

.klucz-okno__tresc .klucz-okno__komunikator:hover,
.klucz-okno__tresc .klucz-okno__komunikator:focus-visible {
	border-color: var(--pakiet-red, #c94d4d);
	color: var(--pakiet-red, #c94d4d);
}

.klucz-okno__komunikator img {
	flex: none;
	width: 20px;
	height: 20px;
}

.klucz-okno__zamknij {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--pakiet-line, #ded9d2);
	border-radius: 999px;
	background: #fff;
	color: var(--pakiet-ink, #515555);
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Krzyżyk z dwóch kresek. */
.klucz-okno__zamknij::before,
.klucz-okno__zamknij::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	margin: -1px 0 0 -8px;
	border-radius: 2px;
	background: currentColor;
	transform: rotate(45deg);
}

.klucz-okno__zamknij::after {
	transform: rotate(-45deg);
}

.klucz-okno__zamknij:hover,
.klucz-okno__zamknij:focus-visible {
	border-color: var(--pakiet-red, #c94d4d);
	background: var(--pakiet-red, #c94d4d);
	color: #fff;
}

.klucz-okno__przycisk {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0 0;
	padding: 16px 32px;
	border: 0;
	border-radius: 999px;
	background: var(--pakiet-red, #c94d4d);
	color: #fff;
	font-family: var(--klucz-font-ui, inherit);
	font-size: 0.9375rem;
	font-weight: 800;
	cursor: pointer;
	transition: background-color 150ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.klucz-okno__przycisk:hover,
.klucz-okno__przycisk:focus-visible {
	background: var(--pakiet-red-ciemny, #b03f3f);
}

.klucz-okno__zamknij:focus-visible,
.klucz-okno__przycisk:focus-visible {
	outline: 2px solid var(--pakiet-red, #c94d4d);
	outline-offset: 3px;
}

/* Telefon: pływająca karta na środku, z marginesem od krawędzi ekranu.
   (Była płachta na całą szerokość przyklejona do dołu — „nieestetyczne”,
   uwaga właściciela 10.11.2026.) */
@media (max-width: 600px) {
	.klucz-okno {
		width: calc(100% - 28px);
		max-width: none;
		max-height: calc(100dvh - 28px);
		margin: auto;
	}

	.klucz-okno__karta {
		max-height: calc(100dvh - 28px);
		padding: 28px 20px 22px;
		border-radius: 24px;
	}

	.klucz-okno__zamknij {
		top: 14px;
		right: 14px;
	}

	.klucz-okno__tytul {
		margin-bottom: 18px;
	}

	.klucz-okno__przycisk {
		justify-content: center;
		width: 100%;
	}
}

/* Wysoki kontrast: ogólna reguła robi kartę przezroczystą — tu wraca czerń. */
html.klucz-kontrast .klucz-okno__karta {
	background: #000 !important;
	border: 2px solid #fff !important;
}