/* ============================================================
   Marey Tabs Block – Frontend CSS
   Safari iOS compatible: hardcoded kleuren, geen all:unset
   ============================================================ */

.marey-tabs {
    background:  #0a0a0a;
    color:       #ffffff;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding:     clamp(48px, 7vw, 96px) clamp(20px, 5vw, 80px);
    box-sizing:  border-box;
    width:       100%;
}

.mry-tabs-label {
    font-size:      0.72rem;
    font-weight:    500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.45);
    margin:         0 0 10px;
    display:        block;
    background:     none;
    padding:        0;
}

.mry-tabs-heading {
    font-size:      clamp(1.6rem, 3.5vw, 2.5rem);
    font-weight:    700;
    line-height:    1.15;
    letter-spacing: -0.025em;
    color:          #ffffff;
    margin:         0 0 clamp(32px, 5vw, 60px);
    max-width:      640px;
    display:        block;
    background:     none;
    padding:        0;
}

.marey-tabs .mry-tab-btn:hover .mry-tab-title {
    color: rgb(255, 0, 231) !important;
}

/* ── Desktop grid ── */
.mry-tabs-wrapper {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:    auto;
    gap:                   28px;
    align-items:           start;
    width:                 100%;
}

/* ── Afbeeldingspanel (rechts, sticky) ── */
.mry-image-panel {
    grid-column:   2;
    grid-row:      1;
    position:      sticky;
    top:           80px;
    border-radius: 24px;
    overflow:      hidden;
    background:    #191919;
    padding-top:   75%;
    height:        0;
    width:         100%;
    box-sizing:    border-box;
}

.mry-tab-img {
    position:       absolute;
    top:            0;
    left:           0;
    right:          0;
    bottom:         0;
    opacity:        0;
    transition:     opacity 0.4s ease;
    pointer-events: none;
}

.mry-tab-img.mry-active {
    opacity:        1;
    pointer-events: auto;
}

.mry-tab-img img,
.mry-tab-video {
    position:   absolute !important;
    top:        0 !important;
    left:       0 !important;
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
}

.mry-tab-img-placeholder {
    position:        absolute;
    top:             0;
    left:            0;
    right:           0;
    bottom:          0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient(135deg, #1a1a1a 0%, #2a1a2e 100%);
    color:           rgba(255,255,255,0.45);
    font-size:       0.9rem;
    text-align:      center;
    padding:         24px;
    box-sizing:      border-box;
}

/* ── Tab navigatie (links) ── */
.mry-tabs-nav {
    grid-column:    1;
    grid-row:       1;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    width:          100%;
    margin:         0;
    padding:        0;
    list-style:     none;
}

/* ── Tab button – gerichte reset, geen all:unset ── */
.mry-tab-btn {
    -webkit-appearance: none;
    appearance:         none;
    border:             none;
    outline:            none;
    cursor:             pointer;
    /* Layout */
    display:            flex;
    flex-direction:     column;
    gap:                10px;
    padding:            24px;
    padding-right:      60px;
    /* Stijl */
    background:         #191919;
    border-radius:      24px;
    text-align:         left;
    box-sizing:         border-box;
    width:              100%;
    position:           relative;
    overflow:           hidden;
    transition:         background 0.2s ease;
    /* Typografie */
    font-family:        'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:          1rem;
    color:              #ffffff;
    text-decoration:    none;
}

.mry-tab-btn::before {
    content:       '';
    position:      absolute;
    left:          0;
    top:           0;
    bottom:        0;
    width:         3px;
    background:    rgb(255, 0, 231);
    border-radius: 0 2px 2px 0;
    opacity:       0;
    transition:    opacity 0.2s;
}

.mry-tab-btn:hover           { background: #1f1f1f; }
.mry-tab-btn.mry-active      { background: #0d0d0f; }
.mry-tab-btn.mry-active::before { opacity: 1; }

.mry-tab-btn:focus-visible {
    outline:        2px solid rgb(255, 0, 231);
    outline-offset: 2px;
}

.mry-tab-title {
    font-size:   1rem;
    font-weight: 400;
    color:       rgb(138, 0, 244);
    display:     block;
    line-height: 1.3;
    transition:  color 0.2s;
    background:  none;
    margin:      0;
    padding:     0;
}

.mry-tab-btn.mry-active .mry-tab-title {
    color: rgb(255, 0, 231);
}

.mry-tab-desc {
    font-size:   0.85rem;
    line-height: 1.65;
    color:       rgba(255,255,255,0.55);
    display:     none;
    margin:      0;
    padding:     0;
    background:  none;
    text-align:  left;
}

.mry-tab-btn.mry-active .mry-tab-desc {
    display: block;
}

.mry-tab-arrow {
    position:        absolute;
    right:           20px;
    top:             22px;
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background:      rgb(255, 0, 231);
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0;
    transition:      opacity 0.2s;
}

.mry-tab-btn.mry-active .mry-tab-arrow { opacity: 1; }

/* ============================================================
   MOBIEL
   ============================================================ */
@media (max-width: 768px) {

    .marey-tabs {
        padding: 48px 0 32px !important;
    }

    .mry-tabs-label {
        padding-left:  20px !important;
        padding-right: 20px !important;
    }

    .mry-tabs-heading {
        padding-left:  20px !important;
        padding-right: 20px !important;
    }

    .mry-tabs-wrapper {
        display:               flex !important;
        flex-direction:        column !important;
        grid-template-columns: unset !important;
        gap:                   0 !important;
    }

    .mry-image-panel {
        order:         -1 !important;
        grid-column:   unset !important;
        grid-row:      unset !important;
        position:      sticky !important;
        top:           0 !important;
        z-index:       20 !important;
        border-radius: 0 !important;
        width:         100% !important;
        padding-top:   56.25% !important;
        height:        0 !important;
        margin:        0 !important;
    }

    .mry-tab-img,
    .mry-tab-img-placeholder {
        position: absolute !important;
        top:      0 !important;
        left:     0 !important;
        right:    0 !important;
        bottom:   0 !important;
    }

    .mry-tab-img img {
        position: absolute !important;
        top:      0 !important;
        left:     0 !important;
        width:    100% !important;
        height:   100% !important;
    }

    .mry-tabs-nav {
        order:       1 !important;
        padding:     16px 12px 32px !important;
        gap:         8px !important;
        grid-column: unset !important;
        grid-row:    unset !important;
    }

    .mry-tab-btn {
        border-radius: 16px !important;
        padding:       20px !important;
        padding-right: 56px !important;
    }

    .mry-tab-btn::before {
        width:         100% !important;
        height:        3px !important;
        top:           auto !important;
        bottom:        0 !important;
        left:          0 !important;
        right:         0 !important;
        border-radius: 0 0 2px 2px !important;
    }

    .mry-tab-desc {
        display:     none !important;
    }

    .mry-tab-btn.mry-active .mry-tab-desc {
        display: block !important;
    }
}