/* Campaign banner on the product page (Produkty, Bannery). */

/* Elementor flex containers shrink widgets to their content; the banner always fills the column. */
.elementor-widget.elementor-widget-pg_campaign_banner {
	width: 100%;
	max-width: 100%;
	align-self: stretch;
}

.pg-banner {
	width: 100%;
}

.pg-banner .pg-banner__link {
	display: block;
	border-radius: var(--pg-radius);
	text-decoration: none;
}

.pg-banner .pg-banner__link:focus-visible {
	outline: 2px solid var(--pg-accent);
	outline-offset: 3px;
}

/* The frame clips the zoomed image, so the banner keeps its size and the focus ring stays outside. */
.pg-banner .pg-banner__frame {
	display: block;
	overflow: hidden;
	border-radius: var(--pg-radius);
}

.pg-banner .pg-banner__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 0;
	transition: transform .5s var(--pg-ease);
}

/* Very gentle zoom; only on devices that really hover, so a tap does not leave it stuck. */
@media (hover: hover) {
	.pg-banner .pg-banner__link:hover .pg-banner__img {
		transform: scale(1.03);
	}
}

.pg-banner .pg-banner__link:focus-visible .pg-banner__img {
	transform: scale(1.03);
}

/* Visually hidden, read by screen readers after the alt text. */
.pg-banner .pg-banner__note {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* No motion: a slight dim instead of the zoom. */
@media (prefers-reduced-motion: reduce) {
	.pg-banner .pg-banner__img {
		transition: none;
	}

	.pg-banner .pg-banner__link:hover .pg-banner__img,
	.pg-banner .pg-banner__link:focus-visible .pg-banner__img {
		transform: none;
		filter: brightness(.94);
	}
}