/* =========================================================================
   Boyle Built — Testimonials + Free Planning Guide

   ONE data source (boyle_built_get_testimonials()) renders into ONE
   carousel track, reused unchanged at every breakpoint. Only the nav
   *controls* differ structurally (circular side buttons at desktop vs.
   inline buttons at tablet/mobile) — both sets carry the same
   data-carousel-prev/-next attributes so one JS engine instance
   (testimonial-carousel.js + carousel-base.js) drives whichever is
   visible. CSS shows exactly one set per breakpoint; the other is
   `display: none`, removing it from the accessibility tree (same
   mechanism used throughout this theme).

   Dot styling (.carousel__dot / .carousel__dot--active) is intentionally
   NOT redefined here — it's the shared, generic rule already defined in
   projects.css (enqueued as a dependency of this file; see
   inc/enqueue.php). Only size is overridden below, scoped to this
   section, to avoid duplicating color/active-state rules.

   Clipping (overflow: hidden) and the JS transform live on two different
   elements (.testimonial-carousel__viewport vs. __track) — the same
   structural rule established when fixing the Projects carousel; getting
   this wrong there caused the "tiny sliver" bug.
   ========================================================================= */

.testimonials {
	display: flex;
	background-color: var(--color-bg);
}

.testimonials__column {
	display: flex;
	flex-direction: column;
}

.testimonials__heading {
	display: flex;
	flex-direction: column;
}

.testimonials__eyebrow {
	margin: 0;
	color: var(--color-gold);
	font-family: var(--font-body);
	font-weight: 800;
	text-transform: uppercase;
}

.testimonials__title {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 500;
}

.testimonials__accent {
	background-color: var(--color-gold);
	height: 2px;
	width: 40px;
}

/* -------------------------------------------------------------------------
   Decorative Process → Testimonials separator (template-parts/section-
   separator.php). Reproduces the canonical Figma asset (a background-
   colored spacer with one thin inset horizontal line) with plain CSS.
   ------------------------------------------------------------------------- */

.section-separator {
	position: relative;
	width: 100%;
	height: 60px;
	background-color: var(--color-bg);
}

.section-separator::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 80px;
	right: 80px;
	height: 1px;
	background-color: var(--color-gold);
	opacity: 0.5;
}

@media (min-width: 1025px) {
	.section-separator {
		height: 80px;
	}

	.section-separator::after {
		left: 120px;
		right: 120px;
		opacity: 0.6;
	}
}

/* -------------------------------------------------------------------------
   Testimonial card (shared by every breakpoint)
   ------------------------------------------------------------------------- */

.testimonial {
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* Mobile-only white card treatment (background/border/radius/padding)
	   is set in the Mobile block below and explicitly reset to nothing at
	   tablet/desktop, where the quote sits directly on the section
	   background instead — matches the canonical Figma exactly. */
}

.testimonial__quote {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
}

/* Presentation-only quotation marks — never stored in the testimonial
   content itself. They're part of the same inline text run as the quote,
   so they wrap naturally with it and never force extra width/overflow. */
.testimonial__quote::before {
	content: '\201C';
}

.testimonial__quote::after {
	content: '\201D';
}

.testimonial__attribution {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.testimonial__name {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
}

.testimonial__role {
	margin: 0;
	color: var(--color-body-muted);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 11px;
}

/* -------------------------------------------------------------------------
   Carousel mechanics
   ------------------------------------------------------------------------- */

.testimonial-carousel {
	display: flex;
	align-items: center;
}

.testimonial-carousel__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.testimonial-carousel__track {
	display: flex;
	transition: transform 0.3s ease;
}

.testimonial-carousel__slide {
	flex-shrink: 0;
	width: 100%;
}

.testimonial-carousel__footer {
	display: flex;
	align-items: center;
}

.testimonial-carousel__nav {
	display: flex;
	align-items: center;
}

.testimonial-carousel__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-family: var(--font-body);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.testimonial-carousel__arrow:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

.testimonial-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Desktop-only circular side buttons, bordered/transparent (matches the
   canonical Figma's desktop prev/next treatment). Hidden by default. */
.testimonial-carousel__nav--side {
	display: none;
}

.testimonial-carousel__nav--side .testimonial-carousel__arrow {
	width: 36px;
	height: 36px;
	background-color: transparent;
	border: 1px solid var(--color-testimonial-nav-border);
	color: var(--color-ink);
	font-size: 16px;
}

/* Tablet/mobile inline buttons, solid green (matches the canonical
   Figma's tablet/mobile treatment — a real, different style, not a
   scaled-down copy of the desktop button). Visible by default. */
.testimonial-carousel__nav--inline {
	display: flex;
	gap: 8px;
}

.testimonial-carousel__nav--inline .testimonial-carousel__arrow {
	background-color: var(--color-primary-green);
	border: none;
	color: var(--color-text-light);
}

.testimonial-carousel__dots {
	display: none;
}

.testimonial-carousel__dots:not([hidden]) {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* -------------------------------------------------------------------------
   Guide card (shared by every breakpoint)
   ------------------------------------------------------------------------- */

.guide-card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-dark-green-3);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.guide-card__image-wrapper {
	position: relative;
	width: 100%;
	flex-shrink: 0;
}

.guide-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.guide-card__content {
	display: flex;
	flex-direction: column;
}

.guide-card__eyebrow {
	margin: 0;
	color: var(--color-text-light);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 11px;
	text-transform: uppercase;
}

.guide-card__heading {
	margin: 0;
	color: var(--color-text-light);
	font-family: var(--font-display);
	font-weight: 500;
}

.guide-card__description {
	margin: 0;
	color: var(--color-text-muted-lt2);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
}

.guide-card__button {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-gold);
	color: var(--color-text-light);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--radius-button);
	width: 100%;
}

.guide-card__button:focus-visible {
	outline: 2px solid var(--color-text-light);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Mobile (0–600px)
   ------------------------------------------------------------------------- */

.testimonials {
	flex-direction: column;
	gap: 24px;
	padding: 56px 16px;
}

.testimonials__column {
	gap: 20px;
}

.testimonials__heading {
	gap: 8px;
}

.testimonials__eyebrow {
	font-size: 10px;
}

.testimonials__title {
	font-size: 22px;
}

.testimonial {
	background-color: #fff;
	border: 1px solid var(--color-border-light);
	border-radius: 6px;
	padding: 20px;
}

.testimonial__quote {
	font-size: 18px;
	line-height: 1.6;
}

.testimonial-carousel__footer {
	justify-content: space-between;
}

.testimonial-carousel__nav--inline .testimonial-carousel__arrow {
	width: 36px;
	height: 36px;
	font-size: 16px;
}

.testimonial-carousel__dots:not([hidden]) .carousel__dot {
	width: 6px;
	height: 6px;
}

.guide-card__content {
	gap: 12px;
	padding: 16px;
}

.guide-card__image-wrapper {
	height: 160px;
}

.guide-card__heading {
	font-size: 20px;
}

.guide-card__button {
	padding: 12px;
}

/* -------------------------------------------------------------------------
   Tablet (601–1024px)
   ------------------------------------------------------------------------- */

@media (min-width: 601px) {
	.testimonials {
		flex-direction: row;
		align-items: flex-start;
		gap: 40px;
		padding: 80px 32px;
	}

	.testimonials__column {
		flex: 1 1 0%;
		min-width: 0;
		gap: 24px;
	}

	.testimonials__heading {
		gap: 12px;
	}

	.testimonials__eyebrow {
		font-size: 11px;
	}

	.testimonials__title {
		font-size: 32px;
	}

	.testimonial {
		background-color: transparent;
		border: none;
		border-radius: 0;
		padding: 0;
	}

	.testimonial__quote {
		font-size: 20px;
		line-height: 1.6;
	}

	.testimonial-carousel__footer {
		gap: 24px;
	}

	.testimonial-carousel__nav--inline .testimonial-carousel__arrow {
		width: 32px;
		height: 32px;
		font-size: 15px;
	}

	.testimonial-carousel__dots:not([hidden]) .carousel__dot {
		width: 8px;
		height: 8px;
	}

	.testimonials__guide {
		width: 280px;
		flex-shrink: 0;
	}

	.guide-card__image-wrapper {
		height: 160px;
	}

	.guide-card__content {
		gap: 12px;
		padding: 20px;
	}

	.guide-card__heading {
		font-size: 22px;
	}

	.guide-card__button {
		padding: 12px;
	}
}

/* -------------------------------------------------------------------------
   Desktop (1025px+)
   ------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.testimonials {
		min-height: 400px;
		gap: 0;
		padding: 0;
	}

	/* Explicit reset: min-width media queries are additive, not mutually
	   exclusive — 1025px+ still satisfies the 601px query above, so the
	   tablet block's flex-basis must be reset here or it would silently
	   persist (harmless numerically here since both want flex:1, but kept
	   explicit to match the defensive pattern used everywhere else in
	   this theme, per the Services/Projects/Process fixes). */
	.testimonials__column {
		flex: 1 1 0%;
		gap: 40px;
		padding: 80px;
	}

	.testimonials__heading {
		gap: 12px;
	}

	.testimonials__eyebrow {
		font-size: 11px;
	}

	.testimonials__title {
		font-size: 48px;
	}

	.testimonial__quote {
		font-size: 22px;
		line-height: 1.7;
	}

	.testimonial-carousel {
		gap: 24px;
	}

	.testimonial-carousel__nav--side {
		display: flex;
	}

	.testimonial-carousel__nav--inline {
		display: none;
	}

	.testimonial-carousel__footer {
		display: none;
	}

	.testimonials__guide {
		width: 380px;
		flex-shrink: 0;
	}

	.guide-card__image-wrapper {
		height: 240px;
	}

	.guide-card__content {
		gap: 16px;
		padding: 24px;
	}

	.guide-card__heading {
		font-size: 24px;
	}

	.guide-card__button {
		padding: 13px 20px;
	}
}