/* ==========================================================================
   dikkebirdpics — Categorie-grid ([dbp_categorie_grid])
   Pas hier vrij kleuren, afstanden en hoogtes aan.
   ========================================================================== */

.dbp-cat-grid {
    --dbp-cols: 3;              /* wordt overschreven door de shortcode columns="" */
    --dbp-gap: 54px;           /* ruimte tussen tegels (zoals dikkebirdpics.nl) */
    --dbp-aspect: 3 / 4;       /* verhouding tegel B:H — 3:4 staand, zoals Squarespace */
    --dbp-radius: 0px;         /* afronding hoeken (Squarespace = recht) */

    display: grid;
    grid-template-columns: repeat(var(--dbp-cols), 1fr);
    gap: var(--dbp-gap);
    max-width: 1400px;         /* paginabreed, zoals de site-max van Squarespace */
    margin: 0 auto;
    padding: 0;
}

/* Eén tegel = klikbare foto met naam-overlay */
.dbp-cat-tegel {
    position: relative;
    display: block;
    aspect-ratio: var(--dbp-aspect);
    overflow: hidden;
    border-radius: var(--dbp-radius);
    text-decoration: none;
    background: #2a2a2a;
}

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

/* Leeg-state (geen foto) */
.dbp-cat-tegel-leeg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: #3a3a3a;
}

/* Donkere gradient onderaan zodat de naam leesbaar is */
.dbp-cat-tegel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
                rgba(0,0,0,0) 45%,
                rgba(0,0,0,.65) 100%);
    transition: background .3s ease;
}

/* De categorienaam */
.dbp-cat-tegel-naam {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    z-index: 2;
    color: #fff;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* Hover: foto licht inzoomen, overlay iets donkerder */
.dbp-cat-tegel:hover .dbp-cat-tegel-img {
    transform: scale(1.06);
}
.dbp-cat-tegel:hover::after {
    background: linear-gradient(to bottom,
                rgba(0,0,0,.1) 30%,
                rgba(0,0,0,.75) 100%);
}

/* --- Responsive --- */
@media (max-width: 1100px) {
    .dbp-cat-grid { --dbp-gap: 32px; }
}
@media (