/* TSW Premium × Mini Blog plugin — integration skin.
 *
 * Re-maps the plugin's block palette (its --mb-* custom properties, plus a few
 * hardcoded colors) onto the TSW Premium design tokens so Mini Lessons feel
 * native: light surfaces, teal accent, theme fonts, theme shadows. Code and
 * "Explore Deeper" zones stay dark on purpose — consistent with the theme's
 * dark Prism code blocks. Everything is scoped to .mini-blog-* so it can't
 * leak into the rest of the theme. Loads only when the plugin is active. */

/* ─── Lesson card ────────────────────────────────────────────────────────── */
.mini-blog-card {
	--mb-accent: var(--wp--preset--color--accent);
	--mb-bg: var(--wp--preset--color--base);
	--mb-panel: transparent;
	--mb-panel-solid: var(--wp--preset--color--base-2);
	--mb-border: var(--wp--preset--color--border);
	--mb-text: var(--wp--preset--color--contrast);
	--mb-muted: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans, inherit);
	border-radius: 1rem;
	box-shadow: var(--tsw-shadow-md);
}

/* Hero banner keeps its dark cover treatment (white text sits on it) — that's
   intentional; we only align the accent + badge to the theme. */
.mini-blog-badge {
	background: var(--mb-accent);
	color: #fff;
}

/* Takeaway lives on a now-light panel, so its text must be dark. */
.mini-blog-takeaway {
	color: var(--wp--preset--color--contrast-2) !important;
}

/* Code + result stay dark (matches the theme's dark Prism code); force light
   text so it's legible on the dark surface after the palette flip. */
.mini-blog-code,
.mini-blog-code code,
.mini-blog-result {
	color: #e7eaf3;
}
.mini-blog-copy {
	color: #e7eaf3;
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.22);
}
.mini-blog-copy:hover {
	background: rgba(255, 255, 255, 0.24);
}

/* Actions / feedback on the light footer */
.mini-blog-action:hover {
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
}
.mini-blog-vote {
	background: var(--wp--preset--color--base-2);
	border-color: var(--mb-border);
	color: var(--wp--preset--color--contrast);
}
.mini-blog-vote:hover:not([disabled]) {
	background: var(--wp--preset--color--border);
}

/* Drawer toggle uses the theme accent (inherited from --mb-accent). */

/* ─── "Explore Deeper" / deeper-dive: keep dark, theme the accent ─────────── */
.mini-blog-deeper-dive {
	--mb-accent: var(--wp--preset--color--accent);
	border-radius: 0.9rem;
}

/* ─── Library grid block ─────────────────────────────────────────────────── */
.mini-blog-library {
	--mb-accent: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans, inherit);
}
.mini-blog-library-heading {
	color: var(--wp--preset--color--contrast);
}
.mini-blog-library-search,
.mini-blog-library-filter {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	border-radius: 0.6rem;
}
.mini-blog-library-search::placeholder {
	color: var(--wp--preset--color--muted);
}
.mini-blog-library-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
	.mini-blog-library-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
.mini-blog-library-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.9rem;
	box-shadow: var(--tsw-shadow-sm);
	transition: transform var(--tsw-transition), box-shadow var(--tsw-transition), border-color var(--tsw-transition);
}
.mini-blog-library-card:hover {
	border-color: var(--wp--preset--color--contrast);
	box-shadow: var(--tsw-shadow-md);
	transform: translateY(-3px);
}
.mini-blog-library-card-thumb {
	background-color: var(--wp--preset--color--base-2);
}
.mini-blog-library-card-badge {
	background: var(--mb-accent);
	color: #fff;
}
.mini-blog-library-card-title {
	color: var(--wp--preset--color--contrast);
}
.mini-blog-library-card-meta {
	color: var(--wp--preset--color--muted);
}
.mini-blog-library-empty,
.mini-blog-library-status {
	color: var(--wp--preset--color--muted);
}
.mini-blog-library-more {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 0.6rem;
	transition: background var(--tsw-transition);
}
.mini-blog-library-more:hover {
	background: var(--wp--preset--color--accent);
}
.mini-blog-library-more:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ─── Auto-appended related lessons (single lesson pages) ─────────────────── */
.mini-blog-related-card {
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 0.75rem !important;
	background: var(--wp--preset--color--base);
	box-shadow: var(--tsw-shadow-sm);
	transition: transform var(--tsw-transition), box-shadow var(--tsw-transition), border-color var(--tsw-transition);
}
.mini-blog-related-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--tsw-shadow-md);
	border-color: var(--wp--preset--color--contrast) !important;
}
.mini-blog-related-name {
	color: var(--wp--preset--color--contrast);
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.mini-blog-library-card,
	.mini-blog-related-card {
		transition: none !important;
	}
}