/*
 * Vervanging van de Elementor Pro "Flip Box" widget.
 *
 * Het origineel gebruikte flip_effect = "fade" met identieke voor- en achterkant,
 * op één verschil na: de achterkant toonde een knop. Het visuele effect was dus
 * geen 3D-flip maar een cross-fade waarbij de knop verschijnt bij hover.
 *
 * Dit reproduceert dat gedrag met standaard CSS op Elementor Free-elementen.
 * Er is geen Elementor Pro code gekopieerd of nagebouwd.
 */

.vdw-card {
    transition: transform .35s ease, box-shadow .35s ease;
    overflow: hidden;
}

.vdw-card:hover,
.vdw-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

/* Knop vervaagt in bij hover, net als de achterkant van de oorspronkelijke flip box */
.vdw-card .vdw-card-btn {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
}

.vdw-card:hover .vdw-card-btn,
.vdw-card:focus-within .vdw-card-btn {
    opacity: 1;
    transform: translateY(0);
}

/*
 * Toegankelijkheid en aanraakschermen: waar hover niet bestaat of de gebruiker
 * bewegingsreductie heeft ingesteld, is de knop altijd zichtbaar. Anders zou de
 * call-to-action op mobiel onbereikbaar zijn.
 */
@media (hover: none), (prefers-reduced-motion: reduce) {
    .vdw-card .vdw-card-btn {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .vdw-card:hover {
        transform: none;
    }
}

/* Toetsenbordfocus zichtbaar houden binnen de kaart */
.vdw-card .vdw-card-btn a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}