/*
 * The eyebrow: the short label above a title, in mono caps. Shared by every
 * block with an eyebrow slot (handle kimaai-eyebrow, src/Blocks.php).
 */

.kimaai-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--action);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
}

.kimaai-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px var(--wp--preset--color--brand-soft);
}

/* Pill eyebrow: the hero's announcement line. */
.kimaai-eyebrow--pill {
	padding: 0.3rem 0.75rem 0.3rem 0.4rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--full);
	background: rgb(255 255 255 / 0.7);
	box-shadow: var(--wp--preset--shadow--xs);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0;
	text-transform: none;
	backdrop-filter: blur(8px);
}

.kimaai-eyebrow--pill::before {
	display: none;
}

.kimaai-eyebrow__tag {
	padding: 0.1rem 0.45rem;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.is-style-night .kimaai-eyebrow {
	color: var(--wp--preset--color--brand-light);
}

.is-style-night .kimaai-eyebrow::before {
	box-shadow: 0 0 0 3px rgb(103 103 253 / 0.3);
}