/* ============================================================================
 * wideum-resp-features.css
 * ----------------------------------------------------------------------------
 * RESPONSIVE fidelity for the custom widget `wideum-features`
 * (widgets/class-widget-features.php) — the interactive "scroll-sync" feature
 * list (item list + image-swap panel). Owned exclusively by this file + that
 * widget's PHP.
 *
 * PROBLEM this file fixes
 * -----------------------
 * On production the block sits inside the theme's `.container`, which supplies
 * the horizontal gutter at every breakpoint:
 *     .container         { padding: 0 10%; }
 *     @media <=700px     { .container { padding: 0 25px; } }
 * In the Elementor build a global rule
 *     .elementor-widget-wideum-features .container { padding:0; max-width:100%; }
 * (wideum-legacy.css) NEUTRALISES that gutter so the boxed 1280 Elementor
 * container is not restricted a SECOND time on DESKTOP — correct there, but it
 * also strips the gutter on tablet/mobile, where prod keeps it. Result on local:
 * the subtitle, the active feature box and the swapped image all run edge-to-edge
 * (touching the screen border) instead of sitting inside prod's ~25px / 10%
 * gutter.
 *
 * FIX: restore the theme's own `.container` gutter for THIS widget ONLY on the
 * viewports where prod applies it and where the Elementor container already
 * equals the viewport width (<=1050px, i.e. the JS mobile/tablet layout) — never
 * on desktop, where the neutralise must stand so content stays 1280 wide.
 * Higher specificity ( .elementor-widget-wideum-features .features .container )
 * wins over the neutralise rule ( .elementor-widget-wideum-features .container ).
 *
 * The image-swap itself (which image shows, active item, move-into-item on
 * mobile) is driven by JS (assets/js/wideum-widgets.js, module "Features") and
 * ALREADY works on mobile — images are moved inside the active item. No JS
 * change is required; this file is purely layout/gutter fidelity.
 * ==========================================================================*/

/* Tablet + mobile band: recreate prod's `.container` gutter (prod = 0 10%). */
@media (max-width: 1050px) {
	.elementor-widget-wideum-features .features .container {
		padding-left: 10%;
		padding-right: 10%;
		box-sizing: border-box;
	}
}

/* Mobile: prod switches the gutter to a fixed 25px (theme's <=700px rule). */
@media (max-width: 700px) {
	.elementor-widget-wideum-features .features .container {
		padding-left: 25px;
		padding-right: 25px;
	}
}