/* components/review-block/review-block.css */

.mvc-review-block__header {
	text-align: center;
	margin-block-end: var(--space-16);
}

/* ── Aggregate rating ───────────────────────────────────────────────────── */
.mvc-review-block__aggregate {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	margin-block-end: var(--space-4);
}

.mvc-review-block__agg-text {
	font-size: var(--text-base);
	color: var(--color-text-muted);
}

.mvc-review-block__agg-text strong {
	color: var(--color-text);
	font-size: var(--text-lg);
}

/* ── Testimonial card ───────────────────────────────────────────────────── */
.mvc-testimonial-card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	gap: var(--space-4);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base);
}

.mvc-testimonial-card:hover {
	box-shadow: var(--shadow-md);
}

.mvc-testimonial-card--featured {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
}

/* Rating */
.mvc-testimonial-card__rating {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* Review text */
.mvc-testimonial-card__text {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
	flex: 1;
	border-left: none;
	padding: 0;
	font-style: normal;
}

/* Attribution */
.mvc-testimonial-card__attribution {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block-start: auto;
	padding-block-start: var(--space-4);
	border-block-start: 1px solid var(--color-border);
}

.mvc-testimonial-card__photo {
	flex-shrink: 0;
}

.mvc-testimonial-card__photo-img {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	object-fit: cover;
}

.mvc-testimonial-card__author {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	flex: 1;
}

.mvc-testimonial-card__name {
	font-weight: var(--font-semibold);
	font-size: var(--text-sm);
	color: var(--color-heading);
}

.mvc-testimonial-card__location {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* Source links — text + arrow, supports primary + optional secondary */
.mvc-testimonial-card__sources {
	margin-inline-start: auto;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-3);
}

.mvc-testimonial-card__source-link,
.mvc-testimonial-card__source-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	text-decoration: none;
	color: var(--color-text-muted);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.mvc-testimonial-card__source-link {
	transition: color 0.15s ease;
}

.mvc-testimonial-card__source-link:hover,
.mvc-testimonial-card__source-link:focus-visible {
	color: var(--color-primary);
}

.mvc-testimonial-card__source-link span[aria-hidden] {
	transition: transform 0.15s ease;
}

.mvc-testimonial-card__source-link:hover span[aria-hidden],
.mvc-testimonial-card__source-link:focus-visible span[aria-hidden] {
	transform: translateX(2px);
}

/* Date */
.mvc-testimonial-card__date {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* Service link */
.mvc-testimonial-card__service {
	font-size: var(--text-xs);
	color: var(--color-primary);
	text-decoration: none;
}

/* Dark section override — glass card on gradient/preset background.
   Covers ALL ways a dark section is signalled:
     - .mvc-section--dark             (rb_bg = "dark")
     - [data-mvc-section-gradient=…]  (legacy gradient attr)
     - [data-bg-preset=gradient-*]    (section_bg_preset = gradient-*)
     - [data-bg-preset=dark-mesh]
     - [data-bg-preset=metallic-*]
     - [data-bg-preset=solid-primary] (usually dark brand color)
*/
.mvc-section--dark .mvc-testimonial-card,
[data-mvc-section-gradient="brand-dark"] .mvc-testimonial-card,
[data-mvc-section-gradient="brand-mesh"] .mvc-testimonial-card,
[data-bg-preset^="gradient-"] .mvc-testimonial-card,
[data-bg-preset="dark-mesh"] .mvc-testimonial-card,
[data-bg-preset^="metallic-"] .mvc-testimonial-card,
[data-bg-preset="solid-primary"] .mvc-testimonial-card {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.10);
	box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
	-webkit-backdrop-filter: blur(12px);
	        backdrop-filter: blur(12px);
	color: rgba(255,255,255,0.9);
}
:is(
	.mvc-section--dark,
	[data-mvc-section-gradient="brand-dark"],
	[data-mvc-section-gradient="brand-mesh"],
	[data-bg-preset^="gradient-"],
	[data-bg-preset="dark-mesh"],
	[data-bg-preset^="metallic-"],
	[data-bg-preset="solid-primary"]
) .mvc-testimonial-card:hover {
	background: rgba(255,255,255,0.10);
	border-color: rgba(255,255,255,0.18);
	box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
}
:is(
	.mvc-section--dark,
	[data-mvc-section-gradient="brand-dark"],
	[data-mvc-section-gradient="brand-mesh"],
	[data-bg-preset^="gradient-"],
	[data-bg-preset="dark-mesh"],
	[data-bg-preset^="metallic-"],
	[data-bg-preset="solid-primary"]
) .mvc-testimonial-card__name { color: #ffffff !important; }
:is(
	.mvc-section--dark,
	[data-mvc-section-gradient="brand-dark"],
	[data-mvc-section-gradient="brand-mesh"],
	[data-bg-preset^="gradient-"],
	[data-bg-preset="dark-mesh"],
	[data-bg-preset^="metallic-"],
	[data-bg-preset="solid-primary"]
) .mvc-testimonial-card__text { color: rgba(255,255,255,0.95) !important; }
:is(
	.mvc-section--dark,
	[data-mvc-section-gradient="brand-dark"],
	[data-mvc-section-gradient="brand-mesh"],
	[data-bg-preset^="gradient-"],
	[data-bg-preset="dark-mesh"],
	[data-bg-preset^="metallic-"],
	[data-bg-preset="solid-primary"]
) .mvc-testimonial-card__attribution { border-color: rgba(255,255,255,0.15); }
:is(
	.mvc-section--dark,
	[data-mvc-section-gradient="brand-dark"],
	[data-mvc-section-gradient="brand-mesh"],
	[data-bg-preset^="gradient-"],
	[data-bg-preset="dark-mesh"],
	[data-bg-preset^="metallic-"],
	[data-bg-preset="solid-primary"]
) .mvc-testimonial-card__location { color: rgba(255,255,255,0.75) !important; }

/* ── Style overrides ────────────────────────────────────────────────────── */

/* Card grid — default card layout, consistent height */
.mvc-review-block--style-card-grid .mvc-post-grid {
	align-items: start;
}

/* Card carousel — swipeable horizontal scroll at every viewport.
   Card sizes are intentionally oversized so a "half-card peek" appears at
   the right edge — that visual cue tells users they can scroll/swipe. */
.mvc-review-block--style-card-carousel .mvc-post-grid,
.mvc-review-block--style-card-carousel .mvc-review-block__grid {
	display: flex !important;
	grid-template-columns: none;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--space-4);
	scrollbar-width: none;
	-ms-overflow-style: none;
	gap: var(--space-6);
	padding-block: var(--space-2) var(--space-8);
	padding-inline: var(--space-1);
	-webkit-overflow-scrolling: touch;
	/* Fade-out mask on the right edge cues that there's more to scroll. */
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 40px), transparent 100%);
	        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 40px), transparent 100%);
}
.mvc-review-block--style-card-carousel .mvc-post-grid::-webkit-scrollbar {
	display: none;
}
/* Mobile: 85% — almost full width, ~15% peek of next card */
.mvc-review-block--style-card-carousel .mvc-testimonial-card {
	flex: 0 0 85%;
	scroll-snap-align: start;
}
/* Tablet: 60% — clearly one main card + peek of next */
@media (min-width: 640px) {
	.mvc-review-block--style-card-carousel .mvc-testimonial-card {
		flex-basis: 60%;
	}
}
/* Desktop: 40% — two cards visible + peek of third */
@media (min-width: 1024px) {
	.mvc-review-block--style-card-carousel .mvc-testimonial-card {
		flex-basis: 40%;
	}
}

/* Scroll-hint label below the carousel — mobile/tablet only.
   Desktop auto-scrolls, so the motion itself is the cue. */
.mvc-review-block--style-card-carousel::after {
	content: '\2190  swipe / scroll to see more  \2192';
	display: block;
	text-align: center;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	margin-block-start: calc(var(--space-2) * -1);
}
@media (min-width: 1024px) {
	.mvc-review-block--style-card-carousel::after {
		display: none;
	}
}

/* Dark quote grid — dark section, large quote mark, no card border */
.mvc-review-block--style-dark-quote-grid {
	background-color: var(--color-gray-900);
	color: var(--color-gray-100);
}
.mvc-review-block--style-dark-quote-grid .mvc-testimonial-card {
	background-color: var(--color-gray-800);
	border-color: var(--color-gray-700);
}
.mvc-review-block--style-dark-quote-grid .mvc-testimonial-card__text::before {
	content: '\201C';
	display: block;
	font-size: 4rem;
	line-height: 1;
	color: var(--mvc-color-primary, var(--color-primary));
	margin-block-end: var(--space-2);
	font-family: var(--mvc-font-accent, Georgia, serif);
}
.mvc-review-block--style-dark-quote-grid .mvc-testimonial-card__name,
.mvc-review-block--style-dark-quote-grid .mvc-testimonial-card__text {
	color: var(--color-gray-100);
}
.mvc-review-block--style-dark-quote-grid .mvc-review-block__header {
	color: var(--color-gray-100);
}
.mvc-review-block--style-dark-quote-grid .mvc-service-grid__headline {
	color: var(--color-white);
}
.mvc-review-block--style-dark-quote-grid .mvc-service-grid__subtext {
	color: var(--color-gray-400);
}

/* Minimal list — single-column list, text + author only, subtle divider between cards */
.mvc-review-block--style-minimal-list .mvc-review-block__grid {
	grid-template-columns: 1fr;
	max-width: 720px;
	margin-inline: auto;
	gap: var(--space-6);
}
.mvc-review-block--style-minimal-list .mvc-testimonial-card {
	border: 1px solid var(--color-border);
	box-shadow: none;
	border-radius: var(--radius-md);
	padding: var(--space-6);
	background-color: var(--color-surface);
}
.mvc-review-block--style-minimal-list .mvc-testimonial-card__text::before {
	content: '\201C';
	font-size: 2.5rem;
	line-height: 1;
	color: var(--color-primary);
	display: inline;
	margin-inline-end: var(--space-1);
	font-family: var(--mvc-font-accent, Georgia, serif);
	vertical-align: top;
}

/* ── Single-column variants (review on one side) ────────────────────────── */

.mvc-review-block__split {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	align-items: center;
}
@media (min-width: 768px) {
	.mvc-review-block__split {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-12);
	}
}

.mvc-review-block__split-content {
	min-width: 0;
}

/* Force the inner grid to a single column regardless of the rb_columns class. */
.mvc-review-block__split-content .mvc-review-block__grid {
	display: grid;
	grid-template-columns: 1fr !important;
	gap: var(--space-6);
	max-width: none;
}

.mvc-review-block__split-empty {
	display: none;
}
@media (min-width: 768px) {
	.mvc-review-block__split-empty {
		display: block;
		min-height: 200px;
	}
}

.mvc-review-block__split-image {
	display: block;
}
.mvc-review-block__split-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	object-fit: cover;
}

/* ── Featured rotator — one review at a time, auto-rotates ──────────────── */

.mvc-review-block--style-featured-rotator .mvc-review-block__header {
	margin-block-end: var(--space-8);
}

.mvc-review-block__rotator {
	position: relative;
	max-width: 760px;
	margin-inline: auto;
}

/* All slides share the same grid cell — the parent auto-sizes to the
   tallest slide and the active one sits on top. No absolute positioning,
   so the track keeps its height. */
.mvc-review-block__rotator-track {
	display: grid;
	grid-template-columns: 1fr;
}

.mvc-review-block__rotator-slide {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 400ms ease;
}

.mvc-review-block__rotator-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}

/* Server-rendered first slide: show until JS boots. JS will move .is-active. */
.mvc-review-block__rotator-track:not(.is-ready) .mvc-review-block__rotator-slide:first-child {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.mvc-review-block__rotator-slide .mvc-testimonial-card {
	padding: var(--space-8);
	text-align: center;
	align-items: center;
}

.mvc-review-block__rotator-slide .mvc-testimonial-card__text {
	font-size: var(--text-lg);
	text-align: center;
}

.mvc-review-block__rotator-slide .mvc-testimonial-card__attribution {
	justify-content: center;
	border-block-start: none;
	padding-block-start: var(--space-2);
}

.mvc-review-block__rotator-dots {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-block-start: var(--space-6);
}

.mvc-review-block__rotator-dot {
	appearance: none;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background-color: transparent;
	cursor: pointer;
	transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.mvc-review-block__rotator-dot:hover {
	border-color: var(--color-primary);
}
.mvc-review-block__rotator-dot.is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	transform: scale(1.15);
}
.mvc-review-block__rotator-dot:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mvc-review-block__rotator-slide {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD PRESETS  (PAINT layer)
   Bundled bg + heading + quote-text + attribution recipes for the testimonial
   card. Selected via the section's data-card-preset="..." attribute, emitted
   by review-block.php from the rb_card_preset ACF field. Presets reference
   dashboard-driven tokens (--color-primary/-accent) so they auto-adapt per
   client.

   Per [[feedback_variant_css_scoping]], every selector here carries the
   data-card-preset ancestor — no bare .mvc-testimonial-card rules.

   PRESET MAP:
     light          — white card, dark text, subtle border (default)
     light-tinted   — soft warm tint, dark text
     dark           — primary bg, white text, no border
     dark-glass     — translucent glass card (for use on dark sections)
     brand-gradient — primary → accent gradient, white text

   ── DESIGN MODEL: two independent layers ──
   PAINT (this block, --rb-card-*) → LAYOUT (style-override blocks above).
   Presets always paint. Style overrides only rearrange structure.

   !important is REQUIRED on bg/border/color rules to override two things:
   (1) the legacy dark-section override block earlier in this file, and
   (2) bg-presets.css [data-bg-preset] heading/body rules. See
   [[project_bg_presets_important]].
   ═══════════════════════════════════════════════════════════════════════════ */

.mvc-review-block[data-card-preset] .mvc-testimonial-card {
	background: var(--rb-card-bg, var(--color-surface)) !important;
	border: 1px solid var(--rb-card-border, transparent) !important;
	border-radius: var(--mvc-radius, var(--radius-lg));
	box-shadow: var(--rb-card-shadow, 0 2px 12px rgba(0, 0, 0, 0.06));
	color: var(--rb-card-body, inherit);
	transition:
		transform var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default);
}

.mvc-review-block[data-card-preset] .mvc-testimonial-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--rb-card-shadow-hover, 0 10px 28px rgba(0, 0, 0, 0.14));
}

.mvc-review-block[data-card-preset] .mvc-testimonial-card__text {
	color: var(--rb-card-body) !important;
}

.mvc-review-block[data-card-preset] .mvc-testimonial-card__name {
	color: var(--rb-card-heading) !important;
}

.mvc-review-block[data-card-preset] .mvc-testimonial-card__location,
.mvc-review-block[data-card-preset] .mvc-testimonial-card__date,
.mvc-review-block[data-card-preset] .mvc-testimonial-card__source-link,
.mvc-review-block[data-card-preset] .mvc-testimonial-card__source-label {
	color: var(--rb-card-meta, var(--rb-card-body)) !important;
}

.mvc-review-block[data-card-preset] .mvc-testimonial-card__attribution {
	border-color: var(--rb-card-divider, var(--rb-card-border, rgba(0, 0, 0, 0.10))) !important;
}

.mvc-review-block[data-card-preset] .mvc-testimonial-card__service {
	color: var(--rb-card-cta, var(--rb-card-heading)) !important;
}

/* ── Light — white card, dark text, subtle border (default) ───────────── */
.mvc-review-block[data-card-preset="light"] {
	--rb-card-bg:           #ffffff;
	--rb-card-border:       rgba(0, 0, 0, 0.10);
	--rb-card-heading:      #111111;
	--rb-card-body:         #1f2937;
	--rb-card-meta:         #6b7280;
	--rb-card-divider:      rgba(0, 0, 0, 0.08);
	--rb-card-cta:          var(--color-primary);
	--rb-card-shadow:       0 2px 12px rgba(0, 0, 0, 0.08);
	--rb-card-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.14);
}

/* ── Light Tinted — soft warm off-white, dark text ────────────────────── */
.mvc-review-block[data-card-preset="light-tinted"] {
	--rb-card-bg:           #f5f3ef;
	--rb-card-border:       transparent;
	--rb-card-heading:      #111111;
	--rb-card-body:         #1f2937;
	--rb-card-meta:         #6b7280;
	--rb-card-divider:      rgba(0, 0, 0, 0.08);
	--rb-card-cta:          var(--color-primary);
	--rb-card-shadow:       0 2px 12px rgba(0, 0, 0, 0.06);
	--rb-card-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* ── Dark — solid brand color, white text, no border ──────────────────── */
.mvc-review-block[data-card-preset="dark"] {
	--rb-card-bg:           var(--color-primary);
	--rb-card-border:       transparent;
	--rb-card-heading:      #ffffff;
	--rb-card-body:         rgba(255, 255, 255, 0.92);
	--rb-card-meta:         rgba(255, 255, 255, 0.72);
	--rb-card-divider:      rgba(255, 255, 255, 0.15);
	--rb-card-cta:          var(--color-accent-light, #ffffff);
	--rb-card-shadow:       0 4px 16px rgba(0, 0, 0, 0.18);
	--rb-card-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.28);
}

/* ── Dark Glass — translucent card for use on dark/gradient sections ──── */
.mvc-review-block[data-card-preset="dark-glass"] .mvc-testimonial-card {
	background: rgba(255, 255, 255, 0.06) !important;
	-webkit-backdrop-filter: blur(12px);
	        backdrop-filter: blur(12px);
}
.mvc-review-block[data-card-preset="dark-glass"] .mvc-testimonial-card:hover {
	background: rgba(255, 255, 255, 0.10) !important;
}
.mvc-review-block[data-card-preset="dark-glass"] {
	--rb-card-border:       rgba(255, 255, 255, 0.10);
	--rb-card-heading:      #ffffff;
	--rb-card-body:         rgba(255, 255, 255, 0.92);
	--rb-card-meta:         rgba(255, 255, 255, 0.72);
	--rb-card-divider:      rgba(255, 255, 255, 0.15);
	--rb-card-cta:          var(--color-accent-light, #ffffff);
	--rb-card-shadow:       0 4px 24px rgba(0, 0, 0, 0.25);
	--rb-card-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* ── Brand Gradient — primary → accent, white text ────────────────────── */
.mvc-review-block[data-card-preset="brand-gradient"] .mvc-testimonial-card {
	background:
		linear-gradient(135deg,
			var(--color-primary) 0%,
			var(--color-accent) 100%) !important;
	border-color: transparent !important;
}
.mvc-review-block[data-card-preset="brand-gradient"] {
	--rb-card-heading:      #ffffff;
	--rb-card-body:         rgba(255, 255, 255, 0.94);
	--rb-card-meta:         rgba(255, 255, 255, 0.82);
	--rb-card-divider:      rgba(255, 255, 255, 0.20);
	--rb-card-cta:          #ffffff;
	--rb-card-shadow:       0 4px 16px rgba(0, 0, 0, 0.20);
	--rb-card-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.30);
}