.sp-units-directory{width:100%;padding-bottom:48px}.sp-units-nav{display:flex;gap:8px;flex-wrap:wrap;padding:12px 0 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:22px 0 0}.sp-units-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;color:var(--ink);transition:border-color .15s,color .15s,background .15s}.sp-units-chip i{font-size:15px;color:var(--terra)}.sp-units-chip:hover{border-color:var(--terra);color:var(--terra)}.sp-units-section{padding-top:48px;scroll-margin-top:86px}.sp-units-section__head{display:flex;align-items:center;gap:16px;margin-bottom:24px}.sp-units-section__icon{width:50px;height:50px;border-radius:50%;background:var(--paper-deep);color:var(--terra);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}.sp-units-section__head h2{font-family:"Inter",sans-serif;font-weight:600;font-size:25px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;margin:0}.sp-units-section__line{height:1px;background:var(--line);flex:1}.sp-units-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.sp-unit-card{min-height:132px;border:1px solid var(--line);background:#fff;display:grid;grid-template-columns:124px 1fr;align-items:stretch;color:var(--ink);transition:border-color .2s,transform .2s;overflow:hidden}.sp-unit-card:hover{border-color:var(--terra);transform:translateY(-2px);color:var(--ink)}.sp-unit-card__media{background:var(--paper-deep);display:flex;align-items:center;justify-content:center;color:var(--terra);font-size:28px;overflow:hidden}.sp-unit-card__media img{display:block;width:100%;height:100%;object-fit:cover}.sp-unit-card__body{display:flex;flex-direction:column;justify-content:center;padding:20px 18px;min-width:0}.sp-unit-card__name{font-family:"Inter",sans-serif;font-weight:600;font-size:15.5px;line-height:1.35;letter-spacing:-.01em}.sp-unit-card__phone{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:400;color:var(--fog);white-space:nowrap}.sp-unit-card__phone i{font-size:14px;color:var(--terra)}@media(max-width:1050px){.sp-units-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.sp-units-nav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:12px}.sp-units-chip{white-space:nowrap}.sp-units-section{padding-top:36px}.sp-units-section__head h2{font-size:21px;white-space:normal}.sp-units-grid{grid-template-columns:1fr;gap:10px}.sp-unit-card{grid-template-columns:100px 1fr;min-height:108px}}


/* ==============================================================
 * Przyklejona nawigacja Jednostek.
 * ============================================================== */

.sp-units-nav {
	position: sticky;
	top: 0;
	z-index: 18;
	background: var(--paper, #F8F9FA);
}

/*
 * Na telefonie kapsułki zawijają się w kolejne rzędy.
 * Nie potrzebujemy poziomego scrolla, bo typów jednostek jest mało.
 */
@media(max-width:700px) {
	.sp-units-nav {
		overflow-x: visible;
		flex-wrap: wrap;
		gap: 7px;
		padding: 10px 0 12px;
	}

	.sp-units-chip {
		white-space: normal;
	}
}


/* ==============================================================
 * Mobilna nawigacja sekcji z przyklejonym polem wyboru.
 * ============================================================== */

.sp-units-mobile-nav {
	display: none;
}

.sp-units-chip.is-active {
	border-color: var(--terra);
	color: var(--terra);
	background: #fff;
}

@media (max-width: 700px) {
	/* Kapsułki są desktopowe — na telefonie zastępuje je select. */
	.sp-units-nav {
		display: none;
	}

	.sp-units-mobile-nav {
		position: sticky;
		top: 0;
		z-index: 30;
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr) 34px;
		align-items: center;
		width: 100%;
		min-height: 58px;
		margin: 18px 0 8px;
		border: 1px solid var(--line);
		background: var(--paper-deep);
		box-shadow: 0 6px 12px rgba(11,48,76,.04);
	}

	.sp-units-mobile-nav__icon,
	.sp-units-mobile-nav__chevron {
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
	}

	.sp-units-mobile-nav__icon {
		color: var(--terra);
		font-size: 18px;
	}

	.sp-units-mobile-nav__chevron {
		color: var(--fog);
		font-size: 16px;
	}

	.sp-units-mobile-select {
		width: 100%;
		height: 56px;
		padding: 0 10px;
		border: 0;
		outline: 0;
		background: transparent;
		appearance: none;
		-webkit-appearance: none;
		font-family: "Inter", sans-serif;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.2;
		color: var(--ink);
		cursor: pointer;
	}

	.sp-units-mobile-select:focus {
		box-shadow: inset 0 0 0 2px var(--terra);
	}

	.sp-units-section {
		scroll-margin-top: 76px;
	}
}

/* ==============================================================
 * Pasek akcentujący kartę przy najechaniu.
 * ============================================================== */
.sp-unit-card {
	position: relative;
}

.sp-unit-card::before {
	content: "";
	position: absolute;
	z-index: 3;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--terra, #166299);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .25s ease;
	pointer-events: none;
}

.sp-unit-card:hover::before,
.sp-unit-card:focus-visible::before {
	transform: scaleY(1);
}

/* ==============================================================
 * Animacja strzałki karty.
 * W spoczynku ukryta i cofnięta o 4px; na hover wjeżdża na miejsce.
 * ============================================================== */
.sp-unit-card__body {
	position: relative;
	padding-right: 42px;
}

.sp-unit-card__name {
	transition: padding-right .2s ease;
}

.sp-unit-card__arrow {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%) translateX(-4px);
	font-size: 17px;
	line-height: 1;
	color: var(--terra, #166299);
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

.sp-unit-card:hover .sp-unit-card__name,
.sp-unit-card:focus-visible .sp-unit-card__name {
	padding-right: 18px;
}

.sp-unit-card:hover .sp-unit-card__arrow,
.sp-unit-card:focus-visible .sp-unit-card__arrow {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

.sp-unit-card__arrow i {
	display: block;
	font-size: inherit;
	line-height: 1;
}