/* ===== Schepen view (verkoopoverzicht, grid met kaarten) ===== */

/* Brede responsive grid: 1/2/3/4 kolommen per breakpoint */
.view-schepen .view-content {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; /* xs */
}
@media (min-width: 576px)  { .view-schepen .view-content { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .view-schepen .view-content { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .view-schepen .view-content { grid-template-columns: repeat(4, 1fr); } }

/* Als je in rows .mmsi-card markup gebruikt: laat ze netjes vullen */
.view-schepen .mmsi-card { height: 100%; display: flex; flex-direction: column; }
.view-schepen .mmsi-card__body { flex: 1 1 auto; display: flex; flex-direction: column; }
.view-schepen .mmsi-card__photo img { width: 100%; height: 100%; object-fit: cover; }

/* (Alle onderstaande selectors horen bij deze view en mogen mee als je ze gebruikt)
   NB: als je de oude .schepen-grid/.schepen-card markup niet meer gebruikt, laat dit achterwege. */
.view-schepen .schepen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  margin: 0 auto;
  max-width: 1400px;
  padding: 0 1rem;
}
.view-schepen .schepen-card {
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.view-schepen .schepen-card .card-body { padding: 1rem; }
.view-schepen .photo-fallback { background:#f5f5f5; color:#888; }
.view-schepen .specs { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0; }
.view-schepen .specs dt { color:#666; font-weight:500; }
.view-schepen .specs dd { margin:0; }

/* Als Views zelf .views-row wrappers print: neutraliseer naar grid items */
.view-schepen .view-content > .views-row {
  display: contents;
}