/* ============================================================
   PAGINA: kaart.html — zijrail met scrollspy + menukaart-groepen
   Gebouwd met thema-tokens; componenten (.dishlist, .panel__note,
   .kaart__credit) komen uit beemster.css.
   ============================================================ */

.kaartpage { display: grid; grid-template-columns: 220px 1fr; gap: clamp(40px, 6vw, 110px); align-items: start; }

/* zijrail (desktop): sticky categorie-index */
.kaartpage__rail { position: sticky; top: 120px; display: flex; flex-direction: column; }
.kaartpage__rail a {
  padding: 9px 0 9px 18px; border-left: 1px solid var(--line);
  font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft);
  transition: color .3s var(--e1), border-color .3s var(--e1), padding-left .3s var(--e1);
}
.kaartpage__rail a:hover { color: var(--ink); }
.kaartpage__rail a.is-active { color: var(--olive); border-left: 2px solid var(--olive); font-weight: 600; padding-left: 22px; }

/* menukaart-groepen */
.kaartgroep { margin-bottom: clamp(44px, 6vw, 72px); scroll-margin-top: 130px; }
.kaartgroep .panel__note { margin: 8px 0 0; }
.kaartgroep .dishlist { margin-top: 14px; }

/* foto-intermezzo tussen groepen — zelfde omkaderde-foto-patroon als het thema */
.kaartbreak { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: clamp(48px, 6vw, 84px) 0; }
.kaartbreak figure { aspect-ratio: 16/10; border-radius: 4px; overflow: hidden; outline: 1px solid rgba(173,138,71,.35); outline-offset: 12px; margin: 13px; }
.kaartbreak img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) contrast(1.02); }

/* mobiel: rail wordt een sticky horizontale categoriebalk */
@media (max-width: 900px){
  .kaartpage { grid-template-columns: 1fr; gap: 28px; }
  .kaartpage__rail {
    position: sticky; top: 72px; z-index: 30; flex-direction: row; gap: 6px;
    overflow-x: auto; padding: 10px 4px; margin: 0 -4px;
    background: color-mix(in srgb, var(--linen) 92%, transparent);
    backdrop-filter: blur(8px);
    scrollbar-width: none;
  }
  .kaartpage__rail::-webkit-scrollbar { display: none; }
  .kaartpage__rail a { flex: 0 0 auto; border-left: 0; border: 1px solid var(--line); border-radius: 100px; padding: 9px 16px; }
  .kaartpage__rail a.is-active { border: 1px solid var(--olive); background: var(--olive); color: var(--cream); padding-left: 16px; }
  .kaartbreak { grid-template-columns: 1fr; gap: 18px; }
}

/* CTA-afsluiter buiten de sticky grid (voorkomt chipbalk-overlap op mobiel) */
.kaartcta { text-align: center; margin-top: clamp(12px, 3vw, 28px); }
.kaartcta .btnrow { justify-content: center; }