/*
 * These pages carry the same Astra per-post settings as every hand-built page
 * — site-content-layout: page-builder, site-post-title: disabled and the rest,
 * applied by ddm_service_area_apply_astra_chrome(). Astra therefore strips its own
 * container, article card and title bar by itself, and the body gets
 * ast-page-builder-template exactly as /contact-us/ does. Nothing about the page
 * chrome or the header needs CSS here.
 *
 * What remains is the two icon lists — the hero benefits and the "Why Choose DDM"
 * reasons — which need structural repairs before Elementor's own Image > Width
 * control means what it says. There are deliberately NO sizes in this file:
 * change an icon's size in the Elementor panel, not here.
 */

body.single-service_area #primary.ddm-service-area-page .site-main {
	margin: 0;
}

/*
 * Repair 1 — let the panel's Width value reach the image.
 *
 * Nothing on these pages caps the <img> to its <figure>: there is no
 * `.elementor img{max-width:100%}` rule in the rendered stylesheet. So the image
 * was sized by its own HTML attributes instead of by the widget. truck.svg has
 * attachment metadata and renders at its width="64" height="64"; the other three
 * SVGs have no dimensions in metadata, so WordPress emits no attributes and Chrome
 * falls back to 100x100 — which is why the check icon looked heavier than the
 * truck. Filling the figure hands sizing back to the panel.
 */
body.single-service_area .ddm-sa-benefit-item .elementor-image-box-img img,
body.single-service_area .ddm-sa-reason-item .elementor-image-box-img img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Repair 2 — stop the figure shrinking.
 *
 * `.elementor-image-box-content` is width:100%, so the flex line always overflows
 * its own container and both items shrink proportionally. A 40px figure would
 * render at ~35px, and the amount depended on how long the title was. Pinning the
 * figure makes the panel value exact and independent of the text beside it.
 */
body.single-service_area .ddm-sa-benefit-item .elementor-image-box-img,
body.single-service_area .ddm-sa-reason-item .elementor-image-box-img {
	flex-shrink: 0;
}

body.single-service_area .ddm-sa-benefit-item .elementor-image-box-content,
body.single-service_area .ddm-sa-reason-item .elementor-image-box-content {
	min-width: 0;
}

@media (max-width: 767px) {
	/*
	 * Repair 3 — keep the rows side by side on phones.
	 *
	 * Elementor puts its entire side-by-side layout, and every
	 * elementor-vertical-align-* rule, inside @media (min-width: 768px), then
	 * force-stacks below that with `margin-inline: auto !important`. Both of these
	 * lists are single-line labels next to a small icon and are meant to stay that
	 * way at every width, so the row is rebuilt here as a grid.
	 *
	 * `auto` for the first column keeps the panel's Width value authoritative. The
	 * !important on the margin reset exists only to outrank Elementor's own
	 * !important, and the 12px gap replaces the widget's Image Spacing margin,
	 * which that rule cancels.
	 */
	body.single-service_area .ddm-sa-benefit-item .elementor-image-box-wrapper,
	body.single-service_area .ddm-sa-reason-item .elementor-image-box-wrapper {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 12px;
		align-items: center;
		text-align: left;
	}

	body.single-service_area .ddm-sa-benefit-item .elementor-image-box-img,
	body.single-service_area .ddm-sa-reason-item .elementor-image-box-img {
		margin: 0 !important;
	}
}