/**
 * One Progress widget styles.
 *
 * Horizontal process timeline: a bronze dot sitting on a thin connecting
 * rule, a zero-padded step number, a serif title, and a short description.
 * Tuned for dark editorial sections (obsidian + bronze); collapses to a
 * vertical timeline on mobile.
 */

.one-progress {
	--one-progress-gap: 32px;
	--one-progress-dot-size: 10px;
	--one-progress-line: 1px;
	width: 100%;
}

.one-progress__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
}

.one-progress__step {
	flex: 1 1 0;
	min-width: 0;
	padding-right: var(--one-progress-gap);
}

/* ==================== Marker: dot + connecting line ==================== */

.one-progress__marker {
	position: relative;
	height: var(--one-progress-dot-size);
	margin-bottom: 20px;
}

/* Continuous rule: each step draws a full-width segment so they join edge
   to edge into one unbroken line across the whole track. */
.one-progress__marker::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: var(--one-progress-line);
	background-color: rgba(255, 255, 255, 0.16);
	transform: translateY(-50%);
}

.one-progress__dot {
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--one-progress-dot-size);
	height: var(--one-progress-dot-size);
	border-radius: 50%;
	background-color: var(--one-bronze, #B08D57);
	transform: translateY(-50%);
	z-index: 1;
}

/* ==================== Number ==================== */

.one-progress__number {
	display: block;
	font-family: var(--one-font-nav, 'JetBrains Mono', 'Menlo', 'Consolas', ui-monospace, monospace);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.18em;
	color: var(--one-obsidian-3, #8A8A90);
	margin-bottom: 14px;
}

/* ==================== Title ==================== */

.one-progress__title {
	margin: 0 0 10px;
	padding: 0;
	font-family: var(--one-font-heading, 'Playfair Display', Georgia, 'Times New Roman', serif);
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--one-white, #F7F5F2);
}

/* ==================== Description ==================== */

.one-progress__desc {
	margin: 0;
	font-family: var(--one-font-body, 'Open Sans', sans-serif);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--one-obsidian-3, #9A9AA0);
}

/* ==================== Tablet ==================== */

@media (max-width: 1024px) {
	.one-progress__track {
		flex-wrap: wrap;
	}

	.one-progress__step {
		flex-basis: 33.333%;
		margin-bottom: 40px;
	}

	/* Trim the trailing rule on the last item of each wrapped row is hard to
	   detect in pure CSS; keep the rule continuous within each row. */
}

/* ==================== Mobile: vertical timeline ==================== */

@media (max-width: 767px) {
	.one-progress__track {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.one-progress__step {
		flex-basis: auto;
		padding-right: 0;
		padding-left: calc(var(--one-progress-dot-size) + 20px);
		padding-bottom: 28px;
		margin-bottom: 0;
	}

	/* Vertical rail: dot at top-left, line running down to the next step. */
	.one-progress__marker {
		position: absolute;
		left: 0;
		top: 4px;
		height: 100%;
		width: var(--one-progress-dot-size);
		margin: 0;
	}

	.one-progress__marker::before {
		top: 0;
		bottom: 0;
		left: 50%;
		right: auto;
		width: var(--one-progress-line);
		height: auto;
		transform: translateX(-50%);
	}

	.one-progress__dot {
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.one-progress__step {
		position: relative;
	}

	.one-progress__step:last-child {
		padding-bottom: 0;
	}

	.one-progress__step:last-child .one-progress__marker::before {
		display: none;
	}
}