/* ------------------------------------------------------------------
   Post-migration fixes. Loaded last so these rules win.
   ------------------------------------------------------------------ */

/* The blog card's "Read article" arrow is inline SVG with no width/height,
   and podbulk.css sizes every other icon (.btn svg, .center-link a svg,
   .vid svg) but never this one — so it stretched to fill the whole card.
   Match the .center-link arrow. */
.post-card .more svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	transition: transform .15s ease;
}

.post-card:hover .more svg {
	transform: translateX(3px);
}

/* Hero images now exist again — keep them filling the 16/9 thumb box. */
.post-card .thumb {
	overflow: hidden;
}

.post-card .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Category moved into .pc-meta (see blog.php) — the pill only appears now as a
   fallback when a post has no hero image, where the thumb is an empty panel. */
.post-card .pc-meta {
	text-transform: uppercase;
	letter-spacing: .4px;
}

/* ---- Post tags ---- */
.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 34px 0 8px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.post-tags .tag {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .3px;
	color: var(--muted);
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 6px 13px;
}

/* ---- In-article callouts / takeaways used by the newer posts ---- */
.post-body .key-takeaways {
	background: var(--mint);
	border: 1px solid #d6efe0;
	border-left: 4px solid var(--green);
	border-radius: 12px;
	padding: 20px 22px;
	margin: 26px 0 30px;
}

.post-body .key-takeaways h2 {
	font-size: 15px !important;
	font-family: var(--mono);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--green-2);
	margin: 0 0 12px !important;
}

.post-body .key-takeaways ul {
	margin: 0 0 0 18px;
}

.post-body .key-takeaways li {
	margin-bottom: 7px;
	font-size: 15px;
}

.post-body .protip {
	background: #fffdf2;
	border: 1px solid #f0e4b8;
	border-left: 4px solid var(--yellow, #ffcc33);
	border-radius: 12px;
	padding: 16px 18px;
	margin: 22px 0;
	font-size: 15px;
}

.post-body .protip strong:first-child {
	color: #8a6d1a;
}

.post-body figure {
	margin: 28px 0;
}

.post-body figure img {
	width: 100%;
	height: auto;
	border-radius: 14px;
	border: 1px solid var(--line);
}

.post-body figcaption {
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--faint);
	text-align: center;
	margin-top: 10px;
}

.post-body blockquote {
	border-left: 4px solid var(--green);
	background: var(--soft);
	border-radius: 0 12px 12px 0;
	padding: 18px 22px;
	margin: 26px 0;
	font-size: 16.5px;
	color: var(--ink);
}

.post-body blockquote cite {
	display: block;
	margin-top: 10px;
	font-family: var(--mono);
	font-size: 12.5px;
	font-style: normal;
	color: var(--muted);
}