/*
  Bloque "Insights (blog)" (spora/insights) — estilos front + editor.

  Graella flexible de 12 columnas: cada targeta ocupa un nº de columnas según su
  «mida» (--spora-insights-span, que pinta render.php). Targetes de fons verd
  fosc amb text blanc, com al disseny:

    - vertical   (petit/mitjà): imatge a dalt, text a sota.
    - horizontal (gran/ample/destacat): text a l'esquerra, imatge a la dreta.

  El resum es col·loca a baix de la columna de text (efecte del mockup). En
  passar el rató el títol (sempre STK) passa a itàlica; la classe .spora-cursor-info (a l'article,
  des de render.php) activa el cursor «+ INFO» del tema. Colors/fonts des dels
  tokens Spora (sans-serif del projecte: Geist; display: STK Bureau Serif).
*/

.spora-insights {
	--spora-insights-gap: 24px;
	--spora-insights-bg: var(--wp--preset--color--spora-dark-green, #001A17);
	--spora-insights-fg: var(--wp--preset--color--spora-white, #ffffff);
	--spora-insights-pad: clamp(20px, 24px, 24px);
	/* Radio del recuadro (exterior), radio de la imagen y padding a su alrededor. */
	--spora-insights-radius: 20px;
	--spora-insights-img-radius: 8px;
	--spora-insights-media-pad: clamp(12px, 24px, 24px);

	/* Slider responsive (lo monta Spora.responsiveSlider, ver blocks/README.md).
	   Base = TABLET (50%, se ve media targeta al lado); en móvil pasa a 100% en el
	   @media de abajo. */
	--spora-slider-slide: 50%;
	--spora-slider-gap: var(--spora-insights-gap);
}

/* Encabezado opcional del bloque. */
.spora-insights__heading {
	margin: 0 0 var(--spora-insights-gap);
	font-family: "Geist", sans-serif;
	font-size: var(--wp--preset--font-size--spora-small, 12px);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--spora-black, #000000);
}

.spora-insights__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--spora-insights-gap);
	align-items: stretch;
}

/* --- Targeta ------------------------------------------------------------- */
.spora-insights__card {
	position: relative;
	grid-column: span var(--spora-insights-span, 6);
	display: flex;
	overflow: hidden;
	border-radius: var(--spora-insights-radius);
	background-color: var(--spora-insights-bg);
	color: var(--spora-insights-fg);
	font-family: "Geist", sans-serif;
}

/* Enlace estirado: cubre toda la targeta y lleva a la entrada. */
.spora-insights__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Columna de texto: data + títol arriba, resum abajo (margin-top: auto). */
.spora-insights__text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--spora-insights-pad);
	padding-right: 50px;
	gap: 14px;
}

/* Subtítol (camp ACF): Geist Light 14/24, sense espaiat, en majúscules. */
.spora-insights__subtitol {
	font-family: "Geist", sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #FFFFFF;
}

/* Títol: sempre STK Bureau Serif Light (2026-10-06; abans Geist, que passava a
   STK només en hover). El hover ja només canvia a itàlica. */
.spora-insights__title {
	margin: 0;
	font-family: "STK Bureau Serif Light", "STK Bureau Serif", Georgia, serif;
	font-size: 28px;
	font-weight: 300;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--spora-insights-fg);
	text-decoration: none;
}

/* El resum baja al pie de la columna de texto, como en el diseño.
   Geist Light (2026-10-02): abans era STK Bureau Serif Light, però en alguns
   equips Windows es pintava amb traç de Regular a 16 px sobre fons fosc i es
   va decidir passar-lo a Geist. */
.spora-insights__resum {
	margin: auto 0 0;
	font-family: "Geist", sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	color: #FFFFFF;
	opacity: 0.35;
	transition: opacity 0.4s ease;
}

/* Hover: el resum recupera l'opacitat completa. */
.spora-insights__card:hover .spora-insights__resum,
.spora-insights__card:focus-within .spora-insights__resum {
	opacity: 1;
}

/* --- Imagen -------------------------------------------------------------- */
/* La imagen va enmarcada: padding a su alrededor (dentro del recuadro) y con
   sus propias esquinas redondeadas. */
.spora-insights__media {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	padding: 24px 24px 24px 0;
}

/* Marco de la imagen: tamaño FIJO (mantiene el padding del recuadro) y recorta
   el zoom. La imagen escala DENTRO de él, así el bloque no cambia de tamaño ni
   se come el padding: solo hace zoom el contenido. */
.spora-insights__frame {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	overflow: hidden;
	border-radius: var(--spora-insights-img-radius);
}

/* La imagen va en absoluto dentro del marco (2026-10-02): con ella en el flujo,
   el `height: 100%` no resolvía (el marco no tiene alto propio) y la imagen se
   pintaba a su proporción natural. Una foto muy vertical estiraba la targeta
   (sobre todo la destacada) y dejaba las de la misma fila desiguales. Así la
   altura la deciden solo el min-height de la mida y el texto; la imagen rellena
   el hueco con object-fit: cover. */
.spora-insights__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.06);
	transform-origin: center;
	transition: transform 0.6s ease;
}

/* Hover: zoom out sutil sin descubrir el fondo del marco. */
.spora-insights__card:hover .spora-insights__img,
.spora-insights__card:focus-within .spora-insights__img {
	transform: scale(1);
}

/* --- Orientaciones ------------------------------------------------------- */
/* Horizontal: text a l'esquerra, imatge a la dreta (ocupa el 50% de l'ample). */
.spora-insights__card--horizontal {
	flex-direction: row;
	min-height: 360px;
}

.spora-insights__card--horizontal .spora-insights__media {
	flex-basis: 50%;
	max-width: 50%;
	align-self: stretch;
}

/* Vertical: imatge a dalt, text a sota. */
.spora-insights__card--vertical {
	flex-direction: column;
	min-height: 340px;
}

.spora-insights__card--vertical .spora-insights__media {
	order: -1;
	width: 100%;
	aspect-ratio: 4 / 3;
}

/* Sin imagen: el texto ocupa casi toda la targeta (sin reservar hueco a la
   derecha; solo el padding normal). */
.spora-insights__card--noimg .spora-insights__text {
	flex: 1 1 100%;
	padding-right: clamp(20px, 14%, 14%);
}

/* --- Ajustes por mida ---------------------------------------------------- */
/* Destacat: la tarjeta hero. A todo el ancho pero mucho más alta y con la
   imagen dominante (~58%), para que se lea como la principal del mockup. */
.spora-insights__card--destacat {
	min-height: clamp(440px, 46vw, 620px);
}

.spora-insights__card--destacat .spora-insights__media {
	flex-basis: 58%;
	max-width: 58%;
}

.spora-insights__card--destacat .spora-insights__text {
	padding: clamp(28px, 3vw, 56px);
}

.spora-insights__card--destacat .spora-insights__title {
	font-size: clamp(28px, 3vw, 44px);
	font-weight: 300;
}

/* Gran (mode 2 columnes) i Ample (mode complet): alçada 450px. */
.spora-insights__card--gran,
.spora-insights__card--ample {
	min-height: 450px;
}

/* Petit/mitjà: título algo más contenido. */
.spora-insights__card--petit .spora-insights__title,
.spora-insights__card--mitja .spora-insights__title {
	font-size: clamp(18px, 1.3vw, 22px);
}

/* --- Hover: el título (ya en STK) pasa a itálica -----------------------
   El título usa la familia alias «STK Bureau Serif Light» (solo cara Light 300
   normal) y dejamos que el navegador sintetice la itálica: así se mantiene FINA.
   Con la familia «STK Bureau Serif» normal, la única cara itálica que hay es la
   400 (Regular), y el navegador la usaría ignorando el weight 300 -> se vería
   más gruesa. */
.spora-insights__card:hover .spora-insights__title,
.spora-insights__card:focus-within .spora-insights__title {
	font-style: italic;
	font-weight: 300;
}


/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 921px) {
	/* Todas a media anchura (2 por fila); ample/destacat siguen a lo ancho. */
	.spora-insights__card {
		grid-column: span 6;
	}

	.spora-insights__card--ample,
	.spora-insights__card--destacat {
		grid-column: span 12;
	}

	/* Slider: el grid deja de ser rejilla (pista + barra fluyen). Las midas
	   dispares no aplican dentro del slider, así que unificamos las targetas a
	   una sola presentación: verticales (imatge a dalt, text a baix) y misma
	   altura, para que se lean todas igual al deslizar. */
	.spora-insights__grid.is-slider {
		display: block;
	}

	.spora-insights__grid.is-slider .spora-insights__card {
		flex-direction: column;
		min-height: 420px;
	}

	.spora-insights__grid.is-slider .spora-insights__media {
		order: -1;
		width: 100%;
		flex-basis: auto;
		max-width: none;
		aspect-ratio: 16 / 9;
	}

	/* En vertical no hace falta el hueco reservado a la derecha para la imagen. */
	.spora-insights__grid.is-slider .spora-insights__text {
		padding-right: var(--spora-insights-pad);
	}
	.spora-insights__media {
		padding: 0;
		border-radius: 0 !important;
	}
	.spora-insights__frame {
		border-radius: 0 !important;
	}
}

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

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

	.spora-insights__card {
		grid-column: 1 / -1 !important;
		min-height: 0;
	}

	/* En móvil, todas las targetas se apilan (imagen arriba, texto abajo). */
	.spora-insights__card--horizontal {
		flex-direction: column;
	}

	.spora-insights__card--horizontal .spora-insights__media {
		flex-basis: auto;
		max-width: none;
		order: -1;
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	/* Targeta compacta de mòbil (2026-10-13, segons el disseny): imatge a sang
	   a dalt en 2:1 i, a sota, subtítol + títol en Geist Light. La targeta
	   s'ajusta al contingut (sense el min-height del slider de tauleta, que hi
	   deixava un buit sota el títol). El resum ja s'amaga a style.css. */
	.spora-insights {
		--spora-insights-radius: 12px;
	}

	/* La pista del slider estira les targetes a la més alta (sovint una sense
	   imatge, amb el text més llarg) i a les altres els quedava el buit sota
	   el títol. En mòbil, cadascuna a la seva alçada. */
	.spora-insights__grid.is-slider .spora-slider__track {
		align-items: flex-start;
	}

	.spora-insights__grid.is-slider .spora-insights__media,
	.spora-insights__card .spora-insights__media {
		aspect-ratio: 2 / 1;
	}

	.spora-insights__grid.is-slider .spora-insights__text,
	.spora-insights__text {
		padding: 40px 28px 44px;
		gap: 20px;
	}

	.spora-insights__card .spora-insights__title,
	.spora-insights__card:hover .spora-insights__title,
	.spora-insights__card:focus-within .spora-insights__title {
		font-family: "Geist", sans-serif;
		font-size: 20px;
		font-weight: 300;
		font-style: normal;
		line-height: 1.2;
	}

	.spora-insights__subtitol {
		font-size: 12px;
	}
}

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

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

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

/* Lista ordenable del panel lateral. */
.spora-ins-order {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

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

.spora-ins-order__size {
	flex: 0 0 auto;
	width: 108px;
}

.spora-ins-order__size .components-base-control__field {
	margin-bottom: 0;
}

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