/* BP About Hero V2 widget styles
 *
 * Rebuilt from scratch. Fully isolated implementation. All rules
 * are scoped under `.bp-about-hero-v2` and use a unique
 * `--bp-ah-v2-*` token namespace.
 *
 * Layout (desktop, ≥ 1025px):
 *   - full-width cream section, ~660px tall
 *   - inner is a 2-column grid (45/52) that places the left text
 *     block on top of a right-aligned hero image
 *   - the right visual fills the inner from edge to edge via
 *     `align-self: stretch` + `inline-size: 100%`
 *   - the left text block sits in the first column and overlaps
 *     the right image through a CSS cream-to-transparent fade
 *     painted on `::before` of the visual (no extra DOM, no
 *     image tinting, no darkening)
 *   - the 3 identity points at the bottom of the text block sit
 *     in a single row, separated by thin muted-gold vertical
 *     dividers built from CSS borders
 *
 * Tablet (769-1024px):
 *   - keep the 2-column composition
 *   - reduce title size, body size, point gap
 *
 * Mobile (≤ 768px):
 *   - the right visual is moved to a lower fixed-height panel
 *     (no longer overlapping the text)
 *   - the 3 points stack vertically, vertical separators hidden
 *   - all padding reduced for a tighter mobile read
 *
 * Approved palette only:
 *   #374F37  deep green
 *   #B8B25A  olive / gold
 *   #D8C47C  gold border / soft
 *   #FBF6EC  cream background
 *   #1F2A1F  text
 *   #5C6A5C  text muted
 *   #FFFFFF  white
 *
 * No SVG illustrations. The gold divider under the eyebrow is
 * a flex row of two 1px lines flanking a rotated square built
 * with `::before` borders.
 */

/* ============================================================
 * SECTION — simple CSS background image.
 * The URL comes from the `--bp-ah-v2-hero-bg` inline custom
 * property (set by render() when a hero image is selected).
 * `background-size: cover` is enforced on the section so
 * the image always covers the full hero, full-bleed.
 * ============================================================ */
.bp-about-hero-v2 {
	--bp-ah-v2-bg:           #FBF6EC;
	--bp-ah-v2-hero-bg:      none;
	--bp-ah-v2-fade:         #FBF6EC;
	--bp-ah-v2-green:        #374F37;
	--bp-ah-v2-olive:        #B8B25A;
	--bp-ah-v2-gold:         #D8C47C;
	--bp-ah-v2-gold-soft:    #E4DCCB;
	--bp-ah-v2-white:        #FFFFFF;
	--bp-ah-v2-text:         #1F2A1F;
	--bp-ah-v2-text-muted:   #5C6A5C;

	--bp-ah-v2-inner-max:    1320px;

	--bp-ah-v2-section-min:  660px;
	--bp-ah-v2-section-max:  700px;

	--bp-ah-v2-font-body:    var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-ah-v2-font-display: var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	--bp-ah-v2-point-icon:   44px;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--bp-ah-v2-bg);
	background-image: var(--bp-ah-v2-hero-bg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	color: var(--bp-ah-v2-text);
	font-family: var(--bp-ah-v2-font-body);
}

.bp-about-hero-v2 *,
.bp-about-hero-v2 *::before,
.bp-about-hero-v2 *::after {
	box-sizing: border-box;
}

/* Full-bleed: the widget always spans the full width of its
 * Elementor column / page so the inner can use the section
 * background. */
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap,
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-about-hero-v2,
.elementor-section .elementor-container,
.elementor-section .elementor-container > .elementor-column,
.elementor-section .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-section .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor-section .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-about-hero-v2 {
	inline-size: 100%;
	max-inline-size: 100%;
}

/* ============================================================
 * INNER — 2-column grid (text / visual)
 * The hero image is painted as a CSS background on the
 * section via the `--bp-ah-v2-hero-bg` custom property, with
 * `background-size: cover` so the image always covers the
 * full section. The cream-to-transparent ::before fade on
 * top of the section hides the part of the image that sits
 * underneath the text column, so the seam disappears.
 * The inner sits at z-index 2 so the entire content column
 * renders above the section's ::before fade (z-index 1).
 * ============================================================ */
.bp-about-hero-v2__inner {
	position: relative;
	isolation: isolate;
	z-index: 2;
	inline-size: 100%;
	max-inline-size: var(--bp-ah-v2-inner-max);
	margin-inline: auto;
	padding-inline: clamp(28px, 5vw, 72px);
	min-block-size: var(--bp-ah-v2-section-min);
	display: grid;
	grid-template-columns: minmax(0, 0.87fr) minmax(0, 1fr);
	align-items: stretch;
}

/* ============================================================
 * LEFT — TEXT BLOCK
 * ============================================================ */
.bp-about-hero-v2__content {
	position: relative;
	z-index: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
	padding-block: 30px;
	padding-inline: 30px clamp(28px, 5.5vw, 80px);
	min-block-size: 0;
	min-inline-size: 0;
}

.bp-about-hero-v2__eyebrow {
	margin: 0;
	font-family: var(--bp-ah-v2-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bp-ah-v2-green);
}

.bp-about-hero-v2__divider {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	inline-size: 100%;
	max-inline-size: 180px;
	margin: 0;
}

.bp-about-hero-v2__divider-line {
	flex: 1 1 auto;
	block-size: 1px;
	background: var(--bp-ah-v2-olive);
	opacity: 0.85;
}

.bp-about-hero-v2__divider-diamond {
	inline-size: 8px;
	block-size: 8px;
	background: var(--bp-ah-v2-olive);
	transform: rotate(45deg);
	flex: 0 0 auto;
}

.bp-about-hero-v2__title {
	margin: 0;
	font-family: var(--bp-ah-v2-font-display);
	font-weight: 400;
	font-size: clamp(36px, 4.6vw, 64px);
	line-height: 1.06;
	letter-spacing: -0.005em;
	color: #374F3C;
	max-inline-size: 650px;
}

.bp-about-hero-v2__body {
	margin: 0;
	max-inline-size: 600px;
	font-family: var(--bp-ah-v2-font-body);
	font-size: clamp(15px, 1.15vw, 18px);
	font-weight: 500;
	line-height: 1.6;
	color: var(--bp-ah-v2-text);
}

/* ============================================================
 * IDENTITY POINTS — 3-up row
 * ============================================================ */
.bp-about-hero-v2__points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin-block-start: clamp(24px, 2.6vw, 36px);
	padding: 0;
	inline-size: 100%;
	max-inline-size: 720px;
}

.bp-about-hero-v2__point {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 4px 18px;
	min-inline-size: 0;
}

/* Thin muted-gold vertical divider between points — built from
 * a CSS border on the left edge of points 2 and 3. */
.bp-about-hero-v2__point + .bp-about-hero-v2__point::before {
	content: "";
	position: absolute;
	inset-block: 8px;
	inset-inline-start: 0;
	inline-size: 1px;
	background: var(--bp-ah-v2-gold);
	opacity: 0.75;
}

.bp-about-hero-v2__point-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-ah-v2-point-icon);
	block-size: var(--bp-ah-v2-point-icon);
	flex: 0 0 auto;
	line-height: 0;
}

.bp-about-hero-v2__point-icon-img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
	object-position: center center;
}

.bp-about-hero-v2__point-main {
	font-family: var(--bp-ah-v2-font-display);
	font-weight: 400;
	font-size: clamp(15px, 1.4vw, 20px);
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--bp-ah-v2-green);
	margin: 0;
}

.bp-about-hero-v2__point-sub {
	font-family: var(--bp-ah-v2-font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--bp-ah-v2-text-muted);
	margin: 0;
}

/* ============================================================
 * RIGHT — HERO VISUAL (placeholder column)
 * The image is a background on the section, not on this div.
 * This element only exists to occupy the right grid column.
 * ============================================================ */
.bp-about-hero-v2__visual {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	position: relative;
	z-index: 1;
	inline-size: 100%;
	block-size: 100%;
	min-block-size: var(--bp-ah-v2-section-min);
}

/* Cream-to-transparent fade painted ON TOP of the section so
 * the seam between text and image disappears. The fade lives
 * on the section (not the inner) so it touches the inline-
 * start edge of the viewport at full width — the inner is
 * capped at 1500px, but the section is full-bleed.
 * Sits at z-index 1 so the content (z-index 2) always reads
 * on top of the fade. */
.bp-about-hero-v2::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 72%;
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(
		90deg,
		#fbf6ec 0%,
		rgba(251, 246, 236, 0.96) 14%,
		rgba(251, 246, 236, 0.72) 34%,
		rgba(251, 246, 236, 0.22) 58%,
		rgba(251, 246, 236, 0) 78%
	);
}

/* ============================================================
 * TABLET (769-1024px)
 * ============================================================ */
@media (max-width: 1024px) and (min-width: 769px) {
	.bp-about-hero-v2 {
		--bp-ah-v2-section-min: 560px;
		--bp-ah-v2-section-max: 620px;
		--bp-ah-v2-point-icon: 38px;
	}

	.bp-about-hero-v2__content {
		padding: 44px 22px 44px clamp(20px, 4.2vw, 44px);
		gap: 18px;
	}

	.bp-about-hero-v2__title {
		font-size: clamp(30px, 4vw, 44px);
	}

	.bp-about-hero-v2__body {
		font-size: 15px;
	}

	.bp-about-hero-v2__point {
		padding: 4px 12px;
	}

	.bp-about-hero-v2::before {
		inline-size: 80%;
	}
}

/* ============================================================
 * MOBILE (≤ 768px)
 * ============================================================ */
@media (max-width: 768px) {
	.bp-about-hero-v2 {
		--bp-ah-v2-section-min: 0;
		--bp-ah-v2-section-max: none;
		--bp-ah-v2-point-icon: 36px;
	}

	.bp-about-hero-v2__inner {
		grid-template-columns: 1fr;
		min-block-size: 0;
	}

	.bp-about-hero-v2__content {
		order: 1;
		padding: 44px 20px 28px;
		gap: 16px;
	}

	.bp-about-hero-v2__title {
		font-size: clamp(28px, 7vw, 38px);
		line-height: 1.1;
	}

	.bp-about-hero-v2__body {
		font-size: 15px;
	}

	.bp-about-hero-v2__points {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-block-start: 18px;
	}

	/* Hide the gold vertical dividers when points stack. */
	.bp-about-hero-v2__point + .bp-about-hero-v2__point::before {
		display: none;
	}

	.bp-about-hero-v2__point {
		flex-direction: row;
		justify-content: flex-start;
		text-align: start;
		gap: 14px;
		padding: 8px 0;
	}

	.bp-about-hero-v2__point-main {
		margin-inline-end: 8px;
	}

	.bp-about-hero-v2__visual {
		order: 2;
		min-block-size: 280px;
		max-block-size: 320px;
		block-size: 320px;
	}

	.bp-about-hero-v2::before {
		inline-size: 100%;
		block-size: 62%;
		background: linear-gradient(
			180deg,
			#fbf6ec 0%,
			rgba(251, 246, 236, 0.96) 14%,
			rgba(251, 246, 236, 0.6) 38%,
			rgba(251, 246, 236, 0) 70%
		);
	}
}

/* ============================================================
 * PRINT
 * ============================================================ */
@media print {
	.bp-about-hero-v2 {
		background-image: none !important;
	}
	.bp-about-hero-v2__visual,
	.bp-about-hero-v2::before {
		display: none !important;
	}
}