/* jdb-luxe-touch.css: tikdoelen en kleine schermen (responsive-ronde 13 okt 2026).
 *
 * Laadt als laatste luxe-laag. Vergroot het klikvlak van kleine links en
 * knoppen tot minimaal 44px op touch en smalle schermen, zonder de layout te
 * verschuiven: verticale padding wordt met een even grote negatieve marge
 * gecompenseerd, of een onzichtbaar ::after-vlak vergroot het doel.
 */

@media (pointer: coarse), (max-width: 1023px) {

    /* Logo in header en footer (29-37px hoog). */
    .jdbh-logo,
    .jdb-sf__logo {
        padding-block: 8px;
        margin-block: -8px;
    }

    /* Tekstlinks in footer, call-to-actions en broodkruimel (20-30px hoog). */
    .jdb-goto__phone,
    .jdb-sf__phone-link,
    .jdb-sf__map-ext,
    .jdb-sf__legal a,
    .jdb-phero__crumbs a,
    .jdb-pband__phone,
    .jdb-pstyles__cta {
        display: inline-block;
        padding-block: 10px;
        margin-block: -10px;
    }

    /* Telefoon en e-mail staan dicht onder elkaar: vlakken mogen elkaar niet overlappen. */
    .jdb-sf__bigphone {
        padding-block: 4px;
        margin-block: -4px;
    }

    .jdb-sf__mail {
        padding-block: 7px;
        margin-block: -7px;
    }

    .jdb-sf__top {
        padding-block: 5px;
        margin-block: -5px;
    }

    /* Stappen in de ontwerpconfigurator (38px hoog). */
    .jdb-cfg__step { min-height: 44px; }

    /* Inklapknop van de contactbalk (27px): onzichtbaar vlak van 45px eromheen. */
    .jdb-stickycta__toggle::after {
        content: "";
        position: absolute;
        inset: -9px;
    }
}

/* Configurator op heel smalle schermen: lange stijlnamen afbreken in plaats van afkappen. */
@media (max-width: 380px) {
    .jdb-cfg--steps .jdb-cfg__options--cards .jdb-cfg__label {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        hyphens: auto;
        font-size: 0.72rem;
    }
}

/* Zwevende contactbalk op mobiel: ruimte onder de footer zodat "Naar boven"
   en het woordmerk aan het einde van de pagina niet worden afgedekt. */
@media (max-width: 1023px) {
    .jdb-sf { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)); }
}

/* Configurator: op smalle schermen de teller op een eigen regel boven Vorige/Volgende. */
@media (max-width: 400px) {
    .jdb-cfg__nav {
        grid-template-columns: auto 1fr;
        row-gap: 0.75rem;
    }

    .jdb-cfg__count {
        grid-column: 1 / -1;
        grid-row: 1;
        text-align: center;
    }

    .jdb-cfg__prev { grid-row: 2; grid-column: 1; }
    .jdb-cfg__next { grid-row: 2; grid-column: 2; justify-self: end; }
}