/*
 * Banner stickers – award badges stacked in a bottom corner of the page banner
 * (bottom-left by default, bottom-right via the page's "Sticker position" field).
 * Markup is injected by inc/banner-stickers.php into the first Kadence Row Layout.
 * Breakpoints follow Kadence: tablet <= 1024px, phone <= 767px.
 */
.kb-row-layout-wrap.kh-has-banner-stickers {
	position: relative;
}

.kh-banner-stickers {
	--kh-sticker-size: 180px;
	position: absolute;
	z-index: 5;
	left: var(--global-content-edge-padding, 1.5rem);
	bottom: 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.kh-banner-stickers__item {
	display: block;
	width: var(--kh-sticker-size);
	height: var(--kh-sticker-size);
	border-radius: 50%;
	pointer-events: auto;
	transition: transform 0.25s ease;
}

/* Bottom-right variant – for banners whose text sits on the left. */
.kh-banner-stickers--right {
	left: auto;
	right: var(--global-content-edge-padding, 1.5rem);
	align-items: flex-end;
}

a.kh-banner-stickers__item:hover,
a.kh-banner-stickers__item:focus-visible {
	transform: translateY(-3px) scale(1.03);
}

.kh-banner-stickers__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

/* Tablet: smaller badges, still stacked in the chosen corner. */
@media (max-width: 1024px) {
	.kh-banner-stickers {
		--kh-sticker-size: 140px;
		bottom: 2rem;
		gap: 0.75rem;
	}
}

/* Phone: a centred row along the bottom edge so the badges never sit over the centred text. */
@media (max-width: 767px) {
	.kh-banner-stickers,
	.kh-banner-stickers--right {
		--kh-sticker-size: 110px;
		left: 0;
		right: 0;
		bottom: 1.25rem;
		flex-direction: row;
		justify-content: center;
		align-items: flex-end;
		gap: 0.75rem;
		padding: 0 1rem;
	}
}