/**
 * JAN Slider Overlay – Frontend Styles
 *
 * Optik orientiert an jan-promotion.at Referenz.
 */

/* =========================================================================
   Slider Container
   Uses WordPress theme color: --wp--preset--color--primary (#3EA6B3)
   ========================================================================= */
.jan-slider-overlay {
	position: relative;
	padding: 0;
	margin: 16px 0 0;
}

.jan-slider-overlay .swiper {
	overflow: hidden;
}

/* =========================================================================
   Navigation Arrows – bottom-right below slider
   ========================================================================= */
.jan-slider-overlay .swiper-navigation {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 12px;
}

.jan-slider-overlay .swiper-btn {
	width: 56px;
	height: 56px;
	padding: 4px;
	background: transparent;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 9999px;
	color: var(--wp--preset--color--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.jan-slider-overlay .swiper-btn:hover {
	background: var(--wp--preset--color--primary-600, #338EA1);
	border-color: var(--wp--preset--color--primary-600, #338EA1);
	color: #fff;
}

.jan-slider-overlay .swiper-btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

/* =========================================================================
   Pagination – numbered tabs like reference
   ========================================================================= */
.jan-slider-overlay .swiper-pagination {
	position: relative;
	margin-top: 12px;
	text-align: center;
}

.jan-slider-overlay .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 4px;
	background: #ccc;
	border-radius: 50%;
	opacity: 1;
	transition: background 0.2s ease;
}

.jan-slider-overlay .swiper-pagination-bullet:hover {
	background: #999;
}

.jan-slider-overlay .swiper-pagination-bullet-active {
	background: var(--wp--preset--color--primary);
}

/* =========================================================================
   Individual Slide
   ========================================================================= */
.jan-slide {
	position: relative;
	overflow: hidden;
	min-height: 50px; /* Fallback until images load */
	display: flex;
	justify-content: center;
	height: auto;
}

/* Multi-slide: inner fills the slide width for consistent card sizing */
.jan-slide .jan-slide-inner {
	width: 100%;
}

/* Inner wrapper: border wraps only the content, not the full slide width */
.jan-slide-inner {
	display: flex;
	flex-direction: column;
	border: 4px solid var(--wp--preset--color--primary);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	height: 100%;
	box-sizing: border-box;
	padding-bottom: var(--jan-slide-padding-bottom, 0px);
}

.jan-slide-link {
	display: block;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

/* Overlay slides: visual click affordance */
.jan-slide--overlay {
	cursor: pointer;
}

.jan-slide--overlay .jan-slide-lightbox-trigger {
	cursor: pointer;
}

.jan-slide-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
	max-height: var(--jan-slide-max-height, none);
}

/* =========================================================================
   Slide Label
   ========================================================================= */
.jan-slide-label {
	display: block;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	padding: 8px 4px 4px;
	background: #fff;
}

/* =========================================================================
   Lightbox Footer (GLightbox custom)
   ========================================================================= */
.glightbox-footer {
	text-align: center;
	padding: 16px 20px 8px;
}

.glightbox-cta-button {
	display: inline-block;
	padding: 10px 28px;
	background: var(--wp--preset--color--primary, #3EA6B3);
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 600;
	transition: background 0.2s ease;
}

.glightbox-cta-button:hover {
	background: var(--wp--preset--color--primary-600, #338EA1);
	color: #fff;
}

/* =========================================================================
   Single-Slide Mode (Einzelbild-Modus)
   ========================================================================= */
.jan-slider-overlay--single .jan-slide-image {
	max-height: var(--jan-slide-max-height, 500px);
	min-width: var(--jan-slide-min-width, 300px);
	width: 100%;
	object-fit: contain;
}

.jan-slider-overlay--single .jan-slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

.jan-slider-overlay--single .jan-slide-inner {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	width: auto; /* Override multi-slide 100% — stay content-hugging */
}

.jan-slider-overlay--single .jan-slide-link {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media ( max-width: 768px ) {
	.jan-slider-overlay .swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		margin: 0 3px;
	}

	.jan-slide-label {
		font-size: 12px;
		padding: 6px 4px 4px;
	}
}

@media ( max-width: 480px ) {
	.jan-slider-overlay .swiper-pagination-bullet {
		width: 7px;
		height: 7px;
		margin: 0 2px;
	}
}