/* Homepage: "Meer dan eten en drinken" – genummerde lijst links, grote foto rechts die meewisselt met de regel
   waar je overheen gaat (assets/js/ontdek.js). Op mobiel een lijst met kleine foto per regel. */
.ontdek {
  background-color: var(--secondary);
  padding: var(--space-2xl) var(--space-m);
}
.ontdek__binnen {
  width: var(--max-screen-width);
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-xl);
  align-items: center;
}
.ontdek__tagline { margin: 0 0 .6rem; font-weight: 600; color: var(--primary-tekst); }
.ontdek__kop { font-family: "Bearmen"; font-size: var(--text-2xl); color: var(--dark); margin: 0 0 var(--space-m); }
.ontdek__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dark-20); }
.ontdek__rij {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--dark-20);
  color: var(--dark);
  text-decoration: none;
}
.ontdek__duim { display: none; }
.ontdek__nr { font-family: "Bearmen"; font-size: var(--text-m); color: var(--primary-tekst); }
.ontdek__rij-tekst { display: flex; flex-direction: column; gap: .3rem; }
.ontdek__titel { font-family: "Bearmen"; font-size: var(--text-xl); line-height: 1.1; transition: color .3s ease; }
.ontdek__feit { font-size: var(--text-s); color: var(--dark-60); }
.ontdek__pijl {
  font-size: 2.4rem;
  color: var(--primary-tekst);
  transform: translateX(-.8rem);
  opacity: .35;
  transition: transform .3s ease, opacity .3s ease;
}
.ontdek__rij:hover .ontdek__titel,
.ontdek__rij:focus-visible .ontdek__titel,
.ontdek__rij.is-actief .ontdek__titel { color: var(--primary-tekst); }
.ontdek__rij:hover .ontdek__pijl,
.ontdek__rij:focus-visible .ontdek__pijl,
.ontdek__rij.is-actief .ontdek__pijl { transform: none; opacity: 1; }
.ontdek__rij:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }

.ontdek__fotos {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
  overflow: hidden;
  background-color: var(--dark-10);
}
.ontdek__groot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
.ontdek__groot.is-actief { opacity: 1; }

@media (max-width: 991px) {
  .ontdek__binnen { grid-template-columns: 1fr; }
  .ontdek__fotos { display: none; }
  .ontdek__rij { grid-template-columns: 7.2rem minmax(0, 1fr) auto; }
  .ontdek__nr { display: none; }
  .ontdek__duim {
    display: block;
    width: 7.2rem;
    height: 7.2rem;
    object-fit: cover;
    border-radius: var(--radius-s);
  }
  .ontdek__titel { font-size: var(--text-l); }
  .ontdek__pijl { opacity: 1; transform: none; }
  .ontdek__rij.is-actief .ontdek__titel { color: var(--dark); }
}
@media (prefers-reduced-motion: reduce) {
  .ontdek__groot, .ontdek__pijl, .ontdek__titel { transition: none; }
}