/**
 * PG AI Disclosure - etykieta na froncie.
 *
 * Polprzezroczysta czern z rozmyciem tla trzyma kontrast zarowno na jasnych,
 * jak i ciemnych kadrach, wiec jeden wariant obsluguje cala biblioteke.
 * Bialy badge wymagalby ogladania kazdego pliku osobno.
 */

.pg-aid {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	vertical-align: middle;
}

.pg-aid > img,
.pg-aid > picture,
.pg-aid > a {
	max-width: 100%;
}

/* Etykieta wstrzykiwana przez skrypt na obraz, ktorego serwer nie owinal
   (miniatura galerii tworzona przez JS, tlo CSS). Wypelnia element docelowy,
   a sama etykieta pozycjonuje sie w jego rogu. */
.pg-aid--inject {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	z-index: 2;
}

/* Obraz ukryty na danym breakpoincie (np. mobilna wersja baneru z display:none
   na desktopie): chowamy sam badge, zeby etykieta nie wisiala nad pustym
   miejscem po tym obrazie. Chowamy TYLKO badge, nie wrapper ani obraz, dzieki
   czemu etykieta wraca automatycznie, gdy obraz znow staje sie widoczny. Klase
   nadaje i zdejmuje skrypt na podstawie realnej widocznosci obrazu. */
.pg-aid--hidden .pg-aid__badge {
	display: none !important;
}

/* Lightboxy i overlaye galerii (PhotoSwipe w WooCommerce, lightbox Elementora,
   Fancybox, Magnific, lightGallery). Skrypt i tak tam nie wchodzi, ale gdyby
   jakas galeria sklonowala fragment strony razem z gotowym wrapperem, badge ma
   sie nie pokazac. Obowiazek informacyjny jest spelniony na stronie, z ktorej
   odbiorca otwiera powiekszenie. */
.pswp .pg-aid__badge,
.elementor-lightbox .pg-aid__badge,
.dialog-type-lightbox .pg-aid__badge,
.mfp-wrap .pg-aid__badge,
.fancybox-container .pg-aid__badge,
.fancybox__container .pg-aid__badge,
.fancybox-overlay .pg-aid__badge,
.lg-outer .pg-aid__badge,
.lg-container .pg-aid__badge,
.glightbox-container .pg-aid__badge,
.baguetteBox-overlay .pg-aid__badge,
.swipebox-overlay .pg-aid__badge,
.lightcase-content .pg-aid__badge {
	display: none !important;
}

/* Kadrowanie do ksztaltu. Motywy sklepowe czesto przycinaja zdjecie produktu do
   kwadratu: ksztaltuja kontener (aspect-ratio albo stala wysokosc) i rozciagaja
   obraz przez object-fit:cover. Nasz wrapper wchodzi miedzy kontener a obraz i
   rozbija to kadrowanie - kontener rozpycha sie do naturalnych proporcji obrazu
   (prostokat zamiast kwadratu). Gdy skrypt wykryje na obrazie object-fit
   cover/contain (motyw chce nim wypelnic kontener), wrapper wypelnia ten
   kontener dokladnie tak, jak wczesniej robil to sam obraz. */
.pg-aid--fill {
	display: block;
	width: 100%;
	height: 100%;
}

/* Obraz pozycjonowany absolutnie przez motyw (kadrowanie "obraz wypelnia slajd"
   w galerii produktu: position:absolute + width/height:100% + object-fit:cover).
   Wrapper NIE moze byc dla niego blokiem odniesienia, bo sam zapada sie do zera
   (obraz jest poza ukladem) i wtedy 100% obrazu liczy sie wzgledem zera - obraz
   znikal, a wracal tylko pod kursorem, gdy powiekszenie doklejalo swoj klon poza
   wrapperem. position:static oddaje obraz temu kontenerowi, ktory kadrowal go bez
   wtyczki; etykieta trafia do tego samego kontenera, czyli w rog obrazu. Klase
   nadaje skrypt po odczytaniu position obrazu. */
.pg-aid.pg-aid--abs {
	position: static;
	display: block;
}

/* Obraz o stalym rozmiarze (np. okragly awatar) w kontenerze flex. Wrapper ma
   przylegac do obrazu: nie kurczyc sie (inaczej max-width:100% scisnaloby obraz
   do owalu). max-width:100% i tak chroni przed przepelnieniem. Klase nadaje
   skrypt, gdy wykryje, ze obraz nie wypelnia rozciaganego wrappera. */
.pg-aid--hug {
	flex-shrink: 0;
}

/* Wrapper w WIERSZU flex ze stretch rozciaga sie w pionie (obraz, jako element
   zastapiony, nie), przez co etykieta wypada pod obrazem. align-self blokuje to
   rozciaganie. Skrypt nadaje te klase TYLKO w wierszu flex - w kolumnie
   align-self zmienialby wyrownanie w poziomie i psul np. wysrodkowane zdjecia. */
.pg-aid--hug-top {
	align-self: flex-start;
}

/* Domyslny wygląd to wariant skrocony "AI" (maly). Pelny tekst wlacza dopiero
   klasa .pg-aid--expanded, dodawana przez skrypt na szerokich obrazach. */
.pg-aid__badge {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	max-width: calc(100% - 1.2rem);
	padding: 0.25em 0.5em;
	border-radius: 999px;
	background: rgba(16, 16, 16, 0.72);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	color: #fff;
	/* Niektore motywy (np. w tabeli koszyka WooCommerce) ustawiaja
	   -webkit-text-fill-color na tekstach, co wygrywa z color i sprawia, ze
	   napis "AI" staje sie ciemny na ciemnym tle. Wymuszamy biel dla obu. */
	-webkit-text-fill-color: #fff;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-decoration: none;
	pointer-events: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.pg-aid__badge,
.pg-aid__badge span {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.pg-aid--bottom-right .pg-aid__badge {
	right: 0.6rem;
	bottom: 0.6rem;
}

.pg-aid--bottom-left .pg-aid__badge {
	left: 0.6rem;
	bottom: 0.6rem;
}

/* Domyslnie widoczny jest skrot "AI"; pelny tekst jest ukryty. */
.pg-aid__full {
	display: none;
}

/* Wariant pelny wlacza skrypt na froncie tylko na dostatecznie szerokich
   obrazach (klasa .pg-aid--expanded). */
.pg-aid--expanded .pg-aid__full {
	display: inline;
}

.pg-aid--expanded .pg-aid__abbr {
	display: none;
}

.pg-aid--expanded .pg-aid__badge {
	gap: 0.4em;
	padding: 0.35em 0.7em;
	font-size: 13px;
}

/* Pelna tresc etykiety jest zawsze obecna w drzewie dostepnosci,
   niezaleznie od tego, czy wizualnie widac wersje pelna czy skrot. */
.pg-aid__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 480px) {
	.pg-aid__badge {
		font-size: 11px;
	}

	.pg-aid--bottom-right .pg-aid__badge,
	.pg-aid--bottom-left .pg-aid__badge {
		bottom: 0.4rem;
	}

	.pg-aid--bottom-right .pg-aid__badge {
		right: 0.4rem;
	}

	.pg-aid--bottom-left .pg-aid__badge {
		left: 0.4rem;
	}
}

/* Motywy i galerie czesto skaluja obrazek na hover. Etykieta ma zostac
   na miejscu, inaczej wyglada jak blad renderowania. */
.pg-aid:hover .pg-aid__badge,
.pg-aid:focus-within .pg-aid__badge {
	transform: none;
}

@media print {
	.pg-aid__badge {
		background: #111;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.pg-aid__badge {
		background: #111;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}