/*
 * Orbitalia Dynamic Sections — base layout.
 *
 * Structure only: spacing, grids and the step counter. No colours, no fonts, no
 * borders. The theme or the site's brand layer paints it; this file just makes
 * sure the block is readable out of the box on any theme.
 */

.orbitalia-sections {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	width: 100%;
}

.orbitalia-sections__block {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.orbitalia-sections__title {
	margin: 0;
}

.orbitalia-sections__text > :last-child,
.orbitalia-sections__lead > :last-child {
	margin-bottom: 0;
}

/* --- items ------------------------------------------------------------- */

.orbitalia-sections__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0.5rem 0 0;
}

.orbitalia-sections__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.orbitalia-sections__item-title,
.orbitalia-sections__item-text {
	margin: 0;
}

.orbitalia-sections__item-heading {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.orbitalia-sections__item-text > :last-child {
	margin-bottom: 0;
}

/* --- pasos -------------------------------------------------------------
 * El número lo dibuja un contador CSS: así no puede desincronizarse con la
 * lista, y el <ol> sigue aportando el orden a los lectores de pantalla.
 * ---------------------------------------------------------------------- */

.orbitalia-sections__steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: orbitalia-step;
}

.orbitalia-sections__step {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	counter-increment: orbitalia-step;
}

.orbitalia-sections__step::before {
	content: counter(orbitalia-step);
	line-height: 1;
}

.orbitalia-sections__step-title {
	margin: 0;
}

.orbitalia-sections__step-text > :last-child {
	margin-bottom: 0;
}

/* --- cifras ------------------------------------------------------------ */

.orbitalia-sections__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0.5rem 0 0;
}

.orbitalia-sections__stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-align: center;
}

.orbitalia-sections__stat-num,
.orbitalia-sections__stat-label {
	margin: 0;
}

/* --- tabla -------------------------------------------------------------
 * La tabla es el único bloque que no puede refluir en móvil, así que hace
 * scroll dentro de su propia caja en lugar de empujar la página a lo ancho.
 * ---------------------------------------------------------------------- */

.orbitalia-sections__table-wrap {
	width: 100%;
	overflow-x: auto;
	margin-top: 0.5rem;
}

.orbitalia-sections__table {
	width: 100%;
	border-collapse: collapse;
}

.orbitalia-sections__table th,
.orbitalia-sections__table td {
	padding: 0.75rem 0.875rem;
	text-align: left;
	vertical-align: top;
}

/* --- responsive -------------------------------------------------------- */

@media (max-width: 1024px) {
	.orbitalia-sections__items,
	.orbitalia-sections__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.orbitalia-sections__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.orbitalia-sections {
		gap: 2.25rem;
	}

	.orbitalia-sections__items,
	.orbitalia-sections__steps,
	.orbitalia-sections__stats {
		grid-template-columns: minmax(0, 1fr);
	}
}