/**
 * Scheduled homepage campaign popup.
 *
 * SELF-CONTAINED BY INTENT. Only `.popup` itself is borrowed from the theme,
 * because the theme's script drives open/close through it. Everything inside
 * is styled here.
 *
 * The first version reused .popup__wrapper / .popup__wrapper--alt and measured
 * 0 padding at every width — the --alt variant zeroes horizontal padding and
 * the base carries 111px/102px vertical padding meant for a full-bleed donate
 * panel. Overriding it turned into a specificity fight. Not worth it.
 *
 * Selectors are prefixed with `.popup.eha-campaign` so they outrank the
 * theme's single-class rules regardless of stylesheet order.
 */

/* SIZES ARE IN PX ON PURPOSE.
 *
 * This theme sets the root font-size to 20px, not the usual 16. Every rem here
 * was therefore rendering 25% larger than written: a panel specified as 46rem
 * came out 920px wide, and the modal filled 773px of an 813px viewport. Px
 * keeps the intended size and the rendered size the same thing.
 *
 * The overlay: dim the page and centre the panel. The theme's .popup supplies
 * position/display/opacity; this only replaces its very large fixed padding,
 * which is what pushed the panel off-screen on narrow viewports. */
.popup.eha-campaign {
	padding: 16px;
	background: rgba(16, 19, 48, 0.55);
}

.popup.eha-campaign .eha-campaign__panel {
	position: relative;
	width: 100%;
	max-width: 680px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(16, 19, 48, 0.28);
}

/* ----------------------------------------------------------------- close */

.popup.eha-campaign .eha-campaign__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Explicit box: the sprite-based close measured 0x0, so it was neither
	 * visible nor clickable. */
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #4d4d4d;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.popup.eha-campaign .eha-campaign__close:hover,
.popup.eha-campaign .eha-campaign__close:focus-visible {
	background: #e6e8ef;
	color: #101330;
}

/* ----------------------------------------------------------------- layout */

/*
 * Single column with the image as a full-width banner on EVERY size.
 *
 * The artwork is 1920x1080 — a 16:9 banner, as the filename says. The earlier
 * two-column desktop layout squeezed it into a 300px portrait column, which
 * cropped roughly three quarters of it away and cut the headline off. A
 * full-width 16:9 banner shows a 16:9 source with no crop at all, and crops
 * any other ratio evenly from the centre rather than lopping off one side.
 */
.popup.eha-campaign .eha-campaign__inner {
	display: block;
}

.popup.eha-campaign .eha-campaign__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	/* Never let the banner push the button below the fold on a short window. */
	max-height: 42vh;
	background: #f2f4f8;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
}

.popup.eha-campaign .eha-campaign__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.popup.eha-campaign .eha-campaign__content {
	min-width: 0;
	padding: 28px 32px 32px;
}

.popup.eha-campaign .eha-campaign__title {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	color: #101330;
}

.popup.eha-campaign .eha-campaign__body {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.6;
	color: #4d4d4d;
}

.popup.eha-campaign .eha-campaign__body p { margin: 0 0 8px; }
.popup.eha-campaign .eha-campaign__body p:last-child { margin-bottom: 0; }

/* Colours set explicitly. .btn--primary happens to be blue-on-white here, but
 * nothing in this file depends on an unverified theme modifier again. */
.popup.eha-campaign .eha-campaign__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 2px;
	background-color: #0090fc;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.popup.eha-campaign .eha-campaign__cta:hover,
.popup.eha-campaign .eha-campaign__cta:focus-visible {
	background-color: #0076cf;
	color: #fff;
}

/* The trigger exists only so the theme's popup binding can be reused. It must
 * never be seen, focused or clicked by a person. */
.eha-campaign__trigger {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	pointer-events: none;
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 767px) {
	.popup.eha-campaign {
		padding: 12px;
		/* Sit the panel slightly high: the consent bar occupies the bottom. */
		align-items: flex-start;
		padding-top: 56px;
	}

	.popup.eha-campaign .eha-campaign__panel {
		max-height: calc(100vh - 96px);
	}

	.popup.eha-campaign .eha-campaign__content {
		padding: 20px 20px 24px;
	}

	.popup.eha-campaign .eha-campaign__title { font-size: 21px; }

	.popup.eha-campaign .eha-campaign__cta {
		width: 100%;
	}
}

/* Very short viewports (landscape phones): drop the image entirely so the
 * text and button still fit without scrolling. */
@media (max-height: 520px) {
	.popup.eha-campaign .eha-campaign__image { display: none; }
	.popup.eha-campaign .eha-campaign__content { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.popup.eha-campaign .eha-campaign__close { transition: none; }
}