/**
 * Finewerk Feature Tabs
 *
 * Scoped, BEM-style styles for the horizontal pill-tabs feature section:
 * centered header, rounded-full tab bar with a white active pill, and one
 * persistent content panel. The left column is a static "stage" whose
 * background and size never change; every tab's image lives inside it as
 * a stacked scene rendered in one of four mockup layout versions:
 *
 *   --v1  offset card anchored top-left, cropped off the right/bottom
 *   --v2  centered floating card with stacked translucent layers behind
 *   --v3  tilted card hovering over a dashed drop-zone outline
 *   --v4  bottom-anchored card with a floating dark action bar on top
 *
 * Switching tabs cross-fades only the active scene and text entry — the
 * panel, stage and content column keep their place and dimensions.
 * Scene geometry uses percentages of the stage and container-query (cqi)
 * units so every composition keeps its proportions at any size. All
 * custom properties are namespaced with --fw-ft- 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-feature-tabs {
	font-family: var(--fw-font-body);
}

.finewerk-feature-tabs :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-feature-tabs :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.finewerk-feature-tabs {
	/* Layout rhythm (overridable from the editor via controls). */
	--fw-ft-header-max-width: 640px;
	--fw-ft-header-gap: 48px;
	--fw-ft-tabbar-max-width: 100%;
	--fw-ft-tabbar-gap: 8px;
	--fw-ft-panel-top-gap: 40px;
	--fw-ft-panel-gap: 64px;
	--fw-ft-panel-align: center;
	--fw-ft-badge-gap: 20px;
	--fw-ft-title-gap: 16px;
	--fw-ft-stage-ratio: 4 / 3;
	--fw-ft-switch-duration: 350ms;
	/* Design tokens. */
	--fw-ft-color-heading: #1e1e1e;
	--fw-ft-color-muted: #5a5a5a;
	--fw-ft-color-deep: #123f3a;
	--fw-ft-color-card: #ffffff;
	--fw-ft-color-pill: #101010;
	--fw-ft-font-heading: var(--fw-font-title);
	--fw-ft-font-body: var(--fw-font-body);
	display: block;
	width: 100%;
	overflow-x: clip;
}

/* ---------- Section header ---------- */

.finewerk-feature-tabs__header {
	max-width: var(--fw-ft-header-max-width);
	margin: 0 auto var(--fw-ft-header-gap);
	text-align: center;
}

.finewerk-feature-tabs__heading {
	margin: 0;
	font-family: var(--fw-ft-font-heading);
	font-size: 2.125rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--fw-ft-color-heading);
}

.finewerk-feature-tabs__description {
	margin: 0.9em 0 0;
	font-family: var(--fw-ft-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--fw-ft-color-muted);
}

/* ---------- Pill tab bar ---------- */

.finewerk-feature-tabs__tabbar {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
	column-gap: var(--fw-ft-tabbar-gap);
	max-width: var(--fw-ft-tabbar-max-width);
	margin: 0 auto;
	padding: 4px;
	background-color: #ecebe8;
	border-radius: 999px;
}

.finewerk-feature-tabs__tab {
	flex: 1 1 auto;
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 14px 28px;
	background: transparent;
	border: 0;
	border-radius: 999px;
	font-family: var(--fw-ft-font-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--fw-ft-color-muted);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.finewerk-feature-tabs__tab:hover {
	color: var(--fw-ft-color-heading);
}

.finewerk-feature-tabs__tab:focus-visible {
	outline: 2px solid var(--fw-ft-color-deep);
	outline-offset: 2px;
}

.finewerk-feature-tabs__tab.is-fw-ft-active {
	background-color: #ffffff;
	color: var(--fw-ft-color-heading);
	box-shadow: 0 2px 8px rgba(30, 30, 30, 0.08);
}

/* ---------- Persistent panel ---------- */

/* One panel for all tabs: it is never hidden or re-rendered. Only the
   scene inside the stage and the entry inside the content column swap. */
.finewerk-feature-tabs__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--fw-ft-panel-gap);
	row-gap: calc(var(--fw-ft-panel-gap) / 2);
	align-items: var(--fw-ft-panel-align);
	margin-top: var(--fw-ft-panel-top-gap);
}

.finewerk-feature-tabs__panel:focus-visible {
	outline: 2px solid var(--fw-ft-color-deep);
	outline-offset: 4px;
}

/* ---------- Stage: static media area ---------- */

/* Fixed aspect ratio + background that persist across tab switches, so
   the media side never jumps. cqi units inside scale with its width. */
.finewerk-feature-tabs__stage {
	position: relative;
	width: 100%;
	min-width: 0;
	aspect-ratio: var(--fw-ft-stage-ratio);
	overflow: hidden;
	border-radius: 24px;
	background: linear-gradient(135deg, #123f3a 0%, #1f2421 55%, #3d1f24 100%);
	container-type: inline-size;
	isolation: isolate;
}

/* ---------- Scenes: one stacked layer per tab ---------- */

.finewerk-feature-tabs__scene {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(0.985);
	transition:
		opacity var(--fw-ft-switch-duration) ease,
		transform var(--fw-ft-switch-duration) ease,
		visibility 0s linear var(--fw-ft-switch-duration);
}

.finewerk-feature-tabs__scene.is-fw-ft-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	z-index: 1;
	transition:
		opacity var(--fw-ft-switch-duration) ease,
		transform var(--fw-ft-switch-duration) ease;
}

/* The mockup card that hosts the tab image. Position, radius, rotation
   and shadow are set per version below. z-index keeps decorative
   pseudo-elements (layers, drop zone) behind it. */
.finewerk-feature-tabs__card {
	position: absolute;
	z-index: 1;
	overflow: hidden;
	background: var(--fw-ft-color-card);
	border-radius: 18px;
	box-shadow: 0 24px 48px rgba(8, 12, 16, 0.28);
}

.finewerk-feature-tabs__card .finewerk-feature-tabs__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* --- Version 1: offset card, cropped off the right/bottom edges --- */

.finewerk-feature-tabs__scene--v1 .finewerk-feature-tabs__card {
	top: 7%;
	left: 6.5%;
	right: -5%;
	bottom: -7%;
	border-radius: clamp(12px, 2.2cqi, 22px);
	box-shadow: 0 18px 44px rgba(8, 12, 16, 0.3);
}

.finewerk-feature-tabs__scene--v1 .finewerk-feature-tabs__image {
	object-position: top left;
}

/* --- Version 2: centered floating card with stacked layers behind --- */

.finewerk-feature-tabs__scene--v2::before,
.finewerk-feature-tabs__scene--v2::after {
	content: "";
	position: absolute;
	border-radius: clamp(12px, 2.4cqi, 26px);
	height: 12%;
}

/* Nearer layer, peeking just above the card. */
.finewerk-feature-tabs__scene--v2::before {
	top: 8%;
	left: 9.5%;
	right: 9.5%;
	background: rgba(255, 255, 255, 0.38);
}

/* Farther, fainter layer above it. */
.finewerk-feature-tabs__scene--v2::after {
	top: 4.5%;
	left: 12.5%;
	right: 12.5%;
	background: rgba(255, 255, 255, 0.2);
}

.finewerk-feature-tabs__scene--v2 .finewerk-feature-tabs__card {
	top: 12.5%;
	left: 7%;
	right: 7%;
	bottom: 8.5%;
	border-radius: clamp(16px, 2.8cqi, 30px);
	box-shadow: 0 28px 56px rgba(8, 12, 16, 0.32);
}

/* --- Version 3: tilted card hovering over a dashed drop zone --- */

.finewerk-feature-tabs__scene--v3::before {
	content: "";
	position: absolute;
	top: 15.5%;
	left: 21.5%;
	right: 23%;
	bottom: 10.5%;
	border: 2px dashed rgba(255, 255, 255, 0.75);
	border-radius: clamp(10px, 1.8cqi, 18px);
	transform: rotate(-1.5deg);
}

.finewerk-feature-tabs__scene--v3 .finewerk-feature-tabs__card {
	top: 11.5%;
	left: 26.5%;
	right: 17.5%;
	bottom: 12.5%;
	border-radius: clamp(14px, 2.4cqi, 26px);
	transform: rotate(-3deg);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

/* --- Version 4: bottom card with a floating dark action bar --- */

.finewerk-feature-tabs__scene--v4 .finewerk-feature-tabs__card {
	top: 14%;
	left: 6.5%;
	right: 6.5%;
	bottom: -5%;
	border-radius: clamp(16px, 2.8cqi, 30px);
	box-shadow: 0 18px 44px rgba(8, 12, 16, 0.3);
}

.finewerk-feature-tabs__pill {
	position: absolute;
	top: 7%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	max-width: 92%;
	transform: translateX(-50%);
	gap: 12px;
	gap: 2.2cqi;
	padding: 10px 12px 10px 20px;
	padding: 1.5cqi 1.5cqi 1.5cqi 2.8cqi;
	background: var(--fw-ft-color-pill);
	color: #ffffff;
	border-radius: 18px;
	border-radius: clamp(14px, 2.6cqi, 28px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
}

.finewerk-feature-tabs__pill-label {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--fw-ft-font-body);
	font-size: 16px;
	font-size: 3cqi;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.finewerk-feature-tabs__pill-icon {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
}

.finewerk-feature-tabs__pill-avatars {
	display: flex;
	align-items: center;
}

.finewerk-feature-tabs__pill-avatar,
.finewerk-feature-tabs__pill-count {
	width: 34px;
	height: 34px;
	width: 6.4cqi;
	height: 6.4cqi;
	border-radius: 50%;
	flex: 0 0 auto;
}

.finewerk-feature-tabs__pill-avatar {
	display: block;
	object-fit: cover;
}

.finewerk-feature-tabs__pill-avatars > * + * {
	margin-left: -8px;
	margin-left: -1.6cqi;
}

.finewerk-feature-tabs__pill-count {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 2px solid #ffffff;
	background: var(--fw-ft-color-pill);
	font-family: var(--fw-ft-font-body);
	font-size: 12px;
	font-size: 2.2cqi;
	font-weight: 500;
	line-height: 1;
}

/* ---------- Content column: stacked text entries ---------- */

/* All entries share one grid cell, so the column is always as tall as
   the tallest entry and the panel never changes height on switch. */
.finewerk-feature-tabs__contents {
	display: grid;
	min-width: 0;
}

.finewerk-feature-tabs__entry {
	grid-area: 1 / 1;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity var(--fw-ft-switch-duration) ease,
		transform var(--fw-ft-switch-duration) ease,
		visibility 0s linear var(--fw-ft-switch-duration);
}

.finewerk-feature-tabs__entry.is-fw-ft-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity var(--fw-ft-switch-duration) ease,
		transform var(--fw-ft-switch-duration) ease;
}

.finewerk-feature-tabs__badge {
	display: inline-block;
	margin: 0 0 var(--fw-ft-badge-gap);
	padding: 7px 14px;
	background-color: var(--fw-ft-color-deep);
	border-radius: 999px;
	font-family: var(--fw-ft-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #ffffff;
}

.finewerk-feature-tabs__title {
	margin: 0;
	font-family: var(--fw-ft-font-heading);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--fw-ft-color-heading);
}

.finewerk-feature-tabs__title-link {
	color: inherit;
	text-decoration: none;
}

.finewerk-feature-tabs__title-link:hover,
.finewerk-feature-tabs__title-link:focus-visible {
	text-decoration: underline;
}

.finewerk-feature-tabs__title-link:focus-visible {
	outline: 2px solid var(--fw-ft-color-deep);
	outline-offset: 2px;
}

.finewerk-feature-tabs__text {
	margin: var(--fw-ft-title-gap) 0 0;
	font-family: var(--fw-ft-font-body);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--fw-ft-color-muted);
}

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

@media (prefers-reduced-motion: reduce) {
	.finewerk-feature-tabs__tab,
	.finewerk-feature-tabs__scene,
	.finewerk-feature-tabs__scene.is-fw-ft-active,
	.finewerk-feature-tabs__entry,
	.finewerk-feature-tabs__entry.is-fw-ft-active {
		transition: none;
	}

	.finewerk-feature-tabs__scene,
	.finewerk-feature-tabs__entry {
		transform: none;
	}
}

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

/* Tablet: tighter columns. Scene geometry is percentage/cqi based, so
   every mockup keeps its composition automatically. */
@media (max-width: 1024px) {
	.finewerk-feature-tabs {
		--fw-ft-panel-gap: 40px;
	}

	.finewerk-feature-tabs__tab {
		padding: 12px 18px;
	}
}

/* Mobile: stack stage above content; tab bar becomes a horizontally
   scrollable row of pills with a hidden scrollbar. */
@media (max-width: 767px) {
	.finewerk-feature-tabs {
		--fw-ft-header-gap: 32px;
		--fw-ft-panel-top-gap: 28px;
	}

	.finewerk-feature-tabs__tabbar {
		justify-content: flex-start;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.finewerk-feature-tabs__tabbar::-webkit-scrollbar {
		display: none;
	}

	.finewerk-feature-tabs__tab {
		flex: 0 0 auto;
	}

	.finewerk-feature-tabs__panel {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	.finewerk-feature-tabs__stage {
		order: 0;
		border-radius: 18px;
	}

	.finewerk-feature-tabs__contents {
		order: 1;
	}
}