/* Meta Badge Row — structural styles.
   Visual values (colors, sizes, shape, spacing) are injected as CSS
   custom properties via inline <style>, generated from plugin settings
   or per-shortcode overrides. This file only controls layout/behavior. */

.mbr-row {
	display: flex;
	align-items: stretch;
	gap: var(--mbr-gap, 12px);
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 1em 0;
	font-family: var(--mbr-font-family, inherit);
}

.mbr-badge {
	display: inline-flex;
	align-items: baseline;
	gap: var(--mbr-label-gap, 8px);
	flex: 0 0 auto;
	white-space: nowrap;
	background-color: var(--mbr-bg-color, #14161c);
	border: var(--mbr-border-width, 1px) solid var(--mbr-border-color, #2a2e38);
	border-radius: var(--mbr-radius, 999px);
	padding: var(--mbr-padding-v, 14px) var(--mbr-padding-h, 20px);
	box-sizing: border-box;
}

.mbr-label {
	color: var(--mbr-label-color, #8a93a3);
	font-size: calc(var(--mbr-font-size, 15px) * var(--mbr-label-ratio, 0.78));
	letter-spacing: var(--mbr-letter-spacing, 1px);
	font-weight: 600;
	line-height: 1;
	flex: 0 0 auto;
}

.mbr-value {
	color: var(--mbr-value-color, #e8ebf0);
	font-size: var(--mbr-font-size, 15px);
	font-weight: 500;
	line-height: 1;
	flex: 0 0 auto;
}

/* Responsive behavior:
   - When wrapping is enabled, badges flow to new lines and the row's
     min-width no longer forces horizontal overflow.
   - When wrapping is disabled, .mbr-row gets overflow-x:auto (set via
     inline style) so the row scrolls horizontally instead of squeezing. */
@media (max-width: 600px) {
	.mbr-row {
		gap: calc(var(--mbr-gap, 12px) * 0.75);
	}
	.mbr-badge {
		padding: calc(var(--mbr-padding-v, 14px) * 0.8) calc(var(--mbr-padding-h, 20px) * 0.75);
	}
	.mbr-label,
	.mbr-value {
		font-size: calc(var(--mbr-font-size, 15px) * 0.92);
	}
}

@media (max-width: 400px) {
	.mbr-badge {
		gap: 5px;
	}
	.mbr-label,
	.mbr-value {
		font-size: calc(var(--mbr-font-size, 15px) * 0.85);
	}
}