/* Swipe strip of wpagent/grid and wpagent/row (swipe: true), phones only
   (below md 768px): one sideways-scrolling row snapping to each child, the
   next one peeking in (swipeWidth, default 80%). md and up keep the normal
   grid/row layout. Loaded only on pages with a strip. */
/* Dots exist only below md; the strip is a normal layout above. */
.wpab-swipe-dots {
	display: none;
}

@media (max-width: 767.98px) {
	.wpab-grid.wpab-swipe,
	.wpab-row.wpab-swipe {
		display: flex;
		flex-flow: row nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.wpab-grid.wpab-swipe::-webkit-scrollbar,
	.wpab-row.wpab-swipe::-webkit-scrollbar {
		display: none;
	}

	/* Three classes: beat the per-instance column widths (.wpab.wpab-<uid>). */
	.wpab-grid.wpab-swipe > *,
	.wpab-row.wpab-swipe > .wpab.wpab-col {
		flex: 0 0 var(--wpab-swipe-w, 80%);
		min-width: 0;
		max-width: none;
		scroll-snap-align: start;
	}

	.wpab-swipe-dots {
		display: flex;
		justify-content: center;
		gap: 4px;
		margin-top: 12px;
	}
}

.wpab-swipe-dots__dot {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.wpab-swipe-dots__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.3;
	transition: opacity 0.2s, transform 0.2s;
}

.wpab-swipe-dots__dot[aria-current="true"]::before {
	opacity: 1;
	transform: scale(1.25);
}

.wpab-swipe-dots__dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
	border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
	.wpab-grid.wpab-swipe,
	.wpab-row.wpab-swipe {
		scroll-behavior: auto;
	}

	.wpab-swipe-dots__dot::before {
		transition: none;
	}
}