/**
 * RSI Toolkit — About Split.
 *
 * The About / من نحن section as a two-column split: one column of copy on the
 * reading edge of the page, the map running off the opposite edge, and a row of
 * city landmarks closing the column.
 *
 * Numbers follow the section it replaces on staging.rsinst.com:
 *
 *   accent bar     60 × 9, #ca002c — the same divider the neighbouring
 *                  sections on this page use (NOT the 48 × 9 #bf0031 the
 *                  Figma stylesheet gives the inner-page headers)
 *   heading        H2 — 34px / 58px, from type.css
 *   copy           Body — 18px / 27px, from type.css
 *   landmark       46px circle, 2px red ring, 10px from its label
 *   content edge   1350px, matched to the site's boxed containers
 *
 * ── Direction ────────────────────────────────────────────────────────────────
 *
 * Logical properties throughout, and the copy is always the FIRST grid column:
 * Arabic puts it on the right and the art bleeds off the left, English the
 * mirror, from one rule set. There is no rtl.css entry for this widget, and
 * adding one would be a regression — see the note in stats.css about what a
 * physical `border-left` did to the Arabic dividers.
 */

.rsi-asplit {
	--rsi-as-content: 1350px;

	/* The page's outer gutter, used when the art is NOT bleeding and as the
	   floor for the bleeding case on narrow screens. */
	--rsi-as-gutter: clamp(20px, 4vw, 54px);

	/* Distance from the copy to the art. Overridden by the Copy Padding
	   control's LEFT box (which writes this custom property, not a padding, so
	   the two edges can mean different things in the two art positions). */
	--rsi-as-pad-inner: clamp(24px, 4vw, 54px);

	--rsi-as-lm: 46px;
	--rsi-as-ring: 3px;
	--rsi-as-ring-color: #ca002c;
}

/* -------------------------------- layout -------------------------------- */
.rsi-asplit__inner {
	display: grid;
	/*
	 * The Copy Column Ratio control overwrites this whole declaration. With the
	 * art moved to the reading edge the two tracks swap places (the art takes
	 * the first one), so the ratio then reads inverted — documented on the
	 * control itself.
	 */
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	align-items: stretch;
}

/*
 * Boxed: the section stays inside the page's content column and the map is a
 * contained image beside the copy rather than a panel running off the edge.
 *
 * The gutter goes to zero here on purpose — the theme's own container already
 * holds the content edge, so any padding of ours would push this section's
 * heading inboard of every other heading on the page.
 */
.rsi-asplit:not(.rsi-asplit--bleed) {
	--rsi-as-gutter: 0px;
}

.rsi-asplit:not(.rsi-asplit--bleed) .rsi-asplit__inner {
	max-width: var(--rsi-as-content);
	margin-inline: auto;
}

/* Height from the image, not from the copy beside it: stretched to the copy's
   height the panel would show bands of backing colour above and below, which
   reads as a grey card rather than as a picture. */
.rsi-asplit:not(.rsi-asplit--bleed) .rsi-asplit__art {
	align-self: center;
	border-radius: 12px;
}

.rsi-asplit__copy {
	--rsi-as-gap: 16px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding-block: clamp(40px, 5vw, 72px);
	padding-inline-start: var(--rsi-as-gutter);
	padding-inline-end: var(--rsi-as-pad-inner);
	text-align: start;
}

/*
 * Bleeding art: the copy holds the 1350px content edge while the art carries on
 * to the browser edge.
 *
 * `vw`, deliberately, and not a percentage: a percentage inside this column
 * resolves against the COLUMN, not the page, and the gutter collapses to
 * roughly nothing. vw counts the scrollbar, which costs a handful of pixels on
 * the gutter and nothing visible in the layout.
 *
 * Needs a full-width container. Inside a boxed one there is no bleed to have,
 * and the max() floor keeps the copy off the edge regardless.
 */
.rsi-asplit--bleed .rsi-asplit__copy {
	padding-inline-start: max(var(--rsi-as-gutter), calc((100vw - var(--rsi-as-content)) / 2));
}

/* Art on the reading edge instead: the copy's two edges trade jobs. */
.rsi-asplit--art-start .rsi-asplit__art {
	order: -1;
}

.rsi-asplit--art-start .rsi-asplit__copy {
	padding-inline-start: var(--rsi-as-pad-inner);
	padding-inline-end: var(--rsi-as-gutter);
}

.rsi-asplit--bleed.rsi-asplit--art-start .rsi-asplit__copy {
	padding-inline-start: var(--rsi-as-pad-inner);
	padding-inline-end: max(var(--rsi-as-gutter), calc((100vw - var(--rsi-as-content)) / 2));
}

/* --------------------------------- copy --------------------------------- */
.rsi-asplit__bar {
	display: block;
	flex: 0 0 auto;
	width: 60px;
	height: 9px;
	background-color: #ca002c;
	border-radius: 1px;
}

.rsi-asplit__heading {
	margin: 20px 0 0;
	max-width: 26ch;
	color: #242424;
	text-wrap: balance;
}

.rsi-asplit__lead,
.rsi-asplit__text {
	/*
	 * Two caps, whichever is tighter. 62ch alone measured 785px here, which is
	 * ~95 Arabic characters a line — too long to track back comfortably — because
	 * `ch` is the width of "0" and Alexandria's digits are wide. The px cap is
	 * what actually bites on a large screen; the ch cap still governs if the type
	 * scale is ever changed.
	 */
	margin: var(--rsi-as-gap) 0 0;
	max-width: min(62ch, 680px);
}

.rsi-asplit__lead {
	color: #000;
}

.rsi-asplit__text {
	color: #5f5f63;
}

/* ------------------------------- landmarks ------------------------------- */
.rsi-asplit__places {
	width: 100%;
	margin: 32px 0 0;
	padding-block-start: 22px;
	padding-inline: 0;
	list-style: none;
	border-block-start: 1px solid #e4e4e7;
	/*
	 * Two fixed columns, not a wrapping flex row: the four country names differ
	 * enough in length that flex-wrap put three on one line and left the fourth
	 * stranded on its own. A 2 x 2 block reads as one object at every width the
	 * copy column takes.
	 */
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px clamp(14px, 2.4vw, 30px);
}

.rsi-asplit__place {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

/*
 * A real border, not `box-shadow: 0 0 0 <ring>`. The shadow spread drew the ring
 * OUTSIDE the 46px box, so at any fractional rendering scale (a zoomed browser,
 * a scaled screenshot, a non-integer DPR) parts of the arc fell below one device
 * pixel and disappeared — the ring showed on half the circumference and not the
 * other half. A border is inside the box, snaps with it, and holds all the way
 * round. box-sizing is border-box (Elementor sets it globally), so the circle
 * keeps its size and the photograph fills what's left inside the ring.
 */
.rsi-asplit__lm {
	flex: 0 0 auto;
	width: var(--rsi-as-lm);
	height: var(--rsi-as-lm);
	border: var(--rsi-as-ring) solid var(--rsi-as-ring-color);
	border-radius: 50%;
	overflow: hidden;
	background-color: #f4f4f6;
}

/* width/height forced so Woodmart's `img { height: auto !important }` can't
   letterbox the photograph inside its circle. */
.rsi-asplit__lm .rsi-asplit__lm-img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
}

.rsi-asplit__place-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/*
 * City and country are the small meta labels type.css deliberately does not
 * govern (it has no token for them), so their sizes live here.
 */
.rsi-asplit__city {
	font-family: 'Alexandria', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: #242424;
}

.rsi-asplit__country {
	margin-block-start: 2px;
	font-family: 'Alexandria', sans-serif;
	font-weight: 300;
	font-size: 12px;
	line-height: 1.4;
	color: #5f5f63;
}

/* ---------------------------------- art --------------------------------- */
/*
 * The art is a full-height panel of the backing colour with the map centred in
 * it at its own aspect ratio — NOT a cropped fill.
 *
 * `object-fit: cover` was the first attempt and it is wrong for this image. The
 * column's height is set by the copy beside it, so between roughly 1025px and
 * 1400px wide the column turns portrait while the map is landscape, and cover
 * then eats 25% off the sides — which is exactly where Rabat and Dubai sit. The
 * four pins span 70% of the map's width, so no object-position saves every
 * width. Showing the map whole costs a band of backing colour above and below
 * (about 25px at 1440) and never loses a pin.
 */
.rsi-asplit__art {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 340px;
	background-color: #ececee;
	overflow: hidden;
}

/* width/height forced so Woodmart's `img { height: auto !important }` can't
   fight the natural-ratio sizing (auto is what we want here, but only as the
   computed result of a 100% width — not as a theme override). */
.rsi-asplit__art .rsi-asplit__map {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-height: 100%;
	object-fit: contain;
}

/* ------------------------------ breakpoints ----------------------------- */
@media (max-width: 1024px) {
	.rsi-asplit {
		--rsi-as-pad-inner: 28px;
	}
}

@media (max-width: 767px) {
	/*
	 * One column, art first: the map is the section's opening image on a phone,
	 * the way the hero photograph opens the inner pages. The art keeps its
	 * Minimum Art Height (340px by default, and a device value can be set on
	 * the control) — an aspect-ratio here would lose to the control's own
	 * desktop declaration, which carries no media query.
	 */
	/*
	 * !important, and it is load-bearing. The Copy Column Ratio control has a
	 * default, so Elementor prints
	 *   .elementor-N .elementor-element.elementor-element-X .rsi-asplit__inner
	 *   { grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr) }
	 * with no media query at all — four classes, which outranks anything this
	 * file can say inside a breakpoint. Without this the two columns stay side
	 * by side on a phone and the copy squeezes into ~245px.
	 * (contact.css does the same for its map height, for the same reason.)
	 */
	.rsi-asplit__inner {
		grid-template-columns: 1fr !important;
	}

	.rsi-asplit__art,
	.rsi-asplit--art-start .rsi-asplit__art {
		order: -1;
	}

	.rsi-asplit__copy,
	.rsi-asplit--bleed .rsi-asplit__copy,
	.rsi-asplit--art-start .rsi-asplit__copy,
	.rsi-asplit--bleed.rsi-asplit--art-start .rsi-asplit__copy {
		padding-block: 40px;
		padding-inline: 24px;
	}

	.rsi-asplit__places {
		margin-block-start: 28px;
		gap: 16px 22px;
	}
}

@media (max-width: 420px) {
	/* Below this the country names wrap inside a half-width cell. */
	.rsi-asplit__places {
		grid-template-columns: 1fr;
	}
}