/* ==========================================================================
   SUDAIR PHARMA — STRATEGIC PARTNERSHIPS STAGE
   The supplied composite, whole, with the section copy set above its logos.

   Scoped entirely under .sud-sp. These class names exist nowhere else, so
   nothing here can reach an existing component.

   The artwork was measured before this was written:
     - the partner logo cards occupy 62.5%–85% of the file's height, lower-left
     - the clean upper-left runs 0.73–0.91 luminance
   Both numbers drive the layout below: the copy is confined above the cards,
   and it is set in ink rather than white because ink measures 11.4:1 there.
   ========================================================================== */

.sud-sp {
	--sp-radius: var(--sud-radius-xl, 32px);
	--sp-pad: clamp(1.4rem, 3vw, 3rem);
}

/* --------------------------------------------------------------------------
   STAGE
   The file's own 1800:1125 ratio, so the composite is shown complete — skyline,
   flag and all four logo cards — with nothing cropped away.
   -------------------------------------------------------------------------- */

.sud-sp__stage {
	position: relative;
	aspect-ratio: 1800 / 1125;
	border-radius: var(--sp-radius);
	overflow: hidden;
	background: var(--sud-surface-3);
	isolation: isolate;
}

.sud-sp__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sud-sp .sud-sp__img {
	inline-size: 100%;
	block-size: 100%;
	/* Box and file share one ratio, so cover crops nothing. */
	object-fit: cover;
	object-position: center;
	display: block;
}

/*
 * Wash. The upper-left is already pale enough for ink at 11.4:1, so this is for
 * depth and brand warmth — it lifts the copy area slightly and lays a faint
 * green over it, clearing before it reaches the skyline or the logo cards.
 */
.sud-sp__wash {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(104deg,
			rgba(244, 248, 246, .86) 0%,
			rgba(244, 248, 246, .60) 24%,
			rgba(234, 242, 237, .22) 42%,
			rgba(255, 255, 255, 0) 60%),
		linear-gradient(180deg, rgba(0, 99, 68, .06), rgba(0, 99, 68, 0) 38%);
}

/* --------------------------------------------------------------------------
   COPY
   Held inside the clean upper-left: away from the skyline on the right, and
   clear of the logo cards, which begin 62.5% of the way down.
   -------------------------------------------------------------------------- */

.sud-sp__copy {
	position: absolute;
	z-index: 2;
	inset-block-start: var(--sp-pad);
	inset-inline-start: var(--sp-pad);
	inline-size: min(46%, 560px);
	/* Hard stop above the logo row. */
	max-block-size: 54%;
	display: flex;
	flex-direction: column;
	gap: clamp(.45rem, .9vw, .85rem);
}

.sud-sp .sud-sp__eyebrow {
	font-family: var(--sud-font-body);
	font-size: var(--sud-text-xs);
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sud-green-700);          /* 6.0:1 on the pale ground */
}

.sud-sp .sud-sp__title {
	font-family: var(--sud-font-display);
	font-size: clamp(1.25rem, 2.1vw, 2.1rem) !important;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--sud-ink);                /* 11.4:1 at the darkest sampled point */
	margin: 0;
	text-wrap: balance;
}

/* Brand green separates the subtitle from the ink headline above and the body
   below without needing a third type size. */
.sud-sp .sud-sp__sub {
	font-family: var(--sud-font-display);
	font-size: clamp(.875rem, 1.1vw, 1.0625rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--sud-green-700);
	margin: 0;
}

.sud-sp .sud-sp__lead {
	font-family: var(--sud-font-body);
	font-size: clamp(.8125rem, .95vw, .9375rem);
	line-height: 1.6;
	color: var(--sud-body, #46574F);      /* 7.4:1 */
	margin: 0;
}

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

   Below 900 the overlay stops working: the stage height falls with the width
   while the copy does not, and the text would run down into the logo cards. The
   composite becomes a plain banner and the copy moves above it — which still
   places the text above the logos, just in flow rather than on top.
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.sud-sp__stage {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column-reverse;   /* copy above the picture */
		background: var(--sud-surface);
		border: 1px solid var(--sud-line);
	}

	.sud-sp__media {
		position: relative;
		inset: auto;
		aspect-ratio: 1800 / 1125;
	}

	.sud-sp__wash { display: none; }

	.sud-sp__copy {
		position: static;
		inline-size: auto;
		max-block-size: none;
		padding: var(--sp-pad);
	}
}

/* --------------------------------------------------------------------------
   ENTRANCE
   Uses the shared [data-sud-reveal] mechanism motion.js already observes, so
   the section arrives on the same curve as the rest of the page.
   -------------------------------------------------------------------------- */

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

@media print {
	.sud-sp__stage { aspect-ratio: auto; break-inside: avoid; }
	.sud-sp__wash { display: none; }
	.sud-sp__copy { position: static; inline-size: auto; max-block-size: none; }
}