/* Webux Highlights (field block, repeater) - frontend. */
.webux-highlights {
	display: grid;
	grid-template-columns: repeat(var(--webux-cols, 3), minmax(0, 1fr));
	gap: 1.5rem;
}

@media (max-width: 900px) {
	.webux-highlights {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.webux-highlights {
		grid-template-columns: 1fr;
	}
}

.webux-highlight {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
}

.webux-highlight__icon {
	font-size: 2rem;
	line-height: 1;
}

/* Variant "Im Kreis": icon on a round sand chip (design "Werte").
   Scoped to the modifier - the default icon box stays as-is.
   Diameter via --webux-highlight-circle (set by render.php only when it
   differs from the 52px fallback); specificity is unchanged, so the
   per-page overrides in site.css keep winning as before. */
.webux-highlights--icon-circle .webux-highlight__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--webux-highlight-circle, 52px);
	height: var(--webux-highlight-circle, 52px);
	border-radius: 999px;
	background: #f4efe3;
	color: var(--wp--preset--color--primary, #8b8178);
}

.webux-highlights--icon-circle .webux-highlight__icon svg {
	width: 24px;
	height: 24px;
}

/* Variant "Linksbündig" (designs "Werte" and "Perks"). */
.webux-highlights--align-left .webux-highlight {
	align-items: flex-start;
	text-align: left;
}

.webux-highlight__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

.webux-highlight__text {
	margin: 0;
	color: var(--wp--preset--color--muted, #6b7280);
}

/* Variant "Gefüllt, alternierend" (design "Werte" cards). Solid checkerboard
   cards in accent/umber with white type. Everything is scoped under
   .webux-highlights--filled so the plain variant stays byte-identical. The grid
   / responsive column logic above is shared - nothing new here. */
.webux-highlights--filled .webux-highlight {
	border-radius: 24px;
	padding: 34px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	color: #fff;
}

.webux-highlights--filled .webux-highlight--fill-a {
	background: #8b8178; /* accent */
}

.webux-highlights--filled .webux-highlight--fill-b {
	background: #6f665e; /* umber */
}

/* Filled cards show the bare icon in white - no sand chip. This also neutralises
   the "Im Kreis" rule above if both variants happen to be combined. */
.webux-highlights--filled .webux-highlight__icon {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	color: #fff;
}

.webux-highlights--filled .webux-highlight__icon svg {
	width: 34px;
	height: 34px;
}

.webux-highlights--filled .webux-highlight__title {
	font-size: 18px;
	font-weight: 600;
	color: #fff;
}

.webux-highlights--filled .webux-highlight__text {
	font-size: 14px;
	line-height: 1.55;
	color: #fff;
}