/* Specialization + minimum-rating filter bar, shown above the grid.
Each label+select pair sits inline, wrapping to its own line on narrow
screens rather than a strict two-column layout, since this is simpler
and inherently mobile-safe without needing its own media query. */
.acx-instructor-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 20px;
}

.acx-instructor-filters p {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.acx-instructor-filters label {
	font-weight: 600;
	white-space: nowrap;
}

.acx-instructor-filters select {
	padding: 6px 10px;
	border: 1px solid #999;
	border-radius: 4px;
	font-size: 14px;
	max-width: 220px;
}

.acx-instructor-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 24px;
}

/* Fixed width, and a MINIMUM height (not a hard height) - every card
looks the same size in the common case, since the bio/tags are capped
elsewhere (see directory.js) so there's little left to vary card
height in practice, but this deliberately does NOT hard-cap the
height. An earlier version of this rule used a fixed height with
overflow: hidden, which caused a real, reported bug: the button row is
pushed to the bottom of the card via margin-top: auto (see
.acx-instructor-card-actions below), and if the actual content above
it (photo + name + rating + experience + bio + tags) ever turned out
taller than the fixed height allowed for - which can happen for
reasons outside this stylesheet's control, like how large the host
theme styles an <h3> - the button was pushed past the visible
boundary and silently clipped out of view by overflow: hidden, while
still technically present in the page. A working "Book a Session"
button is the entire point of this page, so guaranteeing it's always
visible takes priority over guaranteeing every card is byte-for-byte
identical in height: min-height means a card only ever grows taller
than its neighbors in a genuine edge case, and never clips its own
content to stay a fixed size. A box-shadow (rather than just the
existing border) gives clearer visual separation between cards sitting
side by side. */
.acx-instructor-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	min-height: 420px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.05 );
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.acx-instructor-card:hover {
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.08 );
	transform: translateY( -2px );
}

/* Everything below the photo (name, rating, experience, bio, tags,
actions) - matches the course catalog card's own .acx-course-card-body
exactly: flex-direction: column + flex: 1 is what lets the actions
row's own existing margin-top: auto (further below) still correctly
push "Book a Session" to the bottom of the card, regardless of how
much content sits above it. */
.acx-instructor-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px;
}

.acx-instructor-photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	flex-shrink: 0;
}

.acx-instructor-card h3 {
	margin: 0 0 6px;
	/* Long names wrap onto a second line rather than overflowing the
	fixed-width card. */
	overflow-wrap: break-word;
}

.acx-instructor-rating {
	display: block;
	color: #b8860b;
	font-weight: 600;
	margin: 0 0 6px;
	text-decoration: none;
	flex-shrink: 0;
}

a.acx-instructor-rating:hover {
	text-decoration: underline;
}

.acx-instructor-card .acx-submit-button {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.acx-instructor-card .acx-submit-button:hover {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	transform: translateY(-1px);
}

.acx-instructor-experience {
	color: #646970;
	font-size: 13px;
	margin: 0 0 10px;
	flex-shrink: 0;
}

/* The line-clamp approach this used previously is no longer needed:
directory.js now truncates the bio to ~100 characters itself before it
ever reaches this element, so the text is always short enough to fit
without any CSS-level clamping. The full bio is still available on the
individual instructor's own profile page (reachable via the
instructor's name, which links there when configured). */
.acx-instructor-bio {
	margin: 0 0 12px;
	line-height: 1.5;
}

/* directory.js caps the number of tags shown to 3, which is the sole
mechanism now - no CSS-level height clamp on top of it, since a clamp
here risks the same failure mode that caused the missing-button bug:
clipping content (in this case a tag) mid-way if the actual rendered
size ever turns out larger than assumed. */
.acx-instructor-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.acx-instructor-tag {
	background: #f0f0f1;
	border-radius: 12px;
	padding: 3px 10px;
	font-size: 12px;
	color: #1d2327;
}

/* Individual instructor profile page - a larger, single-instructor
layout reusing the same visual language as the directory card above
(rating/experience/tags/bio all share the same classes), rather than a
second, separate set of styles for what's largely the same content
shown at a bigger size. */

.acx-instructor-profile-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	max-width: 900px;
	margin: 0 auto;
}

.acx-instructor-profile-photo {
	width: 260px;
	aspect-ratio: 1 / 1;
	flex: 0 0 260px;
}

.acx-instructor-profile-details {
	flex: 1 1 320px;
	min-width: 0;
}

.acx-instructor-profile-details h1 {
	margin: 0 0 8px;
}

.acx-instructor-qualifications {
	white-space: pre-line;
	line-height: 1.5;
	margin: 0 0 16px;
}

@media screen and ( max-width: 600px ) {
	.acx-instructor-profile-photo {
		width: 100%;
		flex-basis: 100%;
	}
}

/* Holds "Book a Session" (the only button here now - "View Details"
was removed, see directory.js for why). margin-top: auto pushes this
row to the bottom of the card's flex column regardless of how much
content (bio, tags) sits above it, so every card's button lines up at
the same height even though the content above it isn't identical in
length. */
.acx-instructor-card-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: auto;
	flex-shrink: 0;
}

.acx-instructor-card-actions .acx-submit-button {
	flex: 1 1 auto;
	justify-content: center;
	white-space: nowrap;
}

@media ( max-width: 1024px ) {
	.acx-instructor-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767px ) {
	.acx-instructor-grid {
		grid-template-columns: 1fr;
	}
}