/*
  Bloque "Targetes amb imatge" (spora/targetes-imatge) — estilos front + editor.

  Targetes escrites a mà per a pàgines fosques: per defecte fons blanc al 5 %,
  text blanc, cantonades de 8px. Fons i text es poden canviar des del bloc
  (render.php / editor.js sobreescriuen --spora-ti-bg i --spora-ti-fg a línia;
  buits = els d'aquí, perquè les targetes ja creades no canviïn). Dins: text (subtítol superior + títol a dalt, subtítol
  inferior + descripció a baix) i una imatge enmarcada.

  GRAELLA. 12 columnes; l'span de cada cel·la el posa render.php (i editor.js)
  en variables: --spora-ti-span (escriptori), --spora-ti-span-md (tauleta) i
  --spora-ti-rows (files, només el mosaic). Les regles van sobre
  `.spora-ti__grid > *` i no sobre la targeta perquè a l'editor la cel·la és
  l'embolcall (targeta + barra de controls).

  ORIENTACIÓ PER CONTAINER QUERY. Cada targeta és un contenidor (`spora-ti`) i
  la disposició interna depèn del SEU ample, no del viewport:
    · base (vertical) .......... imatge a dalt, text a sota.
    · horitzontal .............. text a l'esquerra, imatge a la dreta (o a
                                 l'esquerra / alternant: --img-left|alternate).
    · --orient-auto ............ horitzontal si el contingut fa >= 480px.
    · --orient-horitzontal ..... horitzontal fins a 360px; per sota s'apila.
    · --orient-vertical ........ sempre vertical.
  Una vertical molt ampla (>= 600px de contingut) passa la imatge a 16:9: una
  foto 3:4 a tot l'ample faria una targeta d'un metre d'alt.

  CANTONADES (el problema del «doble radi»). Quan una imatge amb cantonades
  toca la vora d'una targeta que també en té, els dos arcs no coincideixen i
  als cantons es veu una falca del fons (va passar a spora/insights en mòbil i
  es va haver de tapar amb `border-radius: 0 !important`). Aquí no pot passar:
    · la imatge va SEMPRE enmarcada, amb el padding de la targeta al voltant,
      en totes les orientacions i mides; mai no toca la vora;
    · el radi el porta NOMÉS el marc (.spora-ti__frame); la <img> no en té,
      així en fer zoom no apareix un segon arc dins del primer;
    · el marc retalla amb `clip-path: inset(0 round …)` a més d'`overflow`:
      Safari, mentre dura una transició de `transform` del fill, deixa
      escapar-lo per les cantonades si només hi ha `overflow: hidden`;
    · l'enllaç estirat hereta el radi, perquè el focus de teclat no surti
      quadrat sobre una targeta rodona.

  Hover (NOMÉS si la targeta té URL, .spora-ti__card--link): la imatge fa zoom
  enrere (reposa a 1.06 i torna a 1, com a spora/insights) i el títol (sempre
  STK Light) passa a itàlica; la descripció passa d'opacitat 0.35 a 1.

  MIDES DE LLETRA: --spora-ti-title-size, --spora-ti-feat-title-base,
  --spora-ti-small-size (subtítols) i --spora-ti-desc-size; el bloc les pot
  sobreescriure a línia. No es mou la targeta, així que no hi ha conflicte de
  `transform` amb l'animació d'aparició.
*/

.spora-ti {
	--spora-ti-gap: 24px;
	/* Padding interior: el bloc pot canviar -pad-base (0 = aquest). A mòbil
	   mai passa de 20px, però si el del bloc és més petit es respecta. */
	--spora-ti-pad-base: 24px;
	--spora-ti-pad: var(--spora-ti-pad-base);
	--spora-ti-inner-gap: clamp(24px, 5vw, 75px);
	--spora-ti-radius: 8px;
	--spora-ti-img-radius: 8px;
	--spora-ti-bg: rgba(255, 255, 255, 0.05);
	--spora-ti-fg: var(--wp--preset--color--spora-white, #FFFFFF);
	--spora-ti-min-h: 0px;
	/* Proporció de la imatge (la posa render.php des de l'opció del bloc):
	   -ratio en horitzontal, -ratio-v quan la targeta s'apila. */
	--spora-ti-ratio: 3 / 4;
	--spora-ti-ratio-v: 4 / 3;
	/* Columna de la imatge en horitzontal: 300px (el disseny) però mai més del
	   45% de la targeta. La destacada la porta al 50%. */
	--spora-ti-img-col: min(300px, 45%);
	/* Mides de lletra. Totes es poden canviar des del bloc (render.php les
	   posa a línia; 0 = aquestes). */
	--spora-ti-title-size: 28px;
	--spora-ti-small-size: 14px;
	--spora-ti-desc-size: 16px;
	/* Destacada: títol més gran i alçada mínima de la imatge en horitzontal.
	   La mida es calcula des de -base perquè els breakpoints l'escalin també
	   quan ve del bloc (40 -> 34 -> 32, i a mòbil la dels títols normals). */
	--spora-ti-feat-title-base: 40px;
	--spora-ti-feat-title-size: var(--spora-ti-feat-title-base);
	--spora-ti-feat-img-h: 440px;

	/* Slider responsive opcional (Spora.responsiveSlider, ver blocks/README.md). */
	--spora-slider-slide: 70%;
	--spora-slider-gap: var(--spora-ti-gap);
	/* Segueixen el color del text: amb el de per defecte (blanc) donen el
	   mateix que abans (blanc al 15 % i blanc). */
	--spora-slider-track-bg: color-mix(in srgb, var(--spora-ti-fg) 15%, transparent);
	--spora-slider-bar-bg: var(--spora-ti-fg);
	/* Punts estil Instagram del carrusel (08/10/2026): abans seguien el text i
	   sortien blancs, invisibles sobre el fons clar de sota el bloc. Ara tenen
	   color propi, el de passos-grid per defecte (verd fosc, l'inactiu al 15 %);
	   el bloc el pot canviar (atribut dotColor -> --spora-ti-dot). */
	--spora-ti-dot: var(--wp--preset--color--spora-dark-green, #001A17);
	--spora-slider-dot-color: color-mix(in srgb, var(--spora-ti-dot) 15%, transparent);
	--spora-slider-dot-active-color: var(--spora-ti-dot);
}

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

.spora-ti__grid > * {
	grid-column: span var(--spora-ti-span, 6);
	grid-row: span var(--spora-ti-rows, 1);
	min-width: 0;
}

/* --- Targeta ------------------------------------------------------------- */
.spora-ti__card {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: var(--spora-ti-min-h);
	/* Explícit: al carrusel la targeta fa el 100% de la pista i el padding no
	   ha de sumar-s'hi (no dependre del reset global d'Astra). */
	box-sizing: border-box;
	padding: var(--spora-ti-pad);
	border-radius: var(--spora-ti-radius);
	background-color: var(--spora-ti-bg);
	color: var(--spora-ti-fg);
	font-family: "Geist", sans-serif;
	/* Contenidor de la container query que decideix l'orientació. */
	container: spora-ti / inline-size;
}

.spora-ti__card--featured {
	--spora-ti-img-col: 50%;
	--spora-ti-title-size: var(--spora-ti-feat-title-size);
}

/* Enllaç estirat: cobreix tota la targeta i porta a la URL. */
.spora-ti__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* --- Interior: base VERTICAL (imatge a dalt, text a sota) ---------------- */
.spora-ti__inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--spora-ti-inner-gap);
	min-width: 0;
}

.spora-ti__media {
	order: -1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Text: capçalera a dalt i peu enganxat a baix (space-between), així les
   descripcions de targetes de la mateixa fila queden alineades. */
.spora-ti__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1 1 auto;
	gap: 32px;
	min-width: 0;
}

.spora-ti__head,
.spora-ti__foot {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.spora-ti__head {
	gap: 12px;
}

.spora-ti__foot {
	gap: 8px;
}

/* --- Imatge -------------------------------------------------------------- */
/* Marc: porta la proporció, les cantonades i el retall del zoom (veure la
   capçalera, «doble radi»). La imatge l'omple en absolut. */
.spora-ti__frame {
	position: relative;
	flex: 1 0 auto;
	width: 100%;
	/* Base = vertical: la proporció «apilada» (render.php passa les verticals a
	   4:3). L'horitzontal la torna a --spora-ti-ratio a les container queries. */
	aspect-ratio: var(--spora-ti-ratio-v, var(--spora-ti-ratio));
	overflow: hidden;
	border-radius: var(--spora-ti-img-radius);
	clip-path: inset(0 round var(--spora-ti-img-radius));
}

.spora-ti .spora-ti__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	transform: scale(1.06);
	transform-origin: center;
	transition: transform 0.6s ease;
}

.spora-ti__card--link:hover .spora-ti__img,
.spora-ti__card--link:focus-within .spora-ti__img {
	transform: scale(1);
}

/* --- Tipografia ---------------------------------------------------------- */
/* Penjades de `.spora-ti` perquè guanyin als estils de títols i paràgrafs
   d'Astra / theme.json (sobretot dins de l'editor). */

/* Subtítols superior i inferior: Geist Light 14 / 1.3 / 0, en versaletes. */
.spora-ti .spora-ti__eyebrow,
.spora-ti .spora-ti__subtitle {
	margin: 0;
	font-family: "Geist", sans-serif;
	font-size: var(--spora-ti-small-size);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--spora-ti-fg);
}

@media screen and (max-width: 921px) {
	.spora-ti .spora-ti__eyebrow,
	.spora-ti .spora-ti__subtitle {
	font-size: 12px;
}
}

/* Majúscules opcionals (07/10/2026): l'interruptor «Subtítols en
   majúscules» del panell Tipografia, desactivat, posa aquesta classe. Per
   defecte segueixen en majúscules. */
.spora-ti.spora-ti--no-caps .spora-ti__eyebrow,
.spora-ti.spora-ti--no-caps .spora-ti__subtitle {
	text-transform: none;
}

/* Títol: STK Light 28 / 1.1 / 0 (abans Geist, que passava a STK només en
   hover; ara és sempre STK i el hover només canvia a itàlica). Mateix àlies
   «Light» que la descripció: veure-hi la nota de sota sobre les famílies. */
.spora-ti .spora-ti__title {
	margin: 0;
	font-family: "STK Bureau Serif Light", "STK Bureau Serif", Georgia, serif;
	font-size: var(--spora-ti-title-size);
	font-weight: 300;
	font-style: normal;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--spora-ti-fg);
}

@media screen and (max-width: 921px) {
	.spora-ti .spora-ti__title {
	font-size: 20px;
}
}

/* Descripció: STK Light 16 / 1.2 / 0. L'àlies «STK Bureau Serif Light» és la
   cara 300 (amb la seva itàlica real). Les famílies van escrites a pèl, SENSE
   var(): si la variable no existeix (l'editor no carrega el :root de
   style.css) la declaració sencera queda invàlida i el text cau a Geist, encara
   que la primera família sí que hi sigui (vist al prototip, 01/10/2026). */
.spora-ti .spora-ti__desc {
	margin: 0;
	font-family: "Geist", sans-serif, "STK Bureau Serif Light", "STK Bureau Serif", Georgia, serif;
	font-size: var(--spora-ti-desc-size);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--spora-ti-fg);
}

/* La descripció va atenuada en repòs i recupera l'opacitat en hover, com el
   resum de spora/insights (i com spora/targetes-text). Només a les targetes amb
   enllaç: a les altres no hi ha interacció i el text quedaria apagat sense
   motiu. L'opacitat va sobre la descripció i no sobre la targeta, així que no
   xoca amb el reveal. */
.spora-ti .spora-ti__card--link .spora-ti__desc {
	opacity: 0.35;
	transition: opacity 0.4s ease;
}

.spora-ti .spora-ti__card--link:hover .spora-ti__desc,
.spora-ti .spora-ti__card--link:focus-within .spora-ti__desc {
	opacity: 1;
}

/* Hover: el títol passa a STK Light itàlica, com a spora/insights. Amb l'àlies
   Light el pes es queda a 300 (amb la família normal l'única itàlica és la 400
   i sortiria més gruixuda). */
.spora-ti .spora-ti__card--link:hover .spora-ti__title,
.spora-ti .spora-ti__card--link:focus-within .spora-ti__title {
	font-style: italic;
	font-weight: 300;
	font-synthesis: weight style; /* només actua si la woff2 no ha carregat */
}

/* --- Orientació (container queries) -------------------------------------- */
/* Vertical molt ampla: la imatge passa a apaïsada (veure la capçalera). */
@container spora-ti (min-width: 600px) {
	.spora-ti__frame {
		aspect-ratio: 16 / 9;
	}
}

/* Les regles d'horitzontal es repeteixen tal qual als dos llindars: una
   condició de @container no admet variables ni es pot compartir. */
@container spora-ti (min-width: 480px) {
	.spora-ti--orient-auto .spora-ti__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--spora-ti-img-col);
		align-items: stretch;
	}

	.spora-ti--orient-auto .spora-ti__media {
		order: 0;
	}

	/* La imatge creix fins a l'alçada del text si aquest és més alt. */
	.spora-ti--orient-auto .spora-ti__frame {
		aspect-ratio: var(--spora-ti-ratio);
	}

	.spora-ti--orient-auto .spora-ti__card--featured .spora-ti__frame {
		aspect-ratio: auto;
		flex-basis: var(--spora-ti-feat-img-h);
	}

	/* Imatge a l'esquerra (sempre, o una de cada dues). */
	.spora-ti--orient-auto.spora-ti--img-left .spora-ti__inner,
	.spora-ti--orient-auto.spora-ti--img-alternate .spora-ti__grid > :nth-child(even) .spora-ti__inner {
		grid-template-columns: var(--spora-ti-img-col) minmax(0, 1fr);
	}

	.spora-ti--orient-auto.spora-ti--img-left .spora-ti__media,
	.spora-ti--orient-auto.spora-ti--img-alternate .spora-ti__grid > :nth-child(even) .spora-ti__media {
		order: -1;
	}

	/* Sense imatge: el text ocupa tota la targeta. */
	.spora-ti--orient-auto .spora-ti__card--noimg .spora-ti__text {
		grid-column: 1 / -1;
	}
}

@container spora-ti (min-width: 360px) {
	.spora-ti--orient-horitzontal .spora-ti__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--spora-ti-img-col);
		align-items: stretch;
	}

	.spora-ti--orient-horitzontal .spora-ti__media {
		order: 0;
	}

	.spora-ti--orient-horitzontal .spora-ti__frame {
		aspect-ratio: var(--spora-ti-ratio);
	}

	.spora-ti--orient-horitzontal .spora-ti__card--featured .spora-ti__frame {
		aspect-ratio: auto;
		flex-basis: var(--spora-ti-feat-img-h);
	}

	.spora-ti--orient-horitzontal.spora-ti--img-left .spora-ti__inner,
	.spora-ti--orient-horitzontal.spora-ti--img-alternate .spora-ti__grid > :nth-child(even) .spora-ti__inner {
		grid-template-columns: var(--spora-ti-img-col) minmax(0, 1fr);
	}

	.spora-ti--orient-horitzontal.spora-ti--img-left .spora-ti__media,
	.spora-ti--orient-horitzontal.spora-ti--img-alternate .spora-ti__grid > :nth-child(even) .spora-ti__media {
		order: -1;
	}

	.spora-ti--orient-horitzontal .spora-ti__card--noimg .spora-ti__text {
		grid-column: 1 / -1;
	}
}

/* --- Imatge a baix (imagePos = bottom, 08/10/2026) ------------------------ */
/* Títol a dalt i imatge enmarcada a baix. render.php ja la pinta com a
   --orient-vertical (cap container query la posa al costat); aquí només es
   gira l'ordre. La imatge manté la proporció (el marc no creix) i, si la fila
   estira la targeta, el que creix és el text: les imatges de la fila queden
   alineades per baix. Al carrusel (tauleta / mòbil) es veu igual.

   La imatge NO es retalla a cap proporció: surt amb la seva alçada natural
   (a tot l'ample del marc), així una panoràmica és més baixa i deixa més
   fons de la targeta a sobre del títol (el disseny, 08/10/2026). Per això
   aquí la <img> torna al flux (static, height auto) i el marc no porta
   aspect-ratio; la proporció del bloc no s'hi aplica. */
.spora-ti--img-bottom .spora-ti__media {
	order: 1;
}

.spora-ti.spora-ti--img-bottom .spora-ti__frame {
	flex: 0 0 auto;
	aspect-ratio: auto;
}

.spora-ti.spora-ti--img-bottom .spora-ti__frame .spora-ti__img {
	position: static;
	height: auto;
}

/* Editor sense imatge: el marc buit no tindria alçada; es queda amb la
   proporció del bloc perquè es vegi el «+ Imatge». */
.spora-ti-editor.spora-ti--img-bottom .spora-ti__frame:not(:has(.spora-ti__img)) {
	aspect-ratio: var(--spora-ti-ratio-v, 4 / 3);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1200px) {
	.spora-ti {
		--spora-ti-feat-title-size: calc(var(--spora-ti-feat-title-base) * 0.85);
		--spora-ti-feat-img-h: 380px;
	}
}

@media (max-width: 921px) {
	/* Tauleta: 2 per fila; les destacades i les de 2/3 o més, a tot l'ample.
	   El mosaic deixa d'ocupar dues files. */
	.spora-ti__grid > * {
		grid-column: span var(--spora-ti-span-md, 6);
		grid-row: auto;
	}

	.spora-ti {
		--spora-ti-feat-title-size: calc(var(--spora-ti-feat-title-base) * 0.8);
		--spora-ti-feat-img-h: 320px;
	}

	/* Slider (opcional): la graella deixa de ser rejilla (pista + barra) i totes
	   les targetes es veuen iguals, també la destacada. */
	.spora-ti__grid.is-slider {
		display: block;
	}

	/* `inherit`: la mida dels títols normals (la del bloc, si n'hi ha). */
	.spora-ti__grid.is-slider .spora-ti__card--featured {
		--spora-ti-img-col: min(300px, 45%);
		--spora-ti-title-size: inherit;
	}
}

@media (max-width: 600px) {
	.spora-ti__grid > * {
		grid-column: 1 / -1;
	}

	.spora-ti {
		--spora-ti-pad: min(var(--spora-ti-pad-base), 20px);
		--spora-ti-inner-gap: 20px;
		/* Tot l'ample, sense que s'hi vegi el lateral de la següent (2026-10-08;
		   abans era 88%). */
		--spora-slider-slide: 100%;
	}

	/* Mòbil: la destacada amb la mateixa mida de títol que les altres. */
	.spora-ti__card--featured {
		--spora-ti-title-size: inherit;
	}

	/* L'alçada mínima és per a escriptori: a mòbil, el que demani el contingut. */
	.spora-ti__card {
		min-height: 0;
	}

	/* Targeta de mòbil (07/10/2026, a petició del client): subtítol superior +
	   títol a dalt, la imatge A SANG (sense padding, toca les vores de la
	   targeta) i, si n'hi ha, subtítol inferior + descripció a sota de la
	   imatge. Va per a totes les orientacions: a mòbil sempre s'apila, també
	   si una container query (targeta >= 360/480px) l'havia posat en
	   horitzontal.

	   Ordre visual sense tocar l'HTML: .spora-ti__text passa a `display:
	   contents`, així capçalera, imatge i peu queden germans dins de l'inner
	   i s'ordenen amb `order` (capçalera -10, peu 10; la imatge es queda amb
	   el -1 / 0 que li toqui i cau al mig).

	   «Doble radi»: aquí la imatge SÍ toca la vora, així que el marc perd el
	   radi i el retall el fa la targeta (overflow + clip-path, el mateix truc
	   de Safari que el marc). Un sol arc, cap falca.

	   NO s'aplica amb la imatge a baix (--img-bottom, 08/10/2026): aquesta
	   a mòbil es veu igual que a escriptori (imatge enmarcada), dins del
	   carrusel. */
	.spora-ti:not(.spora-ti--img-bottom) .spora-ti__card {
		padding: 0;
		overflow: hidden;
		clip-path: inset(0 round var(--spora-ti-radius));
	}

	.spora-ti:not(.spora-ti--img-bottom) .spora-ti__grid .spora-ti__card .spora-ti__inner {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.spora-ti:not(.spora-ti--img-bottom) .spora-ti__card .spora-ti__text {
		display: contents;
	}

	.spora-ti:not(.spora-ti--img-bottom) .spora-ti__card .spora-ti__head {
		order: -10;
		padding: var(--spora-ti-pad) var(--spora-ti-pad) calc(var(--spora-ti-pad) * 1.6);
	}

	.spora-ti:not(.spora-ti--img-bottom) .spora-ti__card .spora-ti__foot {
		order: 10;
		padding: var(--spora-ti-pad);
	}

	/* Sense capçalera la imatge obre la targeta; sense peu la tanca. */
	.spora-ti:not(.spora-ti--img-bottom) .spora-ti__grid .spora-ti__card .spora-ti__frame {
		flex: 0 0 auto;
		aspect-ratio: var(--spora-ti-ratio-v, var(--spora-ti-ratio));
		border-radius: 0;
		clip-path: none;
	}

	/* La targeta retalla: el focus de l'enllaç estirat, cap endins. */
	.spora-ti:not(.spora-ti--img-bottom) .spora-ti__link:focus-visible {
		outline-offset: -2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spora-ti .spora-ti__img,
	.spora-ti__card--link:hover .spora-ti__img,
	.spora-ti__card--link:focus-within .spora-ti__img {
		transform: none;
		transition: none;
	}
}

/* --- Vista en el editor -------------------------------------------------- */
/* El bloc és per a pàgines fosques i el text és blanc: sobre el llenç blanc de
   l'editor no es llegiria. Només a l'editor, darrere el verd fosc del mode
   fosc (box-shadow per no tocar l'ample ni el padding del bloc). */
.spora-ti-editor {
	background-color: #001A17;
	box-shadow: 0 0 0 16px #001A17;
}

/* Cada cel·la de l'editor és targeta + barra de controls; la barra només
   existeix a l'editor. */
.spora-ti-editor__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.spora-ti-editor__item > .spora-ti__card {
	flex: 1 1 auto;
}

/* Imatge buida a l'editor: un marc discontinu clicable al lloc de la imatge. */
.spora-ti-editor__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed rgba(255, 255, 255, 0.35);
	border-radius: inherit;
}

.spora-ti-editor__placeholder .components-button,
.spora-ti-editor__imgbtns .components-button {
	color: #FFFFFF;
	background: rgba(0, 0, 0, 0.55);
	font-size: 12px;
}

/* Botons Canviar / Treure sobre la imatge triada. */
.spora-ti-editor__imgbtns {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	display: flex;
	gap: 4px;
}

.spora-ti-editor__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border: 1px dashed #ccc;
	border-radius: 6px;
	background: #FFFFFF;
	color: #1E1E1E;
	font-size: 12px;
}

.spora-ti-editor__bar .components-base-control__field {
	margin-bottom: 0;
}

.spora-ti-editor__select {
	flex: 0 0 auto;
	width: 130px;
}

.spora-ti-editor__url {
	flex: 1 1 100%;
	min-width: 0;
}

.spora-ti-editor__url .block-editor-url-input input,
.spora-ti-editor__url input {
	width: 100%;
	min-width: 0;
}

.spora-ti-editor__actions {
	display: flex;
	gap: 2px;
	margin-left: auto;
}

/* Botons amb text (no només icona): dins de l'iframe de l'editor els dashicons
   poden no carregar-se i el botó quedava invisible (ídem targetes-text). */
.spora-ti-editor__actions .components-button {
	font-size: 12px;
}

.spora-ti-editor__add {
	margin-top: 24px;
}

/* El botó secundari de WordPress és blau sobre transparent: sobre el verd
   fosc no es veuria. */
.spora-ti-editor__add .components-button {
	background: #FFFFFF;
}

.spora-ti-editor__empty {
	padding: 16px;
	border: 1px dashed rgba(255, 255, 255, 0.35);
	border-radius: 6px;
	color: #FFFFFF;
	opacity: 0.8;
}

/* Dins de l'editor, els estils de títols i paràgrafs d'Astra / theme.json
   (`.editor-styles-wrapper h3 {color…}`) guanyaven a les regles de la targeta
   i el títol sortia negre (mateix cas que targetes-text, 29/09/2026). */
.editor-styles-wrapper .spora-ti .spora-ti__eyebrow,
.editor-styles-wrapper .spora-ti .spora-ti__title,
.editor-styles-wrapper .spora-ti .spora-ti__subtitle,
.editor-styles-wrapper .spora-ti .spora-ti__desc {
	color: var(--spora-ti-fg);
}

/* Els placeholders del RichText: el color del text, atenuat (amb el blanc per
   defecte, el mateix blanc al 45 % d'abans). */
.spora-ti__card [data-rich-text-placeholder]::after {
	color: var(--spora-ti-fg);
	opacity: 0.45;
}