/* ============================================================================
   Pure CSS Gallery (no Tailwind dependency)
   Nebeneinander mit CSS-Grid, responsive
============================================================================ */

.glry {
    /* Responsive Grid: so viele Spalten wie möglich,
       Minimum-Breite je Item über CSS-Var --glry-min (Twig setzt sie) */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--glry-min, 200px), 1fr));
    gap: var(--glry-gap, 12px);
    align-items: start;
}

/* Einzelnes Item als Figure-Card */
.glry-item {
    background: var(--glry-bg, #fff);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow .2s ease;
}

.glry-item:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

/* Bild-Wrapper mit sanftem Hover-Zoom */
.glry-imgwrap {
    position: relative;
    overflow: hidden;
    line-height: 0; /* verhindert Lücken unter Bildern */
}

.glry-imgwrap a,
.glry-imgwrap img {
    display: block;
    width: 100%;
    height: auto;
}

.glry-imgwrap img {
    transition: transform .25s ease;
    /* Falls du streng auf Kachelhöhe willst, kannst du das einkommentieren:
       aspect-ratio: 4 / 3; object-fit: cover; */
}

.glry-item:hover .glry-imgwrap img {
    transform: scale(1.03);
}

/* Caption (optional) */
.glry-cap {
    padding: 8px 10px 10px;
    font-size: 0.9rem;
    color: rgba(0,0,0,0.75);
}

/* Light/Dark Kompatibilität mit daisyUI (optional, stört ohne daisyUI nicht) */
[data-theme="dark"] .glry-item {
    background: hsl(220 14% 16%);
    border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .glry-cap {
    color: rgba(255,255,255,0.8);
}

/* Kleine Bildschirme: etwas enger zusammenrücken */
@media (max-width: 480px) {
    .glry {
        gap: 8px;
    }
    .glry-cap {
        padding: 6px 8px 8px;
        font-size: 0.85rem;
    }
}