/**
 * Vitrine de Cursos para Moodle front-end styles (Fluent 2).
 */

.mv-page {
	padding: var(--mv-space-32) 0 var(--mv-space-32);
	background: var(--mv-color-background-2);
	color: var(--mv-color-foreground-1);
	font-family: var(--mv-font-family);
	font-size: var(--mv-font-size-300);
	line-height: var(--mv-line-height-300);
}

.mv-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--mv-space-20);
	box-sizing: border-box;
}

/* Breadcrumb */
.mv-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mv-space-6);
	margin-bottom: var(--mv-space-16);
	font-size: var(--mv-font-size-200);
	color: var(--mv-color-foreground-3);
}

.mv-breadcrumb a {
	color: var(--mv-color-brand-foreground);
	text-decoration: none;
}

.mv-breadcrumb a:hover {
	color: var(--mv-color-brand-foreground-hover);
	text-decoration: underline;
}

.mv-breadcrumb__sep {
	color: var(--mv-color-foreground-disabled);
}

/* Page header */
.mv-page__header {
	margin-bottom: var(--mv-space-24);
}

.mv-page__title {
	margin: 0 0 var(--mv-space-8);
	font-size: var(--mv-font-size-700);
	line-height: var(--mv-line-height-600);
	font-weight: var(--mv-font-weight-semibold);
	color: var(--mv-color-foreground-1);
}

.mv-page__description {
	max-width: 72ch;
	color: var(--mv-color-foreground-2);
}

.mv-prose {
	color: var(--mv-color-foreground-2);
}

.mv-prose p {
	margin: 0 0 var(--mv-space-12);
}

.mv-muted {
	color: var(--mv-color-foreground-4);
}

/* Toolbar */
.mv-toolbar {
	margin-bottom: var(--mv-space-16);
}

.mv-field {
	display: block;
	max-width: 360px;
}

.mv-input {
	width: 100%;
	box-sizing: border-box;
	padding: var(--mv-space-8) var(--mv-space-12);
	font-family: inherit;
	font-size: var(--mv-font-size-300);
	color: var(--mv-color-foreground-1);
	background: var(--mv-color-background-1);
	border: 1px solid var(--mv-color-stroke-1);
	border-radius: var(--mv-radius-medium);
	transition: border-color var(--mv-duration-fast) var(--mv-curve-easy-ease);
}

.mv-input:focus {
	outline: none;
	border-color: var(--mv-color-brand-stroke);
	box-shadow: 0 0 0 1px var(--mv-color-brand-stroke);
}

/* Grid */
.mv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--mv-space-16);
}

/* Card */
.mv-card {
	display: flex;
	flex-direction: column;
	background: var(--mv-color-background-1);
	border: 1px solid var(--mv-color-stroke-2);
	border-radius: var(--mv-radius-xlarge);
	box-shadow: var(--mv-shadow-2);
	overflow: hidden;
	transition: box-shadow var(--mv-duration-normal) var(--mv-curve-easy-ease),
		transform var(--mv-duration-normal) var(--mv-curve-easy-ease);
}

.mv-card__media {
	display: block;
	width: 100%;
	height: 96px;
}

/* Cards hidden by the catalog filters must stay hidden (flex would override [hidden]). */
.mv-card[hidden],
.mv-pager[hidden],
.mv-chip[hidden] {
	display: none;
}

.mv-card:hover {
	box-shadow: var(--mv-shadow-8);
	transform: translateY(-2px);
}

.mv-card__button {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mv-space-6);
	flex: 1;
	width: 100%;
	margin: 0;
	padding: var(--mv-space-20);
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	color: inherit;
}

.mv-card__title {
	font-size: var(--mv-font-size-400);
	font-weight: var(--mv-font-weight-semibold);
	line-height: var(--mv-line-height-400);
	color: var(--mv-color-foreground-1);
}

.mv-card__shortname {
	font-size: var(--mv-font-size-200);
	color: var(--mv-color-foreground-4);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.mv-card__price {
	margin-top: auto;
	font-size: var(--mv-font-size-500);
	font-weight: var(--mv-font-weight-semibold);
	color: var(--mv-color-brand-foreground);
}

.mv-card__price--muted {
	font-size: var(--mv-font-size-300);
	color: var(--mv-color-foreground-4);
	font-weight: var(--mv-font-weight-medium);
}

.mv-card__cta {
	margin-top: var(--mv-space-8);
	font-size: var(--mv-font-size-200);
	font-weight: var(--mv-font-weight-semibold);
	color: var(--mv-color-brand-foreground);
}

.mv-card__button:focus-visible {
	outline: 2px solid var(--mv-color-brand-stroke);
	outline-offset: -2px;
}

/* Buttons */
.mv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mv-space-6);
	padding: var(--mv-space-8) var(--mv-space-16);
	font-family: inherit;
	font-size: var(--mv-font-size-300);
	font-weight: var(--mv-font-weight-semibold);
	line-height: var(--mv-line-height-300);
	border-radius: var(--mv-radius-medium);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--mv-duration-fast) var(--mv-curve-easy-ease);
}

.mv-btn--primary {
	background: var(--mv-color-brand-background);
	color: #ffffff;
}

.mv-btn--primary:hover {
	background: var(--mv-color-brand-background-hover);
	color: #ffffff;
}

.mv-btn--subtle {
	background: var(--mv-color-background-1);
	color: var(--mv-color-foreground-1);
	border-color: var(--mv-color-stroke-1);
}

.mv-btn--subtle:hover {
	background: var(--mv-color-background-3);
	color: var(--mv-color-foreground-1);
}

/* Badge */
.mv-badge {
	display: inline-block;
	margin-left: var(--mv-space-6);
	padding: 0 var(--mv-space-8);
	font-size: var(--mv-font-size-100);
	font-weight: var(--mv-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--mv-color-success);
	background: var(--mv-color-background-3);
	border-radius: var(--mv-radius-circular);
}

/* Price list */
.mv-price-list {
	list-style: none;
	margin: var(--mv-space-16) 0;
	padding: 0;
	border: 1px solid var(--mv-color-stroke-2);
	border-radius: var(--mv-radius-large);
	overflow: hidden;
}

.mv-price-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mv-space-12);
	padding: var(--mv-space-12) var(--mv-space-16);
	background: var(--mv-color-background-1);
	border-bottom: 1px solid var(--mv-color-stroke-2);
}

.mv-price-list__item:last-child {
	border-bottom: 0;
}

.mv-price-list__label {
	color: var(--mv-color-foreground-2);
}

.mv-price-list__value {
	font-weight: var(--mv-font-weight-semibold);
	color: var(--mv-color-foreground-1);
}

/* Drawer */
.mv-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	justify-content: flex-end;
}

.mv-drawer[hidden] {
	display: none;
}

.mv-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	animation: mv-fade var(--mv-duration-normal) var(--mv-curve-easy-ease);
}

.mv-drawer__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(480px, 100%);
	height: 100%;
	background: var(--mv-color-background-1);
	box-shadow: var(--mv-shadow-16);
	animation: mv-slide-in var(--mv-duration-normal) var(--mv-curve-easy-ease);
}

.mv-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mv-space-12);
	padding: var(--mv-space-16) var(--mv-space-20);
	border-bottom: 1px solid var(--mv-color-stroke-2);
}

.mv-drawer__title {
	margin: 0;
	font-size: var(--mv-font-size-500);
	font-weight: var(--mv-font-weight-semibold);
}

.mv-drawer__body {
	padding: var(--mv-space-20);
	overflow-y: auto;
}

.mv-drawer__course-title {
	margin: 0 0 var(--mv-space-12);
	font-size: var(--mv-font-size-600);
	font-weight: var(--mv-font-weight-semibold);
}

.mv-drawer__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mv-space-8);
	margin-top: var(--mv-space-20);
}

.mv-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: var(--mv-font-size-500);
	line-height: 1;
	color: var(--mv-color-foreground-2);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--mv-radius-medium);
	cursor: pointer;
}

.mv-icon-btn:hover {
	background: var(--mv-color-background-3);
}

.mv-empty {
	color: var(--mv-color-foreground-4);
}

/* Course single */
.mv-course {
	max-width: 72ch;
	background: var(--mv-color-background-1);
	border: 1px solid var(--mv-color-stroke-2);
	border-radius: var(--mv-radius-xlarge);
	box-shadow: var(--mv-shadow-2);
	padding: var(--mv-space-24);
}

.mv-course__header {
	margin-bottom: var(--mv-space-16);
}

.mv-course__price {
	font-size: var(--mv-font-size-600);
	font-weight: var(--mv-font-weight-semibold);
	color: var(--mv-color-brand-foreground);
}

@keyframes mv-slide-in {
	from {
		transform: translateX(24px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes mv-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mv-drawer__scrim,
	.mv-drawer__panel {
		animation: none;
	}
	.mv-card {
		transition: none;
	}
}

/* ===== Catalog toolbar ===== */
.mv-toolbar {
	display: flex;
	flex-direction: column;
	gap: var(--mv-space-12);
	margin-bottom: var(--mv-space-20);
}

.mv-toolbar__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mv-space-12);
	align-items: center;
}

.mv-field--search {
	flex: 1 1 260px;
	max-width: 420px;
}

.mv-field--sort {
	flex: 0 0 auto;
}

.mv-field--sort .mv-input {
	min-width: 180px;
}

.mv-facets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mv-space-8);
}

.mv-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--mv-space-6);
	padding: var(--mv-space-4) var(--mv-space-12);
	font-family: inherit;
	font-size: var(--mv-font-size-200);
	font-weight: var(--mv-font-weight-semibold);
	color: var(--mv-color-foreground-2);
	background: var(--mv-color-background-1);
	border: 1px solid var(--mv-color-stroke-1);
	border-radius: var(--mv-radius-circular);
	cursor: pointer;
	transition: background-color var(--mv-duration-fast) var(--mv-curve-easy-ease);
}

.mv-chip:hover {
	background: var(--mv-color-background-3);
}

.mv-chip.is-active {
	color: #ffffff;
	background: var(--mv-color-brand-background);
	border-color: var(--mv-color-brand-background);
}

.mv-chip__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	padding: 0 var(--mv-space-6);
	font-size: var(--mv-font-size-100);
	background: var(--mv-color-background-4);
	color: var(--mv-color-foreground-2);
	border-radius: var(--mv-radius-circular);
}

.mv-chip.is-active .mv-chip__count {
	background: rgba(255, 255, 255, 0.28);
	color: #ffffff;
}

.mv-count {
	margin: 0;
	font-size: var(--mv-font-size-200);
	color: var(--mv-color-foreground-3);
}

.mv-vitrine.is-busy .mv-grid {
	opacity: 0.55;
	transition: opacity var(--mv-duration-fast) var(--mv-curve-easy-ease);
}

/* ===== Pagination ===== */
.mv-pager {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mv-space-4);
	justify-content: center;
	margin-top: var(--mv-space-24);
}

.mv-pager__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--mv-space-10);
	font-size: var(--mv-font-size-300);
	font-weight: var(--mv-font-weight-semibold);
	color: var(--mv-color-foreground-2);
	background: var(--mv-color-background-1);
	border: 1px solid var(--mv-color-stroke-1);
	border-radius: var(--mv-radius-medium);
	text-decoration: none;
	cursor: pointer;
}

.mv-pager__link:hover {
	background: var(--mv-color-background-3);
	color: var(--mv-color-foreground-1);
}

.mv-pager__link.is-active {
	color: #ffffff;
	background: var(--mv-color-brand-background);
	border-color: var(--mv-color-brand-background);
}

.mv-pager__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	color: var(--mv-color-foreground-4);
}

/* ===== Card media patterns (pure CSS) ===== */
.mv-pattern {
	--mv-hue-a: var(--mv-hue, 210);
	background-color: hsl(var(--mv-hue-a) 62% 52%);
}

.mv-palette--fluent {
	--mv-hue-a: calc(190 + (var(--mv-hue, 0) * 0.1944));
}

.mv-palette--warm {
	--mv-hue-a: calc(8 + (var(--mv-hue, 0) * 0.11));
}

.mv-palette--cool {
	--mv-hue-a: calc(150 + (var(--mv-hue, 0) * 0.19));
}

.mv-palette--neutral {
	--mv-hue-a: calc(210 + (var(--mv-hue, 0) * 0.05));
}

.mv-pattern--solid {
	background-image: none;
}

.mv-pattern--gradient {
	background-image: linear-gradient(135deg, hsl(var(--mv-hue-a) 70% 56%), hsl(calc(var(--mv-hue-a) + 40) 68% 40%));
}

.mv-pattern--mesh {
	background-image:
		radial-gradient(circle at 20% 30%, hsl(calc(var(--mv-hue-a) + 30) 75% 60% / 0.9), transparent 55%),
		radial-gradient(circle at 80% 20%, hsl(var(--mv-hue-a) 75% 55% / 0.9), transparent 50%),
		radial-gradient(circle at 60% 85%, hsl(calc(var(--mv-hue-a) - 30) 70% 45% / 0.9), transparent 55%);
}

.mv-pattern--dots {
	background-color: hsl(var(--mv-hue-a) 60% 50%);
	background-image: radial-gradient(hsl(0 0% 100% / 0.35) 1.5px, transparent 1.6px);
	background-size: 12px 12px;
}

.mv-pattern--waves {
	background-image: repeating-linear-gradient(
		135deg,
		hsl(var(--mv-hue-a) 65% 52%) 0 12px,
		hsl(calc(var(--mv-hue-a) + 18) 65% 44%) 12px 24px
	);
}

.mv-pattern--grid {
	background-color: hsl(var(--mv-hue-a) 60% 48%);
	background-image:
		repeating-linear-gradient(0deg, hsl(0 0% 100% / 0.18) 0 1px, transparent 1px 14px),
		repeating-linear-gradient(90deg, hsl(0 0% 100% / 0.18) 0 1px, transparent 1px 14px);
}

@media screen and (max-width: 600px) {
	.mv-grid {
		grid-template-columns: 1fr;
	}
	.mv-page__title {
		font-size: var(--mv-font-size-600);
	}
	.mv-field--search {
		max-width: none;
		flex-basis: 100%;
	}
}

/* ===== Blocks (shortcodes) ===== */
.mv-block {
	margin: 0 0 var(--mv-space-32);
}

.mv-block__title {
	margin: 0 0 var(--mv-space-16);
	font-size: var(--mv-font-size-600);
	line-height: var(--mv-line-height-600);
	font-weight: var(--mv-font-weight-semibold);
	color: var(--mv-color-foreground-1);
}

/* Static grid column modifiers */
.mv-grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.mv-grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.mv-grid--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* ===== Carousel ===== */
.mv-carousel {
	position: relative;
}

.mv-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, calc((100% - (var(--mv-per-view, 3) - 1) * var(--mv-space-16)) / var(--mv-per-view, 3)));
	gap: var(--mv-space-16);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--mv-space-4);
	padding-bottom: var(--mv-space-8);
	-webkit-overflow-scrolling: touch;
}

.mv-carousel__track > .mv-card {
	scroll-snap-align: start;
}

.mv-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 24px;
	line-height: 1;
	color: var(--mv-color-foreground-1);
	background: var(--mv-color-background-1);
	border: 1px solid var(--mv-color-stroke-1);
	border-radius: var(--mv-radius-circular);
	box-shadow: var(--mv-shadow-8);
	cursor: pointer;
	z-index: 2;
	transition: opacity var(--mv-duration-fast) var(--mv-curve-easy-ease);
}

.mv-carousel__nav:hover {
	background: var(--mv-color-background-3);
}

.mv-carousel__nav:disabled {
	opacity: 0;
	pointer-events: none;
}

.mv-carousel__nav--prev {
	left: calc(-1 * var(--mv-space-8));
}

.mv-carousel__nav--next {
	right: calc(-1 * var(--mv-space-8));
}

/* ===== Categories block ===== */
.mv-cats {
	display: grid;
	gap: var(--mv-space-12);
}

.mv-cat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mv-space-8);
	padding: var(--mv-space-12) var(--mv-space-16);
	background: var(--mv-color-background-1);
	border: 1px solid var(--mv-color-stroke-2);
	border-radius: var(--mv-radius-large);
	box-shadow: var(--mv-shadow-2);
	text-decoration: none;
	color: var(--mv-color-foreground-1);
	transition: box-shadow var(--mv-duration-fast) var(--mv-curve-easy-ease),
		border-color var(--mv-duration-fast) var(--mv-curve-easy-ease);
}

a.mv-cat:hover {
	box-shadow: var(--mv-shadow-8);
	border-color: var(--mv-color-brand-stroke);
}

.mv-cat__name {
	font-weight: var(--mv-font-weight-semibold);
}

.mv-cat__count {
	margin-left: auto;
	padding: 0 var(--mv-space-8);
	font-size: var(--mv-font-size-200);
	color: var(--mv-color-foreground-3);
	background: var(--mv-color-background-3);
	border-radius: var(--mv-radius-circular);
}

.mv-cat__desc {
	flex-basis: 100%;
	font-size: var(--mv-font-size-200);
	color: var(--mv-color-foreground-3);
}

.mv-cats--chips {
	display: flex;
	flex-wrap: wrap;
}

.mv-cats--chips .mv-cat {
	padding: var(--mv-space-6) var(--mv-space-16);
	border-radius: var(--mv-radius-circular);
}

.mv-cats--list {
	display: flex;
	flex-direction: column;
}

@media screen and (max-width: 900px) {
	.mv-carousel__track {
		grid-auto-columns: minmax(240px, 45%);
	}
	.mv-grid--cols-3,
	.mv-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.mv-carousel__track {
		grid-auto-columns: minmax(220px, 80%);
	}
	.mv-grid--cols-2,
	.mv-grid--cols-3,
	.mv-grid--cols-4 {
		grid-template-columns: 1fr;
	}
}