/* === PK Władze === */

/* Krój, rozmiary, grubości i kolory tekstu, nagłówków, linków i przycisków
   daje PK Typografia - wtyczka używa zwykłych znaczników (h2-h4, p, dl,
   a, .wp-block-button__link), które typografia już styluje. Ten arkusz
   ustawia tylko układ, tła kart i drobne etykiety (w em, względem tekstu
   z typografii). Kolory biorą się z palety PK (var(--pk-...)).

   Układ reaguje na szerokość KONTENERA, a nie ekranu (@container): blok
   wstawiony w wąską kolumnę ułoży się tak samo jak na telefonie. */

.pkwl,
.pkwl *,
.pkwl-sekcja,
.pkwl-sekcja *,
.pkwl-osoba,
.pkwl-osoba *,
.pkwl-baner,
.pkwl-baner * {
	box-sizing: border-box;
}
.pkwl [hidden],
.pkwl-sekcja[hidden],
.pkwl-osoba[hidden],
.pkwl-baner[hidden] {
	display: none !important;
}

/* --- Motywy -------------------------------------------------------------
   Jasny: białe tło, tekst taki, jaki ustawia PK Typografia.
   Ciemny: granatowe tło, biały tekst.

   Kolor tekstu wymuszamy tylko tam, gdzie to świadomy wybór w bloku -
   motyw ciemny albo własny kolor tekstu (klasa pkwl-kolor-tekstu).
   Typografia koloruje h1-h6, p, li, dt, dd wprost, regułą o specyficzności
   dwóch identyfikatorów, więc tu potrzebny jest !important - tak samo jak
   w wariancie przycisku "Jasny (PK)". Linki dziedziczą kolor przez klasę
   has-text-color, którą typografia sama obsługuje (sekcja Linki ->
   Dziedziczenie koloru); reguła niżej robi to samo na wypadek wyłączenia
   tej opcji. Po najechaniu link dostaje wygląd z typografii. */
.pkwl-motyw-jasny {
	--pkwl-bg: #ffffff;
	--pkwl-fg: var(--pk-granat, #02356f);
	--pkwl-line: var(--pk-link-tlo, #d7e9ff);
}
.pkwl-motyw-ciemny {
	--pkwl-bg: var(--pk-granat, #02356f);
	--pkwl-fg: #ffffff;
	--pkwl-line: transparent;
}
.pkwl-nav,
.pkwl-ramka,
.pkwl-osoba,
.pkwl-baner {
	background-color: var(--pkwl-bg);
}
.pkwl-kolor-tekstu {
	color: var(--pkwl-fg);
}
.pkwl-kolor-tekstu :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd) {
	color: var(--pkwl-fg) !important;
}
.pkwl-kolor-tekstu a:not(.wp-block-button__link) {
	color: inherit;
}

/* --- Kontener ----------------------------------------------------------- */
.pkwl {
	--pkwl-sticky: 0px;
	container: pkwl / inline-size;
	margin: 0 0 48px;
}

/* Pasek nawigacji. Kolor zawsze z motywu paska - to nawigacja, a nie tekst
   (typografia też pomija linki w <nav>). */
.pkwl-nav {
	position: sticky;
	top: var(--pkwl-sticky, 0px);
	z-index: 20;
	margin-bottom: 32px;
	border: 1px solid var(--pkwl-line);
	border-radius: 10px;
	color: var(--pkwl-fg);
}
.pkwl-nav__lista {
	position: relative;
	display: flex;
	gap: 4px;
	padding: 0 12px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.pkwl-nav__lista::-webkit-scrollbar {
	display: none;
}
/* Trzy klasy: Astra podkreśla linki we wpisach regułą
   ".ast-single-post .entry-content a" (0,2,1). */
.pkwl .pkwl-nav .pkwl-nav__link {
	flex: none;
	display: block;
	padding: 14px 12px 11px;
	border-bottom: 3px solid transparent;
	color: inherit;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none;
	opacity: .8;
}
.pkwl .pkwl-nav .pkwl-nav__link:hover,
.pkwl .pkwl-nav .pkwl-nav__link:focus,
.pkwl .pkwl-nav .pkwl-nav__link.is-active {
	color: inherit;
	opacity: 1;
	border-bottom-color: currentColor;
}

/* Wyszukiwarka nad treścią (gdy nie ma ramki z adresem w kolumnie bocznej). */
.pkwl__gora {
	margin-bottom: 32px;
}
.pkwl__gora .pkwl-szukaj {
	max-width: 420px;
}

.pkwl__uklad {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
.pkwl__uklad--bez-boku {
	grid-template-columns: minmax(0, 1fr);
}
.pkwl__bok {
	position: sticky;
	top: calc(var(--pkwl-sticky, 0px) + 80px);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.pkwl--bez-nawigacji .pkwl__bok {
	top: calc(var(--pkwl-sticky, 0px) + 16px);
}
.pkwl__tresc {
	display: flex;
	flex-direction: column;
	gap: 56px;
	min-width: 0;
}
.pkwl .pkwl__pusto {
	margin: 0;
	padding: 24px 0;
}

@container pkwl (max-width: 900px) {
	.pkwl__uklad {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.pkwl__bok {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
	.pkwl-nav {
		margin-bottom: 24px;
	}
}
@container pkwl (max-width: 560px) {
	.pkwl__bok {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	.pkwl__tresc {
		gap: 40px;
	}
	.pkwl-nav {
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		margin-bottom: 20px;
	}
	.pkwl-nav__lista {
		padding: 0 4px;
	}
	.pkwl .pkwl-nav .pkwl-nav__link {
		padding: 12px 10px 9px;
	}
}

/* Wyszukiwarka. Krój i rozmiar jak tekst z PK Typografii (dziedziczone),
   pole formularza dostaje je przez "font: inherit". */
.pkwl .pkwl-szukaj__etykieta {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: inherit; /* Spectra koloruje każdy <label> na czarno. */
}
.pkwl .pkwl-szukaj__pole {
	display: block;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 12px;
	font: inherit;
	color: inherit;
	background: #ffffff;
	border: 1px solid #c3cedd;
	border-radius: 8px;
	box-shadow: none;
}
.pkwl .pkwl-szukaj__pole:focus {
	border-color: var(--pk-granat, #02356f);
}

/* Ramka z adresem. */
.pkwl-ramka {
	padding: 16px;
	border: 1px solid var(--pkwl-line);
	border-radius: 10px;
}
.pkwl-ramka p {
	margin: 0;
}
.pkwl-ramka .pkwl-ramka__tytul {
	margin-bottom: 8px;
}
.pkwl-ramka .pkwl-ramka__uwaga {
	margin-top: 8px;
	opacity: .8;
}

/* --- Sekcja ------------------------------------------------------------- */
.pkwl-sekcja {
	container: pkwl-sekcja / inline-size;
	scroll-margin-top: calc(var(--pkwl-sticky, 0px) + 72px);
}
/* Podgrupa bez tytułu (np. druga część Rady Uczelni) stoi bliżej poprzedniej. */
.pkwl__tresc > .pkwl-sekcja--bez-tytulu {
	margin-top: -24px;
}
.pkwl-sekcja__naglowek {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--pk-granat, #02356f);
}
/* Nagłówki: rozmiar, krój i kolor z typografii (H2, H3). Tu tylko odstępy -
   dwie klasy wystarczą, żeby przebić marginesy Astry. */
.pkwl-sekcja .pkwl-sekcja__tytul {
	margin: 0;
	padding: 0;
	text-wrap: balance;
}
.pkwl-sekcja .pkwl-sekcja__podtytul {
	margin: 0 0 12px;
	padding: 0;
	text-wrap: balance;
}
.pkwl-sekcja__licznik {
	font-variant-numeric: tabular-nums;
	opacity: .75;
}

.pkwl-siatka {
	--pkwl-kol: 2;
	display: grid;
	grid-template-columns: repeat(var(--pkwl-kol), minmax(0, 1fr));
	gap: 16px;
}
.pkwl-siatka--1 { --pkwl-kol: 1; }
.pkwl-siatka--3 { --pkwl-kol: 3; }
.pkwl-siatka--4 { --pkwl-kol: 4; }

/* Lista: wiersze jeden pod drugim, wspólna ramka, kreski między wierszami. */
.pkwl-siatka--lista {
	--pkwl-kol: 1;
	gap: 0;
	border: 1px solid var(--pk-link-tlo, #d7e9ff);
	border-radius: 10px;
	overflow: hidden;
}
.pkwl-siatka--lista .pkwl-osoba {
	margin-top: -1px;
	border-width: 1px 0 0;
	border-color: var(--pk-link-tlo, #d7e9ff);
	border-radius: 0;
}

@container pkwl-sekcja (max-width: 900px) {
	.pkwl-siatka--4 { --pkwl-kol: 2; }
}
@container pkwl-sekcja (max-width: 760px) {
	.pkwl-siatka--3 { --pkwl-kol: 2; }
}
@container pkwl-sekcja (max-width: 560px) {
	.pkwl-siatka--2,
	.pkwl-siatka--3,
	.pkwl-siatka--4 { --pkwl-kol: 1; }
}

/* --- Karta osoby -------------------------------------------------------- */
.pkwl-osoba {
	container: pkwl-osoba / inline-size;
	/* Kolumna: dane rosną (flex: 1), a "Więcej informacji" zostaje na dole.
	   Karty w jednym rzędzie siatki mają równą wysokość (height: 100%), więc
	   odnośnik stoi w tym samym miejscu w każdej z nich. */
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 18px;
	border: 1px solid var(--pkwl-line);
	border-radius: 10px;
}
.pkwl-osoba__uklad {
	display: flex;
	flex: 1 0 auto;
	/* stretch: kolumna z danymi ma co najmniej wysokość zdjęcia, więc
	   "Więcej informacji" na jej dole kończy się równo ze zdjęciem */
	align-items: stretch;
	gap: 18px;
}
.pkwl-osoba__foto {
	position: relative;
	flex: none;
	align-self: flex-start; /* zdjęcie w swoich proporcjach, nie rozciągane */
	display: grid;
	place-items: center;
	width: 120px;
	max-width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 8px;
	background-color: rgba(127, 127, 127, .15);
	background-color: color-mix(in srgb, currentColor 12%, transparent);
	font-size: 1.625em;
	font-weight: 700;
	line-height: 1;
}
/* Przycisk powiększania wypełnia DOKŁADNIE ramkę zdjęcia (position:
   absolute). Wcześniej rósł do wysokości obrazka: pionowe zdjęcia wystawały
   z ramki 220x275 o ~56 px i były obcinane tylko od dołu, a object-fit /
   object-position nie działały (zmierzone na /wladze-2/ w 1.7.0). */
.pkwl-osoba .pkwl-osoba__powieksz {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	cursor: zoom-in;
}
.pkwl-osoba .pkwl-osoba__powieksz:hover img {
	transform: scale(1.04);
}
.pkwl-osoba .pkwl-osoba__powieksz:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}
.pkwl-osoba__foto img {
	transition: transform .25s ease;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}
.pkwl-osoba__tresc {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
/* Funkcja: zwykły akapit z PK Typografii (krój, rozmiar, kolor),
   pogrubiona przez <strong> w znacznikach. Tu tylko odstęp. */
.pkwl-osoba .pkwl-osoba__rola {
	margin: 0 0 4px;
}
.pkwl-osoba .pkwl-osoba__imie {
	margin: 0 0 12px;
	padding: 0;
	text-wrap: balance;
}
.pkwl-osoba .pkwl-osoba__opis {
	margin: -6px 0 12px;
	opacity: .85;
}
/* Odznaka w nagłówku: odwrócone kolory karty. */
.pkwl-odznaka {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 4px;
	background-color: currentColor;
	line-height: 1.4;
	vertical-align: baseline;
	white-space: nowrap;
}
.pkwl-odznaka > span {
	color: var(--pkwl-bg);
}

/* Kontakt: dt/dd stylują się jak tekst z typografii. */
.pkwl-osoba .pkwl-kontakt {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 12px;
	margin: 0;
	padding: 0;
}
.pkwl-osoba .pkwl-kontakt dt {
	margin: 0;
	font-weight: 400;
	opacity: .75;
}
.pkwl-osoba .pkwl-kontakt dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}
/* Części adresu ("ul. Warszawska 24," / "31-155 Kraków") łamią się tylko
   między sobą. */
.pkwl-nw {
	white-space: nowrap;
}
.pkwl-pokoj {
	display: inline-block;
	padding: 0 7px;
	border-radius: 4px;
	background-color: rgba(127, 127, 127, .15);
	background-color: color-mix(in srgb, currentColor 10%, transparent);
	font-variant-numeric: tabular-nums;
}
/* Telefon / e-mail z ikonką kopiowania tuż za nim. Każdy numer w osobnej
   linii; długi e-mail łamie się, a ikonka zostaje przy jego końcu. */
.pkwl-kopiowalne {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.pkwl-kopiowalne a {
	min-width: 0;
	overflow-wrap: anywhere;
}
.pkwl-osoba .pkwl-kontakt__tel {
	font-variant-numeric: tabular-nums;
	white-space: nowrap; /* numer nie łamie się w środku ("12 628 22 / 04") */
}
/* Ikonka kopiowania: kolor linku z PK Typografii (--pk-link), w motywie
   ciemnym / z własnym kolorem tekstu - kolor tekstu karty. Gołe <button>
   Astra maluje tłem, obwódką i cieniem, stąd jawne zerowanie (trzy klasy). */
.pkwl-osoba .pkwl-kontakt .pkwl-kopiuj {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	color: var(--pk-link, #20538a);
	line-height: 0;
	cursor: pointer;
}
.pkwl-kolor-tekstu .pkwl-kontakt .pkwl-kopiuj {
	color: inherit;
}
.pkwl-osoba .pkwl-kontakt .pkwl-kopiuj:hover,
.pkwl-osoba .pkwl-kontakt .pkwl-kopiuj:focus {
	background-color: rgba(127, 127, 127, .15);
	background-color: color-mix(in srgb, currentColor 12%, transparent);
	box-shadow: none;
}
.pkwl-kopiuj svg {
	display: block;
	width: 18px;
	height: 18px;
}
.pkwl-kopiuj .pkwl-kopiuj__ok,
.pkwl-kopiuj.is-skopiowane .pkwl-kopiuj__ikona {
	display: none;
}
.pkwl-kopiuj.is-skopiowane .pkwl-kopiuj__ok {
	display: block;
}

/* "Więcej informacji": prawy dolny róg kolumny z danymi (każdy układ).
   Przy krótkich danych kończy się równo z dolną krawędzią zdjęcia, przy
   dłuższych - 14 px pod nimi. Kolor, podkreślenie i najechanie z typografii
   (sekcja Linki). */
.pkwl-osoba .pkwl-wiecej {
	align-self: flex-end;
	margin-top: auto;
	padding-top: 14px;
	font-weight: 700;
}

/* Układ: karta - duże zdjęcie (220 px, dawniej układ "Duża") obok danych. */
.pkwl-osoba--karta .pkwl-osoba__uklad {
	gap: 24px;
}
.pkwl-osoba--karta .pkwl-osoba__foto {
	width: 220px;
	font-size: 2.75em;
}

/* Układ: wiersz listy (Rada Uczelni) - zdjęcie 120 px, jak dawniej w karcie. */
.pkwl-osoba--wiersz {
	padding: 14px 16px;
}
.pkwl-osoba--wiersz .pkwl-osoba__uklad {
	gap: 18px;
}
.pkwl-osoba--wiersz .pkwl-osoba__foto {
	width: 120px;
	font-size: 1.625em;
}
.pkwl-osoba--wiersz .pkwl-osoba__imie {
	margin: 0;
}
.pkwl-osoba--wiersz .pkwl-osoba__opis {
	margin: 2px 0 0;
}
.pkwl-osoba--wiersz .pkwl-kontakt {
	margin-top: 8px;
}

/* Progi liczone od wnętrza karty (bez paddingu).
   Karta: obok zdjęcia 220 px tekst potrzebuje ~300 px, więc poniżej 540 px
   zdjęcie idzie nad dane (w tym samym rozmiarze, najwyżej szerokość karty).
   Na /wladze-2/ dotyczy to np. 3 kart kanclerza przy ekranie ~1300 px. */
@container pkwl-osoba (max-width: 540px) {
	.pkwl-osoba--karta .pkwl-osoba__uklad {
		flex-direction: column;
		gap: 16px;
	}
}
/* Wiersz: w bardzo wąskim zdjęcie idzie nad tekst. */
@container pkwl-osoba (max-width: 340px) {
	.pkwl-osoba--wiersz .pkwl-osoba__uklad {
		flex-direction: column;
	}
}
@container pkwl-osoba (max-width: 330px) {
	.pkwl-osoba .pkwl-kontakt {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	.pkwl-osoba .pkwl-kontakt dt {
		margin-top: 6px;
	}
	.pkwl-osoba .pkwl-kontakt dt:first-child {
		margin-top: 0;
	}
}

/* --- Baner -------------------------------------------------------------- */
.pkwl-baner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	border: 1px solid var(--pkwl-line);
	border-radius: 10px;
}
.pkwl-baner__tresc {
	min-width: 0;
}
.pkwl-baner .pkwl-baner__tytul {
	margin: 0;
	padding: 0;
	text-wrap: balance;
}
.pkwl-baner .pkwl-baner__tekst {
	margin: 2px 0 0;
	opacity: .85;
}
/* Przycisk to zwykły przycisk Gutenberga - kolory, krój i zaokrąglenie
   z sekcji "Przyciski" / "Przyciski jasne" PK Typografii. */
.pkwl-baner .wp-block-button {
	margin: 0;
}
/* Obramowanie 1 px. Typografia ustawia tylko jego KOLOR (granat po
   najechaniu), a Astra i WordPress dają przyciskowi grubość 0 - na białym
   banerze przycisk po najechaniu (białe tło) zmieniał się w sam napis.
   Przyciski Info Boxa mają 1 px od Spectry; tu to samo. Trzy klasy, żeby
   przebić ".wp-block-button .wp-block-button__link" Astry. */
.pkwl-baner .wp-block-button .wp-block-button__link {
	border-style: solid;
	border-width: 1px;
}

/* --- Dostępność --------------------------------------------------------- */
.pkwl .pkwl-nav .pkwl-nav__link:focus-visible,
.pkwl-osoba .pkwl-kopiuj:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.pkwl .pkwl-szukaj__pole:focus-visible {
	outline: 2px solid var(--pk-granat, #02356f);
	outline-offset: 1px;
}
.pkwl-osoba .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
@media (prefers-reduced-motion: no-preference) {
	html:has(.pkwl-nav) {
		scroll-behavior: smooth;
	}
}

/* --- Powiększone zdjęcie (okno <dialog>, tworzy je assets/frontend.js) --- */
.pkwl-lightbox {
	max-width: min(92vw, 900px);
	max-height: 92vh;
	margin: auto;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
}
.pkwl-lightbox::backdrop {
	background: rgba(1, 32, 66, .92);
}
.pkwl-lightbox figure {
	/* display: table + caption-side - ramka ma szerokość zdjęcia, a podpis
	   łamie się w niej, zamiast poszerzać okno. */
	position: relative;
	display: table;
	margin: 0 auto;
}
.pkwl-lightbox figcaption {
	display: table-caption;
	caption-side: bottom;
}
/* Szerokość ustawia skrypt (dopasuj() w frontend.js) - także w górę dla
   małych plików; max-* to zabezpieczenie, gdyby skrypt nie zdążył. */
.pkwl-lightbox img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(92vw, 900px);
	max-height: calc(92vh - 64px);
	margin: 0 auto;
	border-radius: 8px;
	background: #ffffff;
}
/* Podpis: krój i rozmiar z PK Typografii (sekcja "Podpis zdjęcia"), kolor
   biały, bo stoi na granatowym tle. */
.pkwl-lightbox figcaption {
	margin-top: 12px;
	text-align: center;
	color: #ffffff !important;
}
.pkwl-lightbox .pkwl-lightbox__zamknij {
	/* W rogu zdjęcia, a nie nad nim - nad zdjęciem wychodził poza niskie okno. */
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
	color: var(--pk-granat, #02356f);
	cursor: pointer;
}
.pkwl-lightbox .pkwl-lightbox__zamknij:hover,
.pkwl-lightbox .pkwl-lightbox__zamknij:focus {
	background: var(--pk-link-tlo, #d7e9ff);
	color: var(--pk-granat, #02356f);
}
.pkwl-lightbox .pkwl-lightbox__zamknij svg {
	display: block;
	width: 20px;
	height: 20px;
}
@media (prefers-reduced-motion: reduce) {
	.pkwl-osoba__foto img {
		transition: none;
	}
}