/**
 * Kubota Europe product specifications (WPBakery element
 * `vc_kbeu_product_specifications`).
 *
 * Based on the Figma designs 3721-2832 (a centered tab bar, active tab bold with a
 * teal #03A8A9 underline) and 3721-2843 (an image slider — rounded 27px, ~795×448 —
 * with circular prev/next arrows, beside a bullet list — 20px, #1D1D1B). Each
 * specification is one tab; the active panel alternates the media side per index
 * (even: image left, odd: image right). One panel is shown at a time.
 *
 * Font family "Helvetica Neue LT Pro" is provided by the plugin's fonts stylesheet
 * (this handle depends on `kbeu-fonts`) and referenced via `--kbeu-font-principal`.
 */

.kbeu-product-specs {
	--kbeu-specs-teal: #03a8a9;
	--kbeu-specs-ink: #1d1d1b;
}

.kbeu-product-specs__inner {
	margin: 0 auto;
}

/* Tab bar. */
.kbeu-specs__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: clamp( 18px, 2.4vw, 35px );
	margin-bottom: clamp( 32px, 4vw, 78px );
}

.kbeu-specs__tab {
	padding: 0 0 10px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	font-family: var( --kbeu-font-principal );
	font-weight: 500;
	font-size: clamp( 16px, 1.3vw, 20px );
	line-height: 1.3;
	color: #000;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.kbeu-specs__tab:hover {
	color: var( --kbeu-specs-teal );
}

.kbeu-specs__tab.is-active {
	font-weight: 700;
	border-bottom-color: var( --kbeu-specs-teal );
}

/* Panels: one shown at a time. The incoming panel fades in when its tab is
   selected (the JS shows it with `is-fading` = opacity 0, then removes it). */
.kbeu-specs__panel {
	display: none;
	align-items: center;
	gap: clamp( 28px, 3vw, 72px );
	transition: opacity 0.3s ease;
}

.kbeu-specs__panel.is-active {
	display: flex;
}

.kbeu-specs__panel.is-fading {
	opacity: 0;
}

/* Alternate the media side. `--media-left` is the source order (media → list);
   `--media-right` flips it. */
.kbeu-specs__panel--media-right {
	flex-direction: row-reverse;
}

/* Media column (image slider) — the narrower side (Figma ~795 vs ~1047). */
.kbeu-specs__media {
	flex: 795 1 0;
	min-width: 0;
}

.kbeu-specs__list {
	flex: 1047 1 0;
	min-width: 0;
	margin: 0;
	padding-left: 1.35em;
	list-style: disc;
	font-family: var( --kbeu-font-principal );
	font-weight: 400;
	font-size: clamp( 16px, 1.3vw, 20px );
	line-height: 1.55;
	color: var( --kbeu-specs-ink );
}

.kbeu-specs__list li {
	margin: 0 0 0.75em;
	padding-left: 0.35em;
	/* Figma: 20px / 400 / line-height 203% (40.6px). */
	font-size: 20px;
	font-weight: 400;
}

.kbeu-specs__list li:last-child {
	margin-bottom: 0;
}

.kbeu-specs__list li::marker {
	color: var( --kbeu-specs-ink );
}

.kbeu-specs__panel--no-media .kbeu-specs__list,
.kbeu-specs__panel--no-list .kbeu-specs__media {
	flex: 1 1 100%;
}

/* Image slider. */
.kbeu-specs__slider {
	position: relative;
}

.kbeu-specs__viewport {
	overflow: hidden;
	border-radius: 27px;
}

.kbeu-specs__track {
	display: flex;
	/* Images crossfade: the JS fades the track out, jumps to the next image while
	   invisible, then fades it back in (no horizontal sliding). An opacity fade is
	   gentle enough to keep even under prefers-reduced-motion. */
	transition: opacity 0.3s ease;
	will-change: opacity;
}

.kbeu-specs__track.is-fading {
	opacity: 0;
}

.kbeu-specs__slide {
	flex: 0 0 100%;
	min-width: 0;
}

.kbeu-specs__img {
	display: block;
	width: 100%;
	aspect-ratio: 795 / 448;
	object-fit: cover;
}

/* Prev/next circular arrows over the bottom of the image. */
.kbeu-specs__arrows {
	position: absolute;
	left: 50%;
	bottom: clamp( 14px, 2vw, 26px );
	transform: translateX( -50% );
	display: flex;
	gap: 10px;
}

.kbeu-specs__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp( 40px, 4vw, 48px );
	height: clamp( 40px, 4vw, 48px );
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* prev: outlined; next: filled teal (matches the Figma control). */
.kbeu-specs__arrow--prev {
	border: 1.5px solid var( --kbeu-specs-teal );
	background: #fff;
	color: var( --kbeu-specs-teal );
}

.kbeu-specs__arrow--prev:hover {
	background: var( --kbeu-specs-teal );
	color: #fff;
}

.kbeu-specs__arrow--next {
	border: 1.5px solid var( --kbeu-specs-teal );
	background: var( --kbeu-specs-teal );
	color: #fff;
}

.kbeu-specs__arrow--next:hover {
	background: #027a7b;
	border-color: #027a7b;
}

/* Stack on narrow viewports: image on top, list below (both sides). */
@media ( max-width: 860px ) {
	.kbeu-specs__panel,
	.kbeu-specs__panel--media-right {
		flex-direction: column;
		align-items: stretch;
	}

	.kbeu-specs__media,
	.kbeu-specs__list {
		flex: none;
		width: 100%;
	}

	.kbeu-specs__list {
		padding-left: 1.5em;
	}
}