/* ===================== SECTIE 4: OPDRACHTGEVERS ===================== */

#opdrachtgevers{
  padding: clamp(24px, 3vh, 56px) 0;
}

/* kop */
#opdrachtgevers h2{
  margin: 0 0 8px;
  color: #3C2C2D;
}

#opdrachtgevers .lead{
  margin: 0 0 24px;
  color: rgba(60,44,45,.8);
  font-weight: 700;
  max-width: 72ch;
}

/* ================= GRID ================= */
#opdrachtgevers .grid.cols-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* ================= CARD ================= */
#opdrachtgevers .card{
  display: flex;
  flex-direction: column;
  background: #fff;                          /* 1 geheel */
  border: 1px solid rgba(60,44,45,.12);      /* 1 border om alles */
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(60,44,45,.08);/* 1 shadow om alles */
  overflow: hidden;                          /* ronding voor image */
  /* height: 100%;  <-- kan weg, mag blijven */
}

/* foto kaart */
#opdrachtgevers .card-media{
  height: 210px;
  border-radius: 0;                          /* geen losse ronding */
  border: 0;                                  /* geen losse border */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.25)),
    var(--img);
  background-size: cover;
  background-position: center;
  box-shadow: none;                           /* geen losse shadow */
}

/* tekst kaart */
#opdrachtgevers .card-body{
  margin-top: 0;                              /* grijze balk weg */
  padding: 14px;
  padding-bottom: 12px;
  border-radius: 0;                           /* geen losse ronding */
  background: transparent;                    /* gebruikt card bg */
  border: 0;                                  /* geen losse border */
  box-shadow: none;                           /* geen losse shadow */
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100px;
  flex: 1;
}

#opdrachtgevers .card-title{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
  color: #3C2C2D;
}

#opdrachtgevers .card-text{
  margin: 0;
  font-weight: 700;
  line-height: 1.6;
  color: rgba(60,44,45,.78);
}

/* buttons blijven functioneel maar onzichtbaar */
#opdrachtgevers .card-actions{
  display: none;
}

/* ORANJE LINK + UNDERLINE (van midden naar buiten) */
#opdrachtgevers .opd-link{
  display: inline-block;
  margin-top: auto;
  align-self: flex-end;
  text-align: right;

  color: #E1552C;
  font-weight: 900;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  line-height: 1.1;
}

#opdrachtgevers .opd-link::after{
  content:"";
  position: absolute;
  left: 50%;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: currentColor;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
  border-radius: 999px;
}

/* underline bij hover op link OF op de hele kaart */
#opdrachtgevers .opd-link:hover::after,
#opdrachtgevers .card:hover .opd-link::after{
  transform: translateX(-50%) scaleX(1);
}


/* ===================== OPDRACHTGEVERS STATISTIEKEN BALK (COMPACT) ===================== */

#opdrachtgevers .opd-stats{
  margin-top: 22px;
  padding: 10px 12px;                 /* kleiner in hoogte */
  border-radius: 20px;
  background: linear-gradient(180deg, #FFFFFF, #F7F7F7);
  border: 1px solid rgba(60,44,45,.10);
  box-shadow: 0 16px 34px rgba(60,44,45,.08);

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

/* kaart compacter + layout horizontaal */
#opdrachtgevers .opd-stat{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(60,44,45,.10);
  border-radius: 16px;
  padding: 8px 10px;                  /* compacter */
  display: grid;
  grid-template-columns: 38px max-content minmax(0,1fr);
  column-gap: 10px;
  align-items: center;
  text-align: left;

  min-height: 50px;                   /* was 58 */
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#opdrachtgevers .opd-stat:hover{
  transform: translateY(-1px);
  border-color: rgba(225,85,44,.22);
  box-shadow: 0 12px 24px rgba(60,44,45,.10);
}

/* icoon kleiner */
#opdrachtgevers .opd-ico{
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;

  background: rgba(225,85,44,.10);
  color: #E1552C;
  box-shadow: inset 0 0 0 1px rgba(225,85,44,.16);
}

#opdrachtgevers .opd-ico svg{
  width: 18px;
  height: 18px;
  display: block;
}

#opdrachtgevers .opd-stat-value{
  font-size: 25px;
  line-height: 1;
  white-space: nowrap;
  transition: color .15s ease;        /* nieuw */
}

/* hover: alleen cijfers oranje */
#opdrachtgevers .opd-stat:hover .opd-stat-value{
  color: #E1552C;
}

#opdrachtgevers .opd-stat-label{
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  color: rgba(60,44,45,.72);
  line-height: 1.05;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  #opdrachtgevers .opd-stats{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  #opdrachtgevers .opd-stats{
    grid-template-columns: 1fr;
  }
}
/* ===================== OPDRACHTGEVERS: MOBILE STACK (KAARTEN ONDER ELKAAR) ===================== */
@media (max-width: 640px){

  /* forceer grid terug (geen swipe/naast elkaar) */
  #opdrachtgevers .grid.cols-3{
    display: grid !important;
    overflow: visible !important;
    scroll-snap-type: none !important;

    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding-bottom: 0 !important;
  }

  /* cards gewoon 100% breed */
  #opdrachtgevers .card{
    width: 100% !important;
  }

  /* afbeelding compacter + bovenkant zichtbaar */
  #opdrachtgevers .card-media{
    height: 175px !important;
    background-position: center top !important;
  }

  /* tekst iets compacter zodat hoogte netjes blijft */
  #opdrachtgevers .card-body{
    padding: 12px !important;
    gap: 6px !important;
    min-height: 0 !important;
  }

  #opdrachtgevers .card-title{
    font-size: 17px !important;
    margin: 0 0 6px !important;
  }

  #opdrachtgevers .card-text{
    line-height: 1.55 !important;
  }

  /* link rechts blijft netjes */
  #opdrachtgevers .opd-link{
    font-size: 13px !important;
  }
}

/* Sectie 4: button placement */
#opdrachtgevers .card-body .rc-btn-arrow{
  margin-top: auto;
  align-self: flex-end;
}

/* Oude opd-link mag weg/uit, want we gebruiken buttons */
#opdrachtgevers .opd-link{ display: none !important; }