/* ==========================================================================
   SUDAIR PHARMA — THE FOUNDATIONS OF OUR RESEARCH

   The six research foundations as a static 3x2 card grid, replacing the
   interactive tab strip that stood here before.

   Scoped entirely under .sud-rf, a namespace that exists on one section of one
   page. Nothing here can reach the header, the footer, the hero, or any other
   section of the R&D page.

   Colours, radii, shadows and type come from the design system's tokens rather
   than fresh values, so the section moves with the rest of the site if those are
   ever retuned. The only literal is the brand green the client specified.
   ========================================================================== */

.sud-rf {
	--rf-green: #006344;                         /* the specified primary */
	--rf-green-soft: rgba(0, 99, 68, .08);       /* icon discs, rules */
	--rf-ink: #14261E;
	--rf-body: #55665E;
	--rf-line: #E6EDE9;
	--rf-ease: cubic-bezier(.22, 1, .36, 1);

	position: relative;
	isolation: isolate;                          /* keeps the decor behind */
	inline-size: 100%;
	max-inline-size: var(--sud-maxw, 1240px);
	margin-inline: auto;

	/* Room for the decorative work to sit outside the content without pushing
	   anything around. */
	padding-block: clamp(1rem, 2vw, 2rem);
}

/* --------------------------------------------------------------------------
   THE BACKDROP

   Three decorative layers from the reference: a pale wash behind the heading, a
   molecular cluster upper right, and a dotted field down the left.

   All three are drawn on pseudo-elements at a negative z-index and marked
   pointer-events:none, so they can never intercept a click or be picked up by a
   screen reader — they carry no meaning, only atmosphere.
   -------------------------------------------------------------------------- */

.sud-rf::before {
	content: '';
	position: absolute;
	z-index: -1;
	pointer-events: none;

	/* Behind the heading block, upper left. */
	inset-block-start: -2%;
	inset-inline-start: -6%;
	inline-size: 62%;
	block-size: 58%;

	background:
		radial-gradient(60% 70% at 30% 35%, rgba(0, 99, 68, .05), transparent 70%),
		radial-gradient(50% 60% at 60% 20%, rgba(56, 132, 168, .045), transparent 72%);

	border-radius: 50%;
	filter: blur(6px);
}

/*
 * The molecule, upper right.
 *
 * An inline SVG data URI rather than an uploaded image: it is three circles and
 * three lines, so a file would be a network request and a maintenance item for
 * something the stylesheet can state in one line. It also stays crisp at any
 * size, which a raster at this scale would not.
 */
.sud-rf::after {
	content: '';
	position: absolute;
	z-index: -1;
	pointer-events: none;
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: clamp(180px, 26%, 340px);
	aspect-ratio: 1;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg stroke='%23CFE0D8' stroke-width='6' fill='none' opacity='.85'%3E%3Cpath d='M74 62 L150 104 M150 104 L128 178 M150 104 L212 78'/%3E%3C/g%3E%3Cg fill='%23E4EFE9'%3E%3Ccircle cx='74' cy='62' r='30'/%3E%3Ccircle cx='150' cy='104' r='34'/%3E%3Ccircle cx='128' cy='178' r='26'/%3E%3Ccircle cx='212' cy='78' r='22'/%3E%3C/g%3E%3Cg fill='%23F2F8F5'%3E%3Ccircle cx='66' cy='54' r='11'/%3E%3Ccircle cx='141' cy='95' r='12'/%3E%3Ccircle cx='121' cy='170' r='9'/%3E%3Ccircle cx='206' cy='71' r='8'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top right;
	opacity: .9;
}

/* The dotted field down the left edge. A repeating radial gradient, masked so it
   fades out rather than stopping at a hard edge. */
.sud-rf__dots {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	inset-block: 6% 0;
	inset-inline-start: -2.5%;
	inline-size: 74px;

	background-image: radial-gradient(circle, #D3E3DB 1.7px, transparent 1.9px);
	background-size: 16px 16px;

	-webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 62%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 18%, #000 62%, transparent);
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

.sud-rf__head {
	max-inline-size: 44rem;
	margin-block-end: clamp(2rem, 3.6vw, 3rem);
}

/*
 * Two lines, two colours, ONE heading element.
 *
 * The line break is a <span>, not a second heading — the reference shows one
 * title styled across two lines, and splitting it into two headings would put a
 * second entry in the document outline for something that is not a second
 * section.
 */
/*
 * Selected at .sud-rf <el>, two classes, NOT one.
 *
 * Elementor's kit writes `.elementor-kit-5 h2 { color; font-size }` at (0,1,1),
 * which outranks a single-class rule — measured, the first line rendered in
 * Elementor's global colour at 48px rather than anything asked for here. The
 * second line happened to be right only because `.sud-rf__title span` is itself
 * (0,1,1) and won on order. Adding the section class settles both properly.
 */
.sud-rf .sud-rf__title {
	font-family: var(--sud-font-display, Roboto, sans-serif);
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -.01em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	color: var(--rf-ink);
	margin: 0;
}

.sud-rf .sud-rf__title span {
	display: block;
	color: var(--rf-green);
}

.sud-rf__rule {
	display: block;
	inline-size: 68px;
	block-size: 3px;
	border-radius: 3px;
	background: var(--rf-green);
	margin-block: 1.15rem 1.35rem;
}

.sud-rf__lede {
	font-size: var(--sud-text-lg, 1.0625rem);
	line-height: 1.65;
	color: var(--rf-body);
	margin: 0;
	max-inline-size: 38rem;
}

/* --------------------------------------------------------------------------
   THE GRID
   -------------------------------------------------------------------------- */

.sud-rf__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 1.7vw, 1.6rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * `align-items: stretch` is the grid default and is what makes every card the
 * height of the tallest in its row. The cards are flex columns so their own
 * contents distribute inside that height rather than leaving the card short.
 */
.sud-rf__card {
	display: flex;
	flex-direction: column;
	background: var(--sud-surface, #fff);
	border: 1px solid var(--rf-line);
	border-radius: var(--sud-radius-lg, 24px);
	padding: clamp(1.25rem, 1.9vw, 1.75rem);
	position: relative;

	box-shadow:
		0 1px 2px rgba(11, 31, 23, .03),
		0 10px 28px rgba(11, 31, 23, .05);

	transition:
		border-color .3s var(--rf-ease),
		box-shadow .3s var(--rf-ease),
		transform .3s var(--rf-ease);
}

@media (hover: hover) {
	.sud-rf__card:hover {
		border-color: #CFE0D8;
		box-shadow:
			0 2px 4px rgba(11, 31, 23, .04),
			0 18px 40px rgba(0, 99, 68, .09);
		transform: translateY(-3px);
	}
}

/* The number, upper right. */
.sud-rf__num {
	position: absolute;
	inset-block-start: clamp(1rem, 1.6vw, 1.4rem);
	inset-inline-end: clamp(1.1rem, 1.7vw, 1.6rem);

	font-family: var(--sud-font-display, Roboto, sans-serif);
	font-size: clamp(1.4rem, 1.9vw, 1.75rem);
	font-weight: 800;
	line-height: 1;
	color: var(--rf-green);
}

/* Icon disc beside the title, as in the reference. */
.sud-rf__top {
	display: flex;
	align-items: center;
	gap: clamp(.85rem, 1.2vw, 1.1rem);

	/* Clear of the number so a long title cannot run under it. */
	padding-inline-end: 2.75rem;
}

.sud-rf__icon {
	flex: 0 0 auto;
	inline-size: clamp(48px, 4.6vw, 60px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--rf-green-soft);
	display: grid;
	place-items: center;
	color: var(--rf-green);
}

.sud-rf__icon svg {
	inline-size: 55%;
	block-size: 55%;
	display: block;
}

/*
 * Two classes here too — `.elementor-kit-5 h3` is (0,1,1) and was rendering
 * these card titles at 34px in Elementor's global colour, which is exactly the
 * "excessively large" the brief rules out.
 */
.sud-rf .sud-rf__name {
	font-family: var(--sud-font-display, Roboto, sans-serif);
	font-size: clamp(1rem, 1.15vw, 1.125rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--rf-ink);
	margin: 0;

	/* Wraps on its own words and balances the lines rather than stranding one. */
	text-wrap: balance;
}

/* The short rule under each title. */
.sud-rf__tick {
	display: block;
	inline-size: 34px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--rf-green);
	margin-block: clamp(.9rem, 1.4vw, 1.15rem) clamp(.8rem, 1.2vw, 1rem);
}

.sud-rf__desc {
	font-size: var(--sud-text-base, 1rem);
	line-height: 1.6;
	color: var(--rf-body);
	margin: 0;
}

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

@media (max-width: 1024px) {
	.sud-rf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* The molecule would sit over the second card once the grid narrows. */
	.sud-rf::after { inline-size: clamp(150px, 22%, 240px); opacity: .7; }
}

@media (max-width: 640px) {
	.sud-rf__grid { grid-template-columns: 1fr; }

	/* Both decorations go on a phone: at this width they have nowhere to sit
	   that is not behind the text, and "subtle" stops being possible. */
	.sud-rf::after,
	.sud-rf__dots { display: none; }

	.sud-rf__top { padding-inline-end: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.sud-rf__card { transition: none; }
	.sud-rf__card:hover { transform: none; }
}

@media print {
	.sud-rf::before,
	.sud-rf::after,
	.sud-rf__dots { display: none; }

	.sud-rf__card { box-shadow: none; }
}