/**
 * The fatwa page's head: its title, the ask button, and the slider.
 *
 * The slides are stacked in one grid cell rather than laid along a track.
 * The stage then takes the height of the tallest slide on its own — no
 * measuring, no jump when a short slide follows a long one — and the move
 * between them is a fade, so nothing has a direction whose sign has to be
 * flipped for a page that runs right to left.
 *
 * Sizes are fluid rather than stepped: one clamp() reads better across a
 * phone, a tablet and a wide screen than three sets of fixed numbers.
 */
.as-hero {
	--fx-ink: #14231c;
	--fx-ink-2: #3c5147;
	--fx-faint: #6d7f76;
	--fx-green: #2e6e51;
	--fx-green-deep: #1a4232;
	--fx-gold: #7d5f27;
	--fx-gold-dark: #dcbc7e;
	--fx-cream: #f2ede1;
	--fx-paper: #fbf9f4;
	--fx-line: #ded6c4;

	font-family: Tajawal, sans-serif;
	direction: rtl;
	text-align: right;

	/*
	 * The hero stands where an Elementor section stood, and an Elementor
	 * section is a centred 1160 with a gutter that steps 16 / 24 / 32 across
	 * the builder's own breakpoints. Matched exactly rather than approximated
	 * with one fluid value: the hero sits directly above the search box, and
	 * two edges a few pixels apart read as a mistake where a wide gap would
	 * have read as a choice.
	 */
	box-sizing: border-box;
	width: 100%;
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: 16px;
}

@media ( min-width: 768px ) {
	.as-hero {
		padding-inline: 24px;
	}
}

@media ( min-width: 1025px ) {
	.as-hero {
		padding-inline: 32px;
	}
}

/* A default size, so no glyph can ever render at the SVG's own dimensions. */
.as-hero .as-g {
	flex: none;
	width: 16px;
	height: 16px;
}

/* -------------------------------------------------------------- the head */

.as-hero-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	flex-wrap: wrap;
}

.as-hero-title {
	margin: 0;
	font: 700 clamp( 24px, 4.6vw, 34px ) / 1.25 Tajawal, sans-serif;
	color: var(--fx-ink);
	letter-spacing: -0.2px;
}

/* ------------------------------------------------------------ ask button */

.as-ask {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: none;
	font: 700 15px/1 Tajawal, sans-serif;
	color: #fff;
	background: linear-gradient( 135deg, #35815f, var(--fx-green-deep) );
	border: 0;
	border-radius: 999px;
	padding: 14px 26px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba( 26, 66, 50, 0.26 );
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.as-ask:hover,
.as-ask:focus-visible {
	color: #fff;
	text-decoration: none;
	transform: translateY( -2px );
	box-shadow: 0 12px 26px rgba( 26, 66, 50, 0.34 );
	filter: saturate( 1.1 );
}

.as-ask:focus-visible {
	outline: 2px solid var(--fx-gold-dark);
	outline-offset: 3px;
}

.as-ask .as-g {
	width: 17px;
	height: 17px;
	transition: transform 0.18s ease;
}

.as-ask:hover .as-g {
	transform: rotate( -12deg );
}

/* ---------------------------------------------------------------- slider */

.as-sl {
	margin-top: clamp( 20px, 3vw, 30px );
}

.as-sl-eyebrow {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 2px 12px;
	font: 700 11px/1 Tajawal, sans-serif;
	letter-spacing: 1.4px;
	color: var(--fx-gold);
}

.as-sl-eyebrow .as-g {
	width: 14px;
	height: 14px;
}

.as-sl-stage {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background:
		/* A quiet lattice, the same motif the cards carry, at a whisper. */
		repeating-linear-gradient( 45deg, rgba( 255, 255, 255, 0.045 ) 0 1px, transparent 1px 14px ),
		repeating-linear-gradient( -45deg, rgba( 255, 255, 255, 0.045 ) 0 1px, transparent 1px 14px ),
		linear-gradient( 135deg, #2c6b50 0%, var(--fx-green-deep) 62%, #143528 100% );
	box-shadow: 0 10px 30px rgba( 20, 35, 28, 0.18 );
}

.as-sl-track {
	display: grid;
}

.as-sl-slide {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-height: clamp( 190px, 26vw, 250px );
	padding: clamp( 22px, 3.6vw, 40px );
	color: #fff;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 10px );
	transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}

.as-sl-slide.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.as-sl-slide:hover,
.as-sl-slide:focus-visible {
	color: #fff;
	text-decoration: none;
}

.as-sl-slide:focus-visible {
	outline: 2px solid var(--fx-gold-dark);
	outline-offset: -6px;
	border-radius: 12px;
}

.as-sl-kicker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.as-sl-no {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font: 700 11px/1 Tajawal, sans-serif;
	color: var(--fx-green-deep);
	background: var(--fx-gold-dark);
	border-radius: 999px;
	padding: 5px 10px 5px 8px;
}

.as-sl-no .as-g {
	width: 11px;
	height: 11px;
}

.as-sl-bab {
	font: 700 10.5px/1 Tajawal, sans-serif;
	letter-spacing: 1px;
	color: var(--fx-gold-dark);
	border: 1px solid rgba( 220, 188, 126, 0.45 );
	border-radius: 999px;
	padding: 5px 11px;
}

/*
 * Both are cut to a fixed number of lines. Stacking the slides in one cell
 * means the stage is as tall as the tallest of them, so one long title would
 * otherwise leave every other slide sitting in a pit of empty green — worst
 * on a phone, where a long title runs to four lines.
 */
.as-sl-title {
	margin: 0;
	font: 700 clamp( 19px, 3vw, 27px ) / 1.4 Tajawal, sans-serif;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.as-sl-ask {
	margin: 0;
	max-width: 62ch;
	font: 400 clamp( 14px, 1.6vw, 16px ) / 1.85 Tajawal, sans-serif;
	color: rgba( 255, 255, 255, 0.8 );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media ( min-width: 768px ) {
	.as-sl-ask {
		-webkit-line-clamp: 3;
	}
}

.as-sl-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 6px;
	font: 700 13.5px/1 Tajawal, sans-serif;
	color: var(--fx-gold-dark);
}

.as-sl-cta .as-g {
	width: 15px;
	height: 15px;
	transition: transform 0.18s ease;
}

.as-sl-slide:hover .as-sl-cta .as-g,
.as-sl-slide:focus-visible .as-sl-cta .as-g {
	transform: translateX( -4px );
}

/* -------------------------------------------------------------- controls */

.as-sl-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 14px;
}

.as-sl-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--fx-green-deep);
	background: #fff;
	border: 1px solid var(--fx-line);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.as-sl-arrow .as-g {
	width: 17px;
	height: 17px;
}

.as-sl-arrow:hover {
	background: var(--fx-green);
	border-color: var(--fx-green);
	color: #fff;
}

.as-sl-dots {
	display: flex;
	align-items: center;
	gap: 7px;
}

.as-sl-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--fx-line);
	cursor: pointer;
	transition: width 0.25s ease, background 0.25s ease;
}

.as-sl-dot[aria-selected="true"] {
	width: 24px;
	background: var(--fx-green);
}

/* ----------------------------------------------------------------- small */

@media ( max-width: 560px ) {
	.as-hero-top {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	/* Full width, so the button sits under the thumb rather than beside it. */
	.as-ask {
		justify-content: center;
		width: 100%;
		padding: 15px 20px;
	}

	.as-sl-slide {
		min-height: 0;
		gap: 10px;
	}

	/*
	 * The call to action keeps its margin-top:auto here too. Overriding it
	 * let the slack fall below the link instead of above it, which on a
	 * one-line slide left a hand's width of empty green under the button.
	 */
}

@media ( prefers-reduced-motion: reduce ) {
	.as-hero *,
	.as-hero *::before,
	.as-hero *::after {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.as-hero {
		display: none;
	}
}