/**
 * Mueen — About hero.
 *
 * Colours come from the theme's --jkd-* tokens so the section follows the
 * dark/light toggle for free. Spacing uses logical properties throughout
 * (margin-inline, padding-inline, text-align: start) so the Arabic build
 * mirrors without a single [dir="rtl"] override — only the arrow glyph,
 * which carries direction rather than text, needs flipping.
 */

.mueen-about {
	align-items: center;
	display: grid;
	gap: clamp(32px, 5vw, 72px);
	grid-template-columns: minmax(0, 1fr);
	inline-size: 100%;
}

.mueen-about--has-media {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.mueen-about--media-start .mueen-about__text {
	order: 2;
}

.mueen-about--media-start .mueen-about__media {
	order: 1;
}

/* ── Text column ─────────────────────────────────────────── */

.mueen-about__text {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2.2vw, 28px);
	min-inline-size: 0;
	text-align: start;
}

/* ── Badge ───────────────────────────────────────────────── */

.mueen-about__badge {
	align-items: center;
	align-self: start;
	background-color: var(--jkd-bg-secondary);
	border: 1px solid var(--jkd-border);
	border-radius: var(--jkd-br-xl, 50px);
	color: var(--jkd-heading);
	display: inline-flex;
	font-size: var(--jkd-font-xs-size);
	font-weight: var(--jkd-m-fw, 500);
	gap: 9px;
	letter-spacing: 0.08em;
	margin: 0;
	padding: 8px 18px;
	text-transform: uppercase;
}

.mueen-about__badge-dot {
	background-color: var(--jkd-accent);
	block-size: 7px;
	border-radius: 50%;
	flex: 0 0 auto;
	inline-size: 7px;
}

/* ── Heading ─────────────────────────────────────────────── */

.mueen-about__heading {
	color: var(--jkd-heading);
	font-size: clamp(2rem, 4.6vw, 4rem);
	font-weight: var(--jkd-b-fw, 600);
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin: 0;
	text-wrap: balance;
}

/* SplitText's `mask: "lines"` adds its own clipping wrapper around each line,
   so this element must NOT clip — it is only the moving target. Giving it
   overflow:hidden would cut the glyphs it is meant to carry. */
.mueen-about__line {
	display: block;
	padding-block-end: 0.08em;
}

/* ── Description ─────────────────────────────────────────── */

.mueen-about__desc {
	color: var(--jkd-text);
	font-size: clamp(1rem, 1.15vw, 1.125rem);
	line-height: 1.75;
	margin: 0;
	max-inline-size: 62ch;
}

/* ── Buttons ─────────────────────────────────────────────── */

.mueen-about__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-block-start: 6px;
}

.mueen-about__btn {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--jkd-br-xl, 50px);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--jkd-font-small-size);
	font-weight: var(--jkd-m-fw, 500);
	gap: 10px;
	line-height: 1;
	padding: 16px 28px;
	text-decoration: none;
	transition: background-color var(--jkd-tr-dr, .255s) var(--jkd-tr-tp),
	            border-color var(--jkd-tr-dr, .255s) var(--jkd-tr-tp),
	            color var(--jkd-tr-dr, .255s) var(--jkd-tr-tp);
}

.mueen-about__btn--primary {
	background-color: var(--jkd-accent);
	color: var(--jkd-on-accent, #0f0f0f);
}

.mueen-about__btn--primary:hover {
	background-color: var(--jkd-heading);
	color: var(--jkd-bg);
}

.mueen-about__btn--secondary {
	background-color: transparent;
	border-color: var(--jkd-border);
	color: var(--jkd-heading);
}

.mueen-about__btn--secondary:hover {
	background-color: var(--jkd-bg-secondary);
	border-color: var(--jkd-heading);
}

.mueen-about__btn-arrow {
	display: inline-flex;
	transition: transform var(--jkd-tr-dr, .255s) var(--jkd-tr-tp);
}

.mueen-about__btn:hover .mueen-about__btn-arrow {
	transform: translateX(4px);
}

/* The chevron points along the reading direction, so it — and its hover
   nudge — must mirror. Nothing else in this file needs a direction override. */
[dir="rtl"] .mueen-about__btn-arrow {
	transform: scaleX(-1);
}

[dir="rtl"] .mueen-about__btn:hover .mueen-about__btn-arrow {
	transform: scaleX(-1) translateX(4px);
}

/* The theme force-fills every SVG (`svg:not(.custom-svg,…){fill:currentColor}`),
   which would turn this outline chevron into a solid block. `.custom-svg` is on
   the element, but state it explicitly so the stroke survives any future rule. */
.mueen-about__btn-arrow svg {
	fill: none;
	stroke: currentColor;
}

/* ── Social icons ────────────────────────────────────────── */

.mueen-about__social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
}

.mueen-about__social-link {
	align-items: center;
	block-size: 44px;
	border: 1px solid var(--jkd-border);
	border-radius: 999px;
	color: var(--jkd-text);
	display: inline-flex;
	inline-size: 44px;
	justify-content: center;
	text-decoration: none;
	transition: color var(--jkd-tr-dr, .255s) var(--jkd-tr-tp),
	            border-color var(--jkd-tr-dr, .255s) var(--jkd-tr-tp),
	            background-color var(--jkd-tr-dr, .255s) var(--jkd-tr-tp),
	            transform var(--jkd-tr-dr, .255s) var(--jkd-tr-tp);
}

.mueen-about__social-link:hover,
.mueen-about__social-link:focus-visible {
	background-color: var(--jkd-bg-secondary);
	border-color: var(--jkd-heading);
	color: var(--jkd-heading);
	transform: translateY(-2px);
}

/* Brand marks are solid glyphs — currentColor is what we want, and stating it
   keeps the theme's blanket `svg:not(.custom-svg){fill:currentColor}` from
   surprising us either way. */
.mueen-about__social-link svg {
	block-size: 18px;
	fill: currentColor;
	inline-size: 18px;
}

.mueen-about__social-link .iconoir {
	font-size: 18px;
}

/* ── Media ───────────────────────────────────────────────── */

.mueen-about__media {
	border-radius: var(--jkd-br-lg, 15px);
	min-inline-size: 0;
	overflow: hidden;
	position: relative;
}

.mueen-about__media img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {
	.mueen-about--has-media {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Stacked: text always reads first regardless of the desktop side. */
	.mueen-about--media-start .mueen-about__text,
	.mueen-about--media-start .mueen-about__media {
		order: initial;
	}
}

@media (max-width: 576px) {
	.mueen-about__actions {
		gap: 10px;
	}

	.mueen-about__btn {
		flex: 1 1 100%;
		justify-content: center;
		padding: 15px 22px;
	}
}

/* ── Pre-animation state ─────────────────────────────────────
   Only applied when the widget opts into motion AND the visitor has not asked
   for reduced motion, so content is never left invisible if JS fails to run
   or the media query says otherwise. */

@media (prefers-reduced-motion: no-preference) {
	.mueen-about[data-animate="yes"]:not(.is-ready) .mueen-about__badge,
	.mueen-about[data-animate="yes"]:not(.is-ready) .mueen-about__desc,
	.mueen-about[data-animate="yes"]:not(.is-ready) .mueen-about__actions,
	.mueen-about[data-animate="yes"]:not(.is-ready) .mueen-about__social,
	.mueen-about[data-animate="yes"]:not(.is-ready) .mueen-about__media {
		opacity: 0;
	}
}