/* =========================================================================
   TARGETA D'INSIGHT — full d'estils COMPARTIT  ·  .spora-insl__card
   -------------------------------------------------------------------------
   La targeta d'un insight (títol, imatge destacada, resum, data i temps de
   lectura) i la graella que les col·loca. El marcatge el pinta el template-part
   `template-parts/insight-card.php`.

   PER QUÈ VIU AQUÍ I NO A style.css. La fan servir DOS llocs i ha de sortir
   exactament igual als dos:

     · template-parts/insights-llistat.php  -> la pàgina d'entrades.
     · blocks/insights-destacats/render.php -> el bloc «Insights destacats».

   A més, l'editor de blocs NO carrega el style.css del tema, així que si les
   regles hi visquessin la previsualització del bloc sortiria sense estils. Des
   d'aquí es carreguen als dos costats: blocks.php l'encola a
   `enqueue_block_assets`, que corre tant al front com dins de l'editor.

   El que NO és de la targeta: el fons i l'aire de la SECCIÓ de la pàgina
   d'entrades es queda a la secció «PÀGINA D'ENTRADES» de style.css; la barra
   de filtres, el cercador i l'estat buit són a _shared/filter-bar.css.

   Les mides afinables són variables al contenidor (alçada de targeta, gap,
   columnes, ample de la imatge), per no haver de tocar les regles. Els dos
   contenidors possibles —`.spora-insl` (pàgina) i `.spora-insd` (bloc)— les
   declaren aquí mateix, en un sol selector.

   Interacció:
   · Cursor «+ INFO» (classe .spora-cursor-info al marcatge) i, en fer hover,
     TOT el contingut puja lleugerament: el que es mou és la targeta sencera
     (marc, fons i contingut).
   ========================================================================= */

/* Variables de la GRAELLA i la TARGETA, en un sol selector per als dos
   contenidors que la porten: la pàgina d'entrades (.spora-insl) i el bloc
   «Insights destacats» (.spora-insd). Si aquí es canvia una mida, canvia als
   dos llocs —que és justament el que es vol. */
.spora-insl,
.spora-insd {
	--spora-insl-cols: 3;
	--spora-insl-gap: 24px;
	--spora-insl-card-h: 661px;
	--spora-insl-card-pad: 32px;
	--spora-insl-card-bg: var(--wp--preset--color--spora-white, #FFFFFF);
	--spora-insl-card-radius: 8px;
	/* Ample de la imatge destacada dins de la targeta (queda centrada). */
	--spora-insl-media-w: 55%;
	--spora-insl-media-radius: 8px;
	/* Tinta principal i la seva versió «fluixa» (data, temps, cercador inactiu). */
	--spora-insl-ink: var(--wp--preset--color--spora-dark-green, #001A17);
	--spora-insl-ink-soft: #001A1730;
	/* Ample màxim de la COLUMNA DE CONTINGUT (barra + graella). A la pàgina
	   d'entrades el fons va a sang però el contingut es queda encaixat aquí i
	   centrat; al bloc, encaixa la graella dins del contenidor que la porti. */
	--spora-insl-max-w: 1440px;
}
/* --- Columna de contingut: la graella s'encaixa i es centra ------------- */
.spora-insl__grid {
	max-width: var(--spora-insl-max-w);
	margin-inline: auto;
}

/* --- Graella ------------------------------------------------------------- */
.spora-insl__grid {
	display: grid;
	grid-template-columns: repeat(var(--spora-insl-cols), minmax(0, 1fr));
	gap: var(--spora-insl-gap);
	align-items: stretch;
}

/* --- Targeta ------------------------------------------------------------- */
.spora-insl__card {
	position: relative;
	display: flex;
	min-height: var(--spora-insl-card-h);
	padding: var(--spora-insl-card-pad);
	border-radius: var(--spora-insl-card-radius);
	background-color: var(--spora-insl-card-bg);
	font-family: "Geist", sans-serif;
}

/* Hover: puja TOTA la targeta (marc, fons i contingut), no només el text. */
.spora-insl__card {
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.spora-insl__card:hover,
.spora-insl__card:focus-within {
	transform: translateY(-8px);
}

/* Convivència amb l'animació d'aparició (reveal), que fa servir el MATEIX
   `transform` sobre aquesta mateixa targeta i amb més especificitat:

   · La transició. La del reveal és llarga (800ms) i escalonada, i taparia el
     moviment del hover. Es substitueix per la curta NOMÉS mentre el ratolí és
     sobre la graella (.is-hovering, la posa Spora.insightsLlistat): per llavors
     l'aparició ja ha acabat, així que no se li trepitja l'escalonat. Mateix
     recurs que a blocks/projectes-list/style.css.
   · El desplaçament. L'estat revelat imposa `transform: none`; per guanyar-li
     cal repetir aquí el hover amb prou especificitat.

   Amb «prefers-reduced-motion» el tema ja força `transform: none !important` a
   tots els .spora-reveal-item, de manera que el hover tampoc es mou. */
html.spora-reveal-anim .spora-insl__grid[data-spora-reveal].is-hovering .spora-insl__card.spora-reveal-item {
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

html.spora-reveal-anim .spora-insl__grid[data-spora-reveal] .spora-insl__card.spora-reveal-item:hover,
html.spora-reveal-anim .spora-insl__grid[data-spora-reveal] .spora-insl__card.spora-reveal-item:focus-within {
	transform: translateY(-8px);
}

/* Amagada pel filtre o pel cercador (ho fa Spora.insightsLlistat). */
.spora-insl__card.is-hidden {
	display: none;
}

/* Enllaç estirat: cobreix tota la targeta i porta a l'entrada. */
.spora-insl__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Embolcall del contingut. El peu (data + temps) queda sempre a baix gràcies al
   margin-top: auto. En fer hover NO es mou aquest embolcall: es mou la targeta
   sencera (regles de sobre, a .spora-insl__card). */
.spora-insl__inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	gap: 50px;
}

@media (prefers-reduced-motion: reduce) {
	.spora-insl__card {
		transition: none;
	}

	.spora-insl__card:hover,
	.spora-insl__card:focus-within {
		transform: none;
	}

	/* La imatge es queda quieta i a la seva mida: ni reposa ampliada ni fa el
	   zoom en passar-hi el ratolí. */
	.spora-insl__img,
	.spora-insl__card:hover .spora-insl__img,
	.spora-insl__card:focus-within .spora-insl__img {
		transform: none;
		transition: none;
	}
}

.spora-insl__title {
	margin: 0;
	/* L'àlies el declara el :root de style.css, que l'editor de blocs NO carrega:
	   el segon nivell és el preset de theme.json, que sí que hi és. */
	font-family: var(--spora-font-family-display, var(--wp--preset--font-family--spora-display));
	font-size: 32px;
	font-weight: 300;
	line-height: 90%;
	letter-spacing: -1px;
	text-transform: uppercase;
	color: var(--spora-insl-ink);
}

/* Imatge destacada: centrada i quadrada, amb les seves pròpies cantonades.
   Fa alhora de MARC del zoom: l'`overflow: hidden` retalla l'escalat de la
   imatge, així la targeta no canvia de mida ni el zoom es menja les cantonades
   arrodonides. */
.spora-insl__media {
	width: var(--spora-insl-media-w);
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--spora-insl-media-radius);
}

/* Zoom en fer hover, igual que al bloc spora/insights: la imatge REPOSA una
   mica ampliada (1.06) i torna a la seva mida (1) quan el ratolí és sobre la
   targeta. Es fa en aquest sentit —i no de 1 a 1.06— perquè així el marc mai no
   es queda curt: si partís de 1, en ampliar-se no passaria res estrany, però en
   canvi qualsevol arrodoniment a mitja transició podria descobrir un fil del
   fons pels costats. Partint ja ampliada, el marc sempre va ple.

   El `transform` d'aquí no xoca amb el de l'animació d'aparició (reveal): aquell
   va sobre la targeta (.spora-reveal-item) i aquest sobre la imatge, que és
   descendent seu. */
.spora-insl__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transform: scale(1.06);
	transform-origin: center;
	transition: transform 0.6s ease;
}

.spora-insl__card:hover .spora-insl__img,
.spora-insl__card:focus-within .spora-insl__img {
	transform: scale(1);
}

.spora-insl__resum {
	margin: 0;
	font-family: "Geist", sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--spora-insl-ink);
}

/* Peu: data a l'esquerra, temps de lectura a la dreta. */
.spora-insl__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 24px;
}

.spora-insl__date,
.spora-insl__temps {
	font-family: "Geist", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	color: var(--spora-insl-ink-soft);
}

.spora-insl__temps {
	text-transform: uppercase;
}
/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 921px) {
	.spora-insl,
	.spora-insd {
		--spora-insl-cols: 2;
		--spora-insl-card-h: 520px;
	}
}

@media (max-width: 600px) {
	.spora-insl,
	.spora-insd {
		--spora-insl-cols: 1;
		--spora-insl-card-h: 0px;
		--spora-insl-card-pad: 24px;
		--spora-insl-media-w: 100%;
	}

	.spora-insl__title {
		font-size: 28px;
	}
}