/* Content card.

   Was written entirely inline from PHP -- no colour was reachable and site
   CSS could not override any of it. The rules now live here and read custom
   properties whose fallbacks are the old hardcoded values, so an untouched
   card is unchanged.

   The hover lift used to be emitted as a per-instance <style> block keyed on
   the node id, which meant one extra <style> element per card on the page.
   It is a class now.
*/
.anvil-card{
	display:block;
	background:var(--anvil-card-bg, var(--anvil-surface));
	color:var(--anvil-card-text, inherit);
	border:1px solid var(--anvil-card-border, rgba(0,0,0,.08));
	border-radius:var(--anvil-card-radius, 14px);
	overflow:hidden;
	text-decoration:none;
}
.anvil-card-lift{ transition:transform .2s ease, box-shadow .2s ease }
.anvil-card-lift:hover{
	transform:translateY(-4px);
	box-shadow:var(--anvil-card-shadow, 0 12px 30px rgba(0,0,0,.12));
}

.anvil-card-img{
	width:100%;
	height:var(--anvil-card-img-h, 200px);
	object-fit:var(--anvil-card-fit, cover);
	display:block;
}
.anvil-card-body{ padding:var(--anvil-card-pad, 22px 24px) }

.anvil-card-tags{ margin:0 0 10px; display:flex; gap:8px; flex-wrap:wrap }
.anvil-card-tag{
	font-size:11px; letter-spacing:.07em; text-transform:uppercase;
	padding:4px 10px; border-radius:999px; font-weight:600;
	background:var(--anvil-card-tag-bg, color-mix(in srgb, var(--anvil-primary) 12%, transparent));
	color:var(--anvil-card-tag-text, var(--anvil-primary));
}

.anvil-card-title{ margin:0 0 8px; font-size:var(--anvil-card-title-size, 20px) }
.anvil-card-text{ margin:0; opacity:.75; font-size:15px }

.anvil-card-more{ margin:16px 0 0 }
.anvil-card-more span{
	display:inline-flex; align-items:center; gap:7px;
	color:var(--anvil-card-link, var(--anvil-primary));
	font-weight:600; font-size:14.5px;
}

@supports not (background: color-mix(in srgb, red, blue)){
	.anvil-card-tag{ background:var(--anvil-card-tag-bg, rgba(0,0,0,.06)) }
}
@media (prefers-reduced-motion: reduce){
	.anvil-card-lift{ transition:none }
	.anvil-card-lift:hover{ transform:none }
}