/* ==========================================================================
   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. */
.pagination 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.
   -------------------------------------------------------------------------- */

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

.pagination 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.
   -------------------------------------------------------------------------- */

.pagination a,
.pagination 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);
}

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

.pagination 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. */
.pagination 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. */