/*
 * VistaTeam – Google Web Stories / Elementor / BeTheme compatibility fixes.
 * v1.3.2
 */

.web-stories-list.is-view-type-circles,
.web-stories-list.is-view-type-circles *,
.web-stories-list.is-view-type-circles *::before,
.web-stories-list.is-view-type-circles *::after {
	box-sizing: border-box;
}

/* Keep the list constrained on desktop in all Elementor widget types. */
.elementor-widget-shortcode .web-stories-list.is-view-type-circles,
.elementor-widget-text-editor .web-stories-list.is-view-type-circles,
.elementor-widget-html .web-stories-list.is-view-type-circles,
.mcb-column .web-stories-list.is-view-type-circles,
.column .web-stories-list.is-view-type-circles {
	width: 100%;
	max-width: 100%;
}

.web-stories-list.is-view-type-circles .web-stories-list__inner-wrapper,
.web-stories-list.is-view-type-circles .web-stories-list__carousel {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* Prevent FOUC before the official carousel JS initializes. */
.web-stories-list.is-view-type-circles .web-stories-list__carousel:not(.glider) {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	overflow: hidden;
}

.web-stories-list.is-view-type-circles .web-stories-list__story {
	flex-shrink: 0;
}

.web-stories-list.is-view-type-circles .web-stories-list__story-poster img {
	object-fit: cover;
}

@media (max-width: 767px) {
	/*
	 * True viewport-width strip. The user's shortcode is inside an Elementor
	 * HTML widget, so that widget type must be targeted explicitly.
	 */
	.elementor-widget-shortcode .web-stories-list.is-view-type-circles,
	.elementor-widget-text-editor .web-stories-list.is-view-type-circles,
	.elementor-widget-html .web-stories-list.is-view-type-circles,
	.mcb-column .web-stories-list.is-view-type-circles,
	.column .web-stories-list.is-view-type-circles {
		position: relative;
		left: 50%;
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: -50vw !important;
		margin-right: 0 !important;
		margin-top: 14px;
		margin-bottom: 16px;
	}

	/* BeTheme/Elementor must not clip the full-bleed child. */
	.elementor-widget-html:has(.web-stories-list.is-view-type-circles),
	.elementor-widget-html:has(.web-stories-list.is-view-type-circles) > .elementor-widget-container {
		overflow: visible !important;
	}

	.web-stories-list.is-view-type-circles {
		--ws-circle-size: clamp(72px, 18.8vw, 82px) !important;
		--ws-font-size-circle-title: 12.5px !important;
		--vt-ws-edge-fade: 22px;
		--vt-ws-arrow-size: 34px;
		--vt-ws-gap: 5px;
	}

	.web-stories-list.is-view-type-circles .web-stories-list__inner-wrapper {
		position: relative;
		width: 100%;
		max-width: 100% !important;
		padding: 0 !important;
		overflow: hidden;
	}

	/* Soft edge fade: partial stories disappear naturally instead of being cut. */
	.web-stories-list.is-view-type-circles .web-stories-list__inner-wrapper::before,
	.web-stories-list.is-view-type-circles .web-stories-list__inner-wrapper::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		width: var(--vt-ws-edge-fade);
		pointer-events: none;
		z-index: 6;
	}

	.web-stories-list.is-view-type-circles .web-stories-list__inner-wrapper::before {
		left: 0;
		background: linear-gradient(to right, rgba(255,255,255,.96) 0%, rgba(255,255,255,.72) 38%, rgba(255,255,255,0) 100%);
	}

	.web-stories-list.is-view-type-circles .web-stories-list__inner-wrapper::after {
		right: 0;
		background: linear-gradient(to left, rgba(255,255,255,.96) 0%, rgba(255,255,255,.72) 38%, rgba(255,255,255,0) 100%);
	}

	.web-stories-list.is-view-type-circles .web-stories-list__carousel {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		padding: 0 !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		/* Vertical page scrolling stays native; horizontal movement is handled by our swipe code. */
		touch-action: pan-y pinch-zoom;
		scrollbar-width: none !important;
		cursor: grab;
	}

	.web-stories-list.is-view-type-circles .web-stories-list__carousel.vt-ws-dragging {
		cursor: grabbing;
		scroll-behavior: auto !important;
	}

	.web-stories-list.is-view-type-circles .web-stories-list__carousel img,
	.web-stories-list.is-view-type-circles .web-stories-list__carousel a {
		-webkit-user-drag: none;
		user-select: none;
	}

	.web-stories-list.is-view-type-circles .web-stories-list__carousel::-webkit-scrollbar,
	.web-stories-list.is-view-type-circles .glider-track::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}

	.web-stories-list.is-view-type-circles .web-stories-list__story,
	.web-stories-list.is-view-type-circles .glider-track > .web-stories-list__story {
		margin-left: 0 !important;
		margin-right: 0 !important;
		min-width: var(--ws-circle-size) !important;
		max-width: none !important;
		flex: 0 0 auto !important;
		text-align: center;
	}

	.web-stories-list.is-view-type-circles .web-stories-list__story-poster,
	.web-stories-list.is-view-type-circles .web-stories-list__story-poster > a {
		width: var(--ws-circle-size) !important;
		height: var(--ws-circle-size) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.web-stories-list.is-view-type-circles .web-stories-list__story-poster .web-stories-list__story-poster-placeholder,
	.web-stories-list.is-view-type-circles .web-stories-list__story-poster a > img,
	.web-stories-list.is-view-type-circles .web-stories-list__story-poster > img {
		width: var(--ws-circle-size) !important;
		height: var(--ws-circle-size) !important;
	}

	.web-stories-list.is-view-type-circles .web-stories-list__story-content-overlay {
		width: 100%;
		min-height: 31px;
		padding: 7px 4px 0 !important;
		text-align: center;
	}

	.web-stories-list.is-view-type-circles .story-content-overlay__title {
		display: -webkit-box;
		margin: 0 !important;
		overflow: hidden;
		font-size: var(--ws-font-size-circle-title) !important;
		font-weight: 600;
		line-height: 1.25;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.web-stories-list.is-view-type-circles .glider-track {
		margin-left: 0 !important;
		margin-right: 0 !important;
		align-items: flex-start;
		gap: var(--vt-ws-gap);
	}

	.web-stories-list.is-view-type-circles .web-stories-list__carousel:not(.glider) {
		gap: var(--vt-ws-gap);
		padding: 0 !important;
	}

	/*
	 * Hide every arrow supplied by Web Stories itself.
	 * New Chromium versions can create an additional native ::scroll-button(),
	 * which was the third arrow visible in the screenshot.
	 */
	.web-stories-list.is-view-type-circles .glider-prev,
	.web-stories-list.is-view-type-circles .glider-next,
	.web-stories-list.is-view-type-circles .amp-carousel-button-prev,
	.web-stories-list.is-view-type-circles .amp-carousel-button-next {
		display: none !important;
	}

	.web-stories-list.is-view-type-circles .web-stories-list__carousel::scroll-button(*) {
		display: none !important;
		content: none !important;
	}

	/* VistaTeam's single, deterministic navigation pair. */
	.web-stories-list.is-view-type-circles .vt-ws-nav {
		position: absolute;
		top: calc(var(--ws-circle-size) / 2);
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--vt-ws-arrow-size);
		height: var(--vt-ws-arrow-size);
		padding: 0;
		margin: 0;
		border: 1px solid rgba(28,61,114,.10);
		border-radius: 999px;
		background: rgba(255,255,255,.94);
		box-shadow: 0 8px 22px rgba(27,52,96,.14), 0 2px 7px rgba(27,52,96,.08);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		cursor: pointer;
		transform: translateY(-50%);
		z-index: 10;
		transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
	}

	.web-stories-list.is-view-type-circles .vt-ws-nav--prev { left: 8px; }
	.web-stories-list.is-view-type-circles .vt-ws-nav--next { right: 8px; }

	.web-stories-list.is-view-type-circles .vt-ws-nav::before {
		content: '';
		display: block;
		width: 9px;
		height: 9px;
		border-top: 2px solid #173b72;
		border-right: 2px solid #173b72;
	}

	.web-stories-list.is-view-type-circles .vt-ws-nav--prev::before {
		transform: rotate(-135deg);
		margin-left: 3px;
	}

	.web-stories-list.is-view-type-circles .vt-ws-nav--next::before {
		transform: rotate(45deg);
		margin-right: 3px;
	}

	.web-stories-list.is-view-type-circles .vt-ws-nav:hover,
	.web-stories-list.is-view-type-circles .vt-ws-nav:focus-visible {
		box-shadow: 0 10px 26px rgba(27,52,96,.18), 0 3px 9px rgba(27,52,96,.10);
	}

	.web-stories-list.is-view-type-circles .vt-ws-nav[disabled] {
		opacity: 0 !important;
		pointer-events: none;
	}
}

@media (max-width: 359px) {
	.web-stories-list.is-view-type-circles {
		--ws-circle-size: 68px !important;
		--ws-font-size-circle-title: 12px !important;
		--vt-ws-edge-fade: 16px;
		--vt-ws-arrow-size: 32px;
	}
}