/* ==========================================================================
   SUDAIR PHARMA — VISUAL LAYER
   Decorative graphics, layered compositions and image treatments.

   Everything here is decoration: it sits behind or beside content, never
   carries meaning, and is hidden from assistive tech. It is also the first
   thing to switch off under prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DECORATIVE FIELD
   A soft brand-coloured wash used to stop long white sections reading flat.
   Applied via .sud-field on any section.
   -------------------------------------------------------------------------- */

.sud-field { position: relative; isolation: isolate; overflow: hidden; }

.sud-field::before {
	content: '';
	position: absolute;
	inset-block-start: -22%;
	inset-inline-end: -14%;
	inline-size: min(46vw, 620px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%,
		rgba(67, 182, 73, .14), rgba(48, 181, 227, .10) 45%, transparent 70%);
	filter: blur(8px);
	z-index: -1;
	pointer-events: none;
}

.sud-field::after {
	content: '';
	position: absolute;
	inset-block-end: -26%;
	inset-inline-start: -12%;
	inline-size: min(38vw, 500px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 60% 40%,
		rgba(0, 99, 68, .10), rgba(133, 211, 230, .08) 50%, transparent 72%);
	filter: blur(10px);
	z-index: -1;
	pointer-events: none;
}

/* Alternate: a fine dotted matrix, echoing tablet blister packs without
   being literal about it. */
.sud-dots { position: relative; isolation: isolate; }

.sud-dots::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: min(34vw, 420px);
	block-size: min(28vw, 320px);
	background-image: radial-gradient(circle, rgba(0, 99, 68, .16) 1.5px, transparent 1.6px);
	background-size: 18px 18px;
	-webkit-mask-image: linear-gradient(225deg, #000 10%, transparent 72%);
	        mask-image: linear-gradient(225deg, #000 10%, transparent 72%);
	z-index: -1;
	pointer-events: none;
}

[dir="rtl"] .sud-dots::before {
	-webkit-mask-image: linear-gradient(135deg, #000 10%, transparent 72%);
	        mask-image: linear-gradient(135deg, #000 10%, transparent 72%);
}

/* A hairline rule that fades out — used to separate sections without a border */
.sud-rule-soft {
	border: 0;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, var(--sud-line) 18%, var(--sud-line) 82%, transparent);
	margin: 0;
}

/* --------------------------------------------------------------------------
   2. IMAGE TREATMENTS
   -------------------------------------------------------------------------- */

/* Base: rounded, cropped, and clipped so the zoom on hover has something to
   push against. */
.sud-media img,
.sud-mediacard__img img,
.sud-split .sud-media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: cover;
}

/* Editorial frame — a brand-tinted plate offset behind the photograph.
   Replaces the thin outline the earlier build used; this reads as art
   direction rather than a border. */
.sud-media--plate { position: relative; isolation: isolate; }

.sud-media--plate::before {
	content: '';
	position: absolute;
	inset-block-start: clamp(1rem, 2.4vw, 2rem);
	inset-inline-start: clamp(1rem, 2.4vw, 2rem);
	inline-size: 100%;
	block-size: 100%;
	border-radius: var(--sud-radius-lg);
	background: linear-gradient(135deg, rgba(0, 99, 68, .12), rgba(48, 181, 227, .10));
	z-index: -1;
}

/* A small colour chip tucked under the opposite corner, for asymmetry */
.sud-media--plate::after {
	content: '';
	position: absolute;
	inset-block-end: clamp(-0.75rem, -1.4vw, -1.25rem);
	inset-inline-end: clamp(-0.75rem, -1.4vw, -1.25rem);
	inline-size: clamp(72px, 9vw, 128px);
	aspect-ratio: 1;
	border-radius: var(--sud-radius);
	background: var(--sud-green-500);
	opacity: .16;
	z-index: -1;
}

/* Duotone-ish treatment for supporting imagery: pulls stock photography
   toward the brand so mixed sources still feel like one library. */
.sud-media--brandtint img {
	filter: saturate(.85) contrast(1.04);
}

.sud-media--brandtint {
	position: relative;
	border-radius: var(--sud-radius-lg);
	overflow: hidden;
}

.sud-media--brandtint::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(0, 99, 68, .18), rgba(27, 70, 157, .10) 60%, transparent);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. LAYERED HERO COMPOSITION
   Photograph + offset plate + floating stat card. Used on the homepage.
   -------------------------------------------------------------------------- */

.sud-compose { position: relative; isolation: isolate; }

.sud-compose__figure {
	position: relative;
	border-radius: var(--sud-radius-lg);
	overflow: hidden;
	box-shadow: var(--sud-shadow-lg);
}

.sud-compose__figure img { aspect-ratio: 4 / 5; }

/* Secondary image, overlapping the primary from below */
.sud-compose__inset {
	position: absolute;
	inset-block-end: clamp(-2rem, -3vw, -3rem);
	inset-inline-start: clamp(-1.5rem, -2.5vw, -2.5rem);
	inline-size: clamp(140px, 21vw, 230px);
	border-radius: var(--sud-radius);
	overflow: hidden;
	box-shadow: var(--sud-shadow-lg);
	border: 4px solid #fff;
}

.sud-compose__inset img { aspect-ratio: 1; }

/* Floating figure card */
.sud-float {
	position: absolute;
	inset-block-start: clamp(1.5rem, 4vw, 3rem);
	inset-inline-end: clamp(-1rem, -2vw, -2rem);
	background: #fff;
	border-radius: var(--sud-radius);
	padding: clamp(0.9rem, 1.6vw, 1.25rem) clamp(1.1rem, 2vw, 1.6rem);
	box-shadow: var(--sud-shadow-lg);
	min-inline-size: clamp(140px, 16vw, 190px);
}

.sud-float__n {
	display: block;
	font-family: var(--sud-font-display);
	font-size: clamp(1.6rem, 2.6vw, 2.25rem);
	font-weight: 900;
	line-height: 1;
	color: var(--sud-green-700);
	font-variant-numeric: tabular-nums;
}

.sud-float__l {
	display: block;
	margin-block-start: .35rem;
	font-size: var(--sud-text-xs);
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--sud-muted);
}

@media (max-width: 767px) {
	.sud-compose__inset { inline-size: 120px; inset-inline-start: -0.75rem; inset-block-end: -1.25rem; }
	.sud-float { inset-inline-end: -0.5rem; padding: .75rem 1rem; }
}

/* --------------------------------------------------------------------------
   4. SECTION RHYTHM
   Alternating density stops the page reading as one long column.
   -------------------------------------------------------------------------- */

.sud-section--roomy { padding-block: clamp(5.5rem, 10vw, 10rem); }
.sud-section--snug  { padding-block: clamp(2.5rem, 4vw, 3.5rem); }

/* Pull a following section up so a photograph can bridge two bands */
.sud-overlap { margin-block-start: clamp(-6rem, -8vw, -4rem); position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   5. PRINT
   -------------------------------------------------------------------------- */

@media print {
	.sud-field::before, .sud-field::after,
	.sud-dots::before,
	.sud-media--plate::before, .sud-media--plate::after,
	.sud-float { display: none !important; }
}

/* --------------------------------------------------------------------------
   6. REDUCED MOTION / REDUCED TRANSPARENCY
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sud-field::before, .sud-field::after { filter: none; }
}