/* =============================================================
   SZABLONY STARTOWE KADENCE (.mbw-szablony) — przeglądarka dla klienta.
   Render: inc/mbw-szablony.php (szkielet) + assets/js/mbw-szablony.js (karty).
   Podstrona służy WYŁĄCZNIE do oglądania — bez zaznaczania, paska wyboru
   i formularza (usunięte 2026-08-22 na prośbę Olgi).
   Ładowane TYLKO na stronie z szablonem template-szablony.php.

   Kolory i fonty wyłącznie z theme.json (paleta --wp--preset--color--*,
   Playfair na nagłówki, Jost na tekst) — komponent nie wnosi własnej marki.
   Wszystko, co można przestroić, siedzi w tokenach --mbw-szab-* poniżej.
   ============================================================= */

.mbw-szablony {
	/* ——— tokeny komponentu (nadpisz je, żeby zmienić wygląd) ——— */
	--mbw-szab-akcent:    var(--wp--preset--color--theme-palette-1, #f4c619);  /* żółty marki */
	--mbw-szab-link:      var(--wp--preset--color--theme-palette-6, #2980b9);  /* niebieski */
	--mbw-szab-ink:       var(--wp--preset--color--theme-palette-3, #262626);  /* tekst */
	--mbw-szab-ink-2:     #5b5b5b;                                              /* tekst poboczny */
	--mbw-szab-tlo:       var(--wp--preset--color--theme-palette-9, #ffffff);
	--mbw-szab-tlo-2:     var(--wp--preset--color--theme-palette-8, #fdfaf5);  /* krem jasny */
	--mbw-szab-krem:      var(--wp--preset--color--theme-palette-7, #f5eee8);
	--mbw-szab-linia:     #e6e1db;
	--mbw-szab-radius:    10px;      /* jak karty portfolio */
	--mbw-szab-gap:       1.75rem;   /* odstęp w siatce */
	--mbw-szab-cols:      3;         /* kolumny na desktopie */
	--mbw-szab-ratio:     800 / 525; /* realna proporcja miniatur z API Kadence */
	--mbw-szab-cien:      0 1px 2px rgba(38, 38, 38, .06), 0 12px 28px -18px rgba(38, 38, 38, .35);

	margin-top: 2.5rem;
	color: var(--mbw-szab-ink);
}

/* ---------- personalizacja „Przygotowane dla: …" (?dla=) ---------- */
.mbw-szablony__dla {
	display: inline-block;
	margin: 0 0 1.5rem;
	padding: .45rem 1rem;
	background: var(--mbw-szab-krem);
	border-left: 4px solid var(--mbw-szab-akcent);
	font-size: .95rem;
}

/* ---------- instrukcja 1-2-3 ---------- */
.mbw-szablony__kroki {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.mbw-szablony__kroki li {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: .95rem;
	color: var(--mbw-szab-ink-2);
}
.mbw-szablony__kroki span {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--mbw-szab-akcent);
	color: var(--mbw-szab-ink);
	font-weight: 600;
	font-size: .85rem;
}

.mbw-szablony__uwaga {
	max-width: 65ch;
	margin: 0 0 2rem;
	font-size: .95rem;
	color: var(--mbw-szab-ink-2);
}

.mbw-szablony__pusto {
	padding: 2rem;
	background: var(--mbw-szab-krem);
	border-radius: var(--mbw-szab-radius);
}

/* ---------- pasek narzędzi: szukajka + kategorie ----------
   Przyklejony do góry, żeby filtr był pod ręką przy 92 pozycjach. */
.mbw-szablony__tools {
	position: sticky;
	top: 0;
	z-index: 5;
	padding: 1rem 0;
	margin-bottom: 1.75rem;
	background: var(--mbw-szab-tlo);
	border-bottom: 1px solid var(--mbw-szab-linia);
}

.mbw-szablony__search input {
	width: 100%;
	max-width: 22rem;
	padding: .65rem .9rem;
	border: 1px solid var(--mbw-szab-linia);
	border-radius: 6px;
	background: var(--mbw-szab-tlo-2);
	font: inherit;
	font-size: .95rem;
	color: var(--mbw-szab-ink);
}
.mbw-szablony__search input:focus-visible {
	outline: 2px solid var(--mbw-szab-link);
	outline-offset: 2px;
}

.mbw-szablony__chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .9rem;
}
.mbw-szablony__chip {
	padding: .4rem .85rem;
	border: 1px solid var(--mbw-szab-linia);
	border-radius: 100px;
	background: transparent;
	font: inherit;
	font-size: .85rem;
	color: var(--mbw-szab-ink-2);
	cursor: pointer;
	transition: border-color .2s, color .2s, background-color .2s;
}
.mbw-szablony__chip:hover {
	border-color: var(--mbw-szab-link);
	color: var(--mbw-szab-link);
}
.mbw-szablony__chip.is-active {
	background: var(--mbw-szab-ink);
	border-color: var(--mbw-szab-ink);
	color: #fff;
}
.mbw-szablony__chip:focus-visible {
	outline: 2px solid var(--mbw-szab-link);
	outline-offset: 2px;
}
.mbw-szablony__licznik-chip {
	opacity: .55;
	font-size: .8em;
	margin-left: .15em;
}

.mbw-szablony__licznik {
	margin: .9rem 0 0;
	font-size: .85rem;
	color: var(--mbw-szab-ink-2);
}

/* ---------- siatka kart ---------- */
.mbw-szablony__grid {
	display: grid;
	grid-template-columns: repeat(var(--mbw-szab-cols), minmax(0, 1fr));
	gap: var(--mbw-szab-gap);
}

.mbw-szablony__karta {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--mbw-szab-linia);
	border-radius: var(--mbw-szab-radius);
	background: var(--mbw-szab-tlo);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mbw-szablony__karta:hover {
	transform: translateY(-3px);
	box-shadow: var(--mbw-szab-cien);
}
.mbw-szablony__foto {
	position: relative;
	display: block;
	aspect-ratio: var(--mbw-szab-ratio);
	background: var(--mbw-szab-krem);
	overflow: hidden;
}
.mbw-szablony__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center; /* zrzuty stron — górę widać zawsze */
	display: block;
}
.mbw-szablony__foto--brak {
	display: grid;
	place-items: center;
	font-size: .85rem;
	color: var(--mbw-szab-ink-2);
}

/* Plakietki na miniaturze (PRO / Sklep). */
.mbw-szablony__flagi {
	position: absolute;
	top: .6rem;
	left: .6rem;
	display: flex;
	gap: .35rem;
}
.mbw-szablony__flaga {
	padding: .2rem .55rem;
	border-radius: 4px;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: rgba(38, 38, 38, .82);
	color: #fff;
}
.mbw-szablony__flaga--pro {
	background: var(--mbw-szab-akcent);
	color: var(--mbw-szab-ink);
}

.mbw-szablony__tresc {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1rem 1.1rem 1.2rem;
	flex: 1;
}
.mbw-szablony__nazwa {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair, Georgia, serif);
	font-size: 1.15rem;
	line-height: 1.2;
}
.mbw-szablony__kat {
	margin: 0;
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mbw-szab-ink-2);
}
.mbw-szablony__opis {
	margin: 0;
	font-size: .9rem;
	color: var(--mbw-szab-ink-2);
}
.mbw-szablony__podstrony {
	margin: 0;
	font-size: .8rem;
	color: var(--mbw-szab-ink-2);
	opacity: .85;
}

.mbw-szablony__akcje {
	display: flex;
	gap: .5rem;
	margin-top: auto;
	padding-top: .85rem;
}
.mbw-szablony__demo {
	flex: 1;
	padding: .55rem .75rem;
	border-radius: 6px;
	border: 1px solid var(--mbw-szab-ink);
	background: transparent;
	font: inherit;
	font-size: .85rem;
	text-align: center;
	text-decoration: none;
	color: var(--mbw-szab-ink);
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.mbw-szablony__demo:hover {
	background: var(--mbw-szab-ink);
	color: #fff;
}
.mbw-szablony__demo:focus-visible {
	outline: 2px solid var(--mbw-szab-link);
	outline-offset: 2px;
}

/* ---------- lista zapasowa bez JS ---------- */
.mbw-szablony__lista-noscript {
	columns: 2;
	gap: 2rem;
	font-size: .95rem;
}

/* ---------- responsywność ---------- */
@media (max-width: 1024px) {
	.mbw-szablony { --mbw-szab-cols: 2; }
}
@media (max-width: 640px) {
	.mbw-szablony { --mbw-szab-cols: 1; --mbw-szab-gap: 1.25rem; }
	.mbw-szablony__tools { position: static; }

	/* Kategorie: jeden przewijany rząd zamiast ściany chipów na pół ekranu. */
	.mbw-szablony__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: .35rem;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}
	.mbw-szablony__chip { flex: none; }


	.mbw-szablony__lista-noscript { columns: 1; }
}

/* ---------- mniej ruchu, gdy użytkownik tak ustawił system ---------- */
@media (prefers-reduced-motion: reduce) {
	.mbw-szablony__karta,
	.mbw-szablony__chip,
	.mbw-szablony__demo {
		transition: none;
	}
	.mbw-szablony__karta:hover {
		transform: none;
	}
}