/* ==========================================================================
   SUDAIR PHARMA — QUALITY ASSURANCE (QA)

   A restyle of an existing section, not a replacement. The containers, the
   heading, the description, the photograph and all five item widgets are the
   ones that were already there; this file only decides where they sit.

   Scoped under .sud-qa, a class that exists on one section of one page.

   THE NUMBERS ARE NOT CONTENT
   01-05 come from a CSS counter, so the copy is never edited to carry them. If
   an item is added, removed or reordered in Elementor the numbering follows on
   its own, and nothing has to be renumbered by hand.

   THE OVERLAP
   Photograph and panel share one grid cell — one aligned to the start, the other
   to the end, their widths summing past 100%. Both stay in flow, so the
   section's height comes from whichever is taller rather than from a measured
   value that would need maintaining.
   ========================================================================== */

.sud-qa {
	--qa-green: #006344;
	--qa-ink: #10312A;
	--qa-body: #56675F;
	--qa-row: #F4F8F5;
	--qa-ease: cubic-bezier(.22, 1, .36, 1);

	/*
	 * 55 + 55 = 110, so the two overlap by 10% of the composition — the subtle,
	 * intentional overlap the brief asks for rather than the 14% it had.
	 */
	--qa-media: 55%;
	--qa-panel: 55%;

	position: relative;
	box-sizing: border-box;
}

.sud-qa *,
.sud-qa *::before,
.sud-qa *::after { box-sizing: border-box; }

/*
 * Pure white, explicitly. The section carries the site's `sud-field` class,
 * which paints a tinted field behind it, and the brief calls for the surround to
 * be #FFFFFF so the panel reads as lifted off the page rather than off a tint.
 * Stated at two classes so it beats the single-class sud-field rule.
 */
.sud-qa.sud-field,
.sud-qa.sud-section {
	background-color: #fff;
	background-image: none;
}

.sud-qa.sud-field::before,
.sud-qa.sud-field::after { display: none; }

/*
 * The grid goes on the SECTION, not on an inner wrapper.
 *
 * This section is e-con-full, so it has no .e-con-inner to hang a grid on — it
 * is itself a flex row. Targeting a wrapper that does not exist meant the two
 * halves stayed side by side in flex order, with the panel on the LEFT (it comes
 * first in the DOM) and no overlap at all.
 *
 * One column capped at the content width, centred, so the section keeps its
 * full-bleed white background while its contents stay on the site's grid. Both
 * children then occupy that single cell and are pushed to opposite ends.
 */
.sud-qa.e-con {
	display: grid;
	grid-template-columns: minmax(0, min(var(--sud-maxw, 1240px), 100%));
	justify-content: center;
	align-items: center;
	padding-inline: 24px;
}

/* --------------------------------------------------------------------------
   PHOTOGRAPH
   -------------------------------------------------------------------------- */

.sud-qa .sud-qa__media {
	grid-area: 1 / 1;
	justify-self: start;
	inline-size: var(--qa-media);
	z-index: 1;
}

/*
 * The photograph sits two containers deep, and Elementor gives every container
 * 24px of padding by default. Left alone that inset compounds in both
 * directions: horizontally the column was 327px, the wrapper 279, the picture
 * itself only 231; vertically it left the column 70px taller than the picture
 * inside it, so centring the two columns left the photograph 10px off centre
 * against the panel.
 *
 * The wrappers are pure layout here and carry nothing beside the picture, so
 * their padding is cleared on both axes and the column becomes exactly the
 * photograph.
 */
.sud-qa .sud-qa__media,
.sud-qa .sud-qa__media > .e-con {
	padding: 0;
}

/*
 * The height belongs to the COLUMN, not to the picture.
 *
 * With the minimum on the picture instead, its shrink-wrapped parents settled
 * 26px shorter than it and the photograph overflowed them — which left the
 * column measuring 521 while the picture drew 547, so centring the two columns
 * still left the photograph off-centre against the panel. Putting the minimum on
 * the column and letting everything inside fill it makes column and picture the
 * same box.
 */
/*
 * Flex growth, not percentage heights. block-size:100% needs a DEFINITE height
 * on the parent to resolve against; a min-block-size is not one, so it computed
 * to auto and — with the picture being a background rather than content — the
 * frame collapsed to zero. Letting each level grow into the column fills the
 * same space without depending on a resolvable percentage.
 */
.sud-qa .sud-qa__media {
	display: flex;
	flex-direction: column;
	min-block-size: clamp(360px, 38vw, 560px);
}

.sud-qa .sud-qa__media > .e-con {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.sud-qa .sud-qa__media > .e-con > .e-con {
	flex: 1 1 auto;
}

/*
 * The picture is a container BACKGROUND, not an <img> — the only real image in
 * this column is the small badge on top of it. So the frame is the container,
 * and the badge is left alone.
 */
.sud-qa .sud-qa__photo {
	inline-size: 100%;
	border-radius: 20px;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
}

/* The badge, as in the reference: a white rounded tile in the top-left. */
.sud-qa .sud-qa__badge {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: clamp(92px, 9vw, 128px);
	block-size: clamp(92px, 9vw, 128px);

	/* Elementor sets a min-height on this container; without clearing it the
	   badge cannot be square. */
	min-block-size: 0;

	background: #fff;
	border-radius: 20px 0 24px 0;
	display: grid;
	place-items: center;
	padding: clamp(.6rem, 1vw, 1rem);
	z-index: 2;
}

.sud-qa .sud-qa__photo { position: relative; }

.sud-qa .sud-qa__badge img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	display: block;
}

/* Spacers belonged to the old arrangement and have nothing to space here. */
.sud-qa .sud-qa__badge .elementor-widget-spacer { display: none; }

/* --------------------------------------------------------------------------
   PANEL
   -------------------------------------------------------------------------- */

.sud-qa .sud-qa__copy {
	grid-area: 1 / 1;
	justify-self: end;
	inline-size: var(--qa-panel);
	z-index: 2;

	/* Height comes from the content, never from the row. */
	align-self: center;
	block-size: auto;

	background: #fff;
	border-radius: 28px;
	padding: clamp(1.75rem, 3.6vw, 4rem) clamp(1.5rem, 4.6vw, 4.5rem);

	/* Elevated, not heavy — the panel should read as sitting on the photograph. */
	box-shadow:
		0 1px 2px rgba(11, 31, 23, .04),
		0 24px 60px rgba(11, 31, 23, .12);
}

/*
 * The panel's inner wrapper spaces its widgets with a 20px flex gap, and each
 * widget then adds margins of its own. Between them they were contributing
 * roughly 130px of stacked whitespace, which is what made the panel run 209px
 * past the bottom of the photograph. The gap is zeroed and the spacing set
 * deliberately, element by element, below.
 */
.sud-qa .sud-qa__copy > .e-con-inner {
	gap: 0;
	justify-content: flex-start;
}

/* Heading, rule and description */

.sud-qa .sud-qa__copy .sud-eyebrow,
.sud-qa .sud-qa__copy .sud-eyebrow .elementor-heading-title {
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(1.5rem, 2.7vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--qa-green);
	/* text-transform: uppercase removed — site uses normal capitalization */
	margin: 0;
}

/*
 * Two green lines were appearing under the heading: the site's .sud-eyebrow
 * class draws one with a pseudo-element, and the section also has a real divider
 * widget. The pseudo one is suppressed so the divider widget is the single,
 * intentional accent.
 */
.sud-qa .sud-qa__copy .sud-eyebrow::before,
.sud-qa .sud-qa__copy .sud-eyebrow::after { content: none; display: none; }

/* The section's own divider widget, restyled into the short green rule. */
.sud-qa .sud-qa__copy .elementor-widget-divider {
	--divider-color: var(--qa-green);
	inline-size: 54px;
	margin-block: clamp(.85rem, 1.4vw, 1.1rem) clamp(.9rem, 1.5vw, 1.15rem);
	padding: 0;
}

/* The widget ships its own vertical padding; it is not needed for a 2px rule. */
.sud-qa .sud-qa__copy .elementor-widget-divider .elementor-divider {
	padding-block: 0;
}

.sud-qa .sud-qa__copy .elementor-divider-separator {
	border-block-start-width: 2px;
	border-block-start-color: var(--qa-green);
}

.sud-qa .sud-qa__copy .elementor-widget-text-editor {
	font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
	line-height: 1.7;
	color: var(--qa-body);
	max-inline-size: 44ch;

	/* The widget carried a -29px top margin from the old design. */
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   THE FIVE ROWS

   Each row is an existing icon-box widget. The check icon is hidden, the number
   is drawn by a counter on a pseudo-element, and the divider is a border on the
   title — so the row needs no extra markup at all.
   -------------------------------------------------------------------------- */

.sud-qa .sud-qa__list {
	counter-reset: qa;
	display: flex;
	flex-direction: column;
	gap: clamp(.4rem, .7vw, .6rem);
	margin-block-start: clamp(1.1rem, 1.9vw, 1.6rem);

	/* Elementor's default container padding adds 48px of dead height here. */
	padding: 0;
}

.sud-qa .sud-qa__list .elementor-widget-icon-box {
	counter-increment: qa;

	/* Full width, so the five rows form an even column rather than shrink to fit. */
	inline-size: 100%;
	max-inline-size: none;

	background: var(--qa-row);
	border-radius: 10px;
	padding: clamp(.5rem, .85vw, .7rem) clamp(.7rem, 1.2vw, 1rem);
	transition: background-color .3s var(--qa-ease);
}

@media (hover: hover) {
	.sud-qa .sud-qa__list .elementor-widget-icon-box:hover { background: #EDF4EF; }
}

/* No check marks in this design. */
.sud-qa .sud-qa__list .elementor-icon-box-icon { display: none; }

.sud-qa .sud-qa__list .elementor-icon-box-wrapper {
	display: flex;
	align-items: center;
	gap: 0;
	text-align: start;
}

.sud-qa .sud-qa__list .elementor-icon-box-content {
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 1.3vw, 1.1rem);
	inline-size: 100%;
	text-align: start;
}

/* The number. */
.sud-qa .sud-qa__list .elementor-icon-box-content::before {
	content: counter(qa, decimal-leading-zero);
	flex: 0 0 auto;
	min-inline-size: 2.1em;
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(1rem, 1.35vw, 1.25rem);
	font-weight: 800;
	line-height: 1;
	color: var(--qa-green);
	font-variant-numeric: tabular-nums;
}

/*
 * The thin vertical divider is a border on the title rather than a third
 * element, which is what keeps it exactly the height of the text it separates.
 */
.sud-qa .sud-qa__list .elementor-icon-box-title,
.sud-qa .sud-qa__list .elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title {
	margin: 0;
	padding-inline-start: clamp(.75rem, 1.3vw, 1.1rem);
	border-inline-start: 2px solid var(--qa-green);

	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(.875rem, 1.05vw, 1rem);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--qa-ink);
	text-transform: none;
}

.sud-qa .sud-qa__list .elementor-icon-box-description { display: none; }

/* --------------------------------------------------------------------------
   RESPONSIVE

   The overlap is a wide-screen device. Once the panel would cover the
   photograph rather than sit beside it, the two stack — the panel keeps its
   lift by rising slightly over the image instead of overlapping sideways.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.sud-qa { --qa-media: 64%; --qa-panel: 58%; }
	.sud-qa .sud-qa__copy { padding: clamp(1.5rem, 3vw, 2.25rem); }
	.sud-qa .sud-qa__media { min-block-size: clamp(320px, 40vw, 460px); }
}

@media (max-width: 860px) {
	/*
	 * order matters here. The copy column comes FIRST in the markup, so once the
	 * two stop sharing a cell the panel stacked above the photograph — the
	 * reverse of the reference. Ordering puts the image back on top without
	 * touching the document order, which stays as the page's own reading order.
	 */
	.sud-qa .sud-qa__media { order: 1; }
	.sud-qa .sud-qa__copy  { order: 2; }

	.sud-qa .sud-qa__media,
	.sud-qa .sud-qa__copy {
		grid-area: auto;
		justify-self: stretch;
		inline-size: 100%;
		max-inline-size: 100%;
	}

	/* Elementor sets its own width on this container; two classes plus the
	   element class clears it so the photograph fills the column. */
	.sud-qa .sud-qa__media .sud-qa__photo {
		inline-size: 100%;
		max-inline-size: none;
	}

	.sud-qa .sud-qa__media { min-block-size: clamp(260px, 52vw, 380px); }

	.sud-qa .sud-qa__copy {
		margin-block-start: -2.5rem;
		margin-inline: auto;
		inline-size: calc(100% - 2rem);
		border-radius: 22px;
	}

	.sud-qa .sud-qa__copy .elementor-widget-text-editor { max-inline-size: none; }
}

@media (max-width: 560px) {
	.sud-qa .sud-qa__copy {
		inline-size: calc(100% - 1rem);
		margin-block-start: -1.75rem;
		padding: 1.5rem 1.25rem;
	}

	.sud-qa .sud-qa__badge {
		inline-size: 72px;
		block-size: 72px;
		border-radius: 20px 0 20px 0;
	}

	/*
	 * The number sits above the title once the row is too narrow to hold both on
	 * one line — the divider becomes a rule under the number rather than beside
	 * it, so nothing has to shrink to an unreadable size.
	 */
	.sud-qa .sud-qa__list .elementor-icon-box-content { gap: .65rem; }

	.sud-qa .sud-qa__list .elementor-icon-box-content::before { min-inline-size: 1.9em; }

	.sud-qa .sud-qa__list .elementor-icon-box-title,
	.sud-qa .sud-qa__list .elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title {
		padding-inline-start: .65rem;
		font-size: .9375rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sud-qa .sud-qa__list .elementor-widget-icon-box { transition: none; }
}

/* ==========================================================================
   QUALITY CONTROL PROCESS — MIRRORED COLUMNS

   This stylesheet dresses TWO sections on the Quality page: "Quality Assurance
   (QA)" (7464776) and "Quality Control Process" (5c362d9). They share the
   .sud-qa class, so anything written above applies to both.

   Only the Quality Control Process section is mirrored, so the swap hangs off
   Elementor's own per-element class rather than a shared one. Nothing here
   touches 7464776, and no Elementor data was edited to make it work.

   The two halves share a single grid cell and are pushed to opposite ends, so
   reversing their ends IS the column swap — there is no source order to
   reverse. Sizes, widths, overlap and vertical centring all come from the
   rules above and are inherited unchanged.
   ========================================================================== */

.elementor-element-5c362d9.sud-qa .sud-qa__media { justify-self: end; }
.elementor-element-5c362d9.sud-qa .sud-qa__copy  { justify-self: start; }

/*
 * The badge follows the photograph to the composition's OUTER corner.
 *
 * It is pinned to the photograph's inline start, which was the outer corner
 * while the photograph was on the left. Mirrored, that same corner is the
 * INNER one, tucked beneath the copy panel — and the panel paints above the
 * photograph, so the badge would simply vanish behind it. Pinning it to the
 * end edge keeps it visually where it has always been: the free corner, clear
 * of the overlap.
 *
 * Only while the two sit side by side. Below 860px they stack full width,
 * there is no inner edge to avoid, and the stacked layout is left alone.
 */
@media (min-width: 861px) {
	.elementor-element-5c362d9.sud-qa .sud-qa__badge {
		inset-inline-start: auto;
		inset-inline-end: 0;
		border-radius: 0 20px 0 24px;
	}
}