/* ────────────────────────────────────────────────────────────────
   03-testimonial.css — Testimonial Section
   Class chain: core/group outer (bg via Style panel, alignfull)
                → gb element .testimonial  ← constrained bg band
                → gb element .testimonial__inner
   The bg color lives on .testimonial so it is capped at
   --container-max-width. The outer group bg is reset via
   :has(.testimonial) to prevent a full-width color band.
   Decorative quote mark is CSS-only (::before on __inner).
   Medium-bg → green-primary (testimonial-specific override).
   ──────────────────────────────────────────────────────────────── */

/* ── Section wrapper — constrained bg band ────────────────── */
.testimonial {
	padding: var(--spacing-xl) var(--spacing-5xl);
	max-width: var(--container-max-width);
	margin-inline: auto;
	margin-block-start: var(--spacing-lg) !important;
	margin-block-end: var(--spacing-lg) !important;
}

/* ── Bg colors: on the section element, not the outer group ─ */
.is-style-bg-light .testimonial  { background-color: var(--color-gray-soft); }
.is-style-bg-medium .testimonial { background-color: var(--color-green-primary); }
.is-style-bg-dark .testimonial   { background-color: var(--color-blue-primary); }

/* Outer group carries .is-style-bg-* for the Style panel only —
   reset its own bg so no full-width band appears outside the
   --container-max-width section. */
.is-style-bg-light:has(.testimonial),
.is-style-bg-medium:has(.testimonial),
.is-style-bg-dark:has(.testimonial) {
	background-color: transparent;
}

/* ── Inner container ─────────────────────────────────────────── */
.testimonial__inner {
	position: relative;
	isolation: isolate;
	padding-top: var(--spacing-md);
}

/* ── Decorative quote mark (CSS-only) ──────────────────────── */
.testimonial__inner::before {
	content: "";
	position: absolute;
	top: -8px;
	left: -64px;
	width: 110px;
	height: 77px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='114' height='80' viewBox='0 0 114 80'%3E%3Cpath d='M102 0L86.6668 26.6667C94.0002 26.6667 100.278 29.2778 105.5 34.5C110.722 39.7222 113.333 46 113.333 53.3333C113.333 60.6667 110.722 66.9444 105.5 72.1667C100.278 77.3889 94.0002 80 86.6668 80C79.3335 80 73.0557 77.3889 67.8335 72.1667C62.6113 66.9444 60.0002 60.6667 60.0002 53.3333C60.0002 50.7778 60.3057 48.4167 60.9168 46.25C61.5279 44.0833 62.4446 42 63.6668 40L86.6668 0L102 0ZM42.0002 0L26.6668 26.6667C34.0002 26.6667 40.2779 29.2778 45.5002 34.5C50.7224 39.7222 53.3335 46 53.3335 53.3333C53.3335 60.6667 50.7224 66.9444 45.5002 72.1667C40.2779 77.3889 34.0002 80 26.6668 80C19.3335 80 13.0557 77.3889 7.8335 72.1667C2.61127 66.9445 0.000158524 60.6667 0.000157882 53.3333C0.000157659 50.7778 0.305718 48.4167 0.916829 46.25C1.52794 44.0833 2.44459 42 3.66681 40L26.6668 0L42.0002 0Z' fill='%231A1C1C' fill-opacity='0.14'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
}

.is-style-bg-dark .testimonial__inner::before,
.is-style-bg-medium .testimonial__inner::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='114' height='80' viewBox='0 0 114 80'%3E%3Cpath d='M102 0L86.6668 26.6667C94.0002 26.6667 100.278 29.2778 105.5 34.5C110.722 39.7222 113.333 46 113.333 53.3333C113.333 60.6667 110.722 66.9444 105.5 72.1667C100.278 77.3889 94.0002 80 86.6668 80C79.3335 80 73.0557 77.3889 67.8335 72.1667C62.6113 66.9444 60.0002 60.6667 60.0002 53.3333C60.0002 50.7778 60.3057 48.4167 60.9168 46.25C61.5279 44.0833 62.4446 42 63.6668 40L86.6668 0L102 0ZM42.0002 0L26.6668 26.6667C34.0002 26.6667 40.2779 29.2778 45.5002 34.5C50.7224 39.7222 53.3335 46 53.3335 53.3333C53.3335 60.6667 50.7224 66.9444 45.5002 72.1667C40.2779 77.3889 34.0002 80 26.6668 80C19.3335 80 13.0557 77.3889 7.8335 72.1667C2.61127 66.9445 0.000158524 60.6667 0.000157882 53.3333C0.000157659 50.7778 0.305718 48.4167 0.916829 46.25C1.52794 44.0833 2.44459 42 3.66681 40L26.6668 0L42.0002 0Z' fill='white' fill-opacity='0.2'/%3E%3C/svg%3E");
}

/* ── Quote text ───────────────────────────────────────────────────── */
/* GB text p — no .wp-block-heading, so global inversions don't reach it */
.testimonial__quote {
	font-family: var(--font-body);
	font-size: var(--text-display-lg);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-snug);
	color: var(--color-text-body);
	margin-bottom: var(--spacing-md);
}

/* ── Citation ───────────────────────────────────────────────────────────── */
.testimonial__cite {
	font-family: var(--font-primary);
	font-size: var(--text-heading-md);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-body);
	margin-bottom: 0;
}

/* ── Dark-bg text overrides ─────────────────────────────────────────── */
.is-style-bg-dark .testimonial__quote,
.is-style-bg-dark .testimonial__cite {
	color: var(--color-text-body-inverse);
}

/* ── Medium-bg (green) text overrides ─────────────────────────── */
.is-style-bg-medium .testimonial__quote,
.is-style-bg-medium .testimonial__cite {
	color: var(--color-text-body-inverse);
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.testimonial {
		padding: var(--spacing-xl) var(--spacing-sm);
	}

	.testimonial__inner {
		padding-top: var(--spacing-2xl);
	}

	.testimonial__inner::before {
		left: 0;
		width: 90px;
		height: 63px;
	}

	.testimonial__quote {
		font-size: var(--text-heading-lg);
	}
}