/*
 * Load more (layouts/tts/js/load-more.js): the footer under a list that loads
 * its next page in place - the link back to the previous page on a later page,
 * the "load more" link, and the count so far. The homepage's results footer
 * (.shop-results__footer, overview.css) is the same pattern and look; it keeps
 * its own rules until the homepage moves onto this component. Decision 21.
 */

.load-more {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap: var(--shop-space-3);
    margin-block-start: var(--shop-space-8);
}

.load-more__previous {
    display: inline-flex;
    align-items: center;
    min-height: var(--shop-tap);
}

.load-more__previous,
.load-more__previous:hover,
.load-more__previous:focus {
    color: var(--shop-accent);
    font-size: var(--shop-text-base);
    font-weight: var(--shop-weight-semibold);
    text-decoration: none;
}

/* The one soft button that is the whole point of its row: taller, larger, a
   wider radius to match - as the homepage's. */
.shop-btn.load-more__link {
    width: 100%;
    min-height: 52px;
    padding-inline: 28px;
    border-radius: var(--shop-radius-lg);
    font-size: 17px;
}

.load-more__count {
    color: var(--shop-text-soft);
    font-size: var(--shop-text-md);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
    .load-more {
        grid-template-columns: 1fr auto 1fr;
        gap: var(--shop-space-3) var(--shop-space-4);
    }

    .load-more__previous {
        grid-column: 1;
        justify-self: start;
    }

    .shop-btn.load-more__link {
        grid-column: 2;
        width: auto;
        min-width: 320px;
    }

    .load-more__count {
        grid-column: 3;
        justify-self: end;
    }
}