/* ===========================================================================
   bar.css — alleen voor bar-cocktails.html
   ---------------------------------------------------------------------------
   Twee arrangementen naast elkaar (open bar en cocktailbar), en daaronder de
   cocktailkaart waarin elke cocktail zijn 0.0-variant bij zich draagt.
   Alle kleuren, maten en afstanden komen uit css/tokens.css.
   =========================================================================== */

/* ── De twee arrangementen ───────────────────────────────────────── */
.arr {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
@media (min-width: 900px) { .arr { grid-template-columns: repeat(2, 1fr); } }

.arr__kaart {
  display: grid;
  gap: var(--s-5);
  align-content: start;
  padding: clamp(24px, 3vw, 40px);
  background: var(--c-cream-soft);
  border: 1px solid var(--c-cream-line);
  border-radius: var(--r-lg);
  height: 100%;
}
.arr__kaart--donker {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-text-inv);
}

.arr__kop { display: grid; gap: var(--s-2); }
.arr__naam {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.1;
  margin: 0;
}
.arr__prijs {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  color: var(--c-brass-ink);
  font-variant-numeric: lining-nums;
}
.arr__kaart--donker .arr__prijs { color: var(--c-brass-bright); }
.arr__tekst { margin: 0; color: var(--c-text-soft); }
.arr__kaart--donker .arr__tekst { color: var(--c-text-inv-soft); }

/* Inbegrepen — vinkjes */
.arr__label {
  font-size: var(--t-overline);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-mute);
  display: block;
  margin-bottom: var(--s-3);
}
.arr__kaart--donker .arr__label { color: var(--c-brass-bright); }

.arr__lijst { display: grid; gap: 10px; }
.arr__lijst li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--t-sm);
  line-height: 1.5;
}
.arr__lijst svg { margin-top: 5px; color: var(--c-brass-ink); }
.arr__kaart--donker .arr__lijst svg { color: var(--c-brass-bright); }

/* Het blok onderin: standaardselectie of nacalculatie */
.arr__voet {
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-cream-line);
}
.arr__kaart--donker .arr__voet { border-top-color: var(--c-ink-line); }
.arr__selectie {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--c-text-soft);
}
.arr__kaart--donker .arr__selectie { color: var(--c-text-inv-soft); }
.arr__noot {
  margin: var(--s-3) 0 0;
  font-size: var(--t-xs);
  color: var(--c-text-mute);
}
.arr__kaart--donker .arr__noot { color: var(--c-text-inv-mute); }

/* ── De cocktailkaart ────────────────────────────────────────────── */
.ckt {
  display: grid;
  gap: var(--s-4) clamp(28px, 4vw, 56px);
}
@media (min-width: 700px)  { .ckt { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ckt { grid-template-columns: repeat(3, 1fr); } }

.ckt__item {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--c-cream-line);
}
.ckt__naam { font-size: var(--t-lg); line-height: 1.25; margin: 0; }
.ckt__over { margin: 0; font-size: var(--t-sm); color: var(--c-text-soft); }

/* De alcoholvrije tweelingbroer hangt onder zijn cocktail */
.ckt__vrij {
  display: grid;
  gap: 3px;
  margin-top: var(--s-2);
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-brass);
}
.ckt__vrij-naam {
  font-size: var(--t-sm);
  font-weight: 500;
}
.ckt__vrij-naam span {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px 2px;
  border-radius: var(--r-full);
  background: var(--c-brass);
  color: var(--c-ink);
  font-size: var(--t-overline);
  letter-spacing: var(--ls-wide);
  vertical-align: 1px;
}
.ckt__vrij-over { margin: 0; font-size: var(--t-xs); color: var(--c-text-mute); }