/* woninginrichter-footer 1.0.0 · block-port van React Bits Pro footer-3 (CTA-balk, linkkolommen, onderregel). */
.msm-woninginrichter-footer {
  --wf-ink: var(--m-ink, #1f2421);
  --wf-line: var(--m-line, #d6cdbf);
  --wf-muted: var(--m-muted, #66655b);
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0 1rem;
  background: var(--m-surface, #f8f5ef);
  color: var(--wf-ink);
  font-family: var(--m-font-body, 'Hanken Grotesk', 'Segoe UI', sans-serif);
}
.msm-woninginrichter-footer *,
.msm-woninginrichter-footer *::before,
.msm-woninginrichter-footer *::after { box-sizing: border-box; }

.msm-woninginrichter-footer .wf-cta {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 3rem 0;
  border-top: 1px solid var(--wf-line);
  border-bottom: 1px solid var(--wf-line);
  background-color: transparent;
  transition: background-color 0.15s ease;
}
.msm-woninginrichter-footer .wf-cta:hover,
.msm-woninginrichter-footer .wf-cta:focus-within { background-color: var(--m-accent2, #b9824f); }
.msm-woninginrichter-footer .wf-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.msm-woninginrichter-footer .wf-cta-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--wf-ink);
}
.msm-woninginrichter-footer .wf-cta-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wf-ink);
  text-decoration: none;
}
/* De hele balk is klikbaar, zoals de knop in de bron. */
.msm-woninginrichter-footer .wf-cta-link::after { content: ""; position: absolute; inset: 0; }
.msm-woninginrichter-footer .wf-cta-link:focus-visible { outline: none; }
.msm-woninginrichter-footer .wf-cta:focus-within { outline: 2px solid var(--wf-ink); outline-offset: -2px; }
.msm-woninginrichter-footer .wf-cta-link svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.msm-woninginrichter-footer .wf-main {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 0;
}
.msm-woninginrichter-footer .wf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.msm-woninginrichter-footer .wf-brand {
  margin: 0 0 0.75rem;
  font-family: var(--m-font-display, 'Instrument Serif', Georgia, serif);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--wf-ink);
}
.msm-woninginrichter-footer .wf-about {
  max-width: 28rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--wf-muted);
}
.msm-woninginrichter-footer .wf-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
.msm-woninginrichter-footer .wf-col h3 {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--wf-ink);
}
.msm-woninginrichter-footer .wf-col ul {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.msm-woninginrichter-footer .wf-col a {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--wf-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.msm-woninginrichter-footer .wf-col a:hover { color: var(--wf-ink); }
.msm-woninginrichter-footer .wf-col a:focus-visible { outline: 2px solid var(--wf-ink); outline-offset: 2px; border-radius: 2px; }
.msm-woninginrichter-footer .wf-rule {
  width: 100%;
  border-top: 1px solid var(--wf-line);
}
.msm-woninginrichter-footer .wf-bottom {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 0;
  text-align: right;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--wf-muted);
}
.msm-woninginrichter-footer .wf-bottom p { margin: 0; }

/* Binnenkomst van footer-3: container opacity 0 naar 1 in 0,3 s, ieder onderdeel opacity 0 en y 20 naar 0 in 0,5 s. */
.msm-woninginrichter-footer.is-armed .wf-motion { opacity: 0; }
.msm-woninginrichter-footer.is-armed .wf-item { opacity: 0; transform: translateY(20px); }
.msm-woninginrichter-footer.is-armed.is-in .wf-motion { opacity: 1; transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.35, 1); }
.msm-woninginrichter-footer.is-armed.is-in .wf-item {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s cubic-bezier(0.42, 0, 0.58, 1), transform 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}

@media (min-width: 640px) {
  .msm-woninginrichter-footer { padding: 0 1.5rem; }
  .msm-woninginrichter-footer .wf-cta-title { font-size: 1.5rem; }
  .msm-woninginrichter-footer .wf-main { padding: 4rem 0; }
  .msm-woninginrichter-footer .wf-about { font-size: 1.125rem; }
  .msm-woninginrichter-footer .wf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
  .msm-woninginrichter-footer .wf-col h3 { margin-bottom: 1.5rem; font-size: 1rem; }
  .msm-woninginrichter-footer .wf-col a { font-size: 1rem; }
  .msm-woninginrichter-footer .wf-bottom { padding: 2rem 0; font-size: 0.875rem; }
}
@media (min-width: 1024px) {
  .msm-woninginrichter-footer { padding: 0 2rem; }
  .msm-woninginrichter-footer .wf-main { padding: 5rem 0; }
  .msm-woninginrichter-footer .wf-grid { grid-template-columns: 1fr auto; gap: 4rem; }
  .msm-woninginrichter-footer .wf-cols { gap: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-woninginrichter-footer.is-armed .wf-motion,
  .msm-woninginrichter-footer.is-armed .wf-item { opacity: 1; transform: none; transition: none; }
  .msm-woninginrichter-footer .wf-cta,
  .msm-woninginrichter-footer .wf-col a { transition: none; }
}