/**
 * TM Popup — warstwa prezentacji frontu.
 *
 * Tokeny odwzorowują zmienne motywu medtab (--thm-*) z fallbackiem na wartości
 * wyekstrahowane z topmedical.pl. Dzięki temu zmiana koloru marki w Customizerze
 * przenosi się na popup automatycznie, a wtyczka nie duplikuje palety.
 *
 * Kroje pisma NIE są tu importowane — motyw ładuje Poppins i Open Sans globalnie.
 * Powtórne pobranie z Google Fonts kosztowałoby dodatkowe połączenie i uderzało
 * w LCP bez żadnej korzyści wizualnej.
 */

.tm-popup {
	--tmp-accent: var(--thm-base, #859bc1);
	--tmp-accent-hover: var(--thm-base-hover, #0d0d0d);
	--tmp-surface: #ffffff;
	--tmp-muted: var(--thm-tertiary, #f8f8f8);
	--tmp-border: var(--thm-border, #ebf2f3);
	--tmp-text: var(--thm-b-text, #686a6f);
	--tmp-heading: #202020;
	--tmp-font-head: var(--thm-font, "Poppins", sans-serif);
	--tmp-font-body: var(--thm-b-font, "Open Sans", sans-serif);
	--tmp-radius: 10px;
	--tmp-shadow: 0 24px 64px -12px rgba(16, 24, 40, 0.28), 0 0 0 1px rgba(16, 24, 40, 0.04);

	/* Czas i krzywa przejść motywu: `.sigma_btn`, `.sigma_close` i `.slick-arrow`
	   animują jednolicie w 0.3 s. Popup mówi tym samym językiem ruchu. */
	--tmp-motion: 300ms;

	/* Geometria. Wartości nadpisuje `Frontend\FrontendAssets::geometry()` na
	   podstawie enumów `PopupSize` i `MediaRatio`; poniższe są awaryjne
	   i odpowiadają wariantowi standardowemu w kadrze pionowym 3:4. */
	--tmp-size-cap: 680px;
	--tmp-media-max: 560px;
	--tmp-media-vh: 54vh;
	--tmp-ratio-w: 3;
	--tmp-ratio-h: 4;
	--tmp-width-min: 400px;

	/* Wysokość kadru: udział wysokości ekranu, ale nie więcej niż sufit
	   wariantu. Sterowanie wysokością, nie szerokością, jest warunkiem
	   koniecznym formatu pionowego — kadr 3:4 rozpięty na szerokość 680 px
	   ma 907 px wysokości i nie mieści się na żadnym laptopie. */
	--tmp-media-h: min(var(--tmp-media-vh), var(--tmp-media-max));

	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 4vw, 40px);
	/* Kontener przewijany, nie dialog — okno wyższe niż viewport na telefonie
	   musi dać się przewinąć w całości, łącznie z przyciskiem akcji. */
	overflow-y: auto;
	overscroll-behavior: contain;
}

.tm-popup[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Tło
   -------------------------------------------------------------------------- */

.tm-popup__overlay {
	position: fixed;
	inset: 0;
	background: rgba(16, 24, 40, 0.55);
	opacity: 0;
	transition: opacity 240ms ease;
}

.tm-popup.is-open .tm-popup__overlay {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Okno
   -------------------------------------------------------------------------- */

.tm-popup__dialog {
	position: relative;
	width: 100%;
	margin: auto;
	/* Kontekst zapytań kontenerowych: typografia okna skaluje się szerokością
	   kolumny, nie szerokością viewportu. W formacie pionowym te dwie wielkości
	   rozjeżdżają się drastycznie — na ekranie 1280 px kolumna ma 340 px,
	   a nagłówek liczony w `vw` łamał się na dwie linie i rozpychał okno. */
	container-type: inline-size;
	background: var(--tmp-surface);
	border-radius: var(--tmp-radius);
	box-shadow: var(--tmp-shadow);
	overflow: hidden;
	font-family: var(--tmp-font-body);
	color: var(--tmp-text);
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	transition: opacity 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tm-popup.is-open .tm-popup__dialog {
	opacity: 1;
	transform: none;
}

/*
 * Okno bez kadru korzysta z pełnego sufitu skali — kolumna tekstu zwężona do
 * proporcji zdjęcia byłaby nieczytelna.
 */
.tm-popup__dialog {
	max-width: var(--tmp-size-cap);
}

/*
 * Okno z kadrem: szerokość to mniejsze z dwóch ograniczeń — sufit skali oraz
 * szerokość wynikająca z dopuszczalnej wysokości kadru i jego proporcji.
 * Przy formacie pionowym wiąże drugi człon, więc okno rośnie i maleje razem
 * z wysokością ekranu. Przy poziomym i kwadratowym wiąże pierwszy i zachowanie
 * jest identyczne jak w 1.0.1.
 *
 * `max()` w środku to dolny próg czytelności kolumny tekstu. Bez niego niski
 * ekran zwężał okno do ~270 px, gdzie treść łamie się na tyle linii, że rośnie
 * w pionie szybciej, niż maleje kadr — okno przestawało mieścić się na ekranie
 * mimo formuły, która miała to gwarantować.
 */
.tm-popup__dialog.has-media {
	max-width: min(
		var(--tmp-size-cap),
		max(
			var(--tmp-width-min),
			calc(var(--tmp-media-h) * var(--tmp-ratio-w) / var(--tmp-ratio-h))
		)
	);
}

.tm-popup__dialog:focus-visible {
	outline: 2px solid var(--tmp-accent);
	outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Zamknięcie — kalka gestu `.sigma_close` z motywu medtab

   Motyw nie obraca przycisku ani nie zalewa go kolorem: rozkłada ramiona
   krzyżyka w poziomą kreskę (45°/135° → 0°/180°) w 0.3 s. Ten sam gest
   obowiązuje tutaj, bo popup ma być częścią witryny, nie wtrętem.
   -------------------------------------------------------------------------- */

.tm-popup__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 40 px: minimalny cel dotykowy wg WCAG 2.2 (2.5.8) i zarazem geometria
	   przycisku zamknięcia motywu. */
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* Biały krążek nie jest ozdobą: przycisk leży na zdjęciu o nieznanej
	   jasności, a sam ciemny krzyżyk potrafiłby zniknąć w kadrze. */
	background: rgba(255, 255, 255, 0.92);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(16, 24, 40, 0.16);
	transition: var(--tmp-motion);
}

.tm-popup__close-bar {
	position: absolute;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--tmp-heading);
	opacity: 0.7;
	transition: var(--tmp-motion);
}

.tm-popup__close-bar:first-child { transform: rotate(45deg); }
.tm-popup__close-bar:last-child  { transform: rotate(135deg); }

.tm-popup__close:hover .tm-popup__close-bar,
.tm-popup__close:focus-visible .tm-popup__close-bar {
	opacity: 1;
}

.tm-popup__close:hover .tm-popup__close-bar:first-child,
.tm-popup__close:focus-visible .tm-popup__close-bar:first-child {
	transform: rotate(0deg);
}

.tm-popup__close:hover .tm-popup__close-bar:last-child,
.tm-popup__close:focus-visible .tm-popup__close-bar:last-child {
	transform: rotate(180deg);
}

.tm-popup__close:focus-visible {
	outline: 2px solid var(--tmp-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Slider — CSS scroll-snap, zero JavaScriptu do samego przewijania
   -------------------------------------------------------------------------- */

.tm-popup__media {
	position: relative;
	background: var(--tmp-muted);
}

.tm-popup__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Pasek przewijania ukryty: nawigację przejmują strzałki i kropki,
	   a gest dotykowy działa natywnie bez biblioteki. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.tm-popup__track::-webkit-scrollbar {
	display: none;
}

.tm-popup__slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.tm-popup__figure {
	margin: 0;
	position: relative;
}

.tm-popup__slide-link {
	display: block;
	line-height: 0;
}

/*
 * Kadr o proporcji z panelu. `object-fit: cover` wypełnia go bez pasów tła —
 * przy proporcji zgodnej ze źródłem (zdjęcie z telefonu to natywnie 3:4)
 * przycięcie wynosi zero.
 *
 * `max-height` jest zaworem bezpieczeństwa dla trybu pełnej szerokości na
 * telefonie: bez niego kadr 3:4 rozpięty na 100vw ma wysokość 133vw i wypycha
 * przycisk akcji poza ekran. Przy ograniczeniu wysokości proporcja pudełka
 * się zmienia, a `cover` przycina obraz zamiast go deformować.
 */
.tm-popup__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--tmp-ratio-w) / var(--tmp-ratio-h);
	max-height: var(--tmp-media-h);
	object-fit: cover;
}

.tm-popup__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 20px 16px;
	background: linear-gradient(to top, rgba(16, 24, 40, 0.72), transparent);
	color: #ffffff;
	font-size: 0.875rem;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Pasek sterowania karuzelą — pod kadrem, nigdy na nim

   Strzałki nałożone na obraz zabierały piątą część powierzchni kadru
   pionowego i zasłaniały jego środek, czyli miejsce, w którym materiał
   marketingowy niesie treść. Pasek kosztuje ~50 px wysokości i zwraca
   całe zdjęcie.
   -------------------------------------------------------------------------- */

.tm-popup__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	background: var(--tmp-surface);
	border-bottom: 1px solid var(--tmp-border);
}

.tm-popup__nav {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 40 px utrzymane mimo zejścia z kadru: minimalny cel dotykowy
	   wg WCAG 2.2 (2.5.8) nie zależy od tego, gdzie leży przycisk. */
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tmp-muted);
	color: var(--tmp-heading);
	cursor: pointer;
	transition: var(--tmp-motion);
}

/* Zachowanie strzałek karuzeli motywu (`.slick-arrow`): białe tło ustępuje
   kolorowi marki, ikona bieleje, pojawia się miękki cień. */
.tm-popup__nav:hover,
.tm-popup__nav:focus-visible {
	background: var(--tmp-accent);
	color: #ffffff;
	box-shadow: 0 14px 24px 0 rgba(190, 173, 142, 0.3);
}

.tm-popup__nav:focus-visible {
	outline: 2px solid var(--tmp-accent);
	outline-offset: 2px;
}

/* Krańce karuzeli: przycisk wygaszony, ale wciąż w drzewie dostępności. */
.tm-popup__nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

.tm-popup__nav[disabled]:hover {
	background: var(--tmp-muted);
	color: var(--tmp-heading);
	box-shadow: none;
}

.tm-popup__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Kropki zeszły z obrazu na jasny pasek — biel z cieniem zamieniona
   na przygaszony kolor tekstu, stan aktywny na kolor marki. */
.tm-popup__dot {
	position: relative;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(16, 24, 40, 0.2);
	cursor: pointer;
	transition: width var(--tmp-motion) ease, background-color var(--tmp-motion) ease;
}

.tm-popup__dot[aria-selected="true"] {
	width: 22px;
	border-radius: 4px;
	background: var(--tmp-accent);
}

.tm-popup__dot:focus-visible {
	outline: 2px solid var(--tmp-accent);
	outline-offset: 2px;
}

/* Powiększony obszar klikalny kropki bez powiększania jej wizualnie. */
.tm-popup__dot::before {
	content: "";
	position: absolute;
	width: 24px;
	height: 24px;
	transform: translate(-8px, -8px);
}

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

.tm-popup__body {
	padding: clamp(20px, 4vw, 36px);
	text-align: center;
}

.tm-popup__heading {
	margin: 0 0 12px;
	font-family: var(--tmp-font-head);
	/* Deklaracja awaryjna dla przeglądarek bez jednostek kontenerowych —
	   kaskada użyje jej, gdy `cqw` nie zostanie rozpoznane. */
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	font-size: clamp(1.25rem, 5cqw, 1.75rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--tmp-heading);
}

.tm-popup__text {
	margin: 0 auto;
	max-width: 52ch;
	font-size: 1rem;
	line-height: 1.65;
}

.tm-popup__text > :first-child { margin-top: 0; }
.tm-popup__text > :last-child  { margin-bottom: 0; }

.tm-popup__text a {
	color: var(--tmp-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * Przycisk akcji — kalka `.sigma_btn` w wariancie `btn-style-4` (klasa niesiona
 * przez `<body>` witryny): wypełnienie wjeżdża z lewej do pełnej szerokości
 * w 0.3 s, tło bazowe pozostaje nietknięte. Typografia i wymiary z motywu,
 * żeby przycisk w popupie i przycisk w treści strony były tym samym obiektem.
 *
 * Warstwa wypełnienia to `::before` z ujemnym z-indeksem w kontekście układania
 * utworzonym przez `z-index: 1` na samym przycisku: maluje się nad tłem
 * przycisku, a pod jego etykietą. Ten sam mechanizm stosuje motyw.
 */
.tm-popup__cta {
	position: relative;
	z-index: 1;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-top: 24px;
	padding: 17px 30px;
	border-radius: 6px;
	background: var(--tmp-accent);
	color: #ffffff;
	font-family: var(--tmp-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 3px 24px rgba(0, 0, 0, 0.1);
	transition: var(--tmp-motion);
}

.tm-popup__cta::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 100%;
	border-radius: 6px;
	background-color: var(--tmp-accent-hover);
	z-index: -1;
	transition: var(--tmp-motion);
}

.tm-popup__cta:hover::before,
.tm-popup__cta:focus-visible::before {
	width: 100%;
}

.tm-popup__cta:hover,
.tm-popup__cta:focus-visible {
	color: #ffffff;
}

.tm-popup__cta:focus-visible {
	outline: 2px solid var(--tmp-accent);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Niski ekran (laptop 13", okno przeglądarki po odjęciu chromu)

   Przy oknie ~700 px wysokości większy kadr pionowy przestaje mieścić się
   razem z treścią. Wyjścia były dwa: zejść kadrem do ~46% wysokości ekranu,
   co przy szerokości 400 px oznacza przycięcie 40% zdjęcia, albo odzyskać
   wysokość na marginesach. Wybrane drugie — przycięcie kadru niszczy to,
   po co popup powstał, a margines nie niesie żadnej informacji.
   -------------------------------------------------------------------------- */

@media (min-width: 601px) and (max-height: 820px) {
	.tm-popup {
		padding: 16px;
	}

	.tm-popup__body {
		padding: 20px 24px 24px;
	}

	.tm-popup__cta {
		margin-top: 16px;
	}
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.tm-popup {
		padding: 12px;
	}

	.tm-popup__dialog,
	.tm-popup__dialog.has-media {
		/* Okno wyśrodkowane, nie arkusz przy dolnej krawędzi.
		   Wzorzec arkusza zakłada narzędzie, po które użytkownik sięga w trakcie
		   pracy ze stroną; komunikat modalny tę pracę przerywa i należy mu się
		   środek pola widzenia. Reguła proporcji ustępuje — na telefonie kadr
		   i tak jest pionowy, a zwężanie okna zostawiałoby pasy tła po bokach. */
		max-width: 100%;
		/* Sufit wysokości z własnym przewijaniem: okno pionowe potrafi
		   przekroczyć ekran, a wtedy przycisk akcji musi pozostać osiągalny. */
		max-height: 94vh;
		/* Na pełnej szerokości ekranu kadr dostaje więcej wysokości niż na
		   desktopie: przy proporcji zgodnej ze źródłem przycięcie schodzi
		   do kilku procent, a okno nadal mieści się bez przewijania. */
		--tmp-media-h: min(56vh, 520px);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 16px;
	}

	/* Jednostka dynamiczna tam, gdzie jest obsługiwana: pasek adresu przeglądarki
	   mobilnej chowa się przy przewijaniu i `vh` przestaje odpowiadać realnej
	   wysokości okna. */
	@supports (height: 100dvh) {
		.tm-popup__dialog,
		.tm-popup__dialog.has-media {
			max-height: 94dvh;
		}
	}

	/* Pasek sterowania zostaje także na telefonie. Gest przesunięcia działa
	   natywnie, ale sam nie informuje, że karuzela ma więcej slajdów —
	   kropki i strzałki są jedynym nośnikiem tej informacji. Po zejściu
	   spod kadru nie mają już czego zasłaniać. */
	.tm-popup__controls {
		padding: 8px 10px;
	}
}

/* --------------------------------------------------------------------------
   Preferencje użytkownika
   -------------------------------------------------------------------------- */

/*
 * Ruch jest wygaszany czasem trwania, nie usunięciem stanu docelowego:
 * krzyżyk nadal się rozkłada, a wypełnienie przycisku nadal się pojawia —
 * tyle że natychmiast. Wycięcie transformacji odebrałoby informację zwrotną
 * o najechaniu, co jest regresją dostępności, a nie jej poprawą.
 */
@media (prefers-reduced-motion: reduce) {
	.tm-popup__overlay,
	.tm-popup__dialog,
	.tm-popup__close,
	.tm-popup__close-bar,
	.tm-popup__nav,
	.tm-popup__cta,
	.tm-popup__cta::before,
	.tm-popup__dot {
		transition-duration: 1ms;
	}

	.tm-popup__track {
		scroll-behavior: auto;
	}
}

@media (prefers-contrast: more) {
	.tm-popup__dialog {
		border: 2px solid var(--tmp-heading);
	}

	.tm-popup__caption {
		background: rgba(16, 24, 40, 0.9);
	}
}