/* ==========================================================================
   Category pages — "Learn From Our Teachers" cards
   (template-parts/categories/teachers.php, loaded by inc/category-teachers.php
   on all 6 category pages). Moved unchanged from the Yoga Teacher Training
   page's own stylesheet so every category page shares one copy.
   Hover: the card lifts and its border and photo ring turn deep green
   (var(--color-primary)). Each card only transitions the properties that
   change (border-color, box-shadow, transform).
   ========================================================================== */
.instructor-card {
	text-align: center;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 28px 24px 32px;
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.instructor-card:hover,
.instructor-card:focus-within {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}
.instructor-media {
	width: 108px; height: 108px; margin: 0 auto 18px;
	border-radius: 50%; overflow: hidden;
	border: 3px solid var(--color-border);
	transition: border-color var(--transition);
}
.instructor-card:hover .instructor-media { border-color: var(--color-primary); }
.instructor-media img { width: 100%; height: 100%; object-fit: cover; }
.instructor-card h3 { margin: 0 0 4px; font-size: 1.1rem; }
.instructor-card p { margin: 0; color: var(--color-text-light); font-size: 0.9rem; }