/* ===== Resultaten – Grid met scroll-animaties ===== */
#resultaten.gallery {
    padding: 4rem 0;
}

#resultaten .container > h2 {
    font-size: 2rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 1.5rem;
}

.results-grid {
    display: grid;
    /* exact 5 kolommen ipv auto-fill */
    grid-template-columns: repeat(5, 1fr);
    gap: 14px; /* wat kleiner zodat het compacter oogt */
    justify-items: center; /* centreer kaarten in hun kolom */
}

.result-card {
    width: 100%;       /* vult kolom */
    max-width: 200px;  /* kaartjes kleiner houden */
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #222;
    background: #111;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    opacity: 0;
    transform: translateY(22px) scale(.98);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2,.65,.2,1);
}

.result-card.is-visible { opacity:1; transform:translateY(0) scale(1); }

.result-card .frame {
    aspect-ratio: 3/4;
    width: 100%;
    overflow: hidden;
}

.result-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.result-card:hover img { transform: scale(1.04); }

/* Mobile: minder kolommen */
@media (max-width: 1100px) {
    .results-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 850px) {
    .results-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .results-grid { grid-template-columns: repeat(2, 1fr); }
}


/* Card is zichtbaar */
.result-card.is-visible{
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Beeld */
.result-card .frame{
    aspect-ratio: 3 / 4;    /* zorgt voor consistente blokken */
    width: 100%;
    overflow: hidden;
}
.result-card img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1);
    transition: transform .5s ease;
}

/* Hover-effect (subtiel) */
.result-card:hover img{
    transform: scale(1.04);
}

/* Light overlay bij hover (optioneel subtiel) */
.result-card::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(0,0,0,.24), rgba(0,0,0,0));
    opacity: 0;
    transition: opacity .35s ease;
}
.result-card:hover::after{ opacity:.9; }

/* Kleine schermen iets grotere tegels */
@media (max-width: 520px){
    .results-grid{
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}