/* ==========================================================================
   MasarPlus Instructor & Student Profile Stylesheet
   ========================================================================== */

/* 1. Profile Page Base & Hero */
.mp-profile-page {
	position: relative;
	background: var(--mp-bg-body, #f8fafc);
	padding-bottom: var(--mp-spacing-16);
}

.mp-profile-cover {
	position: relative;
	height: 280px;
	background-color: var(--mp-gray-900);
	background-size: cover;
	background-position: center;
}

.mp-profile-cover__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.75) 100%);
}

.mp-profile-header-card {
	position: relative;
	margin-top: -70px;
	z-index: 10;
	background: var(--mp-surface-light);
	border: 1px solid var(--mp-gray-200);
	border-radius: var(--mp-radius-2xl);
	padding: var(--mp-spacing-8);
	box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.07);
}

.mp-profile-avatar-wrap {
	position: relative;
	margin-top: -60px;
	flex-shrink: 0;
}

.mp-profile-avatar-img {
	width: 140px;
	height: 140px;
	border-radius: var(--mp-radius-full);
	border: 5px solid var(--mp-surface-light);
	box-shadow: var(--mp-shadow-xl);
	object-fit: cover;
	background: var(--mp-gray-100);
}

.mp-profile-title {
	font-size: var(--mp-text-2xl);
	font-weight: var(--mp-fw-extrabold);
	color: var(--mp-gray-900);
	margin: 0;
	line-height: var(--mp-line-height-tight);
}

.mp-profile-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--mp-spacing-1);
	font-size: var(--mp-text-xs);
	font-weight: var(--mp-fw-bold);
	color: var(--mp-primary-600);
	background: var(--mp-primary-50);
	border: 1px solid var(--mp-primary-100);
	padding: var(--mp-spacing-1) var(--mp-spacing-3);
	border-radius: var(--mp-radius-full);
}

.mp-profile-rating {
	display: flex;
	align-items: center;
	gap: var(--mp-spacing-2);
	font-size: var(--mp-text-sm);
	color: var(--mp-warning-500);
	margin-top: var(--mp-spacing-2);
}

.mp-profile-rating-score {
	font-weight: var(--mp-fw-extrabold);
	color: var(--mp-gray-900);
}

.mp-profile-rating-count {
	color: var(--mp-gray-500);
}

.mp-profile-meta-row {
	display: flex;
	align-items: center;
	gap: var(--mp-spacing-6);
	margin-top: var(--mp-spacing-4);
	flex-wrap: wrap;
}

.mp-profile-meta-item {
	display: flex;
	align-items: center;
	gap: var(--mp-spacing-2);
	font-size: var(--mp-text-sm);
	color: var(--mp-gray-600);
}

.mp-profile-meta-item i {
	font-size: 18px;
	color: var(--mp-primary-500);
}

.mp-profile-meta-val {
	font-weight: var(--mp-fw-bold);
	color: var(--mp-gray-900);
}

/* 2. Social Links */
.mp-profile-socials {
	display: flex;
	align-items: center;
	gap: var(--mp-spacing-2);
}

.mp-profile-social-link {
	width: 40px;
	height: 40px;
	border-radius: var(--mp-radius-full);
	background: var(--mp-gray-50);
	border: 1px solid var(--mp-gray-200);
	color: var(--mp-gray-600);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	text-decoration: none;
	transition: var(--mp-transition-normal);
}

.mp-profile-social-link:hover {
	background: var(--mp-primary-500);
	border-color: var(--mp-primary-500);
	color: #ffffff;
	transform: translateY(-2px);
}

/* 3. Bio & Sidebar Cards */
.mp-profile-bio-card {
	background: var(--mp-surface-light);
	border: 1px solid var(--mp-gray-200);
	border-radius: var(--mp-radius-xl);
	padding: var(--mp-spacing-6);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.mp-profile-bio-title {
	font-size: var(--mp-text-lg);
	font-weight: var(--mp-fw-bold);
	color: var(--mp-gray-900);
	margin-block-end: var(--mp-spacing-4);
	padding-block-end: var(--mp-spacing-3);
	border-block-end: 1px solid var(--mp-gray-100);
}

.mp-profile-bio-text {
	font-size: var(--mp-text-base);
	color: var(--mp-gray-600);
	line-height: var(--mp-line-height-loose);
}

/* 4. Instructor Courses Grid */
.mp-profile-courses-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: var(--mp-spacing-6);
}

.mp-profile-courses-title {
	font-size: var(--mp-text-xl);
	font-weight: var(--mp-fw-bold);
	color: var(--mp-gray-900);
	margin: 0;
}

.mp-profile-courses-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mp-spacing-6);
}

/* 5. Responsive Styles */
@media (max-width: 991px) {
	.mp-profile-courses-grid {
		grid-template-columns: 1fr;
	}
	.mp-profile-header-card__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.mp-profile-meta-row {
		justify-content: center;
	}
	.mp-profile-avatar-wrap {
		margin-top: -70px;
	}
	/* Bio card must not be sticky on mobile */
	.mp-profile-bio-card {
		position: relative !important;
		top: auto !important;
	}
	/* Fix profile socials centering */
	.mp-profile-socials {
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.mp-profile-cover {
		height: 180px;
	}
	.mp-profile-avatar-img {
		width: 100px;
		height: 100px;
	}
	.mp-profile-header-card {
		padding: var(--mp-spacing-5);
		margin-top: -50px;
	}
	.mp-profile-title {
		font-size: var(--mp-text-xl) !important;
	}
	.mp-profile-meta-row {
		gap: var(--mp-spacing-3);
	}
	.mp-profile-meta-item {
		font-size: var(--mp-text-xs);
	}
	.mp-profile-bio-card {
		padding: var(--mp-spacing-4);
	}
	.mp-profile-courses-title {
		font-size: var(--mp-text-lg);
	}
}