/* ==========================================
   GALERIJ
========================================== */

.album-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 35px;

    padding: 70px 0;

}

.album-card {

    display: block;

    background: var(--white);

    border-radius: 16px;

    overflow: hidden;

    box-shadow: var(--shadow);

    text-decoration: none;

    color: inherit;

    transition: .35s;

}

.album-card:hover {

    transform: translateY(-8px);

}

.album-card img {

    width: 100%;

    height: 260px;

    object-fit: cover;

    display: block;

}

.album-info {

    padding: 20px;

}

.album-info h2 {

    margin-bottom: 10px;

    color: var(--primary);

}


/* ==========================================
   FOTOPAGINA
========================================== */

.photo-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(260px, 1fr));

    gap: 20px;

    margin: 50px 0;

}

.photo {

    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 14px;

    box-shadow: var(--shadow);

    background: var(--white);

}

.photo img {

    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    display: block;

    transition: .35s;

}

.photo:hover img {

    transform: scale(1.05);

}


/* ==========================================
   FOTO-INFORMATIE
========================================== */

.photo-info {

    padding: 14px 16px;

    background: var(--white);

}

.photo-info strong {

    display: block;

    color: var(--primary);

    margin-bottom: 5px;

}

.photo-info span {

    display: block;

    color: #666;

    font-size: .95rem;

    line-height: 1.5;

}


/* ==========================================
   TERUG-LINK
========================================== */

.back-link {

    margin-top: 40px;

}

.back-link a {

    text-decoration: none;

    color: var(--primary);

    font-weight: bold;

}


/* ==========================================
   PAGINA HERO
========================================== */

.page-hero {
    background: #e5e5e5;

    padding: 80px 0;

    color: #333;

    text-align: center;
}

.page-hero h1 {
    font-size: 3rem;
    margin-bottom: 15px;
}

.page-hero h1 {

    font-size: 3rem;

    margin-bottom: 15px;

}


/* ==========================================
   ZOEKEN IN GALERIJ
========================================== */

.gallery-search {

    margin: 40px 0;

    text-align: center;

}

.gallery-search input {

    width: min(500px, 95%);

    padding: 16px 24px;

    border-radius: 30px;

    border: 2px solid var(--primary);

    font-size: 1rem;

    outline: none;

}

.gallery-search input:focus {

    box-shadow:
        0 0 15px rgba(53, 92, 77, .25);

}


/* ==========================================
   MOBIEL
========================================== */

@media (max-width: 768px) {

    .album-grid {

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 40px 0;

    }

    .album-card img {

        height: auto;

        aspect-ratio: 4 / 3;

    }

    .photo-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;

        margin: 30px 0;

    }

    .photo-info {

        padding: 10px 12px;

    }

    .photo-info strong {

        font-size: .95rem;

    }

    .photo-info span {

        font-size: .85rem;

    }

    .page-hero {

        padding: 80px 0;

    }

    .page-hero h1 {

        font-size: 2.2rem;

    }

}

@media (max-width: 480px) {

    .photo-grid {

        grid-template-columns: 1fr;

    }

}