/* Footer: de naam over de laatste foto */
.footer {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; color: var(--ink); background: var(--bg);
}
.footer-photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 50%;
  filter: brightness(.8); /* nachtfoto is zelf al donker */
  transform: scale(var(--footer-scale, 1)); transform-origin: center 70%;
  will-change: transform;
}
/* Neutrale, egale scrim: witte tekst leesbaar op elke plek van de foto */
.footer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim); }

.footer-inner {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between;
  padding-top: 24px; padding-bottom: 56px;
}
.footer-top {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
}
.footer-col { grid-column: 1 / span 3; list-style: none; margin: 0; padding: 0; font-size: var(--step-body); line-height: 1.4; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: 8px; }
.footer-contact { grid-column: 10 / span 3; text-align: right; }

/* Tikdoel 44px hoog */
.footer-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
  text-decoration-color: transparent;
  transition: color var(--dur-link) var(--ease), text-decoration-color var(--dur-link) var(--ease), opacity var(--dur-link) var(--ease);
}
.footer-link:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
.footer-link:active { opacity: .7; }

/* Woordmerk links op de marge, klein genoeg om over gras en benen te vallen (niet over de gezichten) */
.footer-logo { width: min(100%, 760px); height: auto; }
.footer-legal { margin-top: 20px; font-size: var(--step-s); color: var(--ink); text-wrap: balance; }

@media (max-width: 1023px) {
  .footer-col { grid-column: 1 / span 6; }
  .footer-contact { grid-column: 7 / span 6; }
}
@media (max-width: 599px) {
  .footer-inner { min-height: max(88svh, 600px); padding-top: 16px; padding-bottom: 40px; }
  .footer-photo { object-position: 22% 50%; }
  /* Links naast elkaar in de lucht-band; secundaire links, dus de kleine maat zodat beide kolommen op 320 passen */
  .footer-top { display: flex; justify-content: space-between; gap: 8px 24px; }
  .footer-col { flex: none; font-size: var(--step-s); }
  .footer-contact { text-align: right; }
}
/* Liggende telefoon: lage band, dus kleiner woordmerk zodat het onder de gezichten blijft */
@media (orientation: landscape) and (max-height: 560px) {
  /* Iets hoger dan het scherm, zodat de foto bijna heel in beeld is: links boven de hoofden, logo op de shirts */
  .footer-inner { min-height: 560px; padding-bottom: 24px; }
  .footer-logo { width: min(100%, 420px); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-photo { transform: none; will-change: auto; }
}