/* ===================================================
   Mokaab Core — Teachers & Honors Styles
   فایل: assets/css/mk-teachers-honors.css
   =================================================== */

/* ============================================================
   SECTION SHARED
   ============================================================ */

.mk-section-teachers,
.mk-section-honors {
	padding: var(--mk-space-20) 0;
	position: relative;
}

.mk-section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mk-space-4);
	margin-bottom: var(--mk-space-10);
	flex-wrap: wrap;
}

.mk-section-header__text {}

.mk-section-eyebrow {
	display: inline-block;
	font-size: var(--mk-font-size-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mk-primary);
	margin-bottom: var(--mk-space-2);
}

.mk-section-heading {
	font-size: clamp( 1.6rem, 4vw, 2.4rem );
	font-weight: 800;
	color: var(--mk-text);
	margin: 0;
	line-height: 1.2;
}

/* ============================================================
   FILTER BAR
   ============================================================ */

#mk-teachers-filter {
	display: flex;
	gap: var(--mk-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.mk-filter-btn {
	padding: .38rem .9rem;
	border-radius: var(--mk-radius-full);
	border: 1px solid var(--mk-border-strong);
	background: transparent;
	color: var(--mk-text-muted);
	font-family: var(--mk-font-body);
	font-size: var(--mk-font-size-sm);
	cursor: pointer;
	transition:
		background var(--mk-transition-fast),
		color      var(--mk-transition-fast),
		border-color var(--mk-transition-fast);
	white-space: nowrap;
}

.mk-filter-btn:hover {
	background: var(--mk-primary-muted);
	border-color: var(--mk-primary);
	color: var(--mk-primary);
}

.mk-filter-btn--active {
	background: var(--mk-primary);
	border-color: var(--mk-primary);
	color: #0D0D0F;
	font-weight: 700;
}

/* ============================================================
   FEATURED TEACHER
   ============================================================ */

#mk-teacher-featured {
	margin-bottom: var(--mk-space-8);
	border-radius: var(--mk-radius-xl);
	background: var(--mk-glass-bg);
	backdrop-filter: blur( var(--mk-glass-blur) );
	-webkit-backdrop-filter: blur( var(--mk-glass-blur) );
	border: 1px solid var(--mk-glass-border);
	box-shadow: var(--mk-glass-shadow);
	overflow: hidden;
}

.mk-teacher-featured__inner {
	display: grid;
	grid-template-columns: 340px 1fr;
	min-height: 400px;
}

@media ( max-width: 768px ) {
	.mk-teacher-featured__inner {
		grid-template-columns: 1fr;
	}
}

/* ── Media ─────────────────────────────────────── */

.mk-teacher-featured__media {
	position: relative;
	overflow: hidden;
	background: var(--mk-bg-elevated);
}

.mk-teacher-featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier( .16, 1, .3, 1 );
}

#mk-teacher-featured:hover .mk-teacher-featured__media img {
	transform: scale( 1.04 );
}

.mk-teacher-featured__placeholder {
	width: 100%;
	height: 100%;
	min-height: 300px;
	background: linear-gradient( 135deg, var(--mk-bg-elevated) 0%, var(--mk-bg-card) 100% );
}

.mk-teacher-featured__glow {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to left,
		var(--mk-bg-card) 0%,
		transparent 40%
	);
	pointer-events: none;
}

@media ( max-width: 768px ) {
	.mk-teacher-featured__glow {
		background: linear-gradient(
			to top,
			var(--mk-bg-card) 0%,
			transparent 50%
		);
	}
	.mk-teacher-featured__media {
		min-height: 280px;
	}
}

/* ── Body ───────────────────────────────────────── */

.mk-teacher-featured__body {
	padding: var(--mk-space-10) var(--mk-space-10) var(--mk-space-10) var(--mk-space-8);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--mk-space-4);
}

@media ( max-width: 768px ) {
	.mk-teacher-featured__body {
		padding: var(--mk-space-6);
	}
}

.mk-teacher-featured__badge-row {
	display: flex;
	align-items: center;
	gap: var(--mk-space-3);
	flex-wrap: wrap;
}

.mk-teacher-featured__exp {
	font-size: var(--mk-font-size-xs);
	color: var(--mk-text-muted);
}

.mk-teacher-featured__name {
	font-size: clamp( 1.4rem, 3vw, 2rem );
	font-weight: 800;
	color: var(--mk-text);
	margin: 0;
	line-height: 1.2;
}

.mk-teacher-featured__role {
	margin: 0;
	font-size: var(--mk-font-size-sm);
}

.mk-teacher-featured__bio {
	font-size: var(--mk-font-size-sm);
	color: var(--mk-text-muted);
	line-height: 1.8;
	margin: 0;
}

.mk-teacher-featured__subjects {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mk-space-2);
}

.mk-teacher-featured__actions {
	display: flex;
	align-items: center;
	gap: var(--mk-space-4);
	margin-top: var(--mk-space-2);
}

/* آیکن اینستاگرام */
.mk-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--mk-radius-md);
	border: 1px solid var(--mk-border-strong);
	color: var(--mk-text-muted);
	text-decoration: none;
	transition: all var(--mk-transition-fast);
}

.mk-icon-btn svg {
	width: 18px;
	height: 18px;
}

.mk-icon-btn:hover {
	border-color: #E1306C;
	color: #E1306C;
	background: rgba( 225, 48, 108, .08 );
}

/* ── Skeleton Featured ──────────────────────────── */

.mk-teacher-featured--skeleton .mk-teacher-featured__media {
	min-height: 340px;
}

.mk-sk-line {
	border-radius: var(--mk-radius-sm);
	display: block;
}

/* ============================================================
   TEACHERS GRID
   ============================================================ */

#mk-teachers-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var(--mk-space-5);
}

@media ( max-width: 900px ) {
	#mk-teachers-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 560px ) {
	#mk-teachers-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Teacher Card (Grid) ────────────────────────── */

.mk-teacher-card {
	border-radius: var(--mk-radius-lg);
	background: var(--mk-bg-card);
	border: 1px solid var(--mk-border);
	overflow: hidden;
	cursor: pointer;
	transition:
		transform    var(--mk-transition-slow),
		box-shadow   var(--mk-transition-slow),
		border-color var(--mk-transition-base);
	display: flex;
	flex-direction: column;

	/* animate-in */
	opacity: 0;
	transform: translateY( 20px );
}

.mk-card--animate-in {
	animation: mk-card-in .5s cubic-bezier( .16, 1, .3, 1 ) forwards;
}

@keyframes mk-card-in {
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

.mk-teacher-card:hover,
.mk-teacher-card:focus-visible {
	transform: translateY( -6px );
	box-shadow: var(--mk-shadow-lg), var(--mk-shadow-glow);
	border-color: var(--mk-primary);
	outline: none;
}

/* ── Thumbnail ──────────────────────────────────── */

.mk-teacher-card__thumb {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--mk-bg-elevated);
}

.mk-teacher-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier( .16, 1, .3, 1 );
}

.mk-teacher-card:hover .mk-teacher-card__thumb img {
	transform: scale( 1.06 );
}

.mk-teacher-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient( 135deg, var(--mk-bg-elevated), var(--mk-bg-card) );
}

/* ── Body ───────────────────────────────────────── */

.mk-teacher-card__body {
	padding: var(--mk-space-4) var(--mk-space-5) var(--mk-space-3);
	flex: 1;
}

.mk-teacher-card__name {
	font-size: var(--mk-font-size-lg);
	font-weight: 700;
	color: var(--mk-text);
	margin: 0 0 var(--mk-space-1);
	line-height: 1.3;
}

.mk-teacher-card__role {
	font-size: var(--mk-font-size-sm);
	margin: 0 0 var(--mk-space-3);
}

.mk-teacher-card__subjects {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mk-space-1);
}

/* ── Footer ─────────────────────────────────────── */

.mk-teacher-card__footer {
	padding: var(--mk-space-3) var(--mk-space-5);
	border-top: 1px solid var(--mk-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mk-teacher-card__exp {
	font-size: var(--mk-font-size-xs);
}

.mk-teacher-card__arrow {
	font-size: 1.1rem;
	color: var(--mk-primary);
	transition: transform var(--mk-transition-fast);
}

.mk-teacher-card:hover .mk-teacher-card__arrow {
	transform: translateX( -4px );
}

/* ── Skeleton Grid ──────────────────────────────── */

.mk-teacher-card--skeleton {
	pointer-events: none;
}

.mk-teacher-card--skeleton .mk-teacher-card__thumb {
	animation: mk-pulse 1.4s ease-in-out infinite;
	background: var(--mk-border);
}

/* ── Empty / Error ──────────────────────────────── */

.mk-teachers__empty,
.mk-teachers__error {
	grid-column: 1 / -1;
	padding: var(--mk-space-10);
	text-align: center;
	color: var(--mk-text-muted);
	font-size: var(--mk-font-size-sm);
}

/* ── Badge variants ─────────────────────────────── */

.mk-badge--featured {
	background: linear-gradient( 90deg, var(--mk-primary), var(--mk-accent) );
	color: #fff;
	font-weight: 700;
}

.mk-badge--sm {
	font-size: var(--mk-font-size-xs);
	padding: .25rem .6rem;
}

.mk-badge--xs {
	font-size: .68rem;
	padding: .18rem .45rem;
}

/* ============================================================
   HONORS SECTION — Horizontal Scroll Strip
   ساختار: هر آیتم = تصویر (راست) + متن جزئیات (چپ)
   ============================================================ */

.mk-section-honors {
	background: var(--mk-bg-elevated);
	border-top:    1px solid var(--mk-border);
	border-bottom: 1px solid var(--mk-border);
	overflow: hidden;
}

/* نور محیطی پس‌زمینه */
.mk-honors-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 700px;
	height: 350px;
	background: radial-gradient(ellipse, rgba(124, 111, 247, .07) 0%, transparent 70%);
	pointer-events: none;
	border-radius: 50%;
}

/* ── دکمه‌های ناوبری ────────────────────────────── */

.mk-honors-nav {
	display: flex;
	gap: var(--mk-space-2);
	align-items: center;
}

.mk-honors-nav__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--mk-radius-md);
	border: 1px solid var(--mk-border-strong);
	background: var(--mk-glass-bg);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--mk-text-muted);
	cursor: pointer;
	transition:
		background      var(--mk-transition-fast),
		border-color    var(--mk-transition-fast),
		color           var(--mk-transition-fast),
		transform       var(--mk-transition-fast);
}

.mk-honors-nav__btn svg {
	width: 18px;
	height: 18px;
	display: block;
}

.mk-honors-nav__btn:hover:not(:disabled) {
	background: var(--mk-primary);
	border-color: var(--mk-primary);
	color: #fff;
	transform: scale(1.08);
}

.mk-honors-nav__btn:disabled {
	opacity: .3;
	cursor: not-allowed;
}

/* ── Track Wrapper ──────────────────────────────── */

.mk-honors-track-wrap {
	position: relative;
	min-height: 260px;    /* [FIX] جلوگیری از CLS: ارتفاع رزرو قبل از لود تصاویر */
	contain: layout;      /* [FIX] جلوگیری از reflow بیرونی */
	/* fade edges */
	-webkit-mask-image: linear-gradient(
		to left,
		transparent 0%,
		#000 6%,
		#000 94%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to left,
		transparent 0%,
		#000 6%,
		#000 94%,
		transparent 100%
	);
}

/* ── Track (scrollable) ──────────────────────────── */

#mk-honors-track {
	display: flex;
	gap: var(--mk-space-5);
	list-style: none;
	margin: 0;
	padding: var(--mk-space-2) var(--mk-space-10);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

#mk-honors-track::-webkit-scrollbar {
	display: none;
}

/* [FIX] CLS: نسبت ابعاد ثابت برای تصاویر honor تا قبل از لود کامل */
.mk-honor-item img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	width: 100%;
}

/* ── Honor Item ──────────────────────────────────── */

.mk-honor-item {
	flex: 0 0 auto;
	width: clamp(340px, 45vw, 560px);
	display: grid;
	grid-template-columns: 200px 1fr;
	border-radius: var(--mk-radius-xl);
	background: var(--mk-glass-bg);
	backdrop-filter: blur(var(--mk-glass-blur));
	-webkit-backdrop-filter: blur(var(--mk-glass-blur));
	border: 1px solid var(--mk-glass-border);
	box-shadow: var(--mk-glass-shadow);
	overflow: hidden;
	scroll-snap-align: start;
	transition:
		transform    var(--mk-transition-slow),
		box-shadow   var(--mk-transition-slow),
		border-color var(--mk-transition-base);
}

.mk-honor-item:hover {
	transform: translateY(-5px);
	box-shadow: var(--mk-shadow-lg), var(--mk-shadow-glow);
	border-color: var(--mk-primary);
}

@media (max-width: 600px) {
	.mk-honor-item {
		width: clamp(280px, 85vw, 400px);
		grid-template-columns: 130px 1fr;
	}
}

/* ── Media (تصویر) ──────────────────────────────── */

.mk-honor-item__media {
	position: relative;
	overflow: hidden;
	background: var(--mk-bg-card);
}

.mk-honor-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

.mk-honor-item:hover .mk-honor-item__media img {
	transform: scale(1.06);
}

/* overlay گرادیانت روی تصویر */
.mk-honor-item__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to left,
		var(--mk-bg-card) 0%,
		transparent 35%
	);
	pointer-events: none;
}

.mk-honor-item__placeholder {
	width: 100%;
	height: 100%;
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	background: linear-gradient(135deg, var(--mk-bg-elevated), var(--mk-bg-card));
}

/* ── Body (متن) ──────────────────────────────────── */

.mk-honor-item__body {
	padding: var(--mk-space-6) var(--mk-space-6) var(--mk-space-6) var(--mk-space-5);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--mk-space-3);
}

@media (max-width: 600px) {
	.mk-honor-item__body {
		padding: var(--mk-space-4);
		gap: var(--mk-space-2);
	}
}

/* ── Meta Row (سال + برچسب) ──────────────────────── */

.mk-honor-item__meta {
	display: flex;
	align-items: center;
	gap: var(--mk-space-2);
	flex-wrap: wrap;
}

.mk-honor-item__year {
	font-size: var(--mk-font-size-xs);
	font-weight: 700;
	color: var(--mk-primary);
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
}

/* ── Title ───────────────────────────────────────── */

.mk-honor-item__title {
	font-size: clamp(.95rem, 2vw, 1.15rem);
	font-weight: 800;
	color: var(--mk-text);
	margin: 0;
	line-height: 1.35;
}

/* ── Description ──────────────────────────────────── */

.mk-honor-item__desc {
	font-size: var(--mk-font-size-sm);
	color: var(--mk-text-muted);
	line-height: 1.75;
	margin: 0;

	/* نمایش حداکثر ۳ خط */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ============================================================
   SHARED ANIMATIONS
   ============================================================ */

@keyframes mk-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: .4; }
}

/* ============================================================
   LIGHT MODE
   ============================================================ */

.mk-light-mode .mk-teacher-card {
	background: #fff;
	box-shadow: var(--mk-shadow-sm);
}

.mk-light-mode #mk-teacher-featured {
	background: rgba( 255, 255, 255, .8 );
}

.mk-light-mode .mk-honor-item {
	background: rgba(255, 255, 255, .75);
}

.mk-light-mode .mk-honor-item__media::after {
	background: linear-gradient(to left, rgba(255,255,255,.9) 0%, transparent 35%);
}

.mk-light-mode .mk-honors-nav__btn {
	background: rgba(255,255,255,.7);
}

.mk-light-mode .mk-filter-btn--active {
	color: #fff;
}

/* ============================================================
   TEACHER DETAIL POPUP
   ============================================================ */

.mk-td-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity .28s ease;
}

@media ( min-width: 600px ) {
	.mk-td-overlay {
		align-items: center;
	}
}

.mk-td-overlay--visible {
	opacity: 1;
	pointer-events: auto;
}

/* Backdrop */
.mk-td-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, .65 );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
}

/* Sheet */
.mk-td-sheet {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	max-height: 92dvh;
	display: flex;
	flex-direction: column;
	border-radius: var(--mk-radius-xl) var(--mk-radius-xl) 0 0;
	background: var(--mk-bg-card);
	border: 1px solid var(--mk-glass-border);
	box-shadow: var(--mk-shadow-lg), 0 -4px 40px rgba(0,0,0,.3);
	transform: translateY( 40px );
	transition: transform .32s cubic-bezier( .16, 1, .3, 1 );
	scrollbar-width: none;
}

.mk-td-sheet::-webkit-scrollbar { display: none; }

@media ( min-width: 600px ) {
	.mk-td-sheet {
		border-radius: var(--mk-radius-xl);
		transform: translateY( 24px ) scale( .97 );
	}
}

.mk-td-overlay--visible .mk-td-sheet {
	transform: translateY( 0 ) scale( 1 );
}

/* Close button */
.mk-td-close {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--mk-glass-border);
	background: var(--mk-glass-bg);
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	color: var(--mk-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--mk-transition-fast), transform var(--mk-transition-fast);
}

.mk-td-close svg { width: 16px; height: 16px; }

.mk-td-close:hover {
	background: var(--mk-danger);
	color: #fff;
	transform: scale( 1.08 );
}

/* Hero image */
.mk-td-hero {
	position: relative;
	width: 100%;
	height: 260px;
	flex-shrink: 0;
	overflow: hidden;
	background: var(--mk-bg-elevated);
}

.mk-td-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.mk-td-hero__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient( 135deg, var(--mk-bg-elevated), var(--mk-bg-card) );
}

.mk-td-hero__glow {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60%;
	background: linear-gradient( to top, var(--mk-bg-card), transparent );
	pointer-events: none;
}

/* Body */
.mk-td-body {
	padding: var(--mk-space-6) var(--mk-space-6) var(--mk-space-8);
	display: flex;
	flex-direction: column;
	gap: var(--mk-space-3);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--mk-border) transparent;
}

.mk-td-meta {
	display: flex;
	gap: var(--mk-space-2);
	flex-wrap: wrap;
	align-items: center;
}

.mk-td-exp {
	font-size: var(--mk-font-size-xs);
	color: var(--mk-primary);
	font-weight: 700;
	background: var(--mk-primary-muted, rgba(201,168,76,.12));
	padding: .2rem .6rem;
	border-radius: var(--mk-radius-full);
}

.mk-td-name {
	font-size: clamp( 1.35rem, 4vw, 1.75rem );
	font-weight: 800;
	color: var(--mk-text);
	margin: 0;
	line-height: 1.2;
}

.mk-td-role {
	font-size: var(--mk-font-size-sm);
	color: var(--mk-text-muted);
	margin: 0;
}

.mk-td-subjects {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mk-space-2);
	margin-top: var(--mk-space-1);
}

.mk-td-bio {
	font-size: var(--mk-font-size-sm);
	color: var(--mk-text-muted);
	line-height: 1.9;
	margin: 0;
	padding: var(--mk-space-4);
	background: var(--mk-bg-elevated);
	border-radius: var(--mk-radius-lg);
	border-right: 3px solid var(--mk-primary);
}

.mk-td-actions {
	display: flex;
	gap: var(--mk-space-3);
	align-items: center;
	margin-top: var(--mk-space-2);
}

/* light mode */
.mk-light-mode .mk-td-sheet {
	background: #fff;
}

.mk-light-mode .mk-td-hero__glow {
	background: linear-gradient( to top, #fff, transparent );
}

.mk-light-mode .mk-td-bio {
	background: #f5f5f5;
}