.editorial-pagination {
    display: grid;
    justify-items: center;
    gap: 1rem;
    margin-block: clamp(2rem, 4vw, 3.25rem) 1rem;
    padding: 1.25rem clamp(.65rem, 2.5vw, 1.75rem);
    border: 1px solid var(--biscuit);
    border-radius: 20px;
    background: var(--cream);
    color: var(--cocoa);
    text-align: center;
    container-type: inline-size;
}

.pagination-wrap:has(> .editorial-pagination) { margin-top: 0; }

.editorial-pagination__summary p { margin: 0; }

.editorial-pagination__position {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.editorial-pagination__count {
    color: var(--muted);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

.editorial-pagination__controls,
.editorial-pagination__numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.editorial-pagination__controls { flex-wrap: wrap; gap: .75rem; }
.editorial-pagination__numbers { margin: 0; padding: 0; list-style: none; }

.editorial-pagination__step,
.editorial-pagination__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-width: 44px;
    min-height: 44px;
    padding: .35rem .7rem;
    border: 1px solid var(--biscuit);
    border-radius: 11px;
    background: var(--surface);
    color: var(--cocoa);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.editorial-pagination__step { padding-inline: .85rem; }
.editorial-pagination__number { font-variant-numeric: tabular-nums; }

.editorial-pagination__number[aria-current="page"] {
    border-color: var(--raspberry-dark);
    background: var(--raspberry-dark);
    color: var(--surface);
}

.editorial-pagination__next {
    border-color: var(--raspberry);
    color: var(--raspberry-dark);
}

.editorial-pagination__step[aria-disabled="true"] {
    border-color: transparent;
    background: transparent;
    color: var(--muted);
}

.editorial-pagination__gap { padding-inline: .1rem; color: var(--muted); }

.editorial-pagination a:hover {
    border-color: var(--raspberry);
    background: var(--meringue);
    color: var(--raspberry-dark);
}

.editorial-pagination a:focus-visible {
    outline: 2px solid var(--raspberry-dark);
    outline-offset: 3px;
}

@container (max-width: 38rem) {
    .editorial-pagination__numbers { display: none; }
}