/* Figma 34:2334: 30px card rhythm, 20px row gap, 50px alternating card offset.
   Images retain the existing 410:510 ACF/doorkiesblokken crop. */
.berichten :is(.berichten_grid, .alm-listing),
.bericht_kaart {
    --kaart_gap: 3rem;
    --kaart_offset: 5rem;
}

.berichten :is(.berichten_grid, .alm-listing) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--kaart_gap) * 2 / 3) var(--kaart_gap);
}

.berichten :is(.berichten_grid, .alm-listing) > .bericht_kaart:nth-child(even of .bericht_kaart) {
    padding-top: var(--kaart_offset);
}

.bericht_kaart_link {
    display: flex;
    flex-direction: column;
    gap: var(--kaart_gap);
    color: var(--espresso);
    text-align: center;
    text-decoration: none !important;
}

.bericht_kaart_link:hover,
.bericht_kaart_link:focus-visible {
    color: var(--espresso);
}

.bericht_kaart_afbeelding {
    position: relative;
    overflow: hidden;
    aspect-ratio: 410 / 510;
    background: var(--licht-taupe);
}

.bericht_kaart_afbeelding picture,
.bericht_kaart_afbeelding img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bericht_kaart_labels {
    position: absolute;
    /* Figma 31:2218: 6.5px side inset, 6px bottom inset and label gap. */
    inset-inline: 0.65rem;
    bottom: calc(var(--kaart_gap) / 5);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--kaart_gap) / 5);
}

.bericht_kaart_label {
    padding: calc(var(--kaart_gap) / 2);
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
    color: var(--espresso);
    background: var(--wit, #fff);
}

/* Reuse global H3 sizing; the card design uses wider heading tracking. */
#content .bericht_kaart h3 {
    line-height: 1.15;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

#content .bericht_kaart:hover h3,
#content .bericht_kaart_link:focus-visible h3 {
    color: var(--taupe);
}

.berichten_slider {
    overflow: clip;
}

.berichten_slider .berichten_grid.tns-slider {
    display: block;
}

.berichten_slider .tns-horizontal.tns-subpixel > .tns-item {
    display: inline-block;
    vertical-align: top;
    float: none;
}

.berichten_slider .tns-controls {
    display: flex;
    justify-content: center;
    gap: 5rem; /* Matches the 50px navigation spacing of doorkiesblokken. */
    margin-bottom: 3rem;
}

.berichten_slider .tns-controls button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--taupe);
    font-size: var(--h3-font-size);
    line-height: var(--heading-line-height);
}

.berichten_slider .tns-controls button:hover,
.berichten_slider .tns-controls button:focus-visible {
    color: var(--espresso);
}

.berichten_slider .tns-controls button[disabled] {
    opacity: 0.3;
}

.berichten_slider .tns-slider {
    cursor: grab;
}

.berichten_slider .tns-slider:active {
    cursor: grabbing;
}

.berichten_buiten_kader .tns-ovh {
    overflow: visible !important;
}

@media (max-width:767px) {
    .berichten :is(.berichten_grid, .alm-listing) {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--kaart_gap);
    }

    .berichten :is(.berichten_grid, .alm-listing) > .bericht_kaart:nth-child(even of .bericht_kaart) {
        padding-top: 0;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .berichten :is(.berichten_grid, .alm-listing) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


}