/* ── Brentwood single Staff view (inc/brentwood-staff.php) ────────────────────
   Two-column faculty profile aligned to the 33% red accent line
   (.border-primary-line): the featured photo sits in the left ~33% (left of the
   line, as a widget); the title/role/credentials/bio sit in the right ~67%
   (right of the line, padded so text never hugs it). The profile typography +
   shield footer are styled by the team-modal stylesheet (.bw-tm__*); this file
   only lays out the two columns. */

.bw-staff {
	box-sizing: border-box;
	padding: 1.5rem 1rem 3rem;     /* mobile: top | sides | bottom */
}
.bw-staff * { box-sizing: border-box; }

/* Photo widget */
.bw-staff__photo {
	margin: 0 auto 1.5rem;          /* mobile: centred above the text */
	max-width: 240px;
}
.bw-staff__img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #e2e2e2;
	border-radius: 2px;
}

/* Desktop: two columns straddling the 33% red line. .bw-staff fills
   .entry-content, and the line sits at 33% of the same box, so a 33% left
   column lands exactly on it. Padding on each side keeps content off the line. */
@media ( min-width: 768px ) {
	.bw-staff {
		display: flex;
		align-items: flex-start;
		padding: 2.5rem 0 4rem;
	}
	.bw-staff__photo {
		flex: 0 0 33.9%;
		max-width: none;
		margin: 0;
		/* 2rem outer inset (matches /why-brentwood/'s boxed padding) + gap to the
		   line. box-sizing:border-box keeps the column edge on the 33% line. */
		padding-left: 2rem;
		padding-right: 1.75rem;
	}
	.bw-staff__photo .bw-staff__img {
		max-width: 260px;
		margin-left: auto;          /* sit toward the line, like a widget */
	}
	.bw-staff__body {
		flex: 1 1 0;
		min-width: 0;               /* let long words wrap inside the column */
		padding-left: 3rem;         /* breathing room right of the line */
		padding-right: 3rem;        /* consistent right inset, like /why-brentwood/ */
	}
}