/* ==========================================================================
   PAGINATION
   ==========================================================================
   Shared by every list that can run to a second page — news, events, FAQ,
   search results, comments and the listing bundle — so it lives in its own
   file rather than inside any one of them. It is the first thing to appear
   the moment a site has more items than fit on a page, which is why it is
   worth having before those bundles are styled at all.

   Contao's markup is already sound, and this file deliberately does not
   fight it:

       <nav class="pagination" role="navigation" aria-label="Pagination">
         <p>Page 2 of 3</p>
         <ul>
           <li class="previous"><a class="previous">Previous</a></li>
           <li><a class="link" aria-label="Go to page 1">1</a></li>
           <li><strong class="active" aria-current="page">2</strong></li>
           <li class="next"><a class="next">Next</a></li>
         </ul>
       </nav>

   The current page is a <strong> carrying aria-current, not a link — so it
   is announced correctly and cannot be clicked. Numbered links carry
   "Go to page N" labels. First/previous and next/last are rendered only when
   they apply, so the row's item count changes from page to page.
   ========================================================================== */


/* --------------------------------------------------------------------------
   FRAME
   -------------------------------------------------------------------------- */

.pagination {
    margin-top: var(--space-40);

    /* The "Page 2 of 3" summary. Kept visible rather than hidden: it is the only
       thing that states the total, and on a long list that is the useful part. */
    p {
        margin: 0 0 var(--space-8);
        font-size: 0.875em;
        color: var(--grey-dark);
        text-align: center;
    }

    /* --------------------------------------------------------------------------
       THE ROW
       --------------------------------------------------------------------------
       website.css styles ul/li globally, because the list and description-list
       elements share their markup with the rich text editor. A list used as
       INTERFACE therefore has to opt out — the same reset the header nav and
       gallery files make, for the same reason. Without it the page numbers carry
       bullets and a 1.25em indent.
       -------------------------------------------------------------------------- */

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-8);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li { margin: 0; }

    /* --------------------------------------------------------------------------
       TARGETS
       --------------------------------------------------------------------------
       44px minimum on both axes. WCAG 2.5.8 asks 24, but page numbers are small
       glyphs that get tapped on phones, and a bare digit is otherwise a very
       small target. The word links (Previous, Next) grow past it naturally.
       -------------------------------------------------------------------------- */

    a, strong {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding-inline: var(--space-8);
        border: 1px solid var(--stroke);
        font-weight: 500;
        line-height: 1;
        text-decoration: none;
        color: var(--text);
    }

    a:hover {
        background-color: var(--grey-light);
        border-color: var(--text);
    }

    a:focus-visible {
        outline: 2px solid var(--prime);
        outline-offset: 2px;
    }

    /* The current page. Distinguished by weight AND fill, not by colour alone
       (WCAG 1.4.1) — and it is already a <strong> rather than a link, so the
       difference survives with styles off. */
    strong.active {
        background-color: var(--prime);
        border-color: var(--prime);
        color: var(--white);
        font-weight: 700;
        cursor: default;
    }
}


/* --------------------------------------------------------------------------
   NARROW SCREENS
   --------------------------------------------------------------------------
   With first/previous/next/last as words, a long run of pages wraps to
   several lines on a phone. Dropping the outermost jumps keeps it to one or
   two: next/previous still step through, and the numbers still jump directly.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
    .pagination li.first,
    .pagination li.last {
        display: none;
    }
}


/* TUNING
   Numbers are squared off. For pills, add `border-radius: 22px` to the
   shared a/strong rule — half of the 44px minimum, so it stays a circle for
   single digits and a lozenge for the word links. */