/**
 * Services Section Multi-Preset — responsive overrides.
 *
 * The widget's JS injects inline `grid-template-columns` based on
 * window.innerWidth at render time, which can miss the mobile breakpoint.
 * These overrides use !important to guarantee 1-column on mobile and
 * 2-column on tablet, regardless of what JS rendered inline.
 *
 * Grid wrapper is nested:
 *   .services-section-container > section > div > div[style*="grid-template-columns"]
 * so we use a descendant selector (no >).
 */

/* ===== MOBILE: force 1 column for all grid layouts ===== */
@media (max-width: 767px) {
	.elementor-widget-services_section_multi_preset .services-section-container div[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	/* Editorial List preset: stack icon → title → description vertically */
	.elementor-widget-services_section_multi_preset .ssmp-editorial-row {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 14px !important;
		width: 100% !important;
		box-sizing: border-box !important;
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
}

/* ===== TABLET: 2 columns for grid layouts ===== */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-widget-services_section_multi_preset .services-section-container div[style*="grid-template-columns: repeat("] {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ===== Elementor editor device classes (innerWidth may not match) ===== */
body.elementor-device-mobile .elementor-widget-services_section_multi_preset .services-section-container div[style*="grid-template-columns"],
.elementor-device-mobile .elementor-widget-services_section_multi_preset .services-section-container div[style*="grid-template-columns"] {
	grid-template-columns: 1fr !important;
	gap: 16px !important;
}

body.elementor-device-mobile .elementor-widget-services_section_multi_preset .ssmp-editorial-row,
.elementor-device-mobile .elementor-widget-services_section_multi_preset .ssmp-editorial-row {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 14px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding-top: 24px !important;
	padding-bottom: 24px !important;
}

body.elementor-device-tablet .elementor-widget-services_section_multi_preset .services-section-container div[style*="grid-template-columns: repeat("],
.elementor-device-tablet .elementor-widget-services_section_multi_preset .services-section-container div[style*="grid-template-columns: repeat("] {
	grid-template-columns: repeat(2, 1fr) !important;
}