/* ============================================================
   Archive: katalog  |  Blocksy theme – uzupełnienie design system
   Dołącz przez functions.php (tylko na is_post_type_archive('katalog')):
     wp_enqueue_style('katalog-archive',
       get_stylesheet_directory_uri() . '/katalog-archive.css', [], '1.0');
   ============================================================ */



/* ── Wrapper archiwum ───────────────────────────────────────── */


.crumbs{color: var(--katalog-szary, #6E6A61);}
.arch-card__dot{
	width:14px;height:14px;border-radius:50%;
	border:1px solid rgba(0,0,0,.12);
}
.arch-card__dot + .arch-card__dot{margin-left:-5px}


.img-hero-archiwum-katalog{border: 1px solid #e5e2db;
  border-radius: 10px;}

.arch-card__colors {
    display: inline-flex;
  margin-left: auto;

}

.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

.archive-katalog {
	max-width: 1290px;
	margin-inline: auto;
	padding-inline: 1rem;
}

/* ── Hero ───────────────────────────────────────────────────── */
.arch-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
	margin-bottom: 1.5rem;
}

.arch-stats .arch-stat:not(:last-of-type){padding-right: 20px;
  border-right: 1px solid #dad6cc}

@media (max-width: 900px) {
	.arch-hero { grid-template-columns: 1fr; }
}

/* ── Układy hero ────────────────────────────────────────────────
   Klucz układu pochodzi z panelu (Wygląd → Katalog: ustawienia →
   Nagłówek archiwum → Układ). Markup jest wspólny, patrz
   template-parts/katalog/hero-archiwum.php.
   ───────────────────────────────────────────────────────────── */

/* B — wyśrodkowany, bez zdjęcia. Jedna kolumna i wszystko na osi. */
.arch-hero--b {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
	gap: 0;
}

.arch-hero--b .arch-hero__left {
	max-width: 62ch;
}

.arch-hero--b .arch-hero__desc {
	margin-inline: auto;
}

.arch-hero--b .actions {
	justify-content: center;
}

.arch-hero--b .arch-stats {
	justify-content: center;
}

/* C — statystyki zamiast zdjęcia, w prawej kolumnie. */
.arch-hero--c .arch-stats--kafle {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .9rem;
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.arch-stats--kafle .arch-stat {
	background: var(--katalog-tlo-panel, #fff);
	border: 1px solid var(--border, #e5e2db);
	border-radius: 10px;
	padding: 1.15rem 1.25rem;
	gap: .35rem;
}

/* Neutralizacja separatora z paska: tam kreska rozdziela liczby, tutaj każdy
   kafel ma własną ramkę, więc pionowa krecha w środku byłaby dublem. */
.arch-stats--kafle .arch-stat:not(:last-of-type) {
	padding-right: 1.25rem;
	border-right: 1px solid var(--border, #e5e2db);
}

.arch-stats--kafle .arch-stat--mocny:not(:last-of-type) {
	border-right-color: var(--katalog-akcent, #1565c0);
}

.arch-stats--kafle .arch-stat b {
	font-size: 2rem;
}

/* Pierwsza liczba na akcencie — cztery równe kafle czytają się jak tabela,
   a to ma być nagłówek strony. */
.arch-stats--kafle .arch-stat--mocny {
	background: var(--katalog-akcent, #1565c0);
	border-color: var(--katalog-akcent, #1565c0);
}

.arch-stats--kafle .arch-stat--mocny b {
	color: var(--katalog-akcent-tekst, #fff);
}

.arch-stats--kafle .arch-stat--mocny span {
	color: var(--katalog-akcent-tekst, #fff);
	opacity: .85;
}

@media (max-width: 560px) {
	.arch-hero--c .arch-stats--kafle { grid-template-columns: 1fr; }
}

.arch-hero__title {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	margin: .75rem 0 1rem;
	letter-spacing: -.02em;
}

.arch-hero__title em {
	font-style: normal;
	color: var(--katalog-akcent, #1565c0);
}

.arch-hero__desc {
	font-size: .95rem;
	line-height: 1.65;
	color: var(--katalog-szary, #6E6A61);
	max-width: 48ch;
	margin: 0;
}

/* ── Przyciski hero (fallback jeśli design system nie załadowany) */
.arch-hero .actions {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.arch-hero .actions a {
	display: inline-flex;
	align-items: center;
	padding: .6em 1.3em;
	border-radius: 6px;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .15s;
}
.arch-hero .actions a:hover { opacity: .82; }

.arch-hero .actions .btn {
	background: var(--katalog-akcent, #1565c0);
	color: var(--katalog-akcent-tekst, #fff) !important;
}

.arch-hero .actions .btn.ghost {
	background: transparent;
	color: var(--ink, #1a1a1a) !important;
	border: 1.5px solid #ddd;
}

/* ── Statystyki ─────────────────────────────────────────────── */
.arch-stats {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border, #e5e2db);
}

.arch-stat {
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.arch-stat b {
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
}

.arch-stat span {
	font-size: .65rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--katalog-szary, #6E6A61);
}

/* ── Filtry ─────────────────────────────────────────────────── */
/* ── Nagłówek archiwum termu ────────────────────────────────────
   Odpowiednik .arch-hero dla archiwów taksonomii. Brakowało mu
   dolnego marginesu, przez co pasek filtrów dotykał statystyk —
   na stronie startowej odstęp dawał margin-bottom hero, a tutaj
   nie miało go co dać. Ta sama wartość, żeby oba widoki oddychały
   tak samo. */
.arch-term-header {
	margin-bottom: 1.5rem;
}

.arch-term-header__title {
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: .5rem 0 .75rem;
}

.arch-term-header__desc {
	font-size: .95rem;
	line-height: 1.65;
	/* Bez ograniczenia szerokości — opis termu idzie przez całą kolumnę treści.
	   Stało tu max-width: 70ch (miara czytelnego wiersza), zdjęte na życzenie:
	   opisy archiwów są krótkie i mają wypełniać nagłówek, a nie stać
	   wąską kolumną obok pustego miejsca. */
	margin: 0;
}

.arch-filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
	padding: .85rem 0;
	border-top: 1px solid var(--border, #e5e2db);
	border-bottom: 1px solid var(--border, #e5e2db);
	margin-bottom: 2rem;
}

/* Kontener inputs: poziomy flex — wymagamy !important żeby wygrać z Blocksy */
.arch-filters__inputs {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: .5rem;
	flex-wrap: wrap;
}

/* Wyszukiwarka – jawna szerokość beats Blocksy width:100% */
.arch-filters__inputs .arch-search {
	width: 200px !important;
	min-width: 0;
	flex-shrink: 1;
	height: 36px;
	padding: 0 .85rem !important;
	border: 1px solid var(--border, #e5e2db) !important;
	border-radius: 6px !important;
	background: var(--surface, #fff) !important;
	color: var(--ink, #1a1a1a);
	font-size: .82rem;
	box-shadow: none !important;
	outline: none;
	transition: border-color .15s;
	box-sizing: border-box;
}
.arch-filters__inputs .arch-search:focus {
	border-color: var(--accent, #c0392b) !important;
}

/* Select – jawna szerokość i wygląd niezależny od Blocksy */
.arch-filters__inputs .arch-select {
	width: auto !important;
	min-width: 130px;
	max-width: 160px;
	height: 36px;
	padding: 0 2rem 0 .75rem !important;
	border: 1px solid var(--border, #e5e2db) !important;
	border-radius: 6px !important;
	background-color: var(--surface, #fff) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right .7rem center !important;
	background-size: 9px !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	color: var(--ink, #1a1a1a);
	font-size: .8rem;
	cursor: pointer;
	outline: none;
	box-shadow: none !important;
	transition: border-color .15s;
	box-sizing: border-box;
}
.arch-filters__inputs .arch-select:focus {
	border-color: var(--accent, #c0392b) !important;
}

/* ── Reset filtrów ───────────────────────────────────────────
   Celowo BEZ ramki i tła w stanie spoczynku: stoi na końcu rzędu siedmiu
   obramowanych kontrolek i z ramką czytałby się jak ósmy filtr, a nie jak
   akcja. Ramka i tło pojawiają się dopiero pod kursorem i przy focusie.

   Stan wyszarzony ma 3.43:1 na tle strony — formalnie kontrolki nieaktywne
   nie podlegają progowi, ale „nie podlega" nie znaczy „ma być nieczytelne".
   Aktywny jest wyraźnie ciemniejszy (5.16:1), więc różnica stanów widać. */

.arch-filters__inputs .arch-reset {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	height: 36px;
	padding: 0 .7rem !important;
	border: 1px solid transparent !important;
	border-radius: 6px !important;
	background: none !important;
	color: var(--katalog-szary, #6E6A61);
	font-size: .8rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	box-shadow: none !important;
	outline: none;
	transition: color .15s, border-color .15s, background-color .15s;
	box-sizing: border-box;
}

.arch-filters__inputs .arch-reset:hover,
.arch-filters__inputs .arch-reset:focus-visible {
	color: var(--katalog-akcent, #1565c0);
	border-color: var(--border, #e5e2db) !important;
	background: var(--surface, #fff) !important;
}

.arch-filters__inputs .arch-reset:focus-visible {
	border-color: var(--accent, #c0392b) !important;
}

.arch-filters__inputs .arch-reset[disabled] {
	color: #8a8780;
	cursor: default;
	/* Bez opacity: przezroczysty tekst zmienia kontrast wraz z tłem,
	   a tło tutaj ustawia Customizer i nie wiadomo, jakie będzie. */
	opacity: 1;
}

.arch-filters__inputs .arch-reset[disabled]:hover {
	color: #8a8780;
	border-color: transparent !important;
	background: none !important;
}

.arch-reset__x {
	font-size: 1.15em;
	line-height: 0;
	/* Krzyżyk optycznie siada wyżej niż tekst — jeden piksel w dół wyrównuje
	   go do linii pisma. */
	transform: translateY(1px);
}

.arch-filters__count {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--katalog-szary, #6E6A61);
	white-space: nowrap;
}

/* ── Grid kart ──────────────────────────────────────────────── */
.arch-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem 3rem;
}

@media (max-width: 900px) {
	.arch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.arch-grid { grid-template-columns: 1fr; }
}

/* ── Link wrapping card ─────────────────────────────────────── */
.arch-card-link {
	text-decoration: none !important;
	color: inherit;
	display: block;
}

/* ── Karta ──────────────────────────────────────────────────── */
.arch-card {
	border-radius: 10px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
	height: 100%;
}

.arch-card-link:hover .arch-card {
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(0,0,0,.13);
}
.arch-card__title {
	color:#15130F!important;
}
.arch-card__title em{
	color: var(--katalog-akcent, #1565c0) !important;
}



/* ── Preview (mockup w karcie) ──────────────────────────────── */
.arch-card__preview {
	border: 1px solid #e5e2db;
	border-radius:10px;
}

/* Mała wersja frame-bar dla kart */
.frame-bar.sm {
	padding: .4rem .65rem;
	gap: .35rem;
}
.frame-bar.sm i {
	width: 8px;
	height: 8px;
}
.frame-bar.sm .frame-url {
	font-size: .65rem;
}

/* Proporcje i punkt kadrowania z panelu (Wygląd → Katalog: ustawienia → Karty).
   Było tu height:500px — dobre dla zrzutów całych stron, ale robiące z każdego
   zdjęcia 16:9 pionowy słupek. Sztywna wysokość ma jeszcze jedną wadę: nie
   skaluje się z szerokością kolumny, więc kadr zmieniał proporcje wraz z oknem.
   Wartości zapasowe w var() odpowiadają dokładnie temu, co było wcześniej. */
.arch-card__screen {
	overflow: hidden;
	aspect-ratio: var(--katalog-karta-proporcje, 3 / 4);
	border-radius:10px;
}
.arch-card__screen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--katalog-karta-kadr, top);
	transition: transform .5s ease;
}
/*.arch-card-link:hover .arch-card__screen{
	transform: translateY(-4%);
}*/

.arch-card__no-img {
	/* Te same proporcje co zdjęcie — inaczej karta bez zrzutu jest niższa
	   od sąsiadek i wiersz siatki się rozjeżdża. Przy „naturalnych"
	   proporcjach zastępnik nie ma od czego liczyć wysokości, więc dostaje
	   minimalną. */
	aspect-ratio: var(--katalog-karta-proporcje, 3 / 4);
	min-height: 120px;
	/* Przyciemnienie, nie konkretny kolor — dzięki temu zastępnik odcina się
	   od KAŻDEGO tła z Customizera, jasnego i ciemnego. Wcześniej był tu
	   kremowy #f5f3ee, który na białym tle znikał zupełnie. */
	background: rgba(0, 0, 0, .045);
}

/* ── Stopka karty ───────────────────────────────────────────── */
.arch-card__foot {
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.arch-card__row {
	display: flex;
	align-items: baseline;
	gap: .4rem;
}

.arch-card__row--top {
	justify-content: space-between;
}

.arch-card__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.arch-card__year {
	font-size: .72rem;
	color: var(--katalog-szary, #6E6A61);
	flex-shrink: 0;
}

.arch-card__meta {
	font-size: 13.5px;
line-height: 20.25px;
	color: var(--katalog-szary, #6E6A61);
	
}



.arch-card__sep {
	font-size: .75rem;
	/* Było var(--border, #ccc) — 1.45:1 na kremowym tle, kropka praktycznie
	   niewidoczna. Separator ma być cichszy od tekstu (4.86:1), ale widoczny. */
	color: #8a8175;
}

.arch-card__row--chips {
	margin-top: .25rem;
	flex-wrap: wrap;
	gap: .3rem;
	align-items: center;
}


.chip{
	text-transform:uppercase;
	font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid #c3bdaf;
  border-radius: 20px;
  padding: 3px 8px;
	color: var(--katalog-szary, #6E6A61);
}

/* ── Chip akcentowany (PSI) ─────────────────────────────────── */
.chip.accent {
  border-color: transparent;
  background: #f7e3e4;
  color: #c4142b;
	font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 3px 8px;
}

/* ── Pusta lista ────────────────────────────────────────────── */
.arch-empty {
	text-align: center;
	color: var(--katalog-szary, #6E6A61);
	font-size: .9rem;
	padding: 3rem 0;
}

/* ── Responsive filtry ──────────────────────────────────────── */
@media (max-width: 700px) {
	.arch-filters {
		flex-direction: column;
		align-items: flex-start;
	}
	.arch-filters__inputs .arch-search {
		width: 100% !important;
		max-width: 100% !important;
	}
	.arch-filters__inputs .arch-select {
		min-width: 0;
		flex: 1 1 calc(50% - .25rem);
		max-width: none;
	}
	.arch-filters__count {
		align-self: flex-end;
	}
}
/* ═══════════════════════════════════════════════════════════════
   Pasek akcji pod opisem termu
   ═══════════════════════════════════════════════════════════════ */

.term-pasek {
	margin: 1.4rem 0 1.75rem;
}

.term-pasek__btns {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
}

.term-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 20px;
	border-radius: 8px;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Współpraca — akcja pierwsza, pełny kolor marki. */
.term-btn--primary {
	background: var(--katalog-akcent, #1565c0);
	color: var(--katalog-akcent-tekst, #fff);
	border: 1.5px solid var(--katalog-akcent, #1565c0);
}

.term-btn--primary:hover,
.term-btn--primary:focus-visible {
	background: var(--katalog-akcent-hover, #114f99);
	border-color: var(--katalog-akcent-hover, #114f99);
	color: var(--katalog-akcent-tekst, #fff);
}

/* Partnerski — akcja druga, sam obrys. */
.term-btn--outline {
	background: transparent;
	color: #15130f;
	border: 1.5px solid #d8d3c8;
}

.term-btn--outline:hover,
.term-btn--outline:focus-visible {
	border-color: var(--katalog-akcent, #1565c0);
	color: var(--katalog-akcent, #1565c0);
}

.term-pasek__ujawnienie {
	margin: .7rem 0 0;
	font-size: .78rem;
	line-height: 1.5;
	/* Było #7c776c — 4.02:1 na kremowym tle. */
	color: var(--katalog-szary, #6E6A61);
	max-width: 62ch;
}

@media (max-width: 540px) {
	.term-pasek__btns { flex-direction: column; align-items: stretch; }
	.term-btn { justify-content: center; }
}

/* ── Chip pola z progami ─────────────────────────────────────
   Kolor niesie ocenę, a nie dekorację: dobry / średni / zły. Progi deklaruje
   samo pole w rejestrze (klucz 'progi'), więc ten sam trzystopniowy kod działa
   dla PageSpeed (90/50, jak w PageSpeed Insights), oceny wtyczki (4,5/3,5)
   i czegokolwiek jeszcze. Wcześniej .chip.accent był zawsze czerwony —
   landing z wynikiem 98 dostawał ten sam alarmowy kolor co ten z 27.
   Wszystkie trzy pary przechodzą WCAG AA (5.29 / 5.08 / 4.90:1). */

.chip.accent.pole--dobry {
	background: #dff3e6;
	color: #15703f;
}

.chip.accent.pole--sredni {
	background: #faecd2;
	color: #8a5a00;
}

.chip.accent.pole--zly {
	background: #f7e3e4;
	color: #c4142b;
}

/* Miejsca reklamowe — w style.css, bo jedno z nich jest na pojedynczej
   realizacji, a tego arkusza tamten widok nie wczytuje. */

/* ═══════════════════════════════════════════════════════════════
   Spis termów taksonomii (Strona z szablonem „Katalog — spis termów")
   ═══════════════════════════════════════════════════════════════ */

.katalog-spis-strona .katalog-strona-wstep {
	margin-bottom: 2rem;
}

.katalog-spis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.katalog-spis__item {
	margin: 0;
}

.katalog-spis__link {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	height: 100%;
	padding: .9rem 1rem;
	border: 1px solid var(--border, #e5e2db);
	border-radius: 8px;
	background: var(--surface, #fff);
	color: inherit;
	text-decoration: none;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}

a.katalog-spis__link:hover,
a.katalog-spis__link:focus-visible {
	border-color: var(--katalog-akcent, #1565c0);
	box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
}

/* Term bez adresu archiwum: ten sam kafel, ale bez obietnicy kliknięcia. */
.katalog-spis__link--martwy {
	cursor: default;
}

.katalog-spis__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
}

.katalog-spis__nazwa {
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.3;
}

/* Liczba wpisów to jedyna rzecz odróżniająca spis od listy linków — mówi,
   gdzie w ogóle warto kliknąć. Cichsza od nazwy, ale czytelna: 5.16:1. */
.katalog-spis__ile {
	flex-shrink: 0;
	font-size: .78rem;
	color: var(--katalog-szary, #6E6A61);
}

.katalog-spis__opis {
	font-size: .82rem;
	line-height: 1.5;
	color: var(--katalog-szary, #6E6A61);
}

.katalog-spis-pusty {
	padding: 1rem 1.1rem;
	border: 1px dashed var(--border, #e5e2db);
	border-radius: 8px;
	color: var(--katalog-szary, #6E6A61);
	font-size: .9rem;
}

@media (max-width: 900px) {
	.katalog-spis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.katalog-spis { grid-template-columns: 1fr; }
}