/*
 * Workflow Steps Block — style.css
 * Front-end stylesheet. Loaded on every page that contains the block.
 * Supports: Default · Warning · Success · Info · Red variations
 *           Workflow mode · Timeline mode
 */

/* ── Design tokens ──────────────────────────────────────────────────────── */
.wsb-workflow-steps {
	/* Accent colours per variation — overridden below */
	--wsb-accent:        #4f8ef7;
	--wsb-accent-light:  rgba(79, 142, 247, 0.12);
	--wsb-accent-border: rgba(79, 142, 247, 0.30);
	--wsb-accent-text:   #4f8ef7;

	/* Structural */
	--wsb-dot-size:      32px;
	--wsb-line-width:    2px;
	--wsb-gap-x:         18px;   /* horizontal gap: dot → body */
	--wsb-gap-y:         10px;   /* vertical gap between steps */
	--wsb-radius:        8px;
	--wsb-font-mono:     'JetBrains Mono', 'Fira Mono', ui-monospace, monospace;

	/* Neutral palette */
	--wsb-text-primary:   #1a1f2e;
	--wsb-text-secondary: #4b5472;
	--wsb-text-muted:     #8892aa;
	--wsb-border-subtle:  rgba(0, 0, 0, 0.08);
	--wsb-bg-page:        transparent;
	--wsb-title-color:    #1a1f2e;

	font-family: inherit;
	box-sizing: border-box;
	margin-block: 2rem;
}

.wsb-workflow-steps *,
.wsb-workflow-steps *::before,
.wsb-workflow-steps *::after {
	box-sizing: inherit;
}

/* ── Variation colour overrides ─────────────────────────────────────────── */

/* Default: steel blue */
.wsb-variation--default {
	--wsb-accent:        #4f8ef7;
	--wsb-accent-light:  rgba(79, 142, 247, 0.10);
	--wsb-accent-border: rgba(79, 142, 247, 0.28);
	--wsb-accent-text:   #2563eb;
}

/* Success: emerald */
.wsb-variation--success {
	--wsb-accent:        #34d399;
	--wsb-accent-light:  rgba(52, 211, 153, 0.10);
	--wsb-accent-border: rgba(52, 211, 153, 0.30);
	--wsb-accent-text:   #059669;
}

/* Warning: amber */
.wsb-variation--warning {
	--wsb-accent:        #fbbf24;
	--wsb-accent-light:  rgba(251, 191, 36, 0.10);
	--wsb-accent-border: rgba(251, 191, 36, 0.35);
	--wsb-accent-text:   #b45309;
}

/* Info: teal / cyan */
.wsb-variation--info {
	--wsb-accent:        #22d3ee;
	--wsb-accent-light:  rgba(34, 211, 238, 0.10);
	--wsb-accent-border: rgba(34, 211, 238, 0.28);
	--wsb-accent-text:   #0e7490;
}

/* Red: coral red */
.wsb-variation--red {
	--wsb-accent:        #f87171;
	--wsb-accent-light:  rgba(248, 113, 113, 0.10);
	--wsb-accent-border: rgba(248, 113, 113, 0.28);
	--wsb-accent-text:   #b91c1c;
}

/* ── Block title ────────────────────────────────────────────────────────── */
.wsb-block-title {
	font-size: clamp(17px, 2.5vw, 20px);
	font-weight: 600;
	color: var(--wsb-title-color, #1a1f2e);
	margin-bottom: 1.5rem;
	letter-spacing: -0.01em;
}

/* ── Steps list container ───────────────────────────────────────────────── */
.wsb-steps-list {
	display: flex;
	flex-direction: column;
}

/* ── Individual step ────────────────────────────────────────────────────── */
.wsb-step {
	display: flex;
	gap: var(--wsb-gap-x);
	align-items: flex-start;
	position: relative;
}

/* ── Left column: dot + connector line ─────────────────────────────────── */
.wsb-step__left {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: var(--wsb-dot-size);
}

/* The numbered circle */
.wsb-step__dot {
	width:  var(--wsb-dot-size);
	height: var(--wsb-dot-size);
	border-radius: 50%;
	background: var(--wsb-accent-light);
	border: 1.5px solid var(--wsb-accent-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	transition: background 0.18s, border-color 0.18s;
}

.wsb-step:hover .wsb-step__dot {
	background: var(--wsb-accent-light);
	border-color: var(--wsb-accent);
}

.wsb-step__num {
	font-family: var(--wsb-font-mono);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	color: var(--wsb-accent-text);
	letter-spacing: 0;
}

/* Connector line between steps */
.wsb-step__line {
	width: var(--wsb-line-width);
	background: var(--wsb-border-subtle);
	flex: 1;
	min-height: 24px;
	margin: 4px 0;
	border-radius: 1px;
	position: relative;
	overflow: hidden;
}

/* Animated fill accent on the line */
.wsb-step__line::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--wsb-accent);
	opacity: 0.25;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.4s ease;
}

.wsb-step:hover .wsb-step__line::after {
	transform: scaleY(1);
}

/* ── Right column: step body ────────────────────────────────────────────── */
.wsb-step__body {
	flex: 1;
	padding-top: 4px;
	padding-bottom: calc( var(--wsb-gap-y) + 10px );
}

.wsb-step:last-child .wsb-step__body {
	padding-bottom: 0;
}

/* Step title */
.wsb-step__title {
	font-size: 16px;
	font-weight: 600;
	color: var(--wsb-text-primary);
	line-height: 1.35;
	margin-bottom: 4px;
}

/* Step description */
.wsb-step__desc {
	font-size: 14.5px;
	color: var(--wsb-text-secondary);
	line-height: 1.65;
	margin: 0;
}

.wsb-step__desc p:last-child {
	margin-bottom: 0;
}

/* ── Timeline mode ──────────────────────────────────────────────────────── */

/*
 * In timeline mode the step layout shifts so the dot sits between
 * a left-side date label and the right-side content.
 *
 * Narrow screens fall back to the same stacked layout as workflow mode,
 * with the date displayed above the title inside the body column.
 */

/* Wide: three-column layout  [date] [dot+line] [content] */
@media ( min-width: 640px ) {

	.wsb-mode--timeline .wsb-steps-list {
		position: relative;
	}

	.wsb-mode--timeline .wsb-step {
		display: grid;
		grid-template-columns: minmax(80px, 120px) var(--wsb-dot-size) 1fr;
		grid-template-areas: "date left body";
		gap: 0 var(--wsb-gap-x);
		align-items: start;
	}

	.wsb-mode--timeline .wsb-step__left {
		grid-area: left;
	}

	.wsb-mode--timeline .wsb-step__body {
		grid-area: body;
	}

	/* Date label sits in its own column, right-aligned to the dot */
	.wsb-mode--timeline .wsb-step__date {
		grid-area: date;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		padding-top: 6px;
		font-family: var(--wsb-font-mono);
		font-size: 11.5px;
		font-weight: 500;
		letter-spacing: 0.04em;
		color: var(--wsb-accent-text);
		white-space: nowrap;
		line-height: 1.2;
		/* Vertically align with the dot centre */
		padding-top: calc( (var(--wsb-dot-size) / 2) - 0.7em + 4px );
	}
}

/* Narrow: stacked, date above title */
@media ( max-width: 639px ) {
	.wsb-mode--timeline .wsb-step__date {
		display: block;
		font-family: var(--wsb-font-mono);
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.05em;
		color: var(--wsb-accent-text);
		margin-bottom: 4px;
		text-transform: uppercase;
	}
}

/* ── Workflow mode spacing (default) ────────────────────────────────────── */
.wsb-mode--workflow .wsb-step__date {
	display: none; /* dates hidden in workflow mode */
}

/* ── Responsive adjustments ─────────────────────────────────────────────── */
@media ( max-width: 480px ) {
	.wsb-workflow-steps {
		--wsb-dot-size: 26px;
		--wsb-gap-x:    14px;
	}

	.wsb-step__num {
		font-size: 10px;
	}

	.wsb-step__title {
		font-size: 15px;
	}

	.wsb-step__desc {
		font-size: 14px;
	}
}

/* ── Wide / full align support ──────────────────────────────────────────── */
.alignwide .wsb-workflow-steps,
.alignfull .wsb-workflow-steps {
	max-width: 100%;
}

/* ── Accessibility: reduced motion ──────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.wsb-step__line::after,
	.wsb-step__dot {
		transition: none;
	}
}