/*
==========================================================================
   Style dla Portfolio (Układ 3-kolumnowy)
========================================================================== 
*/

/* Opis jest taki sam, ale dla porządku trzymamy go tutaj */
.portfolio-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 40px auto;
    color: #b3b3b3;
}

/* --- Definicja Siatki --- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-auto-rows: 280px;
    gap: 20px;
}

/* Style dla typów kafelków są takie same, bo to tylko definicje */
.kafelek-kwadrat { grid-column: span 1; grid-row: span 1; }
.kafelek-poziomy { grid-column: span 2; grid-row: span 1; }
.kafelek-pionowy { grid-column: span 1; grid-row: span 2; }

/* Wspólny wygląd każdego kafelka - te style są zduplikowane,
   ale dzięki temu każdy plik portfolio jest w pełni niezależny */
.portfolio-item {
    position: relative; display: block; overflow: hidden;
    border-radius: 8px; color: #FFFFFF;
}
.portfolio-item img {
    width: 100%; height: 100%; object-fit: cover;
    display: block; transition: transform 0.4s ease;
}
.portfolio-item:hover img { transform: scale(1.05); }
.portfolio-item-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}
.portfolio-item h3 { margin: 0 0 5px 0; font-size: 22px; }
.portfolio-item span { font-size: 14px; color: #b3b3b3; }