/*
 * Przechodzenie między kartami drzew.
 *
 * Klasa `dr-treenav`, a nie `dr-nav`: `dr-nav` należy do menu w pasku u góry i użycie jej
 * tutaj oznaczałoby, że każda zmiana stylu menu rusza strzałkami pod kartą drzewa (i odwrotnie). Mobile-first — kartę ogląda się głównie na telefonie.
 *
 * Kolory z motywu przez zmienne, każda z wartością zapasową: wtyczka ma wyglądać znośnie
 * także pod innym motywem.
 */
.dr-treenav {
    --tn-ink:    var(--dr-ink, #16202F);
    --tn-soft:   var(--dr-ink-soft, #5A6B7F);
    --tn-line:   var(--dr-line, #C8CFD6);
    --tn-accent: var(--dr-accent, #2989CE);
    --tn-note:   var(--dr-note, "Arial Narrow", sans-serif);

    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    margin: 3rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--tn-line);
}

/*
 * WordPress opakowuje w treści każdy luźny znacznik wierszowy w `<p>` — nasze odsyłacze też,
 * i dokłada przy okazji pusty akapit. Grid dostawał przez to cztery komórki zamiast trzech
 * i układ szedł w rozsypkę. Zamiast walczyć z filtrem, czynimy te wtręty przezroczystymi
 * dla układu: `display: contents` sprawia, że komórką siatki staje się sam odsyłacz.
 * Licznik jest naszym własnym akapitem i ma zostać komórką, więc go wyłączamy.
 */
.dr-treenav > p:not(.dr-treenav__count) { display: contents; }
.dr-treenav > p { margin: 0; }

.dr-treenav__link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem .9rem;
    border: 1px solid var(--tn-line);
    border-radius: 4px;
    color: var(--tn-ink);
    text-decoration: none;
}
.dr-treenav__link:hover { border-color: var(--tn-accent); }
.dr-treenav__link:focus-visible { outline: 2px solid var(--tn-accent); outline-offset: 2px; }

/* Następne wyrównane do prawej — strzałka ma stać po stronie, w którą prowadzi. */
.dr-treenav__link--next { flex-direction: row; justify-content: flex-end; text-align: right; }

.dr-treenav__arrow { flex: 0 0 auto; font-size: 1.25rem; line-height: 1; color: var(--tn-accent); }
.dr-treenav__text { display: flex; flex-direction: column; min-width: 0; }

.dr-treenav__label {
    font-family: var(--tn-note);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tn-soft);
}

/* Długie nazwy drzew nie mogą rozpychać wiersza ani łamać się na pięć linii. */
.dr-treenav__title {
    font-size: .9375rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dr-treenav__count { margin: 0; text-align: center; font-size: .875rem; color: var(--tn-soft); }
.dr-treenav__count a { color: inherit; }

@media (min-width: 40rem) {
    /* Na szerokim ekranie klasyczny układ galerii: wstecz, licznik, dalej. */
    .dr-treenav {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 1rem;
    }
    .dr-treenav__count { order: 2; }
    .dr-treenav__link--prev { order: 1; }
    .dr-treenav__link--next { order: 3; }
}