/*
 * Highlight Block CTA
 * Цветовете и отстъпите са CSS променливи – можете да ги презапишете в темата си:
 * .hbcta { --hbcta-accent: #e4572e; }
 */
.hbcta {
	--hbcta-accent: #1a73e8;
	--hbcta-bg: color-mix(in srgb, var(--hbcta-accent) 6%, transparent);
	--hbcta-border: color-mix(in srgb, var(--hbcta-accent) 25%, transparent);
	--hbcta-text: inherit;
	--hbcta-radius: 10px;

	margin: 2em 0;
	padding: 1.25em 1.5em;
	background: var(--hbcta-bg);
	border: 1px solid var(--hbcta-border);
	border-left: 4px solid var(--hbcta-accent);
	border-radius: var(--hbcta-radius);
	color: var(--hbcta-text);
	font: inherit;
}

.hbcta .hbcta__title {
	margin: 0 0 0.75em;
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.3;
}

.hbcta .hbcta__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5em;
}

.hbcta .hbcta__item {
	margin: 0;
	padding: 0;
}

.hbcta .hbcta__item::before {
	content: none; /* махаме декорации от темата върху li */
}

.hbcta .hbcta__link {
	display: flex;
	align-items: center;
	gap: 0.85em;
	padding: 0.6em 0.75em;
	border-radius: calc(var(--hbcta-radius) - 4px);
	background: var(--hbcta-bg);
	color: var(--hbcta-accent);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.15s ease;
}

.hbcta .hbcta__link:hover {
	background: color-mix(in srgb, var(--hbcta-accent) 14%, transparent);
	text-decoration: underline;
}

.hbcta .hbcta__link:focus-visible {
	outline: 2px solid var(--hbcta-accent);
	outline-offset: 2px;
}

.hbcta .hbcta__thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 6px;
}

.hbcta .hbcta__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	margin: 0;
}

@media (max-width: 480px) {
	.hbcta {
		padding: 1em;
	}
	.hbcta .hbcta__thumb {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hbcta .hbcta__link {
		transition: none;
	}
}