/* lakasg Category Slider */
.lakasg-wrap {
	position: relative;
	width: 100%;
	--lakasg-content-justify: flex-end;
	--lakasg-text-align: left;
	--lakasg-image-fit: cover;
}

.lakasg-wrap .swiper {
	overflow: hidden;
}

/* (v2.13.4) Slide height — fallback baseline so slides have height even
   when Elementor's dynamic per-instance CSS hasn't regenerated. The
   widget's "Card Height" control still overrides these via {{WRAPPER}}
   selectors, but if those don't apply (stale CSS cache, dynamic CSS
   regeneration didn't run after a plugin update, etc.) the slider still
   has visible dimensions. Pre-v2.13.0 this was implicitly handled by
   Elementor's bundled Swiper 5; Swiper 11 (which we now load) is
   stricter about slide sizing and exposed the gap. */
.lakasg-wrap .swiper-slide {
	height: auto;
	display: flex;
}

.lakasg-slide {
	height: auto;
}

.lakasg-slide-inner {
	position: relative;
	overflow: hidden;
	background: #f5f5f5;
	width: 100%;
	min-height: 360px;       /* desktop fallback */
	height: 100%;
}

@media (max-width: 1024px) {
	.lakasg-slide-inner { min-height: 300px; } /* tablet fallback */
}

@media (max-width: 767px) {
	.lakasg-slide-inner { min-height: 260px; } /* mobile fallback */
}

.lakasg-slide-link {
	position: relative;
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.lakasg-slide-image,
.lakasg-slide-overlay,
.lakasg-slide-content {
	position: absolute;
	inset: 0;
}

/* (v2.13.4) Fallback overlay so slides have visible contrast even when
   Elementor's dynamic per-instance CSS hasn't applied. The widget's
   "Overlay Color" control overrides this. */
.lakasg-slide-overlay {
	background: rgba(0, 0, 0, 0.35);
}

.lakasg-slide-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: var(--lakasg-image-fit, cover);
	transition: transform 0.45s ease;
}

.lakasg-slide-link:hover .lakasg-slide-image img,
.lakasg-slide-link:focus .lakasg-slide-image img {
	transform: scale(1.04);
}

.lakasg-slide-content {
	display: flex;
	align-items: var(--lakasg-content-justify);
	justify-content: flex-start;
	text-align: var(--lakasg-text-align);
	z-index: 3;
	/* (v2.13.4) Fallback padding so content doesn't hug the edges when
	   Elementor's "Content Padding" control hasn't applied. */
	padding: 24px;
	color: #fff;
}

.lakasg-slide-content-inner {
	position: relative;
	width: 100%;
}

.lakasg-slide-title {
	margin: 0;
	line-height: 1.15;
	/* (v2.13.4) Fallback typography */
	font-size: 1.4rem;
	font-weight: 700;
	color: inherit;
}

.lakasg-slide-count {
	font-size: 0.9rem;
	margin-bottom: 0.55rem;
	opacity: 0.95;
	color: inherit;
}

.lakasg-slide-subtitle {
	margin-top: 0.5rem;
	line-height: 1.5;
	color: inherit;
}

.lakasg-slide-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1rem;
	padding: 0.8rem 1rem;
	font-weight: 600;
	line-height: 1;
	transition: all 0.2s ease;
	/* (v2.13.4) Fallback button colors */
	background: #ffffff;
	color: #222;
	border-radius: 4px;
}

.lakasg-nav {
	pointer-events: none;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 5;
}

.lakasg-nav button {
	pointer-events: auto;
	border: 0;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 18px rgba(0,0,0,0.14);
	margin: 0 10px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.lakasg-nav button:hover {
	transform: scale(1.05);
}

.lakasg-pagination {
	position: static;
	margin-top: 16px;
	text-align: center;
}

.lakasg-pagination .swiper-pagination-bullet {
	opacity: 1;
}

.lakasg-empty {
	padding: 16px 18px;
	border: 1px dashed #c9c9c9;
	background: #fafafa;
	color: #444;
}