/* wijnhandel-footer 1.0.0 · 21st-port van @solaceui/footer-section-3 (21st.dev, motion). Tailwind-maten uit de bron:
   sectie py-12 px-4, container max-w-7xl (1280 px); banner relative overflow-hidden rounded-xl h-[100px] md:h-[300px]
   in de hoofdkleur (hier --m-accent2) met een SVG-ruisfilter (feTurbulence fractalNoise, baseFrequency 0,65, 4 octaven,
   mix-blend multiply, dekking 0,9) en een gecentreerde kop 2xl/4xl/5xl font-bold flex-wrap gap-x-3; daaronder mt-8
   md:mt-16 flex col md:row justify-between gap-12 lg:gap-8, links space-y-12 lg:w-1/3, rechts flex-wrap gap-8 lg:gap-24
   lg:w-1/2 lg:justify-end met kolommen (kop text-lg font-bold, lijst space-y-2 in --m-muted, hover naar --m-ink).
   Entree: container whileInView once met stagger 0,1 s en delayChildren 0,1 s, items opacity 0 en y 20 in 0,5 s; de
   woorden van de kop komen gestaffeld (0,1 s) 20 px omhoog zodra de banner in beeld is (useInView once, marge -100 px).
   Reduced motion: alleen dekking. Nieuwsbrief en socialwolk uit de bron vervallen (fictief merk). */
.msm-wijnhandel-footer {
  --kf-ease: cubic-bezier(0, 0, .58, 1);
  box-sizing: border-box;
  width: 100%;
  padding: 48px 16px;
  background: var(--m-bg, #211718);
  color: var(--m-ink, #f3ece4);
  font-family: var(--m-font-body, 'Instrument Sans', ui-sans-serif, system-ui, sans-serif);
}
.msm-wijnhandel-footer *,
.msm-wijnhandel-footer *::before,
.msm-wijnhandel-footer *::after { box-sizing: border-box; }
.msm-wijnhandel-footer p { margin: 0; }
.msm-wijnhandel-footer ul { margin: 0; padding: 0; list-style: none; }
.msm-wijnhandel-footer a { color: inherit; text-decoration: none; }
.msm-wijnhandel-footer a:focus-visible { outline: 2px solid var(--m-primary, #c06945); outline-offset: 3px; border-radius: 3px; }

.msm-wijnhandel-footer .kf-wrap { width: 100%; max-width: 1280px; margin: 0 auto; }

/* Banner met kelderkorrel. */
.msm-wijnhandel-footer .kf-banner {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--m-accent2, #7a2f3b);
}
.msm-wijnhandel-footer .kf-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .9;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.msm-wijnhandel-footer .kf-banner-title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 12px;
  padding: 0 16px;
  font-family: var(--m-font-display, 'Fraunces', ui-serif, Georgia, serif);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  text-align: center;
  color: var(--m-ink, #f3ece4);
  pointer-events: none;
}
.msm-wijnhandel-footer .kf-word { display: inline-block; }

.msm-wijnhandel-footer .kf-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  margin-top: 32px;
}
.msm-wijnhandel-footer .kf-left { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.msm-wijnhandel-footer .kf-brand { display: flex; flex-direction: column; gap: 16px; }
.msm-wijnhandel-footer .kf-name {
  font-family: var(--m-font-display, 'Fraunces', ui-serif, Georgia, serif);
  font-size: 32px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--m-ink, #f3ece4);
}
.msm-wijnhandel-footer .kf-sub { font-size: 16px; line-height: 24px; color: var(--m-muted, #b4a398); }
.msm-wijnhandel-footer .kf-text { max-width: 420px; font-size: 14px; line-height: 22px; color: var(--m-muted, #b4a398); }
.msm-wijnhandel-footer .kf-note { font-size: 14px; line-height: 20px; color: var(--m-muted, #b4a398); }

.msm-wijnhandel-footer .kf-right { display: flex; flex-wrap: wrap; gap: 32px; }
.msm-wijnhandel-footer .kf-col { display: flex; flex-direction: column; gap: 16px; min-width: 160px; }
.msm-wijnhandel-footer .kf-col-title { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--m-ink, #f3ece4); }
.msm-wijnhandel-footer .kf-list { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 24px; color: var(--m-muted, #b4a398); }
.msm-wijnhandel-footer .kf-list a { transition: color .15s var(--kf-ease); }
.msm-wijnhandel-footer .kf-list a:hover { color: var(--m-ink, #f3ece4); }

.msm-wijnhandel-footer .kf-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--m-line, #3d2d2f);
  font-size: 14px;
  line-height: 20px;
  color: var(--m-muted, #b4a398);
}

/* Entree: container en blokken gestaffeld 20 px omhoog (0,5 s), woorden van de kop 20 px omhoog (0,3 s, stagger 0,1 s). */
.msm-wijnhandel-footer.is-js .kf-item { opacity: 0; transform: translateY(20px); }
.msm-wijnhandel-footer.is-js .kf-item.is-in { opacity: 1; transform: none; transition: opacity .5s var(--kf-ease), transform .5s var(--kf-ease); }
.msm-wijnhandel-footer.is-js .kf-word { opacity: 0; transform: translateY(20px); }
.msm-wijnhandel-footer.is-js .kf-banner.is-title .kf-word { opacity: 1; transform: none; transition: opacity .3s var(--kf-ease), transform .3s var(--kf-ease); }
.msm-wijnhandel-footer.is-js .kf-word:nth-child(1) { transition-delay: 0s; }
.msm-wijnhandel-footer.is-js .kf-word:nth-child(2) { transition-delay: .1s; }
.msm-wijnhandel-footer.is-js .kf-word:nth-child(3) { transition-delay: .2s; }
.msm-wijnhandel-footer.is-js .kf-word:nth-child(4) { transition-delay: .3s; }
.msm-wijnhandel-footer.is-js .kf-word:nth-child(5) { transition-delay: .4s; }
.msm-wijnhandel-footer.is-js .kf-word:nth-child(6) { transition-delay: .5s; }

@media (min-width: 768px) {
  .msm-wijnhandel-footer .kf-banner { height: 300px; }
  .msm-wijnhandel-footer .kf-banner-title { font-size: 36px; line-height: 40px; }
  .msm-wijnhandel-footer .kf-body { flex-direction: row; margin-top: 64px; }
}
@media (min-width: 1024px) {
  .msm-wijnhandel-footer .kf-banner-title { font-size: 48px; line-height: 1; }
  .msm-wijnhandel-footer .kf-body { gap: 32px; }
  .msm-wijnhandel-footer .kf-left { width: 33.333%; }
  .msm-wijnhandel-footer .kf-right { width: 50%; justify-content: flex-end; gap: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-wijnhandel-footer.is-js .kf-item,
  .msm-wijnhandel-footer.is-js .kf-word { transform: none; }
  .msm-wijnhandel-footer.is-js .kf-item.is-in,
  .msm-wijnhandel-footer.is-js .kf-banner.is-title .kf-word { transition: opacity .3s ease-out; }
  .msm-wijnhandel-footer .kf-list a { transition: none; }
}