/**
 * Quote styling: pullquote emphasis, the opt-in quotemark, and full-width
 * .quotes-carousel slides.
 * Keep identical with the Astro mirror (backend/src/styles/quotes-carousel.css).
 */
.wp-block-pullquote strong {
	color: var(--pullquote-highlight, var(--Brand-80));
}

/* Opt-in: add the .pullquote-with-quotemark class to show the quotemark icon. */
.pullquote-with-quotemark::before {
	margin-bottom: 10px;
	content: "";
	display: block;
	width: 24px;
	height: 16px;
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle;
	color: var(--pullquote-highlight, var(--Brand-80));
	/* An SVG used as background-image can't inherit currentColor, so use it as a mask over a currentColor fill. */
	background-color: currentColor;
	--pullquote-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTMyMDcgMEwxMS42OTgxIDE1LjM5NjJINS4yODMwMkwwIDBIOS4xMzIwN1pNMjEuNDM0IDBMMjQgMTUuMzk2MkgxNy41ODQ5TDEyLjMwMTkgMEgyMS40MzRaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9zdmc+");
	-webkit-mask: var(--pullquote-icon) center / cover repeat;
	mask: var(--pullquote-icon) center / cover repeat;
}

.quotes-carousel {
	/*
	 * The carousel's arrows/dots scroll by the scroll-container's clientWidth,
	 * which is one slide plus its 2rem of side padding. Making the gap match
	 * that 2rem puts every slide exactly one scroll step apart, so the middle
	 * slide lands centered instead of drifting by the difference.
	 */
	--fuse-spacing-gap: 2rem;
}

.quotes-carousel .wp-block-cdcfuse-cdc-fuse-card-carousel-item {
	min-width: 100%;
}