/* About Page Specific Styles */

.about-page main {
	padding-block: clamp(1rem, 6vw, 3rem);
}

/* Minimalist split sections */
.about-section {
	margin: clamp(2rem, 8vw, 6rem) auto;
}

.about-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	grid-template-areas: 'text media';
	gap: clamp(1rem, 4vw, 3rem);
	align-items: center;
}

.about-grid.reverse {
	grid-template-columns: 1fr 1.1fr;
	grid-template-areas: 'media text';
}

.about-grid .about-text { grid-area: text; }
.about-grid .about-media { grid-area: media; }

.about-text h2 {
	margin-bottom: clamp(0.25rem, 1vw, 0.75rem);
}

.about-text p {
	font-weight: 400;
	line-height: 1.7;
	margin: 0 0 clamp(0.75rem, 2vw, 1.25rem) 0;
}

.about-media {
	margin: 0;
	padding: 0;
}

.about-media img {
	width: 100%;
	height: clamp(220px, 38vw, 520px);
	object-fit: cover;
	border-radius: clamp(8px, 1vw, 14px);
	box-shadow: 0 16px 32px var(--nsf-shadow);
}

@media (max-width: 768px) {
	/* Single column — the only viable layout with Unbounded on mobile */
	.about-grid,
	.about-grid.reverse {
		grid-template-columns: 1fr;
		grid-template-areas:
			'media'
			'text';
		gap: 0.9rem;
	}

	.about-section {
		margin: 1.75rem auto;
	}

	/* Short wide banner — shows the photo without dominating */
	.about-media img {
		height: 200px;
		border-radius: 10px;
		object-position: center center;
	}

	/* First section (dap.jpg) — shift down to show faces */
	.about-section:first-of-type .about-media img {
		object-position: center 55%;
	}

	/* Unbounded wraps badly — reduce size enough to flow in one column */
	.about-text h2 {
		font-size: 1rem;
		margin-bottom: 0.5rem;
	}

	.about-text p {
		font-size: 0.72rem;
		line-height: 1.7;
		margin-bottom: 0.6rem;
	}
}