.ate-goals {
	--ate-accent: #abff4f;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.ate-goals * {
	box-sizing: border-box;
}

.ate-goals__grid {
	display: grid;
	width: 100%;
	max-width: 100%;
	align-items: stretch;
}

/* Card */
.ate-goals__card {
	position: relative;
	isolation: isolate; /* Own stacking context: the overlay sits behind the content. */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: #4c5a72;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: var(--ate-card-bg-d, none);
}

.ate-goals__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1; /* Above the card's background image, below its text. */
	pointer-events: none;
}

.ate-goals__card-title,
.ate-goals__card-body {
	margin: 0;
	padding: 0;
}

.ate-goals__card-title {
	color: var(--ate-accent);
}

.ate-goals__card-icon {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}

.ate-goals__card-icon svg {
	width: 1em;
	height: 1em;
}

.ate-goals__card-icon .e-font-icon-svg {
	fill: currentColor;
}

.ate-goals__card-body {
	color: #fff;
}

.ate-goals__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	align-self: flex-start;
	color: var(--ate-accent);
	text-decoration: none;
}

.ate-goals__cta:hover,
.ate-goals__cta:focus {
	color: var(--ate-accent);
	text-decoration: none;
}

.ate-goals__arrow {
	display: inline-block;
	transition: transform 0.2s;
}

.ate-goals__cta:hover .ate-goals__arrow,
.ate-goals__cta:focus .ate-goals__arrow {
	transform: translateX(4px);
}

/* ---- Whole card clickable ("stretched link") ----
   The card keeps ONE real link (the button, or the title when there is no
   button text); its ::after covers the whole card. Native link behaviour
   stays intact: Ctrl/Cmd/middle-click, "open in new tab", keyboard, and a
   screen reader hears a single link with a meaningful name. The card
   children are not positioned, so the card is the ::after's box. */
.ate-goals__stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ate-goals__title-link {
	color: inherit;
	text-decoration: none;
}

.ate-goals__title-link:hover,
.ate-goals__title-link:focus {
	color: inherit;
	text-decoration: none;
}

/* Hover anywhere on the card = hovering the link. */
.ate-goals__card--linked:hover .ate-goals__arrow {
	transform: translateX(4px);
}

.ate-goals__card--linked:hover .ate-goals__cta-text,
.ate-goals__card--linked:hover .ate-goals__title-link {
	text-decoration: none;
	text-underline-offset: 0.15em;
}

/* Keyboard focus: ring around the whole card instead of the small link. */
.ate-goals .ate-goals__stretch:focus-visible {
	outline: none;
	box-shadow: none;
}

.ate-goals .ate-goals__stretch:focus-visible::after {
	outline: 3px solid var(--ate-focus, #2667ff);
	outline-offset: -3px;
	box-shadow: inset 0 0 0 6px #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	.ate-goals__card--linked:hover .ate-goals__arrow {
		transform: none;
	}
}