/* =========================================================================
   F-TECH BRAND MAP, front
   Tylko CSS unikalny dla mapy producentów. Wygląd kart, pól, przycisków,
   odznak i nagłówków dają komponenty ft-core (.ft-card, .ft-input, .ft-btn,
   .ft-badge, .ft-heading, .ft-eyebrow, .ft-lead, .ft-link, .ft-reveal).
   Wariant logo .ft-card__media--logo pochodzi z ft-core 1.2.0.
   Wszystkie wartości z tokenów --ft-* ft-core 1.1.4, z fallbackiem równym
   ich wartościom, żeby strona była czytelna także bez wgranej warstwy.
   ========================================================================= */

.ftech-bmap {
	--ftech-bmap-ink: var(--ft-ink, #2e2e2e);
	--ftech-bmap-muted: var(--ft-muted, #5c5c5c);
	--ftech-bmap-accent: var(--ft-accent, #707246);
	--ftech-bmap-accent-hover: var(--ft-accent-hover, #5a5c38);
	--ftech-bmap-accent-soft: var(--ft-accent-soft, #eef0e0);
	--ftech-bmap-surface: var(--ft-surface, #ffffff);
	--ftech-bmap-surface-alt: var(--ft-surface-alt, #f7f7f3);
	--ftech-bmap-border: var(--ft-border, #d6d6c2);
	--ftech-bmap-focus: var(--ft-focus, #5a5c38);
	--ftech-bmap-font-display: var(--ft-font-display, 'Oswald', 'Arial Narrow', sans-serif);
	--ftech-bmap-font-body: var(--ft-font-body, 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif);
	--ftech-bmap-fs-xs: var(--ft-fs-xs, 0.875rem);
	--ftech-bmap-fs-sm: var(--ft-fs-sm, 0.9375rem);
	--ftech-bmap-fs-h3: var(--ft-fs-h3, clamp(1.125rem, 1.8vw, 1.25rem));
	--ftech-bmap-fs-h2: var(--ft-fs-h2, clamp(1.5rem, 3.2vw, 2.25rem));
	--ftech-bmap-lh-heading: var(--ft-lh-heading, 1.25);
	--ftech-bmap-lh-body: var(--ft-lh-body, 1.7);
	--ftech-bmap-track-caps: var(--ft-track-caps, 0.06em);
	--ftech-bmap-space-1: var(--ft-space-1, 0.25rem);
	--ftech-bmap-space-2: var(--ft-space-2, 0.5rem);
	--ftech-bmap-space-3: var(--ft-space-3, 0.75rem);
	--ftech-bmap-space-4: var(--ft-space-4, 1rem);
	--ftech-bmap-space-5: var(--ft-space-5, 1.5rem);
	--ftech-bmap-space-6: var(--ft-space-6, 2rem);
	--ftech-bmap-space-7: var(--ft-space-7, 3rem);
	--ftech-bmap-section-y: var(--ft-section-y, clamp(3rem, 6vw, 5rem));
	--ftech-bmap-container: var(--ft-container, 77.5rem);
	--ftech-bmap-gutter: var(--ft-gutter, clamp(1rem, 4vw, 1.5rem));
	--ftech-bmap-touch: var(--ft-touch, 2.75rem);
	--ftech-bmap-touch-lg: var(--ft-touch-lg, 3.25rem);
	--ftech-bmap-rule: var(--ft-rule, 3px);
	--ftech-bmap-stroke: var(--ft-stroke, 2px);
	--ftech-bmap-dur-fast: var(--ft-dur-fast, 180ms);
	--ftech-bmap-dur: var(--ft-dur, 250ms);
	--ftech-bmap-ease: var(--ft-ease, cubic-bezier(0.4, 0, 0.2, 1));
	--ftech-bmap-ease-out: var(--ft-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
	--ftech-bmap-z-sticky: var(--ft-z-sticky, 100);
	/* Odstęp przyklejonego paska od góry okna. Skrypt frontu (punkt 9) ustawia go
	   na realną wysokość przyklejonego nagłówka strony; bez skryptu pasek klei się do krawędzi. */
	--ftech-bmap-sticky-top: 0px;
	/* Wysokość samego paska wyszukiwania. Skrypt frontu mierzy ją na żywo; do tego czasu
	   szacunek z tokenów: etykieta, pole i odstępy pionowe paska. */
	--ftech-bmap-bar-h: calc(2 * var(--ftech-bmap-touch) + var(--ftech-bmap-space-6));
	--ftech-bmap-measure: var(--ft-measure, 70ch);
	--ftech-bmap-lh-tight: var(--ft-lh-tight, 1.1);

	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--ftech-bmap-container) + 2 * var(--ftech-bmap-gutter));
	margin-inline: auto;
	padding: var(--ftech-bmap-space-6) var(--ftech-bmap-gutter) var(--ftech-bmap-section-y);
	color: var(--ftech-bmap-ink);
	font-family: var(--ftech-bmap-font-body);
	line-height: var(--ftech-bmap-lh-body);
}

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

.ftech-bmap [hidden] {
	display: none !important;
}

.ftech-bmap img {
	max-width: 100%;
	height: auto;
}

/* Astra podkreśla odnośniki w treści regułą .ast-single-post .entry-content a (0,2,1).
   Odnośniki nawigacyjne mapy dostają o jeden poziom silniejszy zakres, bez !important. */
.ftech-bmap .ftech-bmap__breadcrumb-list a,
.ftech-bmap .ftech-bmap__index a.ftech-bmap__index-link,
.ftech-bmap .ftech-bmap__cards a.ftech-bmap__card {
	text-decoration: none;
}

/* 1. BREADCRUMB (bez animacji, element nawigacyjny) */
.ftech-bmap .ftech-bmap__breadcrumb {
	margin-bottom: var(--ftech-bmap-space-6);
	font-size: var(--ftech-bmap-fs-xs);
	color: var(--ftech-bmap-muted);
}

.ftech-bmap .ftech-bmap__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ftech-bmap-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ftech-bmap .ftech-bmap__breadcrumb-item {
	display: inline-flex;
	align-items: center;
	gap: var(--ftech-bmap-space-2);
}

.ftech-bmap .ftech-bmap__breadcrumb-item + .ftech-bmap__breadcrumb-item::before {
	content: '/';
	color: var(--ftech-bmap-border);
}

.ftech-bmap .ftech-bmap__breadcrumb a {
	color: var(--ftech-bmap-muted);
	text-decoration: none;
	box-shadow: none;
	transition: color var(--ftech-bmap-dur-fast) var(--ftech-bmap-ease);
}

.ftech-bmap .ftech-bmap__breadcrumb a:hover {
	color: var(--ftech-bmap-accent-hover);
}

.ftech-bmap .ftech-bmap__breadcrumb [aria-current="page"] {
	color: var(--ftech-bmap-ink);
}

/* 2. NAGŁÓWEK STRONY: H1 w skali h1, reszta z .ft-heading */
.ftech-bmap .ftech-bmap__header {
	max-width: var(--ftech-bmap-measure);
	margin-bottom: var(--ftech-bmap-space-7);
}

.ftech-bmap .ftech-bmap__heading {
	font-size: var(--ft-fs-h1, clamp(2rem, 4.5vw, 3.25rem));
	/* Zabezpieczenie na brak fontu kontraktu: długie słowo przenosi się z łącznikiem,
	   zamiast rozpadać się bez niego przez word-wrap motywu. */
	hyphens: auto;
}

/* 3. PASEK WYSZUKIWANIA, przyklejony pod nagłówkiem strony */
.ftech-bmap .ftech-bmap__search-bar {
	position: sticky;
	top: var(--ftech-bmap-sticky-top);
	z-index: var(--ftech-bmap-z-sticky);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ftech-bmap-space-3) var(--ftech-bmap-space-5);
	margin: 0 calc(-1 * var(--ftech-bmap-gutter)) var(--ftech-bmap-space-6);
	padding: var(--ftech-bmap-space-4) var(--ftech-bmap-gutter);
	border-block: 1px solid var(--ftech-bmap-border);
	background: var(--ftech-bmap-surface-alt);
}

.ftech-bmap .ftech-bmap__search-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"label"
		"field"
		"submit";
	gap: var(--ftech-bmap-space-2) var(--ftech-bmap-space-3);
	flex: 1 1 auto;
	max-width: var(--ftech-bmap-measure);
	margin: 0;
}

.ftech-bmap .ftech-bmap__search-label {
	grid-area: label;
}

.ftech-bmap .ftech-bmap__search-field {
	position: relative;
	grid-area: field;
	min-width: 0;
}

.ftech-bmap .ftech-bmap__search-input {
	width: 100%;
}

/* Ukryj natywny krzyżyk pola search, czyszczenie ma własny, widoczny odnośnik. */
.ftech-bmap .ftech-bmap__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.ftech-bmap .ftech-bmap__search-clear {
	display: inline-flex;
	align-items: center;
	min-height: var(--ftech-bmap-touch);
	margin-top: var(--ftech-bmap-space-1);
	color: var(--ftech-bmap-accent-hover);
	font-size: var(--ftech-bmap-fs-xs);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: var(--ftech-bmap-space-1);
}

.ftech-bmap .ftech-bmap__search-submit {
	grid-area: submit;
	align-self: start;
	width: 100%;
}

.ftech-bmap .ftech-bmap__search-count {
	flex: 0 0 auto;
	margin: 0;
	color: var(--ftech-bmap-muted);
	font-size: var(--ftech-bmap-fs-sm);
	font-variant-numeric: tabular-nums;
}

/* 4. INDEKS ALFABETYCZNY: poziomy pasek ze scroll-snap na telefonie */
.ftech-bmap .ftech-bmap__index {
	margin: 0 calc(-1 * var(--ftech-bmap-gutter)) var(--ftech-bmap-space-6);
	padding-inline: var(--ftech-bmap-gutter);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.ftech-bmap .ftech-bmap__index-list {
	display: flex;
	gap: var(--ftech-bmap-space-1);
	width: max-content;
	margin: 0;
	padding: 0 0 var(--ftech-bmap-space-2);
	list-style: none;
}

.ftech-bmap .ftech-bmap__index-item {
	scroll-snap-align: start;
}

.ftech-bmap .ftech-bmap__index-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ftech-bmap-touch);
	min-height: var(--ftech-bmap-touch);
	padding-inline: var(--ftech-bmap-space-2);
	border: 1px solid var(--ftech-bmap-border);
	background: var(--ftech-bmap-surface);
	color: var(--ftech-bmap-ink);
	font-family: var(--ftech-bmap-font-display);
	font-size: var(--ftech-bmap-fs-sm);
	font-weight: 600;
	letter-spacing: var(--ftech-bmap-track-caps);
	text-decoration: none;
	transition: border-color var(--ftech-bmap-dur-fast) var(--ftech-bmap-ease),
	            background-color var(--ftech-bmap-dur-fast) var(--ftech-bmap-ease),
	            color var(--ftech-bmap-dur-fast) var(--ftech-bmap-ease);
}

.ftech-bmap a.ftech-bmap__index-link:not(.ftech-bmap__index-link--disabled):hover,
.ftech-bmap a.ftech-bmap__index-link.is-active:not(.ftech-bmap__index-link--disabled) {
	border-color: var(--ftech-bmap-accent);
	background: var(--ftech-bmap-accent-soft);
	color: var(--ftech-bmap-accent-hover);
}

.ftech-bmap .ftech-bmap__index-link--disabled {
	border-color: transparent;
	background: transparent;
	color: var(--ftech-bmap-border);
	cursor: default;
	pointer-events: none;
}

/* 5. GRUPY LITER */
.ftech-bmap .ftech-bmap__groups {
	container-type: inline-size;
	min-width: 0;
}

.ftech-bmap .ftech-bmap__group {
	/* Grupy poza ekranem nie są renderowane, dopóki nie trzeba (poziom 2, bez wsparcia
	   po prostu renderują się normalnie). Wysokość zastępczą przeglądarka zapamiętuje. */
	content-visibility: auto;
	contain-intrinsic-size: auto calc(4 * var(--ftech-bmap-touch-lg) + var(--ftech-bmap-space-7));
	/* Skok z indeksu nie może schować nagłówka grupy pod przyklejonym paskiem. */
	scroll-margin-top: calc(var(--ftech-bmap-sticky-top) + var(--ftech-bmap-bar-h) + var(--ftech-bmap-space-5));
	padding-top: var(--ftech-bmap-space-5);
	border-top: 1px solid var(--ftech-bmap-border);
}

.ftech-bmap .ftech-bmap__group + .ftech-bmap__group {
	margin-top: var(--ftech-bmap-space-7);
}

.ftech-bmap .ftech-bmap__group-letter {
	position: relative;
	margin: 0 0 var(--ftech-bmap-space-5);
	padding-bottom: var(--ftech-bmap-space-2);
	color: var(--ftech-bmap-ink);
	font-family: var(--ftech-bmap-font-display);
	font-size: var(--ftech-bmap-fs-h2);
	font-weight: 700;
	line-height: var(--ftech-bmap-lh-tight);
	letter-spacing: var(--ftech-bmap-track-caps);
	text-transform: uppercase;
}

.ftech-bmap .ftech-bmap__group-letter::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--ft-rule-w, 3rem);
	height: var(--ftech-bmap-rule);
	background: var(--ftech-bmap-accent);
}

.ftech-bmap .ftech-bmap__group-letter:focus {
	outline: none;
}

.ftech-bmap .ftech-bmap__group-letter:focus-visible {
	outline: var(--ftech-bmap-stroke) solid var(--ftech-bmap-focus);
	outline-offset: var(--ftech-bmap-space-1);
}

/* 6. SIATKA KART: container queries, bo kolumna grup zmienia szerokość z układem strony */
.ftech-bmap .ftech-bmap__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ftech-bmap-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@container (min-width: 30rem) {
	.ftech-bmap .ftech-bmap__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 46rem) {
	.ftech-bmap .ftech-bmap__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (min-width: 62rem) {
	.ftech-bmap .ftech-bmap__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ftech-bmap .ftech-bmap__card-item {
	display: flex;
	min-width: 0;
}

/* 7. KARTA MARKI: wygląd bazowy z .ft-card, tu tylko układ wnętrza */
.ftech-bmap .ftech-bmap__card {
	flex: 1 1 auto;
	gap: var(--ftech-bmap-space-2);
	height: 100%;
	padding-bottom: var(--ftech-bmap-space-4);
	color: var(--ftech-bmap-ink);
	text-decoration: none;
}

.ftech-bmap .ftech-bmap__card:focus {
	outline: none;
}

.ftech-bmap .ftech-bmap__card:focus-visible {
	outline: var(--ftech-bmap-stroke) solid var(--ftech-bmap-focus);
	outline-offset: var(--ftech-bmap-stroke);
}

.ftech-bmap .ftech-bmap__card-media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(var(--ftech-bmap-touch-lg) + var(--ftech-bmap-space-5));
	margin-bottom: var(--ftech-bmap-space-2);
	padding: var(--ftech-bmap-space-3);
	border-bottom: 1px solid var(--ftech-bmap-border);
	background: var(--ftech-bmap-surface);
}

/* Kafel tekstowy dla marki bez logo, jak kafel na stronie głównej */
.ftech-bmap .ftech-bmap__card-fallback {
	color: var(--ftech-bmap-ink);
	font-family: var(--ftech-bmap-font-display);
	font-size: var(--ftech-bmap-fs-h3);
	font-weight: 600;
	line-height: var(--ftech-bmap-lh-heading);
	letter-spacing: var(--ftech-bmap-track-caps);
	text-align: center;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	transition: color var(--ftech-bmap-dur) var(--ftech-bmap-ease);
}

.ftech-bmap .ftech-bmap__card:hover .ftech-bmap__card-fallback,
.ftech-bmap .ftech-bmap__card:focus-visible .ftech-bmap__card-fallback {
	color: var(--ftech-bmap-accent);
}

.ftech-bmap .ftech-bmap__card-name {
	margin: 0;
	padding-inline: var(--ftech-bmap-space-4);
	color: var(--ftech-bmap-ink);
	font-family: var(--ftech-bmap-font-display);
	font-size: var(--ftech-bmap-fs-h3);
	font-weight: 600;
	line-height: var(--ftech-bmap-lh-heading);
	letter-spacing: var(--ftech-bmap-track-caps);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.ftech-bmap .ftech-bmap__card-desc {
	display: -webkit-box;
	margin: 0;
	padding-inline: var(--ftech-bmap-space-4);
	overflow: hidden;
	color: var(--ftech-bmap-muted);
	font-size: var(--ftech-bmap-fs-sm);
	line-height: var(--ftech-bmap-lh-body);
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

.ftech-bmap .ftech-bmap__card-cta {
	/* Szerokość według treści, nie całej karty: strzałka zostaje tuż przy tekście. */
	align-self: flex-start;
	margin-top: auto;
	padding-inline: var(--ftech-bmap-space-4);
	font-size: var(--ftech-bmap-fs-sm);
}

/* Strzałka rysowana obramowaniem, bez znaku w treści */
.ftech-bmap .ftech-bmap__card-cta::after {
	content: '';
	display: inline-block;
	width: var(--ftech-bmap-space-2);
	height: var(--ftech-bmap-space-2);
	border-top: var(--ftech-bmap-stroke) solid currentColor;
	border-right: var(--ftech-bmap-stroke) solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--ftech-bmap-dur-fast) var(--ftech-bmap-ease);
}

.ftech-bmap .ftech-bmap__card:hover .ftech-bmap__card-cta::after,
.ftech-bmap .ftech-bmap__card:focus-visible .ftech-bmap__card-cta::after {
	transform: translateX(var(--ftech-bmap-space-1)) rotate(45deg);
}

.ftech-bmap .ftech-bmap__card-badge {
	align-self: flex-start;
	margin-inline: var(--ftech-bmap-space-4);
}

/* Podświetlenie trafienia wstawiane przez skrypt (punkt 9) */
.ftech-bmap mark.ftech-bmap__match {
	padding: 0;
	background: var(--ftech-bmap-accent-soft);
	color: inherit;
	box-shadow: 0 var(--ftech-bmap-stroke) 0 var(--ftech-bmap-accent);
}

/* Filtrowanie na żywo a wydajność (INP): efekt wejścia tylko na grupach liter (najwyżej 20
   elementów), nie na 65 kartach, bo animowanie wszystkich kart naraz przekraczało próg 200 ms
   przy spowolnionym procesorze. Grupy nie odtwarzają też animacji .ft-reveal przy każdym
   ponownym pokazaniu, to było odczuwalne jako skakanie listy podczas pisania. */
.ftech-bmap.is-filtering .ftech-bmap__group {
	transition: opacity var(--ftech-bmap-dur) var(--ftech-bmap-ease-out),
	            display var(--ftech-bmap-dur) allow-discrete;
}

@starting-style {
	.ftech-bmap.is-filtering .ftech-bmap__group {
		opacity: 0;
	}
}

.ftech-bmap.is-filtering .ftech-bmap__group.ft-reveal {
	animation: none;
}

/* 8. STAN PUSTY */
.ftech-bmap .ftech-bmap__empty {
	max-width: var(--ftech-bmap-measure);
	padding: var(--ftech-bmap-space-7) var(--ftech-bmap-space-5);
	border: 1px dashed var(--ftech-bmap-border);
	background: var(--ftech-bmap-surface-alt);
}

.ftech-bmap .ftech-bmap__empty-text {
	margin: 0 0 var(--ftech-bmap-space-5);
	color: var(--ftech-bmap-ink);
	font-size: var(--ft-fs-lead, clamp(1.0625rem, 1.6vw, 1.125rem));
}

.ftech-bmap .ftech-bmap__empty-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ftech-bmap-space-3) var(--ftech-bmap-space-5);
}

/* 9. BREAKPOINTY UKŁADU STRONY (media queries, bo zależą od okna) */
@media (min-width: 640px) {
	.ftech-bmap .ftech-bmap__search-form {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"label label"
			"field submit";
	}

	.ftech-bmap .ftech-bmap__search-submit {
		width: auto;
	}

	.ftech-bmap .ftech-bmap__search-bar {
		margin-inline: 0;
		padding-inline: var(--ftech-bmap-space-5);
		border: 1px solid var(--ftech-bmap-border);
	}

	.ftech-bmap .ftech-bmap__index {
		margin-inline: 0;
		padding-inline: 0;
	}
}

@media (min-width: 768px) {
	.ftech-bmap .ftech-bmap__index-list {
		flex-wrap: wrap;
		width: auto;
	}

	.ftech-bmap .ftech-bmap__index {
		overflow-x: visible;
	}
}

/* Od 1024 px indeks staje się lewą, przyklejoną kolumną obok grup */
@media (min-width: 1024px) {
	.ftech-bmap .ftech-bmap__body {
		display: grid;
		grid-template-columns: calc(2 * var(--ftech-bmap-touch) + var(--ftech-bmap-space-1)) minmax(0, 1fr);
		gap: var(--ftech-bmap-space-7);
		align-items: start;
	}

	.ftech-bmap .ftech-bmap__index {
		position: sticky;
		top: calc(var(--ftech-bmap-sticky-top) + var(--ftech-bmap-bar-h) + var(--ftech-bmap-space-5));
		margin: 0;
	}

	.ftech-bmap .ftech-bmap__index-list {
		display: grid;
		grid-template-columns: repeat(2, var(--ftech-bmap-touch));
		gap: var(--ftech-bmap-space-1);
		padding: 0;
	}
}

@media (min-width: 1280px) {
	.ftech-bmap .ftech-bmap__cards {
		gap: var(--ftech-bmap-space-5);
	}
}

/* 10. RUCH ZREDUKOWANY: zawsze na końcu arkusza */
@media (prefers-reduced-motion: reduce) {
	.ftech-bmap *,
	.ftech-bmap *::before,
	.ftech-bmap *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.ftech-bmap .ftech-bmap__card:hover .ftech-bmap__card-cta::after {
		transform: rotate(45deg);
	}
}