/**
 * Component: Znajdź przedstawiciela (mapa + lista wierszy w grid 2×3, sync na hover).
 *
 * Wiersz: zdjęcie lewo, dane/rola/kontakt prawo (bez zmian) — widoczne zawsze, bez
 * reveal/growth na hover (decyzja 2026-07-13). Lista jako grid 2 kolumny × 3 wiersze
 * (decyzja 2026-07-14). Hover/focus na wierszu LUB na regionie mapy podświetla oba
 * w tym samym kolorze (JS synchronizuje mapę, CSS synchronizuje wiersz).
 */

.agf-repgrid {
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
	align-items: stretch;
}

@media (min-width: 992px) {
	.agf-repgrid {
		display: grid;
		grid-template-columns: auto 1fr; /* liquid: lista auto = jej realna szerokość (max-content), mapa 1fr = zawsze reszta miejsca */
		gap: var(--space-64);
		align-items: start;
	}
	.agf-repgrid__map {
		grid-column: 2; /* mapa po prawej (zamienione miejscami z listą) */
		grid-row: 1;
		position: sticky;
		top: var(--space-32);
	}
	.agf-repgrid__viewport {
		grid-column: 1; /* lista po lewej */
		grid-row: 1; /* bez tego auto-placement wrzucał mapę i listę w osobne wiersze */
	}
}

/* Mapa — identyczna z wariantem 1 */
.agf-repgrid__mapmedia {
	position: relative;
}

.agf-repgrid__mapmedia svg {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
}

.agf-repgrid__mapmedia path[data-region] {
	fill: color-mix(in srgb, var(--graphite) 10%, var(--bg-page));
	stroke: var(--graphite);
	stroke-opacity: 0.12;
	stroke-width: 1.5;
	stroke-linejoin: round;
	stroke-linecap: round;
	cursor: pointer;
	outline: none;
	transition: fill var(--transition-base), opacity var(--transition-base), stroke var(--transition-base);
}

.agf-repgrid__mapmedia path[data-region]:focus-visible {
	stroke: var(--blue);
	stroke-opacity: 1;
	stroke-width: 2;
}

.agf-repgrid__mapmedia path[data-region].is-active {
	fill: var(--blue);
	stroke: var(--white); /* biały szew między sąsiednimi aktywnymi regionami — inaczej zlewają się w jedną plamę */
	stroke-opacity: 1;
	stroke-width: 2;
}

/* Kliknięte województwo — ciemniejszy odcień, żeby nie ginęło wśród pozostałych
   regionów przedstawiciela (potrafi ich podświetlić dziewięć). */
.agf-repgrid__mapmedia path[data-region].is-selected {
	fill: var(--blue-dark);
	stroke-width: 3;
}

.agf-repgrid__tooltip {
	position: absolute;
	z-index: 2;
	white-space: nowrap; /* nazwa województwa zawsze w 1 wierszu, nawet długa (Warmińsko-mazurskie) */
	padding: var(--space-8);
	background: var(--graphite);
	color: var(--white);
	font-size: var(--text-label);
	line-height: 1.35;
	pointer-events: none;
	transform: translate(-50%, calc(-100% - 10px));
	box-shadow: var(--shadow-mega);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-fast);
}

.agf-repgrid__tooltip.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Lista — grid 2 kolumny × 3 wiersze (6 przedstawicieli). Wiersz bez zmian: zdjęcie lewo,
   dane/rola/kontakt prawo. max-content per kolumna = szerokość najszerszego wiersza w danej
   kolumnie wyznacza wspólną szerokość dla obu (domyślny justify-items: stretch wypełnia). */
.agf-rowlist {
	display: grid;
	grid-template-columns: 1fr;   /* mobile: jedna kolumna — max-content wypychał drugą poza ekran */
	gap: var(--space-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 992px) {
	.agf-rowlist {
		grid-template-columns: repeat(2, max-content);
	}
}

.agf-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-16);
	padding-block: var(--space-16);
	padding-left: var(--space-16);
	padding-right: var(--space-16);
	border-top: 1px solid var(--border);
	cursor: pointer;
}

.agf-row:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

.agf-row.is-active,
.agf-row.is-related,
.agf-row:hover,
.agf-row:focus-within {
	background: color-mix(in srgb, var(--blue) 10%, var(--white));
}

.agf-row__avatar {
	position: relative; /* kontekst dla krzyżyka narożnego ::after */
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	box-shadow: var(--shadow-mega);
}

.agf-row__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.agf-row__info {
	min-width: 0;
	flex: 0 0 auto;
}

/* .agf-row__title-group: bez CSS — rodzic .agf-row__info nie jest flex, h3+p układają się kolumnowo (block flow) */

.agf-row__name {
	margin: 0;
	font-size: var(--text-body);
	font-weight: 600;
	line-height: 1.2;
	color: var(--graphite);
}

.agf-row__role {
	margin: 4px 0 0;
	font-size: var(--text-body);
	line-height: 1.4;
	color: color-mix(in srgb, var(--graphite) 62%, var(--white));
}

/* Kontakt — mail nad telefonem, jedno pod drugim (nie w wierszu) */
.agf-row__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* linki szerokości treści, nie rozciągnięte (domyślny stretch) */
	gap: var(--space-8);
	margin-top: var(--space-8);
}

.agf-row__link {
	display: inline-flex;
	align-items: center;
	font-size: var(--text-label);
	font-weight: 600;
	color: var(--blue);
	text-decoration: none;
}

.agf-row__link:hover,
.agf-row__link:focus-visible {
	color: var(--blue);
	text-decoration: underline;
}

/* Krzyżyk narożny na zdjęciu, jeden róg per zdjęcie (przypisany raz, statycznie, po indeksie —
   nie losowany dynamicznie) — identyczny motyw i box co .products-cf__card (products.css):
   inset -8px (krzyżyk wystaje 8px poza zdjęcie, pół w/pół poza — nie inset:0, obcinałoby kreski
   zewnętrzne). Mieści się bez kolizji: agf-row ma padding-left/padding-block 16px wokół avatara. */
.agf-row__avatar--cross-tl::after,
.agf-row__avatar--cross-tr::after,
.agf-row__avatar--cross-bl::after,
.agf-row__avatar--cross-br::after {
	content: "";
	position: absolute;
	inset: calc(var(--space-16) / -2);
	pointer-events: none;
}
.agf-row__avatar--cross-tl::after {
	background:
		linear-gradient(var(--blue), var(--blue)) left var(--space-8) top 0 / 1px var(--space-16) no-repeat,
		linear-gradient(var(--blue), var(--blue)) left 0 top var(--space-8) / var(--space-16) 1px no-repeat;
}
.agf-row__avatar--cross-tr::after {
	background:
		linear-gradient(var(--blue), var(--blue)) right var(--space-8) top 0 / 1px var(--space-16) no-repeat,
		linear-gradient(var(--blue), var(--blue)) right 0 top var(--space-8) / var(--space-16) 1px no-repeat;
}
.agf-row__avatar--cross-bl::after {
	background:
		linear-gradient(var(--blue), var(--blue)) left var(--space-8) bottom 0 / 1px var(--space-16) no-repeat,
		linear-gradient(var(--blue), var(--blue)) left 0 bottom var(--space-8) / var(--space-16) 1px no-repeat;
}
.agf-row__avatar--cross-br::after {
	background:
		linear-gradient(var(--blue), var(--blue)) right var(--space-8) bottom 0 / 1px var(--space-16) no-repeat,
		linear-gradient(var(--blue), var(--blue)) right 0 bottom var(--space-8) / var(--space-16) 1px no-repeat;
}

/* ── Mobile (<992px): karuzela peek + select województwa ──────────────────────
   Mapa schodzi do roli WYJŚCIA — podświetla regiony aktualnej karty, ale nie
   przyjmuje dotyku (województwo ma tu ~25px, próg WCAG 2.5.8 to 24px, komfort 44).
   Wejściem jest select nad mapą. Bez JS zostaje zwykła lista jednokolumnowa. */
@media (max-width: 991.98px) {
	/* Karuzela wychodzi poza gutter kontenera — peek dochodzi do krawędzi ekranu.
	   Padding: góra 8 na krzyżyki karty (inset -8px), dół 32 bo --shadow-mega sięga
	   8+24px w dół (overflow:hidden ścinał cień), boki = gutter z powrotem, żeby
	   pierwsza karta stała w linii z nagłówkiem sekcji. */
	.agf-repgrid__viewport.is-embla {
		overflow: hidden;
		margin-inline: calc(var(--container-pad) * -1);
		padding: var(--space-8) var(--container-pad) var(--space-32);
		cursor: grab;
	}

	.agf-repgrid__viewport.is-embla.is-dragging {
		cursor: grabbing;
		user-select: none;
	}

	/* Odstęp przez margin-right slajdu, NIE gap — przy loop Embla przenosi ostatni slajd
	   na początek transformem, a gap kontenera nie liczy się na szwie: Serwatko dotykał
	   Grodzickiego. Kanon z branż i galerii produktu (gap: 0 + margin-right).
	   32, nie 24 — krzyżyki wystają 8px poza kartę z każdej strony. */
	.agf-repgrid__viewport.is-embla .agf-rowlist {
		display: flex;
		gap: 0;
	}

	.agf-repgrid__viewport.is-embla .agf-rowlist > li {
		flex: 0 0 78%;   /* jedna karta na widoku + peek na kolejną */
		min-width: 0;
		display: flex;
		margin-right: var(--space-32);
	}

	/* Wiersz staje się kartą (u-card--elevated dokłada JS przy starcie karuzeli) —
	   zerujemy to, co wiersz wnosił: hairline u góry i układ poziomy. */
	.agf-repgrid__viewport.is-embla .agf-row {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: var(--space-16);
		width: 100%;
		min-height: 0;   /* zdejmuje 260px z u-card--elevated — wysokość ma wyznaczać najwyższa karta, stretch wyrówna resztę */
		border-top: 0;
		cursor: inherit;
	}

	/* Karta w pełni widoczna = aktywna: niebieska ramka (kanon aktywnego stanu, ten sam
	   co .agf-tabs). Karty obsługujące to samo województwo dostają to samo jasne tło —
	   widać wtedy, że region ma drugą osobę. */
	.agf-repgrid__viewport.is-embla .agf-row.is-active::after {
		opacity: 1;
	}

	.agf-row__role {
		font-size: var(--text-label);
	}
}

@media (prefers-reduced-motion: reduce) {
	.agf-repgrid__mapmedia path[data-region] {
		transition: none;
	}
}