/**
 * Homepage hero + trust strip — presentation only.
 *
 * Loaded on the front page only, after the plugin's `em-home-hero`
 * stylesheet. Every rule is scoped to `body.home .em-hero`; markup, copy
 * and links stay with the plugin. The photo URL itself is swapped through
 * the `--em-hero-bg` variable in inc/enqueue.php.
 *
 * Breakpoints mirror the plugin's ranges so each override lands on the
 * same viewport band it refines.
 *
 * @package ExpertMatrimony
 */

body.home .em-hero {
	--emt-hero-ink: #1f1f1f;
	--emt-hero-body: #3d3a37;
	--emt-hero-muted: #66615c;
	--emt-hero-icon-bg: #fff7ee;
	--emt-hero-gold-line: rgba(212, 160, 23, 0.28);
	--emt-hero-gold-rule: rgba(212, 160, 23, 0.55);
}

/*
 * The plugin sizes the columns 45% + 55% and adds a row gap, so the empty
 * image spacer always ends one gap-width past the content box (8px past the
 * page at 768–1024). Letting it take the remaining space keeps it inside.
 */
body.home .em-hero .em-hero__right {
	flex: 1 1 0;
	width: auto;
	max-width: none;
	min-width: 0;
}

/* Soft hand-off into the cream MIA section below. */
@media (min-width: 768px) {
	body.home .em-hero::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 64px;
		background: linear-gradient(180deg, rgba(253, 244, 234, 0), var(--em-hero-bg-color, #fdf4ea));
		pointer-events: none;
	}
}

/* ---------- Message ---------- */

body.home .em-hero .em-hero__rule {
	width: 72px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--em-hero-title), var(--em-hero-gold));
	margin: 0 0 22px;
}

body.home .em-hero .em-hero__rule--after {
	margin: 22px 0 20px;
}

body.home .em-hero .em-hero__title {
	font-size: 44px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

body.home .em-hero .em-hero__desc {
	max-width: 440px;
	margin: 0 0 30px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--emt-hero-body);
}

body.home .em-hero .em-hero__actions {
	gap: 14px;
}

body.home .em-hero .em-hero__btn {
	min-height: 52px;
	padding: 0 30px;
	border-radius: 10px;
	font-size: 15.5px;
	letter-spacing: 0.01em;
}

body.home .em-hero .em-hero__btn--primary {
	box-shadow: 0 10px 22px -12px rgba(142, 27, 36, 0.6);
}

body.home .em-hero .em-hero__btn--outline {
	padding: 0 26px;
	border-width: 1.5px;
}

body.home .em-hero .em-hero__btn:focus-visible {
	outline: 2px solid var(--em-hero-brand-hover);
	outline-offset: 3px;
}

/* ---------- Trust strip ---------- */

body.home .em-hero .em-hero__features {
	margin-top: 28px;
	padding: 26px 10px;
	background: #fff;
	border: 1px solid var(--emt-hero-gold-line);
	border-radius: 16px;
	box-shadow: 0 18px 40px -24px rgba(96, 40, 24, 0.3), 0 2px 8px rgba(96, 40, 24, 0.04);
}

body.home .em-hero .em-hero__feature {
	padding: 0 16px;
}

body.home .em-hero .em-hero__feature:not(:last-child)::after {
	top: 6px;
	bottom: 6px;
	background: linear-gradient(180deg, rgba(212, 160, 23, 0), var(--emt-hero-gold-rule) 22%, var(--emt-hero-gold-rule) 78%, rgba(212, 160, 23, 0));
}

body.home .em-hero .em-hero__icon {
	width: 46px;
	height: 46px;
	margin: 0 auto 12px;
	border: 1.5px solid rgba(179, 35, 46, 0.8);
	background: var(--emt-hero-icon-bg);
}

body.home .em-hero .em-hero__icon svg {
	width: 22px;
	height: 22px;
}

body.home .em-hero .em-hero__feature-title {
	margin: 0 0 6px;
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--emt-hero-ink);
	text-wrap: balance;
}

body.home .em-hero .em-hero__feature-desc {
	max-width: 210px;
	margin: 0 auto;
	font-size: 14px;
	line-height: 1.55;
	color: var(--emt-hero-muted);
	text-wrap: pretty;
}

/* ---------- Desktop / laptop ---------- */

/* The plugin's 520px image spacer leaves a gap under the shorter message. */
@media (min-width: 1600px) {
	body.home .em-hero .em-hero__left {
		padding-top: 32px;
	}

	body.home .em-hero .em-hero__right {
		min-height: 460px;
	}

	body.home .em-hero .em-hero__title {
		font-size: 46px;
	}
}

/*
 * Past ~2200px the full-width photo is cut at the couple's chests. A little
 * extra height (matching the natural height at 2200px) shows them down to
 * their hands; the content is centred in it rather than gapped.
 */
@media (min-width: 2200px) {
	body.home .em-hero {
		min-height: 36vw;
	}

	body.home .em-hero .em-hero__inner {
		justify-content: center;
	}

	body.home .em-hero .em-hero__row {
		flex-grow: 0;
	}
}

@media (min-width: 1440px) and (max-width: 1599px) {
	body.home .em-hero .em-hero__title {
		font-size: 42px;
	}

	body.home .em-hero .em-hero__feature-title {
		font-size: 16.5px;
	}
}

@media (min-width: 1025px) and (max-width: 1439px) {
	body.home .em-hero .em-hero__title {
		font-size: 39px;
	}

	body.home .em-hero .em-hero__desc {
		font-size: 16.5px;
	}

	body.home .em-hero .em-hero__features {
		padding: 22px 8px;
	}

	body.home .em-hero .em-hero__feature {
		padding: 0 12px;
	}

	body.home .em-hero .em-hero__feature-title {
		font-size: 16px;
	}

	body.home .em-hero .em-hero__feature-desc {
		font-size: 13.5px;
	}
}

/* Short laptop screens: keep the trust strip inside the first viewport. */
@media (min-width: 1025px) and (max-height: 800px) {
	body.home .em-hero .em-hero__title {
		font-size: 37px;
	}

	body.home .em-hero .em-hero__rule {
		margin-bottom: 18px;
	}

	body.home .em-hero .em-hero__rule--after {
		margin: 18px 0 16px;
	}

	body.home .em-hero .em-hero__desc {
		margin-bottom: 22px;
	}

	body.home .em-hero .em-hero__btn {
		min-height: 48px;
	}

	body.home .em-hero .em-hero__features {
		margin-top: 18px;
		padding: 18px 8px;
	}

	body.home .em-hero .em-hero__icon {
		width: 40px;
		height: 40px;
		margin-bottom: 10px;
	}

	body.home .em-hero .em-hero__icon svg {
		width: 20px;
		height: 20px;
	}
}

/* ---------- Tablet ---------- */

@media (min-width: 768px) and (max-width: 1024px) {
	/* Keeps the groom's face inside the frame at 768px. */
	body.home .em-hero {
		background-position: 73% top;
	}

	/* The copy sits over the photo here; a light cream wash keeps it legible. */
	body.home .em-hero::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 60%;
		background: linear-gradient(90deg, rgba(253, 244, 234, 0.82), rgba(253, 244, 234, 0.62) 55%, rgba(253, 244, 234, 0));
		pointer-events: none;
	}

	body.home .em-hero .em-hero__left {
		flex-basis: 52%;
		width: 52%;
		max-width: 52%;
	}

	body.home .em-hero .em-hero__title {
		font-size: clamp(33px, 1.6vw + 21px, 38px);
	}

	body.home .em-hero .em-hero__desc {
		font-size: 16px;
	}

	body.home .em-hero .em-hero__features {
		padding: 10px 12px;
	}

	body.home .em-hero .em-hero__feature {
		padding: 18px 14px;
	}

	body.home .em-hero .em-hero__feature:not(:last-child)::after {
		top: 18px;
		bottom: 18px;
	}

	body.home .em-hero .em-hero__feature:nth-child(n + 4) {
		margin-top: 0;
		border-top-color: var(--emt-hero-gold-line);
	}

	body.home .em-hero .em-hero__feature-title {
		font-size: 16px;
	}

	body.home .em-hero .em-hero__feature-desc {
		max-width: 300px;
		font-size: 13.5px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	body.home .em-hero {
		padding: 32px 20px 24px;
	}

	body.home .em-hero .em-hero__rule {
		margin: 0 auto 18px;
	}

	body.home .em-hero .em-hero__rule--after {
		margin: 18px auto 16px;
	}

	body.home .em-hero .em-hero__title {
		font-size: clamp(27px, 7.4vw, 31px);
		line-height: 1.22;
	}

	body.home .em-hero .em-hero__desc {
		max-width: 36ch;
		margin: 0 auto 24px;
		font-size: 15.5px;
		line-height: 1.6;
	}

	body.home .em-hero .em-hero__actions {
		gap: 10px;
	}

	body.home .em-hero .em-hero__btn {
		min-height: 50px;
		padding: 0 24px;
	}

	/*
	 * The plugin hides the photo below 768px. Reuse the same image on the
	 * empty spacer so the couple gets its own band between the buttons and
	 * the trust strip. The crop shows image x 47.5%–97.5% (the couple sits at
	 * about 54%–94%, heads at the very top) from the heads down to their hands.
	 */
	body.home .em-hero .em-hero__right {
		display: block;
		flex: none;
		min-height: 0;
		margin: 4px -20px 0;
		aspect-ratio: 5 / 4;
		background-image: var(--em-hero-bg);
		background-repeat: no-repeat;
		background-size: 200% auto;
		background-position: 95% 0;
		-webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 78%, transparent);
		mask-image: linear-gradient(180deg, transparent, #000 7%, #000 78%, transparent);
	}

	body.home .em-hero .em-hero__features {
		margin-top: -40px;
		padding: 4px 18px;
	}

	body.home .em-hero .em-hero__feature {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 2px;
		align-items: start;
		padding: 16px 0;
		text-align: left;
	}

	body.home .em-hero .em-hero__feature:not(:last-child) {
		border-bottom-color: var(--emt-hero-gold-line);
	}

	body.home .em-hero .em-hero__icon {
		grid-row: 1 / span 2;
		width: 40px;
		height: 40px;
		margin: 0;
	}

	body.home .em-hero .em-hero__icon svg {
		width: 19px;
		height: 19px;
	}

	body.home .em-hero .em-hero__feature-title {
		margin: 0;
		font-size: 15.5px;
		text-align: left;
	}

	body.home .em-hero .em-hero__feature-desc {
		max-width: none;
		margin: 0;
		font-size: 13.5px;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home .em-hero .em-hero__btn {
		transition: none;
	}
}