/* zentonic26 — Navigation zwischen den Folgen (#139, theme-v1.7).
   Nur mit [web] episode_nav ausgeliefert und verlinkt (Default an; nach
   style.css, vor theme/*.css). Auf allen Seiten verlinkt: der SPA-Swap (#58)
   tauscht nur main, nie den <head>.
   Markup: nav.zt-ep-nav.zt-ep-nav--top|--bottom > a.zt-ep-nav__link--older
   (rel="prev"), a.zt-ep-nav__link--newer (rel="next"), je .zt-ep-nav__dir und
   .zt-ep-nav__title. Titel vollständig und umbrechend (#138), schmal
   untereinander. Nur Tokens aus style.css. */

.zt-ep-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  font-family: var(--font-ui);
  font-size: var(--t-small);
  line-height: 1.45;
}

.zt-ep-body > .zt-ep-nav { grid-column: 1 / -1; }

.zt-ep-nav--bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-1);
}

/* Doppelklasse: schlägt .zt-shownotes a */
.zt-ep-nav .zt-ep-nav__link {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-3);
  color: var(--fg-1);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.zt-ep-nav__link--older { grid-column: 1; }
.zt-ep-nav__link--newer { grid-column: 2; text-align: right; }

.zt-ep-nav__dir { color: var(--fg-2); letter-spacing: .08em; }

.zt-ep-nav .zt-ep-nav__link:hover,
.zt-ep-nav .zt-ep-nav__link:focus-visible {
  border-color: var(--green);
  color: var(--green);
}

@media (max-width: 639px) {
  .zt-ep-nav { grid-template-columns: minmax(0, 1fr); }
  .zt-ep-nav__link--newer { grid-column: 1; }
}