/* ==========================================================================
   SUDAIR PHARMA — THERAPEUTIC AREAS (home page)

   One section: a dark green panel with an organic curved edge, sitting over a
   bright scientific composition.

   Scoped entirely under .sud-th. That class exists on exactly one container on
   one page, so nothing in this file can reach another section, the header or
   the footer.

   THE CURVE
   The boundary between the green panel and the artwork is the detail that makes
   the reference read as designed rather than assembled. It is an SVG clip path
   in objectBoundingBox units, which means it is expressed as fractions of the
   panel's own box and therefore reshapes itself at any width without a single
   media query. A CSS border-radius cannot produce this shape — it needs an edge
   that bows inward at the middle and returns at top and bottom.
   ========================================================================== */

.sud-th {
	--th-green: #006344;
	--th-green-deep: #00301F;
	--th-green-bright: var(--sud-green-500, #43B649);
	--th-paper: #F7FAF9;
	--th-ease: cubic-bezier(.22, 1, .36, 1);

	/* How much of the section the green panel occupies on desktop. */
	--th-panel: 52%;

	/* The section's own corner rounding, matching the reference's card look. */
	--th-radius: clamp(20px, 2vw, 28px);
}

/*
 * The section sits on the page's own background with breathing room around the
 * card, exactly as the reference shows it.
 */
.e-con.sud-th {
	padding-block: clamp(2.5rem, 5vw, 5rem);
	padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.sud-th__shell {
	position: relative;
	inline-size: 100%;
	max-inline-size: var(--sud-maxw, 1240px);
	margin-inline: auto;
	overflow: hidden;
	border-radius: var(--th-radius);
	background: var(--th-paper);
	isolation: isolate;

	/* A single soft shadow. The reference has depth, not drama. */
	box-shadow:
		0 1px 2px rgba(11, 31, 23, .04),
		0 18px 50px rgba(11, 31, 23, .09);

	/*
	 * 2:1, and the number is derived rather than chosen by eye.
	 *
	 * The artwork's six bubbles occupy 41.8%-98.8% of the file's width and very
	 * nearly its full height. Under object-fit: cover the image scales to the
	 * card's HEIGHT, so the composition's rendered width is 0.91 x height. With
	 * the image right-aligned its left edge lands at (width - 0.931 x height),
	 * which must stay clear of a panel occupying 52%:
	 *
	 *     W - 0.931H > 0.52W   ->   W/H > 1.94
	 *
	 * 16:9 fails that, which is why the lungs bubble was disappearing behind the
	 * green. 2:1 clears it with room to spare, and matches the reference's own
	 * proportion.
	 */
	aspect-ratio: 2 / 1;
}

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

/*
 * The artwork is anchored to the RIGHT of the card, not stretched across it.
 *
 * This matters more than it looks. The source file is 16:10 with its circular
 * composition occupying roughly the right 55% and open pale space on the left.
 * Covering the whole 16:9 card scales the file to full width with no horizontal
 * crop at all, which lands the composition starting near 40% — behind the green
 * panel — and swallows most of the lungs bubble.
 *
 * Giving the visual its own right-anchored box forces the crop onto the empty
 * left margin instead, so the whole composition clears the panel edge.
 */
.sud-th__visual {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 0;
	inline-size: 54%;
	margin: 0;
	overflow: hidden;
}

/*
 * Anchored right. The composition ends at 98.8% of the file, so its right edge
 * effectively IS the image's right edge; any other anchor either clips the
 * rightmost bubbles or drags the whole group left into the green panel. All the
 * cropping is therefore taken off the empty left margin, which is what it is for.
 */
.sud-th__visual img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 100% center;
	display: block;
}

/* --------------------------------------------------------------------------
   THE GREEN PANEL
   -------------------------------------------------------------------------- */

.sud-th__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 2;
	inline-size: var(--th-panel);

	display: flex;
	flex-direction: column;
	justify-content: center;

	/*
	 * Padding leaves room on the right for the curve to bite in without the text
	 * ever running into it.
	 */
	padding: clamp(2rem, 4vw, 4.5rem) clamp(3.5rem, 7vw, 7rem) clamp(2rem, 4vw, 4.5rem) clamp(1.75rem, 4vw, 4.5rem);

	background:
		radial-gradient(120% 90% at 12% 8%, #0A5A3C 0%, transparent 60%),
		linear-gradient(160deg, #054A32 0%, var(--th-green-deep) 100%);

	clip-path: url(#sud-th-curve);
	color: #fff;
}

/*
 * A faint molecular field in the lower corner, as in the reference. Drawn as a
 * dot grid rather than an image so it costs nothing and stays crisp.
 */
.sud-th__panel::after {
	content: '';
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 62%;
	block-size: 46%;
	z-index: 0;
	pointer-events: none;
	opacity: .5;
	background-image: radial-gradient(circle, rgba(67, 182, 73, .30) 1px, transparent 1px);
	background-size: 14px 14px;
	mask-image: linear-gradient(to top right, #000, transparent 62%);
	-webkit-mask-image: linear-gradient(to top right, #000, transparent 62%);
}

.sud-th__panel > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   THE NODE

   The small green dot on the boundary. It marks the pinch of the curve and ties
   the two halves together.
   -------------------------------------------------------------------------- */

.sud-th__node {
	position: absolute;
	z-index: 3;
	inset-block-start: 50%;
	inset-inline-start: var(--th-panel);
	inline-size: 42px;
	block-size: 42px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #fff;
	display: grid;
	place-items: center;
	box-shadow: 0 2px 10px rgba(11, 31, 23, .12);
	pointer-events: none;
}

.sud-th__node::before {
	content: '';
	inline-size: 16px;
	block-size: 16px;
	border-radius: 50%;
	background: var(--th-green-bright);
}

/* --------------------------------------------------------------------------
   PANEL TYPE

   Two classes on every rule. The global kit styles headings at
   `.elementor-kit-5 h2` — a tag-plus-class selector that outranks any single
   class — so a one-class rule here would lose and the heading would render at
   the kit's size and colour instead of this section's.
   -------------------------------------------------------------------------- */

.sud-th .sud-th__eyebrow {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(.75rem, .85vw, .875rem);
	font-weight: 700;
	letter-spacing: .18em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	color: var(--th-green-bright);
}

.sud-th .sud-th__eyebrow::before {
	content: '';
	inline-size: clamp(28px, 3vw, 42px);
	block-size: 2px;
	border-radius: 2px;
	background: var(--th-green-bright);
	flex: 0 0 auto;
}

.sud-th .sud-th__title {
	margin: 0;
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(1.75rem, 3.4vw, 3.25rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.025em;
	color: #fff;
	text-wrap: balance;

	/*
	 * The design system uppercases every h1 and h2 site wide, following the brand
	 * guideline's headline treatment. The supplied reference for THIS section sets
	 * the headline in sentence case, so the transform is switched off here only.
	 * Scoped to .sud-th, so every other heading on the site is unaffected.
	 */
	text-transform: none;
}

.sud-th__rule {
	display: block;
	inline-size: clamp(30px, 3.4vw, 46px);
	block-size: 2px;
	border-radius: 2px;
	background: var(--th-green-bright);
	margin-block: clamp(1.1rem, 2vw, 1.75rem);
}

.sud-th .sud-th__lede {
	margin: 0;
	max-inline-size: 46ch;
	font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
	line-height: 1.75;
	color: rgba(255, 255, 255, .86);
}

/* --------------------------------------------------------------------------
   CTA

   An outlined button, as in the reference. It also needs two classes: the kit
   styles `.elementor-kit-5 a` and would otherwise repaint the label.
   -------------------------------------------------------------------------- */

.sud-th .sud-th__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 3vw, 2.75rem);

	margin-block-start: clamp(1.75rem, 3vw, 2.75rem);
	padding: clamp(.85rem, 1.3vw, 1.05rem) clamp(1.25rem, 2vw, 1.75rem);

	inline-size: fit-content;
	max-inline-size: 100%;

	border: 1px solid rgba(255, 255, 255, .32);
	border-radius: 10px;
	background: transparent;

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

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

.sud-th .sud-th__cta svg {
	inline-size: 18px;
	block-size: 18px;
	flex: 0 0 auto;
	transition: transform .35s var(--th-ease);
}

@media (hover: hover) {
	.sud-th .sud-th__cta:hover {
		background-color: rgba(255, 255, 255, .10);
		border-color: rgba(255, 255, 255, .55);
	}

	.sud-th .sud-th__cta:hover svg { transform: translateX(5px); }
}

.sud-th .sud-th__cta:focus-visible {
	outline: 3px solid var(--th-green-bright);
	outline-offset: 3px;
}

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

   Not a shrunken desktop. Below the breakpoint the two halves stop overlapping
   entirely: the clip path is removed, the panel returns to normal flow, and the
   artwork becomes a band beneath it with its own aspect ratio. That keeps the
   green readable and the science visible, which shrinking would not.
   -------------------------------------------------------------------------- */

/*
 * The panel width and the card proportion are load-bearing, per the derivation
 * above — widening the panel or making the card taller puts the composition back
 * under the green. So between the desktop layout and the stacked one only the
 * type scales down.
 */
@media (max-width: 1100px) {
	.sud-th .sud-th__title { font-size: clamp(1.5rem, 3.2vw, 2.25rem); }
	.sud-th .sud-th__lede { font-size: clamp(.875rem, 1vw, .9375rem); }
}

@media (max-width: 920px) {
	.sud-th__shell {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
	}

	.sud-th__panel {
		position: static;
		inline-size: 100%;

		/*
		 * The curve is a two-column device. Stacked, it would cut a bite out of
		 * the bottom of the text panel for no reason, so it is switched off and
		 * the panel keeps square edges against the artwork below it.
		 */
		clip-path: none;

		padding: clamp(2rem, 6vw, 3rem) clamp(1.5rem, 5vw, 2.5rem);
		order: 1;
	}

	/*
	 * Square, and for the same geometric reason as the desktop ratio.
	 *
	 * The bubbles occupy the right 57% of a 1.6:1 file. A 4:3 or 16:10 box barely
	 * crops the width, so the composition stays jammed against the right edge with
	 * a third of the frame empty — and at 66% object-position the rightmost
	 * bubbles were being cut off entirely. A 1:1 box crops away most of the empty
	 * left margin instead, which lands the composition centred and complete.
	 */
	.sud-th__visual {
		position: relative;
		inset: auto;
		order: 2;
		inline-size: 100%;
		aspect-ratio: 1 / 1;
	}

	/* The node belongs to the curve; without the curve it has nothing to mark. */
	.sud-th__node { display: none; }

	.sud-th .sud-th__lede { max-inline-size: 60ch; }

	.sud-th .sud-th__cta { inline-size: 100%; }
}

@media (max-width: 480px) {
	.sud-th .sud-th__title { font-size: clamp(1.5rem, 7vw, 2rem); }
}

@media (prefers-reduced-motion: reduce) {
	.sud-th .sud-th__cta,
	.sud-th .sud-th__cta svg { transition: none; }

	.sud-th .sud-th__cta:hover svg { transform: none; }
}