/* ============================================================
   Single: katalog  |  Blocksy theme
   Dołącz przez functions.php:
   wp_enqueue_style('katalog-single', get_stylesheet_directory_uri() . '/css/katalog-single.css');
   ============================================================ */

/* ── Reset / tokens ─────────────────────────────────────────── */
.katalog-single {
	/* Aliasy tokenów globalnych ze style.css — patrz komentarz tam.
	   Puste tło = to z Customizera. */
	--k-bg:       var(--katalog-tlo, transparent);
	--k-panel-bg: var(--katalog-tlo-panel, #ffffff);
	--k-border:   #e5e2db;
	--k-text:     #1a1a1a;
	--k-muted:    #6E6A61;   /* było #888880 — 3.2:1, poniżej progu */
	--k-tag-bg:   #f0ede7;
	--k-tag-text: #444;
	--k-radius:   10px;
	--k-font:     inherit;

	background: var(--k-bg);
	color: var(--k-text);
	padding: 2rem 1rem 4rem;
	margin-inline: auto;
	font-family: var(--k-font);

	
}

.katalog-content-un{margin-top:30px;}


.link-button{
	display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--katalog-akcent, #1565c0);
  color: var(--katalog-akcent-tekst, #fff);
  border: 0;
  border-radius: 7px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}


.katalog-single,
.katalog-body {
  margin-inline: auto;
  width: var(--theme-container-width);
  max-width: 1290px;
}

/* Podgląd na pełną wysokość — bez wewnętrznego scrolla.
   Wcześniej: max-height 70vh + overflow auto. Zagnieżdżone przewijanie jest
   nieprzyjemne na gładziku i na telefonie, a przy okazji ukrywało, jak długi
   jest prezentowany landing. Teraz zrzut idzie w normalnym potoku strony,
   a prawa kolumna (sticky) towarzyszy mu przez całe przewijanie. */
.preview-body {
  overflow: visible;
}

.preview-body img {
  display: block;
  width: 100%;
  height: auto;
}

.preview {
  border: 1px solid #c3bdaf;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: rgba(21, 19, 15, 0.06) 0px 1px 2px 0px, rgba(21, 19, 15, 0.18) 0px 8px 24px -12px
}

/* .frame-bar / .frame-url — w style.css, bo ramki używa i archiwum. */

/* ── Breadcrumb ─────────────────────────────────────────────── */
.katalog-breadcrumb {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--k-muted);
	margin-bottom: 1.25rem;
}

.katalog-breadcrumb a {
	color: var(--katalog-akcent, #1565c0);
	text-decoration: none;
}
.katalog-breadcrumb a:hover { text-decoration: underline; }

.katalog-breadcrumb__sep { color: var(--k-muted); }
.katalog-breadcrumb__current { color: var(--k-muted); }

/* ── Header ─────────────────────────────────────────────────── */
/* Nagłówek ma teraz jedną kolumnę — przycisk „Zobacz stronę" przeniósł się
   do prawej kolumny (.katalog-lead), więc rezerwowanie 150 px zostawiało
   pustą szparę po prawej. */
.katalog-header {
	display: block;
	margin-bottom: 1.75rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #dad6cc;
}

.katalog-header__title {
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 700;
	margin: 0 0 .7rem;
	line-height: 1.15;
}

.katalog-header__subtitle {
	font-size: .9rem;
	color: var(--k-muted);
	margin: 0;
	max-width: 52ch;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.katalog-btn {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	padding: .55em 1.15em;
	border-radius: 6px;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .15s;
	cursor: pointer;
}
.katalog-btn:hover { opacity: .82; }

.katalog-btn--cta {
	background: var(--katalog-akcent, #1565c0);
	color: var(--katalog-akcent-tekst, #fff);
	border: none;
	padding: .65em 1.3em;
	font-size: .84rem;
	border-radius: 6px;
	margin-top: .5rem;
}

/* ── Body (two-column) ──────────────────────────────────────── */
.katalog-body {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 1.5rem;
	align-items: start;
}

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

/* ── Sidebar / panels ───────────────────────────────────────── */
.katalog-sidebar {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	position: sticky;
  top: 60px;
}

.katalog-panel {
	background: var(--k-panel-bg);
	border: 1px solid var(--k-border);
	border-radius: var(--k-radius);
	padding: 1rem 1.1rem;
}

.katalog-panel__heading {
	color:#1A1A1A;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0 0 .85rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--k-border);
}

/* ── Spec table ─────────────────────────────────────────────── */
.katalog-spec {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.katalog-spec__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	font-size: .82rem;
	padding: .25rem 0;
	border-bottom: 1px solid var(--k-border);
}
.katalog-spec__row:last-child { border-bottom: none; }

.katalog-spec__row dt {
	color: var(--k-muted);
	font-weight: 400;
	flex-shrink: 0;
}

.katalog-spec__row dd {
	margin: 0;
	font-weight: 500;
	text-align: right;
}

/* ── Wiersz z wieloma termami ────────────────────────────────
   Lista po przecinku wyrównana do prawej działa do trzech pozycji. Przy
   siedmiu daje poszarpaną lewą krawędź (oko nie ma od czego zacząć kolejnej
   linii), etykietę wiszącą w połowie wysokości bloku przez align-items:center
   i ścianę podkreśleń, w której przecinki zlewają się z kreskami linków.
   Powyżej progu wiersz idzie więc na pełną szerokość, a wartości zamieniają
   się w plakietki. Decyzję podejmuje PHP — tu jest tylko wygląd. */

.katalog-spec__row--szeroki {
	flex-direction: column;
	align-items: stretch;
	gap: .35rem;
}

.katalog-spec__row--szeroki dd {
	text-align: left;
}

.katalog-spec__tagi {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin: 0;
}

.katalog-spec__tag {
	display: inline-block;
	/* Nazwa termu nie ma prawa pęknąć w środku: „Wtyczka nr 3" złamana po
	   „Wtyczka" czyta się jak dwie różne wtyczki. */
	white-space: nowrap;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1;
	padding: .3rem .5rem;
	border-radius: 5px;
	background: var(--k-tag-bg);
	color: var(--k-tag-text);
	text-decoration: none;
	border: none;
	transition: background-color .15s, color .15s;
}

a.katalog-spec__tag:hover,
a.katalog-spec__tag:focus-visible {
	background: var(--katalog-akcent, #1565c0);
	color: #fff;
}

/* „+13" — kreskowana ramka zamiast wypełnienia, żeby nie udawał termu.
   Widoczny dopiero, gdy JavaScript schowa nadmiar; bez skryptu widać
   komplet plakietek i przycisk jest niepotrzebny. */
.katalog-spec__wiecej {
	display: inline-block;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1;
	padding: .3rem .5rem;
	border-radius: 5px;
	background: none;
	color: var(--k-muted);
	border: 1px dashed var(--k-border);
	cursor: pointer;
	font-family: inherit;
	transition: color .15s, border-color .15s;
}

.katalog-spec__wiecej:hover,
.katalog-spec__wiecej:focus-visible {
	color: var(--katalog-akcent, #1565c0);
	border-color: currentColor;
	border-style: solid;
}

/* ── Color swatches ─────────────────────────────────────────── */
.katalog-spec__colors {
	display: flex;
	gap: .35rem;
	align-items: center;
}

.katalog-color-swatch {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 3px;
	border: 1px solid rgba(0,0,0,.12);
}

/* ── Plugin tags ─────────────────────────────────────────────── */
.katalog-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.katalog-tag {
	display: inline-block;
	background: var(--k-tag-bg);
	color: var(--k-tag-text);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .3em .75em;
	border-radius: 4px;
	border: 1px solid var(--k-border);
}

/* ── CTA panel ───────────────────────────────────────────────── */
.katalog-panel--cta .katalog-panel__heading { color: #1a1a1a; }

.katalog-cta__text {
	font-size: .85rem;
	line-height: 1.55;
	/* Było var(--k-accent) — czerwień #c0392b z poprzedniej palety. Zwykły
	   tekst opisowy nie powinien krzyczeć kolorem sygnalizacyjnym. */
	color: var(--k-muted);
	margin: 0 0 .25rem;
}

/* ── Footer / punkt wyjścia ──────────────────────────────────── */
.katalog-footer {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--k-border);
}

.katalog-footer__label {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--k-muted);
	margin: 0 0 .6rem;
}

.katalog-footer__content {
	font-size: .9rem;
	line-height: 1.65;
	color: var(--k-text);
}


/* ---------- NAWIGACJA PREV / NEXT ---------- */
.katalog-nav{
	display:flex;
	justify-content:space-between;
	gap:2rem;
	margin-top:4rem;
	padding-top:2rem;
	border-top:1px solid var(--theme-border-color,#e6e2da);
}
.katalog-nav__side{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.katalog-nav__side--next{align-items:flex-end;text-align:right;margin-left:auto}
.katalog-nav__label{
	font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
	/* Było #b0a89a — 2.12:1, poniżej progu AA dla drobnego tekstu. */
	color:var(--katalog-szary, #6E6A61);
}
.katalog-nav__link{
	font-weight:600;font-size:1rem;color:inherit;text-decoration:none;
}
.katalog-nav__link:hover{text-decoration:underline}

/* ---------- PODOBNE REALIZACJE ---------- */
.katalog-related{margin-top:3.5rem}
.katalog-related__heading{
	font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
	/* Było #8c8578 — 3.30:1, za mało dla tekstu 0.72rem. */
	font-weight:600;color:var(--katalog-szary, #6E6A61);margin:0 0 1.5rem;
}
.katalog-related__grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:2rem;
}
@media (max-width:900px){
	.katalog-related__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
}
@media (max-width:600px){
	.katalog-related__grid{grid-template-columns:1fr}
	.katalog-nav{flex-direction:column;gap:1.5rem}
	.katalog-nav__side--next{align-items:flex-start;text-align:left}
}

.katalog-card{
	display:flex;flex-direction:column;
	text-decoration:none;color:inherit;
	transition:transform .25s ease;
}
.katalog-card:hover{transform:translateY(-4px)}
.katalog-card__thumb{
	/* To samo ustawienie co karty archiwum — dwie listy tego samego katalogu
	   z różnymi proporcjami zdjęć wyglądają jak dwa różne serwisy. 4/5 zostaje
	   jako wartość zapasowa, czyli to, co było tu wpisane. */
	aspect-ratio: var(--katalog-karta-proporcje, 4 / 5);
	overflow:hidden;
	background:#fff;
	border:1px solid #dad6cc;
	border-radius:10px;
}
.katalog-card__thumb img{
	width:100%;height:100%;
	object-fit:cover;object-position:var(--katalog-karta-kadr, top);
	display:block;
	transition:transform .5s ease;
}
.katalog-card:hover .katalog-card__thumb img{transform:scale(1.03)}

.katalog-card__body{padding-top:1rem;display:flex;flex-direction:column;gap:12px;}
.katalog-card__top{
	display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.katalog-card__title{
	font-size: 16px;
  font-weight: 700;
  line-height: 1.2;margin:0px;
}

.katalog-card__year{font-size: .72rem!important; color: var(--katalog-szary, #6E6A61); flex-shrink: 0;}
.katalog-card__meta{margin:0;font-size:.85rem;color:#8a7f6d}

.katalog-card__foot{
	display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
	margin-top:.25rem;
}
.katalog-card__tag{
	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);
}
.katalog-card__psi{
	font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;
	padding:.3rem .6rem;border-radius:999px;
	background:#fde8ef;color:#c02a5c;font-weight:600;
}
.katalog-card__colors{display:inline-flex;margin-left:auto}
.katalog-card__dot{
	width:14px;height:14px;border-radius:50%;
	border:1px solid rgba(0,0,0,.08);
}
.katalog-card__dot + .katalog-card__dot{margin-left:-5px}
/* ── Szerokość treści pod podglądem ──────────────────────────
   Treść idzie na pełną szerokość kolumny. Wcześniej było tu ograniczenie
   do 68 znaków w linii — miało sens, gdy kolumna była bardzo szeroka,
   ale po przebudowie układu (podgląd w potoku, przyklejona kolumna boczna)
   sama kolumna jest już węższa i limit tylko sztucznie ściskał tekst. */
.katalog-feature__content > * {
	max-width: 100%;
}

/* ── Widgety w kolumnie realizacji ───────────────────────────
   Obszar „Katalog: kolumna realizacji" (Wygląd → Widgety). */
.katalog-panel--widget img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

.katalog-panel--widget p:last-child,
.katalog-panel--widget ul:last-child {
	margin-bottom: 0;
}

.katalog-panel--widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .85rem;
	line-height: 1.6;
}

/* Baner bez ramki panelu — dodaj klasę „katalog-widget-goly"
   w polu „Dodatkowa klasa CSS" widgetu. */
.katalog-panel--widget.katalog-widget-goly {
	background: none;
	border: 0;
	padding: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Blok wiodący w prawej kolumnie (przycisk + zajawka)
   ═══════════════════════════════════════════════════════════════ */

.katalog-lead {
	display: flex;
	flex-direction: column;
	gap: .85rem;
}

.katalog-lead__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--katalog-akcent, #1565c0);
	color: var(--katalog-akcent-tekst, #fff);
	border-radius: 8px;
	padding: 13px 18px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: opacity .15s ease;
}

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

/* Zajawka siedzi w .katalog-panel, więc tło, ramkę, promień i padding
   dziedziczy po tej samej regule co Specyfikacja i Wtyczki — jeden wygląd
   kart w całej kolumnie. Tutaj zostaje wyłącznie typografia. */
.katalog-panel--lead {
	/* panel bez nagłówka — lekko luźniejszy oddech niż tabelki */
	padding-block: 1.05rem;
}

.katalog-lead__text {
	margin: 0;
	font-size: .92rem;
	line-height: 1.62;
	color: var(--katalog-szary, #6E6A61);
}

/* Grupa „Wydajność" wewnątrz panelu Specyfikacja ───────────────── */

.katalog-spec__grupa-label {
	margin: .7rem 0 .35rem;
	padding-top: .65rem;
	border-top: 1px solid var(--k-border);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	/* Było #8a8578 — 3.68:1 na białym panelu. */
	color: var(--katalog-szary, #6E6A61);
}

/* ═══════════════════════════════════════════════════════════════
   Kolejność na telefonie
   ───────────────────────────────────────────────────────────────
   Przy jednej kolumnie chcemy: tytuł → przycisk + zajawka → zrzut →
   panele → reklama. Domyślnie <aside> ląduje w całości POD zrzutem,
   więc na wąskim ekranie rozpuszczamy go (display: contents) — jego
   dzieci stają się elementami siatki .katalog-body i można im nadać
   kolejność. Gdyby przeglądarka nie znała display: contents, układ
   wraca do starego (kolumna pod treścią) i nadal działa.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {

	.katalog-sidebar {
		display: contents;
	}

	.katalog-lead          { order: -1; }
	.post-content-katalog  { order: 0; }
	.katalog-panel--cta    { order: 2; }
	.katalog-panel--widget { order: 3; }

	/* :not() wyklucza panel z zajawką — on nie jest elementem siatki, tylko
	   siedzi wewnątrz .katalog-lead (flexbox), gdzie `order` też działa
	   i wypchnąłby go pod przycisk. */
	.katalog-panel:not(.katalog-panel--lead) { order: 1; }

	/* Odstępy między elementami daje już `gap` na .katalog-body —
	   panele nie potrzebują własnych marginesów. */
	.katalog-body {
		gap: 1rem;
	}
}

/* ── Linki do archiwów taksonomii ────────────────────────────
   Wartości w Specyfikacji i kafelki wtyczek prowadzą do archiwów
   (/builder/bricks/, /wtyczka/acf/ itd.). Podkreślenie dopiero na hover,
   żeby tabelka nie zamieniła się w ścianę niebieskiego. */
.katalog-spec a.katalog-term {
	color: inherit;
	text-decoration: none;
	/*border-bottom: 1px solid var(--k-border);*/
}

.katalog-spec a.katalog-term:hover,
.katalog-spec a.katalog-term:focus-visible {
	color: var(--katalog-akcent, #1565c0);
	border-bottom-color: currentColor;
}

.katalog-tag--link {
	text-decoration: none;
	color: inherit;
	transition: background-color .15s ease, color .15s ease;
}

.katalog-tag--link:hover,
.katalog-tag--link:focus-visible {
	background: var(--katalog-akcent, #1565c0);
	color: var(--katalog-akcent-tekst, #fff);
}

/* ── Wiek pomiaru i link do pomiaru na żywo ──────────────────── */

.katalog-pomiar-uwaga {
	margin: .6rem 0 0;
	font-size: .72rem;
	line-height: 1.45;
	/* Było #a8632a — 4.68:1 na białym panelu, przechodzi, ale bez zapasu.
	   #96551f daje 5.81:1 i nie zmienia charakteru ostrzeżenia. */
	color: #96551f;
}

.katalog-pomiar-link {
	display: inline-block;
	margin-top: .55rem;
	font-size: .76rem;
	font-weight: 600;
	color: var(--katalog-akcent, #1565c0);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.katalog-pomiar-link:hover,
.katalog-pomiar-link:focus-visible {
	border-bottom-color: currentColor;
}

/* ── Chip PageSpeed w kartach „Podobne realizacje" ───────────
   Te same progi i kolory co w siatce archiwum. */

.katalog-card__psi.psi--dobry  { background: #dff3e6; color: #15703f; }
.katalog-card__psi.psi--sredni { background: #faecd2; color: #8a5a00; }
.katalog-card__psi.psi--zly    { background: #f7e3e4; color: #c4142b; }