/* ===========================================================
 * BP History Strip
 * Compact 3-point horizontal timeline + botanical decoration
 * =========================================================== */

.bp-history-strip {
	--bp-hs-panel-bg:  #FAF6EC;
	--bp-hs-fg:        #1F2A1F;
	--bp-hs-muted:     #5A6B5A;
	--bp-hs-olive:     #B8B25A;
	--bp-hs-green:     #2A3F2A;
	--bp-hs-border:    rgba( 184, 178, 90, 0.28 );
	--bp-hs-shadow:    0 16px 40px -28px rgba( 31, 42, 31, 0.24 );
	--bp-hs-radius:    26px;

	position: relative;
	color: var(--bp-hs-fg);
	overflow-x: clip;
	isolation: isolate;
}

/* ---- Panel ---- */
.bp-history-strip__panel {
	position: relative;
	max-inline-size: 1320px;
	margin-inline: auto;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding-block: 0;
	padding-inline: 0;
	overflow: hidden;
}

/* ---- Header ---- */
.bp-history-strip__header {
	max-inline-size: 760px;
	margin-inline: auto;
	margin-block-end: clamp( 16px, 2vw, 24px );
	text-align: center;
}

.bp-history-strip__eyebrow {
	display: inline-block;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bp-hs-olive);
	padding-block-end: 10px;
}

/* Title divider — mirrors the bp-why-choose reference:
 * 40px line + 6px rotated gold diamond + 40px line, 10px gap. */
.bp-history-strip__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 auto 18px;
}
.bp-history-strip__divider-line {
	display: block;
	inline-size: 40px;
	block-size: 1px;
	background: var(--bp-hs-olive);
}
.bp-history-strip__divider-diamond {
	display: block;
	inline-size: 6px;
	block-size: 6px;
	background: var(--bp-hs-olive);
	transform: rotate(45deg);
}

.bp-history-strip__title {
	font-family: 'DM Serif Display', Georgia, serif;
	font-weight: 400;
	font-size: clamp( 28px, 3.8vw, 46px );
	line-height: 1.18;
	margin: 0 0 14px;
	color: #374F3C;
}

.bp-history-strip__intro {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: clamp( 15px, 1.3vw, 17px );
	line-height: 1.6;
	color: var(--bp-hs-muted);
	max-inline-size: 640px;
	margin: 0 auto;
}

/* ---- Timeline ---- */
.bp-history-strip__timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	column-gap: 0;
	row-gap: 0;
	position: relative;
}

.bp-history-strip__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding-inline: clamp( 12px, 2vw, 24px );
	text-align: center;
}

/* the connecting olive line that runs across all 3 dots */
.bp-history-strip__timeline::before {
	content: '';
	position: absolute;
	inset-block-start: 32px;
	inset-inline-start: 12%;
	inset-inline-end: 12%;
	block-size: 1.5px;
	background: var(--bp-hs-olive);
	opacity: 0.55;
	z-index: 0;
}

.bp-history-strip__dot {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: 50%;
	background: var(--bp-hs-panel-bg);
	border: 1.5px solid var(--bp-hs-olive);
	color: var(--bp-hs-green);
	z-index: 1;
}

.bp-history-strip__dot-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bp-history-strip__dot-inner i,
.bp-history-strip__dot-inner svg {
	font-size: 22px;
	width: 22px;
	height: 22px;
	fill: currentColor;
	color: var(--bp-hs-green);
}

.bp-history-strip__item-body {
	max-inline-size: 280px;
}

.bp-history-strip__item-title {
	font-family: 'DM Serif Display', Georgia, serif;
	font-weight: 400;
	font-size: clamp( 20px, 1.8vw, 26px );
	line-height: 1.2;
	color: var(--bp-hs-green);
	margin: 0 0 8px;
}

.bp-history-strip__item-text {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: var(--bp-hs-muted);
	margin: 0;
}

/* ---- Closing line ---- */
.bp-history-strip__closing {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-block-start: clamp( 22px, 2.5vw, 32px );
	padding-block-start: clamp( 18px, 2vw, 24px );
	border-block-start: 1px solid var(--bp-hs-border);
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 14px;
	font-style: italic;
	color: var(--bp-hs-muted);
	text-align: center;
}

.bp-history-strip__closing-rule {
	display: block;
	inline-size: 48px;
	block-size: 2px;
	background: var(--bp-hs-olive);
	border-radius: 1px;
	opacity: 0.7;
}

/* ---- Botanical decoration (faded, neutral foliage) ---- */
.bp-history-strip__leaf {
	position: absolute;
	pointer-events: none;
	color: var(--bp-hs-olive);
	opacity: 0.18;
	z-index: 0;
}

.bp-history-strip__leaf--left {
	inset-block-end: -10px;
	inset-inline-start: -10px;
	inline-size: 110px;
	block-size: 200px;
}

.bp-history-strip__leaf--right {
	inset-block-end: -10px;
	inset-inline-end: -10px;
	inline-size: 110px;
	block-size: 200px;
}

/* keep panel content above decoration */
.bp-history-strip__header,
.bp-history-strip__timeline,
.bp-history-strip__closing {
	position: relative;
	z-index: 1;
}

/* ---- Responsive ---- */

@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-history-strip__panel {
		padding-inline: clamp( 24px, 4vw, 48px );
	}
	.bp-history-strip__dot {
		inline-size: 56px;
		block-size: 56px;
	}
	.bp-history-strip__dot-inner i,
	.bp-history-strip__dot-inner svg {
		font-size: 20px;
		width: 20px;
		height: 20px;
	}
	.bp-history-strip__leaf {
		opacity: 0.12;
	}
}

@media ( max-width: 768px ) {
	.bp-history-strip__panel {
		padding-block: 32px 28px;
		padding-inline: 24px;
	}
	.bp-history-strip__timeline {
		grid-template-columns: 1fr;
		row-gap: 20px;
	}
	.bp-history-strip__timeline::before {
		inset-block-start: 0;
		inset-block-end: 0;
		inset-inline-start: 32px;
		inset-inline-end: auto;
		inline-size: 1.5px;
		block-size: auto;
	}
	.bp-history-strip__item {
		flex-direction: row;
		align-items: flex-start;
		gap: 18px;
		text-align: start;
		padding-inline: 0;
	}
	.bp-history-strip__dot {
		inline-size: 56px;
		block-size: 56px;
		flex: 0 0 auto;
	}
	.bp-history-strip__item-body {
		max-inline-size: none;
		flex: 1 1 auto;
		padding-block-start: 14px;
	}
	.bp-history-strip__leaf {
		display: none;
	}
}

@media ( max-width: 480px ) {
	.bp-history-strip__panel {
		padding-inline: 18px;
	}
	.bp-history-strip__title {
		font-size: 24px;
	}
}

/* ---- RTL safety ---- */
[dir="rtl"] .bp-history-strip__leaf--left {
	inset-inline-start: auto;
	inset-inline-end: -10px;
}
[dir="rtl"] .bp-history-strip__leaf--right {
	inset-inline-end: auto;
	inset-inline-start: -10px;
}
[dir="rtl"] .bp-history-strip__leaf--right svg,
[dir="rtl"] .bp-history-strip__leaf--left svg {
	transform: scaleX( -1 );
}

/* ---- Reduced motion ---- */
@media ( prefers-reduced-motion: reduce ) {
	.bp-history-strip__leaf {
		transition: none !important;
		animation: none !important;
	}
}