/*
  ============================================================================
  BLOQUE "Graella de passos numerats" (spora/passos-grid) — front + editor
  ----------------------------------------------------------------------------
  Targetes numerades per explicar un procés. Cada targeta té DUES cares apilades
  a la mateixa cel·la de graella (grid-area: 1/1):

    · --base   el que es veu en repòs (número, títol STK i descripció a baix).
    · --hover  el que es veu passant-hi el ratón, NOMÉS si el pas té el hover
               activat: títol i descripció grans en blanc, sobre fons verd fosc
               (amb imatge si se n'hi ha posat).

  Apilar-les a la mateixa cel·la fa dues coses de franc: la targeta mesura el
  que mesura la cara MÉS ALTA (el canvi no fa cap salt) i el creuament és una
  simple opacitat. I amb `grid-auto-rows: 1fr` a la graella, TOTES les targetes
  acaben amb la mateixa alçada, adaptada al contingut i mai per sota de
  --pg-min-h.

  Totes les mides i els colors arriben com a custom properties des de render.php
  (--pg-*), així que aquí no hi ha cap número del disseny cremat: el que queda
  fix són les relacions (la descripció al peu, el vel sobre la imatge, el
  creuament de cares).

  El NOMBRE DE COLUMNES també arriba calculat (--pg-cols / -md / -sm): en
  repeat() no s'hi val cap funció matemàtica, ha de ser un enter.

  Tipografies del disseny:
    · número ............... Geist 300  48 / 1.2  / 0   (#001A17 al 19%)
    · títol ................ STK  300   20 / 1.16 / 0   (verd fosc)
    · descripció ........... Geist 300  14 / 1.4  / 0   (verd fosc)
    · títol hover .......... Geist 300  36 / 1.2  / 0   (blanc)
    · descripció hover ..... Geist 300  20 / 1.4  / 0   (blanc)
  ============================================================================
*/

.spora-passos {
	--pg-geist: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--pg-stk: 'STK Bureau Serif', Georgia, serif;

	/* Colors del disseny. render.php només imprimeix la variable que s'hagi
	   canviat al panell, així que aquests són els que manen de sèrie. */
	--pg-card-bg: var(--wp--preset--color--spora-white, #FFFFFF);
	--pg-text: var(--wp--preset--color--spora-dark-green, #001A17);
	--pg-num-color: #001A1730; /* verd fosc al 19% (Figma: 001A17 + 30) */
	--pg-hover-bg: var(--wp--preset--color--spora-dark-green, #001A17);
	--pg-hover-text: var(--wp--preset--color--spora-white, #FFFFFF);
}

.spora-passos__inner {
	box-sizing: border-box;
	max-width: var(--pg-content-max);
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   La graella
   ---------------------------------------------------------------------------
   Files d'alçada IGUAL (1fr = minmax(auto, 1fr): creixen amb el contingut i
   totes acaben mesurant el mateix). Amb 8 passos són dues files de 4; fins a 6,
   una sola fila.
   --------------------------------------------------------------------------- */

.spora-passos__grid {
	display: grid;
	grid-template-columns: repeat(var(--pg-cols, 5), minmax(0, 1fr));
	grid-auto-rows: 1fr;
	column-gap: var(--pg-col-gap);
	row-gap: var(--pg-row-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Amb el carrusel muntat (tauleta/mòbil) el contenidor deixa de ser graella:
   els seus fills passen a ser el viewport i la barra de progrés. */
.spora-passos__grid.is-slider {
	display: block;
}

/* ---------------------------------------------------------------------------
   La targeta
   --------------------------------------------------------------------------- */

.spora-passos__card {
	position: relative;
	display: grid; /* apila el fons del hover i el cos a la mateixa cel·la */
	min-height: var(--pg-min-h);
	border-radius: var(--pg-radius);
	background-color: var(--pg-card-bg);
	overflow: hidden; /* el radi també ha de tallar la imatge del hover */
}

/* L'ombra suau del disseny és opcional (interruptor del panell). */
.spora-passos.has-shadow .spora-passos__card {
	box-shadow: 0 1px 2px rgba(0, 26, 23, 0.04), 0 8px 24px rgba(0, 26, 23, 0.06);
}

/* Amb hover la targeta rep el focus (tabindex="0" a render.php): l'anell de
   focus per TECLAT es conserva; el contorn en clicar ja el treu el tema. */
.spora-passos__card.is-hoverable {
	cursor: default;
}

.spora-passos__card.is-hoverable:focus-visible {
	outline: 2px solid var(--pg-hover-bg);
	outline-offset: 2px;
}

/* --- Fons del hover: color pla + imatge opcional amb vel a sobre ---------- */

.spora-passos__bg {
	position: absolute;
	inset: 0;
	background-color: var(--pg-hover-bg);
	opacity: 0;
	transition: opacity var(--pg-dur) ease;
	pointer-events: none;
}

.spora-passos__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Vel del MATEIX color del fons sobre la imatge: és el que garanteix que el
   text blanc es llegeixi sigui quina sigui la foto. */
.spora-passos__veil {
	position: absolute;
	inset: 0;
	background-color: var(--pg-hover-bg);
	opacity: var(--pg-overlay);
}

/* --- Cos de la targeta ---------------------------------------------------- */

.spora-passos__body {
	position: relative; /* per damunt del fons del hover */
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: var(--pg-pad);
	min-width: 0;
}

/* El número és ÚNIC per a les dues cares: no es creua, només canvia de color.
   Així es queda clavat al mateix lloc mentre la resta es creua. */
.spora-passos__num {
	font-family: var(--pg-geist);
	font-weight: 300;
	font-size: var(--pg-num-size);
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--pg-num-color);
	transition: color var(--pg-dur) ease;
}

/* Les dues cares, apilades. Ocupa tot l'espai que sobra sota el número. */
.spora-passos__faces {
	display: grid;
	flex: 1 1 auto;
	min-height: 0;
}

.spora-passos__face {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition: opacity var(--pg-dur) ease;
}

/* La cara de hover neix invisible i, mentre no es veu, no ha de robar el ratón
   (si no, els enllaços de sota serien inclicables). Quan s'ensenya recupera els
   pointer-events; ho fan les regles de l'estat de hover, més avall. */
.spora-passos__face--hover {
	opacity: 0;
	pointer-events: none;
	color: var(--pg-hover-text);
}

/* --- Textos de la cara de repòs ------------------------------------------ */

/* Títol: STK Bureau Serif Light 20 / 1.16 / 0. El !important és per guanyar-li
   les regles per ETIQUETA d'Astra i de l'editor (h2…h4), que van per davant de
   l'herència. */
.spora-passos__title {
	margin: 24px 0 0;
	font-family: var(--pg-stk) !important;
	font-weight: 300 !important;
	font-size: var(--pg-title-size);
	line-height: 1.16;
	letter-spacing: 0;
	color: var(--pg-text);
	text-wrap: balance;
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 12 4 4;
}

/* Partició per síl·labes (23/10/2026). Una paraula més ampla que la targeta
   («dimensionamiento» a 3 columnes) la tallava el `word-wrap: break-word` de
   `.entry-content` d'Astra a qualsevol lletra i sense guió («dimensionamie /
   nto»). Amb `hyphens: auto` el navegador la parteix per síl·laba amb guió,
   segons el `lang` que posa Polylang a <html>. `hyphenate-limit-chars` ho
   reserva a paraules de 12+ lletres perquè no talli títols curts que ja
   cabien; on no hi ha diccionari, el break-word d'Astra continua de xarxa. */

.spora-passos__title strong {
	font-weight: 300 !important;
}

/* Descripció: Geist Light 14 / 1.4 / 0, enganxada al PEU de la targeta (és el
   que fa el disseny: el títol a dalt i la descripció a baix). */
.spora-passos__desc {
	margin-top: auto;
	padding-top: 24px;
	font-family: var(--pg-geist);
	font-weight: 300;
	font-size: var(--pg-desc-size);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--pg-text);
}

.spora-passos__desc p {
	margin: 0 0 0.6em;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.spora-passos__desc p:last-child {
	margin-bottom: 0;
}

/* --- Textos de la cara de hover ------------------------------------------ */

/* Títol del hover: Geist Light 36 / 1.2 / 0, blanc. */
.spora-passos__hover-title {
	margin: 24px 0 0;
	font-family: var(--pg-geist);
	font-weight: 300;
	font-size: var(--pg-hover-title-size);
	line-height: 1.2;
	letter-spacing: 0;
	color: inherit;
	text-wrap: balance;
	hyphens: auto; /* mateix motiu que .spora-passos__title */
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 12 4 4;
}

/* Descripció del hover: Geist Light 20 / 1.4 / 0, blanca i al peu (igual que
   la de repòs). */
.spora-passos__hover-desc {
	margin-top: auto;
	padding-top: 24px;
	font-family: var(--pg-geist);
	font-weight: 300;
	font-size: var(--pg-hover-desc-size);
	line-height: 1.4;
	letter-spacing: 0;
	color: inherit;
}

.spora-passos__hover-desc p {
	margin: 0 0 0.6em;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.spora-passos__hover-desc p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   L'ESTAT DE HOVER
   ---------------------------------------------------------------------------
   Tres disparadors, el mateix resultat: el número canvia de color, la cara de
   repòs se'n va i la de hover entra (i recupera els pointer-events, perquè els
   seus enllaços siguin clicables).

     :hover          ratón. Va dins de @media (hover: hover): a les pantalles
                     tàctils el :hover es queda «enganxat» després del toc.
     :focus-visible  teclat. NO :focus-within: la targeta porta tabindex="0", i
                     amb :focus-within un simple CLIC de ratón li donaria el
                     focus i l'estat es quedaria posat en treure el ratón.
                     Per al focus DINS de la targeta (un enllaç de la descripció
                     del hover) hi ha el :has() del bloc de sota.
     .is-active      TOC a les pantalles sense ratón (view.js).
   --------------------------------------------------------------------------- */

.spora-passos__card.is-hoverable.is-active .spora-passos__bg,
.spora-passos__card.is-hoverable:focus-visible .spora-passos__bg {
	opacity: 1;
}

.spora-passos__card.is-hoverable.is-active .spora-passos__num,
.spora-passos__card.is-hoverable:focus-visible .spora-passos__num {
	color: var(--pg-hover-text);
}

.spora-passos__card.is-hoverable.is-active .spora-passos__face--base,
.spora-passos__card.is-hoverable:focus-visible .spora-passos__face--base {
	opacity: 0;
	pointer-events: none;
}

.spora-passos__card.is-hoverable.is-active .spora-passos__face--hover,
.spora-passos__card.is-hoverable:focus-visible .spora-passos__face--hover {
	opacity: 1;
	pointer-events: auto;
}

@media (hover: hover) {

	.spora-passos__card.is-hoverable:hover .spora-passos__bg {
		opacity: 1;
	}

	.spora-passos__card.is-hoverable:hover .spora-passos__num {
		color: var(--pg-hover-text);
	}

	.spora-passos__card.is-hoverable:hover .spora-passos__face--base {
		opacity: 0;
		pointer-events: none;
	}

	.spora-passos__card.is-hoverable:hover .spora-passos__face--hover {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Focus per teclat DINS de la targeta (p. ej. un enllaç de la descripció del
   hover, que és tabulable tot i no veure's). Va en un bloc a part a propòsit:
   un navegador que no entengui :has() descartaria la regla SENCERA, i amb ella
   els disparadors de dalt. */
.spora-passos__card.is-hoverable:has(:focus-visible) .spora-passos__bg {
	opacity: 1;
}

.spora-passos__card.is-hoverable:has(:focus-visible) .spora-passos__num {
	color: var(--pg-hover-text);
}

.spora-passos__card.is-hoverable:has(:focus-visible) .spora-passos__face--base {
	opacity: 0;
	pointer-events: none;
}

.spora-passos__card.is-hoverable:has(:focus-visible) .spora-passos__face--hover {
	opacity: 1;
	pointer-events: auto;
}

/* ---------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------------
   En escritorio ample manen les columnes que toquin pel nombre de passos
   (--pg-cols). Per sota hi ha dos trams, tots dos calculats a render.php:

     --pg-cols-md  escriptori estret i tauleta ampla. NOMÉS reparteix el que es
                   pot repartir en files IGUALS: 6 passa a dues files de 3 i 8
                   es queda a dues de 4. Amb 5 no es toca res, perquè 4+1 seria
                   just la fila coixa que el bloc evita (la mateixa raó del 7).
     --pg-cols-sm  el pla B de tauleta/mòbil quan el carrusel està desactivat.

   A <=921px, si el bloc porta el carrusel activat, la graella es desmunta sola
   (Spora.responsiveSlider) i aquestes columnes ja no pinten res.
   --------------------------------------------------------------------------- */

@media (max-width: 1100px) {

	.spora-passos__grid {
		grid-template-columns: repeat(var(--pg-cols-md, 4), minmax(0, 1fr));
	}
}

@media (max-width: 921px) {

	/* Amplada de la diapositiva del carrusel reutilitzable: tot l'ample, sense
	   que s'hi vegi el lateral de la següent (2026-10-08, a petició del client;
	   abans era 78% i asomava la següent). La resta de l'aspecte és el CSS
	   genèric del tema. */
	.spora-passos {
		--spora-slider-slide: 100%;
		--spora-slider-gap: var(--pg-col-gap);
		--spora-slider-track-bg: rgba(0, 26, 23, 0.12);
		--spora-slider-bar-bg: var(--wp--preset--color--spora-dark-green, #001A17);
		/* Fletxes de dalt del carrusel (anterior / següent). Ara APAGADES des de
		   render.php ($slider_arrows); el color es queda per si tornen. */
		--spora-slider-arrow-color: var(--wp--preset--color--spora-dark-green, #001A17);

		/* Punts estil Instagram de sota el carrusel. */
		--spora-slider-dot-color: rgba(0, 26, 23, 0.15);
		--spora-slider-dot-active-color: var(--wp--preset--color--spora-dark-green, #001A17);
	}

	.spora-passos__grid {
		grid-template-columns: repeat(var(--pg-cols-sm, 2), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {

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

/* Accessibilitat: sense moviment si l'usuari ho ha demanat. El hover segueix
   canviant, però de cop. */
@media (prefers-reduced-motion: reduce) {

	.spora-passos__bg,
	.spora-passos__num,
	.spora-passos__face {
		transition: none;
	}
}

/*
  ----------------------------------------------------------------------------
  EDITOR
  ----------------------------------------------------------------------------
  Al llenç es pinta el MATEIX marcatge amb les mateixes classes. Diferències:

  · Les dues cares s'escriuen per separat: al front es creuen, però aquí totes
    dues han de ser visibles i clicables. Per això la cara de hover NO va apilada
    sobre la de repòs: es posa a sota, dins d'un bloc propi amb la seva capçalera
    i el fons verd fosc, perquè es vegi el contrast real del text blanc.
  · Cada targeta porta la seva barra de controls (moure / esborrar) i la casella
    del hover; només existeixen aquí.
  · El hover del ratón no s'activa mai al llenç: taparia el que s'està
    escrivint. I el focus tampoc, que al llenç es té CONTÍNUAMENT (escriure en
    un RichText és tenir el focus dins de la targeta).
*/

.editor-styles-wrapper .spora-passos__card.is-hoverable:hover .spora-passos__num {
	color: var(--pg-num-color);
}

.editor-styles-wrapper .spora-passos__card.is-hoverable:hover .spora-passos__face--base {
	opacity: 1;
	pointer-events: auto;
}

.editor-styles-wrapper .spora-passos__card.is-hoverable:has(:focus-visible) .spora-passos__num {
	color: var(--pg-num-color);
}

.editor-styles-wrapper .spora-passos__card.is-hoverable:has(:focus-visible) .spora-passos__face--base {
	opacity: 1;
	pointer-events: auto;
}

/* Al llenç, la targeta NO pot retallar ni igualar alçades com al front:
   a sota de la cara de repòs hi van la casella del hover, els seus dos camps i
   la previsualització del fons fosc, o sigui molt més contingut del que tindrà
   mai a la pàgina. Amb l'`overflow: hidden` i les files `1fr` del front, tot
   això quedava tallat pel cantell de la targeta. Aquí, doncs:

     · files d'alçada AUTOMÀTICA i alineades a dalt (cada targeta mesura el que
       necessita; al front tornen a ser totes iguals), i
     · `overflow: visible` (el radi ja no ha de retallar res: al llenç no hi ha
       imatge de fons apilada).

   Les targetes surten, per tant, més altes i desiguals que al front. És el
   preu de poder escriure-hi, i és el mateix criteri que segueix
   `objectius-desplegables` amb la seva columna desplegada. */
.editor-styles-wrapper .spora-passos__grid {
	grid-auto-rows: auto;
	align-items: start;
}

.editor-styles-wrapper .spora-passos__card {
	overflow: visible;
}

.spora-passos-editor__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.spora-passos-editor__card > .spora-passos__card {
	flex: 1 1 auto;
}

/* La barra de controls ha de CANTAR: és l'única manera de moure i esborrar
   passos. Fons i vora propis perquè es llegeixi com una barra i no es confongui
   amb el buit sota la targeta. */
.spora-passos-editor__tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	box-sizing: border-box;
	padding: 6px 8px;
	border: 1px solid rgba(0, 26, 23, 0.15);
	border-radius: 4px;
	background: rgba(0, 26, 23, 0.04);
}

.spora-passos-editor__tools-move {
	display: flex;
	gap: 4px;
}

/* Les fletxes van com a text: cos prou gran per ser clicables amb comoditat. */
.spora-passos-editor__tools-move .components-button {
	min-width: 28px;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
}

/* La casella del hover i els seus camps, dins de la targeta de l'editor. */
.spora-passos-editor__hover {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed rgba(0, 26, 23, 0.2);
}

.spora-passos-editor__hover .components-base-control {
	margin-bottom: 8px;
}

/* Previsualització de la cara de hover: mateixes tipografies i mateixos colors
   que al front, però sempre visible i sobre el fons verd fosc de veritat. */
.spora-passos-editor__hover-preview {
	position: relative;
	margin-top: 12px;
	padding: 16px;
	border-radius: var(--pg-radius);
	background-color: var(--pg-hover-bg);
	color: var(--pg-hover-text);
	overflow: hidden;
}

.spora-passos-editor__hover-preview .spora-passos__hover-title,
.spora-passos-editor__hover-preview .spora-passos__hover-desc {
	position: relative;
	margin-top: 0;
	padding-top: 0;
}

.spora-passos-editor__hover-preview .spora-passos__hover-desc {
	margin-top: 12px;
}

.spora-passos-editor__hover-preview img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spora-passos-editor__hover-preview .spora-passos__veil {
	opacity: var(--pg-overlay);
}

.spora-passos-editor__image {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.spora-passos-editor__image img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 2px;
}

/* Avisos del repeater (límit de 8, el 7 no vàlid, esborrat de dos en dos). */
.spora-passos-editor__notice {
	margin: 0 0 12px;
}

.spora-passos-editor__add {
	margin-top: 16px;
}

/* La targeta marcada per esborrar quan n'hi ha 8 (cal triar-ne DUES: de 8 es
   passa a 6, perquè 7 no és una disposició vàlida). */
.spora-passos-editor__card.is-pending-delete > .spora-passos__card {
	outline: 2px dashed #cc1818;
	outline-offset: 2px;
	opacity: 0.55;
}