/*
 * About page - founder introduction.
 *
 * A portrait in a slightly rounded square sitting beside the bio on desktop,
 * stacking above it on narrow screens. Typography is deliberately left to the
 * theme: the heading and paragraphs use the site's own Elementor classes, so
 * this file only handles layout and the portrait treatment.
 */

.rw-about {
	padding: 10px 0 60px;
}

.rw-about__head {
	max-width: 1140px;
	margin: 0 auto 26px;
	padding: 0 20px;
}

.rw-about__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: flex-start;
	gap: 48px;
}

.rw-about__media {
	flex: 0 0 360px;
	max-width: 360px;
}

/* Scoped through .rw-about so this outranks Elementor's `.elementor img`
   rule, which resets border-radius to 0 and would otherwise win on
   specificity (0,1,1 against 0,1,0). */
.rw-about .rw-about__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* "Slightly rounded square" - softened corners, still clearly a square. */
	border-radius: 20px;
}

.rw-about__text {
	flex: 1 1 auto;
	min-width: 0;
}

/* The theme sets `h2 { line-height: 1.5px }` - a unit typo for `1.5`. It goes
   unnoticed while a heading fits on one line, but as soon as one wraps the
   lines collapse onto each other. Restore a real line-height for the headings
   on this page. */
.rw-about__head h2,
.rw-about__text h2 {
	line-height: 1.3;
}

.rw-about__text > h2 {
	margin-top: 0;
	margin-bottom: 18px;
}

.rw-about__text p {
	margin: 0 0 18px;
}

.rw-about__text p:last-child {
	margin-bottom: 0;
}

/* Stack once the two columns stop having room to sit side by side. */
@media (max-width: 860px) {
	.rw-about__inner {
		flex-direction: column;
		align-items: center;
		gap: 28px;
	}

	.rw-about__media {
		flex: 0 0 auto;
		width: min(320px, 80%);
		max-width: none;
	}

	.rw-about__text {
		width: 100%;
	}
}