/* ==========================================================================
   SUDAIR PHARMA — CAREERS: "Empowering People. Inspiring Innovation."

   A restyle of an existing section, not a replacement. The container, the image
   widget and the icon-box widget are all the ones that were already there; this
   file only decides where they sit and how they look.

   Scoped under .sud-emp, a class that exists on one section of one page.

   THE OVERLAP
   Photograph and card share a single grid cell — one aligned to the start, the
   other to the end — and their widths add up to more than 100%, so they overlap
   in the middle. Doing it that way rather than with absolute positioning keeps
   both in flow, so the section's height still comes from whichever is taller and
   nothing has to be measured or hard-coded.
   ========================================================================== */

.sud-emp {
	--em-green: var(--sud-green-700, #006344);
	--em-ink: #10312A;
	--em-body: #5A6B63;
	--em-ease: cubic-bezier(.22, 1, .36, 1);

	--em-media: 62%;          /* photograph width */
	--em-card: 52%;           /* card width — the two overlap by the remainder */

	position: relative;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: var(--sud-maxw, 1240px);
	margin-inline: auto;
	padding-inline: 24px;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

.sud-emp *,
.sud-emp *::before,
.sud-emp *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   PHOTOGRAPH
   -------------------------------------------------------------------------- */

.sud-emp .sud-emp__media {
	grid-area: 1 / 1;
	justify-self: start;
	inline-size: var(--em-media);
	z-index: 1;
}

.sud-emp .sud-emp__media .elementor-widget-image,
.sud-emp .sud-emp__media figure { margin: 0; }

/*
 * A fixed ratio on the frame with the image cropped to fill it. Without this the
 * section's height is set by whatever proportion the photograph happens to
 * have, and the card either floats in space or overshoots it.
 */
/*
 * THE PHOTOGRAPH IS A CONTAINER BACKGROUND, NOT AN <img>.
 *
 * Worth stating plainly, because it is not what the markup suggests. The
 * picture lives as a background-image on the inner container, while the only
 * real <img> in this column is a 100x100 badge sitting on top of it. Styling
 * the <img> as though it were the photograph — which is the obvious first
 * move — resized the badge and left the photograph untouched.
 *
 * So the frame is the inner container, and the badge is left exactly as it is.
 */
.sud-emp .sud-emp__media > .e-con {
	inline-size: 100%;
	border-radius: 14px;
	background-size: cover;
	background-position: center center;
}

/* The spacers belong to the old arrangement and have nothing to space here. */
.sud-emp .sud-emp__media .elementor-widget-spacer { display: none; }

/* --------------------------------------------------------------------------
   CARD
   -------------------------------------------------------------------------- */

.sud-emp .sud-emp__card {
	grid-area: 1 / 1;
	justify-self: end;
	inline-size: var(--em-card);
	z-index: 2;

	background: #fff;
	border-radius: 26px;
	padding: clamp(1.75rem, 3.2vw, 3rem);

	box-shadow:
		0 1px 2px rgba(11, 31, 23, .04),
		0 22px 54px rgba(11, 31, 23, .11);
}

/*
 * The faint dot field in the lower corner of the reference. A pseudo-element, so
 * it costs no markup and cannot be clipped out of the card's rounded corner.
 */
.sud-emp .sud-emp__card::after {
	content: '';
	position: absolute;
	inset-inline-end: 6%;
	inset-block-end: 8%;
	inline-size: 88px;
	block-size: 56px;
	z-index: -1;
	opacity: .5;
	pointer-events: none;
	background-image: radial-gradient(circle, rgba(0, 99, 68, .28) 1px, transparent 1px);
	background-size: 11px 11px;
}

.sud-emp .sud-emp__card { position: relative; }

/* --------------------------------------------------------------------------
   CARD TYPE

   The heading and body are the icon-box widget's own elements, restyled where
   they stand.

   Five classes on each selector, which looks excessive until you see what it is
   up against: Elementor writes per-element rules at
   `.elementor-93 .elementor-element.elementor-element-288e8fe .elementor-icon-box-title`
   — four weighted parts — and that file loads after the theme's. At three parts
   the heading kept Elementor's 21px instead of the size set here.
   -------------------------------------------------------------------------- */

.sud-emp .sud-emp__card .elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title {
	margin: 0;
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(1.375rem, 2.3vw, 2rem);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -.02em;
	color: var(--em-ink);

	/*
	 * The design system uppercases headings site wide; the reference sets this
	 * one in sentence case. Switched off here only.
	 */
	text-transform: none;

	/*
	 * Sized so the sentence breaks after "People." on its own, which is how the
	 * reference sets it. "Inspiring Innovation." is 21 characters, so the measure
	 * has to clear that but stay under the 28 it would take to also pull
	 * "Inspiring" up onto the first line. A <br> would mean editing the copy, and
	 * the copy is not mine to touch.
	 */
	max-inline-size: 22ch;
}

.sud-emp .sud-emp__card .elementor-icon-box-title a { color: inherit; }

/* The thin green rule under the heading. */
.sud-emp .sud-emp__card .elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title::after {
	content: '';
	display: block;
	inline-size: 54px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--em-green);
	margin-block-start: clamp(1rem, 1.8vw, 1.5rem);
}

.sud-emp .sud-emp__card .elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-description {
	margin: clamp(1.1rem, 2vw, 1.6rem) 0 0;
	font-size: clamp(.875rem, 1vw, .9375rem);
	line-height: 1.95;
	color: var(--em-body);
}

/* The icon-box ships a slot for an icon; there is none here. */
.sud-emp .sud-emp__card .elementor-icon-box-icon { display: none; }

.sud-emp .sud-emp__card .elementor-icon-box-wrapper,
.sud-emp .sud-emp__card .elementor-icon-box-content { text-align: start; }

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

   The overlap is a wide-screen device. Once there is not enough width for the
   card to sit over the photograph without covering it, the two stack — the card
   keeps its lift by rising slightly over the image rather than overlapping it
   sideways.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.sud-emp { --em-media: 66%; --em-card: 56%; }
	.sud-emp .sud-emp__card { padding: clamp(1.5rem, 3vw, 2.25rem); }
}

@media (max-width: 860px) {
	.sud-emp {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.sud-emp .sud-emp__media,
	.sud-emp .sud-emp__card {
		grid-area: auto;
		justify-self: stretch;
		inline-size: 100%;
	}


	/* A modest rise, so the card still reads as sitting on the photograph. */
	.sud-emp .sud-emp__card {
		margin-block-start: -2.5rem;
		margin-inline: auto;
		inline-size: calc(100% - 2rem);
		border-radius: 20px;
	}

	.sud-emp .sud-emp__card .elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title { max-inline-size: none; }
}

@media (max-width: 560px) {
	.sud-emp { padding-inline: 24px; }
	.sud-emp .sud-emp__card {
		inline-size: calc(100% - 1rem);
		margin-block-start: -1.75rem;
		padding: 1.5rem 1.35rem;
	}
	.sud-emp .sud-emp__card::after { display: none; }
	.sud-emp .sud-emp__card .elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-description { font-size: .9375rem; line-height: 1.8; }
}