/**
 * BFD Development Slider — front-end styles.
 * Built on native CSS scroll-snap, so touch swiping is handled by the browser.
 * Every rule is scoped to .bfd-slider.
 */

.bfd-slider {
	--bfd-slider-gap: 12px;
	--bfd-slider-radius: 12px;
	--bfd-slider-fit: cover;
	--bfd-slider-accent: #29abe2;
	--bfd-slider-arrow-bg: #ffffff;
	--bfd-slider-arrow-fg: #1b75bc;
	--bfd-slider-arrow-size: 36px;
	--bfd-slider-arrow-radius: 8px;
	--bfd-slider-thumbs: 4;
	--bfd-slider-thumb-gap: 8px;
	--bfd-slider-thumb-ratio: 16/10;
	--bfd-slider-thumb-radius: 8px;

	/*
	 * The shortcode writes the *-set variables inline. These derived variables are
	 * what the layout actually uses, so the media queries below can still override
	 * them — a media query can never beat an inline custom property directly.
	 */
	--bfd-slider-slides: var(--bfd-slider-slides-set, 1);
	--bfd-slider-h: var(--bfd-slider-h-set, 520px);

	position: relative;
	width: 100%;
}

.bfd-slider,
.bfd-slider *,
.bfd-slider *::before,
.bfd-slider *::after {
	box-sizing: border-box;
}

.bfd-slider__viewport {
	position: relative;
	overflow: hidden;
	border-radius: var(--bfd-slider-radius);
}

/* Scroll container */
.bfd-slider .bfd-slider__track {
	display: flex;
	gap: var(--bfd-slider-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.bfd-slider .bfd-slider__track::-webkit-scrollbar {
	display: none;
}

.bfd-slider .bfd-slider__track:focus-visible {
	outline: 2px solid var(--bfd-slider-accent);
	outline-offset: 3px;
}

/* Slides */
.bfd-slider .bfd-slider__slide {
	position: relative;
	flex: 0 0 calc(
		(100% - (var(--bfd-slider-gap) * (var(--bfd-slider-slides) - 1))) / var(--bfd-slider-slides)
	);
	margin: 0;
	padding: 0;
	list-style: none;
	height: var(--bfd-slider-h);
	scroll-snap-align: start;
	scroll-snap-stop: always;
	border-radius: var(--bfd-slider-radius);
	overflow: hidden;
	background: #eef1f4;
}

.bfd-slider--ratio .bfd-slider__slide {
	height: auto;
	aspect-ratio: var(--bfd-slider-ratio);
}

.bfd-slider .bfd-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	margin: 0;
	object-fit: var(--bfd-slider-fit);
	object-position: center;
	border-radius: inherit;
}

.bfd-slider--ratio .bfd-slider__img {
	height: 100%;
}

.bfd-slider .bfd-slider__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 28px 20px 16px;
	background: linear-gradient(to top, rgba(12, 20, 27, 0.72), rgba(12, 20, 27, 0));
	font-size: 14px;
	line-height: 1.5;
	color: #fff;
}

/* Arrows */
.bfd-slider .bfd-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--bfd-slider-arrow-size);
	height: var(--bfd-slider-arrow-size);
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	background: var(--bfd-slider-arrow-bg);
	border: 0;
	border-radius: var(--bfd-slider-arrow-radius);
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14), 0 4px 12px rgba(16, 24, 40, 0.12);
	color: var(--bfd-slider-arrow-fg);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.bfd-slider .bfd-slider__arrow--prev {
	left: 12px;
}

.bfd-slider .bfd-slider__arrow--next {
	right: 12px;
}

.bfd-slider .bfd-slider__arrow svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.bfd-slider .bfd-slider__arrow:hover,
.bfd-slider .bfd-slider__arrow:focus-visible {
	background: var(--bfd-slider-accent);
	color: #fff;
}

.bfd-slider .bfd-slider__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* Counter badge */
.bfd-slider .bfd-slider__counter {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	padding: 5px 12px;
	background: rgba(12, 20, 27, 0.62);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	letter-spacing: 0.02em;
}

/* "Featured" style badge */
.bfd-slider .bfd-slider__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 6px 12px;
	background: rgba(16, 24, 32, 0.82);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
	letter-spacing: 0.02em;
}

/* Thumbnail strip */
.bfd-slider .bfd-slider__thumbs {
	display: grid;
	grid-template-columns: repeat(var(--bfd-slider-thumbs), minmax(0, 1fr));
	gap: var(--bfd-slider-thumb-gap);
	margin-top: var(--bfd-slider-thumb-gap);
}

.bfd-slider .bfd-slider__thumb {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	aspect-ratio: var(--bfd-slider-thumb-ratio);
	background: #eef1f4;
	border: 0;
	border-radius: var(--bfd-slider-thumb-radius);
	box-shadow: none;
	overflow: hidden;
	cursor: pointer;
	transition: opacity 0.18s ease;
}

.bfd-slider .bfd-slider__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
}

.bfd-slider .bfd-slider__thumb:hover {
	opacity: 0.88;
}

.bfd-slider .bfd-slider__thumb.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 3px solid var(--bfd-slider-accent);
	border-radius: inherit;
	pointer-events: none;
}

.bfd-slider .bfd-slider__thumb:focus-visible {
	outline: 2px solid var(--bfd-slider-accent);
	outline-offset: 2px;
}

/* "+6 More" overlay on the last tile */
.bfd-slider .bfd-slider__more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	background: rgba(27, 117, 188, 0.72);
	border-radius: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	text-align: center;
}

/* Dots */
.bfd-slider .bfd-slider__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.bfd-slider .bfd-slider__dot {
	width: 9px;
	height: 9px;
	margin: 0;
	padding: 0;
	background: #cfd6dc;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	transition: width 0.2s ease, background-color 0.2s ease;
}

.bfd-slider .bfd-slider__dot:hover {
	background: #9fa9b2;
}

.bfd-slider .bfd-slider__dot.is-active {
	width: 26px;
	background: var(--bfd-slider-accent);
}

.bfd-slider .bfd-slider__dot:focus-visible {
	outline: 2px solid var(--bfd-slider-accent);
	outline-offset: 3px;
}

/* Responsive: step multi-slide layouts down instead of squeezing them. */
@media (max-width: 1024px) {
	.bfd-slider {
		--bfd-slider-slides: min(var(--bfd-slider-slides-set, 1), 2);
	}
}

@media (max-width: 700px) {
	.bfd-slider {
		--bfd-slider-slides: 1;
		--bfd-slider-h: min(var(--bfd-slider-h-set, 520px), 340px);
	}

	.bfd-slider {
		--bfd-slider-arrow-size: 32px;
		--bfd-slider-thumb-gap: 6px;
		--bfd-slider-thumb-radius: 6px;
	}

	.bfd-slider .bfd-slider__arrow--prev {
		left: 8px;
	}

	.bfd-slider .bfd-slider__arrow--next {
		right: 8px;
	}

	.bfd-slider .bfd-slider__arrow svg {
		width: 19px;
		height: 19px;
	}

	.bfd-slider .bfd-slider__more {
		font-size: 12px;
	}

	.bfd-slider .bfd-slider__badge {
		top: 10px;
		left: 10px;
		padding: 5px 10px;
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bfd-slider .bfd-slider__track {
		scroll-behavior: auto;
	}
}

/* Editor-only diagnostic message */
.bfd-slider-notice {
	margin: 0;
	padding: 14px 18px;
	background: #eef7fd;
	border-left: 4px solid #29abe2;
	border-radius: 6px;
	font-size: 14px;
	color: #14506f;
}