/* ==========================================================================
   SUDAIR PHARMA — CAREERS

   The careers page rebuilt in the site's own visual language: the same green,
   the same type scale, the same radii, shadows and container width as every
   other section, taken from the design system's tokens rather than restated.

   Scoped entirely under .sud-cr, a namespace that exists on one page. Nothing
   here can reach the header, the footer, or any other page.
   ========================================================================== */

.sud-cr {
	--cr-green: var(--sud-green-700, #006344);
	--cr-bright: var(--sud-green-500, #43B649);
	--cr-ink: var(--sud-ink, #0B1F17);
	--cr-body: #55665E;
	--cr-line: var(--sud-line, #E3EAE6);
	--cr-ease: cubic-bezier(.22, 1, .36, 1);

	inline-size: 100%;
	max-inline-size: var(--sud-maxw, 1240px);
	margin-inline: auto;
	position: relative;
}

/* --------------------------------------------------------------------------
   SHARED PIECES
   -------------------------------------------------------------------------- */

.sud-cr .sud-cr__eyebrow {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-family: var(--sud-font-display, Roboto, sans-serif);
	font-size: var(--sud-text-sm, .9375rem);
	font-weight: 700;
	letter-spacing: .12em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	color: var(--cr-green);
	margin: 0 0 1rem;
}

/* The thin accent line the site uses beside its eyebrows. */
.sud-cr .sud-cr__eyebrow::before {
	content: '';
	inline-size: 34px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--cr-bright);
	flex: 0 0 auto;
}

.sud-cr .sud-cr__h2 {
	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: -.015em;
	color: var(--cr-ink);
	margin: 0;
}

.sud-cr .sud-cr__sub {
	font-family: var(--sud-font-display, Roboto, sans-serif);
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	font-weight: 700;
	color: var(--cr-green);
	margin: .55rem 0 0;
}

.sud-cr__rule {
	display: block;
	inline-size: 56px;
	block-size: 3px;
	border-radius: 3px;
	background: var(--cr-bright);
	margin-block: 1.1rem 1.3rem;
}

.sud-cr p {
	font-size: var(--sud-text-base, 1rem);
	line-height: 1.75;
	color: var(--cr-body);
	margin: 0;
}

/*
 * The image treatment used across the site: a generous radius with one corner
 * eased further, so the photograph reads as a shape rather than a rectangle.
 */
.sud-cr__media {
	margin: 0;
	overflow: hidden;
	border-radius: clamp(24px, 3vw, 48px);
	border-end-start-radius: clamp(56px, 7vw, 120px);
	box-shadow: 0 18px 48px rgba(11, 31, 23, .10);
	background: var(--sud-surface-2, #F4F8F6);
}

.sud-cr__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------------------
   SPLIT SECTIONS (intro, and empowering)
   -------------------------------------------------------------------------- */

.sud-cr__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 4.5vw, 4.5rem);
	align-items: center;
}

.sud-cr__split--reverse .sud-cr__copy { order: 2; }
.sud-cr__split--reverse .sud-cr__media { order: 1; }

.sud-cr__split .sud-cr__media { aspect-ratio: 4 / 3; }

.sud-cr__copy p + p { margin-block-start: 1rem; }

/* --------------------------------------------------------------------------
   BENEFIT CARDS — "Joining Sudair Pharma"
   -------------------------------------------------------------------------- */

.sud-cr__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;
}

.sud-cr__card {
	display: flex;
	flex-direction: column;
	background: var(--sud-surface, #fff);
	border: 1px solid var(--cr-line);
	border-radius: var(--sud-radius-lg, 24px);
	padding: clamp(1.35rem, 2vw, 1.85rem);
	box-shadow:
		0 1px 2px rgba(11, 31, 23, .03),
		0 10px 26px rgba(11, 31, 23, .05);
	transition:
		border-color .3s var(--cr-ease),
		box-shadow .3s var(--cr-ease),
		transform .3s var(--cr-ease);
}

@media (hover: hover) {
	.sud-cr__card:hover {
		border-color: #CFE0D8;
		box-shadow: 0 18px 40px rgba(0, 99, 68, .09);
		transform: translateY(-3px);
	}
}

.sud-cr__icon {
	inline-size: 52px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(0, 99, 68, .08);
	color: var(--cr-green);
	display: grid;
	place-items: center;
	margin-block-end: 1.1rem;
	flex: 0 0 auto;
}

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

.sud-cr .sud-cr__cardtext {
	font-family: var(--sud-font-display, Roboto, sans-serif);
	font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
	font-weight: 600;
	line-height: 1.45;
	color: var(--cr-ink);
	margin: 0;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   CULTURE GRID — "Our Culture in Action"
   -------------------------------------------------------------------------- */

.sud-cr__culture {
	background: var(--sud-surface-2, #F4F8F6);
	border-radius: var(--sud-radius-xl, 32px);
	padding: clamp(1.75rem, 3.4vw, 3rem);
}

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

.sud-cr__value {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(.85rem, 1.3vw, 1.15rem);
	align-items: start;
}

.sud-cr .sud-cr__valuename {
	font-family: var(--sud-font-display, Roboto, sans-serif);
	font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--cr-ink);
	margin: 0 0 .35rem;
}

.sud-cr__value p { font-size: .9375rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   APPLICATION

   A centred panel rather than the two-column marketing block the reference
   image uses. The reference was supplied as layout inspiration, and lifting its
   sales copy would have meant writing new editorial for this page, which is not
   mine to write — so the section carries a plain functional heading and the
   form, and nothing that pretends to be approved copy.
   -------------------------------------------------------------------------- */

.sud-cr__apply {
	position: relative;
	isolation: isolate;
	max-inline-size: 760px;
	margin-inline: auto;
	background-color: var(--sud-surface-2, #F4F8F6);
	border-radius: var(--sud-radius-xl, 32px);
	padding: clamp(1.75rem, 3.6vw, 3.25rem);
}

/*
 * The tint sits on a pseudo-element, not on .sud-cr__apply itself. Elementor's
 * lazy-load rule blanks background-image on descendants of the fourth and later
 * top-level containers, and this section is the fifth; a gradient declared
 * directly here would simply vanish on the front end.
 */
.sud-cr__apply::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image: radial-gradient(90% 120% at 0% 0%, rgba(0, 99, 68, .06), transparent 62%);
}

.sud-cr__apply .sud-cr__eyebrow,
.sud-cr__apply .sud-cr__h2 { justify-content: center; text-align: center; }

.sud-cr__apply .sud-cr__lede {
	text-align: center;
	max-inline-size: 52ch;
	margin-inline: auto;
	margin-block-start: .75rem;
}

.sud-cr__apply .sud-cr__rule { margin-inline: auto; }

.sud-cr__form { margin-block-start: clamp(1.5rem, 2.6vw, 2.25rem); }

/* --------------------------------------------------------------------------
   THE FORM

   Elementor Pro renders it, so submission, validation and mail all work without
   a second plugin — but its default field styling belongs to Elementor, not to
   this site. These rules restyle it in place.

   The selectors are long on purpose. Elementor generates per-post CSS at
   .elementor-93 .elementor-element.elementor-element-crapplyf1 .elementor-field-group
   .elementor-field — six weighted parts — and that file loads after the theme's.
   Anything lighter loses on specificity, or ties and loses on source order, which
   is exactly how the submit button first rendered white text on a white button.
   Each selector below is therefore built to seven weighted parts.
   -------------------------------------------------------------------------- */

/* Fields. Seven classes, one more than Elementor's generated rule. */
.sud-cr .sud-cr__form.elementor-widget-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual {
	inline-size: 100%;
	background-color: var(--sud-surface, #fff);
	border: 1px solid var(--cr-line);
	border-radius: var(--sud-radius, 16px);
	padding: .95rem 1.1rem;
	font-family: var(--sud-font-body, Roboto, sans-serif);
	font-size: var(--sud-text-base, 1rem);
	color: var(--cr-ink);
	line-height: 1.4;
	block-size: auto;
	box-shadow: none;
	transition:
		border-color .25s var(--cr-ease),
		box-shadow .25s var(--cr-ease);
}

.sud-cr .sud-cr__form.elementor-widget-form .elementor-form .elementor-field-group textarea.elementor-field {
	min-block-size: 8rem;
	resize: vertical;
}

.sud-cr .sud-cr__form .elementor-field-textual::placeholder {
	color: #8A9A93;
	opacity: 1;
}

/* The brand green focus ring the rest of the site uses. */
.sud-cr .sud-cr__form.elementor-widget-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual:focus {
	outline: none;
	border-color: var(--cr-green);
	box-shadow: 0 0 0 3px rgba(0, 99, 68, .14);
}

/* Submit. Same weight problem, same treatment. */
.sud-cr .sud-cr__form.elementor-widget-form .elementor-form .elementor-field-group.e-form__buttons .elementor-button {
	inline-size: 100%;
	background-color: var(--cr-green);
	color: #fff;
	border: 0;
	border-radius: var(--sud-radius, 16px);
	padding: 1rem 1.4rem;
	font-family: var(--sud-font-display, Roboto, sans-serif);
	font-size: var(--sud-text-base, 1rem);
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background-color .25s var(--cr-ease), box-shadow .25s var(--cr-ease);
}

.sud-cr .sud-cr__form.elementor-widget-form .elementor-form .elementor-field-group.e-form__buttons .elementor-button span {
	color: #fff;
}

@media (hover: hover) {
	.sud-cr .sud-cr__form.elementor-widget-form .elementor-form .elementor-field-group.e-form__buttons .elementor-button:hover {
		background-color: var(--sud-green-900, #00301F);
		box-shadow: 0 10px 24px rgba(0, 99, 68, .26);
	}
}

/* Row rhythm. Elementor spaces field groups with padding, so it is set here. */
.sud-cr .sud-cr__form.elementor-widget-form .elementor-form .elementor-field-group {
	padding-inline-end: clamp(.55rem, 1vw, .8rem);
	margin-block-end: clamp(.9rem, 1.5vw, 1.15rem);
}

.sud-cr .sud-cr__form.elementor-widget-form .elementor-form .elementor-field-group.e-form__buttons {
	padding-inline-end: 0;
	margin-block-end: 0;
	margin-block-start: .35rem;
}

/* Validation and the post-submit messages, in the site's own colours. */
.sud-cr .sud-cr__form .elementor-message {
	font-size: var(--sud-text-base, 1rem);
	line-height: 1.6;
	margin-block-start: .9rem;
}

.sud-cr .sud-cr__form .elementor-message.elementor-message-success { color: var(--cr-green); }
.sud-cr .sud-cr__form .elementor-message.elementor-message-danger { color: #B3261E; }

.sud-cr .sud-cr__form.elementor-widget-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual.elementor-error {
	border-color: #B3261E;
}

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

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

@media (max-width: 860px) {
	/*
	 * Everything stacks. The image keeps a generous aspect ratio rather than
	 * shrinking to a strip — the brief asks for photography that stays
	 * impactful on a phone, and a 4:3 at full width does that.
	 */
	.sud-cr__split { grid-template-columns: minmax(0, 1fr); }

	.sud-cr__split--reverse .sud-cr__copy,
	.sud-cr__split--reverse .sud-cr__media { order: 0; }

	.sud-cr__split .sud-cr__media { aspect-ratio: 16 / 11; }
}

@media (max-width: 640px) {
	.sud-cr__grid,
	.sud-cr__culturegrid { grid-template-columns: minmax(0, 1fr); }

	.sud-cr__media {
		border-radius: var(--sud-radius-lg, 24px);
		border-end-start-radius: 44px;
	}
}

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