/* ==========================================================================
   404 / SEARCH FALLBACK PAGE - view-search404custom
   Shown when a URL is unknown/removed. Lists all current containers so
   the visitor isn't stuck on a dead end.

   NOTE: cards here have NO <a> wrapper in the current markup (unlike the
   search-results cards), so this is styled as non-clickable, matching the
   "no hover-lift on non-clickable cards" rule used elsewhere (contact page
   person cards). See remark at the end of this reply about adding links.
   ========================================================================== */

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

/* ---- Message header ---- */

.view-search404custom .view-header {
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e3e0d8);
  border-radius: var(--r-md, 8px);
  padding: 1.5rem 1.75rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-size: 0.95rem;
  color: var(--ink, #1b2531);
  line-height: 1.6;
}

.view-search404custom .view-header a {
  color: var(--rust-600, #c1592b);
  font-weight: 600;
  text-decoration: none;
}

.view-search404custom .view-header a:hover {
  text-decoration: underline;
}

/* ---- Grid ---- */

.view-search404custom .view-content .views-view-grid.row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}

.view-search404custom .view-content .views-view-grid > div[class*="col-"] {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

/* ---- Card ---- */

.view-search404custom .layout--onecol {
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e3e0d8);
  border-radius: var(--r-md, 8px);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Geen hover-lift/schaduw: deze cards zijn (nog) niet klikbaar. */
}

.view-search404custom .layout__region--content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.view-search404custom .field-name-node-title {
  order: 1;
  padding: 0.75rem 0.85rem 0.2rem;
  font-family: var(--font-display, 'Archivo', Arial, sans-serif);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ink, #1b2531);
  line-height: 1.35;
}

.view-search404custom .field--name-field-inhoud {
  order: 2;
  padding: 0 0.85rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--rust-600, #c1592b);
}

.view-search404custom .field-name-field-afbeeldingen {
  order: 3;
  margin-top: auto;
}

.view-search404custom .field-name-field-afbeeldingen .media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.view-search404custom .field-name-field-afbeeldingen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

@media (max-width: 1080px) {
  .view-search404custom .view-content .views-view-grid.row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .view-search404custom .view-content .views-view-grid.row {
    grid-template-columns: repeat(2, 1fr);
  }
}