/**
 * CSS scroll-snap sliders for admin-driven shortcode content.
 * Dot visuals come from components.css (.hbn-dots / .hbn-dots__dot).
 * No arrow controls.
 */

.hbn-slider {
	display: flex;
	flex-direction: column;
	gap: 16px;
	/*
	 * Width containment only here — no overflow on .hbn-slider so card
	 * box-shadows are not clipped. Elementor shortcode wrappers below use
	 * overflow-x:clip when they contain a slider (sticky-safe).
	 */
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	width: 100%;
}

/*
 * Narrow containment to Elementor shortcode widgets / containers that actually
 * hold an HBN slider. Do not overflow-clip unrelated .e-con content.
 */
.e-con:has(.hbn-slider),
.e-con:has(.hbn-slider) > .e-con-inner,
.e-con:has(.hbn-slider-clip),
.e-con:has(.hbn-slider-clip) > .e-con-inner,
.elementor-widget-shortcode:has(.hbn-slider),
.elementor-widget-shortcode:has(.hbn-slider) .elementor-widget-container,
.elementor-shortcode:has(.hbn-slider) {
	max-width: 100%;
	min-width: 0;
}

.elementor-widget-shortcode:has(.hbn-slider),
.elementor-widget-shortcode:has(.hbn-slider) .elementor-widget-container,
.elementor-shortcode:has(.hbn-slider) {
	box-sizing: border-box;
}

.hbn-slider__track {
	-ms-overflow-style: none;
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	scrollbar-width: none;
	width: 100%;
}

.hbn-slider__track:focus-visible {
	outline: 2px solid var(--hbn-color-teal-on-light);
	outline-offset: 2px;
}

.hbn-slider__track::-webkit-scrollbar {
	display: none;
}

.hbn-slider__item {
	box-sizing: border-box;
	min-width: 0;
}

/* Expand hit area for dots (visual size stays 12px from components.css). */
.hbn-slider .hbn-dots__dot {
	position: relative;
}

.hbn-slider .hbn-dots__dot::before {
	content: "";
	height: 24px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
}

.hbn-slider .hbn-dots {
	justify-content: center;
}

/* Reset button chrome when JS builds dots as <button>. */
.hbn-slider .hbn-dots__dot {
	appearance: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.hbn-slider .hbn-dots__dot:focus-visible {
	outline: 2px solid var(--hbn-color-teal-on-light);
	outline-offset: 2px;
}

/*
 * --always: horizontal scroll-snap on all viewports.
 */
.hbn-slider--always .hbn-slider__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.hbn-slider--always .hbn-slider__item {
	box-sizing: border-box;
	flex: 0 0 var(--hbn-slider-basis, 85%);
	/* Shadow gutter inside the snapped item (survives scroll-snap). */
	padding: 24px;
	scroll-snap-align: start;
}

/*
 * --mobile: CSS grid on desktop/tablet; scroll-snap only ≤767px.
 */
.hbn-slider--mobile .hbn-slider__track {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(var(--hbn-slider-cols, 2), minmax(0, 1fr));
	overflow: visible;
}

.hbn-slider--mobile .hbn-slider__item {
	min-width: 0;
}

.hbn-slider--mobile .hbn-dots {
	display: none;
}

@media (max-width: 767px) {
	.hbn-slider--mobile .hbn-slider__track {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.hbn-slider--mobile .hbn-slider__item {
		box-sizing: border-box;
		padding: 24px;
	}

	.hbn-slider--mobile .hbn-slider__item {
		flex: 0 0 var(--hbn-slider-basis, 85%);
		scroll-snap-align: start;
	}

	.hbn-slider--mobile .hbn-dots {
		display: flex;
	}
}

/* Grid-only lists (slider=off): same column custom property. */
.hbn-cards {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(var(--hbn-cards-cols, 2), minmax(0, 1fr));
	max-width: 100%;
	min-width: 0;
	width: 100%;
}

.hbn-cards--cols-1 {
	--hbn-cards-cols: 1;
}

.hbn-cards--cols-2 {
	--hbn-cards-cols: 2;
}

.hbn-cards--cols-3 {
	--hbn-cards-cols: 3;
}

.hbn-cards--cols-4 {
	--hbn-cards-cols: 4;
}

.hbn-cards--cols-5 {
	--hbn-cards-cols: 5;
}

.hbn-slider--cols-1 {
	--hbn-slider-cols: 1;
}

.hbn-slider--cols-2 {
	--hbn-slider-cols: 2;
}

.hbn-slider--cols-3 {
	--hbn-slider-cols: 3;
}

.hbn-slider--cols-4 {
	--hbn-slider-cols: 4;
}

.hbn-slider--cols-5 {
	--hbn-slider-cols: 5;
}

.hbn-slider--basis-85 {
	--hbn-slider-basis: 85%;
}

.hbn-slider--basis-78 {
	--hbn-slider-basis: 78%;
}

@media (max-width: 767px) {
	.hbn-cards {
		grid-template-columns: 1fr;
	}
}

/* PROVISIONAL tablet: fewer columns for dense grids. */
@media (min-width: 768px) and (max-width: 1024px) {
	.hbn-cards--cols-5 {
		--hbn-cards-cols: 3;
	}

	.hbn-slider--cols-5 {
		--hbn-slider-cols: 3;
	}

	.hbn-cards--cols-4 {
		--hbn-cards-cols: 2;
	}

	.hbn-slider--cols-4 {
		--hbn-slider-cols: 2;
	}
}

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

/*
 * Clip wrapper: contains the slider's horizontal hang (padding + negative
 * margin) so document.scrollWidth does not grow. overflow-x: clip (not hidden)
 * so overflow-y can stay visible and top/bottom shadows are not clipped.
 */
.hbn-slider-clip {
	background: transparent;
	box-sizing: border-box;
	/*
	 * inline-block lets the slider's vertical negative margin shrink this box
	 * to the cards (block + overflow-x:clip previously ate that hang).
	 * Horizontal hang is clipped here; vertical overflow stays visible.
	 */
	display: inline-block;
	margin: 0;
	max-width: 100%;
	min-width: 0;
	overflow-x: clip;
	overflow-y: visible;
	padding: 0;
	vertical-align: top;
	width: 100%;
}

/*
 * Always-on scroll-snap lists. Column count is --hbn-slider-cols on the wrapper
 * so reviews (3/2/1) and destinations (5/2/1) share one module.
 *
 * Shadow gutter: padding 24px + matching negative margin. Width is 100% + both
 * gutters so the box expands instead of shifting. Horizontal overflow is clipped
 * by .hbn-slider-clip; vertical overflow stays visible for shadows.
 */
.hbn-slider--reviews,
.hbn-slider--destinations,
.hbn-slider--tours,
.hbn-slider--journal {
	background: transparent;
	box-sizing: border-box;
	margin: -24px;
	max-width: none;
	overflow: visible;
	padding: 24px;
	width: calc(100% + 48px);
}

.hbn-slider--reviews,
.hbn-slider--destinations {
	--hbn-slider-cols: 3;
}

.hbn-slider--destinations {
	--hbn-slider-cols: 5;
}

/* B2B company reviews: 2 cards above 767px. Mobile uses the shared 1-column rule. */
.hbn-slider--company-reviews {
	--hbn-slider-cols: 2;
}

.hbn-slider--tours,
.hbn-slider--journal {
	--hbn-slider-cols: 2;
}

.hbn-slider--reviews {
	gap: var(--hbn-reviews-dots-gap, 40px);
	--hbn-slider-gap: var(--hbn-reviews-gap, 24px);
}

.hbn-slider--destinations {
	gap: var(--hbn-dest-dots-gap, 40px);
	--hbn-slider-gap: var(--hbn-dest-card-gap, 16px);
}

.hbn-slider--tours {
	gap: var(--hbn-tours-dots-gap, 40px);
	--hbn-slider-gap: var(--hbn-tour-card-gap, 24px);
}

.hbn-slider--journal {
	gap: var(--hbn-journal-dots-gap, 40px);
	--hbn-slider-gap: var(--hbn-journal-card-gap, 24px);
}

.hbn-slider--reviews .hbn-slider__track,
.hbn-slider--destinations .hbn-slider__track,
.hbn-slider--tours .hbn-slider__track,
.hbn-slider--journal .hbn-slider__track {
	align-items: stretch;
	display: flex;
	gap: var(--hbn-slider-gap, 24px);
	/*
	 * overflow-x: auto computes overflow-y to auto and would clip card
	 * shadows at the track edge. Vertical padding keeps the shadow inside
	 * the scrollport; matching negative margin keeps outer height = cards.
	 */
	margin-block: -24px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-block: 24px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.hbn-slider--reviews .hbn-slider__item,
.hbn-slider--destinations .hbn-slider__item,
.hbn-slider--tours .hbn-slider__item,
.hbn-slider--journal .hbn-slider__item {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 calc((100% - (var(--hbn-slider-cols) - 1) * var(--hbn-slider-gap, 24px)) / var(--hbn-slider-cols));
	padding: 0;
	scroll-snap-align: start;
}

.hbn-slider--reviews .hbn-slider__item {
	min-width: min(300px, 100%);
}

.hbn-slider--reviews .hbn-dots,
.hbn-slider--destinations .hbn-dots,
.hbn-slider--tours .hbn-dots,
.hbn-slider--journal .hbn-dots {
	justify-content: center;
}

.hbn-slider--reviews .hbn-dots__dot {
	border-radius: 15px;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.hbn-slider--reviews {
		--hbn-slider-cols: 2;
	}

	.hbn-slider--destinations {
		--hbn-slider-cols: 2;
	}

	.hbn-slider--tours,
	.hbn-slider--journal {
		--hbn-slider-cols: 2;
	}
}

@media (max-width: 767px) {
	.hbn-slider--reviews,
	.hbn-slider--destinations,
	.hbn-slider--tours,
	.hbn-slider--journal {
		--hbn-slider-cols: 1;
	}
}