/**
 * Casas Choice — [cc_equipa] shortcode ("A nossa equipa" team cards).
 * Penpot board "Homepage" → Section "A nossa equipa" (Desktop / Mobile).
 *
 * Scoped entirely under .cc-equipa, dropped into the homepage's existing
 * Greenshift "A Equipa" row (heading, intro paragraph and the "Conhecer a
 * nossa equipa" link are Greenshift blocks already on the page). Tokens
 * mirror assets/css/testemunhos.css / comprar.css so every section reads as
 * the same design system without the stylesheets depending on each other.
 *
 * Unlike Clientes, the Penpot desktop board has no nav arrows at all — with
 * today's 4 active team members exactly filling the 4-up breakpoint there's
 * nothing to slide to, so no controls are shown there (Swiper still ships
 * with mouse-drag enabled as a fallback if the team ever grows past 4 — see
 * assets/js/cc-equipa.js). Mobile always has the counter + nav row, one
 * card at a time, matching the Penpot mobile board.
 */

.cc-equipa {
	--cc-ink: var( --theme-palette-color-5, #333538 );
	--cc-ink-soft: rgba( 51, 53, 56, 0.6 );
	--cc-accent: var( --theme-palette-color-1, #00A6CE );
	--cc-container: 1800px;
	--cc-font: 'Montserrat', sans-serif;
	margin-inline: auto;
	box-sizing: border-box;
	font-family: var( --cc-font );
}

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

.cc-equipa__swiper {
	width: 100%;
}

.cc-eq-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
}

.cc-equipa--single .cc-eq-card {
	max-width: 425px;
}

.cc-eq-card__photo {
	width: 100%;
	aspect-ratio: 425 / 560;
	background: #E9E4D6;
	overflow: hidden;
}

.cc-eq-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cc-eq-card__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
	padding: 12px 24px;
}

.cc-eq-card__id {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

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

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

.cc-eq-card__phone {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 400;
	color: var( --cc-ink );
	text-decoration: none;
	white-space: nowrap;
}

.cc-eq-card__phone svg {
	width: 16px;
	height: 16px;
	display: block;
	flex: 0 0 auto;
}

/* ----------------------------------------------------------------------
 * Mobile footer — counter (left) + nav buttons (right), below the card.
 * Hidden on wider breakpoints — the Penpot desktop board has no controls
 * at all (see file docblock).
 * -------------------------------------------------------------------- */

.cc-equipa__foot {
	display: none;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
}

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

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

.cc-equipa__prev,
.cc-equipa__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-equipa__prev svg,
.cc-equipa__next svg {
	width: 18px;
	height: 18px;
	display: block;
}

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

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

	.cc-equipa--single .cc-eq-card {
		max-width: none;
	}
}