/* ==========================================================================
   Institution Course Card
   ========================================================================== */

.institution-course-card{
	display:flex;
	flex-direction:column;
	height:100%;
	background:#fff;
	border:1px solid #e5e7eb;
	border-radius:20px;
	overflow:hidden;
	box-shadow:0 10px 30px rgba(15,23,42,.06);
	transition:all .35s ease;
}

.institution-course-card:hover{
	transform:translateY(-6px);
	box-shadow:0 24px 60px rgba(15,23,42,.12);
}


/* ==========================================================================
   Featured Image
   ========================================================================== */

.institution-card-image{
	position:relative;
	aspect-ratio:16/9;
	background:#f8fafc;
	overflow:hidden;
}

.institution-card-image a{
	display:block;
	width:100%;
	height:100%;
}

.institution-card-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .45s ease;
}

.institution-course-card:hover .institution-card-image img{
	transform:scale(1.05);
}


/* ==========================================================================
   Admission Status Badge
   ========================================================================== */

.institution-course-status{

	position:absolute;

	top:14px;

	left:50%;

	transform:translateX(-50%);

	display:inline-flex;

	align-items:center;

	justify-content:center;

	min-width:135px;

	padding:6px 14px;

	border-radius:999px;

	font-size:10px;

	font-weight:700;

	letter-spacing:.08em;

	text-transform:uppercase;

	white-space:nowrap;

	color:#fff;

	z-index:20;

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

.institution-course-status::before{

	content:"●";

	font-size:8px;

	margin-right:6px;

	opacity:.9;
}

.institution-course-status.open{

	background:linear-gradient(135deg,#16a34a,#22c55e);
}

.institution-course-status.closing{

	background:linear-gradient(135deg,#f59e0b,#f97316);
}

.institution-course-status.closed{

	background:linear-gradient(135deg,#dc2626,#ef4444);
}


/* ==========================================================================
   Content
   ========================================================================== */

.institution-card-content{

	display:flex;

	flex-direction:column;

	flex:1;

	padding:24px;
}


/* ==========================================================================
   Institution Name
   ========================================================================== */

.institution-name{

	display:inline-flex;

	align-self:flex-start;

	padding:6px 12px;

	margin-bottom:16px;

	border-radius:999px;

	background:#eff6ff;

	color:#2563eb;

	font-size:12px;

	font-weight:700;

	letter-spacing:.04em;

	text-transform:uppercase;
}


/* ==========================================================================
   Course Title
   ========================================================================== */

.institution-course-title{

	margin:0 0 18px;

	font-size:1.55rem;

	line-height:1.35;

	font-weight:700;

	color:#0f172a;
}

.institution-course-title a{

	color:inherit;

	text-decoration:none;

	transition:.25s;
}

.institution-course-title a:hover{

	color:#2563eb;
}
/* ==========================================================================
   Course Meta
   ========================================================================== */

.institution-course-meta{

	display:flex;

	flex-wrap:wrap;

	gap:14px;

	margin-bottom:28px;
}

.institution-meta-item{

	display:flex;

	align-items:center;

	gap:8px;

	font-size:.95rem;

	font-weight:500;

	color:#64748b;
}

.institution-meta-item svg{

	width:18px;

	height:18px;

	flex-shrink:0;

	color:#2563eb;
}

.institution-meta-item span{

	line-height:1.4;
}


/* ==========================================================================
   Footer
   ========================================================================== */

.institution-card-footer{

	margin-top:auto;

	padding-top:22px;

	border-top:1px solid #eef2f7;
}


/* ==========================================================================
   Apply Button
   ========================================================================== */

.institution-course-btn{

	display:flex;

	align-items:center;

	justify-content:center;

	gap:10px;

	width:100%;

	min-height:52px;

	padding:0 22px;

	border-radius:12px;

	background:linear-gradient(135deg,#2563eb,#1d4ed8);

	color:#fff;

	font-size:15px;

	font-weight:600;

	text-decoration:none;

	transition:all .3s ease;

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

.institution-course-btn:hover{

	background:linear-gradient(135deg,#1d4ed8,#1e40af);

	color:#fff;

	transform:translateY(-2px);

	box-shadow:0 16px 36px rgba(37,99,235,.28);
}

.institution-course-btn svg{

	width:18px;

	height:18px;

	transition:transform .3s ease;
}

.institution-course-btn:hover svg{

	transform:translateX(4px);
}


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

@media (max-width:767px){

	.institution-course-card{

		border-radius:16px;
	}

	.institution-card-content{

		padding:18px;
	}

	.institution-course-status{

		top:10px;

		min-width:120px;

		padding:5px 12px;

		font-size:9px;
	}

	.institution-name{

		font-size:11px;

		padding:5px 10px;

		margin-bottom:14px;
	}

	.institution-course-title{

		font-size:1.25rem;

		margin-bottom:16px;
	}

	.institution-course-meta{

		gap:12px;

		margin-bottom:22px;
	}

	.institution-meta-item{

		font-size:.88rem;
	}

	.institution-meta-item svg{

		width:16px;

		height:16px;
	}

	.institution-course-btn{

		min-height:48px;

		font-size:14px;
	}
}


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

@media (min-width:768px) and (max-width:1199px){

	.institution-course-title{

		font-size:1.45rem;
	}
}


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

@media (min-width:1200px){

	.institution-course-title{

		font-size:1.65rem;
	}

	.institution-course-card:hover{

		transform:translateY(-8px);
	}
}