/* ==========================================================================
   SUDAIR PHARMA — CORE VALUES (ring + numbered arc)

   A self-contained section: its own markup, its own class namespace. Nothing
   here reaches the header, the footer, or any other section, and it does not
   touch the older core-values treatment on the same page — that one is scoped
   to .core-values-list, this one to .sud-cv.

   The reference artwork is blue. This is the same composition rebuilt in the
   Sudair palette: #006344 for anything carrying text (the only text-safe green
   in the design system) and #43B649 for graphics — rings, rules, icon marks.
   ========================================================================== */

.sud-cv {
	--cv2-row: 186px;          /* fixed at desktop: the arc geometry is solved
	                              from this number, see THE ARC below */
	--cv2-dot: 76px;
	--cv2-col: 140px;
	--cv2-ease: cubic-bezier(.22, 1, .36, 1);

	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4rem);
}

/* --------------------------------------------------------------------------
   THE INTRO DISC
   -------------------------------------------------------------------------- */

.sud-cv__intro {
	position: relative;
	justify-self: center;
	inline-size: min(100%, clamp(300px, 34vw, 460px));
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	text-align: center;
	padding: clamp(1.75rem, 4vw, 3.25rem);
	border-radius: 50%;
	background: var(--sud-surface-2, #F4F8F6);
	isolation: isolate;
}

/*
 * The broken ring. Two brand-green sweeps at upper-left and lower-left with the
 * right side left open, so the numbered arc reads as continuing out of it —
 * the gesture the reference makes. Drawn with a conic gradient and a radial
 * mask rather than an SVG, so it scales with the disc and needs no extra markup
 * or request.
 */
.sud-cv__intro::before {
	content: '';
	position: absolute;
	inset: -12px;
	border-radius: 50%;
	background: conic-gradient(from 188deg,
		var(--sud-green-700) 0deg,
		var(--sud-green-500) 46deg,
		transparent 62deg 118deg,
		var(--sud-green-500) 134deg,
		var(--sud-green-700) 180deg,
		transparent 180deg 360deg);
	-webkit-mask: radial-gradient(circle, transparent calc(50% - 6px), #000 calc(50% - 6px));
	        mask: radial-gradient(circle, transparent calc(50% - 6px), #000 calc(50% - 6px));
	z-index: -1;
}

.sud-cv__eyebrow {
	display: block;
	font-family: var(--sud-font-display);
	font-size: clamp(1.4rem, 2.4vw, 2.1rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: .01em;
	color: var(--sud-ink);
}

.sud-cv .sud-cv__name {
	display: block;
	font-family: var(--sud-font-display);
	font-size: clamp(1.6rem, 2.9vw, 2.6rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--sud-green-700);      /* 8.3:1 on the disc */
	margin: 0;
}

.sud-cv__rule {
	display: block;
	inline-size: 62px;
	block-size: 3px;
	margin: clamp(.9rem, 1.8vw, 1.3rem) auto;
	border-radius: 3px;
	background: var(--sud-green-500);
}

.sud-cv .sud-cv__lead {
	font-family: var(--sud-font-body);
	font-size: clamp(.9rem, 1.05vw, 1.02rem);
	line-height: 1.6;
	color: var(--sud-body, #46574F);
	margin: 0 auto;
	max-inline-size: 26ch;
}

/* --------------------------------------------------------------------------
   THE LIST
   -------------------------------------------------------------------------- */

.sud-cv__list {
	position: relative;
	display: grid;
	grid-template-rows: repeat(4, var(--cv2-row));
	margin: 0;
	padding: 0;
	list-style: none;
}

.sud-cv__item {
	display: grid;
	grid-template-columns: var(--cv2-col) auto minmax(0, 1fr);
	align-items: center;
	column-gap: clamp(.6rem, 1.3vw, 1.1rem);
}

/* Numbered disc. Rows 1 and 4 sit left, rows 2 and 3 right — the stagger that
   puts all four on one curve. */
.sud-cv__num {
	grid-column: 1;
	place-self: center;
	position: relative;
	z-index: 2;

	inline-size: var(--cv2-dot);
	block-size: var(--cv2-dot);
	display: grid;
	place-items: center;

	font-family: var(--sud-font-display);
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--sud-green-700);

	background: #fff;
	border: 2px solid var(--sud-green-500);
	border-radius: 50%;
	box-shadow: 0 8px 22px rgba(11, 31, 23, .10);
	transition: transform .35s var(--cv2-ease), box-shadow .35s var(--cv2-ease);
}

.sud-cv__item:nth-child(1) .sud-cv__num,
.sud-cv__item:nth-child(4) .sud-cv__num { translate: -29px 0; }
.sud-cv__item:nth-child(2) .sud-cv__num,
.sud-cv__item:nth-child(3) .sud-cv__num { translate:  29px 0; }

/* Short connector from the disc across to the icon. */
.sud-cv__num::after {
	content: '';
	position: absolute;
	inset-inline-start: 100%;
	inset-block-start: 50%;
	inline-size: clamp(14px, 1.6vw, 26px);
	block-size: 2px;
	background: var(--sud-green-500);
	opacity: .6;
}

/* --------------------------------------------------------------------------
   THE ARC

   One circle, masked to the sweep that passes the four discs, sitting behind
   them. The geometry is solved rather than eyeballed, which is why --cv2-row is
   a fixed 186px at desktop instead of a clamp:

     row centres      93, 279, 465, 651     (half-chord 279, midline y = 372)
     disc centres x   41 on rows 1 and 4, 99 on rows 2 and 3 — a 58px bulge

     Requiring  sqrt(r^2 - 93^2) - sqrt(r^2 - 279^2) = 58  and taking the
     difference of squares gives a + c = 2*186^2/58 = 1193, a = 625.5, so
     r = sqrt(625.5^2 + 93^2) = 632.4 with its centre at x = 99 - 625.5 = -526.5.

     Half-sweep is atan2(279, 567.5) = 26.2 degrees, hence the 62-118 degree
     reveal — a little wider than needed so the ends are not clipped mid-stroke.
   -------------------------------------------------------------------------- */

.sud-cv__list::before {
	content: '';
	position: absolute;
	inline-size: 1265px;              /* 2r */
	block-size: 1265px;
	inset-inline-start: -526.5px;     /* circle centre */
	inset-block-start: 372px;
	translate: -50% -50%;

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

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

/* The small terminating dots at each end of the sweep. One element draws both:
   the second is the first's box-shadow, offset by the 558px chord. */
.sud-cv__list::after {
	content: '';
	position: absolute;
	inset-inline-start: 41px;
	inset-block-start: 93px;
	inline-size: 10px;
	block-size: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: var(--sud-green-700);
	box-shadow: 0 558px 0 0 var(--sud-green-700);
	pointer-events: none;
	z-index: 0;
}

/* --------------------------------------------------------------------------
   ICONS

   Masks over a background-colour, never background-image. Elementor lazy-loads
   container backgrounds with a rule that sets background-image to none with
   !important on everything inside the 4th and later top-level containers until
   its observer fires; a mask is immune to it and needs no escape hatch.
   -------------------------------------------------------------------------- */

.sud-cv__icon {
	grid-column: 2;
	inline-size: clamp(34px, 3.4vw, 46px);
	block-size: clamp(34px, 3.4vw, 46px);
	background-color: var(--sud-green-500);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

.sud-cv__icon--quality    { -webkit-mask-image: var(--i-quality);    mask-image: var(--i-quality); }
.sud-cv__icon--community  { -webkit-mask-image: var(--i-community);  mask-image: var(--i-community); }
.sud-cv__icon--integrity  { -webkit-mask-image: var(--i-integrity);  mask-image: var(--i-integrity); }
.sud-cv__icon--innovation { -webkit-mask-image: var(--i-innovation); mask-image: var(--i-innovation); }

.sud-cv {
	--i-quality: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6.4'/%3E%3Cpath d='M9.4 9.1l1.8 1.8 3.4-3.6'/%3E%3Cpath d='M8.4 14.4L6.6 21l5.4-2.6L17.4 21l-1.8-6.6'/%3E%3C/svg%3E");

	--i-community: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Ccircle cx='5' cy='10' r='2.3'/%3E%3Ccircle cx='19' cy='10' r='2.3'/%3E%3Cpath d='M7.2 18.5a5 5 0 0 1 9.6 0'/%3E%3Cpath d='M1.8 17.4a3.6 3.6 0 0 1 3.9-2.8'/%3E%3Cpath d='M22.2 17.4a3.6 3.6 0 0 0-3.9-2.8'/%3E%3C/svg%3E");

	--i-integrity: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.4l8 3.1v6.1c0 4.6-3.4 8.1-8 10-4.6-1.9-8-5.4-8-10V5.5z'/%3E%3Cpath d='M12 8v6.4'/%3E%3Cpath d='M8.6 9.6h6.8'/%3E%3Cpath d='M6.9 13.1h3.4L8.6 9.6z'/%3E%3Cpath d='M13.7 13.1h3.4L15.4 9.6z'/%3E%3C/svg%3E");

	--i-innovation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 16.4a6.4 6.4 0 1 1 5.6 0'/%3E%3Cpath d='M9.4 18.6h5.2'/%3E%3Cpath d='M10.3 21.2h3.4'/%3E%3Cpath d='M12 1.2v1.6M3.4 6.1l1.4.8M20.6 6.1l-1.4.8'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   COPY
   -------------------------------------------------------------------------- */

.sud-cv__body { grid-column: 3; min-inline-size: 0; }

.sud-cv .sud-cv__vname {
	font-family: var(--sud-font-display);
	font-size: clamp(1rem, 1.25vw, 1.18rem);
	font-weight: 800;
	letter-spacing: .06em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	color: var(--sud-ink);
	margin: 0 0 .4rem;
}

.sud-cv .sud-cv__text {
	font-family: var(--sud-font-body);
	font-size: clamp(.85rem, .95vw, .95rem);
	line-height: 1.65;
	color: var(--sud-body, #46574F);      /* 7.4:1 */
	margin: 0;
}

/* --------------------------------------------------------------------------
   HOVER — a quiet lift, nothing more.
   -------------------------------------------------------------------------- */

@media (hover: hover) {
	.sud-cv__item:hover .sud-cv__num {
		transform: scale(1.07);
		box-shadow: 0 12px 28px rgba(11, 31, 23, .16);
	}
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   Below desktop the arc's fixed geometry no longer holds, so it goes and the
   rows become natural height.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.sud-cv {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2rem, 5vw, 3rem);
	}

	.sud-cv__list { grid-template-rows: repeat(4, auto); row-gap: clamp(1.5rem, 4vw, 2.25rem); }
	.sud-cv__list::before,
	.sud-cv__list::after { display: none; }

	.sud-cv__item { grid-template-columns: 84px auto minmax(0, 1fr); align-items: start; }
	.sud-cv__num { translate: none !important; inline-size: 62px; block-size: 62px; font-size: 1.1rem; }
	.sud-cv__num::after { display: none; }
}

@media (max-width: 560px) {
	.sud-cv__item { grid-template-columns: 52px minmax(0, 1fr); row-gap: .5rem; }
	.sud-cv__num { grid-row: 1; inline-size: 48px; block-size: 48px; font-size: .95rem; }
	.sud-cv__icon { grid-row: 1; grid-column: 2; justify-self: start; }
	.sud-cv__body { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.sud-cv__num { transition: none !important; }
	.sud-cv__item:hover .sud-cv__num { transform: none; }
}