/* Mapa de distribuïdors (Figma 1:4396): barra de cerca beix, mapa + llista a la dreta; a tauleta i mòbil, apilats. Tokens de novara-core */
.distribuidors {
	--dist-alcada: clamp(420px, 62vh, 862px);
	--dist-llista: clamp(280px, 22vw, 380px);
	display: grid;
	gap: var(--sp-5);
	inline-size: min(100% - 2 * var(--novara-marge), var(--w-pagina));
	margin-inline: auto;
	color: var(--c-negre);
	font-family: var(--ff-text);
	& [hidden] { display: none !important; }
	& .text-ocult { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Les fitxes amb display propi també s'amaguen */
}

/* Barra de cerca: un sol camp blanc (lupa, text, ubicació | radi) + Buscar, sobre la franja beix del Figma */
.distribuidors-cerca {
	display: flex;
	gap: var(--sp-3);
	padding: var(--sp-4);
	margin-inline-end: calc(var(--dist-llista) + var(--sp-7));
	background: var(--c-beig);
	& svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
	& svg .ple { fill: currentColor; stroke: none; }
}
.distribuidors-barra {
	display: flex;
	flex: 1;
	min-inline-size: 0;
	border: 1px solid var(--c-negre);
	background: var(--c-blanc);
	transition: box-shadow var(--novara-transicio);
	&:focus-within { outline: 2px solid var(--c-verd); outline-offset: 2px; }
	& :is(input, select) {
		block-size: 46px;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: inherit;
		font: inherit;
		outline: none;
		box-shadow: none;
		&:focus { background: transparent; outline: none; box-shadow: none; } /* El focus el marca tota la barra (focus-within) */
	}
}
.distribuidors-camp {
	display: flex;
	align-items: center;
	& label { font-size: var(--fs-legal); letter-spacing: 0.04em; text-transform: uppercase; }
}
.distribuidors-camp-lloc {
	flex: 1;
	min-inline-size: 0;
	& > label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
}
.distribuidors-combo {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	min-inline-size: 0;
	& input { flex: 1; min-inline-size: 0; padding: 0 var(--sp-2); }
	& input::-webkit-search-cancel-button { cursor: pointer; }
}
.distribuidors-lupa { flex: none; margin-inline-start: var(--sp-4); opacity: 0.6; }
.distribuidors-camp-radi {
	gap: var(--sp-2);
	padding-inline: var(--sp-4) var(--sp-2);
	border-inline-start: 1px solid rgb(36 36 36 / 0.2);
	& :is(label, select) { cursor: pointer; }
	& select { padding-inline-end: var(--sp-2); }
}
.distribuidors-suggeriments {
	position: absolute;
	inset: calc(100% + 1px) -1px auto;
	z-index: 5;
	max-block-size: 340px;
	margin: 0;
	padding: var(--sp-1) 0;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--c-negre);
	background: var(--c-blanc);
	box-shadow: 0 12px 24px rgb(36 36 36 / 0.12);
}
.distribuidors-sug {
	display: flex;
	flex-direction: column;
	padding: var(--sp-2) var(--sp-4);
	cursor: pointer;
	& small { font-size: 0.8125rem; opacity: 0.7; }
	&:is(:hover, [aria-selected="true"]) { background: var(--c-beig); }
}
.distribuidors-sug-nom small::before { content: "● "; color: var(--c-verd); }
.distribuidors-ubicacio {
	display: inline-grid;
	flex: none;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-verd-fosc);
	cursor: pointer;
	transition: color var(--novara-transicio);
	&:hover { color: var(--c-negre); }
	&:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
	&[aria-busy="true"] svg { animation: dist-gira 1s linear infinite; }
}
@keyframes dist-gira { to { transform: rotate(1turn); } }

/* Mapa + llista */
.distribuidors-cos {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--dist-llista);
	gap: var(--sp-7);
}
.distribuidors-mapa {
	block-size: var(--dist-alcada);
	& .gm-style canvas, & .gm-style img[src*="googleapis"] { filter: grayscale(0.9) sepia(0.3) brightness(1.04) contrast(0.92); } /* Tons beix del Figma només al fons (els marcadors són DOM a part); sense Map ID de Google Cloud */
	background: #ece6d6;
	scroll-margin-top: calc(var(--top-fix) + var(--sp-4));
}
.distribuidors-resultats {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	max-block-size: var(--dist-alcada);
	min-block-size: 0;
}
.distribuidors-estat { margin: 0; font-size: 0.875rem; opacity: 0.75; }
.distribuidors-llista {
	position: relative; /* offsetTop de les fitxes relatiu a la llista (hover del mapa) */
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
	padding: 0 var(--sp-2) 0 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	scrollbar-width: thin;
}

/* Fitxa (llista i finestra del mapa) */
.distribuidor {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
	border-inline-start: 3px solid transparent;
	font-size: var(--fs-text);
	line-height: 1.25;
	transition: border-color var(--novara-transicio), background-color var(--novara-transicio);
	&.is-hover { background: var(--c-beig); }
	&.is-actiu { border-color: var(--c-verd); background: var(--c-beig); }
	& address { font-style: normal; }
	& a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
}
.distribuidor-nom {
	margin: 0;
	font-family: var(--ff-text);
	font-size: var(--fs-h5);
	font-weight: 400;
	line-height: 25px;
	text-transform: uppercase;
}
.distribuidor-mostra {
	all: unset;
	cursor: pointer;
	&:hover { text-decoration: underline; }
	&:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
}
.distribuidor-foto { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.distribuidor-text { margin: 0; }
.distribuidor-distancia { margin: 0; color: var(--c-verd-fosc); }
.distribuidor-accions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin: var(--sp-1) 0 0;
	padding: 0;
	list-style: none;
}
.distribuidor-arribar { font-weight: 500; }

/* Finestra del mapa */
.distribuidor-info {
	padding: 0;
	border: 0;
	font-size: 0.9375rem;
	& .distribuidor-nom { padding-inline-end: var(--sp-5); font-size: 1rem; }
	& .distribuidor-distancia { display: none; }
}
.distribuidors-pin {
	display: block;
	transform-origin: 50% 100%;
	transition: transform var(--novara-transicio);
	& svg { display: block; filter: drop-shadow(0 2px 2px rgb(36 36 36 / 0.25)); }
	& .pin-gota { fill: var(--c-verd-fosc); }
	& .pin-n { fill: none; stroke: var(--c-blanc); stroke-width: 2; stroke-linecap: round; }
	&.is-hover { transform: scale(1.15); }
	&.is-hover .pin-gota, &.is-actiu .pin-gota { fill: var(--c-negre); }
	&.is-actiu { transform: scale(1.25); }
}

@media (max-width: 1024px) {
	.distribuidors { --dist-alcada: clamp(360px, 60vh, 560px); }
	.distribuidors-cerca { margin-inline-end: 0; }
	.distribuidors-cos { grid-template-columns: minmax(0, 1fr); }
	.distribuidors-resultats { max-block-size: none; }
	.distribuidors-llista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-content: start; max-block-size: 70svh; } /* Alçada màxima amb scroll intern (no els 54 seguits) */
}
@media (max-width: 767px) {
	/* Cercador fix sota la capçalera, en una línia */
	.distribuidors-cerca { position: sticky; inset-block-start: var(--top-fix); z-index: 5; padding: var(--sp-2); margin-inline: calc(-1 * var(--novara-marge)); }
	.distribuidors-camp-radi { flex: none; padding-inline: var(--sp-1) 0; & select { padding-inline: 0; } }
	.distribuidors-llista { display: flex; } /* Una columna */
	.distribuidors-camp-radi label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } /* Amagada a la vista, no al lector de pantalla */
}
@media (prefers-reduced-motion: reduce) {
	.distribuidors-pin, .distribuidor { transition: none; }
	.distribuidors-ubicacio[aria-busy="true"] svg { animation: none; }
}