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

/* ── Blend Component Ratio Breakdown ─────────────────────────────────────── */

.blend-components {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.blend-component {
	background: var(--color-card, #1A2744);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	padding: 1rem 1.25rem;
}

.blend-component__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
	flex-wrap: wrap;
}

.blend-component__name {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-text, #F8FAFF);
	flex: 1;
}

.blend-component__amount {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.85rem;
	color: var(--color-accent, #00D4FF);
	font-weight: 600;
}

.blend-component__bar {
	height: 6px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 99px;
	overflow: hidden;
}

.blend-component__bar-fill {
	height: 100%;
	background: var(--color-accent, #00D4FF);
	border-radius: 99px;
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Alternate colours for multi-component blends */
.blend-component:nth-child(2) .blend-component__bar-fill { background: var(--color-secondary, #7C6AFF); }
.blend-component:nth-child(3) .blend-component__bar-fill { background: var(--color-success, #00C896); }
.blend-component:nth-child(4) .blend-component__bar-fill { background: var(--color-warning, #F5A623); }
.blend-component:nth-child(5) .blend-component__bar-fill { background: #E05CFF; }

/* ── Reconstitution Params Strip ─────────────────────────────────────────── */

.recon-params {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}

.recon-params__item {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	background: rgba(0, 212, 255, 0.06);
	border: 1px solid rgba(0, 212, 255, 0.15);
	border-radius: 8px;
	padding: 0.6rem 0.9rem;
	min-width: 110px;
}

.recon-params__label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted, #8B99C4);
}

.recon-params__value {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-accent, #00D4FF);
}

/* ── Reconstitution Steps ─────────────────────────────────────────────────── */

.recon-steps {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	counter-reset: recon-step;
}

.recon-steps__item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.recon-steps__num {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(0, 212, 255, 0.12);
	border: 1px solid rgba(0, 212, 255, 0.25);
	color: var(--color-accent, #00D4FF);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.8rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.05rem;
}

.recon-steps__text {
	margin: 0;
	font-size: 0.925rem;
	line-height: 1.65;
	color: var(--color-text, #F8FAFF);
	padding-top: 0.2rem;
}

/* ── Reconstitution Note ─────────────────────────────────────────────────── */

.recon-note {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	background: rgba(0, 200, 150, 0.07);
	border: 1px solid rgba(0, 200, 150, 0.2);
	border-radius: 8px;
	padding: 0.85rem 1rem;
	margin-top: 0.5rem;
}

.recon-note__icon {
	flex-shrink: 0;
	color: var(--color-success, #00C896);
	margin-top: 0.05rem;
}

.recon-note p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-text-muted, #8B99C4);
}

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

@media (max-width: 600px) {
	.recon-params {
		flex-direction: column;
		gap: 0.5rem;
	}

	.recon-params__item {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		min-width: unset;
	}

	.blend-component__header {
		gap: 0.5rem;
	}
}