/**
 * Site-wide horizontal content box.
 *
 * Figma draws every section of the product detail page (frame 205:16) and of
 * the Infrastructure page (frame 105:17) on one vertical rule: the content
 * starts 284px from the left of the 1920 artboard and is 1352px wide, centred.
 * Both pages use the same box, so they read as one column and as one site.
 *
 * The build had drifted a long way from that on both. Each section was taking
 * its width from whatever the theme or the Elementor editor happened to set,
 * so the left edges landed at 288, 223, 208, 215, 218, 78 and 0 — visibly
 * ragged pages. product-detail.css was already written against this file
 * ("width and gutters come from the shared content box"), but the file itself
 * was never created and its enqueue was left commented out, so those sections
 * silently fell back to the theme defaults.
 *
 * This file is that content box. Rather than correcting each section's own
 * width — which is what produced the drift in the first place — it sets one
 * box and points every width-carrying element at it, so a new section is
 * aligned by default and there is a single number to change.
 *
 * Loaded only on the pages that have been measured against Figma and checked
 * at every breakpoint: the product detail template and Infrastructure. Home,
 * About, Quality Assurance and Contact were QA'd against their current widths,
 * so bringing them in is a separate job with its own visual check.
 *
 * @version 1.0.0
 * @package MRB
 */

:root {
	/* Figma 205:16 — 1352px of content inside a 1920px artboard. */
	--mrb-box: 1352px;
	/* Side gutter once the viewport is narrower than the box. */
	--mrb-box-gutter: 24px;
}

@media (max-width: 991px) {
	:root {
		--mrb-box-gutter: 20px;
	}
}

@media (max-width: 767px) {
	:root {
		--mrb-box-gutter: 16px;
	}
}

/* ------------------------------------------------------------------
 * The box itself.
 *
 * Applied to the outermost width-carrier of each section: Elementor's own
 * .elementor-container / .e-con-inner, and the theme's .bs-container-* which
 * some widgets render instead. !important is needed because Elementor writes
 * per-section max-width and padding into the post CSS, which loads after the
 * theme stylesheets.
 * ------------------------------------------------------------------ */

/* The hook comes from mrb_mark_page_content() in inc/general-functions.php,
   which marks only the page's own Elementor document — the header and footer
   are separate documents with identical markup and their own full-bleed
   layout, so they must stay outside this. */
.mrb-page-content {
	display: contents;
}

.mrb-page-content .elementor-top-section > .elementor-container,
.mrb-page-content .e-con > .e-con-inner,
.mrb-page-content .elementor-section [class*="bs-container"] {
	width: min(100% - (var(--mrb-box-gutter) * 2), var(--mrb-box)) !important;
	max-width: min(100% - (var(--mrb-box-gutter) * 2), var(--mrb-box)) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Anything nested inside a container that already sits on the box must not be
   inset a second time — it just fills its parent. This covers both the
   theme's .bs-container-* and Elementor's own inner sections, which
   Infrastructure uses to build the machinery band and which would otherwise
   land 24px inside the rule the rest of the page sits on. */
.mrb-page-content .elementor-top-section > .elementor-container [class*="bs-container"],
.mrb-page-content .elementor-inner-section > .elementor-container {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	/* Below 1200px Elementor gives inner containers their own side padding,
	   which would inset the machinery heading a second time — the outer
	   container has already placed it on the rule. */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ------------------------------------------------------------------
 * The rule is the *content* edge, not just the container edge.
 *
 * Elementor renders its column gutter as horizontal padding inside each
 * column, so a section whose container sits exactly on 284 still draws its
 * heading at 294 and its cards at 299. Figma has none of that: the machinery
 * row (105:230) starts at 284.5 and every heading starts at 284. The 9.5px
 * inset on the process row (105:143) is an artifact of a 1333px auto-layout
 * centred in 1352, not a designed offset, so it is not reproduced.
 *
 * Two cases, because the gutter means different things:
 * ------------------------------------------------------------------ */

/* One column — there is no neighbour to separate, so the gutter is pure
   inset and simply pushes the content off the rule. This is what moved the
   section headings and the machinery cards (a grid inside a single column). */
.mrb-page-content .elementor-top-section > .elementor-container > .elementor-col-100 > .elementor-widget-wrap,
.mrb-page-content .elementor-inner-section > .elementor-container > .elementor-col-100 > .elementor-widget-wrap {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Several columns — the gutter is doing real work between the cards, so it
   stays. Instead the row is pulled outward by exactly one gutter on each
   side, which lands the outer card edges on the rule and leaves every column
   the same width: (box + 2 × 15px) centred puts the card edge back on
   (100% - box) / 2.

   This compensation is only correct while the 15px gutter is actually there.
   Both pages drop it once the grid reflows — and at different widths, because
   product-detail.css swaps the padding for a flex `gap` on tablet while
   Infrastructure keeps the padding down to the phone breakpoint. Applying the
   compensation past those points would push the cards a gutter's width past
   the rule and out toward the viewport edge, so each page is matched to where
   its own gutter lives. Verified against the computed padding at 1200/1201
   and 767/768. */
@media (min-width: 1201px) {
	.single-services .mrb-page-content .elementor-top-section > .elementor-container.elementor-column-gap-custom {
		width: calc(min(100% - (var(--mrb-box-gutter) * 2), var(--mrb-box)) + 30px) !important;
		max-width: none !important;
	}
}

@media (min-width: 768px) {
	.page-id-61 .mrb-page-content .elementor-top-section > .elementor-container.elementor-column-gap-custom {
		width: calc(min(100% - (var(--mrb-box-gutter) * 2), var(--mrb-box)) + 30px) !important;
		max-width: none !important;
	}
}

/* ------------------------------------------------------------------
 * Deliberate exception: the types slider.
 *
 * Figma 205:201 starts the slider on the same 284px rule as everything else
 * but runs it to the right edge of the artboard (L=284, R=1920) so the fourth
 * card is cut by the viewport and the row reads as continuing. Only the right
 * side leaves the box; the left edge stays on the rule.
 * ------------------------------------------------------------------ */

.mrb-page-content .elementor-section:has(.mrb-types-slider-section) > .elementor-container {
	width: auto !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: max(var(--mrb-box-gutter), (100% - var(--mrb-box)) / 2) !important;
}

/* ------------------------------------------------------------------
 * Deliberate exception: Why Choose Us.
 *
 * Figma 244:440 builds this section as a full-bleed band — the grayscale
 * photo covers the whole 1920 artboard, the light #f8f8f9 panel runs off the
 * left edge of the screen, and the ring of circles is cropped by both edges.
 * Only the copy inside the band sits on the 284px rule.
 *
 * So the box belongs on the band's inner container, not on the section: the
 * .bs-choose-4-area band and everything Elementor wraps it in must span the
 * viewport, and .bs-container-2 inside it carries the rule. Boxing the
 * section instead — which is what the general rule above did — cropped the
 * photo to 1352px and turned a full-bleed band into a floating card.
 *
 * This is the same composition home.css already builds for the Home page
 * (Figma 50:10858), so the widget's own styling needs no changes here; it
 * only needs the room the design assumes.
 * ------------------------------------------------------------------ */

.mrb-page-content .why-choose-container > .elementor-container,
.mrb-page-content .why-choose-container .bs-choose-4-area {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	/* Below 1200px the band carries its own side padding, which would inset
	   the copy a second time and push it off the rule the rest of the page
	   sits on. The gutter is the box's job here, as everywhere else. */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Wins over the "nested container fills its parent" rule above, which would
   otherwise stretch the copy across the full-bleed band. */
.mrb-page-content .why-choose-container .bs-choose-4-area [class*="bs-container"] {
	width: min(100% - (var(--mrb-box-gutter) * 2), var(--mrb-box)) !important;
	max-width: min(100% - (var(--mrb-box-gutter) * 2), var(--mrb-box)) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}