/**
 * Popular Courses Panel
 * ============================================================================
 * Featured courses carousel section for homepage.
 *
 * Load order: After base.css, before page-specific styles
 * Dependencies: 00-tokens.css (design tokens), swiper.css (for carousel)
 * ============================================================================
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

.popular-courses {
	background-color: var(--bg-1);
	position: relative;
}

.popular-courses .content {
	padding: 22px 20px 0 var(--content-padding-x);
}

.popular-courses .content h3 {
	color: var(--brand-main);
	font-size: 42px;
	letter-spacing: -1.5px;
	line-height: 46px;
	margin-bottom: var(--space-7);
}

.popular-courses .content .popular-courses-container {
	padding-top: 10px;
	padding-right: 30px;
	width: 100%;
}

.popular-courses .content .button-container {
	padding-right: 30px;
	text-align: center;
	width: 100%;
}

.popular-courses .content .button {
	background-color: var(--brand-main);
	color: var(--white);
	display: inline-block;
	line-height: 48px;
	margin: 0 20px 30px;
}

/* ==========================================================================
   Responsive: Mobile (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
	.popular-courses .content {
		padding: 22px var(--content-padding-x) 0 var(--content-padding-x);
	}

	.popular-courses .content h3 {
		font-size: 34px;
		line-height: 42px;
	}

	.popular-courses .slider-controls {
		padding-right: var(--space-6);
	}
}