/* =============================================================================
   Digidaad Reviews – Card & Slider/Grid CSS v1.0.1
   ============================================================================= */

:root {
    --dgdm-primary:       #C85A1A;
    --dgdm-primary-dark:  #A84510;
    --dgdm-primary-light: #FAF0E6;
    --dgdm-text:          #3A2010;
    --dgdm-text-muted:    #9A7A60;
    --dgdm-bg:            #FAF5EC;
    --dgdm-white:         #FFFDF8;
    --dgdm-border:        #E8D4C0;
    --dgdm-error:         #B91C1C;
    --dgdm-success:       #5A7A2A;
}

/* --------------------------------------------------------------------------
   Grid — specifiek genoeg om thema te winnen
   -------------------------------------------------------------------------- */

.drev-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.drev-grid--cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.drev-grid--cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.drev-grid--cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.drev-grid .drev-card,
.drev-swiper .drev-card {
    background: var(--dgdm-white) !important;
    border: 1px solid var(--dgdm-border) !important;
    border-radius: 10px !important;
    padding: 16px 18px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
    min-height: 150px !important;
}

.drev-grid .drev-card-top,
.drev-swiper .drev-card-top {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.drev-grid .drev-avatar,
.drev-swiper .drev-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    display: block !important;
    margin: 0 !important;
}

.drev-avatar--initial {
    background: var(--dgdm-primary) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    line-height: 40px !important;
    padding-left: 2px !important;
    text-align: center !important;
    user-select: none !important;
}

.drev-grid .drev-card-meta,
.drev-swiper .drev-card-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.drev-grid .drev-reviewer,
.drev-swiper .drev-reviewer {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--dgdm-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.drev-grid .drev-company,
.drev-swiper .drev-company {
    font-size: 0.85rem !important;
    color: var(--dgdm-text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.drev-grid .drev-card-stars,
.drev-swiper .drev-card-stars {
    display: flex !important;
    gap: 1px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding-top: 1px !important;
}

.drev-star-icon {
    font-size: 0.88rem !important;
    color: var(--dgdm-border) !important;
    line-height: 1 !important;
}

.drev-star-icon--on {
    color: #E8A020 !important;
}

.drev-grid .drev-card-desc,
.drev-swiper .drev-card-desc {
    font-size: 0.95rem !important;
    color: var(--dgdm-text) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Details/summary uitklap — pure CSS, geen JS */
.drev-card-details {
    margin-bottom: auto !important;
}

.drev-card-details summary {
    list-style: none !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.drev-card-details summary::-webkit-details-marker,
.drev-card-details summary::marker {
    display: none !important;
}

/* Verberg lees-minder standaard, toon lees-meer */
.drev-read-less { display: none !important; }
.drev-read-more { display: inline-flex !important; }

/* Als open: wissel om */
.drev-card-details[open] .drev-read-more { display: none !important; }
.drev-card-details[open] .drev-read-less { display: inline-flex !important; }

/* Verberg de korte tekst als open */
.drev-card-details[open] summary .drev-card-desc { display: none !important; }

.drev-read-more,
.drev-read-less {
    align-items: center !important;
    gap: 3px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--dgdm-text-muted) !important;
    letter-spacing: 0.03em !important;
    user-select: none !important;
}

.drev-card-details:hover .drev-read-more,
.drev-card-details:hover .drev-read-less {
    color: var(--dgdm-primary) !important;
}

/* Volledige tekst */
.drev-card-desc--full {
    margin-top: 6px !important;
}

/* --------------------------------------------------------------------------
   Slider
   -------------------------------------------------------------------------- */

.drev-slider-wrap {
    position: relative;
}

.drev-swiper {
    overflow: hidden;
}

.drev-swiper .drev-card.swiper-slide {
    width: 300px !important;
    margin-right: 12px !important;
    height: auto !important;
}

.drev-slider-nav {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 10px;
}

.drev-prev,
.drev-next {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--dgdm-border);
    background: var(--dgdm-white);
    color: var(--dgdm-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 180ms, border-color 180ms, color 180ms;
}

.drev-prev:hover,
.drev-next:hover {
    background: var(--dgdm-primary);
    border-color: var(--dgdm-primary);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .drev-grid--cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .drev-grid--cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
    .drev-grid,
    .drev-grid--cols-2,
    .drev-grid--cols-3,
    .drev-grid--cols-4 {
        grid-template-columns: 1fr !important;
    }
    .drev-swiper .drev-card.swiper-slide {
        width: 260px !important;
    }
}