/**
 * About Us page — hero + features
 * Enqueued only on the About page template.
 */

.va-about-page-hero {
	background: #121212;
	padding: 100px 0;
	margin: 0 !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.va-main > .va-about-page-hero,
.va-main > .wp-block-group.va-about-page-hero {
	margin: 0 !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.va-main > .va-about-page-hero + .va-cta-bar,
.va-main > .wp-block-group.va-about-page-hero + .wp-block-group.va-cta-bar {
	margin: 0 !important;
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

.va-about-page-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.va-about-page-hero-copy {
	max-width: 627px;
	min-width: 0;
}

/* Uses .va-hero-badge (sitewide Figma styles in main.css) */

/* Uses .va-h1; Figma: Inter 700 / 72 / 77.76 / -1.8px */
.va-about-page-hero-heading {
	margin: 0 0 12px;
	max-width: 627px;
}

.va-about-page-hero-heading span {
	color: var(--va-orange);
}

/* Figma: Inter 400 / 18 / 30 / #FFF @ 65% */
.va-about-page-hero-desc {
	margin: 0;
	max-width: 486px;
	font-family: var(--va-font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.65);
}

.va-about-page-hero-media {
	min-width: 0;
	width: 100%;
	max-width: 702px;
	justify-self: end;
}

.va-about-page-hero-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.va-about-page-features {
	background: transparent;
	padding: 0;
	margin: 0 !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.va-main > .va-cta-bar,
.va-main > .wp-block-group.va-cta-bar {
	margin-block-end: 0;
	margin-bottom: 0;
}

.va-main > .va-about-page-features,
.va-main > .wp-block-group.va-about-page-features,
.va-main > .va-cta-bar + .va-about-page-features,
.va-main > .wp-block-group.va-cta-bar + .wp-block-group.va-about-page-features {
	margin: 0 !important;
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

.va-about-page-feature {
	margin: 0 !important;
	margin-block-start: 0 !important;
	padding: 100px 0;
	box-sizing: border-box;
}

.va-about-page-feature:nth-child(odd) {
	background: #121212;
}

.va-about-page-feature:nth-child(even) {
	background: #000000;
}

.va-about-page-feature-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}

.va-about-page-feature--image-left .va-about-page-feature-inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.va-about-page-feature--image-left .va-about-page-feature-media {
	grid-column: 1;
	grid-row: 1;
}

.va-about-page-feature--image-left .va-about-page-feature-copy {
	grid-column: 2;
	grid-row: 1;
}

.va-about-page-feature-copy {
	max-width: 555px;
}

/* Uses .va-h2; Figma: Inter 700 / 48 / 52 lh / -1.2px / #FFF */
.va-about-page-feature-title {
	margin: 0 0 34px;
	max-width: 430px;
	font-family: var(--va-font-display);
	font-size: 48px;
	font-weight: 700;
	line-height: 52px;
	letter-spacing: -1.2px;
	color: var(--va-white);
}

/* Figma: Inter 400 / 18 / 28 lh / #FFF @ 60% */
.va-about-page-feature-desc {
	margin: 0;
	max-width: 555px;
	font-family: var(--va-font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.6);
}

.va-about-page-feature-media {
	min-width: 0;
	width: 100%;
	max-width: 702px;
}

.va-about-page-feature--text-left .va-about-page-feature-media {
	justify-self: end;
}

.va-about-page-feature--image-left .va-about-page-feature-media {
	justify-self: start;
}

.va-about-page-feature-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
}

@media (max-width: 900px) {
	.va-about-page-hero {
		padding: 28px 0 56px;
	}

	.va-about-page-hero-inner,
	.va-about-page-feature-inner,
	.va-about-page-feature--image-left .va-about-page-feature-inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* Reset desktop image-left placement so column 2 doesn't stay implicit. */
	.va-about-page-feature--image-left .va-about-page-feature-media,
	.va-about-page-feature--image-left .va-about-page-feature-copy {
		grid-column: auto;
		grid-row: auto;
	}

	.va-about-page-feature {
		padding: 72px 0;
	}

	.va-about-page-hero-media,
	.va-about-page-hero-image,
	.va-about-page-feature-media,
	.va-about-page-feature-image {
		width: 100%;
		max-width: 100%;
		justify-self: stretch;
	}

	.va-about-page-hero-heading {
		font-size: 40px;
		line-height: 1.1;
		letter-spacing: -1px;
	}
}

@media (max-width: 600px) {
	.va-about-page-hero {
		padding: 20px 0 48px;
	}

	.va-about-page-hero-heading {
		font-size: 32px;
	}

	.va-about-page-feature {
		padding: 56px 0;
	}

	.va-about-page-feature-title {
		font-size: 28px;
		line-height: 1.15;
	}

	.va-about-page-hero-image,
	.va-about-page-feature-image {
		border-radius: 16px;
	}
}