/*
 * MC LearnPress UI — instructor profile screen
 * Handle: mc-lp-instructor  (depends on mc-lp-base → mc-lp-tokens)
 * Figma 3332:28027 · plan §5.1, §7.1
 *
 * Contents
 *   1. Page grid
 *   2. Profile card
 *   3. Section headings
 *   4. Skills
 *   5. Course grid
 *   6. Reviews — summary, histogram
 *   7. Reviews — toolbar chips
 *   8. Reviews — list
 *   9. "Show more" controls
 *
 * Rules observed here: logical properties only (zero left/right), variables only,
 * hard-coded breakpoints 640 / 768 / 1024 / 1280, mobile-first.
 * Everything is scoped under `.mc-lp-instructor`, which the module puts on its own
 * wrapper together with `.mc-lp` — so the screen styles itself even when the
 * shortcode sits on a page the body-class detector did not match.
 *
 * SPECIFICITY — every component rule below carries a `.mc-lp` prefix on purpose.
 * base.css styles bare elements inside the plugin root (`.mc-lp h2`, `.mc-lp p`,
 * `.mc-lp a`, `.mc-lp ul`, `.mc-lp figure`, `.mc-lp img`) at (0,1,1), which beats
 * a lone class at (0,1,0). Without the prefix `.mc-lp h2` won this file's card
 * name and section headings (clamped font-size, leading-tight), `.mc-lp a` won
 * the review menu links, and `.mc-lp ul` won the menu's padding. The prefix takes
 * these rules to (0,2,x) so the measured values actually apply.
 * The `.mc-review__*` fallback block in §8 is deliberately left unprefixed: it
 * must stay weaker than the shared `review-item` component in reviews.css.
 */

/* ==========================================================================
   1. Page grid
   Below 1024px: one column, profile card first (DOM order).
   From 1024px:  card in the inline-start column, content in the end column,
                 reviews spanning both.
   ========================================================================== */

/*
 * Measured from Figma 3332:28027 (1440 frame, 1200 container):
 *   main column 891 · gutter 24 · profile column 282   = 1197
 *   review list 891 · gutter 16 · summary column 293   = 1200
 * The two asides differ by 11px in the design itself, so each keeps its own
 * custom property rather than being averaged into one wrong number.
 *
 * `.mc-lp-instructor` sits on the same element as `.mc-lp`, so it is never
 * prefixed — it is the root, not a descendant.
 */
.mc-lp-instructor {
	--mc-instructor-aside: 282px;
	--mc-instructor-reviews-aside: 293px;
	--mc-instructor-gap: var(--mc-space-6);

	margin-block: var(--mc-space-8);
}

.mc-lp-instructor__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mc-instructor-gap);
	align-items: start;
}

.mc-lp-instructor__main {
	min-width: 0;
}

/* Skills block bottom (216) to courses block top (264) = 48px. */
.mc-lp-instructor__main > * + * {
	margin-block-start: var(--mc-space-12);
}

@media (min-width: 1024px) {
	.mc-lp-instructor__layout {
		grid-template-columns: var(--mc-instructor-aside) minmax(0, 1fr);
		column-gap: var(--mc-space-6);
		row-gap: var(--mc-space-12);
	}

	/* Reviews sit below both columns and span the full width. */
	.mc-lp-instructor .mc-instructor-reviews {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   2. Profile card
   ========================================================================== */

/*
 * Figma 3332:28180 — 282 wide. Avatar 125 round, 16px from the card top; 19-20px
 * to the name (28 tall); 19-20px to the role (two 24px lines); 16px to the card
 * foot. The design draws the stat block as a second card 24px below; here it is
 * one card with a rule, which is what the markup contract in
 * templates/parts/instructor-profile-card.php describes.
 *
 * The card is the grid item itself, so `.mc-sticky` (base.css) has the whole
 * layout row as its containing block and a real travel range.
 */
.mc-lp .mc-instructor-card {
	gap: var(--mc-space-5);
	padding: var(--mc-space-4);
	overflow: visible; /* .mc-card clips; the card has no bleeding media. */
}

.mc-lp .mc-instructor-card__avatar {
	display: flex;
	justify-content: center;
	margin: 0;
}

.mc-lp .mc-instructor-card__avatar img {
	width: 125px;
	height: 125px;
	max-width: 100%;
	border-radius: var(--mc-radius-full);
	object-fit: cover;
	background: var(--mc-color-surface);
}

.mc-lp .mc-instructor-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-5);
	min-width: 0;
}

.mc-lp .mc-instructor-card__name {
	font-size: var(--mc-font-size-xl);
	line-height: var(--mc-leading-xl);
	font-weight: var(--mc-font-weight-bold);
	text-align: center;
}

.mc-lp .mc-instructor-card__name a {
	color: inherit;
}

.mc-lp .mc-instructor-card__role {
	margin: 0;
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-base);
	text-align: center;
}

/* --- Statistic rows ------------------------------------------------------ */

/*
 * Row pitch in the design is 44px: 20px of content with 24px between rows
 * (3332:28194 y0 · 3332:28202 y44 · 3332:28207 y88). 12px of block padding plus
 * the 20px line box reproduces it exactly, so the row needs no min-height —
 * these rows are not interactive and must not claim a tap target.
 */
.mc-lp .mc-instructor-card__stats {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	border-block-start: 1px solid var(--mc-color-border);
}

.mc-lp .mc-instructor-stat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mc-space-3);
	padding-block: var(--mc-space-3);
}

.mc-lp .mc-instructor-stat + .mc-instructor-stat {
	border-block-start: 1px solid var(--mc-color-border);
}

/*
 * Label reads as the emphasised half of the row; the number is the quiet one.
 * Icon sits 4px from the label text (3332:28197 x0-62 → 3329:25076 x66).
 */
.mc-lp .mc-instructor-stat__label {
	display: inline-flex;
	align-items: center;
	gap: var(--mc-space-1);
	min-width: 0;
	margin: 0;
	color: var(--mc-color-primary);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-semibold);
}

.mc-lp .mc-instructor-stat__icon {
	color: currentColor;
	flex: none;
}

.mc-lp .mc-instructor-stat__value {
	margin: 0;
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-xs);
	font-weight: var(--mc-font-weight-regular);
	white-space: nowrap;
}

/* ==========================================================================
   3. Section headings
   ========================================================================== */

/*
 * 32px line box, 24px to the block below (3332:28031 → 3332:28033).
 * These are <h2>s; without the `.mc-lp` prefix `.mc-lp h2` clamps the size to
 * 3vw and forces leading-tight, which is what made the headings drift.
 */
.mc-lp .mc-instructor-section__title {
	margin-block-end: var(--mc-space-6);
	font-size: var(--mc-font-size-2xl);
	line-height: var(--mc-leading-2xl);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-text);
}

/* ==========================================================================
   4. Skills
   ========================================================================== */

.mc-lp .mc-instructor-skills__list {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-3);
	margin: 0;
	padding-inline-start: var(--mc-space-5);
	list-style: disc;
}

.mc-lp .mc-instructor-skills__item {
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-base);
}

.mc-lp .mc-instructor-skills__item::marker {
	color: var(--mc-color-primary);
}

/* ==========================================================================
   5. Course grid
   LearnPress emits <ul class="ul-instructor-courses"> of ListCoursesTemplate
   items; the card markup itself belongs to the archive module.
   Plan §7.1: 3 col ≥1024 · 2 col ≥768 · 1 col below.
   ========================================================================== */

/* Cards at x 0 / 305 / 610 with width 281 → 24px column gap; rows 470-446 = 24. */
.mc-lp .mc-instructor-courses .ul-instructor-courses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mc-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-lp .mc-instructor-courses .ul-instructor-courses > li {
	min-width: 0;
	margin: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.mc-lp .mc-instructor-courses .ul-instructor-courses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.mc-lp .mc-instructor-courses .ul-instructor-courses {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   6. Reviews — summary and histogram
   ========================================================================== */

.mc-lp .mc-instructor-reviews {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mc-space-6);
	align-items: start;
	scroll-margin-block-start: var(--mc-space-8);
}

@media (min-width: 1024px) {
	.mc-lp .mc-instructor-reviews {
		grid-template-columns: var(--mc-instructor-reviews-aside) minmax(0, 1fr);
		column-gap: var(--mc-space-4);
	}
}

.mc-lp .mc-instructor-reviews__summary,
.mc-lp .mc-instructor-reviews__body {
	min-width: 0;
}

.mc-lp .mc-instructor-reviews__score {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mc-space-2);
	margin-block-end: var(--mc-space-4);
}

.mc-lp .mc-instructor-reviews__average {
	font-size: var(--mc-font-size-3xl);
	line-height: var(--mc-leading-3xl);
	font-weight: var(--mc-font-weight-extrabold);
	color: var(--mc-color-text);
}

.mc-lp .mc-instructor-reviews__count {
	flex-basis: 100%;
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-base);
}

/*
 * Scoped to this screen: `.mc-histogram` is a shared primitive owned by the
 * reviews module, and these values are the instructor summary's own metrics —
 * rows 24 tall on a 30px pitch (4595:33314 → 4595:33320), 12px between the
 * label, the 8px bar and the percentage (30 → 42, 240 → 252).
 */
.mc-lp .mc-instructor-reviews .mc-histogram {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-1-5);
}

.mc-lp .mc-instructor-reviews .mc-histogram__row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--mc-space-3);
	min-block-size: var(--mc-leading-base);
}

.mc-lp .mc-instructor-reviews .mc-histogram__label {
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-base);
	white-space: nowrap;
}

.mc-lp .mc-instructor-reviews .mc-histogram__percent {
	min-width: 30px;
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-base);
	text-align: end;
}

/* ==========================================================================
   7. Reviews — toolbar chips (server-side; each option is a link)

   The chips sit at the inline END of the header row: Figma puts them at x 0-290
   of a 1200 container while the heading sits at x 1032-1200, and the frame is an
   RTL layout drawn in Figma's LTR coordinate space — leftmost is inline-end.
   `flex-end` is therefore correct here and is *not* a literal port of a Figma
   `justify-end`.
   ========================================================================== */

.mc-lp .mc-instructor-reviews__toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--mc-space-4);
	margin-block-end: var(--mc-space-6);
}

.mc-lp .mc-rev-menu {
	position: relative;
}

.mc-lp .mc-rev-menu__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--mc-space-1-5);
	min-block-size: var(--mc-btn-height-sm);
	cursor: pointer;
	list-style: none;
}

/* Hide the native disclosure triangle in every engine. */
.mc-lp .mc-rev-menu__toggle::-webkit-details-marker {
	display: none;
}

.mc-lp .mc-rev-menu__toggle::marker {
	content: "";
}

.mc-lp .mc-rev-menu[open] > .mc-rev-menu__toggle {
	border-color: var(--mc-color-border-strong);
	color: var(--mc-color-text);
}

.mc-lp .mc-rev-menu[open] .mc-rev-menu__caret {
	transform: rotate(180deg);
}

.mc-lp .mc-rev-menu__caret {
	transition: transform var(--mc-transition-fast);
}

.mc-lp .mc-rev-menu__list {
	position: absolute;
	z-index: 5;
	inset-block-start: calc(100% + var(--mc-space-1));
	inset-inline-end: 0;
	min-width: 200px;
	margin: 0;
	padding: var(--mc-space-1);
	border: 1px solid var(--mc-color-border);
	border-radius: var(--mc-radius-md);
	background: var(--mc-color-bg);
	box-shadow: var(--mc-shadow-md);
	list-style: none;
}

.mc-lp .mc-rev-menu__item {
	margin: 0;
}

/*
 * These are anchors. `.mc-lp a` (0,1,1) and `.mc-lp a:hover` (0,2,1) both beat an
 * unprefixed `.mc-rev-menu__link`, which painted every menu option primary blue.
 */
.mc-lp .mc-rev-menu__link {
	display: flex;
	align-items: center;
	min-block-size: var(--mc-tap-target);
	padding-block: var(--mc-space-2);
	padding-inline: var(--mc-space-3);
	border-radius: var(--mc-radius-sm);
	color: var(--mc-color-text);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	white-space: nowrap;
}

.mc-lp .mc-rev-menu__link:hover,
.mc-lp .mc-rev-menu__link:focus-visible {
	background: var(--mc-color-surface);
	color: var(--mc-color-text);
}

.mc-lp .mc-rev-menu__link.is-active {
	background: var(--mc-color-surface-alt);
	color: var(--mc-color-primary);
	font-weight: var(--mc-font-weight-semibold);
}

/* ==========================================================================
   8. Reviews — list (single column at every width, plan §7.1)
   ========================================================================== */

.mc-lp .mc-instructor-reviews__list {
	display: flex;
	flex-direction: column;
}

/*
 * 4595:33284 — item 141 tall, rule 16px below it, next item 16px after the rule.
 * The design rules off the last item too, and the first sits flush with the top
 * of the column.
 */
.mc-lp .mc-instructor-reviews__item {
	min-width: 0;
	padding-block: var(--mc-space-4);
	border-block-end: 1px solid var(--mc-color-border);
}

.mc-lp .mc-instructor-reviews__item:first-child {
	padding-block-start: 0;
}

.mc-lp .mc-instructor-reviews__empty {
	margin: 0;
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
}

/*
 * Fallback review card — only rendered when the shared `review-item` part is
 * unavailable. Deliberately left at single-class specificity so the shared
 * component in reviews.css always wins when both are present.
 */
.mc-review__head {
	display: flex;
	align-items: center;
	gap: var(--mc-space-3);
	margin-block-end: var(--mc-space-2);
}

.mc-review__avatar img {
	width: 40px;
	height: 40px;
	border-radius: var(--mc-radius-full);
	object-fit: cover;
}

.mc-review__meta {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-1);
	min-width: 0;
}

.mc-review__author {
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-semibold);
}

.mc-review__date {
	color: var(--mc-color-text-subtle);
	font-size: var(--mc-font-size-xs);
	line-height: var(--mc-leading-xs);
}

.mc-review__title {
	margin-block-end: var(--mc-space-1);
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-semibold);
}

.mc-review__body {
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-base);
}

.mc-review__body p:last-child {
	margin-block-end: 0;
}

/* ==========================================================================
   9. "Show more" controls
   ========================================================================== */

.mc-lp .mc-instructor-courses__more,
.mc-lp .mc-instructor-reviews__more {
	display: flex;
	justify-content: center;
	margin-block-start: var(--mc-space-6);
}

/*
 * Figma 4595:32616 / 4595:32758 — 155 x 36, transparent, no border, label
 * #0f3176 (= --mc-color-primary) at 16/24 semibold. `.mc-btn` is 48px tall and
 * bold by default, so the height and weight are pinned here; see the report note
 * about aligning `.mc-btn` / `.mc-btn--sm` in base.css.
 *
 * The prefix matters: this is an <a>, so `.mc-lp a:hover` (0,2,1) would otherwise
 * beat an unprefixed `.mc-instructor-more:hover` (0,2,0).
 */
.mc-lp .mc-instructor-more {
	min-block-size: var(--mc-btn-height-sm);
	padding-block: var(--mc-space-1-5);
	color: var(--mc-color-primary);
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-semibold);
}

.mc-lp .mc-instructor-more:hover,
.mc-lp .mc-instructor-more:focus-visible {
	background: var(--mc-color-surface-alt);
	color: var(--mc-color-primary-hover);
}

.mc-lp .mc-instructor-more__icon {
	width: var(--mc-icon-size-sm);
	height: var(--mc-icon-size-sm);
}

/* ==========================================================================
   LearnPress leftovers
   `SingleInstructorTemplate::sections()` enqueues `lp-instructor`, whose rules
   target wrappers this module no longer emits. These two only exist because the
   "no courses" notice still comes from LearnPress.
   ========================================================================== */

.mc-lp-instructor .learn-press-message {
	margin: 0;
	padding: var(--mc-space-4);
	border-radius: var(--mc-radius-md);
	background: var(--mc-color-surface);
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
}

.mc-lp-instructor .lp-single-instructor__info__cover-image {
	display: none;
}