/* ==========================================================================
   SUDAIR PHARMA — THERAPEUTIC AREAS (orbit)

   Two halves: a soft organic panel carrying the copy, and a scientific
   composition of six glass nodes orbiting a central hub.

   Scoped under .sud-ta, a class that exists on one container on one page.
   Nothing here can reach another section, the header or the footer.

   BUILT, NOT FLATTENED
   The hub, the orbit, the dots and the six nodes are separate elements — text
   is real text, the rings are SVG, the nodes are individual images. So the
   headline is selectable and translatable, everything stays sharp at any zoom,
   and any single node can be swapped without re-exporting a composite.

   THE ORBIT MATHS
   Each node is placed with rotate() -> translate() -> rotate(), the standard way
   to put items on a circle. The second rotation is the negative of the first, so
   the node travels around the ring but is never itself rotated — the brain stays
   upright at the top and at any other angle. The radius is a percentage, so the
   whole arrangement scales with its container and needs no per-breakpoint
   coordinates.
   ========================================================================== */

.sud-ta {
	--ta-green: var(--sud-green-700, #006344);
	--ta-bright: #2E8B57;
	--ta-navy: #123A4F;
	--ta-ink: var(--sud-ink, #0B1F17);
	--ta-body: #55665E;
	--ta-ease: cubic-bezier(.22, 1, .36, 1);

	/*
	 * --ta-node is a percentage of the VIZ box. --ta-orbit is a percentage of the
	 * NODE, because that is what translate() resolves against — a percentage in a
	 * transform refers to the element's own size, not its parent's. Setting it to
	 * 37% intending "37% of the viz" put the nodes 62px from centre instead of
	 * 229 and the whole ring collapsed onto the hub.
	 *
	 * So the ring radius is the product: 27% x 137% = 37% of the viz. Both values
	 * are restated together at every breakpoint to keep that product correct.
	 */
	--ta-node: 27%;               /* node diameter, as % of the viz box */
	/*
	 * 133%, giving a 36% radius. At 37% the top and bottom nodes overhung the viz
	 * box by ~2px — harmless here, but only because nothing above them clips.
	 * 36% keeps the whole ring inside its own box so it cannot be cropped by a
	 * future parent.
	 */
	--ta-orbit: 133%;             /* ring radius, as % of the NODE  (=36% of viz) */

	position: relative;
	inline-size: 100%;
	max-inline-size: var(--sud-maxw, 1240px);
	margin-inline: auto;
	box-sizing: border-box;
	padding-inline: 24px;

	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);

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

/*
 * `.sud-ta` is an Elementor container now, and Elementor drives every container
 * from `.e-con { display: var(--display) }`. That is one class, the same weight
 * as `.sud-ta`, and it is loaded afterwards — so a plain `display: grid` here
 * loses the tie and the two columns come out as a flex row.
 *
 * Three classes settles it. The template columns above are untouched by
 * Elementor, so only `display` needs the extra weight.
 */
.elementor .e-con.sud-ta { display: grid; }

/*
 * The two columns are grid items; nothing should stretch them, and neither
 * should charge the 24px of inline padding Elementor gives a container by
 * default. `.sud-ta` already carries the section's gutter — a second one here
 * pushed the copy off the grid line and shrank the composition by 45px.
 */
.elementor .e-con.sud-ta > .e-con {
	inline-size: auto;
	max-inline-size: none;
	padding-inline: 0;
}

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

/* --------------------------------------------------------------------------
   LEFT — the organic panel

   The soft shape behind the copy is a pseudo-element with a lopsided
   border-radius rather than an image, so it stays crisp and recolours with the
   design system. It reaches past the column into the gap, which is what gives
   the curved edge in the reference.
   -------------------------------------------------------------------------- */

/*
 * The extra padding below the copy is what keeps the CTA inside the soft shape.
 *
 * The shape is `::before`, sized off the panel: 124% of its height, centred on
 * it. So its lower boundary sits 12% of the panel height below the panel — and
 * with only the original 48px of bottom padding that boundary landed part-way
 * up the button, leaving the bottom edge of the CTA sitting on white.
 *
 * Padding is the lever rather than a bigger `inset-block`, because growing the
 * inset would stretch the shape upward by the same amount and push it into the
 * section above. Adding P to the bottom padding moves the shape's lower edge
 * down by 1.12 x P while the button stays where it is, so the clearance is
 * bought below the button and nowhere else.
 */
.sud-ta__panel {
	position: relative;
	z-index: 2;
	padding-block: clamp(1.5rem, 3vw, 3rem) clamp(3.5rem, 7vw, 6.5rem);
	padding-inline-end: clamp(1rem, 2vw, 2rem);
}

/*
 * Darkened one step from #FBFDFC -> #F1F7F3. The panel was reading as almost
 * the same white as the page around it, so the curved edge only registered
 * where it crossed the composition. These two stops are still off-white — the
 * shape now separates from the page without becoming a coloured block.
 */
.sud-ta__panel::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset-block: -12%;
	inset-inline-start: -18%;
	inline-size: 148%;
	background: linear-gradient(135deg, #F4F9F6 0%, #E6F0EA 100%);
	border-radius: 0 46% 38% 0 / 0 52% 48% 0;
	pointer-events: none;
}

/*
 * RTL: the curved edge faces the composition, as in English.
 *
 * The shape's position is logical (inset-inline-start, inline-size), so in
 * Arabic it already moves to the right-hand side behind the copy. Its corners
 * are not: border-radius is written corner by corner in physical terms, so the
 * curve stayed on the RIGHT — out at the screen edge — and the side facing the
 * orbit graphic was a straight vertical cut.
 *
 * Mirrored here: the same radii on the opposite corners, and the gradient's
 * angle mirrored with them (135deg -> 225deg) so the lighter tint stays at the
 * outer edge and deepens towards the graphic, as in English. Same size, same
 * position, same colours.
 */
[dir="rtl"] .sud-ta__panel::before {
	border-radius: 46% 0 0 38% / 52% 0 0 48%;
	background: linear-gradient(225deg, #F4F9F6 0%, #E6F0EA 100%);
}

/* --------------------------------------------------------------------------
   THE COPY — now Elementor widgets

   Each of these is a real widget, so the class lands on the widget WRAPPER and
   the text sits in Elementor's own element inside it (`.elementor-heading-title`,
   `.elementor-button`, a `<p>`). The selectors below reach through that wrapper;
   the design is unchanged.
   -------------------------------------------------------------------------- */

/* The panel stacks its widgets and keeps the CTA from stretching. */
.elementor .e-con.sud-ta__panel {
	align-items: flex-start;
}

/*
 * The copy's breathing room before the composition. Restated at four classes
 * because the padding reset above is three and would otherwise flatten it —
 * the reset exists to kill Elementor's default gutter, not this.
 */
.elementor .e-con.sud-ta > .e-con.sud-ta__panel {
	padding-inline-end: clamp(1rem, 2vw, 2rem);
}

.sud-ta .sud-ta__eyebrow {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
}

.sud-ta .sud-ta__eyebrow .elementor-heading-title {
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(.75rem, .85vw, .875rem);
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1.2;
	/* text-transform: uppercase removed — site uses normal capitalization */
	color: var(--ta-green);
	margin: 0;
}

.sud-ta .sud-ta__eyebrow::before {
	content: '';
	inline-size: clamp(26px, 3vw, 40px);
	block-size: 2px;
	border-radius: 2px;
	background: var(--ta-green);
	flex: 0 0 auto;
}

.sud-ta .sud-ta__title .elementor-heading-title {
	margin: 0;
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(1.75rem, 3.4vw, 3.1rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.025em;

	/*
	 * The design system uppercases every h1 and h2 site wide. The reference sets
	 * this headline in sentence case, so the transform is switched off here only.
	 */
	text-transform: none;
}

.sud-ta .sud-ta__title span { display: block; }
.sud-ta .sud-ta__title .sud-ta__t1 { color: var(--ta-ink); }
.sud-ta .sud-ta__title .sud-ta__t2 { color: var(--ta-green); }

/* The rule is an Elementor divider; it carries its own width, weight and colour. */
.sud-ta .sud-ta__rule {
	margin-block: clamp(1.1rem, 2vw, 1.6rem);
}

.sud-ta .sud-ta__rule .elementor-divider-separator {
	border-radius: 2px;
}

.sud-ta .sud-ta__lede { max-inline-size: 46ch; }

.sud-ta .sud-ta__lede p {
	margin: 0;
	font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
	line-height: 1.75;
	color: var(--ta-body);
}

/* CTA — Elementor button widget */

.sud-ta .sud-ta__cta {
	margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
}

.sud-ta .sud-ta__cta .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(.85rem, 1.2vw, 1.05rem) clamp(1.25rem, 1.9vw, 1.75rem);

	border: 1px solid rgba(0, 99, 68, .38);
	border-radius: 8px;
	background: transparent;

	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(.875rem, 1vw, 1rem);
	font-weight: 700;
	color: var(--ta-green);
	text-decoration: none;

	transition: background-color .35s var(--ta-ease), border-color .35s var(--ta-ease);
}

/*
 * The arrow. Drawn as a mask rather than an <img> so it takes `currentColor`
 * and stays sharp — and so the button remains a plain Elementor button with no
 * icon library loaded for one glyph.
 */
.sud-ta .sud-ta__cta .elementor-button::after {
	content: '';
	inline-size: 18px;
	block-size: 18px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--ta-arrow) center / contain no-repeat;
	mask: var(--ta-arrow) center / contain no-repeat;
	transition: transform .35s var(--ta-ease);
}

.sud-ta {
	--ta-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h13'/%3E%3Cpath d='M11 5l5 5-5 5'/%3E%3C/svg%3E");
}

@media (hover: hover) {
	.sud-ta .sud-ta__cta .elementor-button:hover {
		background-color: rgba(0, 99, 68, .06);
		border-color: var(--ta-green);
		color: var(--ta-green);
	}

	.sud-ta .sud-ta__cta .elementor-button:hover::after { transform: translateX(5px); }
}

.sud-ta .sud-ta__cta .elementor-button:focus-visible {
	outline: 3px solid var(--sud-green-500, #43B649);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   RIGHT — the composition
   -------------------------------------------------------------------------- */

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

/* A very quiet wash behind the composition — depth, not decoration. */
.sud-ta__viz::before {
	content: '';
	position: absolute;
	inset: -6%;
	z-index: 0;
	border-radius: 50%;
	background:
		radial-gradient(60% 60% at 62% 38%, rgba(18, 58, 79, .05), transparent 70%),
		radial-gradient(55% 55% at 35% 70%, rgba(0, 99, 68, .045), transparent 70%);
	pointer-events: none;
}

/* Orbit rings and dots, drawn once as SVG so they stay exact at any size. */
.sud-ta__orbit {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	z-index: 1;
	overflow: visible;
	pointer-events: none;
}

.sud-ta__orbit .sud-ta__ring-outer {
	fill: none;
	stroke: rgba(18, 58, 79, .16);
	stroke-width: 1;
	stroke-dasharray: 3 7;
	vector-effect: non-scaling-stroke;
}

.sud-ta__orbit .sud-ta__arc {
	fill: none;
	stroke-width: 3.4;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.sud-ta__orbit .sud-ta__arc--navy  { stroke: var(--ta-navy); }
.sud-ta__orbit .sud-ta__arc--green { stroke: var(--ta-bright); }

.sud-ta__orbit .sud-ta__dot--navy  { fill: var(--ta-navy); }
.sud-ta__orbit .sud-ta__dot--green { fill: var(--ta-bright); }

/* The hub */

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

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

	box-shadow:
		0 2px 6px rgba(11, 31, 23, .05),
		0 16px 40px rgba(18, 58, 79, .10);
}

/*
 * RTL: pull the hub back the other way.
 *
 * The hub is centred with a LOGICAL inset and a PHYSICAL transform. In RTL the
 * inset flips to `right: 50%` — putting the hub's right edge on the centre line —
 * but translate(-50%) is not direction-aware and still pulls left, so the hub
 * overshoots by its own width. Measured at 1440px: 235.6px left of the ring's
 * centre, exactly one hub width, while the ring, orbit and all six nodes sat on
 * the true centre.
 *
 * The nodes never had this problem because they centre with
 * margin-inline-start, which flips along with the inset. The hub only needs its
 * horizontal pull reversed; the vertical one is unchanged.
 */
[dir="rtl"] .sud-ta__hub {
	transform: translate(50%, -50%);
}

.sud-ta .sud-ta__hubtext {
	margin: 0;
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(.6875rem, 1.35vw, .9375rem);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .04em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	color: var(--ta-navy);
}

.sud-ta .sud-ta__hubtext .sud-ta__hublast { color: var(--ta-green); }

.sud-ta__hubrule {
	display: block;
	inline-size: 26px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--ta-green);
	margin: .55rem auto 0;
}

/* --------------------------------------------------------------------------
   NODES

   rotate -> translate -> counter-rotate. The counter-rotation is what keeps each
   image upright while it sits on the ring.
   -------------------------------------------------------------------------- */

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

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

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

	transition: transform .55s var(--ta-ease), filter .55s var(--ta-ease);
	filter: drop-shadow(0 10px 22px rgba(18, 58, 79, .16));
}

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

/*
 * Hover lifts the node very slightly along its own radius. The translate is
 * bumped rather than a translateY added, so the movement follows the orbit
 * instead of fighting it.
 */
@media (hover: hover) {
	.sud-ta__node:hover {
		transform:
			rotate(var(--a))
			translate(calc(var(--ta-orbit) + 6%))
			rotate(calc(-1 * var(--a)));
		filter: drop-shadow(0 16px 30px rgba(18, 58, 79, .24));
	}
}

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

   Below the desktop breakpoint the composition stops sitting beside the copy
   and moves under it, in the order the brief asks for: label, heading, text,
   CTA, then the visualisation.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.sud-ta { --ta-node: 25%; --ta-orbit: 144%; }   /* 25 x 1.44 = 36% of viz */
	.sud-ta .sud-ta__title .elementor-heading-title { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
}

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

	.sud-ta__panel { padding-block: 0; }

	/* Matches the four-class rule above so the stacked panel really is flush. */
	.elementor .e-con.sud-ta > .e-con.sud-ta__panel { padding-inline-end: 0; }

	/* The organic shape is a two-column device; stacked it has nothing to curve against. */
	.sud-ta__panel::before { display: none; }

	.sud-ta__viz { max-inline-size: min(94%, 480px); }

	.sud-ta .sud-ta__lede { max-inline-size: 60ch; }
}

/* --------------------------------------------------------------------------
   THE SECTION THAT DID NOT CONTAIN ITS OWN COMPOSITION

   Below 768px the orbit hung 166px out of the bottom of its section and over
   the one beneath it. Measured at 375:

     .sud-ta__viz          262 x 262
     its HTML widget       height 0        <- the fault
     .sud-ta__vizcol       48
     grid rows             372.703px 27px  <- second row collapsed
     section               576 tall, viz ending 166px past it

   The viz sizes itself correctly. What it does not do is tell its ancestors how
   tall it is: `aspect-ratio: 1` on a percentage width resolves the element's own
   height, but contributes NOTHING to the intrinsic height of the boxes around
   it, so the widget measured 0, the grid row collapsed to 27px, and the section
   closed above its own contents.

   This is a mobile-only fault and the measurements say so plainly:

     1440   widget 620   section contains the viz with 128px to spare
      768   widget 480   the same
      375   widget   0   BROKEN

   The difference is `max-inline-size: min(94%, 480px)` in the rule above. At
   768 that resolves to the 480px branch — a definite length, which ancestors
   can measure. Below roughly 510px it resolves to the 94% branch, and a
   percentage-derived height is what the ancestors treat as zero.

   THE FIX
   Below 768 the square is stated as a definite length instead of inferred from
   a ratio, and the SAME expression drives both axes, so the composition cannot
   stop being square. Nothing is hidden and no height is invented — 94% of the
   column is exactly the width the panel already had, so the orbit does not
   change size by a pixel. It is only that the page can now see it.

   96px is the two gutters this section sits inside: the Elementor section's own
   24px each side, and `.sud-ta`'s 24px each side.

   Tablet and desktop keep the ratio, because there it already works.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.sud-ta__viz {
		--ta-square: min(calc((100vw - 96px) * .94), 480px);

		aspect-ratio: auto;
		inline-size: var(--ta-square);
		max-inline-size: none;
		block-size: var(--ta-square);
	}
}

@media (max-width: 560px) {
	/*
	 * Nodes grow and the ring tightens. Shrinking the whole composition at the
	 * same rate would leave six 60px images that read as smudges; enlarging them
	 * against a smaller orbit keeps each subject recognisable.
	 */
	/*
	 * Three radii have to agree here, and at 30% nodes / 42% hub they did not:
	 * a node's inner edge fell at 49.5px against a 55px hub, so the six images
	 * sat ON the hub instead of around it.
	 *
	 *   node 28% -> radius 14% of viz
	 *   ring 35% of viz   (28% x 125%)
	 *   hub  36% -> radius 18% of viz
	 *
	 *   inner edge 35 - 14 = 21%  >  hub 18%   -> clears the hub
	 *   outer edge 35 + 14 = 49%  <  50%       -> stays inside the box
	 */
	.sud-ta { --ta-node: 28%; --ta-orbit: 125%; }

	.sud-ta__hub { inline-size: 36%; }

	/* Full-width CTA on a phone, arrow pushed to the far edge. */
	.elementor .e-con.sud-ta__panel { align-items: stretch; }

	.sud-ta .sud-ta__cta .elementor-button {
		inline-size: 100%;
		justify-content: space-between;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sud-ta__node,
	.sud-ta .sud-ta__cta .elementor-button,
	.sud-ta .sud-ta__cta .elementor-button::after { transition: none; }

	.sud-ta__node:hover { transform:
		rotate(var(--a)) translate(var(--ta-orbit)) rotate(calc(-1 * var(--a))); }
}