/* asem/hero-spotlight — Forest "هدوء فاخر حيّ" hero (bespoke redesign).
 * Token-based (--wp--preset--*). Arabic-correct: NO negative letter-spacing,
 * comfortable line-heights. One subtle "living thread", soft real depth.
 * Reduced-motion safe (CSS-only motion). RTL via logical properties. */

.asem-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.6rem, 7vw, 6.8rem);
	padding-inline: clamp(1rem, 5vw, 3.4rem);
	color: var(--wp--preset--color--text);
	background: radial-gradient(55% 50% at 85% 8%, color-mix(in srgb, var(--wp--preset--color--primary) 9%, transparent), transparent 72%);
}
.asem-hero__inner {
	max-width: 1200px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2rem, 5vw, 4.2rem);
	align-items: center;
}

/* ── text column ── */
.asem-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0;
	color: var(--wp--preset--color--primary);
}
.asem-hero__eyebrow-line { width: 34px; height: 1px; background: var(--wp--preset--color--primary); opacity: 0.6; }
.asem-hero__name {
	font-family: var(--wp--preset--font-family--display, system-ui), sans-serif;
	font-weight: 900;
	font-size: clamp(3rem, 9vw, 6rem);
	line-height: 1.18;
	letter-spacing: 0;
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--text);
}
.asem-hero__lede {
	max-width: 42ch;
	margin: 0;
	font-size: clamp(1.05rem, 2.4vw, 1.3rem);
	line-height: 1.9;
	color: var(--wp--preset--color--muted);
}
.asem-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.618rem; }
.asem-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.5rem;
	border-radius: 10px;
	border: 1px solid transparent;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0;
	transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.asem-hero__cta:active { transform: translateY(1px); }
.asem-hero__cta--primary { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); }
.asem-hero__cta--primary:hover { background: var(--wp--preset--color--primary-strong); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent); }
.asem-hero__cta--ghost { background: transparent; color: var(--wp--preset--color--text); border-color: var(--wp--preset--color--border); }
.asem-hero__cta--ghost:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.asem-hero__creds {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0;
	margin: 2.618rem 0 0;
	padding: 1.618rem 0 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--border);
}
.asem-hero__creds li {
	padding-inline-end: 1.4rem;
	margin-inline-end: 1.4rem;
	border-inline-end: 1px solid var(--wp--preset--color--border);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--wp--preset--color--text);
}
.asem-hero__creds li:last-child { border-inline-end: 0; margin-inline-end: 0; padding-inline-end: 0; }

/* ── figure column ── */
.asem-hero__figure { position: relative; justify-self: center; width: 100%; max-width: 420px; }
.asem-hero__portrait {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	background: radial-gradient(120% 90% at 70% 10%, color-mix(in srgb, var(--wp--preset--color--primary) 16%, var(--wp--preset--color--bg-deep)), var(--wp--preset--color--bg-deep));
	box-shadow: 0 40px 80px -52px rgba(24, 32, 27, 0.45);
}
.asem-hero__portrait::after {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
	border-radius: 10px;
	pointer-events: none;
	z-index: 2;
}
.asem-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.asem-hero__mono {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--display, system-ui), sans-serif;
	font-weight: 900;
	font-size: clamp(4rem, 12vw, 7.5rem);
	line-height: 1;
	color: color-mix(in srgb, var(--wp--preset--color--primary) 78%, var(--wp--preset--color--text));
}
.asem-hero__corner {
	position: absolute;
	top: 1rem;
	inset-inline-start: 1rem;
	z-index: 1;
	font-size: 0.66rem;
	color: color-mix(in srgb, var(--wp--preset--color--text) 62%, transparent);
}
.asem-hero__status {
	position: absolute;
	inset-block-end: -14px;
	inset-inline-end: 1.2rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--bg-elevated);
	box-shadow: 0 2px 10px -6px rgba(24, 32, 27, 0.18);
	font-size: 0.8rem;
	font-weight: 600;
}
.asem-hero__status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}
.asem-hero__thread { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: visible; }
.asem-hero__thread path {
	fill: none;
	stroke: var(--wp--preset--color--primary);
	stroke-width: 1.4;
	opacity: 0.35;
	stroke-dasharray: 520;
	stroke-dashoffset: 520;
	animation: asem-hero-thread 1.6s 0.3s cubic-bezier(.16, 1, .3, 1) forwards;
}
.asem-hero__thread circle { fill: var(--wp--preset--color--primary); opacity: 0.5; }
@keyframes asem-hero-thread { to { stroke-dashoffset: 0; } }

@media (max-width: 860px) {
	.asem-hero__inner { grid-template-columns: 1fr; }
	.asem-hero__figure { max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
	.asem-hero__thread path { stroke-dashoffset: 0; animation: none; }
}