/* =====================
   SECTIE 3: START ALS KANDIDAAT (CAND3)
   - Clean (geen dubbele/nested @media)
   - Body is overlay onderaan (glassy + doorzichtig)
   - Tekst altijd zichtbaar
   - Button heeft lucht (niet tegen rand geplakt)
   - Responsive: desktop / tablet / mobiel
===================== */

#vacatures{
  background:#EDE4DD;
  border-top:0 !important;
  overflow:visible;
}

@media (max-width: 899px){
  #vacatures{ min-height:auto !important; }
}

/* Head spacing */
#vacatures .cand3-head .lead{ margin-bottom:16px; }

/* Grid */
#vacatures .cand3-grid{
  display:grid;
  gap:14px;
  align-items:stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Card */
#vacatures .cand3-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 30px rgba(17,24,39,.10);
  height: 240px;
  background:#fff; /* basis (wordt per kaart overschreven) */
}

/* Media vult de hele kaart */
#vacatures .cand3-media{
  position:absolute;
  inset:0;
  background-image: var(--img);
  background-size: cover;
  background-repeat:no-repeat;
  background-position: center 25%;
  filter:none;
}
#vacatures .cand3-media::after{ content:none !important; }

/* Body overlay onderaan (slank) */
#vacatures .cand3-body{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:5;

  display:flex;
  flex-direction:column;
  gap:4px;

  /* ✅ SLANKER: minder hoog dan “halve kaart” */
  min-height: 64px;
  padding: 10px 14px 12px;   /* bottom geeft lucht */
}

/* Tekst altijd zichtbaar/selecteerbaar */
#vacatures .cand3-title,
#vacatures .cand3-text{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* Typo */
#vacatures .cand3-title{
  margin:0;
  font-size:15.5px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-.25px;
}

#vacatures .cand3-text{
  margin:0;
  font-size:12.8px;
  line-height:1.30;
  font-weight:600;
  max-width:56ch;

  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* Actions (button area) */
#vacatures .cand3-actions{
  margin-top:auto;
  padding-top:6px;

  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  row-gap:6px;

  /* ✅ echte lucht onder + rechts */
  padding-right: 2px;
  padding-bottom: 4px;
}

/* oude link niet meer gebruiken */
#vacatures .cand3-link{ display:none !important; }

/* ===================== GLASSY VLAK (doorzichtig) ===================== */
/* Light cards (1 & 4) */
#vacatures .cand3-grid .cand3-card:nth-child(1) .cand3-body,
#vacatures .cand3-grid .cand3-card:nth-child(4) .cand3-body{
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#vacatures .cand3-grid .cand3-card:nth-child(1) .cand3-title,
#vacatures .cand3-grid .cand3-card:nth-child(4) .cand3-title{ color:#111827; }
#vacatures .cand3-grid .cand3-card:nth-child(1) .cand3-text,
#vacatures .cand3-grid .cand3-card:nth-child(4) .cand3-text{ color: rgba(17,24,39,.86); }

/* Dark cards (2 & 3) */
#vacatures .cand3-grid .cand3-card:nth-child(2) .cand3-body,
#vacatures .cand3-grid .cand3-card:nth-child(3) .cand3-body{
  background: rgba(60,44,45,.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#vacatures .cand3-grid .cand3-card:nth-child(2) .cand3-title,
#vacatures .cand3-grid .cand3-card:nth-child(3) .cand3-title{ color: rgba(255,255,255,.96); }
#vacatures .cand3-grid .cand3-card:nth-child(2) .cand3-text,
#vacatures .cand3-grid .cand3-card:nth-child(3) .cand3-text{ color: rgba(255,255,255,.86); }

/* Subtiele gradient achter tekst (extra leesbaarheid) */
#vacatures .cand3-body::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 100%);
  z-index:-1;
}

/* Slimme crop per kaart */
#vacatures .cand3-grid .cand3-card:nth-child(1) .cand3-media{ background-position: center 35%; }
#vacatures .cand3-grid .cand3-card:nth-child(2) .cand3-media{ background-position: center 25%; }
#vacatures .cand3-grid .cand3-card:nth-child(3) .cand3-media{ background-position: center 22%; }
#vacatures .cand3-grid .cand3-card:nth-child(4) .cand3-media{ background-position: center 30%; }

/* ===================== RESPONSIVE ===================== */

/* Tablet */
@media (max-width: 980px){
  #vacatures .cand3-grid{
    grid-template-columns: 1fr;
    gap:12px;
  }
  #vacatures .cand3-card{ height: 260px; }
  #vacatures .cand3-body{
    min-height: 72px;
    padding: 10px 14px 14px;
  }
}

/* Phone */
@media (max-width: 480px){
  #vacatures .cand3-card{ height: 275px; }

  #vacatures .cand3-title{ font-size:15.2px; }
  #vacatures .cand3-text{ font-size:12.6px; line-height:1.28; }

  /* ✅ net iets meer “tap” ruimte */
  #vacatures .cand3-actions{ padding-bottom: 6px; }
}

/* ✅ CAND3 overlay SLANKER (hoogte omlaag) */
#vacatures .cand3-body{
  min-height: 35px !important;      /* was 64/72 */
  padding: 4px 10px 4px !important; /* was 10/12/14 */
  gap: 1px !important;              /* was 4 */
}

#vacatures .cand3-actions{
  padding-top: 1px !important;      /* was 6 */
  padding-bottom: 1px !important;   /* was 4/6 */
}

/* ✅ gradient minder “dik” laten ogen */
#vacatures .cand3-body::before{
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 100%) !important;
}

/* ✅ CAND3 — overlay NOG lichter (extra glassy) */

/* Licht (wit) */
#vacatures .cand3-grid .cand3-card:nth-child(1) .cand3-body,
#vacatures .cand3-grid .cand3-card:nth-child(4) .cand3-body{
  background: rgba(255,255,255,.40) !important;  /* was .50 */
}

/* Donker (aubergine) */
#vacatures .cand3-grid .cand3-card:nth-child(2) .cand3-body,
#vacatures .cand3-grid .cand3-card:nth-child(3) .cand3-body{
  background: rgba(60,44,45,.38) !important;     /* was .48 */
}

/* Gradient nóg subtieler */
#vacatures .cand3-body::before{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.035) 100%
  ) !important;
}