/**
 * Training Hero — the full-bleed dark hero at the top of the Training Index.
 *
 * Self-contained by design: the container sizing, the buttons and the vector
 * treatment are all defined here rather than borrowed from the container,
 * button or solution-hero components, so this hero can be changed without
 * touching anything else (and vice versa). The only shared thing it renders is
 * the site-wide breadcrumb, styled below purely for contrast on dark.
 *
 * Measurements come from the Figma Training frame at 1920px wide: 1132px tall
 * overall, of which the copy area is ~848px and the options band ~284px.
 */

.training-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: #000000;
	color: #ffffff;
	overflow: clip;
	min-height: min(calc(100vw / 1.696), 90svh);
	isolation: isolate;
}

/* ─── Background treatment ──────────────────────────────────────────────── */

/* Dot grid, sitting under the photo. */
.training-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgb(255 255 255 / 0.16) 1px, transparent 1px);
	background-repeat: repeat;
	background-position: left top;
	background-size: 14px 14px;
	pointer-events: none;
	z-index: 1;
}

.training-hero__gradient {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

/* Darkens the top so the site nav stays legible over the photo. */
.training-hero__gradient--base {
	height: min(13rem, 50%);
	background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.72) 38%, rgba(0, 0, 0, 0.00) 100%);
}

/* Darkens the left so the headline and copy stay legible over the photo. */
.training-hero__gradient--left-fade {
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	background: linear-gradient(130deg, #000 -18.88%, rgba(0, 0, 0, 0.00) 50.72%);
}

/* Stands in for the vector when no hero image is uploaded. */
.training-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgb(0 0 0 / 0.5);
	pointer-events: none;
}

.training-hero__svg {
	inset: 0 0 0 -11rem;
	height: auto;
	margin-top: 0;
	mask-image: linear-gradient(black 75%, transparent);
	pointer-events: none;
	position: absolute;
	width: 58.875rem;
	z-index: 2;
}

.training-hero__content,
.training-hero__options-inner {
	position: relative;
	z-index: 4;
	width: 100%;
	max-width: 100rem;
	margin-inline: auto;
	padding-inline: var(--content-gutter, 1.25rem);
}

.training-hero__content {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	padding-block: 5rem 2.25rem;
}

.training-hero__breadcrumb {
	color: rgba(255, 255, 255, 0.75);
}

.training-hero__breadcrumb .breadcrumb__link:hover,
.training-hero__breadcrumb .breadcrumb__link:focus-visible {
	color: #fff;
	text-decoration: underline;
}

/* Copy on the left, stats on the right, optically centred against each other. */
.training-hero__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 3rem;
	flex: 1 0 auto;
}

.training-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 48rem;
	margin: 16rem 0 0 0;
}

.training-hero__heading {
	color: #fff;
	font-family: "PP Telegraf", var(--font-family-heading, sans-serif);
	font-size: clamp(2.25rem, 5.5vw, 4rem);
	font-weight: 600;
	line-height: 1em;
	margin: 0;
	max-width: 26rem;
	text-wrap: balance;
}

.training-hero__supporting-copy {
	color: rgba(255, 255, 255, 0.75);
	font-family: Outfit, var(--font-family-sans, sans-serif);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4em;
	margin: 0.3rem 0 0;
	max-width: 21.3125em;
}

/* ─── Actions ───────────────────────────────────────────────────────────── */

.training-hero__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin-top: 1.5rem;
}

/* Filled pill. Text only — no trailing arrow — so its padding is symmetric. */
.training-hero__cta {
	align-items: center;
	background: var(--color-primary-dark);
	border-radius: 9999px;
	color: #fff;
	display: inline-flex;
	font-family: Outfit, var(--font-family-sans, sans-serif);
	font-size: 1rem;
	font-weight: 500;
	height: 2.75rem;
	justify-content: center;
	overflow: hidden;
	padding-inline: 2.25rem;
	position: relative;
	text-decoration: none;
	transition: .25s;
	white-space: nowrap;
}

.training-hero__cta::before {
	background: linear-gradient(to right,  rgba(15,158,213,1) 0%,rgba(15,158,213,0) 100%);
	content: "";
	display: block;
	inset: 0;
	position: absolute;
	transition: .25s;
}

.training-hero__cta:hover::before {
	opacity: 0;
}

.training-hero__cta:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.training-hero__cta span {
	position: relative;
	z-index: 1;
}

/* Text link with a circular arrow badge, sitting flush with the headline. */
.training-hero__link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: #fff;
	font-family: Outfit, var(--font-family-sans, sans-serif);
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.training-hero__link::after {
	background: var(--color-primary) url('data:image/svg+xml,<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.32759 3.05778L6.13706 0.862947C6.03803 0.763725 5.98918 0.647669 5.99051 0.51478C5.99173 0.381891 6.04058 0.263724 6.13706 0.16028C6.24019 0.0569464 6.35873 0.00355784 6.49269 0.000113179C6.62665 -0.003331 6.7452 0.0466692 6.84833 0.150114L9.82848 3.13595C9.94869 3.2565 10.0088 3.39711 10.0088 3.55778C10.0088 3.71845 9.94869 3.85906 9.82848 3.97961L6.84833 6.96545C6.74941 7.06456 6.63192 7.1135 6.49585 7.11228C6.35979 7.11095 6.24019 7.05861 6.13706 6.95528C6.04058 6.85184 5.99068 6.73473 5.98735 6.60395C5.98391 6.47317 6.03382 6.35606 6.13706 6.25261L8.32759 4.05778L0.499293 4.05778C0.357682 4.05778 0.239137 4.00989 0.143658 3.91411C0.0480674 3.81845 0.000272095 3.69967 0.000272107 3.55778C0.00027212 3.41589 0.0480674 3.29711 0.143658 3.20145C0.239137 3.10567 0.357682 3.05778 0.499293 3.05778L8.32759 3.05778Z" fill="white"/></svg>') no-repeat center;
	background-size: .625em auto;
	border-radius: 5rem;
	content: "";
	display: inline-block;
	flex-shrink: 0;
	height: 1.375rem;
	transition: transform 150ms ease;
	width: 1.875rem;
}

.training-hero__link:hover::after {
	transform: translateX(.25em);
}

.training-hero__link:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 4px;
}

/* ─── Stats ─────────────────────────────────────────────────────────────── */

/* Short lime rule heading each stat and the options label. */
.training-hero__tick {
	display: block;
	width: 1.25rem;
	height: 2px;
	background: var(--color-accent, #DFFF00);
}

/* Mobile default: side by side, overflowing into a swipeable carousel
   rather than wrapping onto a third row of stacked stats. Tablet and up
   restore the stacked grid (see breakpoints below). */
.training-hero__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
	margin-left: -1.25rem;
	left: 50%;
	width: calc(100% + 2.5rem);
}

.training-hero__stats::-webkit-scrollbar {
	display: none;
}

.training-hero__stats.is-dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
	user-select: none;
}

.training-hero__stat {
	flex: 0 0 17rem;
	padding: 0 1.5rem;
	scroll-snap-align: start;
	text-shadow: 0 0 .25rem #000;
}

.training-hero__stats-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.training-hero__stats-dots[hidden] {
	display: none;
}

.training-hero__stats-dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: width 0.25s ease, background-color 0.25s ease;
}

.training-hero__stats-dot.is-active {
	width: 1.5rem;
	background: #fff;
}

.training-hero__stats-dot:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.training-hero__stat .training-hero__tick {
	margin-bottom: 0.75rem;
}

.training-hero__stat-heading {
	color: #fff;
	font-family: "PP Telegraf", var(--font-family-heading, sans-serif);
	font-size: 1.3125rem;
	font-weight: 600;
	line-height: 1.1428em;
	margin: 0;
	max-width: 13.8em;
}

.training-hero__stat-description {
	color: rgba(255, 255, 255, 0.75);
	font-family: Outfit, var(--font-family-sans, sans-serif);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.625em;
	margin: 0.5rem 0 0;
	max-width: 16em;
}

/* ─── Training Options band ─────────────────────────────────────────────── */

.training-hero__options {
	position: relative;
	z-index: 4;
	width: 100%;
	flex: 0 0 auto;
}

.training-hero__options-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.training-hero__options-label,
.training-hero__option {
	padding-block: 1.375rem;
}

.training-hero__options-label .training-hero__tick {
	margin-bottom: 1.5rem;
}

.training-hero__options-eyebrow,
.training-hero__options-title {
	color: #fff;
	font-family: "PP Telegraf", var(--font-family-heading, sans-serif);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.167em;
	margin: 0;
}

.training-hero__options-eyebrow {
	color: #9D9D9D;
}

.training-hero__options-title {
	font-weight: 600;
}

.training-hero__option {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.training-hero__option-icon {
	color: rgba(255, 255, 255, 0.7);
	display: inline-block;
	height: 1.875rem;
	margin: 0 0 1rem;
	position: relative;
	vertical-align: top;
	width: 1.875rem;
}

.training-hero__option-title {
	color: #fff;
	font-family: "PP Telegraf", var(--font-family-heading, sans-serif);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2em;
	margin: 0;
	padding-inline-end: 2.5rem;
}

.training-hero__option-description {
	color: #A3A3A3;
	font-family: Outfit, var(--font-family-sans, sans-serif);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.625em;
	margin: 0;
	max-width: 30em;
}

/* ─── Breakpoints ───────────────────────────────────────────────────────── */

@media (min-width: 640px) {
	.training-hero__heading {
		font-size: clamp(2.625rem, 5.5vw, 4rem);
	}
}

@media (min-width: 768px) {
	.training-hero__content,
	.training-hero__options-inner {
		padding-inline: var(--content-gutter-md, 2rem);
	}

	.training-hero__svg {
		top: 0;
		left: -1.3%;
		inset: auto;
		width: 115.6%;
		height: auto;
		margin-top: -4%;
	}

	.training-hero__content {
		padding-block: 5.25rem 3rem;
	}

	.training-hero__body {
		gap: 5rem;
	}

	.training-hero__copy {
		margin: 8rem 0 0 0;
	}

	.training-hero__supporting-copy {
		margin-top: 1rem;
		max-width: 28rem;
	}

	.training-hero__actions {
		gap: 2.5rem;
	}

	.training-hero__options-label,
	.training-hero__option {
		padding-block: 2.5rem;
	}

	.training-hero__option {
		border-top: 0;
	}

	.training-hero__option-icon {
		margin: 0;
		position: absolute;
		right: 2rem;
		top: 2.25rem;
	}

	.training-hero__option-title {
		font-size: 1.5rem;
		margin: 0 0 .5em;
	}

	/* Two columns: [label | option 1] / [option 2 | option 3]. */
	.training-hero__options-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.training-hero__option {
		padding-inline-end: 2rem;
	}

	.training-hero__option:nth-child(n + 3) {
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}

	.training-hero__option:nth-child(even) {
		border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
		padding-inline-start: 2rem;
	}
}

@media (min-width: 1024px) {
	.training-hero__content,
	.training-hero__options-inner {
		padding-inline: var(--content-gutter-lg, 3rem);
	}

	.training-hero__content {
		padding-block: 6.5rem 4rem;
	}

	.training-hero::after {
		background: rgb(0 0 0 / .65);
		backdrop-filter: blur(2rem);
		content: '';
		height: 100%;
		mask-image: linear-gradient(to right, transparent 0%, black 100%);
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 0;
		width: 55%;
		z-index: 2;
	}

	.training-hero__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 22.5rem);
		z-index: 1;
	}

	.training-hero__svg {
		width: 105%;
	}

	.training-hero__copy {
		margin: 10rem 0 0 0;
	}

	/* Restore the stacked grid now that both stats fit comfortably. */
	.training-hero__stats {
		cursor: auto;
		display: grid;
		gap: 3.25rem;
		margin: 4rem 0 0 0;
		overflow-x: visible;
		scroll-snap-type: none;
		width: auto;
	}

	.training-hero__stat {
		flex: initial;
		min-width: 0;
	}

	.training-hero__stats-dots {
		display: none;
	}

	/* Restore the stacked grid now that the stats sit in their own column. */
	.training-hero__stats {
		display: grid;
		gap: 3.25rem;
		overflow-x: visible;
		scroll-snap-type: none;
		cursor: auto;
	}

	.training-hero__stat {
		flex: initial;
		min-width: 0;
	}

	.training-hero__stats-dots {
		display: none;
	}

	/* Copy sits high and the actions sit low, the pair optically centred
	   against the stats column. */
	.training-hero__actions {
		margin-top: clamp(2.5rem, 9vw, 9rem);
		gap: 2rem;
	}

	/* Narrow label column, then one column per delivery format. */
	.training-hero__options-grid {
		grid-template-columns: 0.72fr repeat(3, minmax(0, 1fr));
	}

	.training-hero__options-label {
		padding-inline-end: 2rem;
	}

	.training-hero__option {
		border-top: 0;
		border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
		padding-inline: 2.75rem 2rem;
	}

	.training-hero__option:nth-child(n + 3) {
		border-top: 0;
	}

	.training-hero__option:nth-child(even) {
		padding-inline-start: 2.75rem;
	}

	.training-hero__option-icon {
		right: 2rem;
	}

	.training-hero__option-title {
		font-size: 1.75rem;
		margin: 0 0 .25em;
	}
}

@media (min-width: 1280px) {
	.training-hero__option-title {
		font-size: 2rem;
	}
}