/*
  Bloque "Projectes destacats" (spora/projectes-destacats) — estilos front + editor.

  Rejilla de 3 columnas escalonada (la central baja para el efecto de ladrillo),
  sobre fondo blanco y SIN fondo en las tarjetas. Cada tarjeta: imagen cuadrada +
  título + resum. Al pasar el ratón la imagen se cubre de negro con el logo y un
  punto amarillo, y aparece el enlace al àrea. Colores/fuentes desde los tokens
  Spora (el sans-serif del proyecto es Geist).
*/

.spora-pd {
	--spora-pd-gap-x: 32px;
	--spora-pd-gap-y: 110px;
	/* Desfase vertical de la columna central (efecto escalonado). */
	--spora-pd-offset: 140px;

	/* Slider responsive: ancho de cada tarjeta y separación. El valor base es el
	   de TABLET (50%, se ve media tarjeta a los lados); en móvil pasa a 100% (una
	   tarjeta por pantalla) en el @media de abajo. El resto (barra de progreso,
	   snap, etc.) es genérico y vive en el style.css global. */
	--spora-slider-slide: 50%;
	--spora-slider-gap: 16px;
}

/* Páginas en modo fosc: la barra de progreso del slider (negra por defecto) no
   se veía sobre el verd fosc; pasa a blanca y el carril a blanco translúcido.
   Si en el editor se elige un color de barra, va inline en el wrapper y gana. */
body.spora-dark-mode .spora-pd {
	--spora-slider-bar-bg: var(--wp--preset--color--spora-white, #ffffff);
	--spora-slider-track-bg: rgba(255, 255, 255, 0.2);
}

.spora-pd__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--spora-pd-gap-x);
	align-items: start;
}

/* En graella el wrapper es el ancla del título flotante (posición absoluta). */
.spora-pd--grid {
	position: relative;
}

/* Contenedor del título: flota centrado sobre la columna central, en el hueco
   que deja su desfase, para que las columnas laterales suban arriba y queden a
   los lados. Es su PROPIO contenedor de reveal (fade up), separado de los posts. */
.spora-pd__heading-wrap {
	position: absolute;
	top: 0;
	left: 33.333%;
	width: 33.333%;
	z-index: 2;
	padding: 0 12px;
	text-align: center;
}

/* Subtítol (arriba): Geist Light 16px, en mayúsculas. */
.spora-pd__subheading {
	margin: 0 0 16px !important;
	text-align: center;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--wp--preset--color--spora-black, #000000);
}

/* Títol (abajo): STK Bureau Serif Light 24px. */
.spora-pd__heading {
	margin: 0;
	text-align: center;
	font-family: var(--spora-font-family-display) !important;
	font-weight: 300;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--wp--preset--color--spora-black, #000000);
}

.spora-pd__col {
	display: flex;
	flex-direction: column;
	gap: var(--spora-pd-gap-y);
	min-width: 0;
}

/* La columna central arranca más abajo para el escalonado. */
.spora-pd__col--2 {
	margin-top: var(--spora-pd-offset);
}

/* --- Tarjeta ------------------------------------------------------------- */
.spora-pd__card {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Enlace estirado: cubre toda la tarjeta y lleva a la ficha. El enlace del
   àrea se sitúa por encima (z-index mayor) como excepción clicable. */
.spora-pd__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.spora-pd__media {
	position: relative;
	border-radius: 8px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--wp--preset--color--spora-black, #000000);
}

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

/* Capa negra con logo + punto, oculta hasta el hover. */
.spora-pd__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18%;
	border-radius: 8px;
	background-color: var(--wp--preset--color--spora-black, #000000);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.spora-pd__card:hover .spora-pd__overlay,
.spora-pd__card:focus-within .spora-pd__overlay {
	opacity: 1;
}

.spora-pd__logo {
	max-width: 125%;
	max-height: 125%;
	object-fit: contain;
}

/* Enlace ceñido a la imagen (intercalat): el clic va solo aquí, no en el texto. */
.spora-pd__media-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* --- Texto bajo la imagen ------------------------------------------------ */
.spora-pd__body {
	padding-top: 14px;
	font-family: "Geist", sans-serif;
}

.spora-pd__title {
	margin: 0;
	font-family: "Geist", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--spora-color-primary-dark-green, #000000);
}

.spora-pd__resum {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.20;
	letter-spacing: 0;
	color: var(--spora-color-primary-dark-green, #000000);
}

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

/* Enlace del àrea: aparece con el hover y queda por encima del enlace estirado. */
/* El subrayado lo dibuja la barra animada de .spora-text-link (::after), no
   text-decoration; ver el bloque de abajo para cuándo se dibuja. */
.spora-pd__area {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin-top: 10px;
	font-family: var(--spora-font-family-display);
	font-size: 16px;
	color: #001a1740 !important;
	opacity: 0;
	line-height: 1.2;
	letter-spacing: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.spora-pd__card:hover .spora-pd__area,
.spora-pd__card:focus-within .spora-pd__area {
	opacity: 1;
	pointer-events: auto;
}


/*
  Subrayado animado del enlace de área (.spora-text-link).
  --------------------------------------------------------------------------
  En ESCRITORIO el enlace está oculto (opacity:0) hasta el hover de la tarjeta,
  así que el trazo NO debe dibujarse al entrar en el viewport (lo haría estando
  invisible): lo forzamos oculto por defecto —ganando en especificidad a la
  clase .is-underlined que pone el IntersectionObserver— y lo dibujamos en el
  momento en que el enlace aparece, al hacer hover/focus en la tarjeta.

  En tablet/móvil (<=921px) el enlace está siempre visible, así que NO se aplica
  este override y funciona el mecanismo global: se dibuja al entrar en pantalla.
*/
@media (min-width: 922px) {
	html.spora-underline-anim .spora-pd__card .spora-pd__area.spora-text-link::after {
		transform: scaleX(0);
	}

	html.spora-underline-anim .spora-pd__card:hover .spora-pd__area.spora-text-link::after,
	html.spora-underline-anim .spora-pd__card:focus-within .spora-pd__area.spora-text-link::after {
		transform: scaleX(1);
	}
}

/* --- Formato intercalado ------------------------------------------------- */
.spora-pd--intercalat {
	/* Proporción de la imagen (apaisada) en este formato. */
	--spora-pd-int-ratio: 3 / 2;
}

.spora-pd__rows {
	display: flex;
	flex-direction: column;
	gap: 125px;
}

.spora-pd__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: stretch;
}

/* Alternancia: por defecto imagen a la izquierda; las filas pares la ponen a
   la derecha. El texto se alinea siempre hacia la imagen. */
.spora-pd__row .spora-pd__media {
	grid-column: 1;
}

.spora-pd__row .spora-pd__int-text {
	grid-column: 2;
	text-align: left;
}

.spora-pd__row:nth-child(even) .spora-pd__media {
	grid-column: 2;
}

.spora-pd__row:nth-child(even) .spora-pd__int-text {
	grid-column: 1;
	grid-row: 1;
	text-align: right;
}

.spora-pd--intercalat .spora-pd__media {
	aspect-ratio: var(--spora-pd-int-ratio, 3 / 2);
}

/* En intercalado y en fila el hover cuenta SOLO sobre la imagen, no sobre toda
   la tarjeta: se anula el disparo por tarjeta y se activa por la propia imagen. */
.spora-pd--intercalat .spora-pd__card:hover .spora-pd__overlay,
.spora-pd--fila .spora-pd__card:hover .spora-pd__overlay {
	opacity: 0;
}

.spora-pd--intercalat .spora-pd__media:hover .spora-pd__overlay,
.spora-pd--fila .spora-pd__media:hover .spora-pd__overlay {
	opacity: 1;
}

/* --- Formato en fila ----------------------------------------------------- */
/* Las columnas se eligen en el editor (Columnes, 4 por defecto) y llegan desde
   render.php (--spora-pd-fila-cols / -md): con 3 las tarjetas ocupan el ancho
   de 3. minmax(0, 1fr) evita que un título largo ensanche su
   columna y descuadre la fila. */
.spora-pd__fila {
	display: grid;
	grid-template-columns: repeat(var(--spora-pd-fila-cols, 4), minmax(0, 1fr));
	column-gap: clamp(16px, 2.1vw, 30px);
	row-gap: 48px;
}

/* Color de texto elegible desde el editor (vacío = el del diseño). */
.spora-pd--fila .spora-pd__title,
.spora-pd--fila .spora-pd__resum {
	color: var(--spora-pd-text-color, var(--spora-color-primary-dark-green, #000000));
	overflow-wrap: anywhere;
}

/* Escritorio estrecho: 5 o 6 columnas quedan escanyades y bajan a 3. */
@media (max-width: 1100px) and (min-width: 922px) {
	.spora-pd__fila {
		grid-template-columns: repeat(var(--spora-pd-fila-cols-md, 4), minmax(0, 1fr));
	}
}

/* Texto: títol grande arriba, meta (títol post + resum) abajo. */
.spora-pd__int-text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-width: 0;
}

.spora-pd__int-titol {
	margin: 0;
	font-family: "Geist", sans-serif;
	font-weight: 300;
	font-size: 60px;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--spora-black, #000000);
}

.spora-pd__int-meta {
	display: flex;
	flex-direction: column;
}

/* En intercalado la meta va bajo la imagen (no sobre ella), así que el resum
   recupera algo más de contraste. */
.spora-pd__int-meta .spora-pd__resum {
	margin-top: 6px;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 921px) {
	/* Graella sin slider (2026-10-13): se quitó el scroll lateral y las tarjetas
	   se listan una debajo de otra. Las columnas del escalonado se disuelven
	   (display: contents) y cada tarjeta recupera el orden de lectura con su
	   índice natural (--reveal-i, el mismo del reveal), ya que el round-robin de
	   render.php las deja desordenadas en el DOM. */
	.spora-pd__grid {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	.spora-pd__grid > .spora-pd__col {
		display: contents;
	}

	.spora-pd__grid .spora-pd__card {
		order: var(--reveal-i, 0);
	}

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

	/* Un solo elemento: sin slider (ver render.php); la tarjeta mantiene el
	   ancho de una diapositiva en vez de ocupar toda la pantalla. */
	.spora-pd__fila.is-single {
		grid-template-columns: minmax(0, 50%);
	}

	/* Slider (lo monta Spora.responsiveSlider): el contenedor deja de ser
	   rejilla y pasa a bloque para que la pista y la barra de progreso fluyan. */
	.spora-pd__fila.is-slider {
		display: block;
	}

	/* Intercalado como slider: el contenedor deja de ser columna flex (se anula
	   el gap de 125px). Cada fila se apila (imagen sobre texto), sin alternar ni
	   alinear a la derecha, en todo el rango tablet/móvil (no solo <=544px). */
	.spora-pd__rows.is-slider {
		display: block;
	}

	.spora-pd__rows.is-slider .spora-pd__row,
	.spora-pd__rows.is-slider .spora-pd__row:nth-child(even) {
		grid-template-columns: 1fr;
	}

	.spora-pd__rows.is-slider .spora-pd__row .spora-pd__media,
	.spora-pd__rows.is-slider .spora-pd__row:nth-child(even) .spora-pd__media {
		grid-column: 1;
		grid-row: 1;
	}

	.spora-pd__rows.is-slider .spora-pd__row .spora-pd__int-text,
	.spora-pd__rows.is-slider .spora-pd__row:nth-child(even) .spora-pd__int-text {
		grid-column: 1;
		grid-row: 2;
		text-align: left;
	}

	/* La pista genérica iguala la altura de las diapositivas (align-items:
	   stretch). En el intercalat eso estira la fila (grid) y con ella la imagen,
	   que pierde su proporción 3/2 y se solapa con el texto. Aquí desactivamos ese
	   estirado SOLO para este layout: cada fila toma su altura natural y la imagen
	   conserva su ratio. */
	.spora-pd__rows.is-slider .spora-slider__track {
		align-items: start;
	}

	.spora-pd__rows.is-slider .spora-pd__row {
		align-items: start;
		height: auto;
	}

	.spora-pd__rows.is-slider .spora-pd__media {
		align-self: start;
		height: auto;
	}

	/* El títol de 60px no cabe en una diapositiva estrecha; además se parte para
	   no desbordar en horizontal. */
	.spora-pd__rows.is-slider .spora-pd__int-titol {
		font-size: 34px;
		overflow-wrap: anywhere;
	}

	/* Sin escalonado ni título flotante: el título vuelve al flujo, arriba. */
	.spora-pd__col--2 {
		margin-top: 0;
	}

	.spora-pd__heading-wrap {
		position: static;
		left: auto;
		width: 100%;
		padding: 0;
		margin-bottom: 8px;
		text-align: center;
	}

	/* En móvil/tablet el enlace del àrea siempre visible (no hay hover fiable). */
	.spora-pd__area {
		opacity: 1;
		pointer-events: auto;
	}
}

@media (max-width: 544px) {
	/* Móvil: una tarjeta por pantalla en el slider. */
	.spora-pd {
		--spora-slider-slide: 100%;
	}

	.spora-pd__fila,
	.spora-pd__fila.is-single {
		grid-template-columns: 1fr;
	}

	/* Intercalado: apila imagen sobre texto, sin alternar ni alinear a la
	   derecha. La imagen siempre primero. */
	.spora-pd__row {
		grid-template-columns: 1fr;
	}

	.spora-pd__row .spora-pd__media,
	.spora-pd__row:nth-child(even) .spora-pd__media {
		grid-column: 1;
		grid-row: 1;
	}

	.spora-pd__row .spora-pd__int-text,
	.spora-pd__row:nth-child(even) .spora-pd__int-text {
		grid-column: 1;
		grid-row: 2;
		text-align: left;
	}

	/* El títol de 60px se reduce en móvil para no desbordar. */
	.spora-pd__int-titol {
		font-size: 34px;
	}
}

/* --- Formato "Per servei" ------------------------------------------------ */
/* Tarjetas con imagen de fondo y texto superpuesto (cliente arriba; títol +
   resum abajo), con degradado para legibilidad y logo al hover. Mismo lenguaje
   que projectes-grid, pero sin barra de filtro en el front. */
.spora-pd__servei-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 24px;
	row-gap: 24px;
}

.spora-pd__scard {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	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-pd__scard:hover,
.spora-pd__scard:focus {
	color: var(--wp--preset--color--spora-white, #ffffff);
}

.spora-pd__scard-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-pd__scard-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Blur en gradiente (borroso a la izquierda, nítido a la derecha), antes del
   hover. Se logra con backdrop-filter enmascarado: el desenfoque solo actúa
   donde la máscara es opaca (izquierda) y se desvanece hacia la derecha. */
.spora-pd__scard-blur {
	position: absolute;
	inset: 0;
	z-index: 1;
	-webkit-backdrop-filter: blur(var(--spora-scard-blur, 4px));
	backdrop-filter: blur(var(--spora-scard-blur, 4px));
	-webkit-mask-image: linear-gradient(to right, #000 0%, transparent var(--spora-scard-blur-fade, 55%));
	mask-image: linear-gradient(to right, #000 0%, transparent var(--spora-scard-blur-fade, 55%));
	pointer-events: none;
}

/* Capa de negro (oscuro a la izquierda -> transparente a la derecha), antes del
   hover. Opacidad y punto de desvanecido regulables desde el editor. */
.spora-pd__scard-shade {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, var(--spora-scard-shade-opacity, 0.4)) 0%,
		rgba(0, 0, 0, 0) var(--spora-scard-shade-fade, 100%)
	);
	pointer-events: none;
}

/* Texto: cliente arriba, títol + resum abajo. Sin degradado propio: la única
   capa oscura es la configurable (.spora-pd__scard-shade). La legibilidad la da
   un text-shadow sutil (hereda a todo el texto), así al apagar la ombra no queda
   ninguna opacidad de fondo. */
.spora-pd__scard-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-pd__scard-bottom {
	display: flex;
	flex-direction: column;
	max-width: 405px;
	gap: 8px;
}

/* Cliente (eyebrow): Geist mayúsculas. */
.spora-pd__scard-client {
	font-family: "Geist", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* Títol del post: grande, Geist light. */
.spora-pd__scard-title {
	margin: 0;
	font-family: "Geist", sans-serif;
	font-weight: 300;
	font-size: clamp(22px, 3vw, 32px);
	line-height: 1.1;
	letter-spacing: -0.3px;
	color: inherit;
}

/* Resum: Geist light con prefijo "/ ". */
.spora-pd__scard-resum {
	font-family: "Geist", sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
}

.spora-pd__scard-resum::before {
	content: "/ ";
}

/* Hover: capa opaca con el logo centrado (cubre también el texto). */
.spora-pd__scard-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-pd__scard:hover .spora-pd__scard-overlay,
.spora-pd__scard:focus-visible .spora-pd__scard-overlay {
	opacity: 1;
}

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

@media (max-width: 680px) {
	.spora-pd__servei-grid {
		grid-template-columns: 1fr;
	}

	.spora-pd__scard {
		aspect-ratio: 4 / 3;
	}
}

/* --- Hover sin logo: zoom enrere (check «Mostrar logo» desactivado) -------- */
/* render.php no pinta la capa del logo y añade .spora-pd--hover-zoom. La imagen
   parte ampliada y vuelve a su tamaño al hover, como Targetes amb imatge. El
   disparo sigue al del logo: toda la tarjeta en graella y per servei; solo la
   imagen en intercalat y en fila. */
.spora-pd--hover-zoom .spora-pd__img,
.spora-pd--hover-zoom .spora-pd__scard-img {
	transform: scale(1.06);
	transform-origin: center;
	transition: transform 0.6s ease;
}

.spora-pd--hover-zoom.spora-pd--grid .spora-pd__card:hover .spora-pd__img,
.spora-pd--hover-zoom.spora-pd--grid .spora-pd__card:focus-within .spora-pd__img,
.spora-pd--hover-zoom .spora-pd__media:hover .spora-pd__img,
.spora-pd--hover-zoom .spora-pd__media:focus-within .spora-pd__img,
.spora-pd--hover-zoom .spora-pd__scard:hover .spora-pd__scard-img,
.spora-pd--hover-zoom .spora-pd__scard:focus-visible .spora-pd__scard-img {
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.spora-pd--hover-zoom .spora-pd__img,
	.spora-pd--hover-zoom .spora-pd__scard-img {
		transition: none;
	}
}

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

.spora-pd-group {
	margin-top: 14px;
	padding-top: 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.spora-pd-group__title {
	margin: 0 0 8px;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.04em;
	opacity: 0.8;
}

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

/* Lista de orden (drag por flechas) en el panel lateral. */
.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;
}