/**
 * CapSkip Blog Slider — front-end styles.
 *
 * Only the card/layout chrome lives here; the track, dots and drag behaviour
 * come from Elementor's own Swiper stylesheet, which this file depends on.
 * Colours, radius, spacing and typography are driven by Elementor controls via
 * inline selectors, so this file just sets sensible, overridable defaults.
 */

.csbs {
	position: relative;
}

.csbs-swiper {
	overflow: hidden;
}

/* Equal-height cards regardless of content length. */
.csbs-slide {
	height: auto;
	display: flex;
}

.csbs--grab .csbs-swiper {
	cursor: grab;
}

.csbs-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	background-color: #fff;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.06 ), 0 8px 24px rgba( 16, 24, 40, 0.06 );
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	will-change: transform;
}

.csbs--lift .csbs-card:hover {
	transform: translateY( -6px );
	box-shadow: 0 12px 32px rgba( 16, 24, 40, 0.14 );
}

/* --- Media --- */
.csbs-card__media {
	position: relative;
	display: block;
	height: 220px;
	overflow: hidden;
	background: #eef1f4;
}

.csbs-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.csbs-card__img--placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient( 135deg, #e9edf1 0%, #dfe4ea 100% );
}

.csbs-card:hover .csbs-card__img {
	transform: scale( 1.05 );
}

.csbs-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	background: #111827;
	border-radius: 999px;
	line-height: 1.4;
}

/* --- Body --- */
.csbs-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 20px 24px;
	gap: 10px;
}

.csbs-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: #8a9099;
}

.csbs-card__dot {
	opacity: 0.6;
}

.csbs-card__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.35;
	font-weight: 700;
}

.csbs-card__title a {
	color: #14161a;
	text-decoration: none;
	transition: color 0.2s ease;
}

.csbs-card__title a:hover {
	color: #2563eb;
}

.csbs-card__excerpt {
	margin: 0;
	font-size: 0.925rem;
	line-height: 1.6;
	color: #4a4f57;
}

.csbs-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	color: #2563eb;
}

.csbs-card__more svg {
	/* Centred on the line box the arrow sat 2px above the middle of the
	   lowercase letters (Plus Jakarta Sans sits low in its line), so it read
	   as higher than "Read more". */
	position: relative;
	top: 2px;
	transition: transform 0.2s ease;
}

.csbs-card__more:hover svg {
	transform: translateX( 3px );
}

/* --- Arrows --- */
.csbs-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	color: #14161a;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba( 16, 24, 40, 0.18 );
	cursor: pointer;
	transform: translateY( -50% );
	transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.csbs-arrow:hover {
	transform: translateY( -50% ) scale( 1.06 );
}

.csbs-arrow--prev {
	left: 8px;
}

.csbs-arrow--next {
	right: 8px;
}

.csbs-arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* --- Dots --- */
.csbs-pagination {
	position: static;
	margin-top: 18px;
	text-align: center;
}

.csbs-pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: #c7ccd3;
	opacity: 1;
	transition: width 0.2s ease, background 0.2s ease;
}

.csbs-pagination .swiper-pagination-bullet-active {
	width: 22px;
	background: #2563eb;
	border-radius: 6px;
}

/* Editor-only empty state. */
.csbs-empty {
	padding: 40px 20px;
	text-align: center;
	color: #8a9099;
	border: 1px dashed #c7ccd3;
	border-radius: 12px;
}

/* Keep arrows from overhanging off small screens. */
@media ( max-width: 767px ) {
	.csbs-arrow--prev {
		left: 4px;
	}
	.csbs-arrow--next {
		right: 4px;
	}
}