/**
 * CHGA Framework block.
 *
 * Seven linked cards, each with a numbered badge sitting half over its top edge.
 * Above 1200px they share one row; below that the row becomes a snapping slider
 * rather than wrapping, the same way the Trusted By stats do.
 */

.chga-framework {
	/*
	 * Wider than the site default: seven cards in a row need the room, and the
	 * design gives this section about 1560px of content.
	 */
	--chga-container: 1560px;
	--chga-fw-card: var(--chga-white);
	--chga-fw-bg-opacity: 0.45;
	--chga-fw-count: 7;
	--chga-fw-gap: clamp(0.5rem, 0.2rem + 0.9vw, 1.25rem);
	--chga-fw-card-gap: clamp(0.5rem, 0.35rem + 0.5vw, 0.9375rem);
	/* Half the card width, the way the design draws it. */
	--chga-fw-icon: clamp(3.5rem, 5.5vw, 6.5rem);
	--chga-fw-border: var(--chga-gold-mid);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(2.75rem, 1.2rem + 4vw, 5.5rem);
	color: var(--chga-navy);
	background-color: var(--chga-white);
}

/* Background ------------------------------------------------------------- */

.chga-framework__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: var(--chga-fw-bg-opacity);
	pointer-events: none;
}

.chga-framework__bg-image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.chga-framework__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 1rem + 3vw, 4.25rem);
	width: 100%;
	max-width: var(--chga-container);
	margin-inline: auto;
}

/* Intro ------------------------------------------------------------------ */

.chga-framework__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.75rem, 0.55rem + 0.7vw, 1.375rem);
	padding-inline: var(--chga-gutter);
	text-align: center;
}

.chga-framework__heading {
	margin: 0;
	font-size: clamp(1.625rem, 2.6vw, 3.125rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--chga-gold-mid);
}

.chga-framework__rule {
	display: block;
	width: clamp(3.25rem, 4.5vw, 5.375rem);
	height: 2px;
	background-color: var(--chga-navy);
	transform-origin: center;
}

.chga-framework__intro {
	max-width: 56rem;
	margin: 0;
	font-size: clamp(0.9375rem, 0.85rem + 0.55vw, 1.375rem);
	line-height: 1.45;
	color: var(--chga-navy);
	text-wrap: pretty;
}

.chga-framework__intro-lead {
	font-weight: 700;
}

/* Stages ----------------------------------------------------------------- */

.chga-framework__stages {
	display: grid;
	grid-template-columns: repeat(var(--chga-fw-count), minmax(0, 1fr));
	gap: var(--chga-fw-gap);
	width: 100%;
	margin: 0;
	padding-inline: var(--chga-gutter);
	list-style: none;
	counter-reset: none;
}

.chga-framework__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	/*
	 * Grid and flex items default to min-width: auto, so a long stage name would
	 * hold the card wider than its column and push it over its neighbours.
	 */
	min-width: 0;
}

.chga-framework__icon-wrap {
	position: relative;
	z-index: 2;
	display: block;
	width: var(--chga-fw-icon);
	margin-bottom: calc(var(--chga-fw-icon) / -2);
	line-height: 0;
}

.chga-framework__icon {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * The bundled badges are SVGs carried in without width/height attributes, so
	 * until they load the row is zero tall and everything below it moves. See the
	 * same note on the Services icon.
	 */
	aspect-ratio: auto 1 / 1;
	transition: opacity 0.45s var(--chga-ease);
}

/*
 * The gold badge is a hover state, crossfaded over the navy one. Both are drawn
 * artwork rather than a recolour, because the number swaps from dark-on-gold to
 * white-on-navy at the same time.
 */
.chga-framework__icon--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.chga-framework__stage:hover .chga-framework__icon--hover,
.chga-framework__stage:focus-within .chga-framework__icon--hover,
.chga-framework__stage.is-active .chga-framework__icon--hover {
	opacity: 1;
}

.chga-framework__stage:hover .chga-framework__icon:not(.chga-framework__icon--hover),
.chga-framework__stage:focus-within .chga-framework__icon:not(.chga-framework__icon--hover),
.chga-framework__stage.is-active .chga-framework__icon:not(.chga-framework__icon--hover) {
	opacity: 0;
}

.chga-framework__card {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: var(--chga-fw-card-gap);
	width: 100%;
	min-width: 0;
	padding:
		calc(var(--chga-fw-icon) / 2 + clamp(0.75rem, 0.4rem + 1vw, 1.5rem))
		clamp(0.5rem, 0.3rem + 0.6vw, 0.875rem)
		clamp(1rem, 0.6rem + 1.2vw, 1.875rem);
	background-color: var(--chga-fw-card);
	border: 1px solid var(--chga-fw-border);
	border-radius: clamp(0.5rem, 0.35rem + 0.5vw, 0.875rem);
	text-align: center;
	transition:
		border-color 0.45s var(--chga-ease),
		box-shadow 0.45s var(--chga-ease),
		transform 0.45s var(--chga-ease);
}

/* The design's opening card is this state: navy outline, gold badge. */
.chga-framework__stage:hover .chga-framework__card,
.chga-framework__stage:focus-within .chga-framework__card,
.chga-framework__stage.is-active .chga-framework__card {
	border-color: var(--chga-navy);
	box-shadow: 0 22px 40px -30px rgba(0, 31, 83, 0.7);
	transform: translateY(-4px);
}

/*
 * The short line linking one card to the next. It spans the gap, so it is sized
 * from the same variable the grid uses.
 */
.chga-framework--linked .chga-framework__stage + .chga-framework__stage .chga-framework__card::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	width: var(--chga-fw-gap);
	height: 1px;
	background-color: var(--chga-gold-mid);
}

/* The design outlines the opening stage in navy rather than gold. */
.chga-framework--lead .chga-framework__stage:first-child {
	--chga-fw-border: var(--chga-navy);
}

.chga-framework__stage-title {
	margin: 0;
	/*
	 * Tracks the card width closely. The cards get narrow between 1200px and the
	 * point the container stops growing, and a slower ramp left "UNFORGETTABLE"
	 * wider than its card down there.
	 */
	font-size: clamp(0.8125rem, 1.15vw, 1.125rem);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	color: var(--chga-gold-mid);
	text-wrap: balance;
	/*
	 * The title is shrink-to-fit, so without this it grows to its longest word
	 * and spills past the card instead of wrapping. With the width pinned, a word
	 * that still cannot fit breaks rather than overflowing.
	 */
	max-width: 100%;
	overflow-wrap: break-word;
	transition: color 0.45s var(--chga-ease);
}

/*
 * The design's opening card is the hovered state, and it inverts the whole card:
 * the name goes navy, the rule goes gold, and the outline follows.
 */
.chga-framework__stage:hover .chga-framework__stage-title,
.chga-framework__stage:focus-within .chga-framework__stage-title,
.chga-framework__stage.is-active .chga-framework__stage-title {
	color: var(--chga-navy);
}

.chga-framework__stage-rule {
	display: block;
	width: 50%;
	min-width: 2.25rem;
	height: 2px;
	background-color: var(--chga-navy);
	transition: background-color 0.45s var(--chga-ease);
}

.chga-framework__stage:hover .chga-framework__stage-rule,
.chga-framework__stage:focus-within .chga-framework__stage-rule,
.chga-framework__stage.is-active .chga-framework__stage-rule {
	background-color: var(--chga-gold-mid);
}

.chga-framework__stage-text {
	margin: 0;
	font-size: clamp(0.75rem, 0.66rem + 0.36vw, 1rem);
	line-height: 1.4;
	color: var(--chga-navy);
	text-wrap: pretty;
}

/* Shared rows ------------------------------------------------------------ */

/*
 * Stage names run to one, two or three lines, which left each card's gold rule
 * at a different height. Subgrid hands the title, rule and description rows up
 * to the outer grid, so all seven cards measure them together and the rules line
 * up whatever the client types. The row gaps are replaced by a margin on the
 * rule, because a subgrid takes its gutters from the parent, not from itself.
 */
/*
 * The badge is 55% of its card in the design, which a viewport-based clamp
 * cannot follow once the container stops growing. Percentage margin and padding
 * both resolve against the containing block's width - the stage - so the badge,
 * the overlap it needs and the card's top padding all stay locked together.
 */
@media (min-width: 75.0625rem) {
	.chga-framework__icon-wrap {
		width: 55%;
		margin-bottom: -27.5%;
	}

	.chga-framework__card {
		padding-top: calc(27.5% + clamp(0.75rem, 0.4rem + 1vw, 1.5rem));
	}
}

@supports (grid-template-rows: subgrid) {
	@media (min-width: 75.0625rem) {
		.chga-framework__stages {
			/* icon, name, rule, description */
			grid-template-rows: auto auto auto 1fr;
			row-gap: 0;
		}

		.chga-framework__stage {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 4;
			justify-items: center;
		}

		.chga-framework__card {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: 2 / span 3;
			gap: 0;
			justify-items: center;
			/* Shorter descriptions start level too, rather than floating. */
			align-items: start;
		}

		.chga-framework__stage-rule {
			margin-block: var(--chga-fw-card-gap);
		}
	}
}

/* Timeline --------------------------------------------------------------- */

/*
 * The seven stages are a sequence, and a horizontal slider hides six of them at
 * a time. So below 1200px the row becomes a vertical timeline instead: the
 * badges thread onto one gold line that draws itself as the visitor scrolls, and
 * every stage stays on the page in order.
 *
 * The track is hidden above that width, where the cards sit in a row and the
 * short connector lines do the joining.
 */
.chga-framework__track {
	display: none;
}

@media (max-width: 75rem) {
	/*
	 * Half again the size the row uses. On the timeline the badge is the only
	 * marker of a stage - it carries the number, the icon and the position on the
	 * gold line - so it needs more presence than it does sitting on a card.
	 */
	.chga-framework {
		--chga-fw-icon: clamp(5.25rem, 8.25vw, 9.75rem);
	}

	.chga-framework__stages {
		position: relative;
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	}

	.chga-framework__stage {
		display: grid;
		grid-template-columns: var(--chga-fw-icon) minmax(0, 1fr);
		align-items: start;
		gap: clamp(0.875rem, 0.6rem + 1.2vw, 1.75rem);
	}

	.chga-framework__icon-wrap {
		/* Back in the flow: on a timeline the badge sits beside its card. */
		margin-bottom: 0;
	}

	.chga-framework__card {
		align-items: flex-start;
		padding: clamp(0.875rem, 0.6rem + 1.1vw, 1.5rem) clamp(1rem, 0.7rem + 1.2vw, 1.625rem);
		text-align: left;
	}

	.chga-framework__stage-title {
		text-wrap: pretty;
	}

	/* The connectors belong to the horizontal row, not the timeline. */
	.chga-framework--linked .chga-framework__stage + .chga-framework__stage .chga-framework__card::before {
		content: none;
	}

	.chga-framework__track {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		/* Centred under the badges, which is half an icon in from the padding. */
		left: calc(var(--chga-gutter) + var(--chga-fw-icon) / 2 - 1px);
		width: 2px;
		background-color: rgba(0, 31, 83, 0.16);
		z-index: 0;
	}

	/*
	 * Drawn in full by default, and only collapsed while the document is flagged
	 * as JavaScript enabled - the same contract the rest of the plugin uses, so
	 * the editor preview and no-JS visitors see the finished line.
	 */
	.chga-framework__track-fill {
		display: block;
		width: 100%;
		height: 100%;
		background-color: var(--chga-gold-mid);
		transform: scaleY(1);
		transform-origin: top center;
	}

	.chga-js .chga-framework[data-chga-animate="true"] .chga-framework__track-fill {
		transform: scaleY(0);
	}
}

@media (max-width: 30rem) {
	/* The same 1.5x, applied to the phone sizing. */
	.chga-framework {
		--chga-fw-icon: clamp(4.5rem, 21vw, 6rem);
	}

	.chga-framework__stage-title {
		font-size: clamp(0.875rem, 0.8rem + 0.6vw, 1.0625rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.chga-framework__track-fill {
		transform: scaleY(1) !important;
	}
}

/* Editor preview --------------------------------------------------------- */

.chga-framework--preview {
	padding-block: 2.5rem;
}