/* ==========================================================================
   SUDAIR PHARMA — CORE VALUES (Mission, Vision & Values)

   Refines the existing Elementor section. Nothing is rebuilt: this hooks onto
   the classes already on the page — .core-values-list, .numbers-arc-wrapper,
   .core-value-number — and onto their containers via :has(), so the markup,
   content, icons and widgets stay exactly as authored.

   WHAT WAS WRONG (measured, not guessed)
     - Section 1955px tall against a 900px viewport: value 04 needed scrolling.
     - Each value block was 654/572/675/667px tall while its content was 261px —
       roughly 390px of empty space per block, four times over.
     - Numbered circles sat 667, 356 and 554px apart: not a rhythm.
     - Text column only 474px wide, so descriptions broke into many short lines.
     - The arc SVG has a 0 0 220 700 viewBox stretched to 1900px tall, and its
       stroke was #B9C7D8 rather than the brand green.
   ========================================================================== */

:root {
	--cv-green: #43B649;
	--cv-rows: 4;
	--cv-row: clamp(150px, 15vw, 186px);
}

/* --------------------------------------------------------------------------
   TWO-COLUMN SHELL
   The section's inner wrapper already holds the intro block and the list side
   by side; this only balances their widths and centres them vertically.
   -------------------------------------------------------------------------- */

.e-con-inner:has(> * > .core-values-list),
.e-con-inner:has(> .core-values-list) {
	align-items: center !important;
	gap: clamp(1.5rem, 3vw, 3rem) !important;
}

/* --------------------------------------------------------------------------
   THE INTRO, INSIDE A RING
   The reference sets the heading in a large circle. The existing block keeps
   its heading, divider and paragraph untouched — the ring is drawn around it
   with a conic gradient, so no extra markup is needed.
   -------------------------------------------------------------------------- */

.e-con-inner:has(.core-values-list) > .e-con:first-child {
	position: relative;
	flex: 0 0 auto;
	inline-size: clamp(320px, 34vw, 470px) !important;
	aspect-ratio: 1;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
	padding: clamp(2rem, 4vw, 3.4rem) !important;
	border-radius: 50%;
	background: var(--sud-surface-2, #F4F8F6);
	isolation: isolate;
}

/* The broken arc: two brand-green sweeps, top-left and bottom-left, with the
   right side left open so the numbered path can pass through it. */
.e-con-inner:has(.core-values-list) > .e-con:first-child::before {
	content: '';
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	background:
		conic-gradient(from 186deg,
			var(--cv-green) 0deg 62deg,
			transparent 62deg 118deg,
			var(--cv-green) 118deg 180deg,
			transparent 180deg 360deg);
	-webkit-mask: radial-gradient(circle, transparent calc(50% - 5px), #000 calc(50% - 5px));
	        mask: radial-gradient(circle, transparent calc(50% - 5px), #000 calc(50% - 5px));
	z-index: -1;
	opacity: .9;
}

.e-con-inner:has(.core-values-list) > .e-con:first-child > .e-con {
	inline-size: 100% !important;
	align-items: center !important;
	text-align: center;
}

/* --------------------------------------------------------------------------
   THE LIST
   Height is now the four rows plus padding, instead of whatever the blocks
   happened to add up to.
   -------------------------------------------------------------------------- */

.core-values-list {
	position: relative !important;
	flex: 1 1 auto;
	min-inline-size: 0;
	block-size: auto !important;
	padding: 0 !important;
	gap: 0 !important;
}

/* Number column and content column become 4-row grids of the same row height,
   so number N and value N always sit on the same line — they are separate
   columns in the markup and were previously only lining up by luck. */
.core-values-list > .e-con:not(.numbers-arc-wrapper) {
	display: grid !important;
	grid-template-columns: 118px minmax(0, 1fr) !important;
	align-items: stretch !important;
	gap: 0 clamp(.5rem, 1.4vw, 1.25rem) !important;
	padding: 0 !important;
	block-size: auto !important;
}

.core-values-list > .e-con:not(.numbers-arc-wrapper) > .e-con {
	display: grid !important;
	grid-template-rows: repeat(var(--cv-rows), var(--cv-row)) !important;
	gap: 0 !important;
	padding: 0 !important;
	block-size: auto !important;
	min-block-size: 0 !important;
}

/* --------------------------------------------------------------------------
   NUMBERED CIRCLES
   Centred in their row, then nudged along the curve: 01 left, 02 right,
   03 right, 04 left, as in the reference.
   -------------------------------------------------------------------------- */

.core-value-number {
	place-self: center !important;
	inline-size: 78px !important;
	block-size: 78px !important;
	min-block-size: 0 !important;
	margin: 0 !important;
	border: 2px solid var(--cv-green) !important;
	border-radius: 50% !important;
	background: #fff;
	box-shadow: 0 6px 18px rgba(11, 31, 23, .10);
	position: relative;
	z-index: 2;
}

/*
 * No stagger is applied here on purpose.
 *
 * The section as authored already offsets the circles: measured untranslated,
 * rows 1 and 4 sit at x = -58 and rows 2 and 3 at x = +2 relative to the list —
 * the 60px left/right rhythm the reference shows. An earlier attempt added a
 * `transform` on top; it measured as identity because Elementor writes its own
 * transform onto every .elementor-element. Switching it to `translate` made it
 * apply, which then revealed the real problem: it was double-staggering, pushing
 * the circles to -104 and +9.5.
 *
 * So the authored positions stand, and the arc below is solved to meet them.
 */

/* The short connector from each circle towards its icon and copy. */
.core-value-number::after {
	content: '';
	position: absolute;
	inset-inline-start: 100%;
	inset-block-start: 50%;
	inline-size: clamp(14px, 1.6vw, 26px);
	block-size: 2px;
	background: var(--cv-green);
	opacity: .55;
}

/* --------------------------------------------------------------------------
   THE ARC
   Kept behind the circles, given the brand colour, and stopped from being
   stretched: the SVG's own viewBox is 220x700 and it was being drawn at 1900px.
   -------------------------------------------------------------------------- */

/*
 * The authored SVG is hidden rather than restyled. Its viewBox is 0 0 220 700
 * and it was being drawn at 220x1900 — stretched 2.7x — and its path is a small
 * S-curve, not a single arc that meets the numbers. Scaling it would not have
 * made it pass through them.
 *
 * The replacement is one circle, and its radius is solved from the measured
 * circle centres rather than eyeballed:
 *
 *   ends   (-58, 129) and (-58, 707)   -> half-chord 289, midline y = 418
 *   middle (  2, 315) and (  2, 511)   -> 98 from the midline, 60px further right
 *
 *   Requiring sqrt(R^2 - 98^2) - sqrt(R^2 - 289^2) = 60 and taking the
 *   difference of squares gives a + b = 73917/60 = 1231.95, so a = 646 and
 *   R = sqrt(646^2 + 98^2) = 725.8, centred at x = 2 - 646 = -724, y = 418.
 *   Residual at the two middle circles is ~6px, well inside their 39px radius.
 *
 *   These are measured at 1440. An earlier pass solved R = 653 from a reading
 *   taken while the pane happened to be 906px wide, where the tablet breakpoint
 *   had already changed the row pitch — the geometry below is the desktop one.
 *
 * The conic mask reveals only the 64-116 degree sweep — the ~47 degrees that
 * passes the numbers (half-sweep measures 23.5 deg) — so what shows is one
 * continuous curve, not a ring.
 */
.numbers-arc-wrapper { display: none !important; }

/* `.e-con` is in the selector because Elementor already defines `.e-con::before`
   for its background overlay at the same specificity — without it, which rule
   wins would depend on stylesheet order. */
.e-con.core-values-list::before {
	content: '';
	position: absolute;
	inline-size: 1452px;          /* 2R, R = 725.8 */
	block-size: 1452px;
	inset-inline-start: -724px;   /* circle centre, in list coordinates */
	inset-block-start: 418px;
	translate: -50% -50%;

	border: 2px solid var(--cv-green);
	border-radius: 50%;
	opacity: .45;
	pointer-events: none;
	z-index: 0;

	-webkit-mask: conic-gradient(from 0deg, transparent 0 64deg, #000 64deg 116deg, transparent 116deg 360deg);
	        mask: conic-gradient(from 0deg, transparent 0 64deg, #000 64deg 116deg, transparent 116deg 360deg);
}

/* The small terminating dots the reference puts at each end of the sweep. One
   element draws both: the second is the first's box-shadow, offset by the
   558px chord. */
.e-con.core-values-list::after {
	content: '';
	position: absolute;
	inset-inline-start: -58px;
	inset-block-start: 129px;
	inline-size: 9px;
	block-size: 9px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: var(--cv-green);
	box-shadow: 0 578px 0 0 var(--cv-green);
	pointer-events: none;
	z-index: 0;
}

/* --------------------------------------------------------------------------
   VALUE BLOCKS
   The 390px of empty space per block came from the row, not the content: the
   content is centred in its row and the block no longer sets its own height.
   -------------------------------------------------------------------------- */

.core-values-list > .e-con:not(.numbers-arc-wrapper) > .e-con:last-child > .e-con {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: clamp(.6rem, 1.2vw, 1rem) !important;
	block-size: auto !important;
	min-block-size: 0 !important;
	padding: 0 !important;
	align-self: center !important;
}

.core-values-list > .e-con:not(.numbers-arc-wrapper) > .e-con:last-child > .e-con > * {
	block-size: auto !important;
	min-block-size: 0 !important;
}

/* Icons keep their own size but stop stretching the row. */
.core-values-list .elementor-widget-image img,
.core-values-list .elementor-icon svg,
.core-values-list .elementor-icon img {
	max-block-size: 44px;
	inline-size: auto;
}

/* Tighten the copy so it reads as a paragraph rather than a narrow column. */
.core-values-list p {
	margin: 0 !important;
	font-size: clamp(.8125rem, .92vw, .9375rem) !important;
	line-height: 1.55 !important;
}

.core-values-list h2,
.core-values-list h3,
.core-values-list h4 {
	margin: 0 0 .3rem !important;
	line-height: 1.2 !important;
}

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

@media (max-width: 1024px) {
	:root { --cv-row: clamp(140px, 20vw, 170px); }

	.e-con-inner:has(.core-values-list) {
		flex-direction: column !important;
	}

	.e-con-inner:has(.core-values-list) > .e-con:first-child {
		inline-size: min(360px, 82vw) !important;
		margin-inline: auto;
	}
}

@media (max-width: 767px) {
	:root { --cv-row: auto; }

	/* The arc is decoration and there is no room for it beside the copy. Its
	   geometry is also tied to the desktop row rhythm, which does not apply once
	   the rows become auto-height. */
	.e-con.core-values-list::before,
	.e-con.core-values-list::after { display: none !important; }

	.core-values-list > .e-con:not(.numbers-arc-wrapper) {
		grid-template-columns: 62px minmax(0, 1fr) !important;
	}

	.core-values-list > .e-con:not(.numbers-arc-wrapper) > .e-con {
		grid-template-rows: repeat(var(--cv-rows), auto) !important;
		row-gap: clamp(1.25rem, 5vw, 2rem) !important;
	}

	.core-value-number {
		inline-size: 56px !important;
		block-size: 56px !important;
		transform: none !important;
		place-self: start center !important;
	}

	.core-value-number::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.core-values-list * { transition: none !important; }
}