/* 

--- Portfolio/Gallery Sections --- 

/* NEU: Multi-column Layout für .gallery */
.gallery {
    /* Definiere eine ungefähre Spaltenbreite - der Browser erstellt so viele Spalten wie passen */
    column-width: 280px; /* Experimentiere mit diesem Wert! Etwas breiter als minmax im Grid */
    /* Oder eine feste Spaltenzahl (weniger flexibel): */
    /* column-count: 4; */
    column-gap: 20px; /* Abstand zwischen den Spalten */
    padding: 0; /* Sicherstellen, dass kein Container-Padding stört */
}

/* Styling der Galerie-Elemente */
.gallery-item {
    display: inline-block; /* Wichtig für Column-Layout */
    width: 100%;          /* Nimmt die volle Breite der Spalte ein */
    margin-bottom: 20px; /* Abstand zwischen den Items vertikal */
    background-color: var(--surface-alt-color);
    border-radius: 8px;
    overflow: hidden;
    position: relative; /* Bleibt wichtig für :hover etc. */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Beibehalten */
    /* Verhindert, dass ein Item über Spalten getrennt wird */
    break-inside: avoid;
    page-break-inside: avoid; /* Ältere Browser */
    /* KEINE aspect-ratio hier! */
    cursor: pointer;
}

/* Styling der Bilder INNERHALB der Galerie-Elemente */
.gallery-item img {
    display: block;
    width: 100%;    /* Bild passt sich der Breite des Containers (.gallery-item) an */
    height: auto;   /* Höhe automatisch anpassen, um das Seitenverhältnis zu wahren */
    /* object-fit ist hier weniger relevant, da height: auto ist */
    /* KEINE aspect-ratio hier! */
    border-radius: 0; /* Falls das img einen Radius hatte, hier resetten */
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* --- Lightbox Styles --- */
#lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(18, 18, 18, 0.9); display: none; justify-content: center; align-items: center; z-index: 1200; padding: 40px 20px; opacity: 0; transition: opacity 0.3s ease-in-out; cursor: pointer; }
#lightbox-overlay.lightbox-active { display: flex; opacity: 1; }
#lightbox-image { display: block; max-width: 90%; max-height: 85%; object-fit: contain; box-shadow: 0 5px 25px rgba(0,0,0,0.4); border-radius: 8px; cursor: default; }
#lightbox-close { position: absolute; top: 20px; right: 30px; font-size: 3rem; font-weight: 300; color: var(--primary-text-color); cursor: pointer; transition: color 0.2s ease; line-height: 1; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
#lightbox-close:hover { color: var(--secondary-text-color); }

/* Die @media Queries müssen ggf. angepasst werden, wenn du column-width verwendest,
   da sich die Spaltenanzahl automatisch ändert. Ggf. die column-width anpassen. */
@media (max-width: 992px) {
   .gallery { column-width: 200px; }
}
@media (max-width: 768px) {
   .gallery { column-width: 180px; column-gap: 15px; }
   .gallery-item { margin-bottom: 15px; }
}
@media (max-width: 480px) {
    .gallery { column-count: 2; column-width: auto; column-gap: 10px;} /* Oder auf 1 Spalte gehen: column-count: 1; column-width: auto; */
    .gallery-item { margin-bottom: 10px; }
}