/**
 * RSI Toolkit — Milestone Stories ("أبرز الانجازت", September 2026).
 *
 * Baked to Figma 11068:1270. Numbers from the 402-wide mobile frame:
 *
 *   text block     40px above and below, 20px either side (11090:737)
 *   accent bar     48 × 9, #bf0031, 10px above the heading
 *   heading        34px bold — governed by type.css (H2)
 *   paragraph      20px / 29px regular, +0.15px tracking, 30px under the heading
 *   media          20px either side, 20px between every row (11091:797)
 *   lead / close   full width × 260
 *   slider         220 tall; slides alternate a pair (two equal halves, 20px gap)
 *                  and a single full-width photograph (11091:914 draws 362, then
 *                  171 + 171), ~6 slides (client, 2026-09-24)
 *
 * Desktop has no frame. Per the brief it is two columns: the text pinned on the
 * reading edge, the photographs scrolling on the other; the slider still slides.
 *
 * Logical properties only — no left/right, no [dir=rtl] rule — so the Arabic
 * layout mirrors to English on its own. Keep it that way.
 */

.rsi-mst {
	--rsi-mst-full-h: 260px;
	--rsi-mst-pair-h: 220px;
	--rsi-mst-gap: 20px;
	--rsi-mst-sticky: 140px;
	--rsi-mst-bar: #bf0031;
	--rsi-mst-text: #000000;
}

/* -------------------------------- text ---------------------------------- */
.rsi-mst__copy {
	padding: 40px 0;
	text-align: start;
}

.rsi-mst__copy-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.rsi-mst__bar {
	display: block;
	width: 48px;
	height: 9px;
	background: var(--rsi-mst-bar);
	margin-block-end: 10px;
}

/* Size, weight and leading come from type.css (H2), which loads after this. */
.rsi-mst__title {
	margin: 0;
	color: var(--rsi-mst-text);
	letter-spacing: .25px;
	text-align: start;
}

/* 20/29 is the design's heading-4 in regular weight — no type.css token, so it
   lives here, as .rsi-pintro__text does. */
.rsi-mst__text {
	margin: 30px 0 0;
	font-family: 'Alexandria', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 29px;
	letter-spacing: .15px;
	color: var(--rsi-mst-text);
	text-align: start;
}

/* -------------------------------- media --------------------------------- */
.rsi-mst__media {
	display: flex;
	flex-direction: column;
	gap: var(--rsi-mst-gap);
}

.rsi-mst__fig {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: #eef1f3;
}

.rsi-mst__fig--full {
	height: var(--rsi-mst-full-h);
}

/* Class-doubled + !important: Woodmart ships `img{height:auto!important}` and
   Elementor `.elementor img{height:auto}`; either collapses the fill. */
.rsi-mst__fig .rsi-mst__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* ------------------------------- slider --------------------------------- */
/* One slide per view, swiped (or auto-advanced) sideways, snapping. Same on
   desktop, inside the photo column. */
.rsi-mst__track {
	display: flex;
	gap: var(--rsi-mst-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	outline: none;
}

.rsi-mst__track::-webkit-scrollbar {
	display: none;
}

.rsi-mst__slide {
	flex: 0 0 100%;
	display: flex;
	gap: var(--rsi-mst-gap);
	/* No scroll-snap-stop: always — it halts ANY scroll at the next slide, so
	   the arrows' and autoplay's wrap-around jump (last ⇄ first) stopped one
	   slide in. Found in testing 2026-09-24. */
	scroll-snap-align: start;
}

.rsi-mst__slide .rsi-mst__fig {
	flex: 1 1 0;
	min-width: 0;
	height: var(--rsi-mst-pair-h);
}

/* ------------------------------- arrows --------------------------------- */
/* White chevrons on the photographs, vertically centred on each edge, with a
   soft black shadow so they read on light and dark photos alike. No disc behind
   them — client's call, 2026-09-24. */
.rsi-mst__slider {
	position: relative;
}

.rsi-mst__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	color: #ffffff;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: opacity .2s ease;
}

.rsi-mst__arrow--prev {
	inset-inline-start: 4px;
}

.rsi-mst__arrow--next {
	inset-inline-end: 4px;
}

.rsi-mst__arrow:hover {
	opacity: .8;
}

.rsi-mst__arrow:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: -2px;
	border-radius: 4px;
}

.rsi-mst__arrow svg {
	display: block;
	width: 34px;
	height: 34px;
}

/* -------------------------------- mobile -------------------------------- */
/* Woodmart's content wrapper already gives 15px a side; 5 more lands on the
   frame's 20px (362 of 402). Measured on staging 2026-09-24. */
@media (max-width: 767px) {
	.rsi-mst {
		padding-inline: 5px;
	}
}

/* ------------------------------- desktop -------------------------------- */
@media (min-width: 768px) {
	.rsi-mst__story {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: 80px;
		align-items: start;
		padding: 60px 0;
	}

	/* The column stretches the full story height so the inner block has room
	   to stay pinned while the photographs scroll past. */
	.rsi-mst__copy {
		align-self: stretch;
		padding: 0;
	}

	.rsi-mst__copy-inner {
		position: sticky;
		top: var(--rsi-mst-sticky);
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.rsi-mst__story {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 40px;
	}
}