/* =========================================================
   Koffiets V3 — /events (koffiebar op locatie). Enkel tokens en primitieven uit brand.css.
   ====================================================== */

/* ---------- Hero op roze (zoals de shop) ---------- */
.ev-hero { background: var(--k-pink); }
.ev-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--k-8);
    padding-block: var(--k-10) var(--k-10);
}
.ev-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--k-3); }
/* Op roze: tekst in inkt (muted haalt geen AA op --k-pink). */
.ev-hero__eyebrow, .ev-hero__lead { color: var(--k-ink); }
.ev-hero__title { max-width: 16ch; }
.ev-hero__lead { max-width: 52ch; }
.ev-hero__media > img { display: block; width: 100%; height: auto; }

/* ---------- Troeven ---------- */
.ev-usp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-4); margin: 0; padding: 0; list-style: none; }
.ev-usp__item { display: flex; flex-direction: column; gap: var(--k-1); padding-top: var(--k-3); border-top: 1px solid var(--k-line); }
.ev-usp__item p { margin: 0; }

/* ---------- Pakketten ---------- */
.ev-pkgs__title { margin-bottom: var(--k-5); }
.ev-pkgs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-3); align-items: stretch; }
.ev-pkg {
    display: flex;
    flex-direction: column;
    gap: var(--k-2);
    padding: var(--k-4);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r);
    background: var(--k-bg);
    transition: border-color var(--k-dur) var(--k-ease);
}
.ev-pkg--featured { border-color: var(--k-pink); background: var(--k-pink); }
.ev-pkg.is-selected { border-color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-ink); }
.ev-pkg__label {
    align-self: flex-start;
    margin: 0;
    padding: 4px 12px;
    border-radius: var(--k-r-pill);
    background: var(--k-accent);
    color: #fff;
    font: 500 13px/20px var(--k-font);
}
.ev-pkg__name { margin: 0; font: 500 22px/30px var(--k-font); letter-spacing: -0.02em; }
.ev-pkg__audience { margin: -8px 0 0; color: var(--k-muted); font-size: 14px; line-height: 22px; }
.ev-pkg--featured .ev-pkg__audience { color: var(--k-ink); }
.ev-pkg__price { display: grid; gap: 2px; margin: 0; padding-block: var(--k-2); border-block: 1px solid var(--k-line); font-variant-numeric: tabular-nums; }
.ev-pkg--featured .ev-pkg__price { border-color: rgba(23, 18, 19, .12); }
.ev-pkg__main { font: 500 24px/32px var(--k-font); letter-spacing: -0.02em; }
.ev-pkg__sub { color: var(--k-muted); font-size: 14px; line-height: 20px; }
.ev-pkg--featured .ev-pkg__sub { color: var(--k-ink); }
.ev-pkg__list { display: grid; gap: 6px; margin: 0 0 var(--k-1); padding-left: 18px; font-size: 15px; line-height: 22px; }
.ev-pkg__list li::marker { color: var(--k-accent); }
.ev-pkg__pick { margin-top: auto; white-space: normal; text-align: center; line-height: 1.2; }
.ev-pkgs__more { margin: var(--k-4) 0 0; text-align: center; }

/* ---------- Formulier ---------- */
.ev-form-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--k-8); align-items: start; }
.ev-form-wrap__aside { display: flex; flex-direction: column; gap: var(--k-2); position: sticky; top: calc(var(--k-header-h) + var(--k-3)); }
.ev-form { display: flex; flex-direction: column; gap: var(--k-5); }
.ev-step { display: flex; flex-direction: column; gap: var(--k-2); min-width: 0; margin: 0; padding: 0 0 var(--k-5); border: 0; border-bottom: 1px solid var(--k-line); }
.ev-step__legend { display: flex; align-items: center; gap: 12px; margin-bottom: var(--k-2); padding: 0; font: 500 20px/28px var(--k-font); letter-spacing: -0.02em; }
.ev-step__no {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--k-pink);
    color: var(--k-ink);
    font: 600 15px/1 var(--k-font);
}
.ev-date { max-width: 280px; }
.ev-hint { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; line-height: 20px; }
.ev-hint[hidden] { display: none; }
.ev-choices { display: grid; gap: var(--k-1); }
.ev-sub { display: grid; gap: var(--k-1); margin: 0 0 var(--k-1) var(--k-5); }
.ev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-3); }
.ev-done { display: flex; flex-direction: column; gap: var(--k-2); padding: var(--k-5); border-radius: var(--k-r); background: var(--k-pink); }
.ev-done p { margin: 0; }
.ev-done:focus { outline: none; }

/* ---------- Garantie ---------- */
.ev-promise__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--k-8); align-items: start; }
.ev-promise__list { display: grid; gap: var(--k-2); margin: 0; padding: 0; list-style: none; font-size: 17px; line-height: 26px; }
.ev-promise__list li { padding-bottom: var(--k-2); border-bottom: 1px solid var(--k-line); }

/* ---------- Responsief ---------- */
@media (max-width: 1024px) {
    .ev-pkgs__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 860px) {
    .ev-hero__inner, .ev-form-wrap, .ev-promise__inner { grid-template-columns: 1fr; gap: var(--k-5); }
    .ev-hero__inner { padding-block: var(--k-6); }
    .ev-hero__media { max-width: 420px; }
    .ev-form-wrap__aside { position: static; }
}
@media (max-width: 640px) {
    .ev-usp__grid { grid-template-columns: 1fr; gap: var(--k-3); }
    .ev-grid { grid-template-columns: 1fr; }
    .ev-sub { margin-left: 0; }
    .ev-hero__text .k-btn { align-self: stretch; white-space: normal; text-align: center; line-height: 1.2; }
    .ev-pkg { padding: var(--k-3); }
    .ev-pkgs__more { text-align: left; }
    .k-form__foot .k-btn { width: 100%; }
}