/* BP About History Timeline widget styles
 *
 * "NOTRE HISTOIRE" section on the A propos page. Cream /
 * parchment background, centered editorial header (eyebrow
 * + gold diamond separator + serif title + intro), and a
 * 4-milestone horizontal timeline with cards alternating
 * above / below a thin gold rule. Each card is anchored to
 * a circular dark-green / gold node sitting on the rule via
 * a short vertical connector. Two optional faint archival
 * images can be placed in the corners as pure decoration
 * (pointer-events: none, very low opacity, partially
 * cropped). Tablet keeps the alternating layout; mobile
 * collapses to a vertical timeline with a left rail.
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #B8B25A  olive / gold
 *   #D8C47C  gold border
 *   #FBF6EC  cream
 *   #F4ECDD  cream soft
 *   #E4DCCB  cream border subtle
 *   #FFFFFF  white
 *   #1F2A1F  text dark
 *   #5C6A5C  text muted
 *
 * All rules are scoped under `.bp-about-history-timeline`
 * and use logical CSS properties (margin-inline,
 * padding-inline, inset-inline ...) so LTR and RTL share
 * the same ruleset.
 */

.bp-about-history-timeline {
	/* ---- Theme tokens (approved palette only) ---- */
	--bp-aht-bg:           #FBF6EC;
	--bp-aht-cream-soft:   #F4ECDD;
	--bp-aht-cream-card:   #F4ECDD;
	--bp-aht-green:        #374F37;
	--bp-aht-olive:        #B8B25A;
	--bp-aht-gold:         #D8C47C;
	--bp-aht-border:       #E4DCCB;
	--bp-aht-white:        #FFFFFF;
	--bp-aht-text:         #1F2A1F;
	--bp-aht-text-muted:   #5C6A5C;

	--bp-aht-inner-max:    1140px;

	--bp-aht-card-width:   340px;
	--bp-aht-node-size:    18px;
	--bp-aht-connector-h:  40px;

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

	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	margin: 0;
	padding: 0;
	color: var(--bp-aht-text);
	font-family: var(--bp-aht-font-body);
}

.bp-about-history-timeline *,
.bp-about-history-timeline *::before,
.bp-about-history-timeline *::after {
	box-sizing: border-box;
}

/* ============================================================
 * DECORATION (optional corner images)
 * Pure decoration. Real images only - the user picks them
 * from the Media Library via MEDIA controls. The section is
 * complete without them and never renders a placeholder.
 * ============================================================ */
.bp-about-history-timeline__decor {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	opacity: 0.08;
	inline-size: 320px;
	block-size: auto;
	object-fit: contain;
	filter: sepia(0.2);
}

.bp-about-history-timeline__decor--left {
	inset-block-start: 40px;
	inset-inline-start: -60px;
}

.bp-about-history-timeline__decor--right {
	inset-block-end: 40px;
	inset-inline-end: -60px;
}

/* ============================================================
 * INNER - centered, max-width
 * ============================================================ */
.bp-about-history-timeline__inner {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	max-inline-size: var(--bp-aht-inner-max);
	margin-inline: auto;
	padding: clamp(72px, 9vw, 120px) clamp(20px, 2.5vw, 32px) 0;
}

/* ============================================================
 * HEADER - centered editorial
 * ============================================================ */
.bp-about-history-timeline__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-inline-size: 860px;
	margin-inline: auto;
	margin-block-end: 18px;
	gap: 18px;
}

.bp-about-history-timeline__eyebrow {
	margin: 0;
	font-family: var(--bp-aht-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bp-aht-green);
}

.bp-about-history-timeline__title {
	margin: 0;
	font-family: var(--bp-aht-font-display);
	font-weight: 400;
	font-size: clamp(36px, 4.6vw, 60px);
	line-height: 1.06;
	letter-spacing: -0.005em;
	color: #374F3C;
	max-inline-size: 760px;
}

.bp-about-history-timeline__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-block: 4px;
}

.bp-about-history-timeline__divider-line {
	inline-size: 56px;
	block-size: 1px;
	background-color: var(--bp-aht-olive);
}

.bp-about-history-timeline__divider-diamond {
	inline-size: 8px;
	block-size: 8px;
	background-color: var(--bp-aht-olive);
	transform: rotate(45deg);
}

.bp-about-history-timeline__intro {
	margin: 0;
	font-family: var(--bp-aht-font-body);
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.6;
	color: var(--bp-aht-text-muted);
	max-inline-size: 760px;
}

/* ============================================================
 * TIMELINE TRACK
 *
 * 4-column grid spanning the full width of the inner
 * (up to ~1450px on large screens). The horizontal gold
 * rule is a single ::before painted across the entire
 * track at 50% so it crosses through the centre of every
 * node. Cards sit either above or below that single rule
 * in their own row - they never intersect the axis.
 * ============================================================ */
.bp-about-history-timeline__track {
	/* Break out of the narrower page container so the four
	 * columns have real breathing room. We use `margin-left:
	 * 50%` + the `translate` property (NOT `transform`) to
	 * center, because the reveal animation system controls
	 * `transform` and would otherwise drag the whole 1300px
	 * track off-screen. `position: relative` is still
	 * required for the ::before axis line and the
	 * absolutely-positioned node / connector children. */
	position: relative;
	left: auto;
	transform: none;
	margin-inline-start: 50%;
	margin-inline-end: 0;
	translate: -50% 0;
	inline-size: min(1300px, calc(100vw - 64px));
	max-inline-size: 1300px;

	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 28px;
	row-gap: 0;
	padding: 0;
	list-style: none;
}

/* ONE continuous thin muted-gold rule across the full
 * track, anchored at the vertical centre so it crosses
 * through the centre of every node. The line sits behind
 * the nodes (z-index 0). */
.bp-about-history-timeline__track::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 50%;
	block-size: 1px;
	background-color: var(--bp-aht-gold);
	transform: translateY(-0.5px);
	z-index: 0;
	pointer-events: none;
}

/* ============================================================
 * MILESTONE
 *
 * 3-row sub-grid that reserves THREE vertical zones:
 *   row 1: TOP CARD ZONE    (minmax 250 / 1fr)
 *   row 2: AXIS / NODE ZONE (56px fixed)
 *   row 3: BOTTOM CARD ZONE (minmax 250 / 1fr)
 * Top milestones (--above) place their card in row 1
 * (align-self: end) so the card sits just above the axis.
 * Bottom milestones (--below) place their card in row 3
 * (align-self: start) so the card sits just below the
 * axis. Because row 1 and row 3 are both `1fr` and share
 * the leftover space equally, the centre of row 2 is
 * ALWAYS at 50% of the milestone - so the node, the
 * track ::before rule, and the connector all line up.
 * ============================================================ */
.bp-about-history-timeline__milestone {
	position: relative;
	min-inline-size: 0;
	display: grid;
	grid-template-rows: minmax(250px, 1fr) 56px minmax(250px, 1fr);
	min-height: 560px;
	padding: 0;
}

/* ============================================================
 * CARD - cream soft background, hairline gold border, ~18px
 * radius, subtle shadow. width fills the grid column; max
 * capped at 340px so cards never exceed the reference.
 * Cards take their own intrinsic height from their
 * content - the grid row absorbs the rest.
 * ============================================================ */
.bp-about-history-timeline__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	inline-size: 100%;
	max-inline-size: 340px;
	box-sizing: border-box;
	margin-inline: auto;
	padding: 22px 22px 24px;
	background-color: var(--bp-aht-cream-card);
	border: 1px solid var(--bp-aht-gold);
	border-radius: 18px;
	box-shadow: 0 6px 18px rgba(31, 42, 31, 0.05);
}

/* TOP milestone -> card anchored to the bottom of row 1
 * (just above the axis). */
.bp-about-history-timeline__milestone--above .bp-about-history-timeline__card {
	grid-row: 1;
	align-self: end;
}

/* BOTTOM milestone -> card anchored to the top of row 3
 * (just below the axis). */
.bp-about-history-timeline__milestone--below .bp-about-history-timeline__card {
	grid-row: 3;
	align-self: start;
}

.bp-about-history-timeline__date {
	margin: 0;
	font-family: var(--bp-aht-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bp-aht-olive);
}

.bp-about-history-timeline__heading {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.bp-about-history-timeline__heading-diamond {
	flex: 0 0 auto;
	inline-size: 8px;
	block-size: 8px;
	margin-block-start: 10px;
	background-color: var(--bp-aht-olive);
	transform: rotate(45deg);
}

.bp-about-history-timeline__heading-title {
	margin: 0;
	font-family: var(--bp-aht-font-display);
	font-weight: 400;
	font-size: clamp(19px, 1.5vw, 22px);
	line-height: 1.18;
	color: var(--bp-aht-green);
}

.bp-about-history-timeline__body {
	margin: 0;
	font-family: var(--bp-aht-font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--bp-aht-text);
}

/* ============================================================
 * CONNECTOR - short vertical gold line that visually bridges
 * the card to the node, without ever touching the horizontal
 * rule. Above: from the bottom of row 1 down toward the
 * node. Below: from the node down to the top of row 3.
 * ============================================================ */
.bp-about-history-timeline__connector {
	position: absolute;
	inset-inline-start: 50%;
	inline-size: 1px;
	block-size: 14px;
	background-color: var(--bp-aht-gold);
	transform: translateX(-0.5px);
	z-index: 1;
}

/* Above: from card bottom (= top of row 2 = 50% - 28px)
 * down 14px toward the node centre. */
.bp-about-history-timeline__milestone--above .bp-about-history-timeline__connector {
	top: calc(50% - 28px);
}

/* Below: from the node centre (= 50%) down 14px toward
 * the top of row 3 (= 50% + 28px). */
.bp-about-history-timeline__milestone--below .bp-about-history-timeline__connector {
	top: 50%;
}

/* ============================================================
 * NODE - circular badge sitting exactly on the timeline
 * rule, in row 2 of the milestone (z-index 2, above the
 * rule). Same Y for every milestone because the rule is
 * at 50% of the milestone.
 * ============================================================ */
.bp-about-history-timeline__node {
	position: absolute;
	inset-inline-start: 50%;
	top: 50%;
	inline-size: 22px;
	block-size: 22px;
	margin: 0;
	background-color: var(--bp-aht-green);
	border: 2px solid var(--bp-aht-gold);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	box-shadow: 0 0 0 4px var(--bp-aht-bg);
}

/* ============================================================
 * TABLET + small desktop - per spec, switch to the vertical
 * layout below 1100px rather than producing cramped cards.
 * horizontal >= 1100px, vertical < 1100px.
 * ============================================================ */
@media (max-width: 1099px) {
	.bp-about-history-timeline__track {
		/* Cancel the desktop breakout so the track flows
		 * naturally inside the inner in vertical mode. */
		position: static;
		left: auto;
		transform: none;
		margin-inline-start: 0;
		margin-inline-end: 0;
		translate: none;
		inline-size: 100%;
		max-inline-size: none;

		display: block;
		padding-inline-start: 44px;
	}

	/* Vertical gold rail on the inline-start. */
	.bp-about-history-timeline__track::before {
		inset-inline: auto;
		inset-inline-start: 14px;
		top: 0;
		bottom: 0;
		inline-size: 1px;
		block-size: auto;
		transform: none;
	}

	.bp-about-history-timeline__milestone,
	.bp-about-history-timeline__milestone--above,
	.bp-about-history-timeline__milestone--below {
		display: block;
		min-height: 0;
		grid-template-rows: none;
		padding: 0;
		margin-block-end: 28px;
		position: relative;
	}

	.bp-about-history-timeline__milestone:last-child {
		margin-block-end: 0;
	}

	.bp-about-history-timeline__milestone--above .bp-about-history-timeline__card,
	.bp-about-history-timeline__milestone--below .bp-about-history-timeline__card {
		grid-row: auto;
		align-self: auto;
	}

	.bp-about-history-timeline__connector {
		display: none;
	}

	.bp-about-history-timeline__node {
		inset-inline-start: 14px;
		top: 22px;
		transform: translate(-50%, 0);
	}

	.bp-about-history-timeline__card {
		max-inline-size: none;
	}

	.bp-about-history-timeline__decor {
		display: none;
	}
}

/* ============================================================
 * MOBILE - tighten the vertical timeline spacing.
 * ============================================================ */
@media (max-width: 768px) {
	.bp-about-history-timeline__inner {
		padding: clamp(56px, 9vw, 80px) 20px clamp(56px, 9vw, 80px);
	}

	.bp-about-history-timeline__milestone {
		margin-block-end: 22px;
	}
}

/* ============================================================
 * PRINT
 * ============================================================ */
@media print {
	.bp-about-history-timeline {
		background: #fff !important;
	}
	.bp-about-history-timeline__decor,
	.bp-about-history-timeline__track::before {
		display: none !important;
	}
}