/**
 * Our Vision Page Styles
 * Styles for the "Our Vision" page template
 */

/* ============================================
   OUR VISION PAGE
   ============================================ */

.our-vision-page {
	background-color: var(--color-pure-white);
}

/* ============================================
   OUR VISION FOR THE FUTURE SECTION
   ============================================ */

.our-vision-future-section {
	padding: var(--spacing-4xl) 0;
	background: linear-gradient(180deg, #FFFFFF 0%, #CCE3FB 100%);
}

.our-vision-future-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-4xl);
	align-items: center;
}

.our-vision-future-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl);
}

.our-vision-future-title {
	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: 0;
}

.our-vision-future-text {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text-primary);
}

.our-vision-future-text p {
	margin: 0 0 var(--spacing-lg) 0;
}

.our-vision-future-text p:last-child {
	margin-bottom: 0;
}

.our-vision-future-image {
	position: relative;
	width: 100%;
	height: auto;
}

.our-vision-future-image img {
	width: 100%;
	height: auto;
	border-radius: var(--border-radius-lg);
	object-fit: contain;
	display: block;
}

/* ============================================
   PRINCIPLES SECTION STYLES FOR OUR VISION PAGE
   ============================================ */

.our-vision-page .principles-card__icon {
	background: #fff;
}

.our-vision-page .principles-card__icon .material-icons {
	color: var(--color-night-core);
	font-size: 28px;
}

/* ============================================
   BANNER SECTION STYLES FOR OUR VISION PAGE
   ============================================ */

.our-vision-page .banner-title-accent {
	color: var(--color-sky-pulse);
}

.our-vision-page .banner-title-main {
	color: var(--color-pure-white);
}

/* ============================================
   OUR VISION CONTENT SECTION
   ============================================ */

.our-vision-content {
	padding: var(--spacing-4xl) 0;
	background-color: var(--color-pure-white);
}

.our-vision-content-wrapper {
	max-width: 900px;
	margin: 0 auto;
}

.our-vision-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);
}

.our-vision-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;
}

.our-vision-content .post-content h2:first-child {
	margin-top: 0;
}

.our-vision-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;
}

.our-vision-content .post-content p {
	margin: 0 0 var(--spacing-lg) 0;
}

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

.our-vision-content .post-content li {
	margin-bottom: var(--spacing-sm);
}

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

.our-vision-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) {
	.our-vision-future-section {
		padding: var(--spacing-2xl) 0;
	}
	
	.our-vision-future-wrapper {
		grid-template-columns: 1fr;
		gap: var(--spacing-2xl);
	}
	
	.our-vision-future-content {
		order: 1;
	}
	
	.our-vision-future-image {
		order: 2;
	}
	
	.our-vision-content {
		padding: var(--spacing-2xl) 0;
	}
	
	.our-vision-content-wrapper {
		max-width: 100%;
		padding: 0 var(--container-padding);
	}
}