/* Featured related event inside the service hero.
   Reuses feeds/post-feed-default.twig + .post-item--row, this file only
   handles placement and the dark-on-dark colour treatment. */

.hero__featured-event {
	width: 100%;
	max-width: 480px;
	margin-left: auto;
	animation: hero-featured-event-fade 0.3s ease-out 0.6s both;
}

@keyframes hero-featured-event-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.hero__featured-event .link-primary--highlight {
	color: white;
}

.hero__featured-event-card {
	background: color-mix(in srgb, var(--primary-ultra-dark) 88%, black);
	padding: var(--gap-xs6);
}

.hero__featured-event .post-item__heading a,
.hero__featured-event .post-item__date,
.hero__featured-event .link-primary {
	color: white;
}

.hero__featured-event .post-item__heading {
	font-size: var(--text-m);
}

/* The card handles its own fade — keep outside animations off the title link */
.hero__featured-event .post-item__heading a,
.hero__featured-event a.link-primary--highlight {
	transform: unset !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* The card is already dark, so the badge needs a lift off it */
.hero__featured-event .post-item__countdown {
	background: var(--primary);
	color: white;
}

/* Image fills the card height instead of the feed's fixed aspect ratio */
.hero__featured-event .post-item__img-wrapper.post-item__img-wrapper {
	aspect-ratio: unset;
	align-self: stretch;
	min-height: 100%;
}

.hero__featured-event .post-item__content {
	flex-grow: 1;
}

@media screen and (max-width: 1025px) {
	.hero__featured-event {
		max-width: none;
		margin-left: 0;
	}

	.hero--service--has-event .hero--service-inner {
		row-gap: var(--gap-xs4);
	}
}