/* Wzorzec „Realizacje" — style wsadu. Leżą w `global/`, bo nie zależą
   od języka. Plik jest podawany przez Apache wprost (.htaccess przepuszcza
   CSS), więc nie potrzebuje kopii w innym miejscu. */

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #16232e;
    background: #f6f7f9;
}

.wsad { max-width: 1100px; margin: 0 auto; padding: 64px 24px 96px; }

.hero { max-width: 760px; margin-bottom: 48px; }

/* `overflow: hidden` jest potrzebne animacji: litery wjeżdżają spod linii
   tekstu i bez tego widać je, zanim dojadą. */
.hero-tytul {
    margin: 0 0 16px;
    font-size: clamp(32px, 6vw, 60px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    overflow: hidden;
}

.hero-tytul .litera { display: inline-block; white-space: pre; }

.hero-lead { margin: 0; font-size: 18px; color: #4a5a68; }

.galeria {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 700px) {
    .galeria { grid-template-columns: 1fr; }
}

.kafel { margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 20px rgba(16, 35, 55, .12); }

.kafel img { display: block; width: 100%; height: auto; }

/* Lista zdjęć pionowych — trzy kafle w rzędzie, każdy o własnej wysokości,
   bo proporcje ustawia redaktor osobno dla każdego. */
.piony { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; align-items: start; }
.pion { margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 20px rgba(16, 35, 55, .12); }
.pion img { display: block; width: 100%; height: auto; }

@media (max-width: 700px) { .piony { grid-template-columns: 1fr; } }