/* personal-trainer-footer 1.0.0 · vanilla port van de 21st.dev Sticky Footer (@efferd) voor Krachtlijn Coaching:
   gordijn-onthulling met een vast paneel van 720 px, drie diagonale lichtvlakken linksboven en een entree per kolom.
   Kleuren alleen via --m-*: donker vlak in --m-ink, tekst in --m-bg. */
.msm-personal-trainer-footer {
  --pf-fg: var(--m-bg, #e8ece6);
  --pf-muted: color-mix(in srgb, var(--m-bg, #e8ece6) 72%, transparent);
  --pf-border: color-mix(in srgb, var(--m-bg, #e8ece6) 16%, transparent);
  position: relative;
  width: 100%;
  margin: 0;
  background: var(--m-ink, #17221c);
  color: var(--pf-fg);
  font-family: var(--m-font-body, 'Work Sans', ui-sans-serif, system-ui, sans-serif);
}
.msm-personal-trainer-footer *,
.msm-personal-trainer-footer *::before,
.msm-personal-trainer-footer *::after { box-sizing: border-box; }

/* Gewone sectie (mobiel, laag scherm, zonder script). */
.msm-personal-trainer-footer .pf-fixed,
.msm-personal-trainer-footer .pf-sticky { position: relative; width: 100%; }

/* Onthulling: buitenste footer 720 px met clip-path, daarin een vast paneel onderaan het venster met een
   sticky binnenlaag op top calc(100vh - 720px). De pagina erboven schuift weg, de footer blijft liggen. */
.msm-personal-trainer-footer.is-reveal {
  height: 720px;
  clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%);
}
.msm-personal-trainer-footer.is-reveal .pf-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 720px;
  width: 100%;
}
.msm-personal-trainer-footer.is-reveal .pf-sticky {
  position: sticky;
  top: calc(100vh - 720px);
  height: 100%;
  overflow-y: auto;
}

/* Paneel: relative flex size-full flex-col justify-between gap-5 border-t px-4 py-8 md:px-12 */
.msm-personal-trainer-footer .pf-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  height: 100%;
  padding: 2rem 1rem;
  border-top: 1px solid var(--pf-border);
  background: var(--m-ink, #17221c);
}

/* Drie langgerekte lichtvlakken linksboven, -45 graden gedraaid: het schuine daglicht uit de fabrieksramen. */
.msm-personal-trainer-footer .pf-light {
  position: absolute;
  inset: 0;
  z-index: 0;
  isolation: isolate;
  contain: strict;
  pointer-events: none;
}
.msm-personal-trainer-footer .pf-beam {
  position: absolute;
  top: 0;
  left: 0;
  height: 80rem;
  border-radius: 999px;
  rotate: -45deg;
}
.msm-personal-trainer-footer .pf-beam-1 {
  width: 35rem;
  translate: 0 -21.875rem;
  background: radial-gradient(68.54% 68.72% at 55.02% 31.46%, color-mix(in srgb, var(--m-bg, #e8ece6) 6%, transparent) 0, color-mix(in srgb, var(--m-bg, #e8ece6) 2%, transparent) 50%, color-mix(in srgb, var(--m-bg, #e8ece6) 1%, transparent) 80%);
}
.msm-personal-trainer-footer .pf-beam-2,
.msm-personal-trainer-footer .pf-beam-3 {
  width: 15rem;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--m-bg, #e8ece6) 4%, transparent) 0, color-mix(in srgb, var(--m-bg, #e8ece6) 1%, transparent) 80%, transparent 100%);
}
.msm-personal-trainer-footer .pf-beam-2 { translate: 5% -50%; }
.msm-personal-trainer-footer .pf-beam-3 { translate: 0 -21.875rem; }

/* Kolommen: mt-10 flex flex-col gap-8 md:flex-row xl:mt-0 */
.msm-personal-trainer-footer .pf-cols {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2.5rem;
}
.msm-personal-trainer-footer .pf-col { width: 100%; }
.msm-personal-trainer-footer .pf-about { max-width: 24rem; min-width: min(18rem, 100%); }
.msm-personal-trainer-footer .pf-about > * + * { margin-top: 1rem; }
.msm-personal-trainer-footer .pf-brand { margin: 0; }
.msm-personal-trainer-footer .pf-brand a {
  color: var(--pf-fg);
  font-family: var(--m-font-display, 'Oswald', ui-sans-serif, system-ui, sans-serif);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}
.msm-personal-trainer-footer .pf-text,
.msm-personal-trainer-footer .pf-contact { margin: 0; color: var(--pf-muted); font-size: 0.875rem; line-height: 1.25rem; }
.msm-personal-trainer-footer .pf-text { margin-top: 2rem; }
.msm-personal-trainer-footer .pf-contact { padding: 0; list-style: none; }
.msm-personal-trainer-footer .pf-contact li + li { margin-top: 0.25rem; }
.msm-personal-trainer-footer .pf-group { margin-bottom: 2.5rem; }
.msm-personal-trainer-footer .pf-head {
  margin: 0;
  color: var(--pf-fg);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-transform: uppercase;
}
.msm-personal-trainer-footer .pf-links {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.msm-personal-trainer-footer .pf-links li + li { margin-top: 0.5rem; }
.msm-personal-trainer-footer .pf-links a,
.msm-personal-trainer-footer .pf-brand a { display: inline-flex; align-items: center; position: relative; min-height: 24px; }
.msm-personal-trainer-footer .pf-links a {
  color: var(--pf-muted);
  text-decoration: none;
  transition: color 0.3s;
}
.msm-personal-trainer-footer .pf-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.25rem;
  height: 2px;
  background: var(--m-primary, #e14b32);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s;
}
.msm-personal-trainer-footer .pf-links a:hover,
.msm-personal-trainer-footer .pf-links a:focus-visible { color: var(--pf-fg); }
.msm-personal-trainer-footer .pf-links a:hover::after,
.msm-personal-trainer-footer .pf-links a:focus-visible::after { transform: scaleX(1); }
.msm-personal-trainer-footer a:focus-visible { outline: 2px solid var(--m-primary, #e14b32); outline-offset: 3px; border-radius: 2px; }

/* Onderregel: flex flex-col items-center justify-between gap-2 border-t pt-2 text-sm md:flex-row */
.msm-personal-trainer-footer .pf-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--pf-border);
  color: var(--pf-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
}
.msm-personal-trainer-footer .pf-bottom p { margin: 0; }
.msm-personal-trainer-footer .pf-bottom-left { display: flex; flex-direction: column; gap: 0.25rem; }
.msm-personal-trainer-footer .pf-fictief { font-size: 0.8125rem; }

@media (min-width: 768px) {
  .msm-personal-trainer-footer .pf-panel { padding: 2rem 3rem; }
  .msm-personal-trainer-footer .pf-cols { flex-direction: row; }
  .msm-personal-trainer-footer .pf-text { margin-top: 0; }
  .msm-personal-trainer-footer .pf-group { margin-bottom: 0; }
  .msm-personal-trainer-footer .pf-links { font-size: 0.75rem; line-height: 1rem; }
  .msm-personal-trainer-footer .pf-bottom { flex-direction: row; text-align: left; }
}
@media (min-width: 1024px) {
  .msm-personal-trainer-footer .pf-links { font-size: 0.875rem; line-height: 1.25rem; }
}
@media (min-width: 1280px) {
  .msm-personal-trainer-footer .pf-cols { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-personal-trainer-footer .pf-links a,
  .msm-personal-trainer-footer .pf-links a::after { transition: none; }
}