/* ------------------------------------------------------------------ *
 * Card meta strip — labelled pills under each title showing the most useful
 * taxonomy values at a glance. Each pill links to the corresponding term
 * archive so users can pivot to "more like this". Used by Query Loop cards
 * (post-grid.css) and by the single-post title block (functions.php →
 * mcs_inject_single_meta_pills).
 * ------------------------------------------------------------------ */
.mcs-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding: 0 1.25rem 1.25rem;
	margin-top: -0.5rem;
}

/* Single-post variant: rendered inside the Kadence meta flex container
   (via kadence_after_entry_meta). flex-basis:100% forces a new row below
   the author/date items so pills don't sit inline with them. */
.mcs-card-meta--single {
	flex-basis: 100%;
	width: 100%;
	padding: 0;
	margin: 0.75rem 0 0;
	gap: 0.5rem;
	justify-content: center;
}

/* The entry-meta-divider-dot inserts a 4px-wide block separator via
   ::after on each meta item (Kadence's dot-divider style). Our pills div
   is the last child, so the LAST meta span (second-to-last child overall)
   was leaving its separator dangling at the end of the meta line —
   visible as "· May 15, 2026 ·" with a stray bullet after the date. Hide
   the trailing separator when our pills follow. */
.entry-meta.entry-meta-divider-dot > *:nth-last-child(2)::after {
	display: none !important;
	content: none !important;
}
.entry-meta.entry-meta-divider-dot .mcs-card-meta--single::before {
	display: none !important;
	content: none !important;
}

/* Kadence's "date" (published) meta element appends a second, label-less
   <time class="updated"> after the published date whenever the post has been
   modified (template-parts/title/meta.php, the get_the_time !== modified
   branch) — an hAtom microformat artifact. With our dedicated "Updated" span
   (the dateUpdated element) the modified date would otherwise print twice, and
   the "Published" segment would read as two run-together dates. Hide the
   trailing one inside .posted-on; the standalone .updated-on time is untouched. */
.entry-meta .posted-on time.updated {
	display: none;
}

.mcs-card-meta--single .mcs-card-meta__pill {
	padding: 0.4rem 0.85rem;
	font-size: 0.8rem;
}

.mcs-card-meta--single .mcs-card-meta__label {
	font-size: 0.7rem;
}

.mcs-card-meta--single .mcs-card-meta__value {
	font-size: 0.85rem;
}

.mcs-card-meta__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--global-palette1) 18%, #fff);
	font-size: 0.72rem;
	line-height: 1.3;
	text-decoration: none;
	color: var(--global-palette4);
	transition: background 0.15s ease, color 0.15s ease;
}

.mcs-card-meta__pill:hover {
	background: var(--global-palette5);
	color: #fff;
}

.mcs-card-meta__label {
	font-weight: 500;
	color: var(--global-palette6);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.65rem;
}

.mcs-card-meta__pill:hover .mcs-card-meta__label {
	color: rgba(255, 255, 255, 0.75);
}

.mcs-card-meta__value {
	font-weight: 600;
	color: var(--global-palette3);
}

.mcs-card-meta__pill:hover .mcs-card-meta__value {
	color: #fff;
}

/* Narrow cards (2-col phone grid is ~138px wide) — stack label above value
   so longer values like "Intermediate" don't overflow. */
@media (max-width: 600px) {
	.mcs-card-meta {
		padding: 0 0.75rem 1rem;
		gap: 0.3rem;
	}
	.mcs-card-meta__pill {
		flex-direction: column;
		align-items: flex-start;
		padding: 0.25rem 0.55rem;
		gap: 0;
		line-height: 1.15;
	}
	.mcs-card-meta__label {
		font-size: 0.58rem;
	}
	.mcs-card-meta__value {
		font-size: 0.75rem;
	}
}