/* Moved from inline <style> */

.ds-plaats-filter {
  margin-bottom: 20px;
  display: flex;
  gap: 44px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-container { position: relative; display: inline-block; }
.filter-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #e5347b; font-size: 16px; z-index: 10; pointer-events: none;
  -webkit-transform: translateY(-50%); -webkit-user-select: none;
}

.plaatsen-lijst { display: grid; gap: 15px; margin: 40px 0 20px 0; }

#plaats-land-select, #plaats-provincie-select {
  padding: 8px 12px 8px 40px; font-size: 14px; border: 1px solid #dee2e6; border-radius: 6px;
  transition: border-color .3s ease, box-shadow .3s ease; min-width: 225px; background: #fff;
  -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; z-index: 1;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center; background-repeat: no-repeat; background-size: 16px; padding-right: 40px;
}
#plaats-land-select:focus, #plaats-provincie-select:focus { border-color: #e5347b; outline: none; box-shadow: 0 0 0 3px rgba(229,52,123,.2); }
#plaats-land-select:hover, #plaats-provincie-select:hover { border-color: #e5347b; }

@media (max-width: 640px) {
  .ds-plaats-filter {
    flex-direction: column;
    align-items: stretch;      /* instead of center */
    gap: 20px;
    width: 100%;
  }

  .filter-container { width: 100%; }

  #plaats-land-select,
  #plaats-provincie-select {
    width: 100%;               /* full width */
    min-width: unset;           /* remove fixed min */
  }
}


.plaatsen-lijst-link { text-decoration: none; color: inherit; display: block; }

.plaatsen-lijst-link .plaatsen-lijst-item,
.plaatsen-lijst-item {
  background: #fff; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; transition: all .3s ease;
  height: 100%; color: #495057; font-weight: 500; display: flex; flex-direction: column;
}

.plaatsen-lijst-image {
  display: block;                  /* enforce box context */
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #f8f9fa;
}

/* fallback for browsers that don’t support aspect-ratio */
@supports not (aspect-ratio: 4/3) {
  .plaatsen-lijst-image {
    height: 0;
    padding-bottom: 75%;           /* 4:3 ratio */
  }
}
.plaatsen-lijst-image-placeholder {
  width: 100%; aspect-ratio: 4/3; background: #f8f9fa; display:flex; align-items:center; justify-content:center;
  color:#6c757d; font-size:14px;
}
.plaatsen-lijst-title { padding: 15px; text-align: center; flex-grow: 1; display:flex; align-items:center; justify-content:center; }

.plaatsen-lijst-link:hover .plaatsen-lijst-item { transform: translateY(-4px); box-shadow: 0 4px 20px rgba(0,0,0,.1); border-color: #e5347b; }
.plaatsen-lijst-link:hover .plaatsen-lijst-title { color: #e5347b; }

@media (max-width: 640px)   { .plaatsen-lijst { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 641px) and (max-width: 1024px) { .plaatsen-lijst { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px)  { .plaatsen-lijst { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1201px)  { .plaatsen-lijst { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1401px)  { .plaatsen-lijst { grid-template-columns: repeat(6, 1fr); } }