/* ============================================================
   PAGE-ZOEKEN.CSS — Zoekpagina ("Linnen gids", familie van
   provincie/stad-ontwerp). Prefix .zk-.
   ============================================================ */

.zk-head { padding: 40px 0 44px; border-bottom: 1px solid var(--line); }
.zk-titel {
  font-family: var(--font-display); font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking); font-size: var(--display-2);
  line-height: 1.15; margin: 12px 0 6px;
}
.zk-count { color: var(--color-text-muted); margin: 0 0 22px; }
.zk-count strong { color: var(--color-primary); }

.zk-search { max-width: none; margin-left: 0; margin-right: 0; }

/* Stedentags onder de zoekbalk (deelt .quick-cities uit page-home.css) */
.zk-cities { max-width: none; margin: 20px 0 0; justify-content: flex-start; }

.zk-banner {
  display: flex; gap: 14px; align-items: flex-start;
  background: #eef5f0; border: 1px solid #bcd3c4; border-radius: var(--radius);
  color: var(--color-primary); padding: 16px 20px; margin-bottom: 26px;
}
.zk-banner__sub { color: var(--color-text-muted); font-size: 0.92rem; margin-top: 4px; }

/* 12-koloms grid: sorteerregel over volle breedte, filters 3 kolommen, resultaten 9 */
.zk-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px var(--gutter); align-items: start; padding: 40px 0 70px; }
.zk-layout > .zk-sort { grid-column: 1 / -1; }
.zk-filters { grid-column: span 3; }
.zk-layout > section { grid-column: span 9; min-width: 0; padding: 0; }
@media (max-width: 900px) {
  .zk-layout > .zk-sort, .zk-filters, .zk-layout > section { grid-column: 1 / -1; }
}

.zk-filters .sb-panel { position: sticky; top: 96px; }
.zk-filters .sb-field select {
  width: 100%; font: inherit; font-size: 0.98rem; color: var(--color-ink);
  border: 1.5px solid var(--color-line); border-radius: 9px; padding: 12px 44px 12px 14px;
  appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23243029' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center;
}
.zk-checks .sb-checks { grid-template-columns: 1fr; }
.zk-checks { border: none; }
.zk-checks .sb-check { padding: 10px 12px; font-size: 0.92rem; }
.zk-filters .sb-check { display: flex; margin-bottom: 8px; }
.zk-reset { display: inline-block; margin-top: 10px; font-size: 0.9rem; color: var(--color-text-muted); text-decoration: none; }
.zk-reset:hover { color: var(--color-danger); }

.zk-sort { display: flex; align-items: center; gap: 12px; justify-content: flex-end; font-size: 0.92rem; color: var(--color-text-muted); }
.zk-sort select {
  font: inherit; font-size: 0.92rem; color: var(--color-ink);
  border: 1.5px solid var(--color-line); border-radius: 9px; padding: 9px 36px 9px 12px;
  appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23243029' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center;
}

.zk-cards { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .zk-cards { grid-template-columns: 1fr; } }

/* Bedrijfskaart met foto — gelijke hoogte per rij */
.zk-cards > li { min-width: 0; }
.zk-card { overflow: hidden; padding-top: 0; min-width: 0; }
.zk-card-foto {
  display: block; width: calc(100% + 48px); max-width: none; height: 150px;
  margin: 0 -24px 16px; object-fit: cover; object-position: 50% var(--hero-y, 50%);
  background: var(--color-surface);
}
.zk-card .naam {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.zk-card .plaats { white-space: nowrap; overflow: hidden; min-width: 0; }

.zk-leeg { text-align: center; }
.zk-leeg h2 { font-size: 1.4rem; margin-bottom: 8px; }
.zk-leeg p { color: var(--color-text-muted); margin-bottom: 18px; }

/* Paginering in linnen-stijl (gedeeld met provincie/cat-loc) */
.pagination { display: flex; justify-content: center; gap: 8px; margin: 36px 0 0; flex-wrap: wrap; }
.pagination a, .pagination span[aria-current] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--color-line); border-radius: var(--radius);
  background: var(--color-surface-card); color: var(--color-ink);
  text-decoration: none; font-weight: 600; font-size: 0.95rem;
}
.pagination a:hover { border-color: var(--color-ink); }
.pagination span[aria-current] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination-dots { display: flex; align-items: center; padding: 0 4px; color: var(--color-text-muted); }