/*
 * Promo hero patterns.
 *
 * Only the parts that block supports cannot express live here: the trust badge
 * dividers, the review cards that overlap the product shot, and the angled
 * split. Colour, type and spacing all come from the theme's existing custom
 * properties so a palette change in Mai carries through.
 *
 * The shared hook class is .mpw-promo-hero, NOT .mpw-hero: .mpw-hero already
 * belongs to the cover block heroes styled in custom.css and critical.css.
 *
 * Selectors are doubled up as .wp-block-group.mpw-... on purpose. Mai sets
 * position:relative on .wp-block-group, which is the same specificity as a
 * lone .mpw- class and loads after this file, so a single class loses and the
 * absolute positioning below silently turns into a relative nudge.
 */

/* ---------- Trust badge row ---------- */

.mpw-hero-badges {
	align-items: center;
}

.mpw-hero-badge p {
	margin: 0;
	line-height: 1.3;
}

/* A hairline between badges, neutral enough to read on the dark and the light
   heroes without being set per pattern. */
@media only screen and (min-width: 1000px) {
	.mpw-hero-badges > .mpw-hero-badge + .mpw-hero-badge {
		border-left: 1px solid rgba(128, 138, 148, 0.3);
		padding-left: 1.25rem;
	}
}

/* ---------- Overlapping review cards ---------- */

.wp-block-group.mpw-hero-media {
	position: relative;
}

.mpw-hero-float {
	box-shadow: 0 12px 32px var(--color-shadow, rgba(10, 20, 30, 0.1));
}

.mpw-hero-float p {
	margin: 0;
	line-height: 1.3;
}

/* Lifted over the corners of the product shot on wide screens. Below that the
   cards fall back into the normal flow underneath it. */
@media only screen and (min-width: 1000px) {
	.wp-block-group.mpw-hero-float {
		position: absolute;
		z-index: 2;
		width: 15rem;
		max-width: 72%;
	}

	.wp-block-group.mpw-hero-float--top {
		top: 4%;
		right: 0;
		left: auto;
		bottom: auto;
	}

	.wp-block-group.mpw-hero-float--bottom {
		bottom: 4%;
		left: 0;
		right: auto;
		top: auto;
	}
}

/* ---------- Angled split ---------- */

.wp-block-group.mpw-hero-diagonal__media {
	position: relative;
	min-height: 22rem;
	display: flex;
	align-items: center;
}

.mpw-hero-diagonal__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #e6ecf0;
	z-index: 0;
}

.mpw-hero-diagonal__dots {
	position: absolute;
	top: 6%;
	right: 0;
	z-index: 1;
	width: 6rem;
	height: 5rem;
	background-image: radial-gradient(var(--color-custom-1, #506e7d) 1.5px, transparent 1.6px);
	background-size: 1rem 1rem;
	opacity: 0.3;
	pointer-events: none;
}

.mpw-hero-diagonal__panel p {
	margin: 0;
	line-height: 1.35;
}

@media only screen and (min-width: 1000px) {
	.mpw-hero-diagonal__media::before {
		clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
	}

	/* Held off the right edge so the dot grid behind it stays visible. */
	.wp-block-image.mpw-hero-diagonal__img {
		position: relative;
		z-index: 3;
		width: 90%;
		margin-left: 0;
		margin-right: auto;
		transform: rotate(-2.5deg);
	}

	.wp-block-image.mpw-hero-diagonal__img img {
		box-shadow: 0 18px 44px var(--color-shadow, rgba(10, 20, 30, 0.1));
	}

	.wp-block-group.mpw-hero-diagonal__panel {
		position: absolute;
		right: 0;
		bottom: 0;
		left: auto;
		top: auto;
		z-index: 4;
		width: 20rem;
		max-width: 80%;
		border-start-start-radius: 18px;
	}
}

/* ---------- Card internals ---------- */

/* Mai overrides block gap inside constrained groups, so the checklist rhythm
   and the rule above the buttons are set here rather than on the blocks. */
.mpw-hero-checklist > * + * {
	margin-top: 0.5rem;
}

.wp-block-separator.mpw-hero-rule {
	margin: 1.75rem 0;
	opacity: 0.2;
}

/* ---------- Headline scale on small screens ---------- */

/* Mai's h1 scale drops far enough on phones that an unsized hero headline ends
   up smaller than the subhead under it. The home page hero works around this
   with page level CSS; these patterns carry the fix with them instead. Headings
   that were given an explicit size preset are left alone. */
@media only screen and (max-width: 1000px) {
	.mpw-promo-hero h1:not([class*="-font-size"]) {
		font-size: 2.25rem;
		line-height: 1.15;
	}
}

@media only screen and (max-width: 600px) {
	.mpw-promo-hero h1:not([class*="-font-size"]) {
		font-size: 2rem;
	}
}