/*
 * Barres de procés. Apartats 11 i 12.
 *
 * Aquest full depèn de l'estructura de marcatge de l'apartat 11.
 *
 * NO declara cap font-family a propòsit: la barra ha d'heretar la tipografia
 * del tema. En aquest projecte és Poppins i Nunito Sans, ja configurades a
 * Enfold, però el plugin no ho ha de saber.
 */

.odws-proces {
	/* Colors del projecte. Sobreescriure-ho des del Quick CSS és una línia. */
	--odws-line: #9a9b9f;
	--odws-dot: #9a9b9f;

	/*
	 * El text dels passos i el de l'etiqueta són dos colors separats a
	 * propòsit. Els passos van al mateix gris clar que la línia i els punts,
	 * perquè floten sobre el fons de la pàgina. Les dades de l'etiqueta es
	 * mantenen fosques, perquè es llegeixen a sobre del paper.
	 */
	--odws-step-text: #9a9b9f;
	--odws-text: #3a3226;

	--odws-line-width: 1px;

	/*
	 * EL DIÀMETRE HA DE SER IMPARELL. No és una preferència.
	 *
	 * Una línia d'un píxel ocupa una fila sencera de píxels, o sigui que el
	 * seu centre cau sempre en un mig píxel. Un punt de diàmetre parell té el
	 * centre en un píxel enter. Els dos valors no poden coincidir mai, i
	 * queda sempre mig píxel de descentrat que es veu: el punt sembla penjar
	 * de la línia en lloc de ser travessat per ella.
	 *
	 * Amb diàmetre imparell els dos centres cauen tots dos en un mig píxel i
	 * la línia queda clavada. Mesurat: amb 15 píxels, el punt va de la fila
	 * 197,6 a la 212,4 i la línia cau a la 204, o sigui centre 204,5 i 204,5.
	 *
	 * Si algun dia es fa la línia de 2 píxels, aleshores el diàmetre ha de
	 * ser parell, pel mateix motiu invertit.
	 */
	--odws-dot-size: 15px;

	/*
	 * Tram lliure a l'esquerra de la barra de passos. És d'aquí que penja
	 * l'etiqueta, i per això la llista de passos no comença a l'extrem.
	 */
	--odws-steps-offset: 30%;

	/* Alçada màxima del text vertical: el salt de línia es controla aquí. */
	--odws-step-height: 12em;

	/*
	 * L'etiqueta va en píxels i no en percentatge: porta text a sobre i el
	 * text ha de mantenir una mida mínima llegible.
	 *
	 * Aquest valor governa el repartiment de les dues columnes del cos: la
	 * imatge gran s'endú tot el que queda. Pujar-lo fa l'etiqueta més gran i
	 * la foto més petita, i és l'única palanca que fa falta per a les dues
	 * coses.
	 */
	--odws-tag-width: 480px;

	/*
	 * Proporció del fitxer de l'etiqueta, 833 / 443. Serveix per deduir-ne
	 * l'alçada a partir de l'amplada dins un calc().
	 */
	--odws-tag-ratio: 1.8804;

	/*
	 * Quant de l'etiqueta penja per sobre de la línia dels passos, com a
	 * fracció de l'alçada de la imatge.
	 *
	 * Mesurat sobre el fitxer: el nus del cordill va del 2,9% a l'11% de
	 * l'alçada. Amb 0,15 el nus queda clarament per sobre de la línia i
	 * aquesta travessa el cordill just per sota, on encara és una sola corda
	 * abans d'obrir-se, que és el que demana la maqueta.
	 *
	 * A zero, l'etiqueta arrenca a la línia i el nus queda tot per sota.
	 */
	--odws-tag-hang: 0.15;

	/*
	 * Quant baixa la foto respecte de la línia dels passos, com a fracció de
	 * l'alçada de l'etiqueta.
	 *
	 * Fa falta perquè la foto, si no, s'alinea amb la vora de dalt de la
	 * imatge de l'etiqueta, que és el nus del cordill, i queda molt per
	 * sobre del paper.
	 *
	 * Dues referències mesurades sobre el fitxer per defecte: a 0,304 la
	 * foto arrenca exactament al nivell on comença el paper (el paper és al
	 * 45,4% de l'alçada i l'etiqueta puja el 15%), i a 0 arrenca a la
	 * mateixa línia.
	 */
	--odws-image-drop: 0.23;

	/*
	 * Marges interiors de la zona de text de l'etiqueta, mesurats sobre el
	 * fitxer que porta el plugin: el paper hi ocupa el 66% de l'amplada
	 * (del 13,3% al 79,5%) i la meitat inferior de l'alçada, i NO està
	 * centrat dins la imatge.
	 *
	 * Els valors esquerre i dret són asimètrics justament per compensar-ho:
	 * deixen el mateix marge real a cada banda del paper, cosa que fa que el
	 * logotip quedi centrat sobre el paper i no sobre la imatge. Amb valors
	 * simètrics, el text sobresortia per la dreta del paper i el logotip
	 * queia clarament escorat.
	 *
	 * Amb un fons propi, aquests quatre valors són el que cal ajustar.
	 */
	/*
	 * Vores del paper dins el fitxer, mesurades: el paper va del 13,3% al
	 * 79,5% de l'amplada, i per sota del bisell superior comença al 53,8% de
	 * l'alçada i acaba al 99,4%. Els valors de dreta i de baix van expressats
	 * com a distància des d'aquella vora, que és com els vol el CSS.
	 */
	--odws-tag-paper-left: 13.3%;
	--odws-tag-paper-right: 20.5%;
	--odws-tag-paper-top: 53.8%;
	--odws-tag-paper-bottom: 0.6%;

	/*
	 * Farciment interior del paper. Aquests dos valors són l'única cosa que
	 * cal tocar per donar més o menys aire al text.
	 *
	 * Van sumats a les vores del paper, no substituint-les, i per això el
	 * farciment queda igual a totes dues bandes malgrat que el paper no
	 * estigui centrat dins la imatge. És el que manté el logotip centrat
	 * sobre el paper sense haver de recalcular res.
	 */
	--odws-tag-padding: 11%;

	/*
	 * El vertical va més just que l'horitzontal a propòsit: el paper ha
	 * d'encabir cinc files, la nota (que amb un jaciment de nom llarg
	 * n'ocupa dues) i el logotip. Amb el 7% que es va provar primer, la
	 * caixa quedava plena i qualsevol línia de més sobreeixia.
	 */
	--odws-tag-padding-block: 5%;

	--odws-tag-inset-top: calc(var(--odws-tag-paper-top) + var(--odws-tag-padding-block));
	--odws-tag-inset-right: calc(var(--odws-tag-paper-right) + var(--odws-tag-padding));
	--odws-tag-inset-bottom: calc(var(--odws-tag-paper-bottom) + var(--odws-tag-padding-block));
	--odws-tag-inset-left: calc(var(--odws-tag-paper-left) + var(--odws-tag-padding));

	color: var(--odws-text);
}

/*
 * REINICIALITZACIÓ DEFENSIVA DEL COMPONENT.
 *
 * El plugin ha de maquetar igual amb qualsevol tema, i el marcatge de la barra
 * fa servir elements que els temes solen estilar dins el contingut: ol, li,
 * figure, figcaption, dl, dt, dd, p i img. Un tema que escrigui
 * ".entry-content p { margin: 1em 0 }" té especificitat (0,1,1) i guanyaria un
 * ".odws-proces__tag-note" nostre, que només és (0,1,0), i ens injectaria
 * marges dins el paper de l'etiqueta.
 *
 * Enfold ja ho fa amb els elements de llista: .entry-content-wrapper li porta
 * un farciment de 3 píxels que descentrava els punts de la barra respecte de
 * la línia. Mesurat: 3,00 px de desviació abans d'aquesta reinicialització.
 *
 * Per això la classe del contenidor va duplicada, aquí i a tots els selectors
 * del component: puja l'especificitat a (0,2,x) i guanya sempre, sense cap
 * !important i sense dependre de l'ordre de càrrega dels fulls. Aquest bloc va
 * PRIMER a propòsit: les regles del component tenen la mateixa especificitat i
 * el guanyen per ordre d'aparició.
 *
 * NO es reinicia la tipografia: la barra ha d'heretar la del tema, que és el
 * que demana l'apartat 12 del pla.
 */
.odws-proces.odws-proces *,
.odws-proces.odws-proces *::before,
.odws-proces.odws-proces *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
	line-height: inherit;
	font-style: inherit;
	text-align: start;
}

/* --- Barra de passos ---------------------------------------------------- */

.odws-proces .odws-proces__steps {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin: 0;
	padding: 0 0 0 var(--odws-steps-offset);
	list-style: none;
}

/*
 * La línia va a tota amplada i com a pseudoelement, no amb vores dels ítems:
 * amb vores, un space-between al contenidor sencer posaria el primer punt a
 * l'extrem esquerre i deixaria l'etiqueta sense res d'on penjar.
 */
.odws-proces .odws-proces__steps::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--odws-dot-size) / 2 - var(--odws-line-width) / 2);
	height: var(--odws-line-width);
	background: var(--odws-line);
}

/*
 * El selector porta la classe del contenidor a davant a propòsit, i no és
 * estètica: cal guanyar-li l'especificitat al tema.
 *
 * Enfold declara .entry-content-wrapper li { margin-left: 1em; padding: 3px 0 }
 * a base.min.css. Aquells 3 píxels de farciment cauen DINS el nostre element
 * de pas, i com que el punt s'alinea al final del contingut de l'element
 * mentre la línia es col·loca des del final de la llista, el punt puja 3
 * píxels respecte de la línia. Mesurat sobre la pàgina real: descentrat de
 * -3,00 px abans d'aquesta reinicialització, 0,00 px després.
 *
 * .entry-content-wrapper li és (0,1,1) i .odws-proces__step és només (0,1,0):
 * el tema guanyava. Amb les dues classes passem a (0,2,0) i guanyem nosaltres
 * sense dependre de l'ordre de càrrega dels fulls ni de cap !important.
 *
 * Es reinicia aquí, dins el component, i NO amb un override del selector del
 * tema: així no es toca cap altra llista del lloc i el remei viatja amb el
 * plugin a qualsevol web i amb qualsevol tema. Un tema que no posi res als
 * elements de llista no nota la diferència.
 */
.odws-proces .odws-proces__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.odws-proces .odws-proces__step-label {
	color: var(--odws-step-text);
	/* Lectura de baix a dalt, que és la del disseny. */
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	max-height: var(--odws-step-height);
	margin-bottom: 0.9em;

	/*
	 * En píxels i no en rem, perquè es pugui llegir el valor. El rem va
	 * contra l'arrel del document, 16 px per defecte, i no contra els 13 px
	 * que Enfold posa al cos: el 0,8125rem que hi havia abans eren 13 px, i
	 * això no s'endevina llegint el full.
	 */
	font-size: 21px;
	line-height: 1.3;
	text-align: left;
}

.odws-proces .odws-proces__dot {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: var(--odws-dot-size);
	height: var(--odws-dot-size);
	border-radius: 50%;
	background: var(--odws-dot);
}

/* --- Cos: etiqueta i imatge -------------------------------------------- */

.odws-proces .odws-proces__body {
	display: flex;
	align-items: flex-start;
	gap: 2rem;

	/*
	 * Context de consulta de contenidor, per poder saber si l'etiqueta i la
	 * foto han quedat a la mateixa fila o apilades. Veure el @container de
	 * més avall.
	 */
	container-type: inline-size;
	/*
	 * Els punts de ruptura de l'apartat 12 miren el viewport, però el que
	 * esclafa la imatge és l'amplada del CONTENIDOR: amb una barra lateral,
	 * a 768 píxels de finestra la columna de contingut es queda a uns 490 i
	 * a la imatge li'n sobren 140. Amb flex-wrap i una base mínima a la
	 * imatge, la composició s'apila tota sola quan no hi cap, sigui quina
	 * sigui la finestra, i la regla de 767 continua sent la garantia
	 * explícita que demana el pla.
	 */
	flex-wrap: wrap;
}

.odws-proces .odws-proces__tag {
	position: relative;

	/*
	 * L'amplada va declarada DUES vegades, i no és redundant.
	 *
	 * flex-basis només governa la mida en l'eix principal. A la disposició
	 * apilada el cos és una columna, o sigui que l'eix principal és el
	 * vertical i el flex-basis passa a ser una alçada: l'amplada quedava a
	 * mercè del contingut i l'etiqueta s'estirava fins a omplir el
	 * contenidor, ignorant la variable per complet. Amb width declarat,
	 * governa en totes dues direccions.
	 *
	 * max-width la deixa encongir quan el contenidor és més estret que la
	 * mida de disseny.
	 */
	flex: 0 1 var(--odws-tag-width);
	width: var(--odws-tag-width);
	max-width: 100%;

	/*
	 * Context de consulta de contenidor, per poder escalar el text del paper
	 * amb l'amplada de l'etiqueta. Veure .odws-proces__tag-data.
	 */
	container-type: inline-size;
	/*
	 * L'etiqueta puja per sobre de la línia dels passos, prou per deixar-hi
	 * el nus del cordill a sobre. El càlcul surt de l'amplada i de la
	 * proporció del fitxer, o sigui que canviar --odws-tag-width no desplaça
	 * el nus respecte de la línia.
	 *
	 * És d'aquí que ve el tram lliure de --odws-steps-offset: el cordill
	 * s'endinsa a la zona de la barra de passos, i per això la llista de
	 * passos no comença a l'extrem esquerre.
	 */
	margin: calc(
		var(--odws-dot-size) / -2
		- var(--odws-tag-width) * var(--odws-tag-ratio) * var(--odws-tag-hang)
	) 0 0;
}

.odws-proces .odws-proces__tag-bg {
	display: block;
	width: 100%;
	height: auto;
}

.odws-proces .odws-proces__tag-data {
	position: absolute;
	top: var(--odws-tag-inset-top);
	right: var(--odws-tag-inset-right);
	bottom: var(--odws-tag-inset-bottom);
	left: var(--odws-tag-inset-left);
	display: flex;
	flex-direction: column;

	/*
	 * El cos de lletra és una fracció de l'amplada de l'etiqueta, no una
	 * mida fixa. Amb una mida fixa, pujar --odws-tag-width deixava el text
	 * petit enmig d'un paper gran i s'havia de reajustar a mà cada vegada.
	 * Amb cqw, la proporció de la maqueta es manté a qualsevol amplada.
	 *
	 * El 3,16% reprodueix exactament la proporció aprovada: eren 10 píxels
	 * sobre una etiqueta de 316. El mínim de 9 píxels és el sòl de
	 * llegibilitat que demana l'apartat 12 del pla.
	 */
	font-size: max(9px, 3.16cqw);
	line-height: 1.65;
}

/*
 * Etiqueta i valor van EN LÍNIA, com una sola frase: "PEÇA: Casc ibèric".
 *
 * No en dues columnes alineades, que és com ho deia el pla i com estava fet
 * fins ara. Amb columnes, l'etiqueta més llarga (RESTAURADOR/A:) fixa
 * l'amplada de la columna per a totes les altres i els valors se'n van cap a
 * la dreta, deixant un carrer buit al mig del paper que no és el que demana
 * la maqueta.
 */
.odws-proces .odws-proces__tag-data dl {
	margin: 0;
}

.odws-proces .odws-proces__tag-data dt,
.odws-proces .odws-proces__tag-data dd {
	display: inline;
	margin: 0;
	padding: 0;
}

/* Separació entre l'etiqueta i el seu valor, com un espai de text. */
.odws-proces .odws-proces__tag-data dd {
	margin-left: 0.3em;
}

/*
 * Un salt de línia després de cada valor. Va aquí i no al marcatge perquè
 * l'estructura de l'apartat 11 és una llista de definicions plana, i un valor
 * llarg ha de poder continuar a la línia de sota.
 */
.odws-proces .odws-proces__tag-data dd::after {
	content: "";
	display: block;
}

.odws-proces .odws-proces__tag-note {
	/* Una línia més de l'etiqueta, amb el mateix aspecte que les altres. */
	margin: 0;
}

.odws-proces .odws-proces__tag-logo {
	width: 88%;
	height: auto;
	/* Empeny el logotip al final de la zona de text, centrat. */
	margin-top: auto;
	align-self: center;

	/*
	 * Que no l'encongeixi el flex si el text creix: val més que el logotip
	 * conservi la mida i la proporció, i que si algun dia una nota molt
	 * llarga no hi cap es vegi de seguida, que no un logotip aixafat que
	 * ningú no relaciona amb la llargada d'un text.
	 */
	flex-shrink: 0;
}

.odws-proces .odws-proces__image {
	/*
	 * Base de 200 píxels: si a la fila no li'n queden tants, la imatge salta
	 * a la línia de sota i s'hi posa a tota amplada, amb l'etiqueta a dalt.
	 *
	 * Amb 260 i una etiqueta de 480, la composició només anava costat per
	 * costat a partir de 1440 píxels de finestra en una plantilla amb barra
	 * lateral. Amb 200 hi va des de 1200, i per sota s'apila, que és el que
	 * toca quan a la foto li quedarien menys de 200 píxels.
	 */
	flex: 1 1 200px;
	min-width: 0;
	margin: 0;
}

/*
 * Quan l'etiqueta i la foto van costat per costat, la foto baixa respecte de
 * la línia dels passos. Veure --odws-image-drop.
 *
 * Fa falta perquè la foto, si no, s'alinea amb la vora de dalt de la imatge
 * de l'etiqueta, que és el nus del cordill. El desplaçament es calcula sobre
 * l'alçada de l'etiqueta, o sigui que canviar-ne l'amplada no la descol·loca.
 *
 * Va dins una consulta de CONTENIDOR i no de finestra a propòsit: la
 * composició s'apila per flex-wrap quan no hi cap, cosa que depèn de
 * l'amplada del contenidor i no de la finestra, i apilada aquest
 * desplaçament deixaria un buit enorme entre l'etiqueta i la foto.
 *
 * El llindar ha de coincidir amb --odws-tag-width més la separació més la
 * base de la foto: 480 + 32 + 200 = 712. Si es canvia l'amplada de
 * l'etiqueta o la base de la foto, cal revisar aquest número: és l'únic lloc
 * del full on una mida queda acoblada a una altra, perquè les consultes de
 * contenidor no accepten variables al llindar.
 */
@container (min-width: 720px) {

	.odws-proces .odws-proces__image {
		margin-top: calc(
			var(--odws-tag-width) * var(--odws-tag-ratio) * var(--odws-image-drop)
			- var(--odws-dot-size) / 2
		);
	}
}

.odws-proces .odws-proces__image img {
	display: block;

	/*
	 * La imatge NO s'amplia mai per sobre de la mida del fitxer triat al camp
	 * de mida. Amb width: 100%, que és com estava, una columna més ampla que
	 * el fitxer l'estirava i quedava borrosa: la mida del camp deixava de
	 * voler dir res.
	 *
	 * width i height a auto respecten la mida del fitxer; max-width la redueix
	 * quan la columna és més estreta, cosa que sí que cal; i height a auto
	 * manté la proporció mentre es redueix.
	 *
	 * Les tres declaracions van explícites tot i que semblin el
	 * comportament per defecte. Enfold declara img { max-width: 100% } pel seu
	 * compte i sense les nostres la maqueta seria correcta AQUÍ i desbordaria
	 * en un tema que no ho declari. És el mateix motiu de la reinicialització
	 * defensiva de més amunt.
	 */
	width: auto;
	height: auto;
	max-width: 100%;

	/* Centrada dins la seva columna quan hi sobra espai. */
	margin-inline: auto;
}

/* --- Avís per a qui pot arreglar-ho ------------------------------------- */

.odws-proces-notice {
	margin: 1em 0;
	padding: 0.75em 1em;
	border-left: 3px solid #d63638;
	background: #fcf0f1;
	color: #3a3226;
	font-size: 14px;
}

/* --- Responsive: punts de ruptura d'Enfold ----------------------------- */

/*
 * Per sota de 989: llista vertical, punts a l'esquerra, text horitzontal.
 * Res de text girat en pantalles estretes.
 */
@media only screen and (max-width: 989px) {

	.odws-proces .odws-proces__steps {
		flex-direction: column;
		align-items: stretch;
		padding: 0;
	}

	.odws-proces .odws-proces__steps::before {
		top: 0;
		right: auto;
		bottom: 0;
		left: calc(var(--odws-dot-size) / 2 - var(--odws-line-width) / 2);
		width: var(--odws-line-width);
		height: auto;
	}

	/* Mateixa especificitat que a dalt, pel mateix motiu. */
	.odws-proces .odws-proces__step {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 0.85rem;
		margin: 0;
		padding: 0.45rem 0;
	}

	.odws-proces .odws-proces__step-label {
		writing-mode: horizontal-tb;
		transform: none;
		max-height: none;
		margin-bottom: 0;
		/* 14 px abans, pujat en proporció al text de la barra horitzontal. */
		font-size: 18px;
	}

	/* El punt va primer sense tocar el marcatge de l'apartat 11. */
	.odws-proces .odws-proces__dot {
		order: -1;
	}

	.odws-proces .odws-proces__tag {
		margin-top: 1.5rem;
	}
}

/* Per sota de 767: etiqueta i imatge s'apilen, etiqueta primer. */
@media only screen and (max-width: 767px) {

	.odws-proces .odws-proces__body {
		flex-direction: column;
		gap: 1.5rem;
	}
}

@media only screen and (max-width: 479px) {

	/*
	 * A mòbil no es retalla l'etiqueta: amb max-width al 100% ja s'ajusta al
	 * contenidor, i el text escala sol amb la consulta de contenidor. Retallar
	 * l'amplada aquí només faria l'etiqueta petita amb marges grossos.
	 *
	 * El que sí que cal és menys farciment interior. Per sota d'unes 320
	 * píxels de finestra el cos de lletra topa amb el sòl de 9 píxels i deixa
	 * de reduir-se, o sigui que el text ja no encongeix més però la caixa sí:
	 * amb el farciment de sobretaula, el contingut sobreeixia 6 píxels del
	 * paper. Mesurat.
	 */
	.odws-proces {
		--odws-tag-padding: 8%;
		--odws-tag-padding-block: 3%;
	}
}