/**
 * File Path: assets/css/front/mbs-front-timeline.css
 *
 * MBS Publication Timeline -- DISPLAY-1
 * Vertical timeline styles for [mbs_timeline] shortcode.
 *
 * @package MyBookShowroom
 */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.mbs-timeline-wrap {
	margin: 1.5rem 0;
}

/* ── Ordered list reset ───────────────────────────────────────────────────── */
.mbs-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/* ── Left border rail ─────────────────────────────────────────────────────── */
.mbs-timeline::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	width: 3px;
	background: var(--mbs-accent, #3B82F6);
	border-radius: 2px;
}

/* ── Each entry ──────────────────────────────────────────────────────────── */
.mbs-timeline-entry {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 0.75rem 0 0.75rem 2rem;
	position: relative;
}

/* ── Entry dot (::before on the <li> via the .mbs-timeline-dot span) ─────── */
.mbs-timeline-dot {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--mbs-accent, #3B82F6);
	border: 2px solid var(--mbs-surface, #fff);
	box-shadow: 0 0 0 2px var(--mbs-accent, #3B82F6);
	position: absolute;
	left: 4px;
	top: 1rem;
	flex-shrink: 0;
}

/* ARC entries get a purple dot */
.mbs-timeline-arc .mbs-timeline-dot {
	background: var(--mbs-arc-timeline-dot, #8B5CF6);
	box-shadow: 0 0 0 2px var(--mbs-arc-timeline-dot, #8B5CF6);
}

/* ── Content area ─────────────────────────────────────────────────────────── */
.mbs-timeline-content {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.mbs-timeline-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--mbs-text, inherit);
}

.mbs-timeline-date {
	font-size: 0.85rem;
	color: var(--mbs-text-muted, #6B7280);
}

/* ── Responsive: single-column below 480 px ──────────────────────────────── */
@media (max-width: 480px) {
	.mbs-timeline-entry {
		padding-left: 1.75rem;
	}

	.mbs-timeline::before {
		left: 6px;
	}

	.mbs-timeline-dot {
		left: 0;
		width: 12px;
		height: 12px;
	}
}