/**
 * Staff Learning Centre
 * Front-end styles only.
 */

/* ==========================================================================
   Page Layout
   ========================================================================== */

.aalc-staff{
	max-width:1280px;
	margin:0 auto;
	padding:40px;
}

.aalc-header{
	margin-bottom:34px;
}

.aalc-title{
	margin:0 0 8px;
	font-size:36px;
	font-weight:700;
	line-height:1.2;
	color:#0f172a;
}

.aalc-subtitle{
	margin:0;
	font-size:16px;
	line-height:1.6;
	color:#64748b;
}

.aalc-section-title{
	margin:0 0 18px;
	font-size:24px;
	font-weight:700;
	color:#0f172a;
	text-transform:none;
}

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

.aalc-hero{
	margin-bottom:34px;
}

.aalc-hero-card{
	display:flex;
	align-items:stretch;
	gap:34px;
	padding:28px;
	background:#ffffff;
	border:1px solid #e8edf4;
	border-radius:18px;
	box-shadow:0 10px 26px rgba(15,23,42,.05);
}

.aalc-hero-thumbnail{
	width:390px;
	flex-shrink:0;
}

.aalc-hero-thumbnail img{
	display:block;
	width:100%;
	aspect-ratio:16/9;
	object-fit:cover;
	border-radius:14px;
}

.aalc-thumbnail-placeholder{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	aspect-ratio:16/9;
	background:#f8fafc;
	border:2px dashed #d6dde7;
	border-radius:14px;
	color:#94a3b8;
	font-size:16px;
	font-weight:600;
}

.aalc-hero-details{
	display:flex;
	flex:1;
	flex-direction:column;
	min-width:0;
}

.aalc-badge{
	display:inline-flex;
	align-self:flex-start;
	padding:5px 12px;
	border-radius:999px;
	background:#eef4ff;
	color:#2563eb;
	font-size:11px;
	font-weight:700;
	margin-bottom:18px;
}

.aalc-hero-title{
	margin:0 0 14px;
	font-size:24px;
	font-weight:700;
	line-height:1.25;
	color:#0f172a;
}

.aalc-hero-description{
	margin:0;
	font-size:14px;
	line-height:1.75;
	color:#64748b;
	max-width:540px;
}

.aalc-hero-meta{
	display:flex;
	gap:20px;
	align-items:center;
	margin:18px 0 0;
	font-size:13px;
	color:#64748b;
}

.aalc-meta-item{
	display:flex;
	align-items:center;
	gap:6px;
}

.aalc-hero-footer{
	margin-top:auto;
	padding-top:20px;
	border-top:1px solid #edf2f7;
	display:flex;
	justify-content:flex-end;
	align-items:center;
}

.aalc-btn-primary{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:12px 22px;
	background:#2563eb;
	color:#ffffff;
	border-radius:10px;
	font-size:14px;
	font-weight:600;
	text-decoration:none;
	transition:.2s ease;
}

.aalc-btn-primary:hover{
	background:#1d4ed8;
	color:#ffffff;
	text-decoration:none;
}

/* ==========================================================================
   Toolbar
   ========================================================================== */

.aalc-toolbar{
	display:flex;
	gap:16px;
	align-items:center;
	margin-bottom:24px;
}

.aalc-toolbar-left{
	display:flex;
	flex:1;
	gap:12px;
}

.aalc-search{
	display:flex;
	align-items:center;
	flex:1;
	height:48px;
	padding:0 16px;
	border:1px solid #e5e7eb;
	border-radius:12px;
}

.aalc-search-input{
	flex:1;
	border:none;
	outline:none;
}

.aalc-select{
	height:48px;
	min-width:180px;
	border:1px solid #e5e7eb;
	border-radius:12px;
	padding:0 16px;
}

/* ==========================================================================
   Topic Chips
   ========================================================================== */

.aalc-topic-chips{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-bottom:30px;
}

.aalc-chip{
	padding:8px 14px;
	border:1px solid #dbe3ec;
	border-radius:999px;
	font-size:13px;
	font-weight:600;
	background:#fff;
	color:#475569;
}

.aalc-chip-active{
	background:#2563eb;
	color:#fff;
	border-color:#2563eb;
}

/* ==========================================================================
   Video Grid
   ========================================================================== */

.aalc-video-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:22px;
}

.aalc-video-card{
	display:flex;
	flex-direction:column;
	background:#fff;
	border:1px solid #e5e7eb;
	border-radius:16px;
	overflow:hidden;
}

.aalc-video-thumbnail img,
.aalc-video-thumbnail-placeholder{
	display:block;
	width:100%;
	aspect-ratio:16/9;
	object-fit:cover;
}

.aalc-video-content{
	padding:18px;
	display:flex;
	flex-direction:column;
	flex:1;
}

.aalc-video-category{
	font-size:11px;
	font-weight:700;
	color:#2563eb;
	text-transform:uppercase;
}

.aalc-video-title{
	font-size:20px;
	margin:10px 0;
	color:#0f172a;
}

.aalc-video-description{
	flex:1;
	font-size:14px;
	line-height:1.6;
	color:#64748b;
}

.aalc-video-footer{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding-top:14px;
	border-top:1px solid #edf2f7;
}

.aalc-video-button{
	display:inline-flex;
	padding:10px 18px;
	background:#2563eb;
	color:#fff;
	border-radius:10px;
	text-decoration:none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media(max-width:1100px){

	.aalc-hero-card{
		flex-direction:column;
	}

	.aalc-hero-thumbnail{
		width:100%;
	}

	.aalc-toolbar,
	.aalc-toolbar-left{
		flex-direction:column;
		align-items:stretch;
	}

	.aalc-select{
		width:100%;
	}

	.aalc-video-grid{
		grid-template-columns:repeat(2,1fr);
	}

}

@media(max-width:768px){

	.aalc-staff{
		padding:24px;
	}

	.aalc-title{
		font-size:32px;
	}

	.aalc-section-title{
		font-size:22px;
	}

	.aalc-hero-title{
		font-size:22px;
	}

	.aalc-hero-meta{
		flex-direction:column;
		align-items:flex-start;
		gap:8px;
	}

	.aalc-video-grid{
		grid-template-columns:1fr;
	}

}