/*
 * Reusable mobile USP peek rail.
 *
 * Opt in on the rail container with .bekaa-usp-peek-rail and on each direct
 * card/item with .bekaa-usp-peek-rail__item. This owns only native horizontal
 * scroll/snap geometry; section typography, colors, borders, and spacing stay
 * with the page or component stylesheet.
 */

@media (max-width: 767px) {
	.bekaa-usp-peek-rail.bekaa-usp-peek-rail {
		--bekaa-usp-peek-card-size: 72%;
		--bekaa-usp-peek-edge: 35px;
		--bekaa-usp-peek-gap: 20px;
		--bekaa-usp-peek-width: 100vw;
		--bekaa-usp-peek-margin-left: calc(50% - 50vw);
		--bekaa-usp-peek-margin-right: calc(50% - 50vw);
		--bekaa-usp-peek-padding-top: 10px;
		--bekaa-usp-peek-padding-bottom: 24px;

		display: flex;
		gap: var(--bekaa-usp-peek-gap);
		width: var(--bekaa-usp-peek-width);
		margin-right: var(--bekaa-usp-peek-margin-right);
		margin-left: var(--bekaa-usp-peek-margin-left);
		padding: var(--bekaa-usp-peek-padding-top) 0 var(--bekaa-usp-peek-padding-bottom);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-padding-right: var(--bekaa-usp-peek-edge);
		scroll-padding-left: var(--bekaa-usp-peek-edge);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}

	.bekaa-usp-peek-rail::-webkit-scrollbar {
		display: none;
	}

	.bekaa-usp-peek-rail::before,
	.bekaa-usp-peek-rail::after {
		content: "";
		flex: 0 0 var(--bekaa-usp-peek-edge);
		height: 1px;
	}

	.bekaa-usp-peek-rail > .bekaa-usp-peek-rail__item {
		flex: 0 0 var(--bekaa-usp-peek-card-size);
		min-width: 0;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}