/**
 * About pages (EN 2, AR 824) — aligned with homepage tokens in custom.css + style.css.
 * Only structural overrides + measured spacing; colors/fonts come from theme.
 */

/* ---- Full-bleed: remove boxed entry-content shell ---- */
.page-id-2 .site-main,
.page-id-824 .site-main {
	padding-top: 0;
	padding-bottom: 0;
}

.page-id-2 .page-article > .container,
.page-id-824 .page-article > .container {
	width: 100%;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.page-id-2 .entry-content,
.page-id-824 .entry-content {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	max-width: none;
}

.page-id-2 .page-content-wrapper,
.page-id-824 .page-content-wrapper {
	max-width: none;
}

/* ---- Page canvas matches site background ---- */
.page-id-2 .page-about-content,
.page-id-824 .page-about-content {
	background: var(--mm-bg, #f7f9fc);
	color: var(--fg, #0f172a);
	font-family: inherit;
	font-size: var(--scale-0, 1rem);
	line-height: 1.6;
}

/* ---- Hero (mirrors homepage hero-3 / light canvas) ---- */
.page-about-content .about-hero {
	padding-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-bottom: var(--section-y, clamp(2rem, 3vw + 0.5rem, 4rem));
	background: var(--mm-bg, #f7f9fc);
}

.page-about-content .about-hero h1 {
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
	line-height: 1.2;
	color: var(--fg, #0f172a);
	margin-bottom: 1rem;
}

.page-about-content .about-hero .fs-5 {
	font-size: clamp(1rem, 0.96rem + 0.25vw, 1.08rem);
	line-height: 1.8;
	color: var(--muted, #64748b);
}

.page-about-content .about-hero-photo {
	max-width: min(100%, 400px);
	width: 100%;
	aspect-ratio: 1;
}

.page-about-content .about-hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Sections: same rhythm as homepage py-5 blocks ---- */
.page-about-content > section {
	padding-top: var(--section-y, clamp(2rem, 3vw + 0.5rem, 4rem));
	padding-bottom: var(--section-y, clamp(2rem, 3vw + 0.5rem, 4rem));
}

.page-about-content > section.bg-light {
	background: var(--surface, #f8fafc);
}

.page-about-content .display-5 {
	font-size: clamp(1.35rem, 1rem + 1.2vw, 1.75rem);
	line-height: 1.3;
	color: var(--fg, #0f172a);
}

.page-about-content .text-dark {
	color: var(--fg, #0f172a) !important;
}

.page-about-content .text-muted {
	color: var(--muted, #64748b) !important;
}

/* ---- Cards: homepage-services pattern ---- */
.page-about-content .card {
	border: 1px solid var(--border, #e2e8f0);
	border-radius: var(--radius, 12px);
	box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
	background: var(--surface-elevated, #fff);
}

.page-about-content .card-body {
	padding: 1.25rem;
}

@media (min-width: 768px) {
	.page-about-content .card-body {
		padding: 1.5rem;
	}
}

.page-about-content .about-role-icon {
	width: 48px;
	height: 48px;
	font-size: 1.25rem;
}

/* ---- CTA band: light surface, theme buttons (not dark gradient) ---- */
.page-about-content .about-cta-band {
	background: var(--surface-elevated, #fff);
	border-top: 1px solid var(--border, #e2e8f0);
}

.page-about-content .btn-primary {
	background: var(--primary, #1e40af);
	border-color: var(--primary, #1e40af);
}

.page-about-content .btn-primary:hover {
	background: var(--primary-hover, #1d4ed8);
	border-color: var(--primary-hover, #1d4ed8);
}

.page-about-content .btn-outline-primary {
	color: var(--primary, #1e40af);
	border-color: var(--primary, #1e40af);
}

.page-about-content .btn-outline-primary:hover {
	background: var(--primary-light, #dbeafe);
	color: var(--primary-hover, #1d4ed8);
}

/* ---- RTL typography ---- */
.page-id-824 .page-about-content,
html[dir="rtl"] .page-about-content {
	font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

.page-id-824 .page-about-content .about-hero h1,
.page-id-824 .page-about-content .display-5 {
	line-height: 1.35;
}

@media (max-width: 767.98px) {
	.page-about-content .about-hero {
		padding-top: 2rem;
	}

	.page-about-content > section {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.page-about-content .about-hero .row {
		row-gap: 1.25rem;
	}
}