/*
 * smh/section-partner (root .smh-partner, id about). Owner: WP2. Design A: a lit petrol-deep band with grain and the
 * ghost S drawn once; the text (framed H2 «من نحن», the about paragraph, the partner's 15 years, the stat, links)
 * beside the partner's business card on a stage: the card back (petrol, network, white lockup, smh-cpa.com), a contact
 * shadow, and the card front (white, S-curves, name, role, title, phone + e-mail, stacked logo) that tilts with the
 * cursor (the site engine's stage: data-stage, .bcard--back / --front, .bshadow, .bcard__sheen, .ghost in
 * assets/js/living.js; a slow drift on touch; still under reduced motion). The front is smh/partner-card
 * (WP7's block, class smh-partner__card); inc/wp2.php builds the stage around it. docs/ARCHITECTURE.md 5.3.4.
 * The stage is a physical composition (back card left, front card right) in both languages, like the printed cards.
 */

.smh-partner.smh-living {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(120px, 12vw, 190px) 0 clamp(120px, 12vw, 180px);
	color: var(--smh-white);
	background: var(--smh-petrol-deep);
}
.smh-partner .smh-partner__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(52% 64% at 27% 52%, rgb(40 128 152 / .5) 0%, rgb(30 108 130 / .18) 45%, rgb(25 100 120 / 0) 72%),
		linear-gradient(180deg, var(--smh-petrol-deep) 0%, rgb(12 53 66) 100%);
}
.smh-partner .smh-partner__grain { z-index: -1; opacity: .45; }
.smh-partner .smh-partner__ghost {
	position: absolute;
	z-index: -1;
	right: -15%;
	top: -4%;
	height: 108%;
	width: auto;
	aspect-ratio: 1;
	pointer-events: none;
	will-change: transform;
	opacity: .9;
}
html:not([dir="rtl"]) .smh-partner .smh-partner__ghost { right: auto; left: -15%; }
.smh-partner .smh-partner__ghost path {
	fill: url(#smh-ghost-fill);
	stroke: url(#smh-ghost-stroke);
	stroke-width: 1.1;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1 1;
	stroke-dashoffset: 0;
}
.js .smh-partner .smh-partner__ghost:not(.in) path { stroke-dashoffset: 1; fill-opacity: 0; }
.js .smh-partner .smh-partner__ghost.in path { transition: stroke-dashoffset 3.2s var(--smh-a-io), fill-opacity 2s var(--smh-a-std) 1.6s; }

.smh-partner .smh-partner__grid {
	display: grid;
	grid-template-columns: minmax(0, 5.1fr) minmax(0, 6.9fr);
	gap: clamp(40px, 6vw, 104px);
	align-items: center;
}
.smh-partner .smh-partner__title { color: var(--smh-white); }
.smh-partner .smh-partner__lead { margin-top: 34px; font-size: clamp(17px, 1.3vw, 19px); line-height: 2; color: var(--smh-mist); }
.smh-partner .smh-partner__experience { margin-top: 18px; font-size: clamp(16.5px, 1.22vw, 18px); line-height: 2; color: var(--smh-a-on-p2); }
html[lang|="en"] .smh-partner .smh-partner__lead, html[lang|="en"] .smh-partner .smh-partner__experience { line-height: 1.7; }
.smh-partner .smh-partner__stat {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 38px;
	padding-top: 30px;
	border-top: 1px solid rgb(255 255 255 / .12);
}
.smh-partner .smh-partner__stat-num {
	flex: none;
	white-space: nowrap;
	font-size: clamp(72px, 7vw, 108px);
	font-weight: 700;
	line-height: .9;
	padding-top: .08em;
	background: linear-gradient(180deg, var(--smh-white) 20%, rgb(190 214 222 / .8));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.smh-partner .smh-partner__stat-num .dg { -webkit-background-clip: text; background-clip: text; background-image: inherit; }
.smh-partner .smh-partner__stat-txt { display: grid; gap: 2px; }
.smh-partner .smh-partner__stat-label { font-size: clamp(19px, 1.5vw, 22px); font-weight: 700; line-height: 1.5; }
.smh-partner .smh-partner__stat-note { font-size: 15px; line-height: 1.6; color: var(--smh-a-on-p2); }
.smh-partner .smh-partner__links { display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 36px; }
.smh-partner .smh-partner__links > * { margin: 0; }

/* ---------- the stage ---------- */
.smh-partner .smh-partner__stage { position: relative; perspective: 1600px; aspect-ratio: 1.18; inline-size: 100%; }
.smh-partner .smh-partner__light { position: absolute; inset: -20% -10%; background: radial-gradient(closest-side, rgb(140 205 222 / .22), transparent); pointer-events: none; }
.smh-partner .smh-partner__back,
.smh-partner .smh-partner__stage .smh-partner__card {
	position: absolute;
	inline-size: 80%;
	width: 80%;
	aspect-ratio: 1.8;
	border-radius: 5px;
	transform-style: preserve-3d;
	will-change: transform;
}
.smh-partner .smh-partner__back {
	left: 0;
	top: 1%;
	overflow: hidden;
	background: url(../../svg/network-card.svg) center / cover no-repeat, var(--smh-grad-cover);
	box-shadow: 0 2px 2px rgb(0 0 0 / .12), 0 30px 60px -24px rgb(0 0 0 / .65);
	transform: rotate(-7deg);
}
.smh-partner .smh-partner__back::before {
	/* the printed back's texture strength (identity.md 10.5: network on petrol .2035) over the cover gradient */
	content: "";
	position: absolute;
	inset: 0;
	background: var(--smh-grad-cover);
	opacity: calc(1 - var(--wp--custom--motif--network-on-petrol, .2035));
}
.smh-partner .smh-partner__backlogo { position: absolute; left: 50%; top: 50%; inline-size: 52%; block-size: auto; transform: translate(-50%, -58%); }
.smh-partner .smh-partner__url {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 9%;
	text-align: center;
	font-size: clamp(10px, .95vw, 13px);
	letter-spacing: .28em;
	color: rgb(255 255 255 / .75);
}
.smh-partner .smh-partner__shadow {
	position: absolute;
	right: -4%;
	bottom: -9%;
	inline-size: 88%;
	aspect-ratio: 1.8;
	background: radial-gradient(closest-side, rgb(2 18 24 / .62), rgb(2 18 24 / .25) 55%, rgb(2 18 24 / 0));
	pointer-events: none;
	will-change: transform;
}
.smh-partner .smh-partner__stage .smh-partner__card {
	right: 0;
	left: auto;
	bottom: 3%;
	margin: 0;
	background: var(--smh-white);
	color: var(--smh-ink);
	overflow: hidden;
	box-shadow: 0 1px 1px rgb(0 0 0 / .08);
}
.smh-partner .smh-partner__stage .smh-partner-card__card {
	position: relative;
	box-sizing: border-box;
	block-size: 100%;
	max-inline-size: none;
	margin: 0;
	padding: 0;
	background: transparent;
}
.smh-partner .smh-partner__stage .smh-partner-card__card::before,
.smh-partner .smh-partner__stage .smh-partner-card__card::after { display: none; }
.smh-partner .smh-partner__curves {
	position: absolute;
	inset: 0;
	background: url(../../svg/s-curves.svg) center / cover no-repeat;
	opacity: .2;
	pointer-events: none;
}
.smh-partner .smh-partner__stage .smh-partner-card__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 8.5% calc(7.5% + clamp(78px, 8.4vw, 122px) + 5%) 7.5% 7.5%;
}
[dir="rtl"] .smh-partner .smh-partner__stage .smh-partner-card__body { padding: 8.5% 7.5% 7.5% calc(7.5% + clamp(78px, 8.4vw, 122px) + 5%); }
.smh-partner .smh-partner__stage .smh-partner-card__body > * { margin: 0; }
.smh-partner .smh-partner__stage .smh-partner-card__name { font-size: clamp(22px, 2.25vw, 33px); font-weight: 700; line-height: 1.25; color: var(--smh-petrol-light); }
.smh-partner .smh-partner__stage .smh-partner-card__alt { margin-top: 4px; font-size: clamp(9.5px, .82vw, 12px); font-weight: 500; line-height: 1.6; color: var(--smh-grey-80); }
.smh-partner .smh-partner__stage .smh-partner-card__alt .smh-latin-caps { letter-spacing: .3em; }
.smh-partner .smh-partner__stage .smh-partner-card__role { margin-top: 12px; font-size: clamp(13px, 1.1vw, 15.5px); font-weight: 700; line-height: 1.6; color: var(--smh-petrol-light); }
.smh-partner .smh-partner__stage .smh-partner-card__role [lang] { font-weight: 500; }
.smh-partner .smh-partner__stage .smh-partner-card__title { font-size: clamp(12px, 1vw, 14px); line-height: 1.7; color: var(--smh-grey-80); }
.smh-partner .smh-partner__stage .smh-partner-card__links,
.smh-partner .smh-partner__stage .smh-partner-card__creds,
.smh-partner .smh-partner__stage .smh-partner-card__portrait { display: none; }
.smh-partner .smh-partner__rows { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 7px; }
.smh-partner .smh-partner__rows li { display: flex; align-items: center; gap: 10px; font-size: clamp(11px, .95vw, 13.5px); font-weight: 500; line-height: 1.4; color: var(--smh-ink); }
.smh-partner .smh-partner__t {
	inline-size: clamp(20px, 1.7vw, 24px);
	block-size: clamp(20px, 1.7vw, 24px);
	border-radius: 3px;
	background: var(--smh-petrol);
	color: var(--smh-white);
	display: grid;
	place-items: center;
	flex: none;
}
.smh-partner .smh-partner__t svg { inline-size: 62%; block-size: 62%; }
.smh-partner .smh-partner__mark {
	position: absolute;
	inset-inline-end: 7.5%;
	top: 50%;
	inline-size: clamp(78px, 8.4vw, 122px);
	transform: translateY(-50%);
}
.smh-partner .smh-partner__logo { display: block; inline-size: 100%; block-size: auto; }
.smh-partner .smh-partner__sheen {
	position: absolute;
	inset: -50%;
	background: linear-gradient(115deg, transparent 42%, rgb(255 255 255 / .55) 50%, transparent 58%);
	mix-blend-mode: soft-light;
	pointer-events: none;
	will-change: transform;
}
.smh-partner .smh-partner__edge { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(18 48 59 / .06), inset 0 1px 0 rgb(255 255 255 / .9); pointer-events: none; }

@media (max-width: 1080px) {
	.smh-partner .smh-partner__grid { grid-template-columns: 1fr; }
	.smh-partner .smh-partner__stage { max-inline-size: 640px; margin-inline: auto; }
}
@media (max-width: 760px) {
	.smh-partner .smh-partner__stage { aspect-ratio: 1.08; }
	.smh-partner .smh-partner__back, .smh-partner .smh-partner__stage .smh-partner__card { inline-size: 90%; width: 90%; }
	.smh-partner .smh-partner__shadow { inline-size: 96%; }
	.smh-partner .smh-partner__stage .smh-partner-card__name { font-size: clamp(18px, 5.6vw, 24px); }
	.smh-partner .smh-partner__stage .smh-partner-card__role { margin-top: 6px; }
	.smh-partner .smh-partner__mark { inline-size: clamp(56px, 17vw, 78px); }
	.smh-partner .smh-partner__stage .smh-partner-card__body { padding-inline-end: calc(7.5% + clamp(56px, 17vw, 78px) + 4%); }
	[dir="rtl"] .smh-partner .smh-partner__stage .smh-partner-card__body { padding: 7% 6% 6% calc(6% + clamp(56px, 17vw, 78px) + 4%); }
}
.rm .smh-partner .smh-partner__ghost path { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; }
@media print { .smh-partner.smh-living { color: inherit; background: none; } .smh-partner .smh-partner__ghost, .smh-partner .smh-partner__bg { display: none; } }