/**
 * Single-post hero. Scoped under .hpe-hero so it outranks the theme's
 * heading and image rules.
 */

/* hero and share rail together fill the site width */
.hpe-hero-row {
	display: flex;
	align-items: stretch;
	gap: clamp(18px, 2vw, 30px);
	width: 100%;
}

.hpe-hero {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 20px;
	overflow: hidden;
	background: #156082;
}

.hpe-hero .hpe-hero__media {
	position: relative;
	display: block;
	/* width must be stated: with aspect-ratio alone, max-height shrinks the
	   WIDTH to keep the ratio, which left a strip of card beside the photo */
	width: 100%;
	aspect-ratio: 5 / 2;
	/* a band, not a panel - and capped so it cannot balloon on wide screens */
	max-height: 400px;
	min-height: 160px;
	background: #004C6D;
}

.hpe-hero .hpe-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* biased above centre: in a wide band a centred crop takes a slice through
	   the middle of the frame, which is where heads usually are not */
	object-position: center 32%;
	display: block;
}



.hpe-hero .hpe-hero__media--empty { aspect-ratio: 16 / 3; }

/* ---------- bar ---------- */

/*
 * Doodle wash across the bar, masked so it fades in toward the right and
 * leaves the headline on flat colour.
 */
.hpe-hero .hpe-hero__bar {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 28px);
	padding: clamp(18px, 2.2vw, 30px) clamp(20px, 2.6vw, 40px) clamp(22px, 2.6vw, 34px);
}

.hpe-hero .hpe-hero__bar::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url(/wp-content/uploads/2026/08/moh-doodle-overlay.svg);
	background-repeat: repeat;
	background-size: 240px 240px;
	opacity: 0.16;
	-webkit-mask-image: linear-gradient(to right, transparent 22%, rgba(0, 0, 0, 0.55) 62%, #000 100%);
	mask-image: linear-gradient(to right, transparent 22%, rgba(0, 0, 0, 0.55) 62%, #000 100%);
	pointer-events: none;
}

.hpe-hero .hpe-hero__bar > * { position: relative; z-index: 1; }

.hpe-hero .hpe-hero__date {
	flex: 0 0 auto;
	width: 70px;
	height: 78px;
	border-radius: 10px;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-family: Inter, sans-serif;
}

.hpe-hero .hpe-hero__month {
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #156082;
}

.hpe-hero .hpe-hero__day {
	font-weight: 700;
	font-size: 28px;
	letter-spacing: -0.02em;
	color: #004C6D;
	margin: 4px 0 3px;
}

.hpe-hero .hpe-hero__year {
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: #55696B;
}

.hpe-hero .hpe-hero__title {
	font-family: Inter, sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 2.4vw, 34px);
	line-height: 1.18;
	letter-spacing: -0.01em;
	/* 4.84:1 on #156082 */
	color: #fff;
	margin: 0;
	text-wrap: balance;
}

@media (max-width: 767px) {

	.hpe-hero { border-radius: 14px; }
	.hpe-hero .hpe-hero__media { aspect-ratio: 16 / 7; max-height: 240px; }
	.hpe-hero .hpe-hero__bar { gap: 14px; align-items: flex-start; }
	.hpe-hero .hpe-hero__date { width: 58px; height: 66px; }
	.hpe-hero .hpe-hero__day { font-size: 23px; }
	.hpe-hero .hpe-hero__year { font-size: 10px; }
}


/* ---------- share rail ---------- */

.hpe-share {
	/* slim: it is a rail, not a panel */
	flex: 0 0 clamp(88px, 8vw, 112px);
	align-self: flex-start;
	background: #CAE9FF;
	border-radius: 18px;
	padding: 20px 10px 24px;
	text-align: center;
}

.hpe-share .hpe-share__title {
	font-family: Inter, sans-serif;
	font-weight: 700;
	font-size: 16px;
	/* 8.80:1 on the lime */
	color: #202322;
	margin: 0 0 14px;
}

/* icons sit straight on the lime - no inner card */
.hpe-share .hpe-share__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.hpe-share .hpe-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	/* 5.87:1 on the lime */
	color: #003959;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.hpe-share .hpe-share__link svg {
	width: 25px;
	height: 25px;
	fill: currentColor;
}

.hpe-share .hpe-share__link:hover,
.hpe-share .hpe-share__link:focus-visible {
	background: rgba(255, 255, 255, 0.4);
	color: #202322;
}

.hpe-share .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 767px) {

	.hpe-hero-row { flex-direction: column; }

	.hpe-share {
		flex: 1 1 auto;
		align-self: stretch;
		padding: 14px 16px 18px;
	}

	.hpe-share .hpe-share__list { flex-direction: row; justify-content: center; gap: 10px; }
}
/* Consistent article typography. */
body.single-post .hpe-hero__title,
body.single-post .elementor-widget-theme-post-content,
body.single-post .elementor-widget-theme-post-content :is(p,h1,h2,h3,h4,h5,h6,li,blockquote,a,strong,em,figcaption){font-family:Inter,sans-serif;}