.ndw-card-carousel,
.ndw-card-carousel__inner {
	width: 100%;
}

.ndw-card-carousel__inner {
	max-width: 1240px;
	margin-inline: auto;
}

.ndw-carousel-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid rgb(20 28 38 / 12%);
	border-radius: 8px;
	background: #fff;
}

.ndw-carousel-card__image {
	width: 100%;
	height: 210px;
	overflow: hidden;
	background: #e6ecea;
}

/* The shared viewport clips with `overflow: hidden`, and a slide sits flush
   against its top edge, so a lifted card would have its raised edge and shadow
   cut off. The padding opens exactly enough room and the negative margin takes it
   back off the outer box, so nothing around the carousel moves. Scoped to this
   widget rather than `carousel.css`, which the other three carousels share. */
.ndw-card-carousel .ndw-carousel__viewport {
	padding-block: 14px;
	margin-block: -14px;
}

/* The frame keeps its size and clips, so the Hover image zoom control grows the
   picture inside it rather than pushing the card around. The card-level lift is
   the shared `Hover_Effects_Trait` effect and lives in `frontend.css`. */
.ndw-carousel-card__image.ndw-carousel-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center;
	transition: scale 280ms ease;
}

/* Only the transition is removed, not the zoom itself. The zoom comes from an
   Elementor control, whose selector compiles to six classes and would outrank
   anything written here short of `!important`; a `scale: 1` rule would look like
   a guard while quietly losing the cascade. Killing the transition is what
   Portfolio Carousel does for the same control, and it removes the animation,
   which is what the preference asks for. */
@media (prefers-reduced-motion: reduce) {
	.ndw-carousel-card__image.ndw-carousel-card__image img {
		transition: none;
	}
}

.ndw-carousel-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px;
}

/* An inline SVG is painted by `fill`, not `color`, so the Icon colour control
   needs this to reach it. `fill` is inherited, so multicolour artwork that sets
   its own is left alone. */
.ndw-carousel-card__icon svg {
	fill: currentColor;
}

/* Every dimension is a custom property with the previous hardcoded value as its
   fallback, so the new controls can reach them and an untouched card renders
   exactly as before. The glyph is sized in `em` so one control drives a text
   glyph, a font icon and an inline SVG alike. */
.ndw-carousel-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ndw-card-icon-box, 44px);
	height: var(--ndw-card-icon-box, 44px);
	margin-bottom: var(--ndw-card-icon-gap, 18px);
	border-radius: var(--ndw-card-icon-radius, 6px);
	/* No `background` or `color` here on purpose — see services-grid.css. Both are
	   painted by the Icon controls, which carry these values as their defaults, so
	   the controls can actually be cleared. */
	font-size: var(--ndw-card-icon-size, 20px);
	transition: background-color 280ms ease, color 280ms ease;
}

.ndw-carousel-card__icon i,
.ndw-carousel-card__icon svg {
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
}

.ndw-carousel-card__eyebrow {
	margin-bottom: 10px;
	color: #1f7667;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

:where(.ndw-carousel-card__title) {
	margin: 0;
	color: #15191e;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

:where(.ndw-carousel-card__description) {
	margin-top: 14px;
	color: #4b5563;
	font-size: 15px;
	line-height: 1.6;
}

.ndw-carousel-card__description > :first-child {
	margin-top: 0;
}

.ndw-carousel-card__description > :last-child {
	margin-bottom: 0;
}

.ndw-carousel-card__metadata {
	margin-top: 18px;
	color: #4b5563;
	font-size: 13px;
}

.ndw-carousel-card__link {
	display: inline-flex;
	align-items: center;
	margin-top: auto;
	padding-top: 24px;
	gap: 8px;
	color: #1f7667;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.ndw-carousel-card__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}