/*
  Bloque "Listado de projectes (grid)" (spora/projectes-grid) — estilos front + editor.

  Estructura:
    .spora-pgrid (contenedor)
      · .spora-insl__bar     -> filtros por área estratégica + cercador. Desde
        2026-10-06 es la MISMA barra que la de la página d'insights (marcaje y
        clases): sus estilos viven en blocks/_shared/filter-bar.css, no aquí.
        view.js filtra las tarjetas.
      · .spora-pgrid__items  -> rejilla de tarjetas (nº de columnas en
        --spora-pgrid-cols, lo fija render.php).

  Tarjeta (.spora-pgrid__card, es un <a> -> toda ella lleva a la fitxa):
    · imagen de fondo (imatge destacada del post), aspect-ratio 3/2.
    · blur + ombra degradados a la izquierda (mismo tratamiento que el formato
      "Per servei" de projectes-destacats, valores por defecto).
    · texto superpuesto en dos grupos (arriba: cliente + resum; abajo: títol +
      servei relacionat), con text-shadow para legibilidad.
    · al hacer hover/focus, capa opaca con el logo centrado (mismo patrón que
      spora/projectes-destacats: .spora-pd__overlay); cubre también el texto.

  Tipografía (según diseño), toda blanca sobre la imagen:
    · cliente          -> Geist Light 16 / 1.1em / 0   (mayúsculas)
    · resum            -> Geist Light 16 / 1.2em / 0   (prefijo "/ ")
    · títol del post   -> Geist Light 32 / 1.1em / -0.3px
    · servei relacionat -> Geist Light 16 / 1.2em / 0  (si n'hi ha més d'un, per comes)

  Colores y fuentes desde los tokens Spora.
*/

.spora-pgrid {
	--pgrid-gap-x: 24px;
	--pgrid-gap-y: 24px;
	--pgrid-ratio: 3 / 2; /* más alto en tablet/mobile (abajo): el texto necesita más alto que ancho. */
	--pgrid-geist: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	display: block;
}

/* --- Rejilla de tarjetas -------------------------------------------------- */
.spora-pgrid__items {
	display: grid;
	grid-template-columns: repeat(var(--spora-pgrid-cols, 2), 1fr);
	column-gap: var(--pgrid-gap-x);
	row-gap: var(--pgrid-gap-y);
}

/* Tarjeta oculta por el filtro (lo togglea view.js). */
.spora-pgrid__card.is-hidden {
	display: none;
}

/* Estado vacío (sin resultados): separado de la rejilla, que queda sin altura. */
.spora-pgrid .spora-insl__empty {
	padding-top: 8px;
}

/* --- Tarjeta -------------------------------------------------------------- */
.spora-pgrid__card {
	position: relative;
	display: block;
	aspect-ratio: var(--pgrid-ratio);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: var(--wp--preset--color--spora-white, #ffffff);
	background-color: var(--wp--preset--color--spora-dark-green, #001a17);
}

/* El clicado conserva el foco (sobre todo al volver atrás desde la fitxa) y el
   `a:focus, a:hover { color }` de Astra (0,1,1) pisaría el color de arriba
   (0,1,0): los textos heredaban el verde oscuro de Astra. 2026-10-07. */
.spora-pgrid__card:hover,
.spora-pgrid__card:focus {
	color: var(--wp--preset--color--spora-white, #ffffff);
}

.spora-pgrid__media {
	position: absolute;
	inset: 0;
	/* Contexto de apilado propio: blur/shade se ordenan DENTRO de la imagen y el
	   texto (z-index mayor a nivel de tarjeta) siempre queda por encima. */
	z-index: 0;
}

.spora-pgrid__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Tratamiento de imagen: el mismo que el formato "Per servei" de
   spora/projectes-destacats (.spora-pd__scard-blur / -shade) con sus valores
   por defecto (ombra 40 % hasta el 100 %; blur 4px hasta el 55 %). Son
   configurables en el panel «Tractament d'imatge»: render.php sobrescribe estas
   variables en el wrapper. */
.spora-pgrid {
	--pgrid-shade-opacity: 0.4;
	--pgrid-shade-fade: 100%;
	--pgrid-blur: 4px;
	--pgrid-blur-fade: 55%;
}

/* Blur en gradiente (borroso a la izquierda, nítido a la derecha): backdrop-filter
   enmascarado, solo desenfoca donde la máscara es opaca. */
.spora-pgrid__blur {
	position: absolute;
	inset: 0;
	z-index: 1;
	-webkit-backdrop-filter: blur(var(--pgrid-blur));
	backdrop-filter: blur(var(--pgrid-blur));
	-webkit-mask-image: linear-gradient(to right, #000 0%, transparent var(--pgrid-blur-fade));
	mask-image: linear-gradient(to right, #000 0%, transparent var(--pgrid-blur-fade));
	pointer-events: none;
}

/* Capa de negro (oscuro a la izquierda -> transparente a la derecha). */
.spora-pgrid__shade {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, var(--pgrid-shade-opacity)) 0%,
		rgba(0, 0, 0, 0) var(--pgrid-shade-fade)
	);
	pointer-events: none;
}

/* Texto superpuesto: dos grupos (arriba / abajo). Sin degradado propio (desde
   que se aplica el tratamiento de projectes-destacats): la única capa oscura es
   .spora-pgrid__shade y la legibilidad la da un text-shadow sutil, igual que en
   .spora-pd__scard-text. */
.spora-pgrid__text {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(16px, 4vw, 24px);
	padding: clamp(16px, 4vw, 24px);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.spora-pgrid__text-top,
.spora-pgrid__text-bottom {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Cliente: Geist Light 16 / 1.1em / 0, mayúsculas. */
.spora-pgrid__client {
	font-family: var(--pgrid-geist);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.1em;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* Resum: Geist Light 16 / 1.2em / 0, con prefijo "/ ". */
.spora-pgrid__resum {
	font-family: var(--pgrid-geist);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2em;
	letter-spacing: 0;
}

.spora-pgrid__resum::before {
	content: "/ ";
}

/* Títol del post: Geist Light 32 / 1.1em / -0.3px. Sin padding-right por
   defecto: el títol usa todo el ancho disponible. El wrap "a mitad de ancho"
   del diseño de escritorio es un efecto solo para tarjetas anchas (ver
   min-width: 922px más abajo); forzarlo en tarjetas más estrechas (tablet,
   mobile) deja un hueco vacío a la derecha del texto y se ve mal. */
.spora-pgrid__title {
	margin: 0;
	font-family: var(--pgrid-geist);
	font-weight: 300;
	font-size: clamp(22px, 4vw, 32px);
	line-height: 1.1em;
	letter-spacing: -0.3px;
	color: inherit;
}

@media (min-width: 922px) {
	.spora-pgrid__title {
		padding-right: min(220px, 35%);
	}
}

/* Servei relacionat: Geist Light 16 / 1.2em / 0. */
.spora-pgrid__servei {
	font-family: var(--pgrid-geist);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2em;
	letter-spacing: 0;
}

/* --- Hover: capa opaca con el logo (mismo patrón que projectes-destacats) - */
.spora-pgrid__logo-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15%;
	background-color: var(--wp--preset--color--spora-dark-green, #001a17);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.spora-pgrid__card:hover .spora-pgrid__logo-overlay,
.spora-pgrid__card:focus-visible .spora-pgrid__logo-overlay {
	opacity: 1;
}

.spora-pgrid__logo {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* --- Responsive ----------------------------------------------------------- */
/* La tarjeta lleva 4 bloques de texto (cliente, resum, títol, servei); con el
   --pgrid-ratio de escritorio (3/2, más ancho que alto) no queda alto
   suficiente en tarjetas estrechas y el texto se salía del overflow:hidden
   (se veía "cortado"). Aquí se sube el alto relativo y se ajustan gaps y
   márgenes para que quepa todo con comodidad. */
@media (max-width: 921px) {
	.spora-pgrid {
		--pgrid-gap-x: 20px;
		--pgrid-gap-y: 24px;
		--pgrid-ratio: 4 / 3;
	}

	.spora-pgrid__items {
		grid-template-columns: repeat(2, 1fr);
	}

	.spora-pgrid__title {
		font-size: 22px;
	}
}

@media (max-width: 680px) {
	.spora-pgrid {
		/* Con 2 columnas la tarjeta ya es demasiado estrecha para 4 bloques de
		   texto; se pasa a 1 columna antes del breakpoint general de mobile. */
		--pgrid-ratio: 4 / 5;
	}

	.spora-pgrid__items {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 544px) {
	.spora-pgrid {
		--pgrid-gap-y: 20px;
	}

	.spora-pgrid__text {
		gap: 12px;
	}
}

/* --- Vista en el editor -------------------------------------------------- */
.spora-projectes-grid-editor {
	min-height: 40px;
}

/* Selectores del formato "por servicio" en el panel lateral (servicios,
   proyectos y orden). Mismo aspecto que el selector de projectes-destacats. */
.spora-pd-group {
	margin-top: 6px;
}

.spora-pd-group__empty,
.spora-pd-group__help {
	margin: 0 0 6px;
	font-size: 12px;
	opacity: 0.7;
}

.spora-pd-order {
	margin: 0;
	padding: 0;
	list-style: none;
}

.spora-pd-order__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.spora-pd-order__pos {
	flex: 0 0 auto;
	min-width: 18px;
	font-size: 11px;
	font-weight: 600;
	opacity: 0.6;
}

.spora-pd-order__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spora-pd-order__actions {
	flex: 0 0 auto;
	display: flex;
	gap: 2px;
}