/**
 * Blog Post Styles — Flavor Speed
 *
 * Styles for metric cards, callout/tip boxes, numbered problem cards,
 * and the category badge on single blog posts.
 */

/* ── Category badge ── */
.blog-category-badge a {
	text-decoration: none;
}

/* ── Metric cards (CWV section) ── */
.blog-metric-card {
	border-radius: 12px;
	overflow: hidden;
}

.blog-metric-card-green {
	border-top: 4px solid var(--wp--preset--color--accent-3);
}

.blog-metric-card-blue {
	border-top: 4px solid var(--wp--preset--color--accent-1);
}

.blog-metric-card-purple {
	border-top: 4px solid #7C3AED;
}

/* ── Tip / callout boxes ── */
.blog-tip-box {
	border-left: 4px solid var(--wp--preset--color--accent-1);
	border-radius: 0 12px 12px 0;
}

.blog-tip-box-green {
	border-left-color: var(--wp--preset--color--accent-3);
}

.blog-tip-box-purple {
	border-left-color: #7C3AED;
}

/* ── Numbered problem cards ── */
.blog-problem-card {
	border-radius: 12px;
}

/* ── Section separator ── */
.blog-section-separator {
	border-color: var(--wp--preset--color--accent-6) !important;
	opacity: 1;
}

/* ── Mobile: stack metric cards ── */
@media (max-width: 781px) {
	.blog-metric-cards .wp-block-column {
		flex-basis: 100% !important;
	}
}