/* ==========================================================================
   dikkebirdpics — Soorten-grid (taxonomy-vogelgroep.php)
   Pagina's als /categorie/roofvogels.
   Stijl: 2 kolommen, grote 3:2 landscape-foto's, soortnaam eronder.
   Pas hier vrij kolommen, afstand, verhouding en breedte aan.
   ========================================================================== */

.dbp-soorten-wrap {
    --dbp-s-cols:   2;           /* aantal kolommen op desktop */
    --dbp-s-gap:    46px;        /* ruimte tussen tegels (Squarespace-gutter) */
    --dbp-s-aspect: 1 / 1;       /* verhouding foto B:H — 1:1 vierkant (zoals Squarespace) */
    --dbp-s-maxw:   1504px;      /* paginabreedte — gelijk aan Squarespace inset */
    --dbp-s-radius: 0px;         /* afronding hoeken (Squarespace = recht) */
    --dbp-s-cap-size: 1.25rem;   /* lettergrootte bijschrift */

    max-width: var(--dbp-s-maxw);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    box-sizing: border-box;
}

/* --- Koptekst boven het grid --- */
.dbp-soorten-header {
    text-align: center;
    margin: 0 0 2.5rem;
}
.dbp-soorten-titel {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
}
.dbp-soorten-subtitle {
    margin: .5rem 0 0;
    opacity: .6;
    font-size: 1rem;
}

/* --- Het grid --- */
.dbp-soorten-grid {
    display: grid;
    grid-template-columns: repeat(var(--dbp-s-cols), 1fr);
    gap: var(--dbp-s-gap);
}

/* Eén kaart = foto + naam eronder */
.dbp-soort-kaart {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Foto-omhulsel met vaste 3:2 verhouding, foto bijgesneden (cover) */
.dbp-soort-foto {
    position: relative;
    aspect-ratio: var(--dbp-s-aspect);
    overflow: hidden;
    border-radius: var(--dbp-s-radius);
    background: #2a2a2a;
}
.dbp-soort-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.dbp-soort-foto-leeg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: #3a3a3a;
}

/* Bijschrift onder de foto */
.dbp-soort-naam {
    display: block;
    margin-top: .85rem;
    text-align: center;
    font-size: var(--dbp-s-cap-size);
    font-weight: 500;
    line-height: 1.3;
}

/* Hover: foto licht inzoomen */
.dbp-soort-kaart:hover .dbp-soort-foto img {
    transform: scale(1.05);
}

.dbp-soorten-leeg {
    text-align: center;
    padding: 4rem 1rem;
    opacity: .6;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
    .dbp-soorten-wrap { --dbp-s-gap: 32px; }
}
@media (max-width: 640px) {
    /* Op mobiel 1 kolom, zoals Squarespace */
    .dbp-soorten-wrap {
        --dbp-s-cols: 1;
        --dbp-s-gap: 28px;
        padding: 1.5rem 1rem 3rem;
    }
}