/**
 * Query Pagination block styles.
 *
 * Front-end counterpart of the editor stylesheet at
 * `resources/js/visual-editor/blocks/query-pagination/query-pagination.css`.
 * Keep the two in lockstep; the Blade / React / Vue renderers all emit
 * the same class names so a single rule set serves both surfaces.
 *
 * Layout goal: horizontal at every viewport, full width, with the
 * previous link pinned to the start, the page numbers always
 * centered, and the next link pinned to the end — *including the
 * case where previous or next is absent* (inactive prev/next render
 * nothing on the front end per issue #599). CSS Grid with
 * `1fr auto 1fr` columns reserves the side slots so the middle column
 * stays centered even when its sibling slots are empty. A saved
 * Justification or Orientation switches to the flex layout (#956).
 *
 * All visual choices a theme is likely to want to override are
 * exposed as CSS custom properties.
 */

.wp-block-query-pagination {
    --ap-query-pagination-gap: 1rem;
    --ap-query-pagination-padding-block: 1.25rem;
    --ap-query-pagination-number-gap: 0.5rem;
    --ap-query-pagination-number-padding: 0.25rem 0.5rem;
    --ap-query-pagination-current-weight: 700;
    --ap-query-pagination-link-decoration: none;

    align-items: center;
    gap: var( --ap-query-pagination-gap );
    width: 100%;
    padding-block: var( --ap-query-pagination-padding-block );
    margin: 0;
}

/* The previous / numbers / next grid is the default. A saved
   Justification or Orientation hands the row to the block's flex layout
   (`is-layout-flex` plus its `wp-container-*` rules), as in WordPress
   (#956). The `:not()`s also outrank the baseline `.is-layout-flex`. */
.wp-block-query-pagination:not([class*="is-content-justification-"]):not(.is-vertical) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

/* Previous: column 1, justified to the start. */
.wp-block-query-pagination > .wp-block-query-pagination-previous {
    grid-column: 1;
    justify-self: start;
    text-decoration: var( --ap-query-pagination-link-decoration );
}

/* Numbers: column 2 (the always-present `auto` slot), justified to
   center. The 1fr columns on either side keep the center stable even
   if previous or next is missing. */
.wp-block-query-pagination > .wp-block-query-pagination-numbers {
    grid-column: 2;
    justify-self: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var( --ap-query-pagination-number-gap );
    text-align: center;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var( --ap-query-pagination-number-padding );
    text-decoration: var( --ap-query-pagination-link-decoration );
    line-height: 1;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-query-pagination .wp-block-query-pagination-numbers [aria-current="page"] {
    font-weight: var( --ap-query-pagination-current-weight );
}

/* Next: column 3, justified to the end. */
.wp-block-query-pagination > .wp-block-query-pagination-next {
    grid-column: 3;
    justify-self: end;
    text-decoration: var( --ap-query-pagination-link-decoration );
}