/**
 * SE7 Info — punts d'informació sobre una imatge.
 *
 * LA LLETRA I EL COLOR DEL TEXT ELS POSA EL TEMA. Aquí només hi ha
 * col·locació, el marc de la targeta i el gest dels punts: la fitxa ha de
 * semblar de la web, no del plugin.
 *
 * L'ACCENT ES FA SERVIR POC (premissa de la casa): el punt, el fil i el
 * filet de la targeta. Res més.
 *
 * Tot el que és propi porta el prefix llarg (--se7i-*), fora de l'espai
 * compartit --se7-* que vigila SE7 Colors (norma §3). Es pot sobreescriure
 * des del tema fill sense tocar el plugin:
 *
 *   .se7i { --se7i-accent: #1a5938; --se7i-marc-fons: #f6f0dd; }
 *
 * LES MIDES VAN PER CONSULTA DE CONTENIDOR, no de finestra (norma §8): la
 * fitxa sol viure dins d'una columna del maquetador, i el que mana és
 * l'amplada d'aquella columna, no la del navegador.
 */

.se7i {
	--se7i-accent: var(--se7-accent, var(--the7-accent-color, currentColor));
	--se7i-sobre-accent: #fff;
	/* El marc pot ser translúcid: l'opacitat es tria a la pantalla o a
	   l'element. Qui sobreescrigui --se7i-marc-fons des del tema fill amb un
	   color opac mana ell, i --se7i-marc-alfa deixa de comptar. */
	--se7i-marc-alfa: 1;
	--se7i-marc-fons: rgba(255, 255, 255, var(--se7i-marc-alfa));
	--se7i-marc-filet: rgba(0, 0, 0, .14);
	--se7i-marc-ombra: 0 2px 14px rgba(0, 0, 0, .07);
	--se7i-radi: 2px;
	--se7i-espai: 1rem;
	--se7i-punt: 26px;
	--se7i-toc: 44px;
	--se7i-fil: 1.5px;
	/* El fil va a color ple. Amb transparència (es va provar a .55 i a .85) un
	   filet d'1,5 px damunt d'una fotografia es dilueix fins a fer dubtar si
	   hi és: el que ha de ser discret és el GRUIX i el color, no l'opacitat. */
	--se7i-fil-vel: 1;
	--se7i-pas: 90ms;
	/* La corba de tota la casa: surt de pressa i frena llarg. És la que fa
	   que una entrada sembli suau i no mecànica. */
	--se7i-corba: cubic-bezier(.22, 1, .36, 1);
	--se7i-marc-ample: 320px;

	position: relative;
	container-type: inline-size;
	container-name: se7i;
	margin: 0;
	/* Els marcadors s'aparten fins a la vora de la imatge: la meitat del punt
	   quedaria fora de la columna si la caixa no els fes lloc. El `max()` és
	   perquè aquesta caixa és el CONTENIDOR i no es pot midrar a si mateixa
	   (vegeu més avall): el coixí ha de valer també per al punt gros. */
	padding: max(24px, calc(var(--se7i-toc) / 2));
}

.se7i *,
.se7i *::before,
.se7i *::after {
	box-sizing: border-box;
}

.se7i-nom {
	margin: 0 0 var(--se7i-espai);
}

.se7i-escena {
	position: relative;
}

.se7i-figura {
	position: relative;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.se7i-imatge {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* El dibuix s'arramba a una banda NOMÉS quan el canal hi cap de debò, i qui
   ho mesura és el motor (`es-canal`): el canal ha de ser UN, a una banda.
   Amb el dibuix al mig el lloc quedava partit en dos mitjos canals i el
   quadre no cabia a cap dels dos —mesurat: a una columna de 580 px, dos de
   172 contra un de 328—. */
.se7i.es-canal .se7i-figura {
	margin-inline: 0 auto;
}

/* L'alçada triada s'aplica ESCALANT LA CAIXA, amb la proporció de la imatge:
   així la caixa continua sent la imatge i els punts —que van en tant per cent
   d'aquesta caixa— segueixen assenyalant on toca. El `min()` mana per damunt:
   en una columna estreta la fitxa s'aprima abans que desbordar, i llavors
   l'alçada surt més petita que la demanada. */
.se7i--alt .se7i-figura {
	width: min(100%, calc(var(--se7i-alcada) * var(--se7i-proporcio)));
	margin-inline: auto;
}

/* ── Els fils ──────────────────────────────────────────────────────────
   Un <svg> estirat a la mida de la imatge amb preserveAspectRatio="none":
   així les coordenades del viewBox són directament els percentatges que
   s'han desat. El gruix no s'estira perquè cada traç va amb
   vector-effect="non-scaling-stroke". */
.se7i-fils {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.se7i-fil {
	stroke: var(--se7i-accent);
	stroke-width: var(--se7i-fil);
	opacity: var(--se7i-fil-vel);
}

/* El punt del detall: una línia de llargada zero amb el cap rodó és un cercle
   que no s'ovala encara que l'svg estigui estirat. */
.se7i-ancora {
	stroke: var(--se7i-accent);
	stroke-width: 5;
	stroke-linecap: round;
}

/* ── Els marcadors ─────────────────────────────────────────────────────── */

.se7i-marcadors {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.se7i-punt {
	position: absolute;
	left: calc(var(--se7i-mx, 50) * 1%);
	top: calc(var(--se7i-my, 50) * 1%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--se7i-toc);
	height: var(--se7i-toc);
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	pointer-events: auto;
	line-height: 1;
	-webkit-appearance: none;
	appearance: none;
}

.se7i-punt:hover,
.se7i-punt:focus {
	background: none;
	box-shadow: none;
}

/* L'anella de l'onada d'entrada. Hi és sempre, invisible, perquè el dia que
   l'animació corri no s'hagi de crear res. */
.se7i-punt::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--se7i-punt);
	height: var(--se7i-punt);
	margin: calc(var(--se7i-punt) / -2) 0 0 calc(var(--se7i-punt) / -2);
	border: 2px solid var(--se7i-accent);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.se7i-punt:focus-visible {
	outline: 2px solid var(--se7i-accent);
	outline-offset: 0;
}

/* El «+» es dibuixa amb dues barres: ni glif ni tipografia d'icones, que és
   una dependència més i un caràcter que algun traductor voldria traduir. */
.se7i-punt__signe {
	position: relative;
	display: block;
	width: var(--se7i-punt);
	height: var(--se7i-punt);
	border-radius: 50%;
	background: var(--se7i-accent);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	transition: transform .3s var(--se7i-corba), opacity .25s ease, box-shadow .3s ease;
}

.se7i-punt__signe::before,
.se7i-punt__signe::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--se7i-sobre-accent);
	transform: translate(-50%, -50%);
}

.se7i-punt__signe::before {
	width: 45%;
	height: 1.5px;
}

.se7i-punt__signe::after {
	width: 1.5px;
	height: 45%;
}

.se7i-punt:hover .se7i-punt__signe {
	transform: scale(1.18);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

/* Obert: el «+» gira i es torna una creu de tancar. */
.se7i-punt[aria-expanded="true"] .se7i-punt__signe {
	transform: rotate(45deg);
}

/* El nom de la part viatja dins del botó com a text de veritat —el llegeix el
   lector de pantalla i el tradueix SE7 Translate—, però no es veu fins que el
   punter o el focus s'hi posen: la imatge s'ha de veure neta. Amb opacity, no
   amb display:none, perquè no surti de l'arbre d'accessibilitat. */
.se7i-punt__nom {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	max-width: 11rem;
	padding: .3em .6em;
	transform: translate(-50%, calc(-50% - var(--se7i-toc)));
	border-radius: var(--se7i-radi);
	background: var(--se7i-accent);
	color: var(--se7i-sobre-accent);
	font-size: .78em;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.se7i-punt:hover .se7i-punt__nom,
.se7i-punt:focus-visible .se7i-punt__nom {
	opacity: 1;
}

/* Un punt obert no necessita el rètol: ja té la targeta. */
.se7i-punt[aria-expanded="true"] .se7i-punt__nom {
	opacity: 0;
}

/* ── Les parts ─────────────────────────────────────────────────────────
   SENSE JAVASCRIPT això és el que hi ha: una llista sota la imatge amb el
   nom i el text de cada part, tot obert. El motor és qui les plega i, si hi
   cap, les converteix en targetes. */

.se7i-parts {
	margin-top: calc(var(--se7i-espai) * 1.5);
	display: grid;
	gap: var(--se7i-espai);
}

.se7i-part {
	padding: var(--se7i-espai);
	border: 1px solid var(--se7i-marc-filet);
	border-inline-start: 3px solid var(--se7i-accent);
	border-radius: var(--se7i-radi);
	background: var(--se7i-marc-fons);
}

.se7i-part__cap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75em;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: default;
	-webkit-appearance: none;
	appearance: none;
}

.se7i-part__cap:hover,
.se7i-part__cap:focus {
	background: none;
	box-shadow: none;
}

.se7i-part__cap:focus-visible {
	outline: 2px solid var(--se7i-accent);
	outline-offset: 2px;
}

.se7i-part__titol {
	font-size: .78em;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* El senyal de plegar només té sentit quan el motor plega. */
.se7i-part__signe {
	display: none;
	position: relative;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
}

.se7i-part__signe::before,
.se7i-part__signe::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform .25s ease, opacity .25s ease;
}

.se7i-part__signe::before {
	width: 100%;
	height: 1.5px;
}

.se7i-part__signe::after {
	width: 1.5px;
	height: 100%;
}

.se7i-part__cos {
	padding-top: .5em;
}

.se7i-part__cos > *:first-child {
	margin-top: 0;
}

.se7i-part__cos > *:last-child {
	margin-bottom: 0;
}

.se7i-avis {
	margin: 0;
	padding: var(--se7i-espai);
	border: 1px dashed var(--se7i-marc-filet);
	border-radius: var(--se7i-radi);
}

/* ══ AMB MOTOR ═════════════════════════════════════════════════════════
   A partir d'aquí, tot el que només val quan el JavaScript ha arrencat. */

.se7i.es-motor .se7i-part__cap {
	cursor: pointer;
}

.se7i.es-motor .se7i-part__signe {
	display: block;
}

.se7i.es-motor .se7i-part__cos {
	display: none;
}

.se7i.es-motor .se7i-part.es-obert .se7i-part__cos {
	display: block;
}

.se7i.es-motor .se7i-part.es-obert .se7i-part__signe::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

/* ── Mode targeta: la informació al costat del punt ─────────────────────
   Qui decideix si hi cap és el motor (mira l'amplada real del component amb
   un ResizeObserver i posa `es-targetes`): així la regla és una i no tres
   copiades, i no depèn que el navegador entengui les consultes de contenidor.
   Les consultes de contenidor sí que manen a les mides (més avall).

   La POSICIÓ de la targeta també la posa el motor, en píxels: ha de mirar on
   és el detall per no tapar-lo, i això no es pot decidir amb una regla. */

.se7i.es-motor.es-targetes .se7i-parts {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	margin: 0;
	pointer-events: none;
}

.se7i.es-motor.es-targetes .se7i-part {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	/* Les dues declaracions són a posta: un navegador que no entengui les
	   unitats de contenidor (cqi) es queda amb la primera i la targeta surt
	   igual: hi perd l'ajust fi, no el disseny. */
	width: var(--se7i-marc-ample);
	width: min(var(--se7i-marc-ample), 88cqi);
	padding: var(--se7i-espai);
	padding: clamp(.9rem, 2.4cqi, 1.35rem);
	box-shadow: var(--se7i-marc-ombra);
	pointer-events: auto;
	/* El text pot ser de dues línies o de dotze: la targeta creix, i si arriba
	   a ser més alta que el dibuix, el que sobra es llegeix desplaçant-la
	   —mai tapant el que ve després de la fitxa a la pàgina—. */
	max-height: 100%;
	overflow: auto;
	overscroll-behavior: contain;
}

/* Al canal, l'amplada que s'ha demanat és un màxim: si el canal és més
   estret, el quadre s'hi aprima abans que obrir-se damunt del dibuix. */
.se7i.es-motor.es-targetes.es-canal .se7i-part {
	width: min(var(--se7i-marc-ample), var(--se7i-canal, 100%), 88cqi);
}

.se7i.es-motor.es-targetes .se7i-part.es-obert {
	display: block;
	animation: se7i-entra-targeta .32s var(--se7i-corba) both;
}

/* Amb el marc translúcid, el dibuix es veu a través: un vel difuminat el manté
   llegible. On no hi hagi `backdrop-filter` es queda el color amb
   transparència i prou, que ja funciona. */
.se7i--vel .se7i-part {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* A la llista, el que s'obre és el cos: el mateix gest, més curt. */
.se7i.es-motor .se7i-part.es-obert .se7i-part__cos {
	animation: se7i-obre-cos .28s var(--se7i-corba) both;
}

@keyframes se7i-entra-targeta {

	from {
		opacity: 0;
		transform: translateY(10px) scale(.97);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes se7i-obre-cos {

	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* El filet gruixut va sempre a la banda del punt. */
.se7i.es-motor.es-targetes .se7i-part.es-esquerra {
	border-inline-start-width: 1px;
	border-inline-end: 3px solid var(--se7i-accent);
}

/* ── L'entrada ─────────────────────────────────────────────────────────
   El dibuix arriba, i els punts van sortint un darrere l'altre. L'ordre el
   posa el motor (de dalt a baix o a l'atzar) amb --se7i-ordre.

   QUI MARCA L'ENTRADA ÉS UNA CLASSE (`es-entrada`), NO L'ATRIBUT.
   Amb `[data-se7i-aparicio]:not([data-se7i-aparicio="res"])` la regla que
   amaga tenia CINC unitats d'especificitat i la que ensenya, quatre: els
   punts no sortien mai. Dues classes contra tres, i s'acaba la discussió. */

/* El dibuix no apareix: es DESTAPA, de dalt a baix, mentre puja una mica i
   s'acaba d'assentar. És el gest d'una làmina que es desplega, i lliga amb
   l'ordre en què després van sortint els punts. */
.se7i.es-motor.es-entrada .se7i-imatge {
	opacity: 0;
	transform: translateY(16px) scale(1.015);
	clip-path: inset(0 0 100% 0);
	transition: opacity .8s var(--se7i-corba), transform 1.1s var(--se7i-corba), clip-path 1.1s var(--se7i-corba);
}

.se7i.es-motor.es-entrada .se7i-punt__signe,
.se7i.es-motor.es-entrada .se7i-punt__nom {
	opacity: 0;
	transform: scale(.4);
}

.se7i.es-motor.es-entrada .se7i-fil,
.se7i.es-motor.es-entrada .se7i-ancora {
	opacity: 0;
}

/* El fil es dibuixa: el guió és tan llarg com el fil sencer i es desplaça de
   fora cap a dins. La llargada la mesura el motor i la deixa a --se7i-llarg;
   el 200 de recanvi és per si un navegador no la sap mesurar (llavors el fil
   surt sencer de cop, que és el mal menor). */
.se7i.es-motor.es-entrada .se7i-fil {
	stroke-dasharray: var(--se7i-llarg, 200);
	stroke-dashoffset: var(--se7i-llarg, 200);
}

.se7i.es-motor.es-entrada.es-a-punt .se7i-imatge {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 0 0);
}

.se7i.es-motor.es-entrada.es-a-punt .se7i-punt__signe {
	opacity: 1;
	transform: scale(1);
	transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.4, .64, 1);
	transition-delay: calc(var(--se7i-ordre, 0) * var(--se7i-pas) + .45s);
}

/* En aterrar, cada punt fa dues onades i para. Serveix per dir «això es pot
   clicar» sense un rètol que tapi el dibuix; repetint-se per sempre seria un
   parpelleig i cansaria. */
.se7i.es-motor.es-entrada.es-a-punt .se7i-punt::after {
	animation: se7i-onada 1.7s var(--se7i-corba) 2;
	animation-delay: calc(var(--se7i-ordre, 0) * var(--se7i-pas) + .7s);
}

@keyframes se7i-onada {

	0% {
		opacity: .45;
		transform: scale(1);
	}

	70%,
	100% {
		opacity: 0;
		transform: scale(2.4);
	}
}

.se7i.es-motor.es-entrada.es-a-punt .se7i-punt__nom {
	transform: translate(-50%, calc(-50% - var(--se7i-toc)));
}

.se7i.es-motor.es-entrada.es-a-punt .se7i-fil {
	opacity: var(--se7i-fil-vel);
	stroke-dashoffset: 0;
	transition: opacity .3s ease, stroke-dashoffset .75s var(--se7i-corba);
	transition-delay: calc(var(--se7i-ordre, 0) * var(--se7i-pas) + .55s);
}

.se7i.es-motor.es-entrada.es-a-punt .se7i-ancora {
	opacity: 1;
	transition: opacity .3s ease;
	transition-delay: calc(var(--se7i-ordre, 0) * var(--se7i-pas) + 1s);
}

/* ── Mides ─────────────────────────────────────────────────────────────
   Per CONTENIDOR (norma §8). Dins d'una columna estreta el punt es fa gros
   —el dit no té punteria— i el text de la llista es respira més. */

/* ELS TOKENS ES REDEFINEIXEN A `.se7i-escena`, NO A `.se7i`.
   Un element no pot ser el seu propi contenidor de consulta: el contenidor
   es tria entre els ANCESTRES, i qui declara `container-name: se7i` és
   `.se7i`. Una regla `.se7i { … }` aquí dins no s'aplica mai —el punt no es
   feia mai gros a mòbil— i la contraprova era que el `@supports not` de sota
   sí que funcionava: els navegadors vells rebien la mida bona i els moderns
   no. `.se7i-escena` és descendent, i tot el que gasta aquests tokens hi és a
   dins. */

@container se7i (max-width: 479px) {

	.se7i-escena {
		--se7i-punt: 30px;
		--se7i-toc: 48px;
		--se7i-espai: .9rem;
	}

	.se7i-part__titol {
		font-size: .8em;
	}

	/* A mòbil, sense el punt del detall: la ratlla i el marcador i prou.
	   En una columna estreta el detall i el «+» queden a quatre dits i el
	   punt no hi aporta res. I a Safari (WebKit) sortia com un oval estirat:
	   no respecta el `non-scaling-stroke` al cap rodó d'una línia de
	   llargada zero, i el dibuixa en unitats del viewBox, que van estirades
	   amb la proporció de la imatge (en Romaní: 2,6 vegades més alt). */
	.se7i-ancora {
		display: none;
	}
}

/* ── El quadre, al costat del dibuix ───────────────────────────────────
   Amb «al costat», el dibuix es fa una mica més estret per deixar un CANAL
   al seu costat, i el quadre hi va: així no tapa mai el dibuix. Només a
   partir d'una columna prou ampla; per sota, el dibuix es quedaria en un
   fideu i val més que el quadre s'hi posi a sobre —el motor ho sap i hi
   torna sol—. */

@container se7i (min-width: 520px) {

	/*
	 * NOMÉS QUAN NO S'HA TRIAT L'ALÇADA es reclou el dibuix per fer canal.
	 *
	 * Amb l'alçada triada mana l'alçada i el canal és el que sobri: si es
	 * reclogués igualment, tocar l'alçada no faria res —el límit se la
	 * menjava— i, pitjor, canviar l'amplada del QUADRE canviava la mida del
	 * DIBUIX. Una cosa que es demana explícitament no pot dependre d'una
	 * altra que es demana per un altre motiu.
	 */
	.se7i.es-motor.es-targetes.se7i--quadre-fora:not(.se7i--alt) .se7i-figura {
		max-width: calc(100% - var(--se7i-marc-ample) - var(--se7i-espai) * 1.5);
	}
}

@container se7i (min-width: 900px) {

	.se7i-escena {
		--se7i-espai: 1.15rem;
		--se7i-marc-ample: 360px;
	}
}

/* Els navegadors que no entenen les consultes de contenidor es queden amb la
   finestra, que és una aproximació prou bona: la fitxa sol anar a mitja
   columna. */
@supports not (container-type: inline-size) {

	@media (max-width: 782px) {

		.se7i {
			--se7i-punt: 30px;
			--se7i-toc: 48px;
			--se7i-espai: .9rem;
		}

		.se7i-ancora {
			display: none;
		}
	}
}

/* ── Qui no vol moviment, no en té ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

	.se7i.es-motor.es-entrada .se7i-imatge,
	.se7i.es-motor.es-entrada .se7i-punt__signe,
	.se7i.es-motor.es-entrada .se7i-punt__nom,
	.se7i.es-motor.es-entrada .se7i-fil,
	.se7i.es-motor.es-entrada .se7i-ancora {
		opacity: 1;
		transform: none;
		transition: none;
		clip-path: none;
		stroke-dashoffset: 0;
	}

	/* Ni onada, ni targeta que entra: apareixen i prou. */
	.se7i .se7i-punt::after,
	.se7i .se7i-part,
	.se7i .se7i-part.es-obert,
	.se7i .se7i-part.es-obert .se7i-part__cos {
		animation: none;
	}

	.se7i.es-motor.es-entrada .se7i-punt__nom {
		opacity: 0;
		transform: translate(-50%, calc(-50% - var(--se7i-toc)));
	}

	.se7i.es-motor.es-entrada .se7i-punt:hover .se7i-punt__nom,
	.se7i.es-motor.es-entrada .se7i-punt:focus-visible .se7i-punt__nom {
		opacity: 1;
	}

	.se7i.es-motor.es-entrada .se7i-fil {
		opacity: var(--se7i-fil-vel);
	}
}

/* Dins de l'editor visual, tot quiet i tot obert: la peça s'ha de poder
   col·locar (norma §7). */
.se7i--quiet .se7i-part__cos {
	display: block;
}