/* ==========================================================================
   Million Dots — Reviews
   One quote at a time in a raised panel; the controls live in the sticky
   column beside it.
   ========================================================================== */

.mdc-testimonials__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: start;
}

.mdc-testimonials__aside p {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--large);
}

.mdc-testimonials__controls {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--70);
}

.mdc-testimonials__count {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--weight--semibold);
	letter-spacing: var(--wp--custom--tracking--wide);
	color: var(--wp--custom--color--ink-subtle);
}

.mdc-testimonials__panel {
	position: relative;
	padding: clamp(2rem, 3.5vw, 3rem);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--md);
}

.mdc-quote-mark {
	font-family: var(--wp--preset--font-family--display);
	font-size: 5rem;
	font-weight: var(--wp--custom--weight--bold);
	line-height: 0.7;
	color: var(--wp--preset--color--accent);
}

.mdc-testimonials__panel .mdc-quote-mark {
	position: absolute;
	top: clamp(1rem, 2vw, 1.5rem);
	right: clamp(1.5rem, 3vw, 2.5rem);
	opacity: 0.14;
}

/* --- Slider --------------------------------------------------------------- */
.mdc-quote-slider {
	position: relative;
}

.mdc-quote-slide {
	display: none;
	margin: 0;
}

.mdc-quote-slide.is-active {
	display: block;
	animation: mdc-quote-in var(--wp--custom--duration--slow) var(--wp--custom--ease--out) both;
}

@keyframes mdc-quote-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.mdc-quote-slide blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1875rem, 1.6vw + 0.85rem, 1.875rem);
	font-weight: var(--wp--custom--weight--medium);
	line-height: 1.44;
	letter-spacing: var(--wp--custom--tracking--tight);
	color: var(--wp--preset--color--contrast);
}

.mdc-quote-slide figcaption {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--70);
}

.mdc-quote-avatar {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--weight--bold);
	letter-spacing: 0.02em;
}

.mdc-quote-name {
	display: block;
	font-weight: var(--wp--custom--weight--semibold);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

.mdc-quote-place {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--custom--color--ink-subtle);
}

/* --- Dots (built by the interactions script) ------------------------------ */
.mdc-quote-dots {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--60);
}

.mdc-quote-dots button {
	width: 34px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--color--border-strong);
	cursor: pointer;
	transition: background-color var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.mdc-quote-dots button[aria-selected="true"] {
	background-color: var(--wp--preset--color--accent);
}

/* --- Responsive ----------------------------------------------------------- */
@media (min-width: 860px) {
	.mdc-testimonials__grid {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	}

	.mdc-testimonials__aside {
		position: sticky;
		top: calc(var(--wp--custom--layout--header-height) + var(--wp--preset--spacing--70));
	}
}

@media (max-width: 480px) {
	.mdc-quote-slide figcaption {
		margin-top: var(--wp--preset--spacing--60);
	}
}

/* The editor canvas has no sticky header to clear, and every slide should be
   visible so the owner can see what they are editing. */
.editor-styles-wrapper .mdc-testimonials__aside {
	position: static;
}

.editor-styles-wrapper .mdc-quote-slide {
	display: block;
	animation: none;
}

.editor-styles-wrapper .mdc-quote-slide + .mdc-quote-slide {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--70);
	border-top: 1px dashed var(--wp--preset--color--border);
}