/* PK Info Box - tło karty i kolor tekstu */

/* Karta z wybranym tłem dostaje odstęp, żeby tekst nie dotykał krawędzi.
   Spectra ustawia karcie własny padding regułą
   ".uagb-block-ID.uagb-infobox__content-wrap:not(...)" (3 klasy), więc
   potrzebne są 4 klasy; powtórzona .pkib-has-bg tylko podbija specyficzność. */
.pkib-has-bg.pkib-has-bg.pkib-has-bg.uagb-infobox__content-wrap {
	box-sizing: border-box;
	padding: 24px;
}

/* Kolor tekstu: tytuł, nadtytuł, opis i linki w opisie. */
.pkib-text-light .uagb-ifb-title,
.pkib-text-light .uagb-ifb-title-prefix,
.pkib-text-light .uagb-ifb-desc,
.pkib-text-light .uagb-ifb-desc a,
.pkib-text-light .uagb-ifb-content a {
	color: #ffffff !important;
}

.pkib-text-dark .uagb-ifb-title,
.pkib-text-dark .uagb-ifb-title-prefix,
.pkib-text-dark .uagb-ifb-desc,
.pkib-text-dark .uagb-ifb-desc a,
.pkib-text-dark .uagb-ifb-content a {
	color: #012042 !important;
}

/* Szerokość całej karty (wybrana w panelu bloku): tylko od tabletu w górę,
   na telefonie karta zawsze ma pełną szerokość. 4 klasy, bo Spectra ustawia
   karcie własne wymiary regułami o specyficzności 3 klas. */
@media (min-width: 782px) {
	.pkib-has-width.pkib-has-width.pkib-has-width.uagb-infobox__content-wrap {
		width: var(--pkib-w);
		max-width: 100%;
		box-sizing: border-box;
	}
	/* Wyrównanie jawnie w każdą stronę: kontener Spectry nadrzędny często
	   centruje swoje dzieci, więc samo "nic nie rób" dla lewej dawało środek.
	   Auto-marginesy działają tak samo w kontenerze w wierszu i w kolumnie. */
	.pkib-align-left.pkib-align-left.pkib-align-left.uagb-infobox__content-wrap {
		margin-left: 0;
		margin-right: auto;
	}
	.pkib-align-center.pkib-align-center.pkib-align-center.uagb-infobox__content-wrap {
		margin-left: auto;
		margin-right: auto;
	}
	.pkib-align-right.pkib-align-right.pkib-align-right.uagb-infobox__content-wrap {
		margin-left: auto;
		margin-right: 0;
	}
}

/* --- Edytor ---------------------------------------------------------------
   Wrapper bloku w edytorze nie ma klasy karty (.uagb-infobox__content-wrap),
   więc reguły wyżej tam nie działają.

   Karta o pełnej szerokości z tłem: odstęp na wrapperze.
   Węższa karta: wrapper zostaje tak szeroki jak kolumna treści edytora (nie
   ustawiamy mu ani szerokości, ani marginesów - edytor sam go ogranicza i
   centruje), a pozycję karty daje odstęp wewnętrznej karty Spectry z
   zmiennych --pkib-pl / --pkib-pr / --pkib-pv ustawianych przez editor.js;
   tło (gradient) rysuje editor.js na wrapperze. */
html body .editor-styles-wrapper [data-type="uagb/info-box"].pkib-has-bg:not(.pkib-has-width) {
	box-sizing: border-box;
	padding: 24px;
}
html body .editor-styles-wrapper [data-type="uagb/info-box"].pkib-has-width .uagb-infobox__content-wrap {
	box-sizing: border-box !important;
	padding-left: var(--pkib-pl) !important;
	padding-right: var(--pkib-pr) !important;
	padding-top: var(--pkib-pv) !important;
	padding-bottom: var(--pkib-pv) !important;
}

/* --- Info Box z obrazem z boku w wąskiej karcie ------------------------------
   Spectra układa obraz obok tekstu (obraz 275 px) i składa je jeden pod drugim
   dopiero poniżej 976 px szerokości ekranu. W kartach w kolumnach, w
   kontenerach albo zwężonych suwakiem szerokości tekst dostawał wtedy 40-200 px
   i łamał się po jednej literze. Teraz tekst ma minimum 300 px, a gdy go obok
   obrazu nie ma, zawija się pod obraz. Dotyczy wszystkich Info Boxów (od 977 px;
   niżej działa własne składanie Spectry). */
@media (min-width: 977px) {
	.uagb-infobox-icon-left.uagb-infobox__content-wrap,
	.uagb-infobox-icon-right.uagb-infobox__content-wrap,
	.uagb-infobox-icon-left.uagb-infobox__content-wrap > .uagb-infobox-margin-wrapper,
	.uagb-infobox-icon-right.uagb-infobox__content-wrap > .uagb-infobox-margin-wrapper {
		flex-wrap: wrap;
		row-gap: 16px;
	}
	.uagb-infobox-icon-left.uagb-infobox__content-wrap .uagb-ifb-content,
	.uagb-infobox-icon-right.uagb-infobox__content-wrap .uagb-ifb-content {
		flex: 1 1 300px;
		width: auto;
		min-width: 0;
	}
}

/* Link ze zdjęcia (od 1.5.0): link ma rozmiar obrazka, lekkie przyciemnienie
   po najechaniu i widoczny obrys przy nawigacji klawiaturą. */
.pkib-img-link {
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	text-decoration: none !important;
	box-shadow: none !important;
}
.pkib-img-link img {
	transition: opacity .2s ease;
}
.pkib-img-link:hover img {
	opacity: .85;
}
.pkib-img-link:focus-visible {
	outline: 2px solid #02356f;
	outline-offset: 3px;
}