/* ==========================================================================
   TK KLANTCASE GRID - MASTER STYLESHEET (FINAL)
   ========================================================================== */

/* --- 1. GRID CONTAINER & BASIS --- */
.tk-fullscreen-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 120px 50px; 
    width: 100vw !important; 
    margin-left: -50vw !important; 
    left: 50%; 
    padding: 80px 50px !important; 
    position: relative; 
}

.tk-grid-item {
    display: flex;
    flex-direction: column;
    height: 100%; 
    position: relative;
    z-index: 1; 
    overflow: visible; 
}

/* --- 2. VIDEO & MEDIA --- */
.tk-grid-video { 
    width: 100%; 
    aspect-ratio: 16/9; 
    background: #000; 
    margin-bottom: 20px; 
    position: relative; 
    overflow: hidden; 
    flex-shrink: 0;
}

.tk-grid-video iframe, 
.tk-grid-video img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100% !important; 
    height: 100% !important; 
    transform: translate(-50%, -50%); 
    object-fit: cover; 
}

/* --- 3. INFO ROW (TITEL + ICONS) --- */
.tk-grid-info-row {
    display: flex !important;
    flex-direction: row !important;  
    justify-content: space-between;  
    align-items: flex-start;         
    width: 100%;
    margin-top: 15px;
    flex-grow: 1;
}

.tk-grid-col-title {
    flex: 1;              
    min-width: 0;         
    padding-right: 20px;  
}

.tk-grid-col-usps {
    flex-shrink: 0;       
    width: auto;          
    display: flex;
    justify-content: flex-end; 
}

/* --- 4. USP ICONS (IN GRID) --- */
.tk-usp-grid-wrapper { 
    display: flex; 
    justify-content: flex-end; 
    gap: 15px; 
}

.tk-usp-grid-item {
    display: flex;
    flex-direction: column; 
    align-items: center;    
    text-align: center;
    width: 60px;            
}

.tk-usp-grid-item img { 
    width: 30px; 
    height: 30px; 
    filter: brightness(0); /* Zwart */
    margin-bottom: 3px; 
}

.tk-usp-grid-item span { 
    font-size: 9px; 
    text-transform: uppercase; 
    line-height: 1.2;
    display: block;
}

/* --- 5. REVEAL ANIMATIE --- */
.tk-grid-reveal { 
    height: 0; 
    opacity: 0; 
    overflow: hidden; 
    transition: all 0.4s ease; 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tk-grid-item:hover .tk-grid-reveal { 
    height: auto; 
    opacity: 1; 
    margin-top: 20px; 
}

.tk-reveal-inner {
    margin-top: auto; 
    padding-bottom: 20px; 
}

/* ==========================================================================
   FILTER BAR (DROPDOWN LEFT, ICONS RIGHT)
   ========================================================================== */

/* De Hoofdcontainer */
.tk-filter-bar {
    display: flex;
    flex-wrap: wrap; 
    align-items: center; 
    justify-content: space-between; /* Dropdown links, Iconen rechts */
    gap: 30px; 
    
    width: 100%;
    /* AANGEPAST: Minder marge onder de balk */
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.05); 
}

/* 1. De Dropdown Groep (Nu Links) */
.tk-filter-client-wrap {
    flex-shrink: 0; 
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Dropdown Container */
.tk-select-wrapper {
    position: relative;
    width: auto;
    display: inline-block;
}

/* De Dropdown styling (AANGEPAST: 55px hoog) */
.tk-filter-select {
    height: 55px; /* AANGEPAST */
    min-width: 220px;
    padding: 0 35px 0 15px; 
    
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(10, 15, 28, 0.2);
    border-radius: 4px;
    
    font-family: inherit;
    font-size: 14px;
    color: #0A0F1C;
    cursor: pointer;
    appearance: none; 
    transition: border-color 0.3s ease;
}

.tk-filter-select:hover, .tk-filter-select:focus {
    border-color: #FF0080;
    outline: none;
}

/* SVG Pijltje */
.tk-select-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.6;
    stroke: #0A0F1C; 
}

/* 2. USP Knoppen Groep (Nu Rechts) */
.tk-filter-usps {
    display: flex;
    flex-wrap: wrap; 
    gap: 10px;
    flex: 1; /* Neemt ruimte in */
    min-width: 300px;
    justify-content: flex-end; /* Iconen rechts uitlijnen */
}

/* De knop zelf */
.tk-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(10, 15, 28, 0.1); 
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 55px; /* Optioneel: match hoogte van dropdown voor strakke lijn */
}

.tk-filter-btn img {
    width: 20px;
    height: 20px;
    display: block;
}

.tk-filter-btn span.tk-filter-text {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #0A0F1C;
}

.tk-filter-btn.active {
    border-color: #0A0F1C !important;
    background-color: rgba(229, 226, 255, 0.5); 
}

/* ==========================================================================
   PAGINERING (RECHTS + CIJFERS)
   ========================================================================== */
.tk-pagination-wrapper-bottom {
    width: 100%;
    display: flex;
    justify-content: flex-end; 
    padding-top: 40px;
    padding-right: 50px; 
}

.tk-pagination-container.bottom {
    display: flex;
    gap: 20px; 
    counter-reset: tk-paging-counter; 
}

.tk-page-diamond {
    display: block;
    width: 35px; 
    height: 35px;
    background: url('/wp-content/uploads/2026/01/Diamand_Leeg.svg') no-repeat center/22px;
    border: none;
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative; 
    margin-bottom: 20px; 
}

.tk-page-diamond:hover { opacity: 0.8; }

.tk-page-diamond.active {
    background-image: url('/wp-content/uploads/2026/01/Diamand.svg');
    opacity: 1;
    transform: scale(1.1);
}

.tk-page-diamond::after {
    counter-increment: tk-paging-counter; 
    content: counter(tk-paging-counter); 
    position: absolute;
    top: 100%; 
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #0A0F1C; 
    opacity: 0.5; 
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.tk-page-diamond.active::after,
.tk-page-diamond:hover::after { opacity: 1; color: #FF0080; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    .tk-filter-bar {
        flex-direction: column; 
        align-items: flex-start; 
        gap: 20px;
    }
    .tk-filter-client-wrap { width: 100%; }
    .tk-filter-select { width: 100%; }
    
    .tk-filter-usps {
        width: 100%; 
        justify-content: flex-start; /* Iconen links op mobiel/tablet */
    }
}

@media (max-width: 1350px) {
    .tk-fullscreen-grid { 
        grid-template-columns: 1fr !important; 
        padding: 60px 30px !important; 
        gap: 80px 0; 
    }
    .tk-grid-reveal { 
        height: auto !important; 
        opacity: 1 !important; 
        margin-top: 20px !important; 
        overflow: visible !important;
    }
    .tk-pagination-wrapper-bottom {
        justify-content: center; 
        padding-right: 0;
    }
}

/* ==========================================================================
   DARK MODE OVERRIDES
   ========================================================================== */
body.show-dark-mode .tk-usp-grid-item img { filter: invert(1); }
body.show-dark-mode .tk-filter-select { border-color: #ffffff; color: #ffffff; }
body.show-dark-mode .tk-filter-select option { background-color: #0A0F1C; }
body.show-dark-mode .tk-select-arrow { stroke: #ffffff; }
body.show-dark-mode .tk-page-diamond { filter: invert(1) brightness(2); } 
body.show-dark-mode .tk-page-diamond::after { color: #ffffff; }
body.show-dark-mode .tk-page-diamond.active::after { color: #FF0080; }
body.show-dark-mode .tk-filter-btn.active { border-color: #FF0080 !important; color: #FF0080 !important; }
body.show-dark-mode .tk-filter-btn span.tk-filter-text { color: #ffffff; }
body.show-dark-mode .tk-filter-btn img { filter: invert(1); }


/* ==========================================================================
   FIX: CONTACT BLOK BREEDTE (Klantcase Archief)
   ========================================================================== */


/* Specifieke fix voor Synced Formulier Blok */
.kb-row-layout-id4376_398aa3-48 {
    width: 100% !important;
    max-width: 1290px !important; /* Of 1100px als je het nog smaller wilt */
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 8px; /* Optioneel: staat netjes als het een los blok is */
}

/* Specifieke fix voor Synced Formulier Blok */
.kb-row-layout-id4377_ca47bd-91 {
    width: 100% !important;
    max-width: 1290px !important; /* Of 1100px als je het nog smaller wilt */
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 8px; /* Optioneel: staat netjes als het een los blok is */
}

/* ==========================================================================
   MOBIELE OPTIMALISATIE GRID (Verberg USPs < 600px)
   ========================================================================== */
@media (max-width: 600px) {
    /* 1. Verberg de kolom met icoontjes */
    .tk-grid-col-usps {
        display: none !important;
    }

    /* 2. Zorg dat de titel nu de volledige breedte pakt */
    /* We resetten de 7fr 5fr verdeling naar 1 enkele kolom */
    .tk-grid-info-row.row-7-5 {
        display: block !important; /* Of grid-template-columns: 1fr; */
        grid-template-columns: 1fr !important;
    }

    .tk-grid-col-title {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Optioneel: Titel iets kleiner maken op mobiel als hij te groot is */
    .tk-grid-col-title h4 {
        font-size: 18px !important; /* Pas aan naar wens */
    }
}