/*
 * Hero part — device switching.
 *
 * The original Hero component renders ONE autoplay-video (desktop file when
 * mediaQuery.pc, otherwise the mobile file) and the CTA button only when
 * mediaQuery.mobile. template-parts/hero.php renders both videos
 * (data-device="pc" | "mobile") and the button; these rules hide what the
 * current device must not see.
 */

/* 1. Once assets/js/responsive.js has classified the viewport (#root.pc / #root.mobile). */
#root.pc .hero .autoplay-video[data-device="mobile"],
#root.mobile .hero .autoplay-video[data-device="pc"],
#root.pc .hero .button {
	display: none;
}

/* 2. Before that (first paint before DOMContentLoaded, or no JS): the same breakpoint
 *    responsive.js uses — pc = window width > 1024px, mobile = width <= 1024px. */
@media not all and (max-width: 1024px) {
	#root:not(.pc):not(.mobile) .hero .autoplay-video[data-device="mobile"],
	#root:not(.pc):not(.mobile) .hero .button {
		display: none;
	}
}
@media (max-width: 1024px) {
	#root:not(.pc):not(.mobile) .hero .autoplay-video[data-device="pc"] {
		display: none;
	}
}