/*
 * Follow the lot, Concept 1 "Lot journey" (V2 homepage preview, ?ftl=journey or ?sections=b).
 * Made by Claude Code, directed by Nova (CTO), 2026-11-03.
 * Scoped to .bpa-journey. Uses --rec-* tokens from record-home.css; fonts come from the theme's
 * existing bpa-fonts / bpa-record-fonts requests.
 */

/* ---------- Local reset against theme globals ---------- */
.bpa-journey,
.bpa-journey *,
.bpa-journey *::before,
.bpa-journey *::after { box-sizing: border-box; }
.bpa-journey p,
.bpa-journey h2,
.bpa-journey h3 { margin: 0; }
.bpa-journey ol,
.bpa-journey li { margin: 0; padding: 0; list-style: none; }
.bpa-journey img { display: block; max-width: 100%; height: auto; }

/* ---------- Section ---------- */
.bpa-journey {
	--bpa-journey-gutter: clamp(1.25rem, 4vw, 3rem);
	--bpa-journey-collection: var(--rec-collection, "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif);
	padding: var(--rec-space) var(--bpa-journey-gutter);
	background: var(--rec-paper);
	color: var(--rec-ink);
	font: 400 1rem/1.6 var(--rec-ui);
	overflow-x: clip;
}
.bpa-journey__inner { max-width: 1320px; margin-inline: auto; }

.bpa-journey__head { display: grid; gap: 1.5rem 4rem; grid-template-columns: minmax(0, 1fr); align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); }
@media (min-width: 900px) { .bpa-journey__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

.bpa-journey .bpa-journey__kicker { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; font: 400 .75rem/1 var(--rec-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--rec-act); }
.bpa-journey__kicker::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; }
.bpa-journey .bpa-journey__title { margin: 0; font: 500 clamp(2.75rem, 7vw, 5.5rem)/.95 var(--rec-display); letter-spacing: -.03em; color: var(--rec-ink); text-wrap: balance; }
.bpa-journey__title em { font-style: italic; color: var(--rec-act); }
.bpa-journey__lede { margin: 0; max-width: 44ch; font-size: 1.0625rem; line-height: 1.65; color: var(--rec-ink-2); }
.bpa-journey__lede strong { font-weight: 600; color: var(--rec-ink); }

/* The lot being followed: one line */
.bpa-journey .bpa-journey__lot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .75rem; margin: 0 0 2.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rec-rule); font: 400 .75rem/1.4 var(--rec-caps); letter-spacing: .16em; text-transform: uppercase; color: var(--rec-ink-2); }
.bpa-journey__lot-name { font: 500 clamp(1.125rem, 2vw, 1.375rem)/1.1 var(--bpa-journey-collection); letter-spacing: 0; text-transform: none; color: var(--rec-ink); }
.bpa-journey__lot-sep { color: var(--rec-pending); }
.bpa-journey__lot-value { font: 500 .875rem/1 var(--rec-data); letter-spacing: .02em; text-transform: none; color: var(--rec-pending); padding-bottom: 2px; border-bottom: 1px dashed currentColor; }

/* ---------- The track: Batch -> four stages -> Your bench ---------- */
.bpa-journey__track { --node: 3rem; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }

/* the rail the lot travels along: static, always drawn */
.bpa-journey__track::before {
	content: ""; position: absolute; z-index: 0;
	left: calc(var(--node) / 2 - 1px); top: calc(var(--node) / 2); bottom: calc(var(--node) / 2); width: 2px;
	background: var(--rec-act);
}

.bpa-journey__marker { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; }
.bpa-journey__dot { flex: none; width: var(--node); height: var(--node); border-radius: 50%; overflow: hidden; background: var(--rec-slip); box-shadow: 0 0 0 5px var(--rec-paper); }
.bpa-journey__marker--start .bpa-journey__dot { border: 2px solid var(--rec-act); }
.bpa-journey .bpa-journey__marker--start img { width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.55); }
.bpa-journey__marker--end .bpa-journey__dot { border: 4px double var(--rec-act); display: grid; place-items: center; }
.bpa-journey__marker--end .bpa-journey__dot::after { content: ""; width: 28%; height: 28%; border-radius: 50%; border: 1px solid var(--rec-act); }
.bpa-journey__marker-label { font: 400 .75rem/1.2 var(--rec-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--rec-act); }

.bpa-journey .bpa-journey__route { margin: 1.75rem 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

.bpa-journey__stage { position: relative; z-index: 1; display: grid; grid-template-columns: var(--node) minmax(0, 1fr); gap: 0 1.25rem; align-items: start; }

.bpa-journey__node {
	width: var(--node); height: var(--node); border-radius: 50%;
	display: grid; place-items: center;
	background: var(--rec-paper); border: 1px solid var(--rec-ink-2); box-shadow: 0 0 0 5px var(--rec-paper);
	font: italic 500 1.125rem/1 var(--rec-display); color: var(--rec-ink);
}

/* the paper slip under each stop */
.bpa-journey__card { position: relative; min-width: 0; display: grid; align-content: start; padding: 1.1rem 1.25rem 1.25rem; background: var(--rec-slip); border: 1px solid var(--rec-rule); }
.bpa-journey__card::before { content: ""; position: absolute; top: calc(var(--node) / 2); left: -1.25rem; width: 1.25rem; height: 1px; background: var(--rec-engrave); }

.bpa-journey__where { display: block; margin-bottom: .55rem; font: 400 .6875rem/1.2 var(--rec-caps); letter-spacing: .16em; text-transform: uppercase; color: var(--rec-ink-2); }
.bpa-journey .bpa-journey__name { margin: 0 0 .6rem; font: 500 clamp(1.5rem, 2.2vw, 1.875rem)/1.05 var(--rec-display); letter-spacing: -.015em; color: var(--rec-ink); }
.bpa-journey .bpa-journey__text { margin: 0 0 1.1rem; max-width: 30ch; font-size: .9688rem; line-height: 1.6; color: var(--rec-ink-2); }

.bpa-journey__chip {
	justify-self: start; align-self: end; display: inline-flex; align-items: center; gap: .5rem;
	padding: .38rem .7rem .38rem .6rem; border: 1px dashed var(--rec-pending); border-radius: 999px;
	font: 500 .75rem/1 var(--rec-data); letter-spacing: .04em; color: var(--rec-pending); background: var(--rec-paper);
}
.bpa-journey__chip::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; border: 1px solid currentColor; }

@media (min-width: 1080px) {
	.bpa-journey__track { --node: 4.25rem; --marker: 5.5rem; grid-template-columns: var(--marker) minmax(0, 1fr) var(--marker); column-gap: clamp(.75rem, 1.5vw, 1.5rem); align-items: start; }
	.bpa-journey__track::before { left: calc(var(--marker) / 2); right: calc(var(--marker) / 2); top: calc(var(--node) / 2 - 1px); bottom: auto; width: auto; height: 2px; }
	.bpa-journey__marker { flex-direction: column; gap: .9rem; text-align: center; }
	.bpa-journey .bpa-journey__route { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr auto; gap: 0 clamp(1rem, 1.6vw, 1.5rem); }
	/* every stop shares the same rows, so nodes, labels, titles and chips line up */
	.bpa-journey__stage { grid-row: span 5; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); gap: 0; }
	.bpa-journey__node { justify-self: center; margin-bottom: 1.5rem; font-size: 1.375rem; }
	.bpa-journey__card { grid-row: 2 / span 4; grid-template-rows: subgrid; align-content: stretch; }
	.bpa-journey__card::before { top: -1.5rem; left: 50%; width: 1px; height: 1.5rem; }
	.bpa-journey .bpa-journey__text { max-width: 26ch; }
}

/* ---------- Plate: the lot in hand ---------- */
.bpa-journey__plate { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; margin-top: clamp(3.5rem, 7vw, 6rem); padding: clamp(1.5rem, 4vw, 3rem); background: var(--rec-field); color: var(--rec-slip); }
@media (min-width: 760px) { .bpa-journey__plate { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1.5rem 2.5rem; } .bpa-journey__actions { grid-column: 2; } }
@media (min-width: 1100px) { .bpa-journey__plate { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; } .bpa-journey__actions { grid-column: auto; } }
.bpa-journey .bpa-journey__plate-img { width: 100%; max-width: 11rem; aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(201, 189, 168, .45); }
.bpa-journey .bpa-journey__eyebrow { margin: 0 0 .6rem; font: 400 .75rem/1 var(--rec-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--rec-engrave); }
.bpa-journey .bpa-journey__line { margin: 0; max-width: 40ch; font: italic 400 clamp(1.375rem, 2.6vw, 1.875rem)/1.25 var(--rec-display); color: var(--rec-slip); }
.bpa-journey__actions { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

.bpa-journey .bpa-journey__link {
	display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .7rem 1.25rem;
	border: 1px solid var(--rec-engrave); color: var(--rec-slip); text-decoration: none;
	font: 500 .9375rem/1.2 var(--rec-ui); transition: background-color .3s var(--rec-ease), color .3s var(--rec-ease);
}
.bpa-journey .bpa-journey__link:hover { background: var(--rec-slip); color: var(--rec-field); }
.bpa-journey__link span[aria-hidden] { transition: transform .3s var(--rec-ease); }
.bpa-journey__link:hover span[aria-hidden] { transform: translateX(3px); }

.bpa-journey a:focus-visible { outline: 2px solid var(--rec-act); outline-offset: 3px; }
.bpa-journey .bpa-journey__plate a:focus-visible { outline: 2px solid var(--rec-slip); outline-offset: 3px; }

.bpa-journey__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin-top: 1.75rem; font: 400 .8125rem/1.5 var(--rec-data); color: var(--rec-ink-2); }

/* reduced motion: nothing runs */
@media (prefers-reduced-motion: reduce) {
	.bpa-journey,
	.bpa-journey *,
	.bpa-journey *::before,
	.bpa-journey *::after { animation: none !important; transition: none !important; }
}

/* forced colors: keep the rail and connector ticks drawn in a system colour */
@media (forced-colors: active) {
	.bpa-journey .bpa-journey__track::before,
	.bpa-journey .bpa-journey__card::before { forced-color-adjust: none; background: CanvasText; }
}