/**
 * BlockSieve — front-end utilities.
 *
 * Responsive device-hiding helpers, loaded only on pages that contain a block
 * with a Device condition (see AssetService::scan_for_visibility and the
 * on-demand enqueue in RenderService). The Device condition is enforced purely
 * with these CSS media queries (no user-agent detection): the server adds the
 * `blocksieve-hide-on-*` classes to the block's root element, or to a
 * layout-transparent `.blocksieve-device` wrapper when the markup has no single
 * root.
 */

/*
 * Layout-transparent wrapper for device-controlled blocks. `display: contents`
 * removes the wrapper from the box tree when the block is visible, so it does
 * not affect flex/grid/floating layouts. The media-query rules below override
 * it with `display: none` to hide the block on the target viewport.
 */
.blocksieve-device {
	display: contents;
}

/*
 * The .98 upper bounds close the gap a whole-pixel bound leaves at fractional
 * viewport widths (browser zoom, display scaling).
 */

/* Mobile viewport (phones). */
@media (max-width: 781.98px) {

	.blocksieve-hide-on-mobile {
		display: none !important;
	}
}

/* Tablet viewport. */
@media (min-width: 782px) and (max-width: 1024.98px) {

	.blocksieve-hide-on-tablet {
		display: none !important;
	}
}

/* Desktop viewport. */
@media (min-width: 1025px) {

	.blocksieve-hide-on-desktop {
		display: none !important;
	}
}