/* ─────────────────────────────────────────
   STARTUPSITES PROJECTEN v2.0
   Licht, #140E57 accent, slider zoals screenshot
   ───────────────────────────────────────── */

.ss-wrapper { width: 100%; }
.ss-sectie-titel { font-size: 1.6rem; font-weight: 700; margin-bottom: 24px; color: #140E57; }

/* ─── Grid ─── */
.ss-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    padding: 8px;
    margin: -8px;
    align-items: stretch;
}

/* ─── Filterbalk ─── */
.ss-filter-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:28px; }
.ss-filter-count { font-size:13px; color:#64748b; margin-left:auto; }
.ss-filter-count span { font-weight:700; color:#140E57; font-size:15px; }

/* ─── Dropdown ─── */
.ss-dropdown-wrap { position:relative; }
.ss-dropdown-trigger {
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; border:1.5px solid #e2e8f0; border-radius:999px;
    padding:8px 16px; font-size:13px; font-weight:500; color:#334155;
    cursor:pointer; white-space:nowrap; user-select:none;
    transition:border-color .18s, box-shadow .18s;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.ss-dropdown-trigger:hover,
.ss-dropdown-wrap.open .ss-dropdown-trigger { border-color:#140E57; color:#140E57; box-shadow:0 2px 10px rgba(20,14,87,.1); }
.ss-dropdown-trigger.has-active { background:#140E57; border-color:#140E57; color:#fff; }
.ss-trigger-arrow { font-size:10px; opacity:.5; transition:transform .2s; }
.ss-dropdown-wrap.open .ss-trigger-arrow { transform:rotate(180deg); }
.ss-dropdown-menu {
    display:none; position:absolute; top:calc(100% + 8px); left:0;
    background:#fff; border:1px solid #e2e8f0; border-radius:12px;
    padding:8px 0; min-width:200px; z-index:999;
    box-shadow:0 8px 30px rgba(0,0,0,.12);
}
.ss-dropdown-wrap.open .ss-dropdown-menu { display:block; }
.ss-check-label { display:flex; align-items:center; gap:10px; padding:9px 16px; cursor:pointer; font-size:13px; color:#334155; transition:background .15s; }
.ss-check-label:hover { background:#f8fafc; }
.ss-check-label input[type="checkbox"] {
    appearance:none; -webkit-appearance:none; width:16px; height:16px;
    border:1.5px solid #cbd5e1; border-radius:4px; background:transparent;
    cursor:pointer; flex-shrink:0; position:relative; transition:background .15s, border-color .15s;
}
.ss-check-label input[type="checkbox"]:checked { background:#140E57; border-color:#140E57; }
.ss-check-label input[type="checkbox"]:checked::after {
    content:''; position:absolute; left:3px; top:0; width:5px; height:9px;
    border:2px solid #fff; border-top:none; border-left:none; transform:rotate(45deg);
}
.ss-check-text { flex:1; }

/* ─────────────────────────────────────────
   TAGS (pills zoals screenshot)
   ───────────────────────────────────────── */
.ss-slide-tags .ss-stag, .ss-card-tags .ss-stag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 999px !important;
    padding: 2px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    background: #fff !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}
.ss-stag-icon {
    font-size: 13px;
    line-height: 1;
}
/* Code-tag: paars/blauw */
.ss-stag-code {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #3730a3;
    font-weight: 600;
}

/* ─────────────────────────────────────────
   GRID KAART
   ───────────────────────────────────────── */
.ss-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
    transition: transform .22s ease, box-shadow .22s ease;
    display: flex;
    flex-direction: column;
}
.ss-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(20,14,87,.14);
}
.ss-card-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #f1f5f9;
    margin: 16px 16px 0;
    border-radius: 10px;
}
.ss-card-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.ss-card:hover .ss-card-media img { transform:scale(1.04); }
.ss-card-body { padding:14px 16px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.ss-card-tags { display:flex; flex-wrap:wrap; gap:6px; }
.ss-card-title { font-size:17px; line-height:1.3; color:#0f172a; margin:0; }
.ss-card-title strong { font-weight:800; }
.ss-card-sub { font-weight:400; color:#475569; }
.ss-geen-projecten { grid-column:1/-1; text-align:center; padding:48px 20px; color:#94a3b8; font-style:italic; }

/* ─────────────────────────────────────────
   SLIDER — exacte stijl zoals screenshot
   Witte afgeronde kaart, foto boven, tags + titel onder,
   Geen CTA-knop, hover = alleen foto vergroot
   ───────────────────────────────────────── */

/* Outer wrapper: ruimte voor pijlen */
.ss-slider-outer {
    position: relative;
    width: 100%;
}

/* Viewport: knipt de track af, geen padding-trucs meer nodig */
.ss-slider-wrap {
    overflow: hidden;
    /* Verticale ademruimte zodat de schaduw van de kaarten niet wordt afgesneden */
    padding: 16px 0;
    margin: -16px 0;
    cursor: grab;
    /* Laat verticaal scrollen door, maar geeft JS controle over horizontaal swipen */
    touch-action: pan-y;
    user-select: none;
}
.ss-slider-wrap:active { cursor: grabbing; }

.ss-slider-outer .ss-slider-track {
    display: flex !important;
    gap: 20px !important;
    transition: transform .45s cubic-bezier(.4,0,.2,1);
    will-change: transform;
    align-items: stretch !important;
    /* Echte linkermarge: eerste slide begint niet tegen de rand. */
    padding-left: 48px !important;
}

/* Slide */
.ss-slide {
    flex: 0 0 calc(33.33% - 14px);
    min-width: 0;
}

.ss-slider-outer .ss-slide .ss-slide-inner {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
    text-decoration: none !important;
    color: inherit !important;
    height: 100% !important;
    transition: box-shadow .25s ease !important;
}
.ss-slider-outer .ss-slide .ss-slide-inner:hover { box-shadow: 0 16px 44px rgba(20,14,87,.18) !important; }

/* Afbeelding: overflow hidden zodat zoom werkt, geen achtergrond */
.ss-slide-img {
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.ss-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
/* Alleen foto vergroot bij hover */
.ss-slide-inner:hover .ss-slide-img img { transform: scale(1.05); }

/* Onderkant */
.ss-slide-body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ss-slide-tags { display:flex; flex-wrap:wrap; gap:6px; }

.ss-slide-title {
    font-size: 17px;
    line-height: 1.3;
    color: #0f172a;
    margin: 0;
}
.ss-slide-title strong { font-weight: 800; }

/* Pijl-knoppen — cirkel met chevron (Elementor-stijl) */
.ss-slider-outer .ss-slider-btn {
    position: absolute !important;
    top: 50% !important;
    z-index: 10 !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #140E57 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: box-shadow .2s, transform .2s, background .2s, border-color .2s;
    box-shadow: 0 4px 18px rgba(0,0,0,.14) !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ss-slider-outer .ss-slider-btn svg { width: 24px; height: 24px; }
.ss-slider-outer .ss-slider-btn:hover {
    background: #140E57 !important;
    border-color: #140E57 !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(20,14,87,.3) !important;
}
.ss-slider-prev { left: 16px; transform: translateY(-50%); }
.ss-slider-prev:hover { transform: translateY(-50%) scale(1.05); }
.ss-slider-next { right: 16px; transform: translateY(-50%); }
.ss-slider-next:hover { transform: translateY(-50%) scale(1.05); }
.ss-slider-outer .ss-slider-btn:disabled {
    opacity: .3 !important;
    cursor: default !important;
    pointer-events: none !important;
    transform: translateY(-50%);
}

/* ─── Accordion ─── */
.ss-accordion-hidden { display:none; grid-column:1/-1; }
.ss-accordion-hidden.open { display:contents; }
.ss-accordion-footer { display:flex; justify-content:center; margin-top:32px; }
.ss-accordion-btn {
    display:inline-flex; align-items:center; gap:10px;
    background:transparent; border:2px solid #140E57; border-radius:999px;
    padding:12px 32px; font-size:15px; font-weight:600; color:#140E57;
    cursor:pointer; transition:background .2s, color .2s;
}
.ss-accordion-btn:hover { background:#140E57; color:#fff; }
.ss-accordion-btn::after { content:'▾'; font-size:12px; transition:transform .3s; display:inline-block; }
.ss-accordion-btn.open::after { transform:rotate(180deg); }

/* ─── Responsief ─── */
@media (max-width:1024px) { .ss-slide { flex: 0 0 calc(50% - 10px); } }
@media (max-width:768px)  {
    .ss-grid { grid-template-columns: repeat(2,1fr); }
    .ss-slide { flex: 0 0 calc(80%); }
    .ss-slider-btn { width: 44px; height: 44px; }
    .ss-slider-btn svg { width: 18px; height: 18px; }
    .ss-slider-prev { left: 8px; }
    .ss-slider-next { right: 8px; }
}
@media (max-width:480px)  {
    .ss-grid { grid-template-columns: 1fr; }
    .ss-slide { flex: 0 0 85%; }
}