/* ==========================================================================
   SITE FOOTER
   Globales Snippet, wird auf Startseite UND Projektseiten eingebunden.
   Aufbau: großes Bild (full-bleed) + dunkle Kontrastleiste.
   ========================================================================== */

/* Footer ist immer genau einen Viewport hoch; die Bar liegt als Overlay auf
   dem Bild (s. .site-footer__bar), beansprucht also keine eigene Höhe mehr.
   position: relative nötig als Verankerung für .pattern-cross-rows
   (position: absolute, s. unten).
   svh statt dvh — und zwar zwingend, weil der Footer als LETZTES Element
   das Scroll-Ende der Seite bestimmt: dvh folgt der mobilen Adressleiste,
   d.h. beim Ein-/Ausblenden der Leiste ändert sich die Footer-Höhe und
   damit document.scrollHeight mitten im Scroll. Am unteren Anschlag
   entsteht daraus eine Endlosschleife (Leiste ein → Dokument schrumpft →
   Browser klemmt scrollY zurück → der Sprung toggelt die Leiste wieder →
   …): das ist der frühere "Hänger"/Jitter über dem Footer. svh (Small
   Viewport = Leiste sichtbar) ist über alle Leisten-Zustände konstant,
   die Dokumenthöhe steht damit fest. Bekannter Tradeoff: Bei versteckter
   Leiste lugt am exakten Scroll-Ende ein schmaler Streifen der Section
   darüber hervor — harmloser als abgeschnittener Footer-Inhalt (lvh/vh). */
.site-footer {
  position: relative;
  width: 100%;
  height: 100vh; /* Fallback für Browser ohne svh-Support */
  height: 100svh;
  display: flex;
  flex-direction: column;
}

/* Gleiches Kreuz-Muster wie im Hero (s. .hero .pattern-cross-rows in
   base.css), hier aber unten sticky statt oben und um 180° gedreht: der
   Fade (im Original oben deckend -> unten transparent) läuft dadurch
   umgekehrt unten deckend -> oben transparent, passend zur Ausrichtung am
   unteren Rand. Bleibt so – exakt wie im Hero am oberen Rand – am unteren
   Viewport-Rand "kleben", solange der Footer durchgescrollt wird, und löst
   sich danach normal, sobald das Footer-Ende den unteren Rand erreicht.
   Direktes Kind von .site-footer__image (NICHT von .site-footer__bar):
   .site-footer__bar ist ein row-Flex-Container (s.u.) – als sticky-Element
   darin bräuchte das Muster eine explizite Breite, sonst kollabiert es auf
   Inhaltsbreite (0, da es selbst nur absolut positionierte Kind-Zeilen hat).
   Als Geschwister von img/video hingegen ist .site-footer__image ein
   normaler Block-Kontext, das Muster nimmt dort automatisch die volle
   Breite ein (wie .hero .pattern-cross-rows in .hero). Layout-technisch
   unkritisch, in welcher Reihenfolge zu img/video: img/video ist inline-
   level (kein display:block gesetzt) und daher immer bei Schritt 3 der
   CSS-Stacking-Reihenfolge gemalt, das Muster (position:sticky, z-index:1)
   immer bei Schritt 7 – zeichnet sich also so oder so über dem Bild.
   margin-top: kompensiert, dass img/video bereits height:100% des
   Elternrahmens einnehmen (normaler Fluss-Cursor landet dadurch schon am
   unteren Rand) – ohne den Ausgleich läge die statische (nicht-sticky)
   Ausgangsposition des Musters komplett unterhalb des sichtbaren Bereichs.
   --pattern-total-height kommt als Custom Property vom Snippet (s.
   pattern-cross-rows.php); !important nötig, da die margin-bottom aus
   demselben Snippet (für den GEGENTEILIGEN, oben-sticky Hero-Fall gedacht)
   sonst dieselbe Spezifität hätte.
   z-index: 1 explizit über dem Bild/Video, aber unter .site-footer__bar
   (z-index: 2, s.u.) – Text/Nav bleiben dadurch immer lesbar obenauf. */
.site-footer__image > .pattern-cross-rows {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  margin-top: calc(-1 * var(--pattern-total-height)) !important;
  transform: rotate(180deg);
  mask-image: linear-gradient(to bottom, #000 0%, transparent var(--pattern-fade-end, 100%));
}

.site-footer__image {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  /* "clip" statt "hidden": schneidet Overflow genauso ab, erzeugt aber
     KEINEN Scroll-Container – das .pattern-cross-rows-Kind kann dadurch
     position:sticky nutzen (gleicher Grund/gleiche Lösung wie beim Hero,
     s. Kommentar zu overflow:clip in hero.css). Mit "hidden" bliebe sticky
     wirkungslos, weil der nächste scrollende Vorfahre dann dieses Element
     selbst wäre (das aber nie intern scrollt), statt des Dokuments. */
  overflow: clip;
  background: var(--color-badge-background);
  /* full-bleed (kein .wrapper): keine abgerundeten Ecken, anders als
     sonstige Medienelemente (.placeholder-box setzt sonst --radius-sm) */
  border-radius: 0;
  /* isolation: isolate – gleicher Firefox-Workaround wie bei .hero
     (hero.css, dort ausführlich erklärt): schützt gegen Mozilla Bug
     1787089. */
  isolation: isolate;
}

.site-footer__image img,
.site-footer__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Abdunklung über dem Bild, damit der Text der Bar (s. u.) lesbar bleibt. */
.site-footer__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* Bar liegt jetzt als eigene Ebene direkt AUF dem Bild (kein eigener
   Hintergrund mehr) statt darunter als separater dunkler Balken. */
.site-footer__bar {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* Kontakt-Heading oben, restlicher Inhalt (E-Mail/Nav/Legal) unten –
     ersetzt das vorige einzeilige align-items:flex-end. */
  justify-content: space-between;
  color: var(--color-font-bright);
  /* Header ist fixed/transparent und liegt über allen Sections (s.
     project.css-Kommentar zu main > .project-hero:first-child) – Footer
     scrollt also unter ihm durch. --header-height (tokens.css, von nav.js
     zur Laufzeit auf die echte Header-Höhe gesetzt) hält das Label exakt
     darunter frei, statt einen festen Abstand zu schätzen. */
  padding-top: var(--header-height);
  padding-bottom: calc(var(--space-lg) / 2);
}

.site-footer__bar .wrapper {
  width: 100%;
}

/* Optik von .site-footer__label kommt von .section-heading (components.css);
   das dunkle Glas-Design (heller Text auf dunklem Untergrund, passend zum
   dunklen Footer-Bild) kommt von der zentralen .section-heading--dark
   Modifier-Klasse (components.css) — im Markup neben .section-heading
   gesetzt, da mehrere Sections (Footer, Work/Project-Fan) dasselbe Design
   teilen. */

/* Obere Zeile: E-Mail (links, unten ausgerichtet) + Nav-/Social-Spalte (rechts) */
.site-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.site-footer__email {
  font-family: var(--font-pixel-serif);
  font-size: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  line-height: 0.79;
  white-space: nowrap;
}

/* Rechte Spalte: Anker-Nav (Work/Service) oben, Social-Liste (Instagram/
   LinkedIn) darunter — beide rechtsbündig in EINER gestapelten Spalte,
   wie im Figma-Entwurf (nicht nebeneinander). */
.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-sm);
  text-align: right;
}

.site-footer__social-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.site-footer__social-list a {
  font-family: var(--font-pixel-grotesk);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  text-transform: uppercase;
  line-height: 0.79;
}

/* Elevator-Zeile (Name + rotierende Rolle) mittig zwischen Heading und
   E-Mail-Zeile (s. .site-footer__elevator-Wrapper in site-footer.php) –
   dasselbe Snippet/dieselben Klassen wie im Hero (.hero__elevator*, s.
   hero.css), hier aber NICHT position:absolute (das wäre relativ zum
   nächsten positionierten Vorfahren .site-footer__bar und läge dadurch
   unten links statt mittig) und größer skaliert, damit die Zeile als
   eigener Blickfang wirkt statt wie im Hero nur eine kleine Ecken-Notiz.
   justify-content:center zentriert das einzelne .hero__elevator-Flex-Item
   horizontal innerhalb des Wrappers (der selbst schon per .wrapper
   margin-inline:auto zum Viewport zentriert ist). */
.site-footer__elevator {
  display: flex;
  justify-content: center;
}

.site-footer__elevator .hero__elevator {
  position: static;
  justify-content: center;
}

/* Gleiche Schriftgröße wie .site-footer__label/.section-heading (s.o.,
   von --fs-h1 abgeleitet) statt der festen --fs-tag-Größe aus dem Hero –
   dadurch wirkt die Elevator-Zeile optisch gleich groß wie die Heading-Box
   darüber. Padding bleibt in em (hero.css) und skaliert dadurch automatisch
   mit, die Pillen werden also proportional größer statt nur der Text. */
.site-footer__elevator .hero__elevator-item {
  /* font-size: calc(var(--fs-h1) / 2.25); */
}

/* bp: --bp-mobile (640px) — bleibt (anders als im Hero) auch mobil
   horizontal zentriert statt linksbündig, s. gleichnamige Regel in
   hero.css. */
@media (max-width: 640px) {
  .site-footer__elevator .hero__elevator {
    align-items: center;
  }
}

/* Untere Zeile: Copyright / Adresse / Rechtliche Links — eigene, zentrierte
   Zeile unterhalb der Haupt-Zeile (kein Grid-Spaltenwert mehr). */
.site-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  margin-top: clamp(3rem, 6vw, 6rem);
  text-align: center;
  font-size: var(--fs-small);
  opacity: 0.7;
  line-height: 1;
}

.site-footer__legal a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* bp: --bp-tablet (1024px) */
@media (max-width: 1024px) {
  .site-footer__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .site-footer__links {
    align-items: flex-start;
    text-align: left;
  }

  .site-footer__legal {
    align-items: flex-start;
    margin-top: var(--space-xl);
    text-align: left;
  }
}