/**
 * Stack Pages — peptide-directory
 * Loaded on: is_singular('peptide_stack'), is_post_type_archive('peptide_stack')
 * Depends on: peptide.css
 */

/* ── Hero — Goal + Difficulty Badges ─────────────────────────────────────── */

.stack-hero-badges {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}

/* Goal badge */
.badge--goal {
	background: rgba(0, 212, 255, 0.12);
	border: 1px solid rgba(0, 212, 255, 0.3);
	color: var(--color-accent, #00D4FF);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 0.3rem 0.65rem;
	border-radius: 6px;
}

/* Difficulty badge — base */
.badge--difficulty {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 0.3rem 0.65rem;
	border-radius: 6px;
}

.badge--difficulty-beginner {
	background: rgba(0, 200, 150, 0.12);
	border: 1px solid rgba(0, 200, 150, 0.3);
	color: var(--color-success, #00C896);
}

.badge--difficulty-intermediate {
	background: rgba(245, 166, 35, 0.12);
	border: 1px solid rgba(245, 166, 35, 0.3);
	color: var(--color-warning, #F5A623);
}

.badge--difficulty-advanced {
	background: rgba(255, 77, 106, 0.12);
	border: 1px solid rgba(255, 77, 106, 0.3);
	color: var(--color-error, #FF4D6A);
}

/* ── Protocol Timeline ───────────────────────────────────────────────────── */

.stack-timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
}

/* Vertical connecting line */
.stack-timeline::before {
	content: '';
	position: absolute;
	left: 0.9375rem; /* centre of the 30px marker */
	top: 1.5rem;
	bottom: 1.5rem;
	width: 2px;
	background: linear-gradient(
		to bottom,
		rgba(0, 212, 255, 0.4),
		rgba(124, 106, 255, 0.15)
	);
	border-radius: 2px;
}

.stack-timeline__item {
	display: flex;
	gap: 1.25rem;
	padding: 1.25rem 0;
	position: relative;
}

.stack-timeline__marker {
	flex-shrink: 0;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: 50%;
	background: var(--color-card, #1A2744);
	border: 2px solid var(--color-accent, #00D4FF);
	position: relative;
	z-index: 1;
	margin-top: 0.15rem;
	box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.08);
}

/* Dim markers after the first to show progression */
.stack-timeline__item:nth-child(2) .stack-timeline__marker { border-color: var(--color-secondary, #7C6AFF); box-shadow: 0 0 0 4px rgba(124, 106, 255, 0.08); }
.stack-timeline__item:nth-child(3) .stack-timeline__marker { border-color: var(--color-success, #00C896); box-shadow: 0 0 0 4px rgba(0, 200, 150, 0.08); }
.stack-timeline__item:nth-child(4) .stack-timeline__marker { border-color: var(--color-warning, #F5A623); box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.08); }

.stack-timeline__content {
	flex: 1;
	min-width: 0;
	padding-bottom: 0.5rem;
}

.stack-timeline__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.stack-timeline__label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-accent, #00D4FF);
	background: rgba(0, 212, 255, 0.1);
	border: 1px solid rgba(0, 212, 255, 0.2);
	border-radius: 6px;
	padding: 0.2rem 0.55rem;
	white-space: nowrap;
}

.stack-timeline__item:nth-child(2) .stack-timeline__label { color: var(--color-secondary, #7C6AFF); background: rgba(124, 106, 255, 0.1); border-color: rgba(124, 106, 255, 0.2); }
.stack-timeline__item:nth-child(3) .stack-timeline__label { color: var(--color-success, #00C896); background: rgba(0, 200, 150, 0.1); border-color: rgba(0, 200, 150, 0.2); }
.stack-timeline__item:nth-child(4) .stack-timeline__label { color: var(--color-warning, #F5A623); background: rgba(245, 166, 35, 0.1); border-color: rgba(245, 166, 35, 0.2); }

.stack-timeline__focus {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-text, #F8FAFF);
}

.stack-timeline__notes {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--color-text-muted, #8B99C4);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.stack-timeline::before {
		left: 0.6875rem;
	}

	.stack-timeline__marker {
		width: 1.375rem;
		height: 1.375rem;
	}

	.stack-timeline__item {
		gap: 0.85rem;
	}

	.stack-timeline__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}
}