/* ==========================================================================
   Institution Archive
   Hero • Courses • Cards • Empty State
   ========================================================================== */

/* ==========================================================
   Hero Section
========================================================== */

.mi-institution-hero{

	position:relative;

	overflow:hidden;

	padding:2.5rem 0;

	text-align:center;

	background:
		radial-gradient(circle at top left,rgba(37,99,235,.08),transparent 45%),
		radial-gradient(circle at bottom right,rgba(59,130,246,.06),transparent 50%),
		linear-gradient(180deg,#ffffff,#f8fbff);

	border-bottom:1px solid #edf2f7;
}

.mi-hero-bg-shapes{

	position:absolute;

	inset:0;

	pointer-events:none;
}

.mi-hero-shape{

	position:absolute;

	border-radius:50%;

	filter:blur(90px);
}

.mi-shape-1{

	width:220px;

	height:220px;

	background:#7dd3fc;

	left:-70px;

	top:-70px;

	opacity:.28;
}

.mi-shape-2{

	width:260px;

	height:260px;

	background:#93c5fd;

	right:-90px;

	bottom:-90px;

	opacity:.18;
}

.mi-hero-content{

	position:relative;

	z-index:2;

	max-width:760px;

	margin-inline:auto;

	padding-inline:16px;
}

.mi-badge-hero{

	margin-bottom:1rem;
}

.mi-hero-title{

	margin:.5rem 0 .75rem;

	font-size:2rem;

	line-height:1.15;

	font-weight:700;

	color:#0f172a;
}

.mi-course-count{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	padding:.55rem 1rem;

	margin-bottom:1rem;

	border-radius:999px;

	background:#fff;

	border:1px solid #dbeafe;

	box-shadow:0 8px 20px rgba(37,99,235,.08);

	font-size:.9rem;

	font-weight:600;

	color:#2563eb;
}

.mi-hero-content .mi-section-desc{

	max-width:640px;

	margin-inline:auto;

	color:#64748b;

	font-size:.95rem;

	line-height:1.7;
}


/* ==========================================================
   Courses Section
========================================================== */

.mi-institution-courses{

	padding:2rem 0;
}

.mi-related-grid{

	display:grid;

	grid-template-columns:1fr;

	gap:24px;

	max-width:1320px;

	margin-inline:auto;
}


/* ==========================================================
   Premium Course Card
========================================================== */

.mi-course-card{

	display:flex;

	flex-direction:column;

	height:100%;

	background:#fff;

	border:1px solid #edf2f7;

	border-radius:18px;

	overflow:hidden;

	box-shadow:0 8px 25px rgba(15,23,42,.05);

	transition:all .35s ease;
}

.mi-course-card:hover{

	transform:translateY(-6px);

	box-shadow:0 20px 45px rgba(15,23,42,.10);
}

.mi-card-media{

	aspect-ratio:16/9;

	background:#f8fafc;

	overflow:hidden;
}

.mi-card-img{

	width:100%;

	height:100%;

	object-fit:cover;

	transition:transform .45s ease;
}

.mi-course-card:hover .mi-card-img{

	transform:scale(1.05);
}

.mi-card-body{

	display:flex;

	flex-direction:column;

	flex:1;

	padding:20px;
}

.mi-card-institution{

	display:inline-flex;

	align-self:flex-start;

	padding:6px 12px;

	margin-bottom:14px;

	border-radius:999px;

	background:#eff6ff;

	color:#2563eb;

	font-size:11px;

	font-weight:700;

	letter-spacing:.05em;

	text-transform:uppercase;
}

.mi-card-title{

	margin:0 0 16px;

	font-size:1.35rem;

	font-weight:700;

	line-height:1.35;

	color:#0f172a;
}

.mi-card-title a{

	color:inherit;

	text-decoration:none;

	transition:.25s;
}

.mi-card-title a:hover{

	color:#2563eb;
}

.mi-card-meta-list{

	display:flex;

	flex-wrap:wrap;

	gap:12px;

	margin-bottom:20px;
}

.mi-card-meta-item{

	display:flex;

	align-items:center;

	gap:8px;

	font-size:.9rem;

	color:#64748b;
}

.mi-card-meta-item svg{

	width:15px;

	height:15px;

	color:#2563eb;

	flex-shrink:0;
}

.mi-card-footer{

	margin-top:auto;

	padding-top:18px;

	border-top:1px solid #eef2f7;
}

.mi-card-footer .mi-btn-primary{

	width:100%;

	min-height:48px;

	justify-content:center;

	border-radius:12px;

	font-weight:600;
}

/* Single Card */

.mi-related-grid > .mi-course-card:only-child{

	max-width:420px;

	justify-self:center;
}


/* ==========================================================
   Empty State
========================================================== */

.mi-empty-state{

	max-width:640px;

	margin-inline:auto;

	padding:3rem 2rem;

	text-align:center;

	background:#fff;

	border:1px solid #edf2f7;

	border-radius:20px;

	box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.mi-empty-state .mi-section-desc{

	margin-bottom:1.5rem;
}


/* ==========================================================
   Tablet
========================================================== */

@media (min-width:768px){

	.mi-institution-hero{

		padding:4rem 0;
	}

	.mi-hero-title{

		font-size:2.8rem;
	}

	.mi-hero-content .mi-section-desc{

		font-size:1rem;
	}

	.mi-related-grid{

		grid-template-columns:repeat(2,1fr);

		gap:28px;
	}

	.mi-card-body{

		padding:22px;
	}

	.mi-card-title{

		font-size:1.6rem;
	}

}


/* ==========================================================
   Desktop
========================================================== */

@media (min-width:1200px){

	.mi-institution-hero{

		padding:5.5rem 0;
	}

	.mi-hero-title{

		font-size:3.3rem;
	}

	.mi-related-grid{

		grid-template-columns:repeat(3,1fr);

		gap:32px;
	}

}
/* ==========================================================================
   CTA Section
   ========================================================================== */

.mi-institution-cta{

	padding:3rem 0 4rem;
}

.mi-cta-banner{

	position:relative;

	overflow:hidden;

	max-width:980px;

	margin-inline:auto;

	padding:3.5rem 2rem;

	text-align:center;

	border-radius:24px;

	background:linear-gradient(135deg,#082464 0%,#2563eb 100%);

	box-shadow:0 24px 60px rgba(37,99,235,.20);
}

.mi-cta-banner::before{

	content:"";

	position:absolute;

	top:-120px;

	right:-80px;

	width:260px;

	height:260px;

	border-radius:50%;

	background:rgba(255,255,255,.08);
}

.mi-cta-banner::after{

	content:"";

	position:absolute;

	bottom:-90px;

	left:-70px;

	width:180px;

	height:180px;

	border-radius:50%;

	background:rgba(255,255,255,.05);
}

.mi-cta-banner > *{

	position:relative;

	z-index:2;
}

/* CTA Badge */

.mi-cta-banner .mi-badge{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	padding:8px 18px;

	margin-bottom:22px;

	border-radius:999px;

	background:rgba(255,255,255,.14);

	border:1px solid rgba(255,255,255,.20);

	color:#fff;

	font-size:12px;

	font-weight:700;

	letter-spacing:.06em;

	text-transform:uppercase;

	backdrop-filter:blur(10px);
}

/* CTA Heading */

.mi-cta-title{

	margin-bottom:1rem;

	color:#fff;

	font-size:2.2rem;

	font-weight:700;

	line-height:1.2;
}

/* CTA Description */

.mi-cta-desc{

	max-width:680px;

	margin:0 auto 2rem;

	color:rgba(255,255,255,.92);

	font-size:1rem;

	line-height:1.8;
}

/* CTA Button */

.mi-cta-btn{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	min-width:250px;

	min-height:56px;

	padding:0 34px;

	margin-bottom:2rem;

	border-radius:14px;

	background:#fff;

	color:#2563eb;

	font-size:1rem;

	font-weight:700;

	text-decoration:none;

	box-shadow:0 12px 30px rgba(0,0,0,.18);

	transition:all .3s ease;
}

.mi-cta-btn:hover{

	background:#eff6ff;

	color:#1d4ed8;

	transform:translateY(-3px);

	box-shadow:0 18px 40px rgba(0,0,0,.22);
}


/* ==========================================================================
   Contact Details
   ========================================================================== */

.mi-cta-contact{

	display:flex;

	justify-content:center;

	align-items:center;

	flex-wrap:wrap;

	gap:26px;

	margin-bottom:1.25rem;
}

.mi-contact-item{

	display:flex;

	align-items:center;

	gap:10px;

	color:#fff;

	font-size:.96rem;

	font-weight:500;
}

.mi-contact-item svg{

	width:18px;

	height:18px;

	flex-shrink:0;

	opacity:.95;
}

.mi-contact-item a{

	color:#fff;

	text-decoration:none;

	transition:.25s;
}

.mi-contact-item a:hover{

	color:#fff;

	opacity:.8;
}

/* Support Text */

.mi-cta-support{

	margin-top:10px;

	color:rgba(255,255,255,.82);

	font-size:.9rem;

	font-weight:500;

	line-height:1.6;
}


/* ==========================================================================
   Mobile CTA
   ========================================================================== */

@media (max-width:767px){

	.mi-institution-cta{

		padding:2.5rem 0 3rem;
	}

	.mi-cta-banner{

		padding:2.25rem 1.25rem;

		border-radius:18px;
	}

	.mi-cta-title{

		font-size:1.7rem;
	}

	.mi-cta-desc{

		font-size:.95rem;

		margin-bottom:1.5rem;
	}

	.mi-cta-btn{

		width:100%;

		min-width:100%;
	}

	.mi-cta-contact{

		flex-direction:column;

		gap:14px;
	}

	.mi-contact-item{

		justify-content:center;

		font-size:.92rem;
	}

	.mi-cta-support{

		font-size:.82rem;
	}

}


/* ==========================================================================
   Large Desktop
   ========================================================================== */

@media (min-width:1200px){

	.mi-cta-banner{

		padding:4rem 3rem;
	}

	.mi-cta-title{

		font-size:2.6rem;
	}

	.mi-cta-desc{

		font-size:1.08rem;
	}

}


/* ==========================================================================
   Motion Effects
   ========================================================================== */

.mi-course-card,
.mi-cta-banner{

	transition:all .35s ease;
}

@media (prefers-reduced-motion:reduce){

	.mi-course-card,
	.mi-card-img,
	.mi-cta-btn{

		transition:none;
	}
}