/**
 * VDB Visuals — mobile.css
 * Uitsluitend mobiele/tablet overrides.
 * Desktop vanaf 992px blijft ongemoeid.
 * dotPixel | www.dotpixel.be
 */

/* ══════════════════════════════════════════════════
   GEEN HORIZONTALE SCROLL
══════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    img,
    video,
    iframe,
    table {
        max-width: 100% !important;
    }
}

/* ══════════════════════════════════════════════════
   HERO MOBIEL — tekst kleiner + netjes linksonder
   Desktop blijft onaangeraakt. Alleen max-width 767px.
══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .slider-area,
    .slider-area .slider-item-active,
    .slider-area .slider-item,
    .slider-area .slider-height {
        min-height: 100svh !important;
    }

    .slider-area {
        overflow: hidden !important;
    }

    .slider-area .slider-item {
        position: relative !important;
        overflow: hidden !important;
    }

    .slider-area .slider-height {
        height: 100svh !important;
        background-position: center center !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    /* Centrale hero-tekst op mobiel rustiger, smaller en links geplaatst. */
    .slide-center-wrap {
        position: absolute !important;
        left: 24px !important;
        right: 24px !important;
        bottom: 38% !important;
        z-index: 6 !important;
        width: auto !important;
        max-width: calc(100% - 48px) !important;
        padding: 0 !important;
        text-align: left !important;
        transform: none !important;
        pointer-events: none !important;
    }

    .slide-center-text {
        max-width: 330px !important;
        margin: 0 0 2px 0 !important;
        font-size: clamp(22px, 6.4vw, 29px) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.035em !important;
        text-align: left !important;
        text-shadow: 0 3px 20px rgba(0, 0, 0, 0.62) !important;
        -webkit-line-clamp: 2 !important;
    }

    .slide-first-letter {
        font-size: 1.05em !important;
        line-height: 1 !important;
    }

    .slide-signature {
        display: block !important;
        width: max-content !important;
        max-width: 70vw !important;
        margin: -2px 0 0 76px !important;
        font-size: clamp(22px, 7.2vw, 34px) !important;
        line-height: 1 !important;
        letter-spacing: 2px !important;
        opacity: .9 !important;
        text-shadow: 0 3px 18px rgba(0, 0, 0, 0.48) !important;
    }

    .hero__caption h2,
    .hero__caption2 h2 {
        font-size: clamp(17px, 5vw, 22px) !important;
        line-height: 1.25 !important;
    }

    /* Categorie + omschrijving linksonder, boven de thumbnails. */
    .slider-caption2 {
        position: absolute !important;
        inset: 0 !important;
        z-index: 8 !important;
        pointer-events: none !important;
    }

    .slider-caption2 .container,
    .slider-caption2 .row,
    .slider-caption2 [class*="col-"] {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .slide-content2 {
        position: absolute !important;
        left: 24px !important;
        right: 24px !important;
        bottom: 118px !important;
        bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 10 !important;
        width: auto !important;
        max-width: 325px !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    .slide-content2 h4 {
        display: flex !important;
        align-items: baseline !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin: 0 0 7px 0 !important;
        padding: 0 !important;
        font-size: clamp(16px, 4.45vw, 21px) !important;
        line-height: 1.14 !important;
        font-weight: 400 !important;
        letter-spacing: -0.025em !important;
        color: #ffffff !important;
        text-shadow: 0 3px 18px rgba(0, 0, 0, 0.62) !important;
    }

    .slide-content2 h4 dd {
        display: inline-flex !important;
        align-items: baseline !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: clamp(18px, 5.4vw, 24px) !important;
        line-height: 1 !important;
        font-weight: 300 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
    }

    .slide-content2 h4 span {
        display: inline !important;
        max-width: min(255px, 72vw) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: inherit !important;
        line-height: inherit !important;
        color: #ffffff !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.76) !important;
        padding-bottom: 1px !important;
    }

    .slide-content2 p {
        max-width: 300px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: clamp(12.5px, 3.65vw, 15px) !important;
        line-height: 1.42 !important;
        font-weight: 300 !important;
        color: rgba(255, 255, 255, 0.94) !important;
        text-shadow: 0 3px 18px rgba(0, 0, 0, 0.62) !important;
    }

    .slider-item p {
        padding-bottom: 0 !important;
    }

    /* Thumbnails iets compacter en gecentreerd zodat de caption ademruimte krijgt. */
    .slider-nav {
        width: min(82vw, 320px) !important;
        right: 50% !important;
        bottom: 34px !important;
        bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
        transform: translateX(50%) !important;
        z-index: 9 !important;
    }

    .slider-area .slider-nav .slider-thumb {
        height: 62px !important;
        border-radius: 8px !important;
    }

    .slider-area .slider-nav .slider-thumb img {
        height: 62px !important;
        border-radius: 8px !important;
        object-fit: cover !important;
    }
}

@media (max-width: 380px) {
    .slide-center-wrap {
        left: 20px !important;
        right: 20px !important;
        bottom: 39% !important;
    }

    .slide-center-text {
        max-width: 292px !important;
        font-size: clamp(20px, 6.2vw, 25px) !important;
    }

    .slide-signature {
        margin-left: 60px !important;
        font-size: clamp(20px, 7vw, 30px) !important;
    }

    .slide-content2 {
        left: 20px !important;
        right: 20px !important;
        bottom: 108px !important;
        bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
        max-width: 292px !important;
    }

    .slide-content2 h4 {
        font-size: clamp(15px, 4.25vw, 19px) !important;
    }

    .slide-content2 h4 dd {
        font-size: clamp(17px, 5vw, 22px) !important;
    }

    .slide-content2 p {
        max-width: 275px !important;
        font-size: clamp(12px, 3.5vw, 14px) !important;
        line-height: 1.38 !important;
    }

    .slider-nav {
        width: min(84vw, 292px) !important;
        bottom: 28px !important;
        bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .slider-area .slider-nav .slider-thumb,
    .slider-area .slider-nav .slider-thumb img {
        height: 56px !important;
    }
}

@media (max-width: 767px) and (max-height: 740px) {
    .slide-center-wrap {
        bottom: 41% !important;
    }

    .slide-center-text {
        font-size: clamp(19px, 5.8vw, 25px) !important;
        line-height: 1.1 !important;
    }

    .slide-signature {
        font-size: clamp(20px, 6.8vw, 30px) !important;
    }

    .slide-content2 {
        bottom: 102px !important;
        bottom: calc(102px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .slide-content2 p {
        line-height: 1.34 !important;
    }

    .slider-area .slider-nav .slider-thumb,
    .slider-area .slider-nav .slider-thumb img {
        height: 54px !important;
    }
}

/* ══════════════════════════════════════════════════
   OUDE MOBIELE MENU'S NEUTRALISEREN
   SlickNav wordt niet meer gebruikt voor de navigatie.
   Deze selectors blijven alleen staan om oude/cached output te verbergen.
══════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .mobile_menu,
    .slicknav_menu,
    .slicknav_nav,
    .slicknav_btn {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ══════════════════════════════════════════════════
   HEADER OP MOBIEL/TABLET
══════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .header-area {
        z-index: 99990 !important;
    }

    .header-area .main-header {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
        background: linear-gradient(
            to bottom,
            rgba(23, 23, 27, 0.82) 0%,
            rgba(23, 23, 27, 0.44) 68%,
            rgba(23, 23, 27, 0.02) 100%
        ) !important;
    }

    .header-area .main-header.is-scrolled,
    .header-area .main-header.sticky-bar {
        background: rgba(43, 44, 50, 0.96) !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        box-shadow: 0 12px 38px rgba(0, 0, 0, 0.26) !important;
    }

    .header-area .logo {
        padding-top: 0 !important;
    }

    .header-area .logo img {
        height: 42px !important;
        max-height: 42px !important;
        max-width: 168px !important;
    }

    .header-area .main-header.is-scrolled .logo img,
    .header-area .main-header.sticky-bar .logo img {
        height: 36px !important;
        max-height: 36px !important;
    }
}

/* ══════════════════════════════════════════════════
   HAMBURGER BUTTON
══════════════════════════════════════════════════ */
.vdb-mobile-toggle {
    display: none;
}

@media (max-width: 991.98px) {
    .vdb-mobile-toggle {
        width: 48px;
        height: 48px;
        border: 1px solid rgba(246, 213, 185, 0.38);
        border-radius: 999px;
        background:
            radial-gradient(circle at 30% 20%, rgba(246, 213, 185, 0.22), transparent 42%),
            rgba(43, 44, 50, 0.42);
        box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0;
        margin: 0;
        cursor: pointer;
        position: relative;
        z-index: 100002;
        appearance: none;
        -webkit-appearance: none;
        transition:
            background .25s ease,
            border-color .25s ease,
            transform .25s ease,
            box-shadow .25s ease;
    }

    .vdb-mobile-toggle:hover,
    .vdb-mobile-toggle:focus-visible {
        border-color: rgba(246, 213, 185, 0.72);
        background:
            radial-gradient(circle at 30% 20%, rgba(246, 213, 185, 0.28), transparent 42%),
            rgba(43, 44, 50, 0.72);
        outline: none;
        transform: translateY(-1px);
    }

    .vdb-mobile-toggle-line {
        width: 23px;
        height: 2px;
        border-radius: 99px;
        background: #ffffff;
        display: block;
        transition:
            transform .28s ease,
            opacity .22s ease,
            width .22s ease,
            background .22s ease;
    }

    .vdb-mobile-toggle-line:nth-child(2) {
        width: 17px;
        margin-left: 6px;
    }

    body.vdb-mobile-menu-open .vdb-mobile-toggle {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.16);
        box-shadow: none;
    }

    body.vdb-mobile-menu-open .vdb-mobile-toggle-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
        background: #f6d5b9;
    }

    body.vdb-mobile-menu-open .vdb-mobile-toggle-line:nth-child(2) {
        opacity: 0;
        transform: translateX(8px);
    }

    body.vdb-mobile-menu-open .vdb-mobile-toggle-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
        background: #f6d5b9;
    }
}

/* ══════════════════════════════════════════════════
   FULLSCREEN MOBILE MENU
══════════════════════════════════════════════════ */
.vdb-mobile-menu {
    display: none;
}

@media (max-width: 991.98px) {
    .vdb-mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 100000;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .3s ease, visibility .3s ease;
    }

    .vdb-mobile-menu.is-open,
    body.vdb-mobile-menu-open .vdb-mobile-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .vdb-mobile-menu-bg {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 20% 12%, rgba(246, 213, 185, 0.16), transparent 32%),
            radial-gradient(circle at 88% 78%, rgba(204, 152, 127, 0.22), transparent 38%),
            linear-gradient(145deg, #202126 0%, #2b2c32 46%, #15161a 100%);
    }

    .vdb-mobile-menu-bg::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
        background-size: 42px 42px;
        mask-image: radial-gradient(circle at center, rgba(0,0,0,.82), transparent 76%);
        -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,.82), transparent 76%);
        pointer-events: none;
    }

    .vdb-mobile-menu-panel {
        position: relative;
        z-index: 2;
        min-height: 100vh;
        min-height: 100dvh;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 96px 24px 34px;
        overflow-y: auto;
        transform: translateY(16px) scale(.985);
        opacity: 0;
        transition: transform .34s ease, opacity .34s ease;
    }

    .vdb-mobile-menu.is-open .vdb-mobile-menu-panel,
    body.vdb-mobile-menu-open .vdb-mobile-menu-panel {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    .vdb-mobile-menu-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 17px 18px;
        pointer-events: none;
    }

    .vdb-mobile-menu-logo,
    .vdb-mobile-menu-close {
        pointer-events: auto;
    }

    .vdb-mobile-menu-logo img {
        height: 42px;
        width: auto;
        display: block;
        filter: brightness(0) invert(1);
    }

    .vdb-mobile-menu-close {
        width: 48px;
        height: 48px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        line-height: 1;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        transition: background .25s ease, border-color .25s ease, color .25s ease;
    }

    .vdb-mobile-menu-close:hover,
    .vdb-mobile-menu-close:focus-visible {
        background: rgba(246, 213, 185, 0.14);
        border-color: rgba(246, 213, 185, 0.42);
        color: #f6d5b9;
        outline: none;
    }

    .vdb-mobile-nav {
        width: min(100%, 390px);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        text-align: center;
    }

    .vdb-mobile-menu-link {
        position: relative;
        display: block !important;
        width: 100%;
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.88) !important;
        font-family: 'Nunito', sans-serif !important;
        font-size: clamp(23px, 7vw, 34px) !important;
        font-weight: 700 !important;
        line-height: 1.12 !important;
        letter-spacing: .01em !important;
        text-decoration: none !important;
        background: transparent !important;
        transition: color .22s ease, transform .22s ease;
    }

    .vdb-mobile-menu-link:first-child {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .vdb-mobile-menu-link:hover,
    .vdb-mobile-menu-link:focus-visible,
    .vdb-mobile-menu-link.is-active {
        color: #f6d5b9 !important;
        transform: translateX(2px);
        outline: none;
    }

    .vdb-mobile-actions {
        width: min(100%, 390px);
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 28px;
    }

    .vdb-mobile-action {
        min-height: 52px;
        border-radius: 999px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 13px 20px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        letter-spacing: 1.5px !important;
        line-height: 1 !important;
        text-transform: uppercase;
        text-decoration: none !important;
        transition: transform .24s ease, box-shadow .24s ease, background .24s ease, border-color .24s ease;
    }

    .vdb-mobile-action-client {
        background: #cc987f !important;
        border: 1px solid #cc987f !important;
        color: #ffffff !important;
        box-shadow: 0 18px 42px rgba(204, 152, 127, 0.24);
    }

    .vdb-mobile-action-book {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(246, 213, 185, 0.46) !important;
        color: #ffffff !important;
    }

    .vdb-mobile-action:hover,
    .vdb-mobile-action:focus-visible {
        transform: translateY(-2px);
        outline: none;
    }

    .vdb-mobile-action-client:hover,
    .vdb-mobile-action-client:focus-visible {
        background: #b07d64 !important;
        border-color: #b07d64 !important;
        color: #ffffff !important;
    }

    .vdb-mobile-action-book:hover,
    .vdb-mobile-action-book:focus-visible {
        background: rgba(246, 213, 185, 0.12) !important;
        border-color: rgba(246, 213, 185, 0.72) !important;
        color: #f6d5b9 !important;
    }

    .vdb-mobile-socials {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 28px;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .vdb-mobile-socials a {
        width: 48px;
        height: 48px;
        border-radius: 999px;
        border: 1px solid rgba(204, 152, 127, 0.48);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        color: #f6d5b9 !important;
        font-size: 18px;
        text-decoration: none !important;
        background: rgba(255, 255, 255, 0.035);
        transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
    }

    .vdb-mobile-socials a:hover,
    .vdb-mobile-socials a:focus-visible {
        background: #cc987f;
        border-color: #cc987f;
        color: #ffffff !important;
        transform: translateY(-2px);
        outline: none;
    }

    body.vdb-mobile-menu-open {
        overflow: hidden !important;
        touch-action: none;
    }
}

@media (max-width: 380px) {
    .vdb-mobile-menu-panel {
        padding-left: 18px;
        padding-right: 18px;
    }

    .vdb-mobile-menu-link {
        font-size: clamp(21px, 7vw, 28px) !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .vdb-mobile-actions {
        margin-top: 22px;
    }

    .vdb-mobile-action {
        min-height: 48px;
        font-size: 11px !important;
    }
}