/**
 * EDUCA FIDYS · Órbita
 *
 * Componente compartido: esfera central con isotipo y líneas de texto, y
 * píldoras con icono repartidas en círculo a su alrededor. Lo usa la
 * disposición "órbita" del bloque Quiénes somos (Nuestra definición de la
 * Alianza FIDYS). Se registra como handle "educa-fidys-orbita" y solo se
 * carga en las páginas cuyos bloques lo declaran en su block.json.
 *
 * Depende de educa-fidys-base.css (tokens).
 * Versión: 1.0.0
 *
 * 1.0.0 - Versión inicial.
 */

/* -------------------------------------------------------------------------
   1. Contenedor
   ---------------------------------------------------------------------- */

/* El contenedor ocupa su columna; la esfera va centrada y el relleno
   vertical deja sitio a las píldoras de arriba y de abajo. Las órbitas
   decorativas se dibujan en los pseudoelementos del contenedor. */
.fidys-orbita {
	position: relative;
	display: grid;
	place-items: center;
	padding-block: 70px;
	--fidys-orbita-esfera: min(250px, 19vw);
	--fidys-orbita-radio: calc(var(--fidys-orbita-esfera) / 2 + 52px);
}

.fidys-orbita::before,
.fidys-orbita::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

/* Órbita sobre la que se apoyan las píldoras. */
.fidys-orbita::before {
	width: calc(var(--fidys-orbita-radio) * 2);
	height: calc(var(--fidys-orbita-radio) * 2);
	border: 1px solid var(--fidys-color-line-soft);
}

.fidys-orbita::after {
	width: calc(var(--fidys-orbita-esfera) + 36px);
	height: calc(var(--fidys-orbita-esfera) + 36px);
	border: 1px dashed rgba(71, 121, 158, 0.3);
}

/* -------------------------------------------------------------------------
   2. Esfera
   ---------------------------------------------------------------------- */

/* Mismo degradado que el sello "esfera" de la portada. */
.fidys-orbita__esfera {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--fidys-orbita-esfera);
	aspect-ratio: 1;
	padding: 30px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--fidys-color-white) 0 10%, var(--fidys-color-tint) 40%, #9ab6ca);
	box-shadow: 0 25px 70px rgba(0, 59, 92, 0.14);
	color: var(--fidys-color-primary);
	line-height: 1;
	text-align: center;
}

.fidys-orbita__isotipo {
	display: block;
	width: 62px;
	height: 62px;
	margin-bottom: 16px;
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(0, 59, 92, 0.12);
}

.fidys-orbita__isotipo-svg {
	display: block;
	width: 100%;
	height: 100%;
}

.fidys-orbita__isotipo .educa-isotipo__fondo {
	fill: var(--fidys-color-white);
}

.fidys-orbita__isotipo .educa-isotipo__marca {
	fill: var(--fidys-color-primary);
}

.fidys-orbita__linea {
	display: block;
}

/* Titular: mayúsculas y negrita, como «SANIDAD» en el sello escudo. */
.fidys-orbita__linea--titular {
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Conector: la palabra que une dos titulares («y»), en minúscula. */
.fidys-orbita__linea--conector {
	margin: 6px 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--fidys-color-secondary);
}

.fidys-orbita__linea--sutil {
	margin: 8px 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--fidys-color-secondary);
}

/* -------------------------------------------------------------------------
   3. Píldoras
   ---------------------------------------------------------------------- */

.fidys-orbita__satelites {
	position: absolute;
	z-index: 2;
	inset: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

/* Prevalece sobre el reset de listas de la hoja base. */
[class*="fidys-"] ul.fidys-orbita__satelites {
	margin: 0;
}

/* Cada píldora se coloca en su punto de la órbita con cos() y sin() y se
   ancla hacia fuera, de modo que nunca invade la esfera. El ángulo sale del
   índice y del total, fijados con clases: no hay estilos en línea. */
.fidys-orbita__satelite {
	position: absolute;
	top: calc(50% + sin(var(--fidys-angulo)) * var(--fidys-orbita-radio));
	left: calc(50% + cos(var(--fidys-angulo)) * var(--fidys-orbita-radio));
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border-radius: 30px;
	background: var(--fidys-color-white);
	box-shadow: var(--fidys-shadow-soft);
	color: var(--fidys-color-primary);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	--fidys-angulo: calc(-90deg + var(--fidys-indice, 0) * 360deg / var(--fidys-total, 5));
	transform: translate(
		calc(-50% + 50% * cos(var(--fidys-angulo))),
		calc(-50% + 50% * sin(var(--fidys-angulo)))
	);
}

.fidys-orbita__satelite-icono {
	display: block;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	color: var(--fidys-color-accent);
}

/* Centrado óptico del icono con las mayúsculas del texto. */
.fidys-orbita__satelite-texto {
	display: block;
	line-height: 1;
	text-box: trim-both cap alphabetic;
}

@supports not (text-box: trim-both cap alphabetic) {

	.fidys-orbita__satelite-icono {
		transform: translateY(-1px);
	}
}

.fidys-orbita__satelites--1 { --fidys-total: 1; }
.fidys-orbita__satelites--2 { --fidys-total: 2; }
.fidys-orbita__satelites--3 { --fidys-total: 3; }
.fidys-orbita__satelites--4 { --fidys-total: 4; }
.fidys-orbita__satelites--5 { --fidys-total: 5; }
.fidys-orbita__satelites--6 { --fidys-total: 6; }
.fidys-orbita__satelites--7 { --fidys-total: 7; }
.fidys-orbita__satelites--8 { --fidys-total: 8; }

.fidys-orbita__satelite:nth-child(2) { --fidys-indice: 1; }
.fidys-orbita__satelite:nth-child(3) { --fidys-indice: 2; }
.fidys-orbita__satelite:nth-child(4) { --fidys-indice: 3; }
.fidys-orbita__satelite:nth-child(5) { --fidys-indice: 4; }
.fidys-orbita__satelite:nth-child(6) { --fidys-indice: 5; }
.fidys-orbita__satelite:nth-child(7) { --fidys-indice: 6; }
.fidys-orbita__satelite:nth-child(8) { --fidys-indice: 7; }

/* -------------------------------------------------------------------------
   4. Responsive
   ---------------------------------------------------------------------- */

/* Sin hueco suficiente a los lados, las píldoras pasan a una tira centrada
   bajo la esfera y las órbitas decorativas se retiran. Mismo corte que los
   satélites de la portada. */
@media (max-width: 1320px) {

	.fidys-orbita {
		gap: 26px;
		padding-block: 0;
		--fidys-orbita-esfera: 250px;
	}

	.fidys-orbita::before,
	.fidys-orbita::after {
		display: none;
	}

	.fidys-orbita__satelites {
		position: static;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		max-width: 560px;
	}

	.fidys-orbita__satelite {
		position: static;
		transform: none;
	}
}

@media (max-width: 650px) {

	.fidys-orbita {
		--fidys-orbita-esfera: 230px;
	}

	.fidys-orbita__satelite {
		padding: 8px 13px;
		font-size: 12px;
	}
}