/* ==========================================================================
   dikkebirdpics — Bird trip galerij ([dbp_birdtrip])
   Pas hier vrij kleuren, afstanden, kolommen en hoogtes aan.
   De variabelen hieronder zijn de "knoppen" om mee te spelen.
   ========================================================================== */

.dbp-trip-grid {
    --dbp-trip-cols: 3;          /* aantal kolommen (overschreven door columns="") */
    --dbp-trip-gap: 18px;        /* ruimte tussen de foto's */
    --dbp-trip-maxw: 1400px;     /* maximale breedte van de galerij */
    --dbp-trip-radius: 2px;      /* afronding hoeken van de foto's */
    --dbp-trip-bg: #f4f2ec;      /* achtergrond achter een ladende foto */

    /* Echte masonry-look via CSS columns: foto's behouden hun eigen verhouding
       en puzzelen in elkaar (zoals de soort-detailpagina). Wil je een strak
       grid met vierkante tegels? Zie het blok "VARIANT: strak grid" onderaan. */
    column-count: var(--dbp-trip-cols);
    column-gap: var(--dbp-trip-gap);
    max-width: var(--dbp-trip-maxw);
    margin: 0 auto;
    padding: 0;
}

/* Eén foto in de galerij */
.dbp-trip-item {
    break-inside: avoid;          /* foto niet over 2 kolommen splitsen */
    margin: 0 0 var(--dbp-trip-gap) 0;
}

.dbp-trip-link {
    display: block;
    line-height: 0;               /* witruimte onder de img weg */
}

.dbp-trip-img {
    width: 100%;
    height: auto;                 /* natuurlijke verhouding behouden */
    display: block;
    border-radius: var(--dbp-trip-radius);
    background: var(--dbp-trip-bg);
    transition: opacity .3s ease, transform .4s ease;
}

.dbp-trip-link:hover .dbp-trip-img {
    transform: scale(1.015);
    opacity: .94;
}

/* Onderschrift onder een foto (alleen zichtbaar als de foto een caption heeft) */
.dbp-trip-caption {
    margin: 6px 2px 0;
    font-size: .9rem;
    line-height: 1.3;
    color: #555;
    font-style: italic;
}

/* Label dat de hele collectie beschrijft — alleen voor screenreaders.
   (Visueel verborgen, blijft wel leesbaar voor assistieve technologie.) */
.dbp-trip-collectie-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* --- Responsive: minder kolommen op smallere schermen --- */
@media (max-width: 1100px) {
    .dbp-trip-grid { column-count: 2; --dbp-trip-gap: 14px; }
}
@media (max-width: 640px) {
    .dbp-trip-grid { column-count: 1; }
}

/* ==========================================================================
   VARIANT: strak grid met gelijke vierkante tegels (optioneel)
   Wil je liever een nette rij/kolom-indeling i.p.v. masonry, haal dan de
   /* */ /* eromheen weg bij het blok hieronder. Dan worden alle foto's 1:1
   bijgesneden in een echt grid.
   --------------------------------------------------------------------------
.dbp-trip-grid {
    column-count: unset;
    display: grid;
    grid-template-columns: repeat(var(--dbp-trip-cols), 1fr);
    gap: var(--dbp-trip-gap);
}
.dbp-trip-item { margin: 0; }
.dbp-trip-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
   ========================================================================== */