/**
 * Testimonials — Slider Revolution replacement.
 *
 * Styled to match the original closely: full-width yellow band, "What Our
 * Clients Say" heading, oversized decorative quote marks top-left and
 * bottom-right, white italic quote, dark bold attribution.
 *
 * The one deliberate difference: the text WRAPS. The original ran a single
 * unbroken line off the right edge of the band (someone had already tried
 * patching it with `.tp-caption { white-space: normal !important }`). Here the
 * quote is width-constrained and centred, so longer testimonials simply flow
 * onto more lines.
 *
 * Remember: html root font-size is 10px on this site, so 1rem = 10px.
 */

.mk-quotes {
	/* Warm brand yellow, sampled off the live rendering — see css/hero.css for
	   why the value differs from the site's #f6c445. Used here because the
	   testimonials block is a full yellow panel, so the difference is obvious;
	   on live it was a RevSlider image carrying the same warm yellow. */
	--q-brand: #fec30d;
	--q-ink: #212121;
	--q-white: #fff;

	position: relative;
	background: var(--q-brand);
	padding: 4.5rem 2rem 4rem;
	overflow: hidden;
	text-align: center;
}

/* ---------------------------------------------- decorative quote marks
 * Purely ornamental, so hidden from assistive tech — the real quotation is
 * marked up as a <blockquote>.
 */

.mk-quotes::before,
.mk-quotes::after {
	content: "\201C";
	position: absolute;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 16rem;
	line-height: 1;
	color: rgba(255, 255, 255, .35);
	pointer-events: none;
	user-select: none;
}

.mk-quotes::before {
	top: 1.5rem;
	left: 3rem;
}

.mk-quotes::after {
	content: "\201D";
	bottom: -3.5rem;
	right: 3rem;
}

/* ------------------------------------------------------------- heading */

.mk-quotes__heading {
	font-family: 'Lato', sans-serif;
	font-size: clamp(2.2rem, 2.4vw, 3rem);
	font-weight: 400;
	line-height: 1.25;
	color: var(--q-white);
	margin: 0 0 2.6rem;
	position: relative;
	z-index: 2;
}

/* --------------------------------------------------------------- track */

/* Crossfade, not slide — matching the original and the homepage hero.
 *
 * Grid stacking rather than absolute positioning: every item occupies the same
 * cell, so the track keeps the height of the TALLEST quote and nothing jumps
 * when a longer testimonial comes round.
 */
.mk-quotes__track {
	display: grid;
	grid-template-columns: 100%;   /* one explicit full-width column */
	position: relative;
	z-index: 2;
}

.mk-quotes__item {
	grid-area: 1 / 1;
	margin: 0;
	padding: 0 1rem;
	box-sizing: border-box;
	/* Centre explicitly rather than relying on the grid item stretching.
	   An auto-sized implicit grid column can shrink-wrap its content, which
	   leaves an `margin: 0 auto` child centred inside a box that is itself
	   narrower than the band — the text then reads as off-centre. */
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mk-quotes__quote,
.mk-quotes__cite {
	width: 100%;
}

/* Only hide the inactive ones once JS is running. Without JavaScript every
   quote stays visible and readable — the whole point of moving this out of
   Slider Revolution.
 *
 * Asymmetric timing, deliberately: the OUTGOING quote clears quickly (.25s)
 * while the incoming one fades in more slowly after a short delay. A
 * symmetrical crossfade leaves both quotes legible on top of each other
 * mid-transition, which reads as a rendering fault rather than an effect.
 */
.mk-quotes.is-enhanced .mk-quotes__item {
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility 0s linear .25s;
}

.mk-quotes.is-enhanced .mk-quotes__item.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .45s ease .2s, visibility 0s;
}

/* Without JS the items would otherwise overlap in the one grid cell. */
.mk-quotes:not(.is-enhanced) .mk-quotes__track {
	display: block;
}

.mk-quotes:not(.is-enhanced) .mk-quotes__item + .mk-quotes__item {
	margin-top: 3rem;
}

/* ---------------------------------------------------------------- quote */

/* The width constraint lives HERE, on the blockquote, not on the paragraph
   inside it. Nesting `max-width` + `margin: 0 auto` on a child of a flex/grid
   item left the holder itself off-centre — the text was centred within a box
   that was not centred in the band. One centred block, no nesting. */
.mk-quotes__quote {
	max-width: 84rem;
	margin: 0 auto 3.2rem;
	padding: 0;
	border: 0;
	quotes: none;

	/* Total styles ALL blockquotes with a quote.png background image plus 55px
	   of left padding:
	 *
	 *   blockquote { background: url(assets/images/quote.png) left 4px no-repeat;
	 *                padding-left: 55px; font-size: 1.231em; color: #ababab }
	 *
	 * That produced a second grey quote mark hard against the text, and the
	 * padding pushed the whole block off-centre. It is a background IMAGE, not
	 * a ::before, so `content: none` guards had no effect on it.
	 */
	background: none;
	font-size: inherit;
	color: inherit;
}

.mk-quotes__quote p {
	font-family: 'Lato', sans-serif;
	font-size: clamp(2rem, 2.1vw, 2.7rem);
	font-style: italic;
	font-weight: 300;
	line-height: 1.45;
	/* Dark, matching the original and the attribution beneath it. (The live
	   screenshot appeared white only because the text was selected.) */
	color: var(--q-ink);
	text-align: center;
	max-width: none;
	margin: 0;
}

/* Belt and braces: the two decorative marks belong to .mk-quotes only. Nothing
   should add a third next to the text itself. */
.mk-quotes__quote::before,
.mk-quotes__quote::after,
.mk-quotes__quote p::before,
.mk-quotes__quote p::after {
	content: none;
}

.mk-quotes__cite {
	font-style: normal;
	line-height: 1.5;
}

/* Deliberately quieter than the quote: smaller and semi-bold rather than bold,
   so the attribution supports the testimonial instead of competing with it. */
.mk-quotes__author,
.mk-quotes__company {
	display: block;
	font-family: 'Lato', sans-serif;
	font-size: clamp(1.3rem, 1.15vw, 1.5rem);
	font-weight: 600;
	line-height: 1.45;
	color: var(--q-ink);
}

.mk-quotes__company { margin-top: .15rem; }

/* ------------------------------------------------------------------ nav */

.mk-quotes__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.4rem;
	margin-top: 2.6rem;
	position: relative;
	z-index: 2;
}

.mk-quotes__arrow {
	width: 3.2rem;
	height: 3.2rem;
	border: 1px solid rgba(33, 33, 33, .35);
	background: transparent;
	color: var(--q-ink);
	font-size: 1.8rem;
	line-height: 1;
	border-radius: 50%;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.mk-quotes__arrow:hover {
	background: rgba(255, 255, 255, .5);
	border-color: var(--q-ink);
}

.mk-quotes__arrow:focus-visible {
	outline: 2px solid var(--q-ink);
	outline-offset: 2px;
}

.mk-quotes__dots {
	display: flex;
	gap: .7rem;
}

.mk-quotes__dot {
	width: .9rem;
	height: .9rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(33, 33, 33, .3);
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}

.mk-quotes__dot.is-active {
	background: var(--q-ink);
	transform: scale(1.25);
}

.mk-quotes__dot:focus-visible {
	outline: 2px solid var(--q-ink);
	outline-offset: 3px;
}

/* -------------------------------------------------------- small screens */

@media (max-width: 767px) {
	.mk-quotes {
		padding: 3.5rem 1.6rem 3rem;
	}

	.mk-quotes::before,
	.mk-quotes::after {
		font-size: 9rem;
	}

	.mk-quotes::before { top: .8rem; left: 1rem; }
	.mk-quotes::after  { bottom: -2rem; right: 1rem; }

	.mk-quotes__quote p { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mk-quotes.is-enhanced .mk-quotes__item { transition: none; }
}