/*
 * Responsive Height Controls
 *
 * This stylesheet consumes CSS variables stored on each block instance through
 * WordPress Core's native customCSS block support.
 *
 * The block-level style.css value should contain only scoped declarations and
 * managed CSS variables. Do not generate media queries inside style.css.
 *
 * Fallback cascade:
 * - Mobile falls back to tablet.
 * - Tablet falls back to desktop.
 * - Desktop has no fallback; if no desktop variable exists, the declaration is ignored.
 *
 * !important is intentionally used here because Core Cover and Spacer blocks
 * can output inline height/min-height styles. Inline styles beat normal stylesheet
 * declarations. These rules are tightly scoped to .rhc-responsive-height and
 * only affect the managed height properties.
 */

.wp-block-cover.rhc-responsive-height {
	min-height: var(--rhc-height-desktop) !important;
}

.wp-block-spacer.rhc-responsive-height {
	height: var(--rhc-height-desktop) !important;
}

@media (max-width: 1024px) {
	.wp-block-cover.rhc-responsive-height {
		min-height: var(--rhc-height-tablet, var(--rhc-height-desktop)) !important;
	}

	.wp-block-spacer.rhc-responsive-height {
		height: var(--rhc-height-tablet, var(--rhc-height-desktop)) !important;
	}
}

@media (max-width: 767px) {
	.wp-block-cover.rhc-responsive-height {
		min-height: var(--rhc-height-mobile, var(--rhc-height-tablet, var(--rhc-height-desktop))) !important;
	}

	.wp-block-spacer.rhc-responsive-height {
		height: var(--rhc-height-mobile, var(--rhc-height-tablet, var(--rhc-height-desktop))) !important;
	}
}