/* ==========================================================================
   Section: About (.ais-about) — dark
   Scoped styles only. Design tokens only (no raw hex). Responsive at
   <=1024 and <=640. Pairs with template-parts/section-about.php.
   ========================================================================== */

.ais-about {
	position: relative;
	overflow: hidden;
}

/* Ambient brand glow bleeding in from the right edge.
   Layered low-intensity radials + blur so it dissolves into the background
   instead of showing a hard oval edge. Stops derive from --ais-glow so the
   glow still tracks the Glow Intensity setting (reduced % replaces opacity). */
.ais-about::before {
	content: "";
	position: absolute;
	top: 2%;
	right: -18%;
	width: 640px;
	height: 640px;
	background:
		radial-gradient(46% 46% at 50% 50%, color-mix(in srgb, var(--ais-glow) 46%, transparent) 0%, transparent 70%),
		radial-gradient(74% 74% at 50% 50%, color-mix(in srgb, var(--ais-glow) 20%, transparent) 0%, transparent 84%);
	filter: blur(26px);
	pointer-events: none;
	z-index: 0;
}

.ais-about > .ais-container {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Lead: portrait visual + founder intro
   -------------------------------------------------------------------------- */
.ais-about__lead {
	display: grid;
	grid-template-columns: minmax(0, clamp(340px, 34vw, 440px)) minmax(0, 1fr);
	gap: var(--ais-stack-gap);
	align-items: center;
	margin-top: 0;
}

.ais-about__portrait {
	display: flex;
	flex-direction: column;
	gap: var(--ais-space-5);
	width: min(440px, 100%);
	justify-self: center;
}

/* Branded frame holding the monogram or the uploaded portrait. */
.ais-about__frame {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--ais-radius-lg);
	border: 1px solid var(--ais-border);
	background:
		radial-gradient(120% 120% at 28% 18%, color-mix(in srgb, var(--ais-orange) 18%, transparent), transparent 55%),
		linear-gradient(160deg, var(--ais-dark-2), var(--ais-dark-3));
	box-shadow: var(--ais-shadow);
	overflow: hidden;
	isolation: isolate;
	transition: box-shadow .5s var(--ais-ease), border-color .5s var(--ais-ease);
}

body.ais-hover-lift .ais-about__portrait:hover .ais-about__frame {
	border-color: color-mix(in srgb, var(--ais-orange) 50%, transparent);
	box-shadow:
		var(--ais-shadow),
		0 0 0 1px color-mix(in srgb, var(--ais-orange) 28%, transparent),
		0 40px 80px -40px var(--ais-glow);
}

/* Faint grid texture, masked to fade toward the edges. */
.ais-about__frame::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--ais-border) 1px, transparent 1px),
		linear-gradient(90deg, var(--ais-border) 1px, transparent 1px);
	background-size: 34px 34px;
	opacity: .35;
	-webkit-mask-image: radial-gradient(120% 120% at 50% 40%, black 38%, transparent 76%);
	mask-image: radial-gradient(120% 120% at 50% 40%, black 38%, transparent 76%);
	pointer-events: none;
	z-index: 0;
}

.ais-about__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	transform: scale(var(--ais-about-photo-scale, 1));
	transform-origin: center bottom;
	transition: transform .25s var(--ais-ease);
	border-radius: inherit;
	z-index: 1;
}

/* Monogram placeholder. */
.ais-about__monogram {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	z-index: 1;
}

.ais-about__monogram-letter {
	font-family: var(--ais-heading-font);
	font-weight: var(--ais-display-weight, 800);
	font-size: clamp(96px, 17vw, 168px);
	line-height: .9;
	letter-spacing: 0;
	background: linear-gradient(155deg, var(--ais-text), var(--ais-orange));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 0 60px var(--ais-glow);
}

.ais-about__monogram-brand {
	font-family: var(--ais-heading-font);
	font-size: var(--ais-fs-label);
	font-weight: 600;
	letter-spacing: var(--ais-tracking-label);
	text-transform: uppercase;
	color: var(--ais-text-muted);
}

/* Floating tech chips around the portrait. */
.ais-about__float {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border-radius: var(--ais-radius-pill);
	background: color-mix(in srgb, var(--ais-dark) 72%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--ais-border);
	box-shadow: 0 14px 32px -18px var(--ais-shadow-color);
	font-family: var(--ais-heading-font);
	font-size: var(--ais-fs-label);
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--ais-text);
	white-space: nowrap;
	z-index: 2;
}

.ais-about__float .ais-icon {
	width: 15px;
	height: 15px;
	color: var(--ais-orange);
}

.ais-about__float--1 { top: 9%; right: 7%; }
.ais-about__float--2 { top: 46%; left: 6%; }
.ais-about__float--3 { bottom: 10%; right: 9%; }

/* Founder identity block below the frame. */
.ais-about__id {
	text-align: center;
}

.ais-about__name {
	margin: 0;
	font-family: var(--ais-heading-font);
	font-weight: var(--ais-heading-weight);
	font-size: var(--ais-fs-h3);
	color: var(--ais-text);
}

.ais-about__role {
	margin: var(--ais-space-1) 0 0;
	font-size: var(--ais-fs-label);
	font-weight: 600;
	letter-spacing: var(--ais-tracking-label);
	text-transform: uppercase;
	color: var(--ais-orange);
}

/* Intro body. */
.ais-about__body {
	position: relative;
	max-width: var(--ais-measure);
	padding-inline-start: clamp(0px, 2vw, 26px);
}

.ais-about__body::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 3px;
	border-radius: var(--ais-radius-pill);
	background: linear-gradient(var(--ais-orange), transparent);
	opacity: .85;
}

.ais-about__kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 var(--ais-space-4);
	font-family: var(--ais-heading-font);
	font-size: var(--ais-fs-label);
	font-weight: 600;
	letter-spacing: var(--ais-tracking-label);
	text-transform: uppercase;
	color: var(--ais-text-muted);
}

.ais-about__kicker .ais-icon {
	width: 18px;
	height: 18px;
	color: var(--ais-orange);
}

.ais-about__text {
	margin: 0;
	/* Lead/intro rung shared via --ais-fs-lead; About keeps a slightly larger
	   voice via the 1.06 multiplier. */
	font-size: calc(var(--ais-fs-lead) * 1.06);
	line-height: var(--ais-leading-body);
	color: var(--ais-text);
}

/* --------------------------------------------------------------------------
   Highlight cards
   -------------------------------------------------------------------------- */
.ais-about__cards {
	list-style: none;
	margin: var(--ais-stack-gap) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--ais-grid-gap);
}

.ais-about__card {
	display: flex;
	flex-direction: column;
	gap: var(--ais-space-4);
	overflow: hidden;
}

/* Top accent line that sweeps in on hover. */
.ais-about__card::after {
	content: "";
	position: absolute;
	left: var(--ais-card-pad);
	right: var(--ais-card-pad);
	top: 0;
	height: 2px;
	border-radius: var(--ais-radius-pill);
	background: linear-gradient(90deg, var(--ais-orange), transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--ais-ease);
}

.ais-about__card:hover::after {
	transform: scaleX(1);
}

.ais-about__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--ais-radius);
	background: color-mix(in srgb, var(--ais-orange) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--ais-orange) 26%, transparent);
	color: var(--ais-orange);
	transition: transform .35s var(--ais-ease), background-color .35s var(--ais-ease), box-shadow .35s var(--ais-ease);
}

.ais-about__card-icon .ais-icon {
	width: 26px;
	height: 26px;
}

.ais-about__card:hover .ais-about__card-icon {
	transform: translateY(-3px) scale(1.05);
	background: color-mix(in srgb, var(--ais-orange) 24%, transparent);
	box-shadow: 0 10px 26px -12px var(--ais-glow);
}

.ais-about__card-title {
	margin: 0;
	font-family: var(--ais-heading-font);
	font-size: var(--ais-fs-h3);
	font-weight: var(--ais-heading-weight);
	color: var(--ais-text);
}

.ais-about__card-text {
	margin: 0;
	font-size: var(--ais-fs-sm);
	line-height: var(--ais-leading-body);
	color: var(--ais-text-muted);
}

/* --------------------------------------------------------------------------
   Floating animation (motion-safe only)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.ais-about__float {
		animation: ais-about-float 6s var(--ais-ease) infinite;
	}
	.ais-about__float--2 {
		animation-delay: -2s;
		animation-duration: 7s;
	}
	.ais-about__float--3 {
		animation-delay: -4s;
		animation-duration: 6.5s;
	}
}

@keyframes ais-about-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.ais-about__lead {
		grid-template-columns: 1fr;
		justify-items: center;
	}
	.ais-about__portrait {
		width: min(400px, 100%);
	}
	.ais-about__body {
		max-width: var(--ais-measure);
		padding-inline-start: 0;
	}
	.ais-about__body::before {
		display: none;
	}
	.ais-about__cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.ais-about__cards {
		grid-template-columns: 1fr;
	}
	.ais-about__float {
		font-size: .7rem;
		padding: 6px 10px;
	}
	.ais-about__monogram-letter {
		font-size: clamp(84px, 30vw, 130px);
	}
}

/* --------------------------------------------------------------------------
   Desktop: compose About as one grid so the portrait, founder text and the
   2x2 highlight cards share a single layout (no empty right column). Scoped
   to midnight-orange — the other skins re-grid .ais-about__cards themselves.
   -------------------------------------------------------------------------- */
@media (min-width: 1181px) {
	body.ais-theme-midnight-orange .ais-about > .ais-container {
		display: grid;
		grid-template-columns: minmax(0, clamp(320px, 30vw, 400px)) minmax(0, 1fr);
		grid-template-areas:
			"head head"
			"portrait body"
			"portrait cards";
		column-gap: var(--ais-stack-gap);
		align-items: start;
	}
	body.ais-theme-midnight-orange .ais-about .ais-section__head {
		grid-area: head;
	}
	body.ais-theme-midnight-orange .ais-about__lead {
		display: contents;
	}
	body.ais-theme-midnight-orange .ais-about__portrait {
		grid-area: portrait;
	}
	body.ais-theme-midnight-orange .ais-about__body {
		grid-area: body;
		align-self: center;
	}
	body.ais-theme-midnight-orange .ais-about__cards {
		grid-area: cards;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: var(--ais-grid-gap);
		align-self: end;
	}
}

/* --------------------------------------------------------------------------
   RTL — mirror only asymmetric positioning / directional reveals.
   The two-column lead grid and the card grid reverse automatically under
   dir=rtl (CSS grid follows the inline axis), so only absolute/edge pieces
   and the sweep direction need explicit flipping. LTR is untouched.
   -------------------------------------------------------------------------- */
[dir="rtl"] .ais-about::before {
	right: auto;
	left: -12%;
}
[dir="rtl"] .ais-about__float--1 {
	right: auto;
	left: 7%;
}
[dir="rtl"] .ais-about__float--2 {
	left: auto;
	right: 6%;
}
[dir="rtl"] .ais-about__float--3 {
	right: auto;
	left: 9%;
}
[dir="rtl"] .ais-about__body::before {
	left: auto;
	right: 0;
}
[dir="rtl"] .ais-about__card::after {
	transform-origin: right;
	background: linear-gradient(270deg, var(--ais-orange), transparent);
}