/*
 * 12-team.css
 * Version: 0.1.0
 * Date: 2026-04-30
 * Generated by Claude (Session DOB-S5, team grid fix)
 *
 * Renders the team page roster as a responsive 3-column grid of cards.
 * Each card stacks: square photo, H3 name, italic role-line, bio paragraph.
 * Two breakpoints collapse to 2-col then 1-col.
 *
 * Activated by wrapping the 9 team-member groups in
 *   <!-- wp:group {"className":"dob-team-grid"} --> ...
 *     <!-- wp:group {"className":"dob-team-card"} --> ...
 * inside the team page body. Other content on the team page is unaffected.
 */

.dob-team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem 1.75rem;
	margin-block: 2rem;
}

.dob-team-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dob-team-card > * {
	margin: 0;
}

.dob-team-card .wp-block-image,
.dob-team-card figure.wp-block-image {
	width: 100%;
	margin: 0 0 0.5rem 0;
}

.dob-team-card .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 2px;
}

.dob-team-card h3.wp-block-heading {
	font-size: 1.375rem;
	line-height: 1.2;
}

.dob-team-card p {
	font-size: 0.95rem;
	line-height: 1.55;
}

.dob-team-card p:first-of-type em {
	font-style: italic;
	color: #5b5048;
	font-size: 0.9375rem;
	line-height: 1.4;
}

@media (max-width: 900px) {
	.dob-team-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.dob-team-grid {
		grid-template-columns: 1fr;
	}
}