/* ==========================================================================
   POPULAR SEARCHES - "Veelgezochte containers"
   Chip/pill style - ALL chips visible, no toggle (SEO-safe)
   ========================================================================== */

.view-zoekwoordpagina-block {
  max-width: var(--wrap, min(1760px, 94vw));
  margin-inline: auto;
  padding-inline: clamp(1rem, 2.2vw, 2.5rem);
  padding-block: 1.5rem 2rem;
}

.view-zoekwoordpagina-block .view-header h2,
.view-zoekwoordpagina-block .view-header h3 {
  font-family: var(--font-display, 'Archivo', Arial, sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink, #1b2531);
  margin: 0 0 0.75rem;
}

/* Chip row container - all items flow and wrap, all visible */
.view-zoekwoordpagina-block .view-content {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Reset Bootstrap column wrapper */
.view-zoekwoordpagina-block .col-search {
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
}

/* The chip itself */
.view-zoekwoordpagina-block .col-search a {
  display: inline-block;
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e3e0d8);
  color: var(--ink-soft, #57626f);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.view-zoekwoordpagina-block .col-search a:hover {
  border-color: var(--rust-600, #c1592b);
  color: var(--rust-700, #9c4420);
  background: var(--rust-100, #f7e6da);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {
  .view-zoekwoordpagina-block .col-search a {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
  }
}