/* ======================================================
   View: schepen_verkoop — GRID + KAARTSTIJL
   Geldt voor alle pages (te koop + verkocht)
   ====================================================== */

/* GRID:
   - < 576px: 1 kolom
   - ≥ 576px: 2 kolommen
*/
.view-content.view-schepen-verkoop {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

/* Vanaf 576px: twee kolommen */
@media (min-width: 576px) {
  .view-content.view-schepen-verkoop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Elke views-row laat z’n inhoud de gridcel innemen */
.view-content.view-schepen-verkoop > .views-row {
  display: contents;
}

/* Zorg dat de kaart zelf de gridcel opvult */
.view-content.view-schepen-verkoop .mmsi-card {
  width: 100%;
}

/* ======================================================
   KAARTSTIJL (.mmsi-card)
   ====================================================== */

.mmsi-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mmsi-card:hover {
  transform: translateY(-2px);
  border-color: #d1d5db;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
}

/* Foto */
.mmsi-card__photo {
  background: #f8fafc;
}

.mmsi-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mmsi-card__photo-fallback {
  height: 100%;
  display: grid;
  place-items: center;
  color: #6b7280;
  border-bottom: 1px dashed #e5e7eb;
}

/* Body / header */
.mmsi-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.mmsi-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.mmsi-card__title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  color: #0f172a;
}

/* Specs-blok */
.mmsi-card__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

@media (max-width: 768px) {
  .mmsi-card__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .mmsi-card__specs {
    grid-template-columns: 1fr;
  }
}

.mmsi-card__specs > div {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 10px;
  min-width: 0;
}

.mmsi-card__specs span {
  display: block;
  font-size: .75rem;
  color: #6b7280;
  letter-spacing: .02em;
}

.mmsi-card__specs strong {
  display: block;
  font-size: .95rem;
  color: #111827;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ======================================================
   HEADER-ACTIES: hart + viewcount netjes uitlijnen
   (de exacte hart-styling gebeurt in view-heart.css)
   ====================================================== */

.mmsi-card__actions {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* View counter naast het hart */
.s2b-viewcount {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .875rem;
  line-height: 1;
  color: #6b7280; /* gray-500 */
}

.s2b-viewcount .s2b-eye {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

/* Dark mode: iets lichtere tekstkleur */
.is-dark .s2b-viewcount {
  color: #cbd5e1; /* slate-300 */
}

/* ======================================================
   DARK MODE – kaarten + specs + filters leesbaar
   (lichtgewicht; vult globale dark-mode aan)
   ====================================================== */

.is-dark {
  --s2b-bg: #0f1115;
  --s2b-card: #14171d;
  --s2b-card-border: #232730;
  --s2b-text: #e8eaed;
  --s2b-text-muted: #9aa0a6;
  --s2b-soft: #1b1f27;
  --s2b-input-bg: #101317;
  --s2b-input-bd: #2b313a;
}

/* Kaarten */
.is-dark .mmsi-card {
  background: var(--s2b-card);
  border-color: var(--s2b-card-border);
  color: var(--s2b-text);
}

.is-dark .mmsi-card__title {
  color: var(--s2b-text);
}

.is-dark .mmsi-card__photo-fallback {
  background: var(--s2b-soft);
  color: var(--s2b-text-muted);
  border-color: var(--s2b-card-border);
}

/* Specs-tiles */
.is-dark .mmsi-card__specs > div {
  background: var(--s2b-soft);
  border: 1px solid var(--s2b-card-border);
  color: var(--s2b-text);
}

.is-dark .mmsi-card__specs span {
  color: var(--s2b-text-muted);
}

.is-dark .mmsi-card__specs strong {
  color: var(--s2b-text);
}

/* Exposed form / filters in deze view (kaart bovenaan) */
.is-dark .s2b-exposed.card {
  background: var(--s2b-card);
  border-color: var(--s2b-card-border);
  color: var(--s2b-text);
}

.is-dark .s2b-exposed .form-control,
.is-dark .s2b-exposed select,
.is-dark .s2b-exposed .form-select {
  background: var(--s2b-input-bg);
  color: var(--s2b-text);
  border-color: var(--s2b-input-bd);
}

.is-dark .s2b-exposed .form-control::placeholder {
  color: #838a93;
}

/* Outline-knoppen in filters */
.is-dark .s2b-exposed .btn-outline-primary {
  color: #cfe0ff;
  border-color: #5578cc;
}

.is-dark .s2b-exposed .btn-outline-primary:hover {
  background: #1b2a4b;
  color: #fff;
}

.is-dark .s2b-exposed .btn-outline-secondary {
  color: #e0e3e7;
  border-color: #3a4049;
}

.is-dark .s2b-exposed .btn-outline-secondary:hover {
  background: #2a2f36;
  color: #fff;
}
/* ======================================================
   Verkocht v2 (schepen_verkoop — page_3)
   Zelfde 2-koloms grid als 'Te koop'
   ====================================================== */

.view-id-schepen_verkoop.view-display-id-page_3 .view-content {
  display: grid !important;
  gap: 16px;
  grid-template-columns: 1fr;          /* mobiel: 1 kolom */
}

@media (min-width: 576px) {
  .view-id-schepen_verkoop.view-display-id-page_3 .view-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* vanaf 576px: 2 kolommen */
  }
}

/* elke rij laat z'n inhoud de gridcel vullen */
.view-id-schepen_verkoop.view-display-id-page_3 .view-content > .views-row {
  display: contents;
}

/* kaart zelf vult de cel */
.view-id-schepen_verkoop.view-display-id-page_3 .mmsi-card {
  width: 100%;
}