/* ==========================================================================
   SUDAIR PHARMA — LOCALIZATION: SUPPORTING SAUDI VISION 2030

   Two parts in one section: an editorial hero with a national-transformation
   visual, and a strategic-contributions grid beneath it.

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

   BUILT, NOT PASTED
   The hub, the orbit, the dots, the map and the six icons are all real elements
   — SVG and CSS, no flattened screenshot. So the wordmark is selectable text,
   the map is the same geometry the regional presence map uses, and everything
   stays sharp at any zoom or print.

   THE ORBIT MATHS
   Each icon is placed with rotate() -> translate() -> rotate(); the second
   rotation is the negative of the first, so the icon travels the ring without
   itself rotating. The radius is expressed as a percentage of the ICON, because
   that is what translate() resolves against — a percentage in a transform refers
   to the element's own box, not its parent's.
   ========================================================================== */

.sud-vs {
	--vs-green: #006344;
	--vs-mid: #2E8B57;
	--vs-ink: #10312A;
	--vs-body: #56675F;
	--vs-line: #DCE8E1;
	--vs-tint: #F5F9F6;
	--vs-ease: cubic-bezier(.22, 1, .36, 1);

	/* icon diameter as % of the viz; ring radius as % of the ICON (see above) */
	--vs-icon: 17%;
	--vs-orbit: 235%;            /* 17% x 2.35 = 40% of the viz */

	box-sizing: border-box;
	inline-size: 100%;
	color: var(--vs-ink);
	font-family: var(--sud-font-body, Roboto, Arial, sans-serif);
}

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

.sud-vs__inner {
	inline-size: 100%;
	max-inline-size: var(--sud-maxw, 1240px);
	margin-inline: auto;
	padding-inline: 24px;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.sud-vs__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	align-items: center;
	gap: clamp(1.5rem, 3.5vw, 3.5rem);
}

.sud-vs .sud-vs__eyebrow {
	margin: 0 0 clamp(.9rem, 1.6vw, 1.35rem);
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(.75rem, .85vw, .8125rem);
	font-weight: 700;
	letter-spacing: .14em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	color: var(--vs-green);
}

.sud-vs .sud-vs__title {
	margin: 0;
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(1.75rem, 3.2vw, 2.85rem);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -.022em;
	color: var(--vs-ink);
	max-inline-size: 18ch;

	/*
	 * The design system uppercases every h2 site wide; the reference sets this
	 * headline in sentence case. Switched off here only, scoped to .sud-vs.
	 */
	text-transform: none;
}

.sud-vs__rule {
	display: block;
	inline-size: 48px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--vs-green);
	margin-block: clamp(1.1rem, 2vw, 1.6rem);
}

.sud-vs .sud-vs__lede {
	margin: 0;
	max-inline-size: 52ch;
	font-size: clamp(.875rem, 1vw, .9375rem);
	line-height: 1.85;
	color: var(--vs-body);
}

/* --------------------------------------------------------------------------
   THE VISUAL
   -------------------------------------------------------------------------- */

.sud-vs__viz {
	position: relative;
	inline-size: 100%;
	aspect-ratio: 1;
	max-inline-size: 500px;
	margin-inline: auto;
}

/* A quiet wash for depth — never a picture. */
.sud-vs__viz::before {
	content: '';
	position: absolute;
	inset: -4%;
	z-index: 0;
	border-radius: 50%;
	background:
		radial-gradient(58% 58% at 50% 42%, rgba(0, 99, 68, .05), transparent 70%);
	pointer-events: none;
}

.sud-vs__orbit {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	z-index: 1;
	overflow: visible;
	pointer-events: none;
}

.sud-vs__orbit .sud-vs__ring {
	fill: none;
	stroke: var(--vs-line);
	stroke-width: 1;
	stroke-dasharray: 2 6;
	vector-effect: non-scaling-stroke;
}

.sud-vs__orbit .sud-vs__tick { fill: var(--vs-mid); }

/* The hub */

.sud-vs__hub {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;

	inline-size: 52%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #fff;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 7%;

	box-shadow:
		0 2px 6px rgba(11, 31, 23, .05),
		0 18px 44px rgba(0, 99, 68, .10);
}

/* The Kingdom's outline, sitting quietly behind the wordmark. */
.sud-vs__map {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: 74%;
	z-index: 0;
	color: #E4EFE8;
	pointer-events: none;
}

.sud-vs__map svg { inline-size: 100%; block-size: auto; display: block; }

.sud-vs__wordmark { position: relative; z-index: 1; }

.sud-vs .sud-vs__v {
	display: block;
	margin: 0;
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(.75rem, 1.5vw, 1rem);
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--vs-green);
}

.sud-vs .sud-vs__year {
	display: block;
	margin: .1rem 0 0;
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(1.75rem, 4.4vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--vs-ink);
}

.sud-vs .sud-vs__kingdom {
	display: block;
	margin: .5rem 0 0;
	font-size: clamp(.5rem, .82vw, .625rem);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vs-body);
}

/* Orbiting icons */

.sud-vs__nodes {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 2;
}

.sud-vs__node {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: var(--vs-icon);
	aspect-ratio: 1;
	margin-block-start: calc(var(--vs-icon) / -2);
	margin-inline-start: calc(var(--vs-icon) / -2);

	transform:
		rotate(var(--a))
		translate(var(--vs-orbit))
		rotate(calc(-1 * var(--a)));

	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--vs-tint);
	border: 1px solid var(--vs-line);
	color: var(--vs-green);
	transition: background-color .4s var(--vs-ease), color .4s var(--vs-ease);
}

/* Alternating fill, as in the reference: solid marks punctuate the ring. */
.sud-vs__node--solid {
	background: var(--vs-green);
	border-color: var(--vs-green);
	color: #fff;
}

.sud-vs__node svg { inline-size: 46%; block-size: 46%; display: block; }

/* --------------------------------------------------------------------------
   STRATEGIC CONTRIBUTIONS
   -------------------------------------------------------------------------- */

.sud-vs__strip {
	margin-block-start: clamp(2.5rem, 5vw, 4.5rem);
	padding-block: clamp(2rem, 4vw, 3.25rem);
	background: var(--vs-tint);
}

/* Centred heading with a rule running out either side. */
.sud-vs__bar {
	display: grid;
	grid-template-columns: minmax(1.5rem, 1fr) auto minmax(1.5rem, 1fr);
	align-items: center;
	gap: clamp(.85rem, 2vw, 1.5rem);
	margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}

.sud-vs__bar::before,
.sud-vs__bar::after {
	content: '';
	block-size: 1px;
	background: linear-gradient(90deg, transparent, var(--vs-line), transparent);
}

.sud-vs .sud-vs__barlabel {
	margin: 0;
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(.8125rem, 1.05vw, .9375rem);
	font-weight: 700;
	letter-spacing: .14em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	color: var(--vs-ink);
	text-align: center;
}

.sud-vs__grid {
	counter-reset: vs;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(.85rem, 1.6vw, 1.35rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sud-vs__card {
	counter-increment: vs;
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 1.3vw, 1.1rem);

	background: #fff;
	border: 1px solid var(--vs-line);
	border-radius: 8px;
	padding: clamp(.85rem, 1.5vw, 1.2rem) clamp(.9rem, 1.6vw, 1.35rem);

	box-shadow: 0 1px 2px rgba(11, 31, 23, .04);
	transition: border-color .3s var(--vs-ease), box-shadow .3s var(--vs-ease);
}

@media (hover: hover) {
	.sud-vs__card:hover {
		border-color: #C6DCD0;
		box-shadow: 0 8px 20px rgba(0, 99, 68, .08);
	}
}

/*
 * The number is a counter, so the six labels are never edited to carry one.
 * Reorder or add an item and the numbering follows on its own.
 */
.sud-vs__card::before {
	content: counter(vs, decimal-leading-zero);
	flex: 0 0 auto;

	inline-size: clamp(34px, 3vw, 42px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--vs-tint);
	display: grid;
	place-items: center;

	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(.875rem, 1.1vw, 1.0625rem);
	font-weight: 800;
	color: var(--vs-green);
	font-variant-numeric: tabular-nums;
}

.sud-vs .sud-vs__label {
	margin: 0;
	padding-inline-start: clamp(.75rem, 1.3vw, 1.1rem);
	border-inline-start: 2px solid var(--vs-green);

	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(.8125rem, .98vw, .9375rem);
	font-weight: 600;
	line-height: 1.4;
	color: var(--vs-ink);
	text-transform: none;
	text-wrap: balance;
}

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

@media (max-width: 1100px) {
	.sud-vs { --vs-icon: 16%; --vs-orbit: 244%; }   /* 16 x 2.44 = 39% of viz */
	.sud-vs__viz { max-inline-size: 420px; }
	.sud-vs .sud-vs__title { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
}

@media (max-width: 900px) {
	/* Text first, visual second — the order the brief asks for. */
	.sud-vs__hero {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2rem, 5vw, 2.75rem);
	}

	.sud-vs .sud-vs__title { max-inline-size: none; }
	.sud-vs .sud-vs__lede { max-inline-size: 62ch; }

	.sud-vs__viz { max-inline-size: min(88%, 400px); }

	.sud-vs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	/*
	 * The icons grow as the ring tightens. Scaling the whole composition down at
	 * one rate would leave six 40px marks that read as smudges.
	 */
	.sud-vs { --vs-icon: 20%; --vs-orbit: 190%; }   /* 20 x 1.9 = 38% of viz */

	.sud-vs__hub { inline-size: 54%; }
	.sud-vs__grid { grid-template-columns: minmax(0, 1fr); }

	/*
	 * 48, not 24. A normal section on this site insets its text twice on a phone
	 * — 24 on the section plus 24 on the container inside it — so body text
	 * starts at 48. This section's strip is deliberately full-bleed, so its only
	 * inset is this gutter; at 24 it began half a gutter left of its neighbours.
	 */
	.sud-vs__inner { padding-inline: 48px; }

	/* 13px is tight for a phone; the labels are the point of this grid. */
	.sud-vs .sud-vs__label { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
	.sud-vs__node,
	.sud-vs__card { transition: none; }
}

/* ==========================================================================
   VISION 2030 VISUAL  (.sud-v2)

   The composition that sits beside the closing Vision 2030 copy: the wordmark
   over a Riyadh skyline, inside a dotted ring carrying six capability marks.

   Separate from .sud-vs above because the arrangement differs — this one has no
   white hub disc; the wordmark and skyline sit directly on the page, which is
   what makes it read as open rather than as a badge.

   ON THE OFFICIAL MARK
   The Saudi state emblem that replaces the middle "0" in the official Vision
   2030 logo is a national symbol and is NOT drawn here. The wordmark is set as
   real type — Arabic and English — leaving a slot the licensed artwork can drop
   into. Type also means it stays sharp, is selectable, and reads correctly to a
   screen reader in both languages.
   ========================================================================== */

.sud-v2 {
	--v2-green: #006344;
	--v2-deep: #0A4A34;
	--v2-mid: #2E8B57;
	--v2-tint: #EDF4EF;
	--v2-line: #DCE8E1;
	--v2-ink: #10312A;
	--v2-ease: cubic-bezier(.22, 1, .36, 1);

	/* icon diameter as % of the box; ring radius as % of the ICON */
	--v2-icon: 16%;
	--v2-orbit: 256%;              /* 16 x 2.56 = 41% of the box */

	position: relative;
	box-sizing: border-box;
	inline-size: 100%;
	aspect-ratio: 1;
	max-inline-size: 540px;
	margin-inline: auto;
	font-family: var(--sud-font-body, Roboto, Arial, sans-serif);
}

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

/* Ring */

.sud-v2__ring {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	z-index: 1;
	overflow: visible;
	pointer-events: none;
}

.sud-v2__ring .sud-v2__circle {
	fill: none;
	stroke: var(--v2-line);
	stroke-width: 1;
	stroke-dasharray: 2 6;
	vector-effect: non-scaling-stroke;
}

.sud-v2__ring .sud-v2__dot { fill: var(--v2-mid); }

/* Centre: wordmark over skyline */

.sud-v2__core {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: 62%;
	z-index: 2;
	text-align: center;
}

.sud-v2__logo { position: relative; z-index: 2; }

.sud-v2 .sud-v2__top {
	margin: 0;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .5em;

	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(1.1rem, 3.4vw, 2rem);
	font-weight: 400;
	letter-spacing: .1em;
	color: var(--v2-green);
	line-height: 1;
}

/* The Arabic sets larger than the Latin at the same optical size. */
.sud-v2 .sud-v2__ar { font-size: 1.15em; letter-spacing: 0; font-weight: 600; }

.sud-v2 .sud-v2__year {
	margin: .12em 0 0;
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(2.5rem, 8vw, 4.5rem);
	font-weight: 700;
	line-height: .95;
	letter-spacing: .02em;
	color: var(--v2-green);
}

.sud-v2 .sud-v2__kingdom-ar {
	margin: .5em 0 0;
	font-size: clamp(.6rem, 1.6vw, .875rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--v2-green);
}

.sud-v2 .sud-v2__kingdom-en {
	margin: .2em 0 0;
	font-size: clamp(.5rem, 1.15vw, .6875rem);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--v2-green);
}

/*
 * The skyline sits behind and below the wordmark, fading upward so it reads as
 * a backdrop rather than an illustration competing with the type.
 */
.sud-v2__skyline {
	position: absolute;
	inset-inline: -22%;
	inset-block-start: 62%;
	z-index: 1;
	color: #C9D8D0;
	pointer-events: none;

	mask-image: linear-gradient(to bottom, transparent, #000 42%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 42%, #000 88%, transparent);
}

.sud-v2__skyline svg { inline-size: 100%; block-size: auto; display: block; }

/* Capability marks */

.sud-v2__nodes {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 3;
}

.sud-v2__node {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: var(--v2-icon);
	aspect-ratio: 1;
	margin-block-start: calc(var(--v2-icon) / -2);
	margin-inline-start: calc(var(--v2-icon) / -2);

	transform:
		rotate(var(--a))
		translate(var(--v2-orbit))
		rotate(calc(-1 * var(--a)));

	border-radius: 50%;
	display: grid;
	place-items: center;

	background: var(--v2-tint);
	color: var(--v2-deep);
	transition: transform .5s var(--v2-ease);
}

/* Alternating weight, as in the reference. */
.sud-v2__node--solid {
	background: var(--v2-deep);
	color: #fff;
}

.sud-v2__node svg { inline-size: 46%; block-size: 46%; display: block; }

@media (hover: hover) {
	.sud-v2__node:hover {
		transform:
			rotate(var(--a))
			translate(calc(var(--v2-orbit) + 5%))
			rotate(calc(-1 * var(--a)));
	}
}

@media (max-width: 1100px) {
	.sud-v2 { --v2-icon: 17%; --v2-orbit: 241%; }   /* 17 x 2.41 = 41% */
	.sud-v2 { max-inline-size: 440px; }
}

@media (max-width: 560px) {
	/* Larger marks against a tighter ring, so each stays recognisable. */
	.sud-v2 { --v2-icon: 20%; --v2-orbit: 195%; }   /* 20 x 1.95 = 39% */
	.sud-v2 { max-inline-size: min(92%, 360px); }
	.sud-v2__core { inline-size: 66%; }
}

@media (prefers-reduced-motion: reduce) {
	.sud-v2__node { transition: none; }
	.sud-v2__node:hover {
		transform: rotate(var(--a)) translate(var(--v2-orbit)) rotate(calc(-1 * var(--a)));
	}
}