/**
 * Casas Choice — [cc_testemunhos] shortcode ("Clientes" testimonial cards).
 * Penpot board "Homepage" → Section "Clientes" (Desktop / Mobile).
 *
 * Scoped entirely under .cc-testimonials, dropped straight into the
 * homepage's existing Greenshift "Testemunhos" row (heading + intro
 * paragraph are Greenshift blocks, already on the page). Tokens mirror the
 * ones established in assets/css/comprar.css so every section reads as the
 * same design system without the stylesheets depending on each other.
 *
 * Desktop: up to 4 cards read as a plain row (Swiper's own `.swiper-lock`
 * CSS hides the nav buttons whenever there's nothing to slide to, so "≤4"
 * and "an inert 4-up carousel" render identically). Past 4, the row becomes
 * a real Swiper slider — see assets/js/cc-testimonials.js. Mobile is always
 * a single-card slider with a "1 / N" counter, matching the Penpot mobile
 * board; the single-testimonial edge case (nothing to slide to on either
 * breakpoint) skips Swiper entirely — see .cc-testimonials--single below.
 */

.cc-testimonials {
	--cc-ink: var( --theme-palette-color-5, #333538 );
	--cc-ink-soft: rgba( 51, 53, 56, 0.6 );
	--cc-border: var( --theme-palette-color-7, #C4C7CA );
	--cc-bg-alt: var( --theme-palette-color-8, #F2F3F4 );
	--cc-accent: var( --theme-palette-color-1, #00A6CE );
	--cc-font: 'Montserrat', sans-serif;
	margin-inline: auto;
	box-sizing: border-box;
	font-family: var( --cc-font );
}

.cc-testimonials *,
.cc-testimonials *::before,
.cc-testimonials *::after {
	box-sizing: border-box;
}

/* ----------------------------------------------------------------------
 * Nav buttons — 46px outline circle, shared classes so Swiper's navigation
 * module (which binds every matching selector, not just one element) wires
 * up both the desktop header pair and the mobile footer pair from one
 * config. Swiper adds `.swiper-button-disabled` at either end and
 * `.swiper-button-lock` (display:none, its own bundled CSS) when the whole
 * set has nothing to slide to at all.
 * -------------------------------------------------------------------- */

.cc-testimonials__prev,
.cc-testimonials__next {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border-radius: 999px;
	border: 1px solid rgba( 51, 53, 56, 0.35 );
	background: transparent;
	color: var( --cc-ink );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: opacity .15s ease;
}

.cc-testimonials__prev svg,
.cc-testimonials__next svg {
	width: 18px;
	height: 18px;
	display: block;
}

.cc-testimonials__prev.swiper-button-disabled,
.cc-testimonials__next.swiper-button-disabled {
	opacity: .35;
	pointer-events: none;
}

/* Desktop header row — nav buttons only, right-aligned above the cards
 * (Penpot: same row as the "Clientes" intro paragraph; kept as its own row
 * here so this shortcode stays self-contained and doesn't reach into the
 * separate Greenshift column next to the heading). */
.cc-testimonials__head {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 48px;
}

/* Mobile footer row — counter (left) + nav buttons (right), below the card. */
.cc-testimonials__foot {
	display: none;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
}

.cc-testimonials__foot-nav {
	display: flex;
	gap: 8px;
}

.cc-testimonials__counter {
	font-size: 18px;
	font-weight: 500;
	color: var( --cc-ink );
}

/* ----------------------------------------------------------------------
 * Card
 * -------------------------------------------------------------------- */

.cc-testimonials__swiper {
	width: 100%;
}

.cc-tst-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 480px;
	height: auto;
	padding: 32px;
	background: var( --cc-bg-alt );
}

.cc-testimonials--single .cc-tst-card {
	max-width: 426px;
}

.cc-tst-card__quote {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cc-tst-card__quote-icon {
	display: block;
}

.cc-tst-card__quote-icon svg {
	width: 32px;
	height: 24px;
	display: block;
	color: var( --cc-accent );
}

.cc-tst-card__text {
	margin: 0;
	font-size: 22px;
	line-height: 1.4;
	font-weight: 400;
	color: var( --cc-ink );
}

.cc-tst-card__who {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cc-tst-card__hr {
	border: 0;
	border-top: 1px solid var( --cc-border );
	margin: 0;
}

.cc-tst-card__person {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cc-tst-card__avatar {
	width: 62px;
	height: 62px;
	flex: 0 0 auto;
	border-radius: 50%;
	overflow: hidden;
	background: #D9D9D9;
}

.cc-tst-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cc-tst-card__id {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cc-tst-card__name {
	font-size: 17px;
	font-weight: 500;
	color: var( --cc-ink );
}

.cc-tst-card__loc {
	font-size: 14px;
	font-weight: 400;
	color: var( --cc-ink-soft );
}

/* ----------------------------------------------------------------------
 * Mobile — always a single-card slider (Penpot: "Mobile" board).
 * -------------------------------------------------------------------- */

@media ( max-width: 768px ) {
	.cc-testimonials__head {
		display: none;
	}

	.cc-testimonials__foot {
		display: flex;
	}

	.cc-tst-card {
		min-height: 0;
		padding: 32px;
	}

	.cc-testimonials--single .cc-tst-card {
		max-width: none;
	}
}