/* Overnachten: verblijven in de buurt als witte kaarten (soort, naam, plaats en afstand, korte tekst,
   links naar website en route), gesorteerd op afstand. Geen ingesloten kaarten: Google Maps opent pas na een klik. */
.verblijven {
  background-color: var(--secondary);
  padding: var(--space-2xl) var(--space-m);
}
.verblijven__binnen { width: var(--max-screen-width); max-width: 100%; margin: 0 auto; }
.verblijven__tagline { margin: 0 0 .6rem; font-weight: 600; color: var(--primary-tekst); }
.verblijven__kop { font-family: "Bearmen"; font-size: var(--text-2xl); color: var(--dark); margin: 0 0 var(--space-s); }
.verblijven__intro { max-width: 62ch; margin: 0 0 var(--space-l); color: var(--text-body); }

.verblijven__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
}
.verblijf {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-m);
  padding: var(--space-m) var(--space-m) var(--space-s);
}
.verblijf__soort {
  align-self: flex-start;
  margin: 0 0 var(--space-xs);
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--secondary);
  font-size: var(--text-s);
  color: var(--primary-tekst);
  font-weight: 600;
}
.verblijf__naam { margin: 0; font-family: "Bearmen"; font-size: var(--text-l); color: var(--dark); line-height: 1.2; }
.verblijf__waar { margin: .2rem 0 var(--space-s); font-weight: 600; color: var(--dark); }
.verblijf__tekst { margin: 0 0 var(--space-m); color: var(--text-body); }
.verblijf__links {
  margin: auto 0 0;
  padding-top: var(--space-s);
  border-top: 1px solid var(--dark-10);
  display: flex;
  gap: var(--space-m);
}
.verblijf__links a { color: var(--primary-tekst); font-weight: 600; text-decoration: none; }
.verblijf__links a:hover { text-decoration: underline; }
.verblijven__noot { margin: var(--space-s) 0 0; font-size: var(--text-s); color: var(--dark-60); }

.verblijven__slot {
  margin-top: var(--space-2xl);
  padding: var(--space-l);
  border: 1px solid var(--dark-20);
  border-radius: var(--radius-m);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-l);
  align-items: center;
}
.verblijven__slot-kop { margin: 0 0 .4rem; font-family: "Bearmen"; font-size: var(--text-l); color: var(--dark); }
.verblijven__slot p { margin: 0; color: var(--text-body); }
.verblijven__knoppen { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.verblijven__knop-rand { border: 1px solid var(--dark); color: var(--dark); background: transparent; }
.verblijven__knop-rand:hover { background: var(--dark); color: var(--secondary); }

@media (max-width: 991px) {
  .verblijven__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verblijven__slot { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .verblijven__lijst { grid-template-columns: 1fr; }
}

/* Foto van het dorp of de omgeving bovenaan de kaart (vrije foto's van Wikimedia Commons, met naamsvermelding). */
.verblijf { overflow: hidden; }
.verblijf__foto {
  position: relative;
  margin: calc(-1 * var(--space-m)) calc(-1 * var(--space-m)) var(--space-s);
}
.verblijf__foto img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.verblijf__foto figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem var(--space-s) .4rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
  color: #fff;
  font-size: .75rem;
  line-height: 1.3;
}
.verblijf__foto figcaption a { color: inherit; text-decoration: underline; }