/* ==========================================================================
   SUDAIR PHARMA — IMAGE-LED SECTIONS
   Photographic banners, full-bleed bands and media cards. Kept separate from
   the core design system so the imagery layer can be tuned independently.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Photographic page banner
   -------------------------------------------------------------------------- */

.sud-banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(6rem, 11vw, 10.5rem) clamp(4rem, 7vw, 7rem);
	background-color: var(--sud-green-900);
}

/* Brand-tinted scrim.
 *
 * The alpha floor is derived, not eyeballed. White text needs a background
 * luminance ≤0.183 to clear 4.5:1. The scrim colour is #00301F (near-black), so
 * over a worst-case pure-white photograph the composite is 255 × (1 − alpha);
 * that must land ≤118, which means alpha ≥ 0.54.
 *
 * The floor is therefore 0.62 — enough margin that the hero stays legible over
 * ANY crop the client later swaps in, not just the current photographs. The
 * reading side ramps to 0.94 so the headline sits on near-solid brand colour,
 * which is how the reference set (AstraZeneca, Roche) treat photographic heroes.
 */
.sud-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right,
			rgba(0, 48, 31, .96) 0%,
			rgba(0, 48, 31, .93) 42%,
			rgba(0, 48, 31, .86) 72%,
			rgba(0, 48, 31, .78) 100%),
		linear-gradient(to bottom, rgba(0, 48, 31, .34) 0%, rgba(0, 48, 31, .52) 100%);
	z-index: -1;
}

[dir="rtl"] .sud-banner::before {
	background:
		linear-gradient(to left,
			rgba(0, 48, 31, .96) 0%,
			rgba(0, 48, 31, .93) 42%,
			rgba(0, 48, 31, .86) 72%,
			rgba(0, 48, 31, .78) 100%),
		linear-gradient(to bottom, rgba(0, 48, 31, .34) 0%, rgba(0, 48, 31, .52) 100%);
}

/* --------------------------------------------------------------------------
   CLEAR BANNER — Therapeutic Areas only
   The photograph at full fidelity: no scrim, no opacity, nothing over it.

   The scrim cannot simply be deleted. Measured across the seven photographs
   these pages use, the luminance behind the copy runs 0.47–0.72 median and up
   to 0.99 at the 95th percentile. White text on that lands around 1.5–2.5:1
   against a 4.5:1 minimum, and no single alpha below 0.63 clears it on any of
   them — which is a scrim, i.e. the thing being removed.

   So the image keeps every pixel and the COPY gets its own ground instead: a
   solid brand panel, sized to leave the photograph genuinely visible beside it.
   Contrast becomes a fixed 14.5:1 (white on #00301F) and no longer depends on
   which photograph is behind it — a crop swapped in later cannot break it.
   -------------------------------------------------------------------------- */

.sud-banner--clear::before { content: none; }

.sud-banner--clear .sud-banner__copy {
	/* The panel, not the section, is what the eye reads as the text ground. */
	max-inline-size: min(640px, 56%);
	margin-inline-end: auto;
	padding: clamp(1.75rem, 3.2vw, 2.75rem);
	border-radius: var(--sud-radius-lg);
	background: var(--sud-green-900);
	box-shadow: 0 24px 64px rgba(0, 24, 15, .34);
}

/* The lead is measure-capped for the full-width banner; inside the panel that
   cap is narrower than the panel itself and leaves a ragged right edge. */
.sud-banner--clear .sud-banner__copy .sud-measure { max-inline-size: none; }

@media (max-width: 1024px) {
	.sud-banner--clear .sud-banner__copy { max-inline-size: min(640px, 72%); }
}

@media (max-width: 767px) {
	/* Full width on a phone — a panel narrow enough to show the photograph
	   beside it would leave the headline in a column too narrow to read. The
	   banner's own block padding keeps the image visible above and below. */
	.sud-banner--clear .sud-banner__copy {
		max-inline-size: none;
		padding: clamp(1.25rem, 5vw, 1.75rem);
		border-radius: var(--sud-radius-md, 16px);
	}
}

/* --------------------------------------------------------------------------
   THERAPEUTIC AREA CARDS
   Artwork on top, copy beneath, four to a row. Scoped entirely under .sud-ac —
   these class names exist nowhere else, so nothing here can reach an existing
   component.

   ON THE 55–65% IMAGE SHARE
   The supplied artwork is 8:5 (1800×1125) — wide and short. Spanning the full
   card width with nothing cropped fixes the image height at cardWidth ÷ 1.6;
   the only remaining variable is how tall the copy area is. With the given
   descriptions running three to four lines, the honest ceiling at four cards a
   row is about 54%. Reaching 60% would need either a crop or letterbox bars,
   both of which are ruled out, so the copy area is tuned as tight as it can be
   read at and the share lands at the bottom of the range rather than inside it.
   -------------------------------------------------------------------------- */

/*
 * This section runs wider than the site's 1240px measure.
 *
 * Four cards inside 1240 come out around 290px each, which on a 1440+ screen
 * reads as small tiles adrift in empty page. The cap is lifted to 1600 so the
 * row uses the width that is actually there, while still stopping short of the
 * viewport edge on a large monitor — the grid stays a band of cards rather than
 * becoming full-bleed. Scoped to this section; every other section keeps 1240.
 */
/* Elementor caps the width in two places for a boxed container: a max-width on
   the container itself, and a second one written onto its .e-con-inner from the
   `boxed_width` setting. Overriding only the outer one leaves the inner at 1240
   and nothing moves. */
.sud-ac-section > .e-con,
.sud-ac-section > .e-con > .e-con-inner {
	--container-max-width: 1600px;
	max-inline-size: 1600px;
	/* The section is a flex column, so a child that no longer fills it aligns to
	   the start. Past 1600px viewport the grid would sit hard left with all the
	   slack on the right; the auto margins keep it centred. */
	margin-inline: auto;
}

.sud-ac__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* Both rows share one height, so a long description in row 1 does not leave
	   row 2 visibly shorter. Without it the rows size independently and the
	   eight cards stop matching. */
	grid-auto-rows: 1fr;
	/* Generous, and deliberately looser between rows than between columns —
	   it separates the two rows as bands rather than making one dense field. */
	column-gap: clamp(1.35rem, 1.7vw, 1.9rem);
	row-gap: clamp(1.9rem, 2.6vw, 2.9rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Desktop 4, tablet 2, mobile 1 — no three-up step, so a tablet never lands on
   an orphan card in the last row. */
@media (max-width: 1179px) { .sud-ac__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px)  { .sud-ac__grid { grid-template-columns: 1fr; } }

.sud-ac__item { display: flex; }

/* --------------------------------------------------------------------------
   CARD
   One anchor covering the whole tile. The card carries no padding of its own —
   the artwork runs to the top and side edges, and only the copy beneath it is
   inset. Padding on the card would leave a white margin around the image, which
   is the "unnecessary empty side area" this layout is meant to avoid.
   -------------------------------------------------------------------------- */

.sud-ac .sud-ac__card {
	/* Kept as tight as the copy reads at: every millimetre here is a millimetre
	   the artwork does not get, and the card is meant to be image-led. */
	--ac-pad: clamp(1.15rem, 1.5vw, 1.55rem);

	position: relative;
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	padding: 0;

	background: var(--sud-surface);
	border: 1px solid var(--sud-line);
	border-radius: var(--sud-radius-lg);
	box-shadow:
		0 1px 2px rgba(11, 31, 23, .04),
		0 10px 30px rgba(11, 31, 23, .05);
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;

	transition:
		transform .5s var(--sud-ease, cubic-bezier(.22,1,.36,1)),
		box-shadow .5s var(--sud-ease, cubic-bezier(.22,1,.36,1)),
		border-color .4s ease;
}

.sud-ac__body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1 1 auto;                 /* absorbs the slack so all cards match */
	padding: var(--ac-pad);
}

/* Type steps up with the card — a larger tile carrying the same 13px body copy
   reads as a small card that was stretched, not as a larger card. */
.sud-ac .sud-ac__title {
	font-family: var(--sud-font-display);
	font-size: clamp(1.05rem, 1.25vw, 1.2rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sud-ink);
}

.sud-ac .sud-ac__text {
	font-family: var(--sud-font-body);
	font-size: var(--sud-text-sm);
	line-height: 1.6;
	color: var(--sud-muted);
}

/* The link affordance. Not a link itself — the whole card is the link. */
.sud-ac .sud-ac__go {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-block-start: auto;
	padding-block-start: .25rem;

	font-family: var(--sud-font-body);
	font-size: var(--sud-text-sm);
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--sud-green-700);          /* 6.8:1 on white */
}

.sud-ac .sud-ac__go svg {
	inline-size: 20px;
	block-size: 11px;
	transition: transform .45s var(--sud-ease, cubic-bezier(.22,1,.36,1));
}

/* --------------------------------------------------------------------------
   ARTWORK
   -------------------------------------------------------------------------- */

/*
 * Artwork at the head of the card, edge to edge.
 *
 * It spans the card's full width with no inset, so there is no white margin
 * down either side of the picture. The card's overflow:hidden rounds the two
 * top corners to the card radius, so the image and the card share one
 * silhouette rather than sitting as a rounded rectangle inside another.
 */
.sud-ac__media {
	display: block;
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: 0;
	background: var(--sud-surface-3);

	/*
	 * Taller than the artwork's native 8/5.
	 *
	 * At 8/5 the picture is exactly as tall as a full-width 1800×1125 file can
	 * be — 195px in a 314px card — which left it at 46% of the card, visibly the
	 * smaller half. Height at a fixed width can only come from a taller box, and
	 * a taller box means `cover`.
	 *
	 * 5/4 crops about 22% of the width, 11% from each side. The re-supplied set
	 * carries its subject centred with soft background either side, so that trim
	 * takes background rather than subject. Anything squarer starts cutting into
	 * the artwork itself.
	 */
	aspect-ratio: 5 / 4;
}

/*
 * `cover`, paired with the 5/4 box above, so the picture fills the frame edge to
 * edge and carries the card. `contain` would letterbox it — the artwork is 8/5
 * and the frame is 5/4 — putting brand-surface bars top and bottom, which is the
 * "image floating in half a card" look this is meant to fix.
 *
 * The cost is a deliberate 11% trim from each side. See the note on the frame.
 */
.sud-ac .sud-ac__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: filter .55s var(--sud-ease, cubic-bezier(.22,1,.36,1));
}

/* --------------------------------------------------------------------------
   HOVER / FOCUS
   -------------------------------------------------------------------------- */

@media (hover: hover) {
	.sud-ac .sud-ac__card:hover {
		transform: translateY(-6px);
		box-shadow: var(--sud-shadow-lg);
		border-color: transparent;
	}

	/*
	 * No zoom on hover. Scaling the picture up inside a fixed box crops it —
	 * that is what a zoom is — which would put the crop back the moment the
	 * pointer landed. The image answers with light instead, and the lift and
	 * the arrow carry the rest of the feedback.
	 */
	.sud-ac .sud-ac__card:hover .sud-ac__img { filter: brightness(1.06) saturate(1.06); }
	.sud-ac .sud-ac__card:hover .sud-ac__go svg { transform: translateX(4px); }
}

.sud-ac .sud-ac__card:focus-visible {
	outline: 3px solid var(--sud-green-500);
	outline-offset: 3px;
	box-shadow: var(--sud-shadow-lg);
	border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.sud-ac .sud-ac__card,
	.sud-ac .sud-ac__img,
	.sud-ac .sud-ac__go svg { transition: none !important; }
	.sud-ac .sud-ac__card:hover { transform: none; }
	.sud-ac .sud-ac__card:hover .sud-ac__img { filter: none; }
}

@media print {
	.sud-ac .sud-ac__card { break-inside: avoid; box-shadow: none; }
}

/* A hairline of brand colour along the bottom edge */
.sud-banner::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 3px;
	background: linear-gradient(90deg,
		var(--sud-green-500), var(--sud-blue-500) 45%, var(--sud-blue-400) 75%, transparent);
	z-index: 1;
}

/* Banner text.
 *
 * `!important` is required here, not stylistic: Elementor writes heading colour
 * per element at a specificity a theme rule cannot reach, and it was rendering
 * the hero H1 in near-black ink on the dark photograph. Every text role in the
 * banner is pinned explicitly so no widget default can leak through. */
.sud-banner h1,
.sud-banner h2,
.sud-banner h3,
.sud-banner .elementor-heading-title {
	color: #fff !important;
	/* Light type on a photograph reads thinner than on flat colour */
	text-shadow: 0 1px 2px rgba(0, 20, 12, .28);
}

.sud-banner .sud-lead,
.sud-banner .sud-lead p,
.sud-banner .elementor-widget-text-editor,
.sud-banner .elementor-widget-text-editor p {
	color: rgba(255, 255, 255, .90) !important;
}

/* Banner eyebrow colour is owned solely by on-dark.css — white, per the brand
   rule for text on green or imagery. */

.sud-banner .sud-breadcrumb p,
.sud-banner .sud-breadcrumb {
	color: rgba(255, 255, 255, .78) !important;
	margin: 0;
}

.sud-banner .sud-breadcrumb a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.sud-banner .sud-breadcrumb a:hover,
.sud-banner .sud-breadcrumb a:focus-visible { color: #fff; text-decoration: underline; }

/* Same treatment for the full-bleed statement band */
.sud-band h1,
.sud-band h2,
.sud-band h3,
.sud-band .elementor-heading-title { color: #fff !important; }

.sud-band .sud-lead,
.sud-band .sud-lead p,
.sud-band .elementor-widget-text-editor p { color: rgba(255, 255, 255, .90) !important; }

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

/* --------------------------------------------------------------------------
   Full-bleed image band
   -------------------------------------------------------------------------- */

.sud-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(4.5rem, 8vw, 7.5rem);
	background-color: var(--sud-green-900);
}

.sud-band::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
		rgba(0, 48, 31, .82), rgba(0, 48, 31, .88));
	z-index: -1;
}

.sud-band h2 { color: #fff; }
.sud-band .sud-lead p { color: rgba(255, 255, 255, .82); }
.sud-band__copy { position: relative; z-index: 2; }

.sud-band .sud-stat .elementor-counter-number-wrapper { color: #fff; }
.sud-band .sud-stat .elementor-counter-title { color: rgba(255, 255, 255, .72); }
.sud-band .sud-stat-band { border-color: rgba(255, 255, 255, .18); }

/* background-attachment: fixed is a scroll-jank risk on touch devices and is
   ignored by iOS anyway — turn it off below desktop. */
@media (max-width: 1024px), (hover: none) {
	.sud-band { background-attachment: scroll !important; }
}

/* --------------------------------------------------------------------------
   Media cards
   -------------------------------------------------------------------------- */

.sud-mediacard {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.sud-mediacard__img { margin: 0; overflow: hidden; }

.sud-mediacard__img img {
	border-radius: 0;
	inline-size: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	transition: transform .7s var(--sud-ease);
}

.sud-mediacard:hover .sud-mediacard__img img { transform: scale(1.045); }

.sud-mediacard__body {
	padding: clamp(1.25rem, 2.2vw, 1.75rem);
	flex: 1 1 auto;
}

.sud-mediacard__body p {
	font-size: var(--sud-text-sm);
	line-height: 1.7;
	color: var(--sud-body);
	margin: 0;
}

.sud-mediacard__more a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 600;
	font-size: var(--sud-text-sm);
	color: var(--sud-green-700);
	text-decoration: none;
}

.sud-mediacard__more a::after {
	content: '→';
	transition: transform .3s var(--sud-ease);
}

[dir="rtl"] .sud-mediacard__more a::after { content: '←'; }

.sud-mediacard__more a:hover::after { transform: translateX(3px); }
[dir="rtl"] .sud-mediacard__more a:hover::after { transform: translateX(-3px); }

/* --------------------------------------------------------------------------
   Split-block imagery
   -------------------------------------------------------------------------- */

.sud-split .sud-media img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--sud-radius-lg);
	box-shadow: var(--sud-shadow);
}

.sud-split .sud-media--wide img { aspect-ratio: 16 / 11; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
	.sud-mediacard__img img,
	.sud-mediacard:hover .sud-mediacard__img img { transition: none; transform: none; }
}