/* /groeizaken-live/: eventpagina (QR-code). Aanbodkaarten, tip-tabs met veegsliders en het aanvraagformulier.
   Formulier en vinkjes leunen op pages/begin-direct.css; hier alleen de eigen onderdelen. */

.gzl-sectie { padding: 80px 0; background-color: var(--color-white); }
.gzl-sectie--creme { background-color: var(--color-cream); }
.gzl-kop { margin-bottom: 32px; }

/* Veegrij: horizontaal scrollen met snap, op elk scherm (vinger, trackpad of de knoppen) */
.gzl-veeg { position: relative; }
.gzl-veeg__rij {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 31%);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 16px;
  margin: 0 -4px;
  scrollbar-width: none;
}
.gzl-veeg__rij::-webkit-scrollbar { display: none; }
.gzl-veeg__rij > * { scroll-snap-align: start; }
.gzl-veeg__rij--aanbod { grid-auto-columns: minmax(280px, calc(50% - 10px)); }
.gzl-veeg__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.gzl-veeg__nav[hidden] { display: none; }

/* Aanbodkaarten */
.gzl-aanbod {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: var(--radius-img);
  background-color: var(--color-white);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.gzl-aanbod__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.gzl-aanbod__icoon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 12px;
  background-color: var(--color-primary); color: var(--color-accent); font-size: 22px;
}
.gzl-aanbod__tag {
  padding: 4px 12px; border-radius: 999px;
  background-color: var(--color-accent); color: var(--color-white);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.gzl-aanbod__titel { font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1.2; color: var(--color-primary); margin-bottom: 10px; }
.gzl-aanbod__tekst { font-weight: 400; color: var(--color-text); margin-bottom: 18px; }
.gzl-aanbod__punten { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.gzl-aanbod__punten li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--color-primary); }
.gzl-aanbod__vink { color: var(--color-accent); font-size: 14px; }
.gzl-aanbod__knop { margin-top: auto; align-self: flex-start; }

/* Tip-tabs */
.gzl-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.gzl-tabs__knop {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  border: 2px solid var(--color-cream); background-color: var(--color-white);
  font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--color-primary);
  cursor: pointer; transition: background-color var(--t-color), border-color var(--t-color), color var(--t-color);
}
.gzl-tabs__knop:hover { border-color: var(--color-accent); }
.gzl-tabs__knop.is-actief { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.gzl-tabs__knop:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.gzl-tabs__icoon { color: var(--color-accent); }

.gzl-tips__titel { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--color-primary); margin-bottom: 16px; }
.gzl-tip {
  position: relative;
  padding: 28px 24px 24px;
  border-radius: var(--radius-img);
  background-color: var(--color-cream);
}
.gzl-tip__nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%;
  background-color: var(--color-accent); color: var(--color-white); font-weight: 800;
}
.gzl-tip__titel { font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.3; color: var(--color-primary); margin-bottom: 8px; }
.gzl-tip__tekst { margin: 0; font-weight: 400; color: var(--color-text); }
.gzl-tips__cta { margin-top: 28px; }

/* Formulier */
.gzl-form { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
.gzl-form__sub { color: var(--color-text); }

@media (max-width: 1024px) {
  .gzl-veeg__rij { grid-auto-columns: minmax(260px, 46%); }
  .gzl-form { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 767px) {
  .gzl-sectie { padding: 56px 0; }
  .gzl-veeg__rij, .gzl-veeg__rij--aanbod { grid-auto-columns: 84%; gap: 14px; }
  .gzl-aanbod { padding: 24px; }
  .gzl-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -20px; margin-right: -20px; padding: 0 20px 4px; }
  .gzl-tabs::-webkit-scrollbar { display: none; }
  .gzl-tabs__knop { flex: 0 0 auto; }
}