/* =========================================================================
   BARRA DE FILTRES + CERCADOR — full d'estils COMPARTIT  ·  .spora-insl__bar
   -------------------------------------------------------------------------
   Filtres separats per «/» a l'esquerra (subratllat animat del tema; l'actiu
   en Medium i amb el subratllat fix) i cercador a la dreta (es veu «fluix» fins
   que s'enfoca o té text), més l'estat buit.

   PER QUÈ VIU AQUÍ I NO A style.css. Abans (fins 2026-10-06) només la feia
   servir la pàgina d'entrades (template-parts/insights-llistat.php). Ara la
   comparteixen, amb el MATEIX marcatge i classes:

     · template-parts/insights-llistat.php -> la pàgina d'entrades.
     · blocks/projectes-grid/render.php    -> «Listado de projectes (grid)».
     · blocks/projectes-list/render.php    -> «Listado de projectes (tabla)».

   L'editor de blocs no carrega el style.css del tema; des d'aquí (blocks.php
   l'encola a `enqueue_block_assets`) es veu igual al front i a l'editor. El
   subratllat animat (.spora-text-link) sí que és a style.css: a l'editor no
   s'anima, però la barra es veu bé.

   Les variables de tinta (--spora-insl-ink / -ink-soft) les declara
   insight-card.css per a .spora-insl; als blocs de projectes es declaren aquí.
   ========================================================================= */

.spora-pgrid,
.spora-plist {
	--spora-insl-ink: var(--wp--preset--color--spora-dark-green, #001A17);
	--spora-insl-ink-soft: #001A1730;
}

/* --- Columna de contingut ------------------------------------------------
   La secció (el fons) va a sang, però tot el que hi ha dins es queda encaixat
   a --spora-insl-max-w i centrat. El padding lateral de la secció fa de marge
   de seguretat quan la finestra és més estreta que aquest ample.
   Es fa servir `margin-inline` i no `margin` per no trepitjar els marges
   verticals que ja porta cada element (p. ej. el margin-bottom de la barra). */
.spora-insl__bar,
.spora-insl__empty {
	max-width: var(--spora-insl-max-w);
	margin-inline: auto;
}

/* --- Barra: filtres a l'esquerra, cercador a la dreta -------------------- */
.spora-insl__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 100px;
}

/* Màxim mitja pantalla (2026-10-07): amb moltes àrees estratègiques la llista
   s'estirava fins tocar el cercador i quedava una línia llarguíssima amb una
   segona de restes. Limitada al 50%, salta de línia abans i el buit fins al
   cercador queda net. Es treu al responsive (barra en columna). */
.spora-insl__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	max-width: 50%;
}

/* Botó de filtre amb aspecte de text pla (el subratllat el posa
   .spora-text-link, que ja hi és al marcatge). */
.spora-insl__filter {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: "Geist", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--spora-insl-ink);
	cursor: pointer;
}

/* Seleccionat: en NEGRETA. El pes canvia de 400 a 700 sense moure res de lloc,
   perquè l'ample de la negreta ja està reservat pel ::before d'aquí sota. */
.spora-insl__filter.is-active {
	font-weight: 500;
}

/* Reserva d'ample: una còpia INVISIBLE de l'etiqueta (data-label, que pinta el
   template-part) sempre en negreta. Fixa l'ample del botó al de l'estat més
   ample —el seleccionat—, de manera que en canviar de filtre el text engreixa
   «dins» del seu espai i no empeny la resta de la barra.

   height: 0 + overflow: hidden -> no ocupa alçada; visibility: hidden ->
   tampoc el llegeixen els lectors de pantalla (el text de debò ja hi és, com a
   contingut del botó). */
.spora-insl__filter::before {
	content: attr(data-label);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	/* 500 = el pes REAL de l'actiu (.is-active). Abans era 700 i, en etiquetes
	   llargues, reservava molt més ample del necessari: quedaven forats grans
	   abans de cada «/» (2026-10-06). */
	font-weight: 500;
	pointer-events: none;
	user-select: none;
}

/* Astra dona fons i vores pròpies als <button>: es neutralitzen també en
   hover/focus perquè el filtre segueixi llegint-se com a text. */
.spora-insl__filter:hover,
.spora-insl__filter:focus,
.spora-insl__filter:active {
	background: none;
	border: 0;
	color: var(--spora-insl-ink);
}

/* El subratllat viu al <span> de dins (.spora-insl__filter-label), no al botó,
   perquè s'ajusti a l'ample real del text i no al reservat per a la negreta.
   Com que el botó no té padding, el ratolí entra abans al botó que al span: la
   segona regla fa que el subratllat també respongui a l'hover del botó, per no
   deixar una franja morta a la dreta. */
.spora-insl__filter-label {
	display: inline-block;
}

html.spora-underline-anim .spora-insl__filter:hover .spora-insl__filter-label::after {
	transform: scaleX(1);
	transform-origin: left center;
	animation: none;
}

/* El filtre actiu manté el subratllat dibuixat. Va amb !important perquè la
   regla del tema que l'amaga (html.spora-underline-anim
   .spora-text-link--hover.is-underlined::after) té la mateixa especificitat i
   guanyaria per ordre de font. */
.spora-insl__filter.is-active .spora-insl__filter-label::after {
	transform: scaleX(1) !important;
	transform-origin: left center !important;
	animation: none !important;
}

/* Separador «/» entre filtres: no és clicable ni s'hi subratlla res. */
.spora-insl__sep {
	font-family: "Geist", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: var(--spora-insl-ink);
	user-select: none;
}

/* --- Cercador ------------------------------------------------------------ */
.spora-insl__search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 1 430px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--spora-insl-ink-soft);
	color: var(--spora-insl-ink-soft);
	transition: color 0.3s ease, border-color 0.3s ease;
}

/* Enfocat o amb text escrit: passa a tinta plena (camp «seleccionat»). */
.spora-insl__search:focus-within,
.spora-insl__search.is-filled {
	border-bottom-color: var(--spora-insl-ink);
	color: var(--spora-insl-ink);
}

:is(.spora-insl, .spora-pgrid, .spora-plist) .spora-insl__search input.spora-insl__input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	/* Astra dona als camps padding (0.75em), alçada, vora, fons i cantonades
	   propis: aquí es treuen tots perquè el cercador sigui una simple línia de
	   text. Cal l'etiqueta al selector per guanyar-li en especificitat. */
	padding: 0;
	height: auto;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: none transparent;
	box-shadow: none;
	appearance: none;
	font-family: "Geist", sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0;
	color: currentColor;
}

:is(.spora-insl, .spora-pgrid, .spora-plist) .spora-insl__search input.spora-insl__input:focus {
	outline: none;
	border: 0;
	box-shadow: none;
	background: none;
}

:is(.spora-insl, .spora-pgrid, .spora-plist) .spora-insl__search input.spora-insl__input::placeholder {
	color: currentColor;
	opacity: 1;
}

/* Creueta nativa de type="search": la treiem, el camp es buida escrivint. */
:is(.spora-insl, .spora-pgrid, .spora-plist) .spora-insl__search input.spora-insl__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.spora-insl__search-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: currentColor;
}

/* --- Estat buit (cap resultat) ------------------------------------------- */
.spora-insl__empty {
	margin: 0;
	font-family: "Geist", sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--spora-insl-ink);
}

/* --- Variant dels blocs de projectes (projectes-grid / projectes-list) -----
   Segons el disseny (2026-10-06): les àrees estratègiques tenen noms molt
   llargs i, a 16px i amb el cercador de 430px, els filtres s'apilaven en tres
   o quatre línies estretes. Aquí:
     · els filtres ocupen l'ample que deixa el cercador (flex: 1), però mai
       més de mitja barra (max-width: 50%, a la regla base);
     · el cercador queda fix a un terç de l'ample (màx. 430px);
     · text a 12px i «/» més junt, com al disseny. */
:is(.spora-pgrid, .spora-plist) .spora-insl__filters {
	flex: 1 1 0;
	min-width: 0;
	gap: 4px;
	row-gap: 0px;
}

:is(.spora-pgrid, .spora-plist) .spora-insl__filter,
:is(.spora-pgrid, .spora-plist) .spora-insl__sep {
	font-size: 12px;
	line-height: 16px;
}

:is(.spora-pgrid, .spora-plist) .spora-insl__search {
	flex: 0 0 min(430px, 32%);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 921px) {
	.spora-insl__bar {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.spora-insl__search,
	:is(.spora-pgrid, .spora-plist) .spora-insl__search {
		flex-basis: auto;
	}

	.spora-insl__filters {
		max-width: none;
	}
}