.grave-formation-layout {
	container-name: formation;
	container-type: inline-size;
}

.wp-block-columns.grave-formation-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: var(--wp--preset--spacing--60);
}

.grave-formation-columns > * {
	min-width: 0;
	margin-block: 0;
}

.grave-formation-content {
	display: flex;
	grid-column: span 2;
	flex-direction: column;
}

.grave-formation-programme .wp-block-heading,
.grave-formation-aside .wp-block-image,
.grave-formation-aside .wp-block-heading,
.grave-formation-aside p {
	margin-block: 0;
}

.wp-block-group.grave-formation-programme > .wp-block-group {
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--sm);
}

.wp-block-group.grave-formation-programme > .wp-block-group:nth-child(odd) {
	background-color: var(--wp--preset--color--primary-highlight);
}

.wp-block-group.grave-formation-programme > .wp-block-group:nth-child(even) {
	background-color: var(--wp--preset--color--surface);
}

.grave-formation-trainer {
	align-items: center;
}

.grave-formation-trainer > * {
	margin-block: 0;
}

.grave-formation-trainer .wp-block-image {
	margin-block: 0;
}

.grave-formation-trainer .wp-block-image img {
	display: block;
	width: 100%;
}

.grave-formation-aside-column {
	align-self: stretch;
	grid-column: span 1;
}

.grave-formation-aside .wp-block-image img {
	display: block;
	width: 100%;
}

.grave-formation-price {
	font-weight: 700;
	line-height: 1;
}

.grave-formation-facts .wp-block-group.is-style-fact {
	align-items: flex-start;
	font-weight: 600;
}

@container formation (max-width: 56rem) {
	.wp-block-columns.grave-formation-columns {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}

	.grave-formation-content,
	.grave-formation-aside-column {
		grid-column: 1;
	}

	.grave-formation-trainer .wp-block-image {
		max-width: var(--wp--preset--spacing--90);
	}
}

@container formation (min-width: 56.001rem) {
	.grave-formation-aside {
		--grave-sticky-top: calc(var(--wp--custom--header--content-inset) + var(--wp--preset--spacing--40) + var(--wp-admin--admin-bar--height, 0px));
		position: sticky;
		top: var(--grave-sticky-top);
		box-sizing: border-box;
		max-height: calc(100dvh - var(--grave-sticky-top) - var(--wp--preset--spacing--40));
		overflow-y: auto;
		scroll-padding-block: var(--wp--preset--spacing--30);
		/* Match both transitions to keep the lower viewport gap while the header moves. */
		transition: top var(--wp--custom--motion--duration--base) var(--wp--custom--motion--easing-in-out);
		transition-property: top, max-height;
	}
}

@media (prefers-reduced-motion: reduce) {
	.grave-formation-aside {
		transition: none;
	}
}

.grave-formation-card {
	container-type: inline-size;
	height: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
}

.grave-formation-card__frame {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"media media"
		"title title"
		"facts facts"
		"spacer spacer"
		"price discover";
	grid-template-rows: auto auto auto 1fr auto;
	gap: var(--wp--preset--spacing--20);
	height: 100%;
	box-sizing: border-box;
	padding: var(--wp--custom--posts--card-padding);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
}

.grave-formation-card__media {
	grid-area: media;
	width: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--image);
	background: var(--wp--preset--color--surface-sunken);
}

.grave-formation-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.grave-formation-fallback-media {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--primary-highlight);
}

.grave-formation-fallback-media img,
.grave-formation-card__media.grave-formation-fallback-media img {
	width: var(--wp--custom--formation--fallback-image-width);
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
}

.grave-formation-card__badges {
	grid-area: media;
	z-index: 1;
	align-self: start;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	padding: var(--wp--preset--spacing--20);
	pointer-events: none;
}

.grave-formation-card__badge {
	padding: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--primary-highlight);
	color: var(--wp--preset--color--fg-dark);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--typography--font-weight--medium);
	line-height: 1.15;
}

.grave-formation-card__title {
	grid-area: title;
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
}

.grave-formation-card__title a,
.grave-formation-card__title a:hover {
	color: var(--wp--preset--color--fg-dark);
	text-decoration: none;
}

.grave-formation-card__facts {
	grid-area: facts;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin: 0;
}

.grave-formation-card__fact,
.grave-formation-card__fact > *,
.grave-formation-card__price {
	margin: 0;
}

.grave-formation-card__fact {
	font-size: var(--wp--preset--font-size--xs);
}

.grave-formation-card__price {
	grid-area: price;
	align-self: center;
	font-weight: var(--wp--custom--typography--font-weight--semibold);
}

.grave-formation-card__discover {
	grid-area: discover;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	align-self: center;
	white-space: nowrap;
	text-decoration: none;
}

.grave-formation-card :is(a, button):focus-visible {
	outline: 0.125rem solid var(--wp--preset--color--primary-dark);
	outline-offset: 0.125rem;
}

@container (max-width: 22rem) {
	.grave-formation-card__frame {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"media"
			"title"
			"facts"
			"spacer"
			"price"
			"discover";
		grid-template-rows: auto auto auto 1fr auto auto;
	}

	.grave-formation-card__discover {
		justify-self: stretch;
	}
}
