/* Approved screens 3.0 and 3.2. Written guidelines and shared tokens take
 * precedence over the mockups' older sizes, shadows and low-contrast colours. */
.training-hero { position: relative; overflow: hidden; }
.training-hero .hero__inner { position: relative; padding-block: var(--hero-y); }
.training-hero .hero__intro { margin-bottom: 0; }
.training-hero .hero__intro > :last-child { margin-bottom: 0; }
.training-hero .hero__actions { margin-top: var(--space-6); }
.training-hero::before, .training-hero::after {
	content: ""; position: absolute; pointer-events: none;
	mask-repeat: no-repeat; mask-size: contain;
}
.training-hero::before {
	top: calc(-1 * var(--space-7)); right: calc(-1 * var(--space-6));
	width: calc(var(--space-9) * 2 + var(--space-6)); aspect-ratio: 143 / 153;
	background: var(--text-accent-on-dark); opacity: 0.5; mask-image: url('../images/shape-periwinkle.svg');
}
.training-hero::after {
	bottom: calc(-1 * var(--space-5)); left: calc(-1 * var(--space-5));
	width: calc(var(--space-9) + var(--space-4)); aspect-ratio: 1;
	background: var(--surface-page); opacity: 0.85; mask-image: url('../images/shape-red.svg'); transform: rotate(180deg);
}
.training-overview .training-modules { padding-block: var(--section-y); }
.training-modules h2 { margin-bottom: var(--space-6); }
.training-modules__intro { margin-bottom: var(--space-7); }
.training-modules__intro p { display: inline; font-size: var(--text-lead); }
.training-overview .module-grid { grid-template-columns: minmax(0, 1fr); }
.training-overview .module-card {
	flex-direction: row; align-items: flex-start; gap: var(--space-6);
	padding: var(--space-7); border-radius: var(--radius-lg);
}
.module-card__body { flex: 1; min-width: 0; }
.training-overview .module-card__title { margin-block: var(--space-3) var(--space-4); font-size: var(--text-h3); }
.module-card__title a { display: inline-flex; align-items: center; min-height: var(--target-size); text-decoration: none; }
.module-card__title a:hover { text-decoration: underline; text-underline-offset: var(--space-1); }
.training-overview .module-card__description {
	max-width: var(--container-text); margin-bottom: var(--space-6);
	font: var(--fw-regular) var(--text-base)/var(--lh-relaxed) var(--font-serif);
}
.training-coming-soon {
	display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-5);
	padding: var(--space-6) var(--space-7); background: var(--surface-accent-soft); border-radius: var(--radius-lg);
}
.training-coming-soon > div { min-width: 0; }
.training-coming-soon p { margin-bottom: var(--space-1); }
.training-coming-soon p:first-child { font-family: var(--font-ui); color: var(--text-strong); }
.training-coming-soon p:last-child { margin-bottom: 0; }

.module-page .module-hero h1 span { display: block; color: var(--text-highlight); }
.module-page .module-status { background: transparent; border: 0; }
.module-page .module-status__inner {
	position: relative; margin-top: calc(-1 * var(--space-6)); padding: var(--space-6);
	gap: var(--space-5); background: var(--surface-card); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}
.module-page .module-status__item { border: 0; padding: 0; }
.module-page .module-status__item .eyebrow { color: var(--text-muted); margin-bottom: var(--space-2); }
.module-page .module-status__value { font-weight: var(--fw-bold); }
.module-page .module-overview { padding-block: var(--section-y); }
.module-page .module-overview__grid {
	grid-template-columns: calc(var(--space-9) * 2 + var(--space-6)) minmax(0, 1fr); gap: var(--space-7);
}
.module-page .module-sidebar .eyebrow { color: var(--text-muted); }
.module-page .module-sidebar__list { gap: 0; }
.module-page .module-sidebar__list li {
	gap: var(--space-3); padding-block: var(--space-4); font-size: var(--text-sm); font-weight: var(--fw-regular); color: var(--text-muted);
}
.module-sidebar__list li + li { border-top: 1px solid var(--border-subtle); }
.module-content { min-width: 0; }
.module-content h2 { margin-bottom: var(--space-4); }
.module-content h2:not(:first-child) { margin-top: var(--space-6); }
.module-page .module-content__intro { font-family: var(--font-ui); }
.module-content p:last-child { margin-bottom: 0; }
.module-content li + li { margin-top: var(--space-1); }
.module-page .module-curriculum { padding-block: 0 var(--section-y); }
.module-curriculum__inner { max-width: var(--container-text); margin-inline: auto; }
.module-curriculum__header { margin-bottom: var(--space-5); gap: var(--space-4); }
.module-curriculum__header h2 { margin: 0; }
.module-toolkit {
	display: flex; flex-direction: column; gap: var(--space-4);
	padding: var(--space-4) var(--space-5); border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md); background: var(--surface-card);
}
.module-toolkit__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.module-toolkit__heading { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.module-toolkit__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.module-toolkit__number { flex: 0 0 auto; font-size: var(--text-h3); font-weight: var(--fw-bold); color: var(--text-accent); }
.module-toolkit__title {
	min-width: 0; margin: 0; font: var(--fw-semibold) var(--text-base)/var(--lh-normal) var(--font-ui);
	color: var(--text-strong);
}

.training-overview .training-disclaimer, .module-page .training-disclaimer { padding-block: var(--section-y); background: var(--surface-band); }
.training-overview .training-disclaimer > .container, .module-page .training-disclaimer > .container { max-width: var(--container); }
.training-disclaimer h2 { margin-bottom: var(--space-4); }
.training-disclaimer p { max-width: var(--container-text); line-height: var(--lh-relaxed); }
.training-meta__inner { padding-block: var(--space-6); gap: var(--space-4); }

@media (max-width: 993px) {
	.training-hero .hero__inner { padding-block: var(--space-7); }
	.training-overview .training-modules, .module-page .module-overview,
	.training-overview .training-disclaimer, .module-page .training-disclaimer { padding-block: var(--space-7); }
	.module-page .module-curriculum { padding-bottom: var(--space-7); }
	.training-overview .module-card { padding: var(--space-6); }
	.training-coming-soon { padding: var(--space-6); }
}
@media (max-width: 900px) {
	.module-page .module-overview__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
	.module-page .module-sidebar__list { display: flex; flex-wrap: wrap; gap: var(--space-5); }
	.module-sidebar__list li + li { border-top: 0; }
	.module-page .module-status__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.module-status__item:last-child { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
	.training-hero::before { width: var(--space-9); }
	.training-overview .module-card { flex-direction: column; gap: var(--space-5); padding: var(--space-5); }
	.training-coming-soon { align-items: flex-start; flex-direction: column; padding: var(--space-5); }
	.module-page .module-status__inner { padding: var(--space-5); }
	.module-toolkit { gap: var(--space-3); padding: var(--space-4); }
	.module-toolkit__heading { gap: var(--space-3); }
}
@media (max-width: 480px) {
	.module-page .module-status__inner { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}