/**
 * Kubota Europe product key features (WPBakery element
 * `vc_kbeu_product_key_features`).
 *
 * Based on the Figma design (heading node 3721-2860: "Key Features", 64px / Helvetica
 * Neue LT Pro Roman, black; table header node 3721-2866: teal #03A8A9, 20px / Medium;
 * expand icon node 4481-4706). A two-column row: on the left (~65%) the heading over a
 * data table whose rows are divided by a thin rule; on the right (~35%) a one-per-view
 * image carousel — rounded corners, an expand icon over the top-right — reusing the
 * highlights control (teal chevrons + dots). Clicking an image opens the lightbox.
 *
 * 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`.
 * The bundled family ships 300 / 500 / 700 weights.
 */

.kbeu-product-kf {
	--kbeu-kf-teal: #03a8a9;
	--kbeu-kf-ink: #1d1d1b;
	--kbeu-kf-line: #d3d6d8;
	--kbeu-kf-dot: #d3d6d8;
	--kbeu-kf-gap: clamp( 28px, 4vw, 72px );
}

.kbeu-product-kf__inner {
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: var( --kbeu-kf-gap );
}

/* Left column (~65%) and right column (~35%) follow the Figma split. */
.kbeu-kf__main {
	flex: 65 1 0;
	min-width: 0;
}

.kbeu-kf__gallery {
	flex: 35 1 0;
	min-width: 0;
}

/* When the product has no gallery images the table spans the full width. */
.kbeu-product-kf--no-gallery .kbeu-kf__main {
	flex: 1 1 100%;
}

/* Heading. */
.kbeu-kf__title {
	margin: 0 0 clamp( 24px, 3vw, 44px );
	font-family: var( --kbeu-font-principal );
	font-weight: 500;
	line-height: 1.2;
	font-size: clamp( 34px, 5vw, 64px );
	color: #000;
}

/* Table: a horizontal scroll guard keeps a wide variants table from breaking the
   layout on narrow columns. */
.kbeu-kf__table-wrap {
	overflow-x: auto;
}

.kbeu-kf__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var( --kbeu-font-principal );
}

.kbeu-kf__table th,
.kbeu-kf__table td {
	padding: clamp( 12px, 1.4vw, 20px ) clamp( 12px, 1.6vw, 24px );
	text-align: left;
	vertical-align: top;
	line-height: 1.4;
}

.kbeu-kf__table th:first-child,
.kbeu-kf__table td:first-child {
	padding-left: 0;
}

/* Header cells (variants column headers + specs row/group headers): teal medium,
   matching Figma node 3721-2866. */
.kbeu-kf__table th {
	font-weight: 500;
	font-size: clamp( 16px, 1.4vw, 20px );
	color: var( --kbeu-kf-teal );
	white-space: nowrap;
}

/* Body cells: dark, lighter weight. */
.kbeu-kf__table td {
	font-weight: 300;
	font-size: clamp( 15px, 1.3vw, 19px );
	color: var( --kbeu-kf-ink );
}

/* A thin rule between rows. */
.kbeu-kf__table--variants thead th {
	border-bottom: 1px solid var( --kbeu-kf-line );
}

.kbeu-kf__table--variants tbody td,
.kbeu-kf__table--specs tbody th,
.kbeu-kf__table--specs tbody td {
	border-bottom: 1px solid var( --kbeu-kf-line );
}

.kbeu-kf__table--variants tbody tr:last-child td {
	border-bottom: 0;
}

.kbeu-kf__table--specs tbody tr:last-child th,
.kbeu-kf__table--specs tbody tr:last-child td {
	border-bottom: 0;
}

/* Specs group heading spans both columns as a dark, bold sub-header. */
.kbeu-kf__group-row th {
	padding-top: clamp( 20px, 2.4vw, 32px );
	font-weight: 700;
	color: var( --kbeu-kf-ink );
	white-space: normal;
}

.kbeu-kf__group-row:first-child th {
	padding-top: 0;
}

/* Specs value column keeps the value from wrapping too early. */
.kbeu-kf__table--specs td {
	white-space: normal;
}

/* ----- Right column: image carousel ----- */
.kbeu-kf__viewport {
	overflow: hidden;
	border-radius: 16px;
}

.kbeu-kf__track {
	display: flex;
	/* Slides 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-kf__track.is-fading {
	opacity: 0;
}

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

/* The whole image is the zoom trigger (a button reset). */
.kbeu-kf__figure {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	line-height: 0;
}

.kbeu-kf__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Expand icon over the top-right corner of the image. */
.kbeu-kf__expand {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.45 );
	color: #fff;
	transition: background 0.2s ease;
}

.kbeu-kf__figure:hover .kbeu-kf__expand,
.kbeu-kf__figure:focus-visible .kbeu-kf__expand {
	background: var( --kbeu-kf-teal );
}

.kbeu-kf__expand-icon {
	display: block;
}

/* Control: prev/next chevrons + dots (same as the highlights control). */
.kbeu-kf__control {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp( 16px, 2.5vw, 32px );
	margin-top: clamp( 20px, 2.4vw, 32px );
}

.kbeu-kf__control[hidden] {
	display: none;
}

.kbeu-kf__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var( --kbeu-kf-teal );
	cursor: pointer;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.kbeu-kf__arrow:hover {
	color: #027a7b;
}

.kbeu-kf__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.kbeu-kf__dots {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kbeu-kf__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --kbeu-kf-dot );
	cursor: pointer;
	transition: width 0.25s ease, background 0.25s ease, border-radius 0.25s ease;
}

.kbeu-kf__dot.is-active {
	width: 28px;
	border-radius: 4px;
	background: var( --kbeu-kf-teal );
	cursor: default;
}

/* ----- Lightbox (created by the JS, appended to <body>) ----- */
.kbeu-kf-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp( 20px, 5vw, 64px );
	background: rgba( 0, 0, 0, 0.85 );
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* The element sets `display:flex`, which overrides the browser's `[hidden]`
   `display:none`; restore it so a closed lightbox is fully removed and stops
   capturing clicks over the page. */
.kbeu-kf-lightbox[hidden] {
	display: none;
}

.kbeu-kf-lightbox.is-open {
	opacity: 1;
}

.kbeu-kf-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
}

.kbeu-kf-lightbox__close {
	position: absolute;
	top: clamp( 12px, 2vw, 28px );
	right: clamp( 12px, 2vw, 28px );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.14 );
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
}

.kbeu-kf-lightbox__close:hover {
	background: var( --kbeu-kf-teal, #03a8a9 );
}

/* Prev/next controls to browse the whole gallery from inside the lightbox. */
.kbeu-kf-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.14 );
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
}

.kbeu-kf-lightbox__nav:hover {
	background: var( --kbeu-kf-teal, #03a8a9 );
}

.kbeu-kf-lightbox__nav--prev {
	left: clamp( 12px, 2.5vw, 32px );
}

.kbeu-kf-lightbox__nav--next {
	right: clamp( 12px, 2.5vw, 32px );
}

.kbeu-kf-lightbox__nav[hidden] {
	display: none;
}

/* Position counter (e.g. "2 / 5") centred along the bottom. */
.kbeu-kf-lightbox__counter {
	position: absolute;
	left: 50%;
	bottom: clamp( 12px, 2.5vw, 28px );
	transform: translateX( -50% );
	padding: 4px 14px;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.5 );
	color: #fff;
	font-family: var( --kbeu-font-principal );
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.02em;
}

.kbeu-kf-lightbox__counter[hidden] {
	display: none;
}

/* Stack on narrow viewports: table on top, carousel below. */
@media ( max-width: 860px ) {
	.kbeu-product-kf__inner {
		flex-direction: column;
	}

	.kbeu-kf__main,
	.kbeu-kf__gallery {
		flex: none;
		width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.kbeu-kf-lightbox {
		transition: none;
	}
}