/* ==========================================================================
   dikkebirdpics — Soort-detailpagina fotogrid (single-vogelsoort.php)
   bv. /waarnemingen/torenvalk  (WP: /vogelsoort/torenvalk)

   Masonry-puzzel in Squarespace-stijl:
     - 2 kolommen, paginabreed
     - foto's op hun NATUURLIJKE verhouding (niet bijsnijden) → passen als
       puzzelstukjes in elkaar
     - kleine tussenruimte (14px), zoals de live Squarespace-pagina

   Vrij aanpasbaar via de variabelen hieronder.
   Dit bestand overschrijft de oude vaste-hoogte .dbp-foto-grid regels.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Titelblok (NL / EN / Latijn) — gematcht op Squarespace
   Squarespace: Poppins, ~44.8px, gewicht 500, gecentreerd, Latijn cursief.
   -------------------------------------------------------------------------- */
.dbp-soort-header {
    text-align: center;
    padding: 3rem 1rem 2.25rem;
}
.dbp-soort-titel {
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(1.9rem, 4vw, 2.8rem);   /* 2.8rem ≈ 44.8px zoals Squarespace */
    font-weight: 500;                         /* medium, niet bold */
    line-height: 1.3;
    margin: 0;
}
/* Alle drie de namen even zwaar/kleur; alleen Latijn cursief */
.dbp-soort-titel em {
    font-style: italic;
    font-weight: 500;        /* niet lichter dan de rest */
    color: inherit;          /* niet gedempt */
}
/* Scheidingsteken " / " neutraal en met wat lucht eromheen */
.dbp-soort-divider {
    font-style: normal;
    font-weight: 500;
    opacity: .55;
    margin: 0 .35em;
}

.dbp-foto-grid {
    --dbp-f-cols: 2;          /* aantal kolommen op desktop */
    --dbp-f-gap:  14px;       /* tussenruimte (Squarespace ~14px) */
    --dbp-f-maxw: 1400px;     /* paginabreedte, gelijk aan Squarespace */

    /* CSS-kolommen = echte masonry zonder JavaScript */
    column-count: var(--dbp-f-cols);
    column-gap:   var(--dbp-f-gap);

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

    /* reset eventuele oude grid-instellingen */
    display: block;
    grid-template-columns: none;
}

/* Eén foto = puzzelstukje op natuurlijke hoogte */
.dbp-foto-item {
    position: relative;
    overflow: hidden;
    background: #2a2a2a;
    cursor: pointer;
    /* voorkom dat een item over een kolomgrens wordt gebroken */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: var(--dbp-f-gap);
}

/* Natuurlijke verhouding: GEEN vaste hoogte, GEEN crop */
.dbp-foto-item img {
    width: 100%;
    height: auto;            /* <-- was 320px fixed; dit maakt de puzzel */
    object-fit: contain;
    display: block;
    transition: transform .4s ease;
}
.dbp-foto-item:hover img {
    transform: scale(1.03);
}

/* Bijschrift (verschijnt onderin bij hover, zoals voorheen) */
.dbp-foto-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .6rem .8rem;
    background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
    color: #fff;
    font-size: .85rem;
    opacity: 0;
    transition: opacity .3s ease;
}
.dbp-foto-item:hover .dbp-foto-caption {
    opacity: 1;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .dbp-foto-grid { --dbp-f-gap: 10px; }
}
@media (max-width: 600px) {
    /* Op mobiel 1 kolom */
    .dbp-foto-grid {
        --dbp-f-cols: 1;
        padding: 0 1rem 3rem;
    }
}