/* ============================================================
   Parkwellness — About Section
   Mobile-first: content stacks above the photo, single column. From
   900px up, a 2-column grid — content left, photo right. The content
   column is itself a flex container (align-items:center) so its text
   stays vertically centered against whatever height the row ends up
   being, rather than pinned to the top.
   ============================================================ */

.pw-about {
	background-color: var(--color-dark-800);
}

.pw-about-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 900px) {
	.pw-about-grid {
		grid-template-columns: 1fr 1fr;
		gap: 60px;
	}
}

.pw-about-content {
	display: flex;
	align-items: center;
}

.pw-about-content-inner {
	width: 100%;
}

h2.pw-about-heading {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	color: var(--color-cream-200);
}

/* img. prefix + clamp() width — same fix/values as every other
   divider reusing this graphic (Hero/Studio/Contrology/Reviews): a
   single class loses to reset.css's ".pw-landing img" on max-width,
   and the ceiling is the same 379px sitewide for visual consistency. */
img.pw-about-divider {
	display: block;
	width: clamp(180px, 27vw, 379px);
	height: auto;
	margin: 20px 0;
}

.pw-about-bio p {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-taupe-100);
	margin-bottom: 16px;
}

.pw-about-bio p:last-child {
	margin-bottom: 0;
}

@media (min-width: 900px) {
	.pw-about-bio p {
		font-size: 16px;
	}
}

/* align-items:center (not the flex default of stretch) — stretch
   would force the img to fill the row's cross-size even though it
   has height:auto, distorting its aspect ratio instead of just
   scaling it proportionally to its own width. */
.pw-about-image {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 900px) {
	.pw-about-image {
		justify-content: flex-end;
	}
}

.pw-about-image img {
	display: block;
	width: 100%;
	max-width: 480px;
	height: auto;
}