/* Galerie Pieprzyk Drzwi – wspólny styl (kolory jak na stronie głównej) */
:root {
	--bg: #1a1a1a;
	--panel: #2a2a2a;
	--card: #2d2d2d;
	--muted: #b3ada5;
	--text: #f0f0f0;
	--brand: #c99c6b;
	--accent: #8b5e3c;
	--ring: 0 0 0 3px rgba(201, 156, 107, .45);
	--radius: 14px;
	--shadow: 0 8px 24px rgba(0, 0, 0, .55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	line-height: 1.5;
}
a { color: var(--brand); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

.g-header {
	position: sticky; top: 0; z-index: 5;
	background: rgba(26, 26, 26, .92);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid rgba(201, 156, 107, .25);
}
.g-wrap { max-width: 1280px; margin: 0 auto; padding: 14px 16px; }
.g-header .g-wrap { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; justify-content: space-between; }
.g-title { margin: 0; font-size: clamp(19px, 3vw, 26px); letter-spacing: .2px; }
.g-title span { color: var(--brand); }
.g-count { color: var(--muted); font-size: 14px; margin-left: 4px; font-weight: 400; }

.g-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 18px; border-radius: 999px;
	border: 1px solid rgba(201, 156, 107, .45); background: var(--panel); color: var(--text);
	font: 600 15px/1 inherit; font-family: inherit; text-decoration: none; cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.g-btn:hover { background: #3a332c; border-color: var(--brand); }
.g-btn:active { transform: scale(.98); }
.g-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.g-btn--primary:hover { background: #9d6b45; }

.g-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: clamp(10px, 2vw, 16px);
	padding: clamp(12px, 2vw, 20px) 0;
	margin: 0; list-style: none;
}
.g-item { margin: 0; }
.g-card {
	display: block; width: 100%; padding: 0; border: 1px solid rgba(255, 255, 255, .08);
	background: var(--card); border-radius: var(--radius); overflow: hidden; cursor: zoom-in;
	box-shadow: var(--shadow); color: inherit; font: inherit; text-align: center;
	transition: transform .18s ease, border-color .18s ease;
}
.g-card:hover { transform: translateY(-3px); border-color: rgba(201, 156, 107, .6); }
.g-card img {
	display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain;
	background: #222;
}
.g-card__nr { display: block; padding: 7px 0; font-size: 13px; color: var(--muted); border-top: 1px solid rgba(255, 255, 255, .06); }

.g-more { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0 40px; }
.g-more[hidden] { display: none; }
.g-more small { color: var(--muted); }

.g-footer { border-top: 1px solid rgba(255, 255, 255, .08); color: var(--muted); font-size: 14px; }
.g-footer .g-wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.g-empty { color: var(--muted); padding: 40px 0; text-align: center; }

@media (max-width: 600px) {
	.g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-btn { font-size: 14px; padding: 0 14px; }
	.g-header .g-wrap { padding: 10px 12px; }
}

/* Lightbox */
.g-lb {
	position: fixed; inset: 0; z-index: 50;
	display: grid; grid-template-rows: auto 1fr auto;
	background: rgba(0, 0, 0, .95); color: #fff;
}
.g-lb[hidden] { display: none; }
.g-lb__top, .g-lb__bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; }
.g-lb__bottom { justify-content: center; }
.g-lb__count { font-size: 18px; font-weight: 600; }
.g-lb__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 12px; touch-action: pan-y; }
.g-lb__img { max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); object-fit: contain; box-shadow: var(--shadow); background: #000; }
.g-lb__close { width: 44px; padding: 0; font-size: 22px; }