/**
 * VBP About widget.
 *
 * TEMPLATE FILE: compiled by Elementor into uploads/elementor/css/vbp-about.css with the
 * ELEMENTOR_SCREEN_* placeholders replaced by the Site Settings breakpoints.
 * Do not use relative url()s here (images are rendered as <img> from PHP).
 *
 * Desktop proportions come from the Figma section (1544px content): image group 682 × 608,
 * text column 764, 95px between them, 90px between rows. Buttons reuse .vbp-btn.
 */

.vbp-about {
	--vbp-about-radius: 25px;

	position: relative;
	font-family: var(--vbp-font);
}

/*
 * Default ("container" background): the Full Width parent container paints the dark colour + shape
 * and sets the section spacing; the Boxed child container sets the width. "--bleed" is the legacy
 * mode where the widget draws all of that itself.
 */
.vbp-about--bleed {
	isolation: isolate;
	overflow: hidden;
	padding: 73px 0 127px;
	background-color: #0d0d0d;
}

/* Prefixed with .vbp-about to beat Elementor's `.elementor img { height: auto; max-width: 100% }`. */
.vbp-about .vbp-about__bg {
	position: absolute;
	z-index: -1;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

.vbp-about__rows {
	display: grid;
	row-gap: 90px;
}

.vbp-about__row {
	display: grid;
	grid-template-columns: minmax(0, 682fr) minmax(0, 764fr);
	align-items: center;
	column-gap: 95px;
}

.vbp-about__row--image-right {
	grid-template-columns: minmax(0, 764fr) minmax(0, 682fr);
}

.vbp-about__row--image-right .vbp-about__media {
	order: 2;
}

.vbp-about__row--no-image {
	grid-template-columns: minmax(0, 1fr);
}

/* Photo with the gold frame peeking out bottom-left (Figma: frame 664 × 584 at 0,24; photo 667 × 589 at 15,0). */
.vbp-about__media {
	position: relative;
	aspect-ratio: 682 / 608;
}

.vbp-about__frame {
	position: absolute;
	top: 3.95%;
	left: 0;
	width: 97.36%;
	height: 96.05%;
	border-radius: var(--vbp-about-radius);
	background-color: #c08e2f;
}

.vbp-about__photo {
	position: absolute;
	top: 0;
	left: 2.2%;
	width: 97.8%;
	height: 96.88%;
	overflow: hidden;
	border-radius: var(--vbp-about-radius);
	background-color: #1e1e1e;
}

.vbp-about .vbp-about__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 0;
	object-fit: cover;
	object-position: 50% 50%;
}

.vbp-about__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 41px;
}

.vbp-about__row--no-image .vbp-about__body {
	max-width: 764px;
}

.vbp-about__title {
	max-width: 684px;
	margin: 0;
	color: #fff;
	font-family: var(--vbp-font);
	font-size: 45px;
	font-weight: 600;
	line-height: 1.1;
}

.vbp-about__text {
	color: #e0e0e0;
	font-size: 20px;
	line-height: 28px;
}

.vbp-about__text p,
.vbp-about__text ul,
.vbp-about__text ol {
	margin: 0;
}

.vbp-about__text a {
	color: var(--vbp-color-gold-light);
}

.vbp-about__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Tablet and below: stack, image on top. */
@media (max-width: 1024px) {
	.vbp-about--bleed {
		padding: 64px 0 80px;
	}

	.vbp-about__rows {
		row-gap: 72px;
	}

	.vbp-about__row,
	.vbp-about__row--image-right {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.vbp-about__row--image-right .vbp-about__media {
		order: 0;
	}

	.vbp-about__media {
		width: 100%;
		max-width: 682px;
	}

	.vbp-about__body {
		gap: 32px;
	}

	.vbp-about__title {
		font-size: 36px;
	}

	.vbp-about__text {
		font-size: 18px;
		line-height: 26px;
	}
}

/* Mobile (Figma 393px): 28px titles, 18px text, buttons side by side. */
@media (max-width: 767px) {
	.vbp-about {
		--vbp-about-radius: 13px;
	}

	.vbp-about--bleed {
		padding: 38px 0;
	}

	.vbp-about__rows {
		row-gap: 32px;
	}

	.vbp-about__row,
	.vbp-about__row--image-right {
		row-gap: 30px;
	}

	.vbp-about__body {
		gap: 24px;
	}

	.vbp-about__title {
		font-size: 28px;
		line-height: 1.13;
	}

	.vbp-about__text {
		color: #dfdfdf;
		font-size: 18px;
		line-height: 28px;
	}

	.vbp-about__buttons {
		flex-wrap: nowrap;
		gap: 10px;
		width: 100%;
	}

	.vbp-about__buttons .vbp-btn {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		height: 65px;
		padding-inline: 13px;
		font-size: 20px;
	}
}