@layer components {
	.training-tabs {
		h3 {
			@apply text-center md:text-xl;
		}
		.section-container {
			@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 min-h-[360px];
		}
	}

	/*
	 * Cloak tabs / side-tabs until their JS behavior has organized the DOM and
	 * hidden inactive panels. Without this, triggers (titles) can paint for a
	 * frame before the behavior runs — most visibly for side-tabs nested inside
	 * another tabs component.
	 *
	 * `visibility: hidden` is used (not `display: none`) so panel height
	 * measurement still works, and because it inherits: active panels only
	 * remove the `invisible` utility, so they inherit the cloak instead of
	 * overriding it. Each component uncloaks on its own timeline, so nesting is
	 * handled correctly.
	 */
	[data-aim-tabs]:not([data-tabs-initialized]),
	[data-aim-side-tabs]:not([data-side-tabs-initialized]) {
		visibility: hidden;
	}

}