/**
 * RSI Toolkit — Page Intro.
 *
 * Baked to the Careers frames in the 2026 Figma: 10649:432 (the photograph) and
 * 10649:434 (the block under it). Numbers from the frame, which is 402 wide:
 *
 *   hero          20px inset all round, 8px radius, 473px tall, black 30% over it
 *   block         80px above, 24px either side
 *   accent bar    48 × 9, #bf0031, 10px above the heading
 *   heading       34px / 65px, bold, +0.25px tracking
 *   paragraphs    20px / 41px, BOLD — the design's heading-4, not body copy
 *   rhythm        30px between every item in the column
 *
 * The Figma has no desktop frame for this page, so the desktop treatment holds the
 * same rhythm and lets the column of copy reach the "Text Width" control's 760px
 * rather than inventing a second layout.
 *
 * Logical properties throughout: the block sits on the reading edge, which is the
 * right in Arabic and the left in English, with no rtl.css entry.
 */

.rsi-pintro {
	--rsi-pi-hero-h: 620px;
	--rsi-pi-scrim: 30;
	--rsi-pi-radius: 8px;
	--rsi-pi-gap: 30px;
}

/* -------------------------------- hero ---------------------------------- */
.rsi-pintro__hero {
	position: relative;
	height: var(--rsi-pi-hero-h);
	margin: 20px;
	overflow: hidden;
	border-radius: var(--rsi-pi-radius);
	background-color: #0a1626;
}

/* Two classes: `.elementor img { height: auto }` is 0,1,1 and would collapse this
   to the photograph's own ratio. */
.rsi-pintro__hero .rsi-pintro__hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.rsi-pintro__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, calc(var(--rsi-pi-scrim) / 100));
	pointer-events: none;
}

/* ------------------------------- content -------------------------------- */
.rsi-pintro__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rsi-pi-gap);
	max-width: 760px;
	/* margin-inline rather than `auto` both sides: the column sits on the reading
	   edge of the page, as the frame draws it, not centred. */
	margin-inline: auto;
	padding: 80px 24px 0;
	text-align: start;
}

.rsi-pintro__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.rsi-pintro__bar {
	display: block;
	width: 48px;
	height: 9px;
	background: #bf0031;
}

/*
 * 34px, and 58px of leading rather than the frame's 65px.
 *
 * The frame sets 65 on a heading it draws as ONE line ("ابنِ شيئاً ذا معنى", 289
 * wide — measured at 285 here, so it does stay on one line). The English heading
 * is longer and wraps to two, and at 65px the two lines read as separate headings
 * with a 130px block — the same problem, with the same fix, already recorded
 * against H2 in type.css: the client's own stylesheet sets a two-line 34px block
 * at 58px, so 58 is their value for a wrapped heading of this size.
 *
 * The Arabic loses 7px of block height by not using 65, which is imperceptible on
 * a single line; the English gains a heading that reads as one.
 */
.rsi-pintro__heading {
	margin: 0;
	font-family: 'Alexandria', sans-serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 58px;
	letter-spacing: .25px;
	color: #000000;
	text-align: start;
}

/*
 * 20px BOLD at 41px leading. This is the design's heading-4, not its body style —
 * the Careers intro is written as two short statements rather than running copy,
 * and setting them at body weight loses that. Deliberately not governed by
 * type.css, which has no token for it.
 */
.rsi-pintro__text {
	margin: 0;
	font-family: 'Alexandria', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 41px;
	color: #000000;
	text-align: start;
}

.rsi-pintro__figure {
	width: 100%;
	margin: 0;
}

.rsi-pintro__figure .rsi-pintro__img {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
	object-position: center;
	border-radius: var(--rsi-pi-radius);
}

/* ------------------------------- mobile --------------------------------- */
@media (max-width: 767px) {
	.rsi-pintro__inner {
		/* The frame's own numbers: 24px either side, 80px above. */
		padding: 80px 24px 0;
	}

	.rsi-pintro__figure .rsi-pintro__img {
		height: 320px;
	}
}