/**
 * Who We Are Page Styles
 * Styles for the "Who We Are" page template
 */

/* ============================================
   WHO WE ARE HERO SECTION
   ============================================ */

.who-we-are-page {
	background-color: var(--color-pure-white);
}

.who-we-are-hero {
	padding: clamp(80px, 12vw, 150px) 0;
	background-color: var(--color-pure-white);
}

.who-we-are-hero-content {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.who-we-are-title {
	font-family: var(--font-family-h1);
	font-size: var(--font-size-h1);
	line-height: var(--line-height-h1);
	font-weight: var(--font-weight-h1);
	color: var(--color-text-primary);
	margin: 0 0 var(--spacing-lg) 0;
}

.who-we-are-subtitle {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-steel-mist);
	margin: 0;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================
   WHO WE ARE CONTENT SECTION
   ============================================ */

.who-we-are-content {
	padding: 0;
	background-color: var(--color-pure-white);
}

.who-we-are-content-wrapper {
	max-width: 900px;
	margin: 0 auto;
}

.who-we-are-content .post-content {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text-primary);
}

.who-we-are-content .post-content h2 {
	font-family: var(--font-family-h2);
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
	font-weight: var(--font-weight-h2);
	color: var(--color-text-primary);
	margin: var(--spacing-3xl) 0 var(--spacing-lg) 0;
}

.who-we-are-content .post-content h2:first-child {
	margin-top: 0;
}

.who-we-are-content .post-content h3 {
	font-family: var(--font-family-h3);
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
	font-weight: var(--font-weight-h3);
	color: var(--color-text-primary);
	margin: var(--spacing-2xl) 0 var(--spacing-md) 0;
}

.who-we-are-content .post-content p {
	margin: 0 0 var(--spacing-lg) 0;
}

.who-we-are-content .post-content ul,
.who-we-are-content .post-content ol {
	margin: 0 0 var(--spacing-lg) 0;
	padding-left: var(--spacing-xl);
}

.who-we-are-content .post-content li {
	margin-bottom: var(--spacing-sm);
}

.who-we-are-content .post-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--border-radius-md);
	margin: var(--spacing-xl) 0;
}

.who-we-are-content .post-content blockquote {
	border-left: 4px solid var(--color-sky-pulse);
	padding-left: var(--spacing-lg);
	margin: var(--spacing-xl) 0;
	font-style: italic;
	color: var(--color-steel-mist);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
	.who-we-are-hero {
		padding: clamp(60px, 10vw, 120px) 0;
	}
	
	.who-we-are-hero-content {
		padding: 0 var(--container-padding);
	}
	
	.who-we-are-content {
		padding: 0;
	}
	
	.who-we-are-content-wrapper {
		max-width: 100%;
	}
}