/**
 * Swiper/Carousel Component
 * ============================================================================
 * Base styles for Swiper.js carousels used throughout the theme.
 *
 * Load order: After 01-base.css, before page-specific styles
 * Dependencies: 00-tokens.css (design tokens), Swiper.js CSS
 *
 * NOTE: Panel-specific swiper overrides remain in panel CSS files
 * (e.g., .accreditation-panel .swiper, .video-logo-panel .swiper)
 * NOTE: Blog swiper styles are in content-blog.css (.blogSwiper)
 * ============================================================================
 */

/* Base swiper container */
.swiper {
	height: auto;
	padding-top: 10px;
	padding-bottom: 70px;
	width: 100%;
}

/* Slide styling */
.swiper-slide {
	border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-lg);
	box-shadow: 7px 7px 9px 0 var(--shadow-medium);
	overflow: visible;
}

/* Slide image link */
.swiper-slide a.listing-item-img {
	border-top-left-radius: var(--radius-lg);
	border-top-right-radius: var(--radius-lg);
	display: block;
	height: 146px;
	width: 100%;
}

/* Slide content area */
.swiper-slide .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);
	min-height: 230px;
	width: 100%;
}

/* Slide content headings */
.swiper-slide .course-content h3,
.swiper-slide .course-content h4 {
	color: var(--black);
	font-size: 19px;
	font-weight: 700;
	line-height: 22px;
	margin-bottom: 30px;
}

/* Slide content links */
.swiper-slide .course-content a {
	text-decoration: none;
}

/* Slide content paragraphs */
.swiper-slide .course-content p {
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 37px;
}

/* Slide content spans */
.swiper-slide .course-content span {
	display: inline-block;
	margin-right: 7px;
}

.swiper-slide .course-content span.right-arrow {
	display: inline-block;
	margin-left: auto;
}

/* ==========================================================================
   Swiper Navigation & Pagination
   ========================================================================== */

/* Pagination container */
.swiper-pagination {
	display: inline-block;
	position: relative;
}

/* Navigation buttons */
.swiper-button-next,
.swiper-button-prev {
	color: var(--brand-main);
	position: initial;
	height: auto;
	margin-top: var(--space-0);
}

.swiper-button-prev {
	margin-right: auto;
}

.swiper-button-next {
	margin-left: auto;
}

/* Navigation button arrows */
.swiper-button-prev::after,
.swiper-button-next::after {
	content: 'prev';
	font-size: 26px;
	font-weight: 900;
}

.swiper-button-next::after {
	content: 'next';
}

/* Pagination bullets positioning */
.swiper-pagination-bullets.swiper-pagination-horizontal {
	bottom: 0;
	margin: 0 5px;
}

/* Swiper wrapper */
.swiper-wrapper {
	margin-bottom: var(--space-8);
	box-sizing: border-box;
}

/* Active bullet */
.swiper-pagination-bullet-active {
	background: var(--brand-main);
}

/* Bullet sizing */
.swiper-pagination-bullet {
	width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 10px));
	height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 10px));
}