/**
 * Finewerk Team Slider
 *
 * Scoped, BEM-style styles for the team member card slider widget.
 * The track is a native horizontal scroller with scroll snapping; drag,
 * keyboard, active-card and dot behavior are layered on by team.js.
 * The active card expands its caption (name, role, chip, button) with a
 * smooth grid-rows + opacity transition. All custom properties are
 * namespaced with --fw-team- to avoid collisions.
 */

/* ------------------------------------------------------------------
 * Typography defaults (see assets/css/fonts.css)
 *
 * Hubot Sans for headings/titles/stat numbers, Archivo for everything
 * else. Declared at single-class specificity — the tag group through a
 * zero-specificity :where() — so an explicit Elementor Typography
 * control (which Elementor writes at element-id specificity) always
 * overrides it. No !important anywhere.
 * ---------------------------------------------------------------- */

.finewerk-team {
	font-family: var(--fw-font-body);
}

.finewerk-team :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fw-font-title);
}

/* Form controls do not inherit the document font: the UA sheet gives
   button/input/select/textarea their own `font: 400 13.33px Arial`.
   Opt them back into the component's face. */
.finewerk-team :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.finewerk-team {
	--fw-team-gap: 24px;
	--fw-team-card-w: 300px;
	--fw-team-card-h: 460px;
	--fw-team-card-radius: 18px;
	--fw-team-photo-radius: 12px;
	--fw-team-frame-pad: 8px;
	--fw-team-header-gap: 64px;
	--fw-team-join-line: 96px;
	--fw-team-dots-gap: 44px;
	display: block;
	width: 100%;
	box-sizing: border-box;
	/* Scrolling is confined to the track; the page must never overflow. */
	overflow: hidden;
	padding: 72px 48px 56px;
	/* Dark green surface with a subtle lighter radial sheen; the Elementor
	   Background group control overrides this when configured. */
	background-color: #26382B;
	background-image: radial-gradient(120% 110% at 50% 40%, #3E5A44 0%, #26382B 75%);
}

/* ---------- Header row ---------- */

.finewerk-team__header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	column-gap: 24px;
	margin-bottom: var(--fw-team-header-gap);
}

.finewerk-team__badge {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	margin-top: 8px;
	padding: 5px 16px;
	color: #FFFFFF;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}

.finewerk-team__heading {
	grid-column: 2;
	margin: 0;
	color: #FFFFFF;
	font-family: var(--fw-font-title);
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.01em;
	text-align: center;
}

.finewerk-team__join {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	column-gap: 14px;
	margin-top: 12px;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.finewerk-team__join:hover .finewerk-team__join-label {
	text-decoration: underline;
}

.finewerk-team__join:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 3px;
	border-radius: 4px;
}

.finewerk-team__join-line {
	display: inline-block;
	width: var(--fw-team-join-line);
	height: 1px;
	background-color: rgba(255, 255, 255, 0.4);
}

/* ---------- Viewport + track ---------- */

.finewerk-team__viewport {
	position: relative;
}

.finewerk-team__viewport:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 3px;
	border-radius: 4px;
}

.finewerk-team__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--fw-team-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	/* Hide the scrollbar in every engine. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.finewerk-team__track::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* Grab cursor only when drag-to-scroll is enabled. */
.finewerk-team[data-fw-team-drag="yes"] .finewerk-team__track {
	cursor: grab;
}

/* While dragging: grabbing cursor, no snapping, no text selection. */
.finewerk-team.is-fw-team-dragging .finewerk-team__track {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
	-webkit-user-select: none;
}

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

.finewerk-team__card {
	flex: 0 0 var(--fw-team-card-w);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: var(--fw-team-card-h);
	min-width: 0;
	margin: 0;
	padding: var(--fw-team-frame-pad);
	background-color: #FFFFFF;
	border-radius: var(--fw-team-card-radius);
	scroll-snap-align: start;
	cursor: pointer;
}

.finewerk-team__card.is-active {
	cursor: auto;
}

.finewerk-team__photo {
	flex: 1 1 auto;
	min-height: 0;
	border-radius: var(--fw-team-photo-radius);
	overflow: hidden;
}

.finewerk-team__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Caption (expands on the active card) ---------- */

.finewerk-team__caption {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.4s ease, opacity 0.3s ease;
}

.finewerk-team__caption-inner {
	overflow: hidden;
	min-height: 0;
}

.finewerk-team__caption-content {
	display: flex;
	flex-direction: column;
	padding: 14px 8px 8px;
}

.finewerk-team__card.is-active .finewerk-team__caption,
.finewerk-team[data-fw-team-captions="all"] .finewerk-team__caption {
	grid-template-rows: 1fr;
	opacity: 1;
}

.finewerk-team[data-fw-team-captions="all"] .finewerk-team__card {
	cursor: auto;
}

.finewerk-team__name {
	color: #16211B;
	font-family: var(--fw-font-title);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.finewerk-team__role {
	margin-top: 2px;
	color: #7C857E;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
}

.finewerk-team__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 10px;
	margin-top: 14px;
}

.finewerk-team__chip {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	padding: 6px 15px;
	color: #FFFFFF;
	background-color: #16211B;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}

.finewerk-team__button {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	padding: 6px 15px;
	color: #16211B;
	background-color: #FFFFFF;
	border: 1px solid #D8DCD9;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.finewerk-team__button:hover {
	color: #FFFFFF;
	background-color: #16211B;
	border-color: #16211B;
}

.finewerk-team__button:focus-visible {
	outline: 2px solid #16211B;
	outline-offset: 2px;
}

/* ---------- Pagination dots ---------- */

.finewerk-team__pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--fw-team-dots-gap);
}

.finewerk-team__dots {
	position: relative;
	display: flex;
	align-items: center;
	column-gap: 30px;
}

/* The thin line running through the dots. */
.finewerk-team__dots::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 1px;
	background-color: rgba(255, 255, 255, 0.35);
	pointer-events: none;
}

.finewerk-team__dot {
	position: relative;
	box-sizing: border-box;
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.55);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}

.finewerk-team__dot.is-active {
	width: 20px;
	border-radius: 5px;
	background-color: #10241A;
	cursor: default;
}

.finewerk-team__dot:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 3px;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.finewerk-team__track {
		scroll-behavior: auto !important;
	}

	.finewerk-team__caption,
	.finewerk-team__dot,
	.finewerk-team__button {
		transition: none !important;
	}
}

/* ---------- Responsive ---------- */

/* Tablet */
@media (max-width: 1024px) {
	.finewerk-team {
		--fw-team-card-w: 260px;
		--fw-team-card-h: 420px;
		--fw-team-header-gap: 48px;
		padding: 56px 32px 48px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.finewerk-team {
		--fw-team-card-w: 78vw;
		--fw-team-card-h: 430px;
		--fw-team-gap: 16px;
		--fw-team-header-gap: 40px;
		--fw-team-dots-gap: 32px;
		padding: 48px 20px 44px;
	}

	/* Header stacks: badge, heading, link — all centered. */
	.finewerk-team__header {
		display: flex;
		flex-direction: column;
		align-items: center;
		row-gap: 18px;
	}

	.finewerk-team__badge,
	.finewerk-team__join {
		margin-top: 0;
	}
}