/*
 * Galeria: zdjecia produktow w prawdziwych kolorach (zloto ma wygladac
 * jak zloto), zdjecia firmy w duotonie zielonym. Powiekszenie na `<dialog>`.
 */

.galeria {
	list-style: none;
	margin: 0 0 var(--o6);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--o4);
}

.galeria__poz[hidden] { display: none; }

.galeria__poz a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.galeria figure { margin: 0; }

.galeria .zdjecie {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: filter 240ms var(--krzywa-panel);
}

/* Zdjecia firmy w duotonie: rozdzial kolorystyczny mowi, co jest towarem,
   a co tlem. Dotyczy tylko kategorii "Firma". */
.galeria__poz[data-kategoria~="firma"] .zdjecie {
	filter: grayscale(1) sepia(0.28) hue-rotate(75deg) saturate(1.4) brightness(0.96);
}

.galeria__filtry {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o2);
	margin-bottom: var(--o4);
}

.galeria__filtry button {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--zielen-rewersu) 42%, transparent);
	border-radius: var(--rog-papier);
	padding: var(--o2) var(--o4);
	min-height: 40px;
	cursor: pointer;
	font-size: var(--krok-drobny);
}

.galeria__filtry button[aria-pressed="true"] {
	background: var(--zielen-gleboka);
	color: var(--papier);
	border-color: var(--zielen-gleboka);
}

/* ============================================================ lightbox */

.lightbox {
	border: 0;
	padding: 0;
	max-width: min(96vw, 1100px);
	max-height: 92vh;
	background: var(--papier-jasny);
	border-radius: var(--rog-papier);
	color: var(--tusz);
}

.lightbox::backdrop { background: color-mix(in srgb, var(--zielen-gleboka) 88%, transparent); }

.lightbox__ramka { margin: 0; padding: var(--o4); }
.lightbox__ramka img { max-height: 74vh; width: auto; margin-inline: auto; }
.lightbox__ramka figcaption { margin-top: var(--o3); text-align: center; color: var(--zielen-rewersu); }

.lightbox__sterowanie {
	display: flex;
	gap: var(--o3);
	justify-content: center;
	padding: 0 var(--o4) var(--o4);
}

.lightbox__sterowanie button {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--zielen-rewersu) 45%, transparent);
	border-radius: var(--rog-papier);
	padding: var(--o2) var(--o4);
	min-height: 44px;
	cursor: pointer;
}

/* ============================================================== kontakt */

.kontakt {
	max-width: var(--szerokosc-max);
	margin: 0 auto var(--o7);
	padding-inline: var(--o4);
	display: grid;
	gap: var(--o5);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 860px) {
	.kontakt { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.2fr); gap: var(--o6); align-items: start; }
}

.kontakt__adres { font-size: 1.15rem; line-height: 1.5; }
.kontakt__wejscie { color: var(--zielen-rewersu); font-size: var(--krok-drobny); }

/* Mapa jako fasada: osadzona mapa Google to kilkaset kilobajtow skryptu
   i ciasteczka strony trzeciej na kazdym wejsciu. */
.mapa-fasada {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 320px;
	background: var(--papier-jasny);
	border: 1px solid color-mix(in srgb, var(--zielen-rewersu) 30%, transparent);
	border-radius: var(--rog-papier);
	text-decoration: none;
	color: var(--tusz);
	overflow: hidden;
}

.mapa-fasada__tresc {
	position: relative;
	display: grid;
	gap: var(--o2);
	text-align: center;
	padding: var(--o4);
}

.mapa-fasada__tresc strong { font-size: 1.2rem; font-stretch: 112%; }
.mapa-fasada__tresc span { font-size: var(--krok-drobny); color: var(--zielen-rewersu); }
.mapa-fasada:hover { border-color: var(--zielen-rewersu); }