/*
Theme Name: WPKatalog
Theme URI: https://trejka.com
Template: blocksy
Author: TREJKA
Author URI: https://trejka.com
Description: Motyw potomny Blocksy pod katalog z filtrowaniem. Taksonomie są odkrywane z WordPressa (ACF, CPT UI, kod), a pola deklaruje jeden rejestr — ten sam motyw obsługuje katalog realizacji, stron i wtyczek bez edycji szablonów. Gotowe konfiguracje w inc/konfiguracja/. Kolory, nagłówek, panel CTA, miejsca reklamowe i mapa taksonomii edytowalne w Wygląd → Katalog: ustawienia. Pola wpisów wymagają ACF.
Tags: portfolio, one-column, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, theme-options
Version: 2.9.0
Requires at least: 6.0
Requires PHP: 7.4
*/

/* ─────────────────────────────────────────────────────────────
   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 .4rem;
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--katalog-szary, #6E6A61);
}

.katalog-reklama__tytul {
	margin: 0 0 .6rem;
	font-size: .68rem;
	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: 1.6rem 0 2rem;
}

.katalog-reklama--pas .katalog-reklama__tresc {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	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: 1.25rem;
	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: .75rem;
	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: .5rem 0 0;
	font-size: .75rem;
	line-height: 1.45;
	color: var(--katalog-szary, #6E6A61);
}

/* Widoczny wyłącznie dla zalogowanego administratora — patrz moduł 34. */
.katalog-widget-blad {
	margin: 0;
	padding: .6rem .75rem;
	font-size: .78rem;
	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: .5rem;
	padding: .38rem 0;
	border-bottom: 1px solid var(--border, #e5e2db);
	font-size: .85rem;
}

.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: .7rem;
	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: .7rem; }

.katalog-mini__link {
	display: flex;
	gap: .7rem;
	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: .82rem;
	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: .15rem;
	font-size: .68rem;
	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: .75rem;
	padding: .4rem 0;
	border-bottom: 1px solid var(--border, #e5e2db);
}

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

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

.katalog-staty-widget dd {
	margin: 0;
	font-size: .95rem;
	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: .8rem 1rem;
	border: 1px dashed var(--border, #e5e2db);
	border-radius: 8px;
	background: var(--katalog-tlo-panel, #fff);
	color: var(--katalog-szary, #6E6A61);
	font-size: .85rem;
	line-height: 1.5;
}