/* wpkatalog-core: kopia katalog-baza.css z rem × 1.6 (Bricks: 1rem = 10px) */

/* ─────────────────────────────────────────────────────────────
   Kolory marki — jedno źródło prawdy
   ─────────────────────────────────────────────────────────────
   --katalog-marka   niebieski z logo (#2196f3). Zapis odcienia marki dla
                     odniesienia; NIE jako tło przycisku z białym tekstem —
                     biały na nim daje 3.12:1, a WCAG AA wymaga 4.5:1.
   --katalog-akcent  ten sam odcień przyciemniony. Biały tekst: 5.75:1,
                     czyli z zapasem ponad próg. To jest kolor wypełnionych
                     przycisków w całym motywie.

   Zmiana odcienia marki = zmiana tych dwóch linijek.

   Prefiks --katalog-, nie --wpl-: nazwa motywu może się jeszcze zmienić,
   a wtedy trzeba by ruszać kilkadziesiąt miejsc w arkuszach. Ten sam
   prefiks co funkcje PHP (katalog_*) — jeden prefiks na cały kod.
   ───────────────────────────────────────────────────────────── */

:root {
	--katalog-marka:        #2196f3;   /* referencyjny — celowo nieużywany w CSS */
	--katalog-akcent:       #1565c0;
	--katalog-akcent-hover: #114f99;
	--katalog-akcent-tekst: #ffffff;

	/* Ciepła szarość tekstu pomocniczego. Zastąpiła neutralne #888, które
	   na kremowym tle dawało 3.20:1 przy progu WCAG AA 4.5:1 — a używane
	   było do najdrobniejszego tekstu na stronie. Teraz 4.86:1 na kremowym
	   i 5.39:1 na białym, w dodatku w cieplejszym tonie pasującym do tła. */
	--katalog-szary:        #6E6A61;

	/* ── Tła ──────────────────────────────────────────────────────
	   Pusto (transparent) = motyw NIE maluje własnego tła i przez
	   katalog widać tło ustawione w Customizerze. Archiwum zawsze tak
	   działało; pojedyncza realizacja malowała sobie kremowy #f5f3ee
	   i była jedynym miejscem, gdzie ustawienie z Customizera nie
	   dochodziło do skutku.

	   Chcesz katalog na innym tle niż reszta witryny? Wpisz tu kolor —
	   to jedyne miejsce, żadnego !important w Dodatkowym CSS.
	   ──────────────────────────────────────────────────────────── */
	--katalog-tlo:          transparent;
	--katalog-tlo-panel:    #ffffff;   /* panele w prawej kolumnie */
}


.is-width-constrained {
  margin-inline: auto;
  width: var(--theme-container-width);
  max-width: var(--theme-block-max-width);
}

/* ─────────────────────────────────────────────────────────────
   Ramka „przeglądarki" — pasek z kropkami i polem adresu
   ─────────────────────────────────────────────────────────────
   Tu, a nie w katalog-single.css, bo tej samej ramki używa karta
   archiwum (za filtrem katalog_karta_pokaz_adres). Arkusz pojedynczej
   realizacji nie jest na archiwum wczytywany, więc adres bez własnego
   koloru dziedziczył kolor linku rodzica i na hover robił się niebieski.
   ───────────────────────────────────────────────────────────── */

.frame-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 12px;
	border-bottom: 1px solid #dad6cc;
	background: #e7e4dc;
}

.frame-bar i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #c3bdaf;
	display: block;
}

.frame-url {
	margin-left: 8px;
	flex: 1;
	background: #fff;
	border: 1px solid #dad6cc;
	border-radius: 5px;
	padding: 3px 9px;
	font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 10.5px;
	/* Kolor jawnie, nie z dziedziczenia — karta archiwum jest w całości
	   jednym <a>, więc a:hover rodzica przebiłby „color: inherit". */
	color: var(--katalog-szary, #6E6A61);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════
   Miejsca reklamowe
   ───────────────────────────────────────────────────────────────
   Rejestruje je moduł 25-katalog-reklamy.php. Puste miejsce nie
   renderuje żadnego znacznika, więc reguły niżej nigdy nie dotyczą
   pustej ramki — jak nic nie ma, nie ma czego stylować.

   TUTAJ, a nie w katalog-archive.css: miejsce „pod treścią realizacji"
   jest na widoku pojedynczej realizacji, który tamtego arkusza nie
   wczytuje. Ta sama pułapka co przy ramce adresu wyżej.
   ═══════════════════════════════════════════════════════════════ */

.katalog-reklama {
	/* Rezerwa wysokości przeciw przeskokowi układu (CLS). Domyślnie zero —
	   statyczny baner z podanymi wymiarami niczego nie przesuwa. Ustaw, gdy
	   wrzucasz skrypt sieci reklamowej, który dogrywa się po renderze. */
	min-height: var(--katalog-reklama-min-h, 0);
}

.katalog-reklama[hidden] {
	display: none;
}

.katalog-reklama__etykieta {
	margin: 0 0 0.64rem;
	font-size: 0.992rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--katalog-szary, #6E6A61);
}

.katalog-reklama__tytul {
	margin: 0 0 0.96rem;
	font-size: 1.088rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Dotyczy KAŻDEGO obrazka w miejscu reklamowym, także wstawionego zwykłym
   widgetem obrazka albo blokiem — nie tylko naszym banerem. width:auto jest
   tu po to, żeby przebić regułę motywu nadrzędnego rozciągającą obrazki
   w widgetach; bez niej samo max-width przegrywa. */
.katalog-reklama__tresc img {
	width: auto;
	max-width: 100%;
	height: auto;
	display: block;
	margin-inline: auto;
}

/* ── Pas poziomy ────────────────────────────────────────────────
   Pod filtrami, pod listą i pod treścią realizacji. Bez ramki i tła:
   baner ma swoją grafikę, a pudełko wokół niego robi z reklamy
   drugi panel i zabiera uwagę kartom. */
.katalog-reklama--pas {
	margin: 2.56rem 0 3.2rem;
}

.katalog-reklama--pas .katalog-reklama__tresc {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: center;
	justify-content: center;
}

/* ── Kafel w siatce ─────────────────────────────────────────────
   Dziecko .arch-grid, więc łapie kolumnę siatki jak zwykła karta.
   Tutaj ramka jest na miejscu: bez niej reklama udaje realizację. */
.katalog-reklama--kafel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem;
	border: 1px dashed var(--border, #e5e2db);
	border-radius: 10px;
	background: var(--katalog-tlo-panel, #fff);
	text-align: center;
}

.katalog-reklama--kafel .katalog-reklama__etykieta {
	align-self: flex-start;
}

.katalog-reklama--kafel .katalog-reklama__tresc {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	width: 100%;
	margin: auto 0;
}

/* ─────────────────────────────────────────────────────────────
   Własne widgety (moduł 34)
   ───────────────────────────────────────────────────────────── */

.katalog-baner__link {
	display: block;
	text-decoration: none;
}

/* Pas reklamowy to flexbox — bez tego link kurczy się do szerokości obrazka
   i rozciąganie nie ma od czego liczyć stu procent. */
.katalog-baner__link--pelna {
	flex: 1 1 100%;
	width: 100%;
}

/* Baner zostaje w swoich wymiarach. Było tu width:100%, przez co plik 728 px
   rozdmuchiwał się do szerokości miejsca (1256 px na pasie pod treścią) —
   rozmycie, którego nie da się odwrócić, bo brakujących pikseli nikt nie
   dorobi. Rozciąganie jest teraz opcją widgetu, nie domyślnym zachowaniem.

   width:auto jawnie, a nie przez pominięcie: motyw nadrzędny bywa, że ustawia
   szerokość obrazkom w widgetach i wtedy samo max-width nic nie daje. */
.katalog-baner__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	/* Wąski baner w szerokim miejscu staje na środku, a nie przy lewej. */
	margin-inline: auto;
	border-radius: 8px;
}

/* Opcja „Rozciągnij na szerokość miejsca" w widgecie.

   Dwa selektory, a nie jeden: reguła obronna wyżej celuje w
   `.katalog-reklama__tresc img` (0,1,1), więc samo `.katalog-baner__img--pelna`
   (0,1,0) przegrywało z nią mimo późniejszej pozycji w pliku — przełącznik
   w widgecie nie robił NIC i wyglądało to na zepsuty zapis ustawień.
   `img.katalog-baner__img--pelna` z prefiksem kontenera daje (0,2,1). */
.katalog-reklama__tresc img.katalog-baner__img--pelna,
.katalog-baner__img--pelna {
	width: 100%;
}

.katalog-baner__podpis {
	margin: 0.8rem 0 0;
	font-size: 1.2rem;
	line-height: 1.45;
	color: var(--katalog-szary, #6E6A61);
}

/* Widoczny wyłącznie dla zalogowanego administratora — patrz moduł 34. */
.katalog-widget-blad {
	margin: 0;
	padding: 0.96rem 1.2rem;
	font-size: 1.248rem;
	line-height: 1.45;
	color: #8a4b00;
	background: #fff7e6;
	border: 1px dashed #e0b070;
	border-radius: 6px;
}

/* ── Katalog: Terminy ───────────────────────────────────────── */

.katalog-terminy {
	margin: 0;
	padding: 0;
	list-style: none;
}

.katalog-terminy__item {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	padding: 0.608rem 0;
	border-bottom: 1px solid var(--border, #e5e2db);
	font-size: 1.36rem;
}

.katalog-terminy__item:last-child { border-bottom: 0; }

.katalog-terminy__item a {
	flex: 1;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.katalog-terminy__item a:hover { color: var(--katalog-akcent, #1565c0); }

.katalog-terminy__item--biezacy a {
	font-weight: 700;
	color: var(--katalog-akcent, #1565c0);
}

.katalog-terminy__licznik {
	flex-shrink: 0;
	font-size: 1.12rem;
	font-variant-numeric: tabular-nums;
	color: var(--katalog-szary, #6E6A61);
}

/* ── Katalog: Realizacje ────────────────────────────────────── */

.katalog-mini {
	margin: 0;
	padding: 0;
	list-style: none;
}

.katalog-mini__item + .katalog-mini__item { margin-top: 1.12rem; }

.katalog-mini__link {
	display: flex;
	gap: 1.12rem;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.katalog-mini__thumb {
	flex-shrink: 0;
	width: 56px;
	height: 42px;
	overflow: hidden;
	border-radius: 5px;
	border: 1px solid var(--border, #e5e2db);
}

.katalog-mini__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;   /* zrzuty są wysokie — liczy się górna część */
	display: block;
}

.katalog-mini__tekst { min-width: 0; }

.katalog-mini__tytul {
	display: block;
	font-size: 1.312rem;
	font-weight: 600;
	line-height: 1.3;
}

.katalog-mini__link:hover .katalog-mini__tytul { color: var(--katalog-akcent, #1565c0); }

.katalog-mini__meta {
	display: block;
	margin-top: 0.24rem;
	font-size: 1.088rem;
	color: var(--katalog-szary, #6E6A61);
}

/* ── Katalog: Statystyki ────────────────────────────────────── */

.katalog-staty-widget { margin: 0; }

.katalog-staty-widget__rzad {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.2rem;
	padding: 0.64rem 0;
	border-bottom: 1px solid var(--border, #e5e2db);
}

.katalog-staty-widget__rzad:last-child { border-bottom: 0; }

.katalog-staty-widget dt {
	font-size: 1.248rem;
	color: var(--katalog-szary, #6E6A61);
}

.katalog-staty-widget dd {
	margin: 0;
	font-size: 1.52rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────
   Elementy Bricksa (moduł 50)
   ─────────────────────────────────────────────────────────────
   Widoczne WYŁĄCZNIE w edytorze Bricksa — na froncie element bez
   rdzenia nie wypisuje nic. */

.katalog-bricks-info {
	padding: 1.28rem 1.6rem;
	border: 1px dashed var(--border, #e5e2db);
	border-radius: 8px;
	background: var(--katalog-tlo-panel, #fff);
	color: var(--katalog-szary, #6E6A61);
	font-size: 1.36rem;
	line-height: 1.5;
}


/* ─────────────────────────────────────────────────────────────
   Zgodność z motywami innymi niż Blocksy (Bricks)
   ─────────────────────────────────────────────────────────────
   Arkusze katalogu liczą szerokość ze zmiennych Blocksy. Ten plik
   ładuje się wyłącznie poza motywem WPKatalog, więc tu dajemy im
   wartości — pod Blocksy obowiązują dalej te z Customizera.
   ───────────────────────────────────────────────────────────── */
:root {
	--theme-container-width: calc(100% - 3.2rem);
	--theme-block-max-width: 1290px;
}

/* Szerokość jak kontener Bricksa (Toolkit: --tbt-kontener), a treść
   równo z krawędziami nagłówka — boczny padding katalogu (1.6rem) dokładamy
   do szerokości, zamiast odejmować go od treści. */
.katalog-bricks .archive-katalog,
.katalog-bricks .katalog-single {
	max-width: calc(var(--tbt-kontener, 1290px) + 3.2rem);
}

.katalog-bricks .katalog-body {
	width: 100%;
	max-width: none;
}

/* Pionowe odstępy, które pod Blocksy dawał kontener .ct-container-full. */
.katalog-bricks--widok .archive-katalog {
	padding-block: 4rem 6.4rem;
}

.katalog-bricks-info {
	padding: 1.6rem 2rem;
	border: 1px dashed #c9c4b8;
	border-radius: 8px;
	background: #faf8f4;
	color: #6E6A61;
	font-size: 14px;
}