/* Icon cards.

   Every colour and shape reads a custom property with the old hardcoded
   value as its fallback, so an untouched card renders exactly as before
   while card_bg / border_color / icon_bg / text_color can override it.

   The grid itself is NOT declared here: widgets.css owns
   .anvil-iconcards so there is only one place setting the columns. This
   file previously repeated `display:grid;gap:22px`, which raced widgets.css
   at equal specificity and made the gap depend on stylesheet order. */

.anvil-iconcards{ --anvil-gap: 22px }

.anvil-iconcard{
	display:block;
	padding:var(--anvil-card-pad, 28px);
	border-radius:var(--anvil-card-radius, 16px);
	text-decoration:none;
	color:var(--anvil-card-text, inherit);
	background:var(--anvil-card-bg, transparent);
	transition:transform .2s, box-shadow .2s, border-color .2s, background .2s;
}
.anvil-iconcards-bordered .anvil-iconcard{
	border:1.5px solid var(--anvil-card-border, color-mix(in srgb, var(--anvil-ink) 12%, transparent));
}
.anvil-iconcards-filled .anvil-iconcard{
	background:var(--anvil-card-bg, color-mix(in srgb, var(--anvil-ink) 4%, transparent));
}
/* A border colour on its own should draw a border, whichever skin is set. */
.anvil-iconcards-filled .anvil-iconcard,
.anvil-iconcards-plain .anvil-iconcard{
	border:1.5px solid var(--anvil-card-border, transparent);
}

a.anvil-iconcard:hover{
	transform:translateY(-4px);
	box-shadow:0 12px 30px rgba(0,0,0,.09);
	border-color:var(--anvil-card-border-hover, color-mix(in srgb, var(--anvil-primary) 40%, transparent));
}

.anvil-iconcard-ic{
	display:inline-flex; align-items:center; justify-content:center;
	width:var(--anvil-icon-box, 52px);
	height:var(--anvil-icon-box, 52px);
	border-radius:var(--anvil-icon-radius, 13px);
	background:var(--anvil-icon-bg, color-mix(in srgb, var(--anvil-primary) 12%, transparent));
	color:var(--anvil-icon-color, var(--anvil-primary));
	font-size:26px;
	margin-bottom:16px;
}
.anvil-iconcard-h{ margin:0 0 8px; font-size:18.5px; font-weight:700 }
.anvil-iconcard-t{ margin:0; opacity:.72; font-size:14.5px; line-height:1.6 }

/* color-mix is recent; keep the old flat fallbacks for anything older. */
@supports not (background: color-mix(in srgb, red, blue)){
	.anvil-iconcards-bordered .anvil-iconcard{ border-color:var(--anvil-card-border, rgba(0,0,0,.12)) }
	.anvil-iconcards-filled .anvil-iconcard{ background:var(--anvil-card-bg, rgba(0,0,0,.04)) }
	.anvil-iconcard-ic{ background:var(--anvil-icon-bg, rgba(0,0,0,.06)) }
}
@media (prefers-reduced-motion: reduce){
	a.anvil-iconcard:hover{ transform:none }
}