/* ==========================================================================
   SUDAIR PHARMA — LOCALIZATION INFOGRAPHIC

   The right half of the Localization Overview: a dotted map of the Kingdom
   inside a thin ring, with six pillars orbiting it.

   Scoped under .sud-loc, which exists on one section of one page. The left-hand
   copy in that section is untouched by every rule in this file.

   BUILT AS LAYOUT, NOT AS A PICTURE
   Grid, absolute positioning and one inline SVG — so the labels are real text
   (selectable, translatable, readable to a screen reader) and everything stays
   sharp at any zoom. A flattened export would have been quicker and none of
   that would be true.
   ========================================================================== */

.sud-loc {
	--lo-green: var(--sud-green-700, #006344);
	--lo-bright: var(--sud-green-500, #43B649);
	--lo-ink: #16362E;                 /* dark green-navy, for the labels */
	--lo-line: #CFE2D9;
	--lo-ease: cubic-bezier(.22, 1, .36, 1);

	--lo-disc: clamp(52px, 4.4vw, 66px);
	--lo-core: 42%;                    /* ring diameter, as % of this box */
	--lo-pillar: 28%;                  /* width of one icon + label */

	/*
	 * 42 + 2x28 = 98, leaving 2% of clearance between each middle pillar and the
	 * circle. At 43/29 the two middle labels — the longest of the six — ran into
	 * the ring by a few pixels, because those are the only pillars sitting at the
	 * circle's widest point.
	 */

	position: relative;
	inline-size: 100%;

	/*
	 * A fixed ratio, because the six pillars are placed as percentages of this
	 * box. Without it the box would take its height from whichever label wrapped
	 * longest, and the orbit would drift as the text reflowed.
	 */
	aspect-ratio: 15 / 10;

	color: var(--lo-ink);
	font-family: var(--sud-font-body, Roboto, Arial, sans-serif);
}

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

/* --------------------------------------------------------------------------
   THE CENTRE

   Sized as a percentage of the box and centred on it, so ring, map and emblem
   scale together as one object.
   -------------------------------------------------------------------------- */

.sud-loc__core {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: var(--lo-core);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
}

/*
 * Ring and dots are one SVG rather than a bordered div plus six positioned
 * spans. Inside a viewBox the dots sit exactly on the circle at any size, which
 * pixel offsets cannot promise once the container is fluid.
 */
.sud-loc__ring {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
	pointer-events: none;
}

.sud-loc__ring circle.sud-loc__ringline {
	fill: none;
	stroke: var(--lo-line);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.sud-loc__ring circle.sud-loc__node { fill: var(--lo-green); }

/* The map fills most of the ring — it is the subject, not a detail inside it. */
.sud-loc__map {
	position: relative;
	inline-size: 84%;
	color: #BCDFCD;                 /* halftone dot colour, via currentColor */
	display: grid;
	place-items: center;
}

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

.sud-loc__emblem {
	position: absolute;
	inline-size: 32%;
	aspect-ratio: 1;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

/*
 * RTL: pull the ring and the logo back the other way.
 *
 * Both are centred with a LOGICAL inset and a PHYSICAL transform. In Arabic the
 * inset flips to `right: 50%` — putting each one's right edge on the centre line
 * — but translate(-50%) is not direction-aware and still pulls left, so each
 * overshoots by its own width. Measured at 1440px: the ring 294.2px left of its
 * box's centre (its width is 294.3px), which put its left edge 31px past the
 * edge of the page; and the logo 94.2px left of the ring's centre (its width).
 *
 * Only the horizontal pull is reversed; the vertical centring is unchanged. The
 * six labels need nothing — they are placed with inset-inline-start/end, which
 * mirror on their own — and the map is a map, so it rightly does not flip.
 *
 * The ring's rule is desktop-only: from 1024px down it is taken out of absolute
 * positioning (transform: none, margin-inline: auto) and centres correctly in
 * both directions. The query is the exact complement of that one, so on a
 * scaled display there is no fractional width where neither applies. The logo
 * stays absolutely centred inside the ring at every width, so its rule is not
 * limited.
 */
@media not all and (max-width: 1024px) {
	[dir="rtl"] .sud-loc .sud-loc__core { transform: translate(50%, -50%); }
}

[dir="rtl"] .sud-loc .sud-loc__emblem { transform: translate(50%, -50%); }

.sud-loc__emblem img,
.sud-loc__emblem svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

/* --------------------------------------------------------------------------
   THE ORBIT

   The six pillars are placed absolutely rather than in two flex columns, and
   that is what lets the circle grow.

   A circle leaves the corners of its bounding box empty. In a column layout
   those corners are wasted: the map can only ever be as wide as the gap left
   between two text columns. Positioned absolutely, the four corner pillars sit
   IN that empty space, so the ring takes 43% of the width instead of a third.

   The two middle pillars sit flush to the edges and the four corners are inset,
   which is what makes the group read as orbiting the map rather than as two
   lists either side of it.
   -------------------------------------------------------------------------- */

.sud-loc__col {
	list-style: none;
	margin: 0;
	padding: 0;

	/* The <ul> stops being a box, so its items position against .sud-loc. */
	display: contents;
}

.sud-loc__pillar {
	position: absolute;
	inline-size: var(--lo-pillar);
	display: flex;
	align-items: center;
	gap: clamp(.7rem, 1.05vw, 1rem);
}

/* Left: top corner, middle (flush to the edge), bottom corner. */
.sud-loc__col--left .sud-loc__pillar:nth-child(1) { inset-inline-start: 7%; inset-block-start: 4%; }
.sud-loc__col--left .sud-loc__pillar:nth-child(2) { inset-inline-start: 0; inset-block-start: 50%; transform: translateY(-50%); }
.sud-loc__col--left .sud-loc__pillar:nth-child(3) { inset-inline-start: 7%; inset-block-end: 4%; }

/* Right mirrors it. */
.sud-loc__col--right .sud-loc__pillar:nth-child(1) { inset-inline-end: 7%; inset-block-start: 4%; }
.sud-loc__col--right .sud-loc__pillar:nth-child(2) { inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); }
.sud-loc__col--right .sud-loc__pillar:nth-child(3) { inset-inline-end: 7%; inset-block-end: 4%; }

.sud-loc__disc {
	inline-size: var(--lo-disc);
	block-size: var(--lo-disc);
	flex: 0 0 auto;
	border-radius: 50%;
	background: #fff;
	display: grid;
	place-items: center;
	color: var(--lo-green);

	box-shadow:
		0 1px 2px rgba(11, 31, 23, .05),
		0 8px 22px rgba(11, 31, 23, .09);
}

/* One proportion and one stroke weight across all six. */
.sud-loc__disc svg {
	inline-size: 50%;
	block-size: 50%;
	display: block;
	stroke-width: 1.5;
}

.sud-loc .sud-loc__label {
	margin: 0;
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(.8125rem, .95vw, .9375rem);
	font-weight: 600;                  /* lighter than the 700 it started at */
	line-height: 1.38;
	letter-spacing: -.002em;
	color: var(--lo-ink);
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   THE ORBIT, IN MOTION

   The six pillars travel round the map instead of sitting still beside it.

   AN ELLIPSE, DRAWN WITH TRANSFORMS
   `offset-path: ellipse()` looks like the tool for this and is not: a basic
   shape there resolves against the ELEMENT's own box, so each pillar orbited a
   70x26 ellipse of its own, on the spot. The path has to come from the section,
   so it is built out of transforms instead:

     scaleY(k) rotate(a) translateX(rx) rotate(-a) scaleY(1/k)

   Read right to left, as transforms apply. The inner scaleY squashes the
   pillar, the two rotations are equal and opposite, and the outer scaleY
   stretches it back: the pillar itself comes out unrotated and unsquashed,
   exactly as drawn, which is what keeps the labels upright and readable. What
   does not cancel is the translate in the middle — it is carried round by the
   rotation and then scaled, turning a circle of radius rx into an ellipse of
   rx by k.rx. That is the orbit.

   THE RADII ARE THE LARGEST THAT KEEP EVERY PILLAR INSIDE THE SECTION
   A pillar is 28% of the section wide and about 16% tall, so its centre can
   travel at most 36% of the width across and 42% of the height down. The first
   of those is exactly where the two middle pillars already sit, so the path
   runs through the composition it replaces rather than beside it.

   rx is written as a share of the PILLAR, because a percentage inside
   translateX() is a share of the element — and the pillar is itself a fixed
   share of the section, so 36% of the section is 36/28 = 128.6% of a pillar and
   the orbit rescales with the box. Container units would have been the obvious
   alternative and cost more than they gave: `container-type: size` brings size
   containment with it, which took the pillars off their 28% width entirely.

   k is ry/rx as a plain number. The section holds a fixed aspect ratio, so it
   is one: .42H / .36W with H = W/1.5 comes to .778.

   The six start where the static design puts them — clockwise from three
   o'clock — so the first frame IS the layout as drawn. They are spaced by
   starting each one further through the same loop with a negative delay: one
   animation, six phases, nothing to keep in step and so nothing to drift,
   snap or flicker.

   Desktop only. Below 1025px the section drops the orbit for a stacked list and
   there is no path to travel. Reduced motion is honoured by the rule at the end
   of this file, which stops every animation inside .sud-loc.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.sud-loc {
		--lo-spin: 72s;            /* one unhurried circuit */
		--lo-rx: 128.6%;           /* 36% of the section, as a share of a pillar */
		--lo-k: .778;              /* ry/rx: .42H / .36W at the 15/10 box */
	}

	/*
	 * At (0,3,0) to match — and follow — the six placement rules above, which are
	 * that specific. A plain `.sud-loc__pillar` rule is (0,1,0) and would lose to
	 * them, leaving the corner insets and the middle pillars' translateY(-50%)
	 * fighting the orbit.
	 *
	 * Physical `left`/`top`, not the logical pair: the anchor is the centre of
	 * the box either way, and inset-inline-start flips to `right` in Arabic,
	 * which would put the pillar half its own width off centre.
	 */
	.sud-loc__col--left .sud-loc__pillar:nth-child(n),
	.sud-loc__col--right .sud-loc__pillar:nth-child(n) {
		inset: 50% auto auto 50%;

		/*
		 * In front of the ring. The path is the widest ellipse the section can
		 * hold — 36% by 42%, any larger and a pillar leaves the box — and at the
		 * diagonals that line passes a few pixels inside the ring, which a
		 * two-column layout never had to deal with. Painted underneath, the ring
		 * would draw a stroke across a white disc; painted over it, the pillar
		 * simply passes in front, which is what going round a circle looks like.
		 * The map itself is never reached: it is 47px of radius and the nearest
		 * pillar stays 82px clear.
		 */
		z-index: 1;

		animation: sud-loc-orbit var(--lo-spin) linear infinite;
		animation-delay: calc(var(--lo-i) * var(--lo-spin) / 6 * -1);
	}

	/* Clockwise from three o'clock, in the order the static design reads. */
	.sud-loc__col--right .sud-loc__pillar:nth-child(2) { --lo-i: 0; }
	.sud-loc__col--right .sud-loc__pillar:nth-child(3) { --lo-i: 1; }
	.sud-loc__col--left  .sud-loc__pillar:nth-child(3) { --lo-i: 2; }
	.sud-loc__col--left  .sud-loc__pillar:nth-child(2) { --lo-i: 3; }
	.sud-loc__col--left  .sud-loc__pillar:nth-child(1) { --lo-i: 4; }
	.sud-loc__col--right .sud-loc__pillar:nth-child(1) { --lo-i: 5; }
}

/* 29% pillars in this range, so 35% of the section is 35/29 of a pillar. */
@media (min-width: 1025px) and (max-width: 1100px) {
	.sud-loc { --lo-rx: 120.7%; --lo-k: .857; }
}

@keyframes sud-loc-orbit {
	from {
		transform:
			translate(-50%, -50%)
			scaleY(var(--lo-k)) rotate(0deg)
			translateX(var(--lo-rx))
			rotate(0deg) scaleY(calc(1 / var(--lo-k)));
	}
	to {
		transform:
			translate(-50%, -50%)
			scaleY(var(--lo-k)) rotate(360deg)
			translateX(var(--lo-rx))
			rotate(-360deg) scaleY(calc(1 / var(--lo-k)));
	}
}


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

   Desktop is the priority composition. Below it the arrangement changes shape
   rather than shrinking — the orbit needs width, and at phone size it would put
   four-word labels in a 90px column.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	/*
	 * core + 2 x pillar must stay under 100, or the two middle pillars run into
	 * the ring. 31% here against a 42% core came to 104 and did exactly that.
	 * 40 + 2 x 29 = 98 keeps the same 2% clearance as the desktop rule while
	 * giving the labels slightly more width than desktop, which is what this
	 * breakpoint is for.
	 */
	.sud-loc {
		--lo-disc: clamp(44px, 5vw, 56px);
		--lo-core: 40%;
		--lo-pillar: 29%;
		aspect-ratio: 14 / 10;
	}

	.sud-loc .sud-loc__label { font-size: clamp(.75rem, 1.25vw, .875rem); }
}

@media (max-width: 1024px) {
	/*
	 * Raised from 860 to 1024: between those two the arc layout was still in
	 * force and its six labels measured 111px each on a landscape tablet,
	 * which is two words a line. The stacked arrangement starts at the top of
	 * the tablet range instead.
	 *
	 * Everything returns to normal flow: the map goes on top at a size that keeps
	 * it recognisable, the six pillars become a list beneath it. The absolute
	 * placement above is switched off wholesale rather than adjusted.
	 */
	.sud-loc {
		--lo-disc: 50px;
		position: static;
		aspect-ratio: auto;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.5rem, 4vw, 2.25rem);
	}

	.sud-loc__core {
		position: relative;
		inset: auto;
		transform: none;
		inline-size: min(74%, 330px);
		margin-inline: auto;
	}

	.sud-loc__col {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(1rem, 3vw, 1.5rem);
	}

	/*
	 * Written at (0,3,0) to match the desktop placement rules above.
	 *
	 * A plain `.sud-loc__pillar` reset is (0,1,0) and loses to
	 * `.sud-loc__col--left .sud-loc__pillar:nth-child(2)`, which is (0,3,0).
	 * `position` and `inset` stopped mattering once the pillar went static, but
	 * `transform: translateY(-50%)` kept applying — so the second pillar of each
	 * column was dragged 25px up into its neighbour. The six items measured
	 * -9, 41, 273, -9, 41 apart instead of an even 16.
	 *
	 * :nth-child(n) matches every item and costs the same specificity as the
	 * rule it has to beat.
	 */
	.sud-loc__col--left .sud-loc__pillar:nth-child(n),
	.sud-loc__col--right .sud-loc__pillar:nth-child(n) {
		position: static;
		inline-size: auto;
		inset: auto;
		transform: none;
	}

	.sud-loc .sud-loc__label { font-size: .8125rem; }
}

@media (max-width: 560px) {
	.sud-loc__core { inline-size: min(88%, 300px); }
	.sud-loc__col { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.sud-loc .sud-loc__label { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
	.sud-loc * { transition: none !important; animation: none !important; }
}