/**
 * Styles for the MRB Content + Media Section widget (Quality Assurance
 * page, Figma frame 238:460).
 *
 * Loaded by Elementor only on pages using the widget (get_style_depends).
 * Section rhythm (--mrb-pd-gap / --mrb-pd-head-gap) comes from
 * section-rhythm.css, loaded as a dependency of this stylesheet.
 *
 * @package MRB
 */

/* Section band: white, standard vertical rhythm, 1344px content box shared
   with every other custom section (!important beats padding/width saved in
   the Elementor editor's post CSS, which loads after this file). */
/* Per-side section padding: 40px desktop (80px between sections), 30px on
   tablets (60px total), 20px on phones (40px total). Head→content gap steps
   down with it. */
:root {
	--mrb-qa-pad: 40px;
	--mrb-qa-head-gap: 63px;
}

@media (max-width: 1199px) {
	:root {
		--mrb-qa-pad: 30px;
		--mrb-qa-head-gap: 40px;
	}
}

@media (max-width: 767px) {
	:root {
		--mrb-qa-pad: 20px;
		--mrb-qa-head-gap: 24px;
	}
}

.e-con:has(.mrb-content-media),
.elementor-section:has(.mrb-content-media) {
	background-color: #ffffff;
	padding: calc(2 * var(--mrb-qa-pad)) 0 var(--mrb-qa-pad) !important;
}

/* Width and side gutter come from the site-wide content box in
   containers.css; only the vertical padding is this section's own. */
.e-con:has(.mrb-content-media) > .e-con-inner,
.elementor-section:has(.mrb-content-media) > .elementor-container {
	padding-top: 0;
	padding-bottom: 0;
}

.elementor-section:has(.mrb-content-media) .elementor-widget-wrap {
	padding: 0;
}

/* Full-width intro: DM Sans 400 18/23 #2d2d2d (Figma's 16px first paragraph is
   normalized to the body size used everywhere else on the site), 32px gap
   to the two-column block below.

   The family has to be declared, not inherited: this widget renders inside a
   theme wrapper that sets Albert Sans, so leaving it off silently rendered
   every paragraph of the section in the heading face. Figma 238:462/238:463
   are both DM Sans. */
.mrb-cm-intro {
	font-family: "DM Sans", sans-serif;
	font-weight: 400;
	font-size: 18px;
	color: #2d2d2d;
	line-height: 23px;
	margin-bottom: 32px;
}

/* 12px between intro paragraphs, bold leading letter, per Figma. */
.mrb-cm-intro p {
	margin-bottom: 12px;
}

.mrb-cm-intro p:last-child {
	margin-bottom: 0;
}

.mrb-cm-intro p:first-child::first-letter {
	font-weight: 700;
}

/* Two-column split: 738px text / 525px image, 89px gap, per Figma. */
.mrb-cm-grid {
	display: grid;
	grid-template-columns: 738fr 525fr;
	gap: clamp(40px, 4.6vw, 89px);
	align-items: start;
}

.mrb-content-media.mrb-cm-image-left .mrb-cm-grid {
	grid-template-columns: 525fr 738fr;
}

.mrb-content-media.mrb-cm-image-left .mrb-cm-media {
	order: -1;
}

/* Heading: Albert Sans 700 54/65 #1a1a1a like the other section heads, 20px
   to the body copy. Weight and colour are declared rather than inherited —
   the theme wrapper was rendering this at 500 and pure black, so it read
   noticeably lighter and harder than every other section head on the site
   (Figma 238:467). */
.mrb-cm-heading {
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 2.8vw, 54px);
	line-height: 1.2;
	color: #1a1a1a;
	margin-bottom: 20px;
}

/* Body copy beside the image: DM Sans 400 18/23 #2d2d2d (Figma 238:468) —
   same reason as the intro, the family must be stated. */
.mrb-cm-text {
	font-family: "DM Sans", sans-serif;
	font-weight: 400;
	font-size: 18px;
	color: #2d2d2d;
	line-height: 23px;
}

/* Body copy runs as one tight block in Figma — no paragraph gaps. */
.mrb-cm-text p {
	margin-bottom: 0;
}

/* Subheading block: Albert Sans 600 28/34, 32px above, 20px to the list. */
.mrb-cm-subheading {
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: clamp(22px, 1.5vw, 28px);
	line-height: 1.2;
	color: #1a1a1a;
	margin: 32px 0 20px;
}

/* Bullet list: DM Sans 18/23 #1a1a1a, per Figma (overrides the Inter 500 look
   the shared .mrb-bullet-list carries on product pages).

   Indent: the list must START on the same left edge as the heading and the
   paragraphs around it. It previously carried margin-left:30px ON TOP of the
   32px padding-left that ul inherits from the theme/UA default, pushing the
   item text 62px past the surrounding copy at every breakpoint. The margin is
   gone and the padding is now declared explicitly (never inherited), sized so
   the BULLET sits on the content edge and the text hangs just inside it —
   standard hanging-indent behaviour, so the block reads as flush left. */
.mrb-cm-list {
	font-family: "DM Sans", sans-serif;
	font-size: 18px;
	line-height: 23px;
	font-weight: 400;
	color: #1a1a1a;
	margin: 0;
	padding-left: 18px;
}

.mrb-cm-list li {
	margin-bottom: 0;
}

/* Image: top-aligned with the body copy (85px offset = heading line 65px +
   its 20px margin), covers its 525×362 box. */
.mrb-cm-media {
	margin-top: 85px;
}

.mrb-cm-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 525 / 362;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Quality Management System section (Figma 238:474) — overrides for the
   theme's tx_about style_4 widget inside .quality-system-container.
--------------------------------------------------------------------------- */

/* Standard rhythm padding (theme ships pt-135 pb-100). */
.quality-system-container .bs-about-5-area {
	padding-top: var(--mrb-qa-pad);
	padding-bottom: var(--mrb-qa-pad);
}

/* The theme widget wraps its content in a Bootstrap .container (max-width
   1320/1140/960/720 per breakpoint), so its left edge never lined up with
   the rest of the page. containers.css now puts every .container on the
   shared content box site-wide, so no override is needed here. */

/* Theme right-aligns the section title block at 980px; Figma has the
   eyebrow + heading flush left at full container width. */
.quality-system-container .bs-about-5-sec-title {
	max-width: 100%;
	margin-left: 0;
}

/* Heading and eyebrow use a GSAP SplitText scroll reveal that can leave the
   text invisible — force every split fragment visible. */
.quality-system-container .wa-split-right,
.quality-system-container .wa-split-right .split-line,
.quality-system-container .wa-split-right .split-line div {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* Eyebrow: Inter 500 18px orange with a hairline running to the right edge,
   per Figma. */
.quality-system-container .bs-subtitle-5 {
	display: flex;
	width: 100%;
	align-items: center;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #f5821f;
	overflow: visible;
	padding-bottom: 12px;
	border-bottom: 1px solid #d9d9d9;
}

/* Heading: Albert Sans 700 54/65 #1a1a1a like the other section heads,
   63px to the content columns per Figma. */
.quality-system-container .tx-title {
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 2.8vw, 54px);
	line-height: 1.2;
	color: #1a1a1a;
	margin-bottom: 0;
}

.quality-system-container .bs-about-5-sec-title {
	margin-bottom: var(--mrb-qa-head-gap);
}

/* Feature list: Figma fills column-wise (4 left / 3 right), not row-wise. */
.quality-system-container .bs-about-5-feature {
	display: block;
	columns: 2;
	column-gap: 30px;
	max-width: 687px;
}

.quality-system-container .bs-about-5-feature li {
	break-inside: avoid;
	margin-bottom: 10px;
}

/* Cancel the last row's 10px item margin so the section's bottom padding
   measures exactly the rhythm value. */
.quality-system-container .bs-about-5-feature {
	margin-bottom: -10px;
}

/* Figma has only the top-center bg shape — hide the theme's second
   bottom-left wireframe shape. */
.quality-system-container .bs-about-5-bg-shape-2 {
	display: none;
}

/* 48px between the intro paragraph and the left image, per Figma. */
.quality-system-container .bs-about-5-left .disc {
	margin-bottom: 48px;
}

@media (max-width: 767px) {
	.quality-system-container .bs-about-5-feature {
		columns: 1;
	}
}

/* ---------------------------------------------------------------------------
   Testing & Inspection Facilities section (Figma 238:513) — tx_heading in
   .quality-facility-container plus two card rows (.quality-cards-row).
--------------------------------------------------------------------------- */

/* Rhythm top padding on the heading band; the last card row carries the
   bottom padding. Head-gap from heading to cards, 32px between the rows. */
/* !important beats the Elementor editor's per-page post CSS, which loads
   after this file with higher specificity. */
.elementor-section.quality-facility-container {
	padding: var(--mrb-qa-pad) 0 0 !important;
}

.elementor-section.quality-cards-row {
	padding: 0 !important;
	margin: 0 !important;
}


.elementor-section.quality-cards-row-2 {
	padding-bottom: var(--mrb-qa-pad) !important;
}

/* Same GSAP SplitText fallback as the QMS section — keep the heading
   visible. */
.quality-facility-container .wa-split-right,
.quality-facility-container .wa-split-right .split-line,
.quality-facility-container .wa-split-right .split-line div,
.quality-facility-container .wa-split-clr,
.quality-facility-container .wa-split-clr div {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* Eyebrow: Inter 500 18px orange, hairline underneath, empty icon slot
   hidden. */
.quality-facility-container .bs-subtitle-1 {
	display: flex;
	width: 100%;
	align-items: center;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;
	color: #f5821f;
	overflow: visible;
	padding-bottom: 12px;
	border-bottom: 1px solid #e5e5e8;
	margin-bottom: 24px;
}

.quality-facility-container .bs-subtitle-1 .icon {
	display: none;
}

/* Heading: Albert Sans 600 54/56 #1a1a1a (theme ships bs-sec-title-1 at
   70px Inter). */
.quality-facility-container .tx-title {
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: clamp(30px, 2.8vw, 54px);
	line-height: 1.04;
	color: #1a1a1a;
	margin-bottom: 0;
}

/* Card rows sit on the site-wide content box (containers.css); only the
   vertical padding and the 16px column gap are this section's own. */
.quality-facility-container > .elementor-container,
.quality-cards-row > .elementor-container {
	padding-top: 0;
	padding-bottom: 0;
}

.quality-cards-row > .elementor-container {
	gap: 16px;
}

.quality-cards-row .elementor-column {
	width: calc((100% - 32px) / 3);
}

/* Elementor's tablet breakpoint (<=1024px) stacks columns to 100%; keep the
   three-up card grid alive down to 992px so iPad landscape matches laptop. */
@media (min-width: 992px) {
	.quality-cards-row > .elementor-container {
		flex-wrap: nowrap;
	}

	.quality-cards-row .elementor-column {
		width: calc((100% - 32px) / 3) !important;
	}
}

/* Elementor's post CSS puts 10px under the heading wrap and 15px above the
   card columns — zero both so the head-gap/row margins are the whole story. */
.quality-facility-container .elementor-widget-wrap,
.quality-cards-row .elementor-widget-wrap {
	padding: 0 !important;
}

/* Card icons: orange per Figma (theme SVGs are hard-coded black). */
.quality-cards-row .elementor-widget-tx_icon_box svg path {
	fill: #f5821f;
}

/* Tablet: two cards per row (Elementor's tablet CSS forces 50% columns, but
   the 16px flex gap made two 50% columns overflow, so each card wrapped onto
   its own row). Each 3-card Elementor row wraps 2 + 1, so the odd card runs
   full width. !important beats the per-page post CSS column widths. */
@media (max-width: 991px) {
	.quality-cards-row > .elementor-container {
		flex-wrap: wrap;
	}

	.quality-cards-row .elementor-column {
		width: calc((100% - 16px) / 2) !important;
	}

	.quality-cards-row .elementor-column:last-child {
		width: 100% !important;
	}

	/* Match the 16px card gap between the two Elementor rows. */
	.elementor-section.quality-cards-row-2 {
		margin-top: 16px !important;
	}
}

/* Phones: back to one card per row. */
@media (max-width: 575px) {
	.quality-cards-row .elementor-column,
	.quality-cards-row .elementor-column:last-child {
		width: 100% !important;
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
	/* Heading shrinks with the clamp — scale the image offset with it so the
	   image keeps tracking the body's top edge. */
	.mrb-cm-media {
		margin-top: calc(1.2 * clamp(30px, 2.8vw, 54px) + 20px);
	}
}

@media (max-width: 991px) {
	/* Image stacks below the text column. */
	.mrb-cm-grid,
	.mrb-content-media.mrb-cm-image-left .mrb-cm-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.mrb-cm-media,
	.mrb-content-media.mrb-cm-image-left .mrb-cm-media {
		margin-top: 0;
		order: 0;
	}
}

@media (max-width: 767px) {
	.mrb-cm-intro {
		margin-bottom: 24px;
	}

	.mrb-cm-intro,
	.mrb-cm-text {
		font-size: 16px;
		line-height: 1.4;
	}

	.mrb-cm-subheading {
		margin: 24px 0 16px;
	}

	.mrb-cm-list {
		font-size: 16px;
		line-height: 1.4;
	}

	.mrb-cm-grid {
		gap: 24px;
	}
}