.edh-hero-slider {
	position: relative;
}

.edh-hero-slider .swiper-slide.edh-hero-slide {
	position: relative;
	background-color: #272F6A;
	height: 525px;
	overflow: hidden;
}

/* Two nested layers so hover-zoom and idle-breathing compose instead of
   fighting over the single `transform` property: the outer layer (this
   element) handles the hover zoom/brightness, while its ::before pseudo
   independently keeps breathing the whole time, including during hover —
   nested transforms multiply visually, so hovering shows the hover zoom
   layered on top of whatever the breathing cycle is doing at that moment. */
.edh-hero-slide__photo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s ease, filter 0.5s ease;
}

.edh-hero-slide__photo::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: inherit;
	background-position: inherit;
	animation: edh-hero-photo-breathe 16s ease-in-out infinite;
}

@keyframes edh-hero-photo-breathe {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
	.edh-hero-slide__photo::before {
		animation: none;
	}
}

/* Real-pointer devices only: touchscreens apply :hover on tap-and-hold
   and don't clear it until the next tap elsewhere, and since `transform`
   creates a new stacking context, a "stuck" scaled photo can visually
   paint in front of the overlay/text/arrows on some mobile browsers. */
@media (hover: hover) and (pointer: fine) {
	.edh-hero-slide:hover .edh-hero-slide__photo {
		transform: scale(1.05);
		filter: brightness(1.1);
	}
}

/*
 * Tint + blur are both confined to roughly the left half of the slide
 * (content's max-width works out to ~50% of the slide regardless of the
 * arrow-based zone math) via a matching mask, so the photo is fully sharp
 * and untinted past the button. Back to the original brand navy (#272F6A).
 */
.edh-hero-slide__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(39, 47, 106, 0.85) 0%, rgba(39, 47, 106, 0.72) 22%, rgba(39, 47, 106, 0.5) 40%, rgba(39, 47, 106, 0.28) 55%, rgba(39, 47, 106, 0.1) 70%, rgba(39, 47, 106, 0) 88%);
	mask-image: linear-gradient(90deg, #000 0%, #000 25%, rgba(0, 0, 0, 0.65) 42%, rgba(0, 0, 0, 0.3) 58%, rgba(0, 0, 0, 0.08) 75%, transparent 92%);
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 25%, rgba(0, 0, 0, 0.65) 42%, rgba(0, 0, 0, 0.3) 58%, rgba(0, 0, 0, 0.08) 75%, transparent 92%);
}

/* Mirrored fade for right-positioned content: same stops, gradient just
   runs the other way (270deg) so the dark/opaque end sits under the text. */
.edh-hero-slide--right .edh-hero-slide__overlay {
	background: linear-gradient(270deg, rgba(39, 47, 106, 0.85) 0%, rgba(39, 47, 106, 0.72) 22%, rgba(39, 47, 106, 0.5) 40%, rgba(39, 47, 106, 0.28) 55%, rgba(39, 47, 106, 0.1) 70%, rgba(39, 47, 106, 0) 88%);
	mask-image: linear-gradient(270deg, #000 0%, #000 25%, rgba(0, 0, 0, 0.65) 42%, rgba(0, 0, 0, 0.3) 58%, rgba(0, 0, 0, 0.08) 75%, transparent 92%);
	-webkit-mask-image: linear-gradient(270deg, #000 0%, #000 25%, rgba(0, 0, 0, 0.65) 42%, rgba(0, 0, 0, 0.3) 58%, rgba(0, 0, 0, 0.08) 75%, transparent 92%);
}

/*
 * Content is positioned relative to the arrow controls rather than the
 * theme's Bootstrap .container, so the text zone always starts just past
 * the left arrow and ends just before the right one.
 */
.edh-hero-slide__inner {
	--edh-arrow-size: 66px;
	--edh-arrow-inset: 1.5rem;
	--edh-zone-gap: 1.5rem;
	--edh-zone-edge: calc(var(--edh-arrow-inset) + var(--edh-arrow-size) + var(--edh-zone-gap));

	position: relative;
	z-index: 1;
	height: 100%;
}

.edh-hero-slide__content {
	position: absolute;
	top: 50%;
	left: var(--edh-zone-edge);
	transform: translateY(-58%);
	max-width: calc((100% - (2 * var(--edh-zone-edge))) * 0.5);
	text-align: left;
}

.edh-hero-slide--right .edh-hero-slide__content {
	left: auto;
	right: var(--edh-zone-edge);
	text-align: right;
}

.edh-hero-slide--right .edh-hero-slide__bottom-meta {
	text-align: right;
}

.edh-hero-slide__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-wrap: balance;
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
	font-family: "Quicksand", sans-serif;
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.2;
	color: #FFFFFF;
	text-decoration: none;
	margin-bottom: 0.5rem;
}

/* Only rendered at all when a post has an alternative mobile title set —
   hidden by default so desktop keeps showing .edh-hero-slide__title--desktop. */
.edh-hero-slide__title-mobile {
	display: none;
}

/* Title + subtitle share a 5-line budget (see PHP for the split logic). */
.edh-hero-slide__content--no-subtitle .edh-hero-slide__title {
	-webkit-line-clamp: 5;
}

.edh-hero-slide__content--short-subtitle .edh-hero-slide__title {
	-webkit-line-clamp: 4;
}

.edh-hero-slide__content--short-subtitle .edh-hero-slide__subtitle {
	-webkit-line-clamp: 1;
}

.edh-hero-slide__content--long-subtitle .edh-hero-slide__title {
	-webkit-line-clamp: 2;
}

.edh-hero-slide__content--long-subtitle .edh-hero-slide__subtitle {
	-webkit-line-clamp: 3;
}

a.edh-hero-slide__title:hover,
a.edh-hero-slide__title:focus-visible {
	color: #FFFFFF;
	opacity: 0.85;
	text-decoration: underline;
}

.edh-hero-slide__subtitle {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-wrap: balance;
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
	font-family: "Quicksand", sans-serif;
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.3;
	color: #FFFFFF;
	margin-bottom: 0.5rem;
}

.edh-hero-slide__button {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.16rem 0.56rem;
	border: 3px solid #FFFFFF;
	border-radius: 999px;
	background-color: transparent;
	font-family: "Quicksand", sans-serif;
	font-weight: 500;
	font-size: 0.8rem;
	color: #FFFFFF;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.edh-hero-slide__button:hover,
.edh-hero-slide__button:focus-visible {
	background-color: #FFFFFF;
	color: #272F6A;
	text-decoration: none;
}

/* Mobile-only: subtitle on its own line, and "Read more" on its own line
   below that, replacing the pill button (see the mobile media query
   below). Hidden by default so desktop keeps the plain subtitle paragraph
   + separate pill above. */
.edh-hero-slide__subtitle-mobile,
.edh-hero-slide__button-line {
	display: none;
}

/* Date + authors sit low in their own zone, spanning the full width
   between the arrows (not limited to 40%). Bottom offset is set to clear
   the swiper pagination dots (theme's .dots-over sits ~12-39px above the
   slide's bottom edge) so the two never overlap. */
.edh-hero-slide__bottom-meta {
	position: absolute;
	bottom: 2.5rem;
	left: var(--edh-zone-edge);
	right: var(--edh-zone-edge);
	text-align: left;
}

.edh-hero-slide__date {
	font-family: "Quicksand", sans-serif;
	font-weight: 400;
	font-size: 0.9rem;
	color: #FFFFFF;
	opacity: 0.85;
	margin: 0 0 0.25rem;
}

.edh-hero-slide__authors {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0;
	font-family: "Quicksand", sans-serif;
	font-weight: 400;
	font-size: 0.9rem;
	color: #FFFFFF;
	opacity: 0.85;
}

.edh-hero-slider__next,
.edh-hero-slider__prev {
	position: absolute;
	bottom: 1.5rem;
	z-index: 2;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	border: 1px solid #FFFFFF;
	background-color: transparent;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.edh-hero-slider__next {
	right: 1.5rem;
}

.edh-hero-slider__prev {
	left: 1.5rem;
}

.edh-hero-slider__next:hover,
.edh-hero-slider__next:focus-visible,
.edh-hero-slider__prev:hover,
.edh-hero-slider__prev:focus-visible {
	background-color: #FFFFFF;
	color: #272F6A;
}

@media (max-width: 767.98px) {
	.edh-hero-slider .swiper-slide.edh-hero-slide {
		height: 460px;
	}

	/* Photo fills full width (still "cover", no horizontal letterboxing)
	   but is capped to the top 65% of the slide's height — the equivalent
	   of a 35% crop off the bottom of what full-height cover would show —
	   so the slide's own navy background-color fills the remaining 35% at
	   the bottom as a solid margin. The ::before breathing layer follows
	   automatically since it's inset:0 relative to this (now shorter) box. */
	.edh-hero-slide__photo {
		top: 0;
		right: 0;
		bottom: auto;
		left: 0;
		height: 65%;
	}

	/* Content is bottom-anchored and full-width at this breakpoint (see
	   .edh-hero-slide__inner below), so left/right no longer means
	   anything for the fade — one vertical gradient, dark at the bottom
	   where the text now sits, replaces the horizontal left/right one.
	   Reaches fully-opaque solid navy by 60% — before the photo's own
	   bottom edge at 65% — so the photo has already visually dissolved
	   into flat color by the time its box actually ends, instead of
	   showing a hard-edged cut where a still-partially-tinted photo meets
	   the solid area below it. No mask-image needed here (that was for
	   keeping the untouched right-hand desktop zone crisp); one gradient
	   that ends fully opaque is enough. */
	.edh-hero-slide__overlay,
	.edh-hero-slide--right .edh-hero-slide__overlay {
		background: linear-gradient(180deg, rgba(39, 47, 106, 0) 4%, rgba(39, 47, 106, 0.15) 20%, rgba(39, 47, 106, 0.4) 35%, rgba(39, 47, 106, 0.7) 48%, #272F6A 60%);
		mask-image: none;
		-webkit-mask-image: none;
	}

	/* Bottom padding just clears the pagination dots (theme's .dots-over
	   sits at bottom:0.6rem, dots are ~0.25rem tall) with a small gap —
	   no more reserving space for the date/authors row we now hide here. */
	.edh-hero-slide__inner {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 0 1.25rem 0.75rem;
	}

	/* Content moves from vertically-centered to bottom-anchored, stacked
	   in normal flow above the date/authors block instead of two separate
	   absolutely-positioned layers — avoids the two overlapping when a
	   slide's title/subtitle run long on a short mobile slide height. */
	.edh-hero-slide__content {
		position: static;
		transform: none;
		max-width: 100%;
		margin-bottom: 1rem;
	}

	/* Title/subtitle always read left-aligned on mobile, regardless of the
	   per-slide Position choice — that setting only affects desktop. */
	.edh-hero-slide--right .edh-hero-slide__content {
		right: auto;
	}

	.edh-hero-slide__content,
	.edh-hero-slide--right .edh-hero-slide__content {
		text-align: left;
	}

	.edh-hero-slide__bottom-meta {
		display: none;
	}

	.edh-hero-slide__title {
		font-size: 1.25rem;
	}

	/* Swap in the alternative mobile title when a post has one set — both
	   share the base .edh-hero-slide__title styling/clamp above, only
	   which one is visible changes. */
	.edh-hero-slide__title--desktop {
		display: none;
	}

	.edh-hero-slide__title-mobile {
		display: -webkit-box;
	}

	/* Desktop's subtitle paragraph and pill button are both replaced by two
	   separate mobile lines: subtitle text (clamped to 2 lines), then
	   "Read more" on its own line below it. */
	.edh-hero-slide__subtitle {
		display: none;
	}

	.edh-hero-slide__button {
		display: none;
	}

	.edh-hero-slide__subtitle-mobile {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-family: "Quicksand", sans-serif;
		font-weight: 500;
		font-size: 0.9rem;
		line-height: 1.3;
		color: #FFFFFF;
		margin-bottom: 0.5rem;
	}

	.edh-hero-slide__button-line {
		display: block;
		margin-bottom: 0.5rem;
	}

	.edh-hero-slide__button-inline {
		font-weight: 500;
		color: #AAAAAA;
		text-decoration: none;
	}

	.edh-hero-slide__button-inline:hover,
	.edh-hero-slide__button-inline:focus-visible {
		color: #CCCCCC;
		text-decoration: underline;
	}

	/* Pagination dots at half the theme's default size. The theme's own
	   main.css hardcodes width/height directly (not via the swiper CSS
	   variable) on ".swiper-controls .swiper-pagination
	   .swiper-pagination-bullet" — three chained classes — so matching
	   that selector's specificity (plus !important, since we can't
	   guarantee source order against a theme stylesheet we don't own) is
	   required; setting the CSS variable alone has no effect on it. */
	.edh-hero-slider__container .swiper-pagination-bullet {
		width: 0.25rem !important;
		height: 0.25rem !important;
	}

	.edh-hero-slide__date,
	.edh-hero-slide__authors {
		font-size: 0.8rem;
	}

	/* Arrows shrink to half their desktop size and move from sharing the
	   bottom text row to vertically centered against the (now shorter)
	   photo, since content down below no longer needs to make room for
	   them alongside it. */
	.edh-hero-slider__next,
	.edh-hero-slider__prev {
		width: 27px;
		height: 27px;
		top: 30%;
		bottom: auto;
		transform: translateY(-50%);
	}

	.edh-hero-slider__next svg,
	.edh-hero-slider__prev svg {
		width: 14px;
		height: 14px;
	}
}