/* Homepage: tegels naar lunch, diner, drank en bierkaart. Foto altijd zichtbaar, titel en korte regel linksonder. */
.kaarttegels {
  background-color: var(--secondary);
  padding: var(--space-2xl) var(--space-m);
}
.kaarttegels__binnen { width: var(--max-screen-width); max-width: 100%; margin: 0 auto; text-align: center; }
.kaarttegels__tagline { margin: 0 0 .6rem; font-weight: 600; color: var(--primary-tekst); }
.kaarttegels__kop { font-family: "Bearmen"; font-size: var(--text-2xl); color: var(--dark); margin: 0 0 var(--space-xs); }
.kaarttegels__intro { margin: 0 auto var(--space-l); max-width: 54rem; color: var(--dark-70); }

.kaarttegels__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-s);
  text-align: left;
}
.kaarttegel {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
  overflow: hidden;
  background-color: var(--dark);
  text-decoration: none;
  isolation: isolate;
}
.kaarttegel__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
  z-index: -2;
}
/* donkere overloop van onder, zodat de tekst altijd leesbaar is */
.kaarttegel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 38%, rgba(0, 0, 0, 0) 65%);
  z-index: -1;
}
.kaarttegel__tekst {
  position: absolute;
  left: var(--space-s);
  right: 5.6rem;
  bottom: var(--space-s);
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.kaarttegel__titel { font-family: "Bearmen"; font-size: var(--text-xl); line-height: 1.1; color: var(--secondary); }
.kaarttegel__sub { font-size: var(--text-s); line-height: 1.4; color: var(--light-80); }
.kaarttegel__pijl {
  position: absolute;
  right: var(--space-s);
  bottom: var(--space-s);
  width: 3.8rem;
  height: 3.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--dark);
  font-size: 1.8rem;
  opacity: 0;
  transform: translateX(-.6rem);
  transition: opacity .3s ease, transform .3s ease;
}
.kaarttegel:hover .kaarttegel__foto,
.kaarttegel:focus-visible .kaarttegel__foto { transform: scale(1.05); }
.kaarttegel:hover .kaarttegel__pijl,
.kaarttegel:focus-visible .kaarttegel__pijl { opacity: 1; transform: none; }
.kaarttegel:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

@media (hover: none) {
  /* op touchscreens geen aanwijs-effect: pijltje altijd tonen */
  .kaarttegel__pijl { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  .kaarttegels__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
  .kaarttegel__tekst { left: var(--space-xs); right: var(--space-xs); bottom: var(--space-xs); }
  .kaarttegel__titel { font-size: var(--text-l); }
  .kaarttegel__sub { font-size: 1.3rem; }
  .kaarttegel__pijl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kaarttegel__foto, .kaarttegel__pijl { transition: none; }
  .kaarttegel:hover .kaarttegel__foto { transform: none; }
}