/**
 * Kubota Europe product descriptions (WPBakery element `vc_kbeu_product_descriptions`).
 *
 * Based on the Figma design 3721-2798: each content block is a two-column row with
 * a rounded media (image / YouTube video, radius 15px) beside a light grey text
 * card (#f6f6f6, radius 14px). The card holds a bold title (32px / 700, black,
 * line-height 1.37) over a light paragraph (24px / 300, #1d1d1b, line-height 1.55).
 * The block modifier `--media-left` / `--media-right` places the media on either
 * side (`media_position` in the Product sheet → Descriptions). Media and card share
 * the same height; on narrow viewports the row stacks (media on top).
 *
 * 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-descriptions__inner {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2vw, 29px);
}

.kbeu-descriptions__block {
	display: flex;
	align-items: stretch;
	/* Figma: 29px between the media and the card (1230 + 29 + 637 = 1896). */
	gap: clamp( 20px, 2vw, 29px );
}

/* `media_position = right` (default): keep source order media→card but flip it so
   the media sits on the right and the card on the left. */
.kbeu-descriptions__block--media-right {
	flex-direction: row-reverse;
}

/* Media column vs. card follow the Figma widths — image 1230px, card 637px — so
   the description takes ~1/3 and the image ~2/3 (the grow factors are those px). */
.kbeu-descriptions__media {
	flex: 1230 1 0;
	min-width: 0;
	border-radius: 15px;
	overflow: hidden;
}

/* Image and uploaded-video media keep the Figma ratio (1230 × 589 ≈ 2.088:1) at
   every width; the card stretches to match. The media covers the box, so a taller
   card only crops it further — never letterboxes. (YouTube embeds keep 16:9.) */
.kbeu-descriptions__media--image,
.kbeu-descriptions__media--video-file {
	aspect-ratio: 1230 / 589;
}

.kbeu-descriptions__img,
.kbeu-descriptions__video-file {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kbeu-descriptions__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.kbeu-descriptions__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Text card. */
.kbeu-descriptions__card {
	flex: 637 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #f6f6f6;
	border-radius: 14px;
	padding: clamp( 28px, 3vw, 52px );
}

.kbeu-descriptions__block--no-media .kbeu-descriptions__card {
	flex: 1 1 100%;
}

/* Media-only block (no text card): the media spans the full width. */
.kbeu-descriptions__block--no-card .kbeu-descriptions__media {
	flex: 1 1 100%;
}

.kbeu-descriptions__title {
	margin: 0;
	font-family: var( --kbeu-font-principal );
	font-weight: 700;
	line-height: 1.37;
	font-size: clamp( 24px, 2.4vw, 32px );
	color: #000;
}

.kbeu-descriptions__text {
	margin-top: clamp( 16px, 1.6vw, 28px );
	font-family: var( --kbeu-font-principal );
	font-weight: 300;
	line-height: 1.55;
	font-size: clamp( 17px, 1.7vw, 24px );
	color: #1d1d1b;
}

.kbeu-descriptions__title + .kbeu-descriptions__text {
	margin-top: clamp( 16px, 1.6vw, 28px );
}

.kbeu-descriptions__text > :first-child {
	margin-top: 0;
}

.kbeu-descriptions__text > :last-child {
	margin-bottom: 0;
}

/* Stack on narrow viewports: media on top, then card. The image keeps its Figma
   ratio; the card sizes to its own content. */
@media ( max-width: 860px ) {
	.kbeu-descriptions__block,
	.kbeu-descriptions__block--media-right {
		flex-direction: column;
	}

	.kbeu-descriptions__media,
	.kbeu-descriptions__card {
		flex: none;
		width: 100%;
	}
}