/* ====== GRID WRAPPER ====== */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* Optioneel: gelijke rijenhoogte voor hele grid (alle kaarten even hoog) */
.auto-grid > .auto-card {
  height: 100%; /* laat kaart zelf de hoogte beheren */
}

/* ====== KAART BASIS ====== */
.auto-card {
  position: relative;
  display: grid;
  grid-template-rows: /* media */ auto /* body */ 1fr /* footer */ auto;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 420px;           /* vaste minimale hoogte voor consistentie */
}

/* Hover-effect */
.auto-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* Klikbare overlay over hele kaart */
.auto-card .card-link {
  position: absolute;
  inset: 0;
  z-index: 10;
  text-indent: -9999px; /* verberg eventuele linktekst */
}

/* ====== MEDIA (bovenste rij) ====== */
/* Zorg dat afbeeldingen overal dezelfde verhouding hebben */
.card-media {
  background: #f6f7fb;
  aspect-ratio: 16/10;             /* gelijke hoogte bovenin */
  display:flex; align-items:center; justify-content:center;
}
.card-thumb { width:100%; height:100%; object-fit: cover; }

/* ====== BODY (middenrij, rekt op naar 1fr) ====== */
.card-body {
  padding: 1rem;
  display: grid;                    /* interne grid voor consistente uitlijning */
  grid-template-rows: auto auto 1fr;/* title / specs-header / specs-list */
  row-gap: .5rem;
}

/* Titel met clamping voor gelijke hoogte */

.card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.4em;
  line-height: 1.2;
}

/* Specs-header (optioneel). Je kunt dit gebruiken als labelrij.
   Als je geen header nodig hebt, laat deze regel weg en de grid blijft werken. */
/* .card-body::before { content:"Specificaties"; font-weight:600; color:#556; font-size:.9rem; } */

/* Specs-lijst: vaste min-hoogte zodat alle kaarten dezelfde 'content-blok' krijgen */
.card-specs {
  list-style:none;
  padding:0; margin:0;
  display:grid; gap:.25rem;
  color:#334; font-size:.95rem;
  /* Zorg dat specs-blok overal minstens even hoog is */
  min-height: 72px;                 /* pas aan op je content (2–3 regels) */
}

/* Prijsregel in specs (als je die boven footer ook toont) */
.card-specs li.price { font-weight:700; color:#1AAC63; }

/* ====== FOOTER (onderste rij, altijd onderaan) ====== */
.card-footer {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.5rem;
  padding:.8rem 1rem;
  border-top:1px solid #eef0f4;
  background: linear-gradient(#fff, #f9fafc);
}

.card-price {
  font-weight:700;
  font-size:1.05rem;
  color:#1AAC63;                    /* of #0a5 */
}
.card-price--na { color:#666; font-weight:600; }
.card-vat { font-size:.85rem; color:#6a6a6a; }

/* ====== RESPONSIVE ====== */
@media (max-width: 1024px) { .auto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .auto-grid { grid-template-columns: 1fr; } }

/* ====== (OPTIONEEL) GELIJKE HOOGTE PER RIJ IN HET GRID ======
   Als sommige kaarten ondanks min-height nog verschillen (door andere fonts/opties),
   kun je een vaste kaart-hoogte gebruiken. Let op: dit knipt content af bij zeer lange teksten. */
/*
.auto-card { height: 520px; }    // vaste hoogte
.card-body { overflow: hidden; } // verberg overschot
*/