/* OLSO – Projekty (prototyp): galeria projektu i kafelki – odwzorowanie obecnego układu z Elementora. */

/* Galeria – komputer (≥1025 px): rzędy z marginesami 200 px, 50 px odstępu między rzędami, para = 2 × (50% − 25 px) */
.olso-galeria { display: block; }
.olso-rzad { display: flex; align-items: flex-start; margin-top: 50px; padding: 0 200px; }
.olso-foto { margin: 0; flex: 1 1 100%; min-width: 0; }
.olso-rzad--para .olso-foto { flex: 0 0 50%; max-width: 50%; }
.olso-rzad--para .olso-foto:first-child { padding-right: 25px; }
.olso-rzad--para .olso-foto:last-child { padding-left: 25px; }
.olso-foto img { display: block; width: 100%; height: auto; max-width: 100%; }

/* Tablet (768–1024 px): jedna kolumna, boki 75 px, pierwsze zdjęcie 250 px od góry, kolejne co 70 px (50 px marginesu + 20 px odstępu widżetów Elementora) */
@media (max-width: 1024px) {
	.olso-galeria { margin-top: 50px; padding: 100px 75px 0; }
	.olso-rzad { display: block; margin: 0; padding: 0; }
	.olso-rzad--para .olso-foto { max-width: none; }
	.olso-rzad--para .olso-foto:first-child, .olso-rzad--para .olso-foto:last-child { padding: 0; }
	.olso-foto { margin-top: 70px; }
	.olso-rzad:first-child .olso-foto:first-child { margin-top: 100px; }
}

/* Architektura – jak na dotychczasowych stronach projektów architektury: 70 px między rzędami, na tablecie pierwsze zdjęcie 100 px od góry */
.olso-galeria--architektura .olso-rzad + .olso-rzad { margin-top: 70px; }
@media (max-width: 1024px) {
	.olso-galeria--architektura { padding-top: 0; }
	.olso-galeria--architektura .olso-rzad + .olso-rzad { margin-top: 0; }
	.olso-galeria--architektura .olso-rzad:first-child .olso-foto:first-child { margin-top: 100px; } /* łączy się z marginesem galerii (50 px) – razem 100 px */
}

/* Telefon (≤767 px): pełna szerokość, pierwsze zdjęcie 100 px od góry, kolejne co 70 px */
@media (max-width: 767px) {
	.olso-galeria { margin-top: 100px; padding: 0; }
	.olso-rzad:first-child .olso-foto:first-child { margin-top: 0; }
	.olso-foto--bez-telefonu { display: none; }
}

/* Kafelek – jak kolumna Elementora: tło „cover”, 150 px nad i pod treścią, nakładka po najechaniu (0,7 s) */
.olso-kafelek { position: relative; display: block; overflow: hidden; padding: 150px 0; text-align: center; color: #fff; text-decoration: none; }
.olso-kafelek img.olso-kafelek__tlo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--olso-kadr, 50% 100%); } /* silniej niż .elementor img { height: auto } */
.olso-kafelek__nakladka { position: absolute; inset: 0; background-color: transparent; opacity: .5; transition: background .7s, opacity .7s; }
.olso-kafelek:hover .olso-kafelek__nakladka, .olso-kafelek:focus-visible .olso-kafelek__nakladka { background-color: #00000073; }
.olso-kafelek__tresc { position: relative; display: block; min-height: 94px; } /* wysokość jak numer + opis – bez opisu kafelek ma tę samą wysokość */
.olso-kafelek__numer { margin: 0; padding: 0; font-family: "Poiret One", sans-serif; font-size: 35px; font-weight: 600; line-height: 1.3em; color: #fff; }
.olso-kafelek__opis { margin: 20px 0 0; font-family: "Poiret One", sans-serif; font-size: 15px; font-weight: 600; line-height: 1px; color: #fff; }
.olso-kafelek:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
@media (max-width: 767px) { .olso-kafelek img.olso-kafelek__tlo, .olso-lista__pole .olso-kafelek img.olso-kafelek__tlo { object-position: var(--olso-kadr-tel, 50% 50%); } }

/* Lista automatyczna – rzędy w rytmie kategorii (Wnętrza 2-3-2-3…, Architektura 1-2-1-2… od 12.10.2026), wyznaczane w PHP.
   Siatka 6 kolumn: --w2 = połowa rzędu, --w3 = jedna trzecia, --w1 = cały rząd. Niepełny ostatni rząd zachowuje szerokość swojego typu.
   Odstępy jak na listach z Elementora: 20 px od krawędzi, 10 px między kafelkami; kafelek 394 px, na pełną szerokość 544 px. */
.olso-lista { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 50px; padding: 0 15px; }
.olso-lista__pole { grid-column: span 3; min-width: 0; padding: 5px; }
.olso-lista__pole--w3 { grid-column: span 2; }
.olso-lista__pole--w1 { grid-column: 1 / -1; }
.olso-lista__pole--w1 .olso-kafelek { padding: 300px 0 150px; }
.olso-lista__pole--w3 .olso-kafelek img.olso-kafelek__tlo, .olso-lista__pole--w1 .olso-kafelek img.olso-kafelek__tlo { object-position: var(--olso-kadr, 50% 50%); }
/* Tablet w pionie (768–899 px): trzy kafelki byłyby zbyt wąskie (~240 px) – rzędy „po trzy” układają się po dwa */
@media (max-width: 899px) { .olso-lista__pole--w3 { grid-column: span 3; } }
/* Telefon: jedna kolumna */
@media (max-width: 767px) {
	.olso-lista { grid-template-columns: minmax(0, 1fr); margin-top: 100px; padding: 0; }
	.olso-lista__pole, .olso-lista__pole--w3, .olso-lista__pole--w1 { grid-column: 1 / -1; padding: 15px; }
	.olso-lista__pole--w1 .olso-kafelek { padding: 150px 0; }
}

/* Telefon – kadrowanie okładki „telefon” ma pierwszeństwo przed regułami rozmiarów kafelków; galeria Architektury od 100 px jak pozostałe */
@media (max-width: 767px) {
	.olso-lista .olso-lista__pole .olso-kafelek img.olso-kafelek__tlo { object-position: var(--olso-kadr-tel, 50% 50%); }
	.olso-galeria--architektura .olso-rzad:first-child .olso-foto:first-child { margin-top: 0; }
}

/* 0.6.0 – niepełne rzędy wypełniają szerokość (klasy w1/w2/w3 = liczba kafelków w rzędzie), tablet w pionie: samotny kafelek na całą szerokość (t1),
   Architektura: kadr domyślnie środek, lista pod nagłówkiem tabletu (nagłówek ok. 82 px – lista od 115 px jak na telefonie). */
@media (min-width: 768px) { .olso-lista--architektura .olso-lista__pole .olso-kafelek img.olso-kafelek__tlo { object-position: var(--olso-kadr, 50% 50%); } }
@media (min-width: 768px) and (max-width: 899px) {
	.olso-lista__pole--t1 { grid-column: 1 / -1; }
	.olso-lista__pole--t1 .olso-kafelek { padding: 300px 0 150px; }
	.olso-lista__pole--t1 .olso-kafelek img.olso-kafelek__tlo { object-position: var(--olso-kadr, 50% 50%); }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.olso-lista--pod-menu { margin-top: 110px; }
}