/**
 * Home hero — let the hero grow with its content.
 *
 * Why: Spectra emits overflow:clip on the hero (required for the rounded
 * bottom corners) AND max-height:70vh in every media query. On any laptop
 * viewport under ~858px tall, 70vh drops below the hero's 600px content
 * height and the buttons get clipped off the bottom.
 */

.wp-block-spectra-container.wp-block-spectra-container.wp-block-spectra-container[data-spectra-id='5c04d5a8'] {
	max-height: none !important;
	height: auto !important;
}

@media (max-width: 767.98px) {
	.wp-block-spectra-container[data-spectra-id='spectra-mfqwu59n-laoz8z'] {
		height: auto !important;
		min-height: 544px;
	}
}

/**
 * Mobile hero — let her face show.
 *
 * On phones the hero photo (equipment-va-image_white.jpg, subject's face upper-left)
 * was buried by (1) an opaque light gradient wash across the top third and (2) the
 * vertically-centered text box. Soften the gradient and drop the text box to the
 * bottom so the top of the photo (her face) reads clearly. Triple-class specificity
 * overrides Spectra's generated ::before without !important. Mobile only — desktop
 * (a different image) and tablet are untouched.
 */
@media (max-width: 767.98px) {
	/* (1) More transparent gradient overlay. */
	.wp-block-spectra-container.wp-block-spectra-container.wp-block-spectra-container[data-spectra-id='5c04d5a8']::before {
		background: linear-gradient(180deg, rgba(239, 238, 244, 0.45) 0%, rgba(255, 255, 255, 0) 28%);
	}

	/* (2) Move the text box down, off her face. */
	.wp-block-spectra-container.wp-block-spectra-container[data-spectra-id='spectra-mfqwu59n-laoz8z'] {
		justify-content: flex-end;
	}
	.wp-block-spectra-container.wp-block-spectra-container[data-spectra-id='spectra-10edda5a-root'] {
		margin-top: auto;
	}
}