/**
 * Hero — the one thing theme.json can't express: a responsive Cover overlay and
 * the fixed-width copy column.
 *
 * Desktop uses a left-to-right wash (set inline on the block) so the headline
 * sits on the light surface and the photo bleeds off the right. On narrow
 * screens that side-wash can't protect the text, so we switch to a top-down
 * wash: the headline sits on near-solid surface up top while the photo (and the
 * "I can see now" sign) stays visible below. Loaded only on pages with the hero.
 */

/* The copy is a plain block capped to a readable column and left-aligned in the
   wide band, so its left edge lines up with the header. Its children fill it. */
.ab-hero__copy {
	max-width: 520px;
}

/* Keep the two CTAs on one line, vertically centred (desktop). */
.ab-hero__copy .wp-block-buttons {
	flex-wrap: nowrap;
	align-items: center;
}

.ab-hero__copy .wp-block-button {
	flex: 0 0 auto;
}

.ab-hero__copy .ab-button-plain .wp-block-button__link {
	white-space: nowrap;
}

/* Float the stats strip up over the hero's lower edge (design: the white card
   overlaps the photo). Only when it directly follows the hero. */
.ab-hero {
	padding-bottom: 6rem !important;
}

.ab-hero + .ab-stats-strip {
	margin-top: -4rem;
	position: relative;
	z-index: 2;
}

@media (max-width: 781px) {
	/* Phones: copy spans the column; switch to a top-down wash and anchor the
	   text to the top so the photo and the sign read in the lower half. */
	.ab-hero__copy {
		max-width: 100%;
	}

	/* Phones are too narrow for both CTAs on one line — let them wrap. */
	.ab-hero__copy .wp-block-buttons {
		flex-wrap: wrap;
	}

	.ab-hero .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			rgb(247, 248, 250) 0%,
			rgba(247, 248, 250, 0.94) 40%,
			rgba(247, 248, 250, 0.4) 72%,
			rgba(247, 248, 250, 0.12) 100%
		) !important;
	}

	.ab-hero {
		align-items: flex-start;
		min-height: 560px;
	}
}