.promodose-customer-stories {
	--promodose-stories-direction: rtl;
	--promodose-story-accent: #f2bd7a;
	--promodose-story-card-height: 285px;
	--promodose-story-featured-height: 360px;
	background: color-mix(in srgb, var(--wp--preset--color--turquoise) 6%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--navy);
	direction: var(--promodose-stories-direction);
	margin-block-start: 0;
	overflow: hidden;
	padding: clamp(3rem, 6vw, 5.75rem) clamp(1rem, 3vw, 2rem);
	position: relative;
}

.promodose-customer-stories,
.promodose-customer-stories * {
	box-sizing: border-box;
}

.promodose-customer-stories.is-content-direction-ltr {
	--promodose-stories-direction: ltr;
}

.promodose-customer-stories__inner {
	background: var(--wp--preset--color--base);
	border: 1px solid rgb(18 40 74 / 6%);
	border-radius: 8px;
	box-shadow: 0 18px 42px rgb(18 40 74 / 5%);
	margin-inline: auto;
	max-width: min(1500px, calc(100vw - 2rem));
	overflow: hidden;
	padding: clamp(1.1rem, 3.4vw, 3rem);
}

.promodose-customer-stories__header {
	align-items: end;
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr) auto;
	margin-block-end: clamp(1.6rem, 4vw, 3.1rem);
}

.promodose-customer-stories__copy {
	display: grid;
	gap: 0.65rem;
	max-width: 760px;
}

.promodose-customer-stories__eyebrow {
	align-items: center;
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	font-weight: 900;
	gap: 0.65rem;
	margin: 0;
}

.promodose-customer-stories__eyebrow::before {
	background: var(--wp--preset--color--turquoise);
	border-radius: 999px;
	content: "";
	height: 4px;
	width: 44px;
}

.promodose-customer-stories__title {
	color: var(--wp--preset--color--navy);
	font-size: clamp(1.75rem, 3vw, 2.7rem);
	line-height: 1.16;
	margin: 0;
}

.promodose-customer-stories__description {
	color: var(--wp--preset--color--muted);
	font-weight: 700;
	line-height: 1.8;
	margin: 0;
	max-width: 680px;
}

.promodose-customer-stories__controls {
	align-items: center;
	display: inline-flex;
	gap: 0.7rem;
}

.promodose-customer-stories__arrow {
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--promodose-story-accent) 48%, transparent);
	border-radius: 999px;
	box-shadow: 0 12px 30px rgb(18 40 74 / 8%);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	display: inline-flex;
	height: 44px;
	justify-content: center;
	padding: 0;
	transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
	width: 44px;
}

.promodose-customer-stories__arrow.is-primary,
.promodose-customer-stories__arrow:hover,
.promodose-customer-stories__arrow:focus-visible {
	background: var(--promodose-story-accent);
	border-color: var(--promodose-story-accent);
	outline: none;
	transform: translateY(-1px);
}

.promodose-customer-stories__arrow svg {
	fill: currentColor;
	height: 24px;
	width: 24px;
}

.promodose-customer-stories__stage {
	direction: ltr;
	display: grid;
	gap: clamp(1rem, 2.5vw, 2rem);
	grid-template-columns: minmax(300px, 0.43fr) minmax(0, 0.57fr);
	min-height: var(--promodose-story-featured-height);
	position: relative;
}

.promodose-customer-stories__featured {
	align-self: stretch;
	background: color-mix(in srgb, var(--wp--preset--color--turquoise) 8%, var(--wp--preset--color--base-2));
	border-radius: 8px;
	height: var(--promodose-story-featured-height);
	min-height: var(--promodose-story-featured-height);
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.promodose-customer-stories__featured-item {
	inset: 0;
	opacity: 0;
	position: absolute;
	transform: scale(1.025);
	transition: opacity 260ms ease, transform 320ms ease;
}

.promodose-customer-stories__featured-item.is-active {
	opacity: 1;
	transform: scale(1);
	z-index: 2;
}

.promodose-customer-stories__zoom-trigger {
	background: transparent;
	border: 0;
	cursor: zoom-in;
	display: block;
	height: 100%;
	padding: 0;
	width: 100%;
}

.promodose-customer-stories__featured-image,
.promodose-customer-stories__featured-video {
	display: block;
	height: 100%;
	max-height: none;
	max-width: none;
	object-fit: cover;
	width: 100%;
}

.promodose-customer-stories__featured-placeholder {
	align-items: center;
	color: var(--wp--preset--color--muted);
	display: flex;
	font-weight: 900;
	height: 100%;
	justify-content: center;
	padding: 1rem;
	text-align: center;
}

.promodose-customer-stories__zoom-label {
	background: rgb(255 255 255 / 88%);
	border-radius: 999px;
	color: var(--wp--preset--color--navy);
	font-size: 0.82rem;
	font-weight: 900;
	inset-block-end: 1rem;
	inset-inline-end: 1rem;
	opacity: 0;
	padding: 0.4rem 0.8rem;
	position: absolute;
	transform: translateY(6px);
	transition: opacity 180ms ease, transform 180ms ease;
}

.promodose-customer-stories__zoom-trigger:hover .promodose-customer-stories__zoom-label,
.promodose-customer-stories__zoom-trigger:focus-visible .promodose-customer-stories__zoom-label {
	opacity: 1;
	transform: translateY(0);
}

.promodose-customer-stories__play {
	align-items: center;
	background: var(--promodose-story-accent);
	border-radius: 999px;
	box-shadow: 0 16px 36px rgb(18 40 74 / 18%);
	color: var(--wp--preset--color--navy);
	display: inline-flex;
	height: 68px;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	justify-content: center;
	pointer-events: none;
	position: absolute;
	transform: translate(-50%, -50%);
	width: 68px;
	z-index: 4;
}

.promodose-customer-stories__play svg {
	fill: currentColor;
	height: 32px;
	width: 32px;
}

.promodose-customer-stories__viewport {
	align-self: center;
	background: transparent;
	direction: ltr;
	margin-inline-start: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	z-index: 3;
}

.promodose-customer-stories__track {
	display: flex;
	gap: clamp(1rem, 2vw, 1.35rem);
	transition: transform 360ms ease;
	will-change: transform;
}

.promodose-customer-stories__track,
.promodose-customer-stories__stage {
	background: transparent;
}

.promodose-story-slide {
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	color: var(--wp--preset--color--navy);
	direction: var(--promodose-stories-direction);
	display: grid;
	flex: 0 0 clamp(360px, 42vw, 520px);
	gap: 1rem;
	min-height: var(--promodose-story-card-height);
	padding: clamp(1.15rem, 2vw, 1.55rem);
	position: relative;
	transition: box-shadow 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.promodose-story-slide:not(.is-active) {
	box-shadow: none;
	opacity: 0.5;
}

.promodose-story-slide.is-active {
	box-shadow: 0 10px 26px rgb(18 40 74 / 5%);
	transform: translateY(-4px);
}

.promodose-story-slide.is-active::before {
	background: var(--promodose-story-accent);
	border-radius: 999px;
	content: "";
	height: 3px;
	inset-block-start: 0;
	inset-inline: 1.4rem;
	position: absolute;
}

.promodose-story-slide__quote {
	color: var(--wp--preset--color--contrast);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.78;
	margin: 0;
	min-height: 7.1em;
}

.promodose-story-slide__title {
	color: var(--wp--preset--color--navy);
	font-size: 1rem;
	line-height: 1.35;
	margin: 0;
}

.promodose-story-slide__reviewer {
	align-items: center;
	display: flex;
	gap: 0.8rem;
	margin-block-start: auto;
}

.promodose-story-slide__avatar {
	align-items: center;
	aspect-ratio: 1;
	background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--turquoise));
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	display: inline-flex;
	flex: 0 0 58px;
	font-size: 1.1rem;
	font-weight: 950;
	height: 58px;
	justify-content: center;
	overflow: hidden;
	width: 58px;
}

.promodose-story-slide__avatar-image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.promodose-story-slide__meta {
	display: grid;
	gap: 0.18rem;
	min-width: 0;
}

.promodose-story-slide__name,
.promodose-story-slide__role,
.promodose-story-slide__handle {
	margin: 0;
}

.promodose-story-slide__name {
	color: var(--wp--preset--color--navy);
	font-size: 0.98rem;
	font-weight: 950;
	line-height: 1.25;
}

.promodose-story-slide__role,
.promodose-story-slide__handle {
	color: var(--wp--preset--color--muted);
	font-size: 0.82rem;
	font-weight: 800;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.promodose-story-slide__handle {
	color: var(--wp--preset--color--primary);
}

.promodose-story-slide__stars {
	color: var(--promodose-story-accent);
	display: inline-flex;
	font-size: 1rem;
	gap: 0.16rem;
	line-height: 1;
	margin-block-start: 0.28rem;
}

.promodose-customer-stories__dots {
	align-items: center;
	display: flex;
	gap: 0.85rem;
	justify-content: center;
	margin-block-start: clamp(1.2rem, 3vw, 2rem);
}

.promodose-customer-stories__dot {
	background: rgb(18 40 74 / 12%);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	height: 5px;
	padding: 0;
	transition: background-color 160ms ease, width 160ms ease;
	width: 74px;
}

.promodose-customer-stories__dot.is-active {
	background: var(--promodose-story-accent);
	width: 92px;
}

.promodose-customer-stories__empty {
	background: var(--wp--preset--color--base-2);
	border: 1px dashed rgb(18 40 74 / 16%);
	border-radius: 8px;
	color: var(--wp--preset--color--muted);
	font-weight: 800;
	padding: 1.25rem;
}

.promodose-customer-stories__lightbox {
	align-items: center;
	background: rgb(8 13 28 / 78%);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	position: fixed;
	z-index: 99998;
}

.promodose-customer-stories__lightbox[hidden] {
	display: none;
}

.promodose-customer-stories__lightbox-image {
	border-radius: 8px;
	box-shadow: 0 24px 80px rgb(0 0 0 / 34%);
	display: block;
	max-height: min(82vh, 860px);
	max-width: min(92vw, 1180px);
	object-fit: contain;
}

.promodose-customer-stories__lightbox-close {
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	display: inline-flex;
	font-size: 2rem;
	font-weight: 400;
	height: 46px;
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
	justify-content: center;
	line-height: 1;
	position: absolute;
	width: 46px;
}

.has-promodose-stories-lightbox {
	overflow: hidden;
}

@media (max-width: 980px) {
	.promodose-customer-stories__header {
		align-items: start;
		grid-template-columns: 1fr;
	}

	.promodose-customer-stories__stage {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.promodose-customer-stories__featured {
		aspect-ratio: 16 / 10;
		height: 320px;
		min-height: 0;
	}

	.promodose-customer-stories__viewport {
		margin-inline-start: 0;
		padding-inline-start: 0;
	}

	.promodose-story-slide {
		flex-basis: min(82vw, 520px);
	}
}

@media (max-width: 560px) {
	.promodose-customer-stories {
		--promodose-story-card-height: 270px;
		--promodose-story-featured-height: 240px;
		padding: 2rem 0.75rem;
	}

	.promodose-customer-stories__inner {
		max-width: 100%;
		padding: 1rem;
	}

	.promodose-customer-stories__header {
		gap: 1rem;
		margin-block-end: 1.35rem;
	}

	.promodose-customer-stories__copy {
		gap: 0.5rem;
	}

	.promodose-customer-stories__eyebrow {
		font-size: 0.9rem;
		gap: 0.5rem;
	}

	.promodose-customer-stories__eyebrow::before {
		height: 3px;
		width: 34px;
	}

	.promodose-customer-stories__title {
		font-size: 2rem;
	}

	.promodose-customer-stories__description {
		font-size: 0.98rem;
		line-height: 1.7;
	}

	.promodose-customer-stories__controls {
		gap: 0.55rem;
		justify-content: flex-start;
	}

	.promodose-customer-stories__arrow {
		height: 40px;
		width: 40px;
	}

	.promodose-customer-stories__stage {
		gap: 1rem;
	}

	.promodose-customer-stories__featured {
		aspect-ratio: auto;
		height: var(--promodose-story-featured-height);
		min-height: var(--promodose-story-featured-height);
	}

	.promodose-customer-stories__viewport {
		overflow: hidden;
		width: 100%;
	}

	.promodose-customer-stories__track {
		gap: 0;
	}

	.promodose-story-slide {
		flex: 0 0 100%;
		min-height: auto;
		padding: 1rem;
		width: 100%;
	}

	.promodose-story-slide__quote {
		font-size: 16px;
		line-height: 1.75;
		min-height: 0;
	}

	.promodose-story-slide__title {
		font-size: 0.95rem;
	}

	.promodose-story-slide__avatar {
		flex-basis: 52px;
		height: 52px;
		width: 52px;
	}

	.promodose-story-slide__stars {
		font-size: 0.92rem;
	}

	.promodose-customer-stories__dots {
		gap: 0.45rem;
		margin-block-start: 1rem;
	}

	.promodose-customer-stories__dot {
		height: 4px;
		width: 24px;
	}

	.promodose-customer-stories__dot.is-active {
		width: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.promodose-customer-stories__track,
	.promodose-customer-stories__featured-item,
	.promodose-customer-stories__arrow,
	.promodose-customer-stories__dot,
	.promodose-story-slide {
		transition: none;
	}
}