/* ==========================================================================
   Card Block - Base Styles
   --------------------------------------------------------------------------
   These styles apply to every Card block instance unless a section-specific
   variant overrides them.
   ========================================================================== */
.card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 0.9375rem;
	background: #fff;
}

.card__top {
	display: block;
	width: 100%;
}

/* Hidden by default; enabled by section variants that use brand headers. */
.card__brand {
	display: none;
}

.card__brand-text {
	display: flex;
	flex-direction: column;
}

.card__brand-title,
.card__brand-subtitle {
	display: block;
}

.card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: clamp(0.875rem, 2vw, 1.5rem);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.card__title {
	margin: 0;
	color: #002f33;
	font-family: Raleway, sans-serif;
	font-size: clamp(1.75rem, 4.2vw, 2.625rem);
	font-style: normal;
	font-weight: 700;
	line-height: 1.1;
	text-align: left;
}

/* Homepage card titles should never render as underlined links. */
body:is(.home, .front-page) .card__title,
body:is(.home, .front-page) .card__title a {
	text-decoration: none;
}

.card__content {
	color: #000;
	font-family: Raleway, sans-serif;
	font-size: clamp(1.125rem, 2.4vw, 1.5rem);
	font-style: normal;
	font-weight: 500;
	line-height: clamp(1.5rem, 3vw, 1.875rem);
	text-align: left;
}

.card__content p {
	margin: 0 0 1rem;
}

.card__content p:last-child {
	margin-bottom: 0;
}

/* Keep card copy typography owned by card styles (not global paragraph baselines). */
main#maincontent .card .card__content p {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-style: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	text-align: left !important;
}

/* Ensure section-level text centering never recenters card text. */
main#maincontent .card :is(.card__title, .card__content, .card__content p) {
	text-align: left !important;
}

.card__cta-wrap {
	margin-top: auto;
	padding-top: clamp(1.25rem, 4vw, 2.5rem);
	width: 100%;
	min-width: 0;
}

/* Keep CTA containers constrained to card width. */
.card__ctas {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.card__ctas x-button {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* ==========================================================================
   Section Variant: section--heading-line-center
   --------------------------------------------------------------------------
   Controls spacing around the grid and card presentation for this section.
   ========================================================================== */
/* WordPress core Grid spacing for cards in this section:
   keep card-to-card gap at 1.5625rem, excluding glossary cards. */
.section.section--heading-line-center:not(.glossary-cards) .is-layout-grid {
	column-gap: 1.5625rem !important;
	row-gap: 1.5625rem !important;
}

/* Space from card end to bottom of section. */
.section.section--heading-line-center {
	padding-bottom: clamp(4.5rem, 10vw, 9.875rem);
}

@media (min-width: 64rem) {
	.section.section--heading-line-center {
		padding-bottom: 9.875rem;
	}
}

/* Keep a controlled gap from section paragraph to the card grid. */
.section:is(.section--heading-line-center, .section--cards-shadow) .wp-block-heading+p,
.section:is(.section--heading-line-center, .section--cards-shadow) .wp-block-heading+.wp-block-paragraph {
	margin-bottom: 0;
}

/* Paragraph-first layout support (no heading directly above grid). */
.section.section--heading-line-center:not(.glossary-cards) .acf-innerblocks-container > p:first-child,
.section.section--heading-line-center:not(.glossary-cards) .acf-innerblocks-container > .wp-block-paragraph:first-child,
.section.section--cards-shadow .acf-innerblocks-container > p:first-child,
.section.section--cards-shadow .acf-innerblocks-container > .wp-block-paragraph:first-child {
	margin-bottom: 0;
}

.section:is(.section--heading-line-center, .section--cards-shadow) .wp-block-heading+p+.is-layout-grid,
.section:is(.section--heading-line-center, .section--cards-shadow) .wp-block-heading+.wp-block-paragraph+.is-layout-grid,
.section:is(.section--heading-line-center, .section--cards-shadow) .wp-block-heading+p+.wp-block-group.is-layout-grid,
.section:is(.section--heading-line-center, .section--cards-shadow) .wp-block-heading+.wp-block-paragraph+.wp-block-group.is-layout-grid {
	margin-top: clamp(2rem, 5vw, 3.75rem);
}

.section.section--heading-line-center:not(.glossary-cards) .acf-innerblocks-container > p:first-child + .is-layout-grid,
.section.section--heading-line-center:not(.glossary-cards) .acf-innerblocks-container > .wp-block-paragraph:first-child + .is-layout-grid,
.section.section--heading-line-center:not(.glossary-cards) .acf-innerblocks-container > p:first-child + .wp-block-group.is-layout-grid,
.section.section--heading-line-center:not(.glossary-cards) .acf-innerblocks-container > .wp-block-paragraph:first-child + .wp-block-group.is-layout-grid,
.section.section--heading-line-center:not(.glossary-cards) .acf-innerblocks-container > p:first-child + [id^="grid-"],
.section.section--heading-line-center:not(.glossary-cards) .acf-innerblocks-container > .wp-block-paragraph:first-child + [id^="grid-"],
.section.section--cards-shadow .acf-innerblocks-container > p:first-child + .is-layout-grid,
.section.section--cards-shadow .acf-innerblocks-container > .wp-block-paragraph:first-child + .is-layout-grid,
.section.section--cards-shadow .acf-innerblocks-container > p:first-child + .wp-block-group.is-layout-grid,
.section.section--cards-shadow .acf-innerblocks-container > .wp-block-paragraph:first-child + .wp-block-group.is-layout-grid,
.section.section--cards-shadow .acf-innerblocks-container > p:first-child + [id^="grid-"],
.section.section--cards-shadow .acf-innerblocks-container > .wp-block-paragraph:first-child + [id^="grid-"] {
	margin-top: clamp(2rem, 5vw, 3.75rem);
}

@media (min-width: 64rem) {

	.section:is(.section--heading-line-center, .section--cards-shadow) .wp-block-heading+p+.is-layout-grid,
	.section:is(.section--heading-line-center, .section--cards-shadow) .wp-block-heading+.wp-block-paragraph+.is-layout-grid,
	.section:is(.section--heading-line-center, .section--cards-shadow) .wp-block-heading+p+.wp-block-group.is-layout-grid,
	.section:is(.section--heading-line-center, .section--cards-shadow) .wp-block-heading+.wp-block-paragraph+.wp-block-group.is-layout-grid {
		margin-top: 3.75rem;
	}

	.section.section--heading-line-center:not(.glossary-cards) .acf-innerblocks-container > p:first-child + .is-layout-grid,
	.section.section--heading-line-center:not(.glossary-cards) .acf-innerblocks-container > .wp-block-paragraph:first-child + .is-layout-grid,
	.section.section--heading-line-center:not(.glossary-cards) .acf-innerblocks-container > p:first-child + .wp-block-group.is-layout-grid,
	.section.section--heading-line-center:not(.glossary-cards) .acf-innerblocks-container > .wp-block-paragraph:first-child + .wp-block-group.is-layout-grid,
	.section.section--heading-line-center:not(.glossary-cards) .acf-innerblocks-container > p:first-child + [id^="grid-"],
	.section.section--heading-line-center:not(.glossary-cards) .acf-innerblocks-container > .wp-block-paragraph:first-child + [id^="grid-"],
	.section.section--cards-shadow .acf-innerblocks-container > p:first-child + .is-layout-grid,
	.section.section--cards-shadow .acf-innerblocks-container > .wp-block-paragraph:first-child + .is-layout-grid,
	.section.section--cards-shadow .acf-innerblocks-container > p:first-child + .wp-block-group.is-layout-grid,
	.section.section--cards-shadow .acf-innerblocks-container > .wp-block-paragraph:first-child + .wp-block-group.is-layout-grid,
	.section.section--cards-shadow .acf-innerblocks-container > p:first-child + [id^="grid-"],
	.section.section--cards-shadow .acf-innerblocks-container > .wp-block-paragraph:first-child + [id^="grid-"] {
		margin-top: 3.75rem;
	}
}

/* ==========================================================================
   Shared Card Surface (heading-line-center + cards-shadow)
   --------------------------------------------------------------------------
   Both section variants use the same card geometry and inner typography.
   Variant-specific differences (border/shadow/top header) are defined below.
   ========================================================================== */
.section.section--heading-line-center .card,
.section--cards-shadow .card {
	width: 100%;
	min-height: clamp(21.25rem, 35vw, 25.9375rem);
	flex: 1 0 0;
	align-self: stretch;
	border-radius: 1.25rem;
	background: #fff;
	overflow: hidden;
}

.section.section--heading-line-center .card::after,
.section--cards-shadow .card::after {
	content: "";
	display: block;
	height: clamp(1.125rem, 2.2vw, 1.625rem);
	align-self: stretch;
	flex: 0 0 clamp(1.125rem, 2.2vw, 1.625rem);
	border-radius: 0;
	background: var(--Breaker-Bay-800, #0A6165);
}

.section.section--heading-line-center .card__body,
.section--cards-shadow .card__body {
	display: flex;
	padding: clamp(1.75rem, 6vw, 4.375rem) clamp(1.25rem, 5vw, 3.75rem) clamp(1.25rem, 3vw, 2.1875rem);
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	flex: 1 0 0;
	align-self: stretch;
	gap: clamp(0.75rem, 2vw, 1.25rem);
}

.section:is(.section--heading-line-center, .section--cards-shadow) .card__cta-wrap,
.section:is(.section--heading-line-center, .section--cards-shadow) .card__ctas {
	width: 100%;
	min-width: 0;
}

.section:is(.section--heading-line-center, .section--cards-shadow) .card__ctas {
	justify-content: stretch !important;
}

.section:is(.section--heading-line-center, .section--cards-shadow) .card__ctas x-button {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.section:is(.section--heading-line-center, .section--cards-shadow) .card__cta-wrap .card__cta {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	white-space: normal;
	text-wrap: balance;
	overflow-wrap: break-word;
	text-align: center;
	line-height: 1.2;
	padding-inline: clamp(1rem, 3vw, 2rem);
}

.section:is(.section--heading-line-center, .section--cards-shadow) .card__cta-wrap .card__cta:is(:hover, :active, :focus) {
	padding-inline: clamp(1rem, 3vw, 2rem);
}

.section.section--heading-line-center .card__title,
.section--cards-shadow .card__title {
	align-self: stretch;
	color: var(--Breaker-Bay-950, #002F33);
	font-family: Raleway, sans-serif;
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.section.section--heading-line-center .card__content,
.section--cards-shadow .card__content {
	width: min(100%, 21.25rem);
	min-height: clamp(5.25rem, 8vw, 6.5625rem);
	overflow: hidden;
	color: #000;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	font-family: Raleway, sans-serif;
	font-size: clamp(0.875rem, 1.4vw, 0.9375rem);
	font-style: normal;
	font-weight: 400;
	line-height: clamp(1.375rem, 2vw, 1.5625rem);
}

.section.section--heading-line-center .card__content p,
.section--cards-shadow .card__content p {
	margin: 0;
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

/* Border variant for section--heading-line-center. */
.section.section--heading-line-center .card {
	border: 0.0938rem solid var(--Breaker-Bay-800, #0A6165);
}

/* ==========================================================================
   Glossary Archive Card Variant
   --------------------------------------------------------------------------
   Uses the same visual language as `section--heading-line-center`, with
   glossary-specific card dimensions and spacing.
   ========================================================================== */
.entry-content:has(.glossary-cards) > :is(p, .wp-block-paragraph) {
	width: min(100%, 36.125rem);
	color: #000;
	font-family: Raleway, sans-serif;
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.875rem;
}

.glossary-cards.section.section--heading-line-center {
	--glossary-card-max-width: 28.75rem;
	--glossary-grid-gap: 2.75rem;
	--glossary-grid-columns: 1;
	--glossary-grid-max-width: calc((var(--glossary-card-max-width) * var(--glossary-grid-columns)) + (var(--glossary-grid-gap) * (var(--glossary-grid-columns) - 1)));
	margin-top: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.glossary-cards__intro {
	width: 36.125rem;
	max-width: 100%;
	margin-bottom: 5.31rem;
	color: #000;
	font-family: Raleway, sans-serif;
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.875rem;
}

.glossary-cards__intro p {
	margin: 0 0 1rem;
	color: inherit;
	font: inherit;
}

.glossary-cards__intro p:last-child {
	margin-bottom: 0;
}

@media (min-width: 62.5rem) {
	/* Offset the section's md:px-4 gutter so intro text lines up with breadcrumb start. */
	.glossary-cards__intro {
		margin-left: 7.81rem;
		margin-right: auto;
	}
}

/* Glossary page search sits 5.3125rem below intro text and aligns right. */
.glossary-cards__search-wrap {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	max-width: var(--glossary-grid-max-width);
	margin-bottom: clamp(1.25rem, 2.5vw, 2.125rem);
}

.glossary-cards__search-wrap .global-search-form {
	margin-left: auto;
}

	@media (min-width: 64rem) {
		/* Make glossary content use the same left edge as the header logo. */
		.entry-content:has(.glossary-cards) {
			width: 100vw;
			width: 100dvw;
			max-width: none;
			margin-left: calc(50% - 50vw);
			margin-left: calc(50% - 50dvw);
			margin-right: calc(50% - 50vw);
			margin-right: calc(50% - 50dvw);
			padding-left: clamp(2.5rem, 8vw, 6.875rem);
			padding-right: clamp(1rem, 4vw, 3.5rem);
		}

	.entry-content:has(.glossary-cards) > :is(p, .wp-block-paragraph) {
		margin-left: 0 !important;
		margin-right: auto !important;
		text-align: left;
	}

	.glossary-cards.section.section--heading-line-center {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

		/* Keep glossary search on the right side within the shared glossary content width. */
		.glossary-cards__search-wrap {
			justify-content: flex-end;
		}

			.glossary-cards__search-wrap,
			.glossary-cards__divider,
			.glossary-archive.section.section--heading-line-center .glossary-archive__grid,
			.glossary-cards.section.section--heading-line-center .glossary-cards__empty-note {
				margin-left: 7.81rem !important;
				margin-right: auto !important;
		}

		.glossary-cards__alphabet {
			margin-left: 7.81rem !important;
			margin-right: auto !important;
		}

	.glossary-cards.section.section--heading-line-center .glossary-cards__pagination {
		width: fit-content;
		margin-left: auto !important;
		margin-right: auto !important;
		justify-content: center !important;
	}

	.glossary-cards.section.section--heading-line-center .glossary-cards__empty-note {
		text-align: left;
	}
}

.glossary-archive.section.section--heading-line-center .glossary-archive__grid {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 2.75rem;
	row-gap: 2.75rem;
	width: 100%;
	max-width: var(--glossary-grid-max-width);
}

.glossary-archive.section.section--heading-line-center .glossary-archive__grid > .card {
	--glossary-card-bottom-height: clamp(1.125rem, 2.2vw, 1.625rem);
	width: 100%;
	max-width: 28.75rem;
	min-height: calc(16.75rem + var(--glossary-card-bottom-height));
	height: auto;
	justify-self: start;
}

.glossary-archive.section.section--heading-line-center .glossary-archive__grid > .card::after {
	height: var(--glossary-card-bottom-height);
	flex: 0 0 var(--glossary-card-bottom-height);
}

.glossary-cards.section.section--heading-line-center .card__body {
	flex: 1 1 auto;
	min-height: 0;
	justify-content: flex-start;
	gap: 0.9375rem;
}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
	.glossary-cards.section.section--heading-line-center {
		--glossary-grid-columns: 2;
	}

	.glossary-archive.section.section--heading-line-center .glossary-archive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.glossary-cards.section.section--heading-line-center {
		--glossary-grid-columns: 3;
	}

	.glossary-archive.section.section--heading-line-center .glossary-archive__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.glossary-cards__alphabet {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	overflow-x: auto;
	white-space: nowrap;
	width: 100%;
	max-width: var(--glossary-grid-max-width);
}

.glossary-cards__letter {
	color: var(--Breaker-Bay-950, #002F33);
	font-family: Raleway, sans-serif;
	font-size: 1.875rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
	flex: 0 0 auto;
}

.glossary-cards__letter--all {
	font-size: 1.875rem;
}

.glossary-cards__letter.is-active {
	display: flex;
	padding: 0.3125rem 0.75rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.3125rem;
	border-radius: 0.75rem;
	border: 0.0625rem solid var(--Breaker-Bay-600, #009EA1);
	background: var(--Breaker-Bay-300, #51F7EF);
	color: var(--Breaker-Bay-950, #002F33);
}

.glossary-cards__letter:hover,
.glossary-cards__letter:focus-visible {
	display: flex;
	padding: 0.3125rem 0.75rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.3125rem;
	border-radius: 0.75rem;
	background: var(--Breaker-Bay-100, #C7FFFA);
	color: var(--Breaker-Bay-950, #002F33);
}

.glossary-cards__letter.is-empty {
	color: #7f9298;
	opacity: 0.5;
}

.glossary-cards__divider {
	width: 100%;
	max-width: var(--glossary-grid-max-width);
	margin-top: clamp(0.75rem, 2vw, 1.5rem);
	margin-bottom: clamp(1.25rem, 3vw, 2.125rem);
	border-top: 0.125rem solid #15181A;
}

.glossary-cards .card__title a {
	color: inherit;
	text-decoration: none;
}

.glossary-cards .card__title a:hover,
.glossary-cards .card__title a:focus-visible {
	text-decoration: underline;
}

.glossary-cards__empty-note {
	margin-top: 1rem;
	text-align: center;
	color: #002f33;
	font-family: Raleway, sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
}

/* Glossary pagination style (always shown, even for one page). */
.glossary-cards.section.section--heading-line-center .glossary-cards__pagination {
	margin-top: clamp(1.75rem, 3vw, 2.75rem);
	margin-bottom: clamp(1.25rem, 2.5vw, 1.875rem);
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 1.2vw, 1rem);
}

.glossary-cards__pagination .page-numbers {
	display: inline-flex;
	width: 3.75rem;
	height: 3.75rem;
	padding: 0;
	align-items: center;
	justify-content: center;
	border-radius: 0.75rem;
	border: 0.0938rem solid var(--Breaker-Bay-800, #0A6165);
	background: var(--Breaker-Bay-50, #EFFEFD);
	color: var(--Breaker-Bay-950, #002F33);
	font-family: Raleway, sans-serif;
	font-size: 2.125rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
}

.glossary-cards__pagination .page-numbers.prev,
.glossary-cards__pagination .page-numbers.next {
	background: var(--Fuel-Yellow-50, #FEF9EC);
	font-size: 2.75rem;
	line-height: 1;
}

.glossary-cards__pagination .page-numbers.prev {
	margin-right: clamp(1.375rem, 2.5vw, 2.125rem);
}

.glossary-cards__pagination .page-numbers.next {
	margin-left: clamp(1.375rem, 2.5vw, 2.125rem);
}

.glossary-cards__pagination .page-numbers.current {
	background: var(--Fuel-Yellow-400, #EEA725);
	font-weight: 700;
}

.glossary-cards__pagination .page-numbers:hover,
.glossary-cards__pagination .page-numbers:focus-visible {
	background: var(--Breaker-Bay-100, #C7FFFA);
}

.glossary-cards__pagination .page-numbers.current:hover,
.glossary-cards__pagination .page-numbers.current:focus-visible {
	background: var(--Fuel-Yellow-400, #EEA725);
}

.glossary-cards__pagination .page-numbers.disabled {
	opacity: 0.65;
	pointer-events: none;
}

@media (max-width: 63.9375rem) {
	.glossary-cards__alphabet {
		justify-content: flex-start;
	}

	.glossary-cards__letter {
		font-size: 1.875rem;
	}

	.glossary-cards__pagination .page-numbers {
		width: 3rem;
		height: 3rem;
		font-size: 1.75rem;
	}

	.glossary-cards__pagination .page-numbers.prev,
	.glossary-cards__pagination .page-numbers.next {
		font-size: 2.125rem;
	}

	.glossary-cards__pagination .page-numbers.prev {
		margin-right: 0.5rem;
	}

	.glossary-cards__pagination .page-numbers.next {
		margin-left: 0.5rem;
	}
}

/* Shadow variant for section--cards-shadow. */
.section--cards-shadow .card {
	border: 0;
	box-shadow: 0.25rem 0.25rem 0.9375rem 0 rgba(0, 0, 0, 0.15);
}

/* Top header area used only by section--cards-shadow cards. */
.section--cards-shadow .card__top {
	display: flex;
	height: 15.875rem;
	justify-content: center;
	align-items: center;
	gap: 0.5561rem;
	flex-shrink: 0;
	align-self: stretch;
	border-radius: 1.25rem 1.25rem 0 0;
	background: var(--Breaker-Bay-900, #0D5154);
}

.section--cards-shadow .card__brand {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1.3vw, 0.875rem);
}

.section--cards-shadow .card__brand-logos {
	display: flex;
	align-items: center;
	gap: clamp(0.25rem, 0.6vw, 0.5rem);
}

.section--cards-shadow .card__brand-logo {
	width: clamp(1.625rem, 3vw, 2.5061rem);
	height: clamp(3.0625rem, 5.4vw, 4.7267rem);
	flex: 0 0 auto;
	object-fit: contain;
}

.section--cards-shadow .card__brand-text {
	color: #fff;
	line-height: 1;
}

.section--cards-shadow .card__brand-title {
	width: min(100%, 8.1875rem);
	font-family: "Open Sans", sans-serif;
	font-size: clamp(1.75rem, 3.2vw, 2.7804rem);
	font-style: normal;
	font-weight: 800;
	line-height: normal;
	letter-spacing: 0;
	color: #fff;
}

.section--cards-shadow .card__brand-subtitle {
	width: min(100%, 8.1559rem);
	font-family: "Open Sans", sans-serif;
	font-size: clamp(1.125rem, 2.1vw, 1.6682rem);
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0;
	color: #fff;
}

.section--cards-shadow .card.card--with-top-brand .card__image {
	display: none;
}

.section--cards-shadow .card__image {
	width: auto;
	height: auto;
	max-width: min(80%, 18.75rem);
	max-height: 72%;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center;
}

@media (max-width: 63.9375rem) {
	.section.section--heading-line-center .card,
	.section--cards-shadow .card {
		min-height: auto;
	}

	.section.section--heading-line-center .card__body,
	.section--cards-shadow .card__body {
		padding: 2rem 1.25rem 1.5rem;
	}

	/* Allow long button labels to wrap inside cards on smaller screens. */
	.section:is(.section--heading-line-center, .section--cards-shadow) .card__ctas x-button {
		width: 100%;
		min-width: 0;
	}

	.section:is(.section--heading-line-center, .section--cards-shadow) .card__cta-wrap .card__cta {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		white-space: normal;
		text-wrap: wrap;
		text-align: center;
		line-height: 1.2;
		padding-inline: clamp(1rem, 4vw, 1.5rem);
	}
}

/* ==========================================================================
   Section Variant: section--cards-horizontal
   --------------------------------------------------------------------------
   Converts cards into horizontal media cards with right accent bar.
   ========================================================================== */
/* Horizontal card layout variant:
   Add `section--cards-horizontal` to the Section's Additional CSS class. */
.section.section--cards-horizontal .card {
	display: grid;
	grid-template-columns: minmax(13.75rem, 21.25rem) minmax(0, 1fr);
	align-items: stretch;
	width: min(100%, 61.25rem);
	max-width: 61.25rem;
	justify-self: center;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	border-radius: 1.25rem;
	overflow: hidden;
	box-shadow: 0.25rem 0.25rem 0.9375rem 0 rgba(0, 0, 0, 0.15);
}

.section.section--cards-horizontal .card::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1.625rem;
	border-radius: 0 1.25rem 1.25rem 0;
	background: var(--Fuel-Yellow-200, #F7DA90);
	box-shadow: 0.25rem 0.25rem 0.9375rem 0 rgba(0, 0, 0, 0.15);
	pointer-events: none;
}

.section.section--cards-horizontal .card__image {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

.section.section--cards-horizontal .card__top {
	width: 100%;
	height: 100%;
}

.section.section--cards-horizontal .card__body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	gap: clamp(0.75rem, 1.8vw, 1.25rem);
}

.section.section--cards-horizontal .card__title {
	margin: 0;
	align-self: stretch;
	height: auto;
	color: var(--Breaker-Bay-950, #002F33);
	font-family: Raleway, sans-serif;
	font-size: 2.5rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
	white-space: normal;
	width: 100%;
}

.section.section--cards-horizontal .card__content {
	width: min(100%, 33.1875rem);
	min-height: 0;
	color: #000;
	font-family: Raleway, sans-serif;
	font-size: clamp(0.875rem, 1.4vw, 0.9375rem);
	font-style: normal;
	font-weight: 400;
	line-height: clamp(1.375rem, 2.2vw, 1.5625rem);
}

.section.section--cards-horizontal .card__content p {
	margin: 0;
}

.section.section--cards-horizontal .card__cta-wrap {
	margin-top: clamp(1rem, 2.5vw, 1.75rem);
	padding-top: 0;
}

/* Keep card CTA buttons compact in this section only. */
.section.section--cards-horizontal .card__cta-wrap :is(.button, .btn) {
	height: clamp(2.125rem, 5.5vw, 2.375rem);
	min-block-size: clamp(2.125rem, 5.5vw, 2.375rem);
	padding-top: clamp(0.375rem, 1.2vw, 0.5rem);
	padding-bottom: clamp(0.375rem, 1.2vw, 0.5rem);
}

.section.section--cards-horizontal .card__cta-wrap :is(.button, .btn):is(:hover, :active, :focus) {
	height: clamp(2.125rem, 5.5vw, 2.375rem);
	min-block-size: clamp(2.125rem, 5.5vw, 2.375rem);
	padding-top: clamp(0.375rem, 1.2vw, 0.5rem);
	padding-bottom: clamp(0.375rem, 1.2vw, 0.5rem);
}

/* Spacing controls for horizontal cards section:
   4.375rem from paragraph to cards, 2.8125rem between cards. */
.section.section--cards-horizontal {
	padding-bottom: clamp(3.5rem, 9vw, 7.5rem) !important;
}

.section.section--cards-horizontal .wp-block-heading+p,
.section.section--cards-horizontal .wp-block-heading+.wp-block-paragraph {
	margin-bottom: 0;
}

.section.section--cards-horizontal .wp-block-heading+p+.is-layout-grid,
.section.section--cards-horizontal .wp-block-heading+.wp-block-paragraph+.is-layout-grid,
.section.section--cards-horizontal .wp-block-heading+p+.wp-block-group.is-layout-grid,
.section.section--cards-horizontal .wp-block-heading+.wp-block-paragraph+.wp-block-group.is-layout-grid {
	margin-top: clamp(2.5rem, 6vw, 4.375rem);
}

.section.section--cards-horizontal .is-layout-grid {
	column-gap: 2.8125rem !important;
	row-gap: clamp(1.875rem, 5vw, 2.8125rem) !important;
}

/* Keep the same 1.5625rem card gap in shadow-card sections as well. */
.section.section--cards-shadow .is-layout-grid {
	column-gap: 1.5625rem !important;
	row-gap: 1.5625rem !important;
}

/* Buttons (VDI) directly below the cards grid in section--cards-horizontal:
   keep 2.9375rem gap from grid and center the CTA row. */
.section.section--cards-horizontal .wp-block-group.is-layout-grid + .align-with-content,
.section.section--cards-horizontal .wp-block-group.is-layout-grid + .wp-block-acf-buttons {
	margin-top: clamp(1.75rem, 5vw, 2.9375rem) !important;
}

.section.section--cards-horizontal .align-with-content > .flex,
.section.section--cards-horizontal .wp-block-acf-buttons > .flex {
	justify-content: center !important;
}

/* Buttons (VDI) directly below the cards grid in section--cards-shadow:
   keep 3.75rem gap from grid and center the CTA row. */
.section.section--cards-shadow .wp-block-group.is-layout-grid + .align-with-content,
.section.section--cards-shadow .wp-block-group.is-layout-grid + .wp-block-acf-buttons {
	margin-top: clamp(2.125rem, 6vw, 3.75rem) !important;
}

.section.section--cards-shadow .align-with-content > .flex,
.section.section--cards-shadow .wp-block-acf-buttons > .flex {
	justify-content: center !important;
}

@media (min-width: 64rem) {
	.section.section--cards-horizontal {
		padding-bottom: 7.5rem !important;
	}

	.section.section--cards-horizontal .wp-block-heading+p+.is-layout-grid,
	.section.section--cards-horizontal .wp-block-heading+.wp-block-paragraph+.is-layout-grid,
	.section.section--cards-horizontal .wp-block-heading+p+.wp-block-group.is-layout-grid,
	.section.section--cards-horizontal .wp-block-heading+.wp-block-paragraph+.wp-block-group.is-layout-grid {
		margin-top: 4.375rem;
	}

	.section.section--cards-horizontal .is-layout-grid {
		column-gap: 2.8125rem !important;
		row-gap: 2.8125rem !important;
	}

	.section.section--cards-horizontal .wp-block-group.is-layout-grid + .align-with-content,
	.section.section--cards-horizontal .wp-block-group.is-layout-grid + .wp-block-acf-buttons {
		margin-top: 2.9375rem !important;
	}

	.section.section--cards-shadow .wp-block-group.is-layout-grid + .align-with-content,
	.section.section--cards-shadow .wp-block-group.is-layout-grid + .wp-block-acf-buttons {
		margin-top: 3.75rem !important;
	}
}

@media (max-width: 63.9375rem) {
	.section.section--cards-horizontal .card {
		grid-template-columns: 1fr;
	}

	.section.section--cards-horizontal .card__image {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.section.section--cards-horizontal .card__top {
		height: auto;
	}

	.section.section--cards-horizontal .card__title {
		height: auto;
		width: 100%;
		white-space: normal;
		font-size: clamp(1.5rem, 7vw, 2rem);
	}

	.section.section--cards-horizontal .card__content {
		width: 100%;
	}
}

/* ==========================================================================
   Mobile Card Grids
   --------------------------------------------------------------------------
   Force all card grids to stack as one card per row on mobile screens.
   ========================================================================== */
@media (max-width: 47.9375rem) {
	.is-layout-grid > .card,
	.wp-block-post-template.is-layout-grid > .card,
	.glossary-archive__grid > .card,
	[id^="grid-"] .grid > .card,
	[id^="grid-"] .grid > .grid-cell:has(.card) {
		grid-column: 1 / -1 !important;
	}
}