/**
 * Course Listing/Category Styles
 *
 * Styles for course listing pages, category pages, search results,
 * and related course browsing functionality.
 *
 * Dependencies: ssa-base
 * Extracted from: styles.css Section 17, responsive rules from media queries
 *
 * IMPORTANT: This file is used by AJAX-loaded content.
 * Do NOT modify class names without updating PHP handlers in functions.php:
 * - load_courses_callback()
 * - load_more_courses_callback()
 * - search_courses_callback()
 *
 * Key elements:
 * - .courses - main course listing wrapper
 * - .categories - sidebar category filter
 * - .courses-main-area - main content area
 * - #coursesList - CSS grid course card container
 * - .course - individual course card
 * - .single-module-page - individual module pages
 */

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

.courses {
	background-color: var(--courses-background);
	padding: 74px 0;
	position: relative;
}

.courses .content {
	display: flex;
}

.courses .content h1,
.courses .content h2 {
	color: var(--brand-main);
	font-size: 42px;
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 44px;
	margin-bottom: 60px;
}

/* ==========================================================================
   Category Sidebar
   ========================================================================== */

.courses .categories {
	flex: 0 0 20%;
	min-width: 160px;
}

.courses .categories .filter-sort {
	cursor: pointer;
	display: none;
	height: 18px;
	margin-bottom: 30px;
}

.courses .categories .filter-sort::before {
	content: url('../img/sliders.webp');
	margin-right: 6px;
}

.courses .categories ul {
	list-style-type: none;
	padding-left: var(--space-0);
}

.courses .categories ul.children {
	margin: 0 0 0 20px;
}

.courses .categories li {
	display: inline-block;
	width: 100%;
}

.courses .categories a {
	display: inline-block;

	/* font-family handled by utility class */
	margin-bottom: var(--space-5);
	text-decoration: none;
}

.courses .categories .current-cat>a {
	border-bottom: 4px solid var(--brand-main);
}

.courses .categories hr {
	border-top: 1px solid var(--bg-2);
	margin-bottom: var(--space-6);
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */

.courses .courses-main-area {
	flex: 1;
	padding-left: 3%;
	overflow-x: hidden;
}

.courses .courses-main-area .filters {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 50px;
	width: 100%;
}

.courses-main-area .drop-down.sort-by {
	display: inline-block;
	margin-right: 5%;
	width: 30%;
}

.courses-main-area .drop-down.search {
	width: 65%;
}

.courses .courses-main-area h1,
.courses .courses-main-area h2 {
	display: inline-block;
	color: var(--brand-main);
	margin-right: 18px;
	margin-bottom: var(--space-5);
}

.courses .courses-main-area h1 {
	margin-bottom: var(--space-8);
}

.courses .courses-main-area h2.fw {
	width: 100%;
}

/* ==========================================================================
   Search Form
   ========================================================================== */

.search-form {
	position: relative;
	width: 65%;
}

.search-form input {
	width: 100%;
}

.search-form .search-term {
	position: relative;
}

.search-form .search-term::after {
	content: url("../img/icon-search.webp");
	display: inline-block;
	height: 18px;
	width: 18px;
	position: absolute;
	top: 14px;
	right: var(--space-5);
}

/* ==========================================================================
   Course Cards - Carousel
   ========================================================================== */

.courses-main-area .carousel .course {
	display: inline-block;
	max-width: 265px;
	margin: 0 20px 40px;
	border-radius: var(--radius-lg);
}

/* ==========================================================================
   Course Cards - Grid (#coursesList)
   ========================================================================== */

#coursesList {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	width: 100%;
}

#coursesList .course {
	background-color: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: 5px 5px 9px 0 var(--shadow-medium);
	width: 100%;
	max-width: 100%;
}

#coursesList .course .listing-item-img {
	border-top-left-radius: var(--radius-lg);
	border-top-right-radius: var(--radius-lg);
	display: inline-block;
	height: 146px;
	width: 100%;
}

#coursesList .course .course-content {
	background-color: var(--white);
	display: inline-block;
	padding: 16px 24px 34px;
	border-bottom-left-radius: var(--radius-lg);
	border-bottom-right-radius: var(--radius-lg);
	width: 100%;
}

#coursesList .course .course-content a {
	display: inline-block;
	text-decoration: none;
	_width: 100%;
}

#coursesList .course .course-content h4,
#coursesList .course .course-content h3 {
	color: var(--black);
	font-size: 19px;
	font-weight: 700;
	line-height: 22px;
	margin-bottom: 30px;
}

#coursesList .course .course-content p {
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 37px;
}

#coursesList .course .course-content .read-more span:first-child {
	margin-right: 7px;
}

/* Override inline-block for read-more links specifically */
#coursesList .course .course-content a.read-more {
	display: flex !important;
}

/* ==========================================================================
   Course Meta / Read More Links
   ========================================================================== */

.course-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.course-meta .read-more {
	display: flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	color: inherit;
}

.course-meta .right-arrow {
	font-size: 20px;
}

/* Material icon alignment within read-more links */
.read-more [class*="material-"] {
	font-size: 18px;
	line-height: 1;
	height: 18px;
	display: inline-flex;
	align-items: center;
}

/* Right arrow positioning */
.read-more .right-arrow {
	margin-left: auto;
}

/* ==========================================================================
   Course Type Container
   ========================================================================== */

.courses-main-area .course-type-container {
	position: relative;
	padding-bottom: var(--space-8);
	margin-bottom: var(--space-8);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

.courses .popular-courses-container {
	overflow: hidden;
}

.courses-main-area .button {
	border-color: var(--brand-main);
	color: var(--brand-main);
	margin: -6px 0 20px 20px;
}

/* ==========================================================================
   Category List
   ========================================================================== */

.courses-main-area ul.category-list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0 40px;
	margin-bottom: 140px;
}

.courses-main-area .category-list li {
	border-bottom: 1px solid var(--bg-2);
	color: var(--brand-main);

	/* font-family handled by utility class */
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -0.17px;
	line-height: 32px;
	padding: 20px 0;
	width: calc(50% - 20px);
}

.courses-main-area .category-list li a {
	text-decoration: none;
}

.courses-main-area .category-list .numeric {
	display: inline-flex;
	margin-left: 15px;
}

/* ==========================================================================
   Course Industry Pages
   ========================================================================== */

.course-industry {
	background-color: var(--white);
}

.course-industry #coursesList {
	gap: 3%;
}

.course-industry #coursesList .course {
	width: 22.75%;
}

.course-industry h2 {
	color: var(--brand-main);
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.course-industry h2 .numeric {
	margin-left: var(--space-4);
}

.course-industry .paragraphs {
	border-bottom: 1px solid var(--border-grey);
	display: flex;
	gap: 5%;
	padding-bottom: 50px;
	margin-bottom: 30px;
}

.course-industry .paragraph {
	width: 47.5%;
}

/* ==========================================================================
   Single Module Page
   ========================================================================== */

.single-module-page {
	padding: 45px 0;
	position: relative;
}

.single-module-page .content {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 60px;
}

.single-module-page .content-area {
	/* Grid item - no float needed */
	width: auto;
	max-width: 100%;
}

.single-module-page .aside {
	/* Grid item - no float needed */
	width: auto;
	max-width: 100%;
}

.single-module-page .content-area h1 {
	color: var(--brand-main);
	font-size: 42px;
	font-weight: 900;
	line-height: 46px;
	margin-bottom: 30px;
}

.single-module-page .aside .item {
	align-items: center;
	border-top: 1px solid var(--grey-light);
	display: flex;
	height: 70px;
	padding: 10px 0;
}

.single-module-page .aside .item img {
	border-radius: var(--radius-none);
	box-shadow: none;
	display: inline-block;
	height: 20px;
	margin: 0 17px 0 0;
	width: 20px;
}

/* ==========================================================================
   Responsive: 1280px and below
   ========================================================================== */

@media (max-width: 1280px) {
	.courses-main-area .button {
		margin-left: var(--space-0);
	}
}

/* ==========================================================================
   Responsive: 1024px and below
   ========================================================================== */

@media (max-width: 1024px) {
	#coursesList {
		grid-template-columns: repeat(2, 1fr);
	}

	#coursesList .course {
		margin-bottom: 22px;
		width: 100%;
	}
}

/* ==========================================================================
   Responsive: 768px and below
   ========================================================================== */

@media (max-width: 768px) {
	.courses .categories {
		margin-right: var(--space-0);
		width: 100%;
	}

	.courses .categories .filter-sort {
		display: flex;
	}

	.courses .course-category-list {
		background: var(--white);
		margin-bottom: var(--space-8);
		max-height: 500px;
		overflow-y: scroll;
		padding: 0 24px;
		border-radius: var(--radius-lg);
		border-top: 16px solid var(--white);
		border-bottom: 16px solid var(--white);
	}

	.courses .courses-main-area .filters {
		display: none;
	}

	.courses .courses-main-area {
		padding-left:10%;
		width: 100%;
	}

	.courses .courses-main-area h2 {
		font-size: 36px;
	}

	#coursesList {
		grid-template-columns: 1fr;
	}

	.single-module-page .content {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.courses .courses-main-area h1,
	.courses .courses-main-area h2 {
		margin: 0;
	}

	.courses .content h1 {
		font-size: 36px;
	}

	.courses .content h2 {
		font-size: 32px;
		width: 75%;
	}

	.content.content-courses {
		flex-direction: column;
	}
}

/* ==========================================================================
   Responsive: 480px and below
   ========================================================================== */

@media (max-width: 480px) {
	#coursesList {
		grid-template-columns: repeat(1, 1fr);
	}

	.courses .courses-main-area {
		padding-left: 0;
	}
}