/* taartatelier-footer 1.0.0 · block-port van ReactBitsPro Blocks/footer-5 (kaartfooter met verlopende balken).
   Tailwind-maten uit de bron vertaald: py-12, px-4/6/8, max-w 1400, kaart rounded-2xl/3xl p-8/12/16, gap-12/8,
   space-y-6/8, knoppen w-10 h-10 rounded-full, kolommen gap 32/48/64, kop text-lg, lijsten space-y-3, mt-8/12. */
.msm-taartatelier-footer {
  --tf-ease: cubic-bezier(.42, 0, .58, 1);
  box-sizing: border-box;
  width: 100%;
  padding: 48px 16px;
  background: var(--m-bg, #f7ede4);
  color: var(--m-ink, #3a2420);
  font-family: var(--m-font-body, 'Albert Sans', 'Segoe UI', sans-serif);
}
.msm-taartatelier-footer *,
.msm-taartatelier-footer *::before,
.msm-taartatelier-footer *::after { box-sizing: border-box; }
.msm-taartatelier-footer p,
.msm-taartatelier-footer h3,
.msm-taartatelier-footer ul { margin: 0; }
.msm-taartatelier-footer ul { padding: 0; list-style: none; }
.msm-taartatelier-footer svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.msm-taartatelier-footer a { color: inherit; }
.msm-taartatelier-footer a:focus-visible { outline: 2px solid var(--m-surface, #fffaf6); outline-offset: 3px; border-radius: 4px; }
.msm-taartatelier-footer .tf-bottom a:focus-visible { outline-color: var(--m-ink, #3a2420); }

.msm-taartatelier-footer .tf-wrap { max-width: 1400px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; }
.msm-taartatelier-footer .tf-card {
  position: relative;
  width: 100%;
  padding: 32px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--m-primary, #a8324f);
  color: var(--m-surface, #fffaf6);
}
/* Negen balken: hoogte max(20, 90 - |i-4| x 15)%, dekking max(0.1, 1 - |i-4| x 0.2) x 0.3 */
.msm-taartatelier-footer .tf-bars { position: absolute; inset: 0; display: flex; flex-direction: row; align-items: flex-end; justify-content: center; pointer-events: none; }
.msm-taartatelier-footer .tf-bars span {
  flex: 1 1 0%;
  position: relative;
  height: var(--h);
  background: linear-gradient(to top, color-mix(in srgb, var(--m-ink, #3a2420) calc(var(--o) * 100%), transparent) 0%, transparent 100%);
}
.msm-taartatelier-footer .tf-grid { position: relative; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.msm-taartatelier-footer .tf-brand { display: flex; flex-direction: column; gap: 24px; }
.msm-taartatelier-footer .tf-name {
  font-family: var(--m-font-display, 'Gloock', Georgia, serif);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.msm-taartatelier-footer .tf-lead {
  max-width: 24rem;
  font-size: 16px;
  line-height: 1.625;
  font-weight: 500;
  color: color-mix(in srgb, var(--m-surface, #fffaf6) 92%, transparent);
}
.msm-taartatelier-footer .tf-quick { display: flex; align-items: center; gap: 16px; }
.msm-taartatelier-footer .tf-quick a {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--m-surface, #fffaf6);
  color: var(--m-ink, #3a2420);
  transition: background-color .2s var(--tf-ease);
}
.msm-taartatelier-footer .tf-quick a:hover { background: color-mix(in srgb, var(--m-line, #e6d3c8) 60%, var(--m-surface, #fffaf6)); }
.msm-taartatelier-footer .tf-quick svg { width: 20px; height: 20px; }
.msm-taartatelier-footer .tf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.msm-taartatelier-footer .tf-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.msm-taartatelier-footer .tf-head {
  font-family: var(--m-font-body, 'Albert Sans', 'Segoe UI', sans-serif);
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: color-mix(in srgb, var(--m-surface, #fffaf6) 92%, transparent);
}
.msm-taartatelier-footer .tf-col ul { display: grid; gap: 12px; }
.msm-taartatelier-footer .tf-col a {
  color: color-mix(in srgb, var(--m-surface, #fffaf6) 92%, transparent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: color .15s var(--tf-ease), text-decoration-color .15s var(--tf-ease);
}
.msm-taartatelier-footer .tf-col a:hover { color: var(--m-surface, #fffaf6); text-decoration-color: currentColor; }
.msm-taartatelier-footer .tf-bottom {
  margin-top: 32px;
  display: grid;
  gap: 4px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--m-muted, #7a5f58);
}

/* Gestaffelde fade van de kolommen bij het eerste inbeeld (alleen met JavaScript) */
.msm-taartatelier-footer .tf-grid.is-waiting .tf-item { opacity: 0; translate: 0 12px; }
.msm-taartatelier-footer .tf-grid.is-shown .tf-item { animation: tf-rise .5s var(--tf-ease) calc(var(--i, 0) * .08s) both; }
@keyframes tf-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

@media (min-width: 640px) {
  .msm-taartatelier-footer { padding: 48px 24px; }
  .msm-taartatelier-footer .tf-card { padding: 48px; border-radius: 24px; }
  .msm-taartatelier-footer .tf-brand { gap: 32px; }
  .msm-taartatelier-footer .tf-name { font-size: 36px; }
  .msm-taartatelier-footer .tf-lead { font-size: 18px; }
  .msm-taartatelier-footer .tf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  .msm-taartatelier-footer .tf-bottom { margin-top: 48px; font-size: 16px; line-height: 24px; }
}
@media (min-width: 1024px) {
  .msm-taartatelier-footer { padding: 48px 32px; }
  .msm-taartatelier-footer .tf-card { padding: 64px; }
  .msm-taartatelier-footer .tf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .msm-taartatelier-footer .tf-cols { gap: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-taartatelier-footer .tf-grid.is-waiting .tf-item { opacity: 1; translate: 0 0; }
  .msm-taartatelier-footer .tf-grid.is-shown .tf-item { animation: none; }
}