/*
 * MC LearnPress UI — reviews
 * Handle: mc-lp-reviews  (depends on mc-lp-base → mc-lp-tokens)
 * Figma: 3705:28942 (single course → Reviews tab)
 *
 * Contents
 *   1. Tab shell
 *   2. Heading row + sort/filter controls
 *   3. Summary + histogram          .mc-histogram
 *   4. Review grid                  .mc-reviews__list / .mc-review
 *   5. Load more + states
 *   6. Submit panel                 .mc-review-form / .mc-rating-picker
 *   7. Neutralised addon styles
 *
 * RULES
 *   · Logical properties only. Zero `left` / `right` in this file.
 *   · Variables only — no raw hex, no raw px for spacing or type.
 *   · Breakpoints hard-coded: 640 / 768 / 1024 / 1280 (tokens.css cannot be
 *     referenced inside @media).
 *   · Mobile first.
 *
 * Figma geometry this file reproduces
 *   content column        942
 *   heading row           36 tall, title inline-start, controls inline-end
 *   summary block         447 × 140, sits in the inline-start half
 *   histogram bar         291 × 8, rounded full, 8px between rows
 *   review card           459 × 165, 24px grid gap, 2 columns
 *   submit panel          942 × 300, 32px padding, input 498 × 48, button 278 × 40
 */

/* ==========================================================================
   1. Tab shell
   ========================================================================== */

.mc-lp .mc-reviews {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-6);
	color: var(--mc-color-text);
}

/* LearnPress' own tab panel padding fights the design; reset inside our block. */
.mc-lp .course-tab-panel-reviews > .mc-reviews {
	margin-block: var(--mc-space-2);
}

/* ==========================================================================
   2. Heading row + controls
   ========================================================================== */

.mc-lp .mc-reviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mc-space-3);
}

.mc-lp .mc-reviews__headline {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--mc-space-2);
	min-width: 0;
}

.mc-lp .mc-reviews__title {
	margin: 0;
	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);
}

.mc-lp .mc-reviews__score {
	display: inline-flex;
	align-items: center;
	gap: var(--mc-space-1);
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-star);
}

.mc-lp .mc-reviews__score-icon {
	color: var(--mc-color-accent);
}

.mc-lp .mc-reviews__count {
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-regular);
	color: var(--mc-color-text-muted);
}

/* --- 2.1 Sort / filter pills --------------------------------------------- */

.mc-lp .mc-reviews__controls {
	display: flex;
	align-items: center;
	gap: var(--mc-space-2);
	flex-wrap: wrap;
}

.mc-lp .mc-reviews__control {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--mc-space-1-5);
	min-height: var(--mc-tap-target);
	padding-block: 0;
	padding-inline: var(--mc-space-3-5);
	border: 1px solid var(--mc-color-border);
	border-radius: var(--mc-radius-full);
	background: var(--mc-color-bg);
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-medium);
	transition: border-color var(--mc-transition-fast), color var(--mc-transition-fast);
}

.mc-lp .mc-reviews__control:hover {
	border-color: var(--mc-color-border-strong);
	color: var(--mc-color-text);
}

/* The real control is an invisible <select> stretched over the pill, so the
   focus ring has to be painted on the pill itself. */
.mc-lp .mc-reviews__control:focus-within {
	border-color: var(--mc-color-primary);
	color: var(--mc-color-text);
	outline: 2px solid var(--mc-color-focus);
	outline-offset: 2px;
}

.mc-lp .mc-reviews__control--active {
	border-color: var(--mc-color-primary);
	color: var(--mc-color-primary);
}

.mc-lp .mc-reviews__control-icon,
.mc-lp .mc-reviews__control-chevron {
	flex: none;
	color: currentColor;
	pointer-events: none;
}

.mc-lp .mc-reviews__control-prefix {
	flex: none;
	pointer-events: none;
}

/* The native select stays the interactive element — keyboard, mobile pickers and
   form semantics all come free. It is stretched over the whole pill so a click
   anywhere opens it, while the icons above stay decorative. */
.mc-lp .mc-reviews__select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--mc-radius-full);
	background: transparent;
	color: transparent;
	font: inherit;
	opacity: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mc-lp .mc-reviews__select:focus-visible {
	outline: none;
}

/* Native option lists render in the UA colour scheme, not ours. */
.mc-lp .mc-reviews__select option {
	color: var(--mc-color-text);
	background: var(--mc-color-bg);
}

@media (min-width: 768px) {
	.mc-lp .mc-reviews__control {
		min-height: 36px;
	}
}

/* ==========================================================================
   3. Summary + histogram
   ========================================================================== */

.mc-lp .mc-reviews__summary {
	width: 100%;
}

@media (min-width: 768px) {
	/* Figma: 447 of the 942 content column, sitting in the inline-start half. */
	.mc-lp .mc-reviews__summary {
		max-width: 480px;
	}
}

.mc-lp .mc-histogram {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-4);
}

@media (min-width: 640px) {
	.mc-lp .mc-histogram {
		flex-direction: row;
		align-items: center;
		gap: var(--mc-space-6);
	}
}

/* --- 3.1 Big average ----------------------------------------------------- */

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

.mc-lp .mc-histogram__average {
	display: flex;
	align-items: center;
	gap: var(--mc-space-2);
	margin: 0;
}

.mc-lp .mc-histogram__value {
	font-size: clamp(var(--mc-font-size-4xl), 6vw, 56px);
	line-height: 1.1;
	font-weight: var(--mc-font-weight-extrabold);
	color: var(--mc-color-text);
}

.mc-lp .mc-histogram__star-icon {
	width: 28px;
	height: 28px;
	flex: none;
	color: var(--mc-color-accent);
}

.mc-lp .mc-histogram__total {
	margin: 0;
	font-size: var(--mc-font-size-lg);
	line-height: var(--mc-leading-lg);
	font-weight: var(--mc-font-weight-medium);
	color: var(--mc-color-text-muted);
}

/* --- 3.2 Bars ------------------------------------------------------------ */

.mc-lp .mc-histogram__bars {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-2);
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.mc-lp .mc-histogram__row {
	display: flex;
	align-items: center;
	gap: var(--mc-space-2);
	min-height: var(--mc-space-5);
}

.mc-lp .mc-histogram__star {
	flex: none;
	min-width: var(--mc-space-3);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-medium);
	color: var(--mc-color-text-muted);
	text-align: center;
}

.mc-lp .mc-histogram__track {
	flex: 1 1 auto;
	min-width: 0;
	height: 8px;
	background: var(--mc-color-slate-200);
}

.mc-lp .mc-histogram__track .mc-progress__bar {
	background: var(--mc-color-accent);
}

.mc-lp .mc-histogram__count {
	flex: none;
	min-width: 3ch;
	font-size: var(--mc-font-size-xs);
	line-height: var(--mc-leading-xs);
	font-weight: var(--mc-font-weight-medium);
	color: var(--mc-color-text-subtle);
	text-align: end;
	font-variant-numeric: tabular-nums;
}

.mc-lp .mc-histogram__empty {
	flex: 1 1 auto;
	margin: 0;
	padding-block: var(--mc-space-4);
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

/* ==========================================================================
   4. Review grid
   ========================================================================== */

.mc-lp .mc-reviews__body {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-5);
}

.mc-lp .mc-reviews__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mc-space-6);
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

/* Plan §7.1: reviews grid is 2 columns from md up, 1 below. */
@media (min-width: 768px) {
	.mc-lp .mc-reviews__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mc-lp .mc-review {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-3);
	padding: var(--mc-space-4);
	border: 1px solid var(--mc-color-border);
	border-radius: var(--mc-radius-lg);
	background: var(--mc-color-bg);
	box-shadow: var(--mc-shadow-sm);
	transition: box-shadow var(--mc-transition), border-color var(--mc-transition);
}

.mc-lp .mc-review:hover,
.mc-lp .mc-review:focus-within {
	border-color: var(--mc-color-border-strong);
	box-shadow: var(--mc-shadow-md);
}

.mc-lp .mc-review[hidden] {
	display: none;
}

.mc-lp .mc-review__head {
	display: flex;
	align-items: center;
	gap: var(--mc-space-3);
}

.mc-lp .mc-review__avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--mc-radius-full);
	overflow: hidden;
	background: var(--mc-color-surface);
	color: var(--mc-color-text-subtle);
}

.mc-lp .mc-review__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.mc-lp .mc-review__avatar-fallback {
	width: var(--mc-icon-size-lg);
	height: var(--mc-icon-size-lg);
}

.mc-lp .mc-review__ident {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mc-space-1);
	min-width: 0;
}

.mc-lp .mc-review__stars {
	gap: 0;
}

.mc-lp .mc-review__stars .mc-stars__track,
.mc-lp .mc-review__stars .mc-stars__fill {
	gap: 1px;
}

.mc-lp .mc-review__name {
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-semibold);
	color: var(--mc-color-text);
	overflow-wrap: anywhere;
}

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

.mc-lp .mc-review__title {
	margin: 0;
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-semibold);
	color: var(--mc-color-text);
}

.mc-lp .mc-review__text {
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-body);
	color: var(--mc-color-text-muted);
	overflow-wrap: anywhere;
}

.mc-lp .mc-review__text p {
	margin: 0 0 var(--mc-space-2);
}

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

/* Clamping is presentational only — the full text stays in the DOM for
   assistive technology, in-page search and crawlers. */
.mc-lp .mc-review__text--clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--mc-review-lines, 3);
	line-clamp: var(--mc-review-lines, 3);
	overflow: hidden;
}

/* ==========================================================================
   5. Load more + states
   ========================================================================== */

.mc-lp .mc-reviews__more {
	display: flex;
	justify-content: center;
}

.mc-lp .mc-reviews__more-btn {
	gap: var(--mc-space-2);
	min-height: var(--mc-tap-target);
	padding-inline: var(--mc-space-4);
	background: transparent;
	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-reviews__more-btn:hover,
.mc-lp .mc-reviews__more-btn:focus-visible {
	background: var(--mc-color-surface);
	color: var(--mc-color-primary-hover);
}

.mc-lp .mc-reviews__more-icon {
	color: currentColor;
	transition: transform var(--mc-transition-fast);
}

.mc-lp .mc-reviews__more-btn.is-loading {
	pointer-events: none;
	opacity: 0.6;
}

.mc-lp .mc-reviews__more-btn.is-loading .mc-reviews__more-icon {
	animation: mc-reviews-spin 900ms linear infinite;
}

@keyframes mc-reviews-spin {
	to {
		transform: rotate(360deg);
	}
}

.mc-lp .mc-reviews__empty,
.mc-lp .mc-reviews__no-match {
	margin: 0;
	padding-block: var(--mc-space-6);
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-base);
	text-align: center;
}

.mc-lp .mc-reviews__no-match[hidden],
.mc-lp .mc-reviews__scope-note[hidden] {
	display: none;
}

/* Honesty note: revealed by reviews.js the moment sorting or filtering stops
   being the default, because both are client-side over the loaded pages only. */
.mc-lp .mc-reviews__scope-note {
	display: flex;
	align-items: center;
	gap: var(--mc-space-2);
	margin: 0;
	padding-block: var(--mc-space-2);
	padding-inline: var(--mc-space-3);
	border-radius: var(--mc-radius-md);
	background: var(--mc-color-surface);
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-xs);
	line-height: var(--mc-leading-xs);
}

/* ==========================================================================
   6. Submit panel
   ========================================================================== */

.mc-lp .mc-review-form {
	padding: var(--mc-space-6);
	border: 1px solid var(--mc-color-border);
	border-radius: var(--mc-radius-lg);
	background: var(--mc-color-surface);
}

@media (min-width: 768px) {
	.mc-lp .mc-review-form {
		padding: var(--mc-space-8);
	}
}

.mc-lp .mc-review-form__form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mc-space-4);
	margin: 0;
}

.mc-lp .mc-review-form__title {
	margin: 0;
	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);
	text-align: center;
}

.mc-lp .mc-review-form__field {
	width: 100%;
	max-width: 498px;
}

.mc-lp .mc-review-form__input {
	width: 100%;
	min-height: 48px;
	border-color: var(--mc-color-control-border);
	border-radius: var(--mc-radius-md);
	background: var(--mc-color-bg);
	text-align: start;
}

.mc-lp .mc-review-form__actions {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0;
}

.mc-lp .mc-review-form__submit {
	min-width: min(278px, 100%);
	min-height: 40px;
	padding-block: var(--mc-space-2);
	border-radius: var(--mc-radius-full);
	background: var(--mc-color-primary);
	color: var(--mc-color-text-invert);
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-bold);
}

.mc-lp .mc-review-form__submit:hover,
.mc-lp .mc-review-form__submit:focus-visible {
	background: var(--mc-color-primary-hover);
	color: var(--mc-color-text-invert);
}

.mc-lp .mc-review-form__submit.loading,
.mc-lp .mc-review-form__submit.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.mc-lp .mc-review-form__error {
	margin: 0;
	min-height: var(--mc-leading-sm);
	color: var(--mc-color-danger);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	text-align: center;
}

.mc-lp .mc-review-form__error:empty {
	display: none;
}

/* --- 6.1 Message state --------------------------------------------------- */

.mc-lp .mc-review-form--message {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mc-space-3);
	text-align: center;
}

.mc-lp .mc-review-form__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--mc-space-2);
	margin: 0;
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

.mc-lp .mc-review-form__note-icon {
	flex: none;
	color: var(--mc-color-text-subtle);
}

/* --- 6.2 Star picker ----------------------------------------------------- */

.mc-lp .mc-rating-picker {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/*
 * Source order is 5 → 1, so `input:checked ~ label` can reach every lower star.
 * `row-reverse` then places star 1 at the end of the reading direction in both
 * LTR and RTL, matching the Figma (rightmost star is 1 in the RTL comp).
 */
.mc-lp .mc-rating-picker__stars {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
	gap: 0;
}

.mc-lp .mc-rating-picker__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.mc-lp .mc-rating-picker__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--mc-tap-target);
	padding-block: var(--mc-space-2);
	padding-inline: 3px;
	color: var(--mc-color-star-empty);
	cursor: pointer;
	transition: color var(--mc-transition-fast), transform var(--mc-transition-fast);
}

.mc-lp .mc-rating-picker__icon {
	width: var(--mc-icon-size-lg);
	height: var(--mc-icon-size-lg);
	fill: currentColor;
	pointer-events: none;
}

/* Chosen value: the checked input plus every later sibling (= lower stars). */
.mc-lp .mc-rating-picker__input:checked + .mc-rating-picker__label,
.mc-lp .mc-rating-picker__input:checked ~ .mc-rating-picker__label {
	color: var(--mc-color-star);
}

/* Hover / pointer preview: the hovered star and every lower one. */
.mc-lp .mc-rating-picker__stars:hover .mc-rating-picker__label {
	color: var(--mc-color-star-empty);
}

.mc-lp .mc-rating-picker__label:hover,
.mc-lp .mc-rating-picker__label:hover ~ .mc-rating-picker__label {
	color: var(--mc-color-star);
	transform: scale(1.05);
}

/* Keyboard focus has to be visible on the label, since the input is hidden. */
.mc-lp .mc-rating-picker__input:focus-visible + .mc-rating-picker__label {
	outline: 2px solid var(--mc-color-focus);
	outline-offset: 2px;
	border-radius: var(--mc-radius-sm);
}

.mc-lp .mc-rating-picker.is-invalid .mc-rating-picker__label {
	color: var(--mc-color-danger);
}

/* ==========================================================================
   7. Neutralised addon chrome
   Anything the course-review stylesheet might still paint inside our block.
   Scoped tightly so a theme rendering the addon elsewhere is untouched.
   ========================================================================== */

.mc-lp .mc-reviews .loading-first,
.mc-lp .mc-reviews .lp-skeleton-animation {
	display: none;
}

.mc-lp .mc-reviews .learn-press-message {
	margin-block: 0;
}