/* Bierkaart: filter op soort en kaarten per bier. Kleuren per soort staan in src/data/bierkaart.json. */
.bierkaart {
  background-color: var(--secondary);
  color: var(--dark);
  padding: var(--space-l) var(--space-m) var(--space-2xl);
}
.bierkaart .menukaart__kaarten { margin-bottom: var(--space-s); }
.bierkaart__binnen {
  width: var(--max-screen-width);
  max-width: 100%;
  margin: 0 auto;
}

/* filter */
.bierfilter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}
.bierfilter__knop {
  font-family: "VintageGlamour";
  font-size: var(--text-s);
  line-height: 1;
  color: var(--dark);
  background: transparent;
  border: 1px solid var(--dark-20);
  background-color: #fff;
  border-radius: var(--radius-full);
  padding: .9rem 1.6rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.bierfilter__knop:hover { border-color: var(--primary); }
.bierfilter__knop[aria-pressed="true"] {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--dark);
}
.bierfilter__aantal { opacity: .6; margin-left: .3rem; }
.bierkaart__status {
  margin: var(--space-s) 0 var(--space-m);
  font-size: var(--text-s);
  color: var(--dark-60);
}

/* kaarten */
.bierkaart__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 38rem), 1fr));
  gap: var(--space-s);
}
.bier {
  display: grid;
  grid-template-columns: 1fr 8.5rem;
  grid-template-rows: 1fr auto;
  column-gap: var(--space-s);
  row-gap: var(--space-s);
  background-color: #fff;
  border: 1px solid var(--dark-5);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  transition: border-color .2s ease;
}
.bier:hover { border-color: var(--primary); }
.bier[hidden] { display: none; }
.bier__soorten {
  list-style: none;
  margin: 0 0 var(--space-xs);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.bier__soort {
  font-size: 1.3rem;
  line-height: 1;
  padding: .5rem 1rem;
  border-radius: var(--radius-full);
  background-color: var(--kleur);
  color: var(--light);
}
.bier__soort.is-licht { color: var(--dark); }
.bier__naam {
  font-family: "Bearmen";
  font-size: var(--text-l);
  color: var(--dark);
  margin: 0;
}
.bier__brouwerij {
  margin: .4rem 0 var(--space-xs);
  font-size: 1.3rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary-tekst);
}
.bier__beschrijving {
  font-size: var(--text-s);
  line-height: 1.55;
  color: var(--dark-70);
}
.bier__beschrijving p { margin: 0 0 .6em; }
.bier__foto {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  width: 100%;
  height: 20rem;
  object-fit: contain;
  object-position: bottom center;
}
.bier__onder {
  grid-column: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--dark-10);
}
.bier__info {
  display: flex;
  gap: var(--space-s);
  margin: 0;
}
.bier__info dt {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dark-50);
}
.bier__info dd { margin: 0; font-size: var(--text-s); }
.bier__prijs {
  margin: 0;
  font-family: "VintageGlamour";
  font-weight: 800;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--primary-tekst);
  white-space: nowrap;
}
.bier__valuta { font-size: .6em; margin-right: .2em; }

@media (max-width: 767px) {
  /* filter als horizontale strook die je kunt vegen */
  .bierfilter {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 calc(var(--space-m) * -1);
    padding: 0 var(--space-m) .4rem;
    scrollbar-width: none;
  }
  .bierfilter::-webkit-scrollbar { display: none; }
  .bier { grid-template-columns: 1fr 6.5rem; padding: var(--space-s); }
  .bier__foto { height: 14rem; }
}