/* --- Container --- */
.lcs-slider {
	position: relative;
	/*width: 100%;*/
	/*max-width: 100%; */
	margin: 0px auto !important;
	overflow: hidden;
	box-sizing: border-box;
	border-radius: 25px;
	padding: 0; /* remove margins/padding */
}

/* --- Viewport and track --- */
.lcs-viewport {
	width: 100%;
	overflow: hidden;
}

.lcs-track {
	display: flex;
	transition: transform 400ms ease;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 100%;
}

.lcs-slide {
	flex: 0 0 100%;
	box-sizing: border-box;
	position: relative;
}

/* --- Card (image + overlay) --- */
.lcs-card {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
}

/* --- Image --- */
.lcs-thumb img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* --- Overlay --- */
.lcs-body {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 16px;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
	color: #fff;
	box-sizing: border-box;
}

.lcs-title {
	font-size: 20px;
	font-weight: bold;
	margin: 0 0 6px;
	line-height: 1.3;
	color: #eee;
}

.lcs-excerpt {
	font-size: 15px;
	margin: 0;
	line-height: 1.4;
	color: #ddd;
}

/* Mobile only */
@media screen and (max-width: 576px) {
    .lcs-excerpt {
        display: none;
    }
}

/* --- Arrows --- */
.lcs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	width: 48px;
	height: 45px;
	/*border-radius: 50%;*/
	padding-bottom: 25px;
	cursor: pointer;
	font-size: 28px;
	/*font-weight: bold;*/
	line-height: 36px;
	vertical-align: middle;
	z-index: 3;
	transition: background 0.3s ease;
}

.lcs-arrow:hover {
	background: rgba(0, 0, 0, 0.6);
}

.lcs-prev { left: 12px; }
.lcs-next { right: 12px; }

.lcs-empty {
	padding: 12px;
	color: #666;
	text-align: center;
}


./* Let the viewport resize naturally */
.lcs-slider,
.lcs-viewport {
    height: auto !important;
}

.lcs-track {
    display: flex;
    align-items: flex-start;
    transition: transform 400ms ease;
}

.lcs-slide {
    flex: 0 0 100%;
    height: auto !important;
}

.lcs-thumb img {
    width: 100%;
    height: auto !important;
    object-fit: contain; /* or cover if you want cropping */
}

/* Smooth height animation when switching slides */
.lcs-viewport {
    /*transition: height 0.4s ease;*/
}

/* Proper arrow centering, even if height changes */
.lcs-slider {
    position: relative;
}

.lcs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}