/**
 * Full-width fluid catalog grid (Settings -> Features -> "Full-width catalog
 * grid"). Only loaded when the option is on (the default).
 *
 * Scoped to the catalog lot list (.bp-lots[data-auction-id], auction.php), so
 * home-page lot widgets, profile and wishlist lists keep their classic cards.
 * The classic layout is a centered flex-wrap of max-width:310px cards inside a
 * 1700px box, which leaves empty space at the sides on wide screens.
 */

/* Let the catalog box use the whole width the theme gives it. :has() keeps this
   off the profile/welcome pages, which share .bp-fix-width-lot. */
.bp-container.bp-fix-width-lot:has(.bp-lots[data-auction-id]) {
    max-width: none;
    padding-left: clamp(12px, 2vw, 32px);
    padding-right: clamp(12px, 2vw, 32px);
}

/* As many >=260px columns as fit; the cards stretch so each row is full. */
.bp-lots[data-auction-id] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: clamp(12px, 1.5vw, 24px);
    align-items: stretch;
    padding-bottom: 40px;
    box-sizing: border-box;
}

.bp-lots[data-auction-id] > .bp-lot,
.bp-lots[data-auction-id] > .bp-lot.bp-lot__large {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    min-width: 0;
}

/* Pagination, "Lots not found", loaders etc. each get their own full row. */
.bp-lots[data-auction-id] > :not(.bp-lot) {
    grid-column: 1 / -1;
}
.bp-lots[data-auction-id] > .pagination,
.bp-lots[data-auction-id] > .navigation {
    display: flex;
    justify-content: center;
    margin: 16px 0 0;
}
.bp-lots[data-auction-id] > .pagination .nav-links,
.bp-lots[data-auction-id] > .navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* Bids in catalog: select2 writes a fixed pixel width onto the bid-amount
   dropdown when it builds it. That width also held the "bid" grid column open,
   so on some card widths the 100%-wide Bid button and the dropdown differed.
   Let the columns shrink and make the dropdown and button share the cell. */
.bp-lots[data-auction-id] .bp-lot .bp-lot__content > * {
    min-width: 0;
}
.bp-lots[data-auction-id] .bp-lot .bp-lot__bid form {
    width: 100%;
}
.bp-lots[data-auction-id] .bp-lot .bp-lot__bid .select2-container {
    width: 100% !important;
    max-width: 100%;
}
.bp-lots[data-auction-id] .bp-lot .bp-lot__bid .bp-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
}

/* Phones: always two across. */
@media screen and (max-width: 480px) {
    .bp-lots[data-auction-id] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding-bottom: 24px;
    }
    .bp-lots[data-auction-id] > .bp-lot {
        padding: 6px;
    }
    /* Half a phone card is too narrow for price + bid side by side: stack them,
       with the dropdown and Bid button full width under the price. */
    .bp-lots[data-auction-id].bp-possible-bids-on .bp-lot .bp-lot__content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "title" "message" "tool" "bid";
        height: auto;
    }
    .bp-lots[data-auction-id].bp-possible-bids-on .bp-lot .bp-lot__bid {
        margin-top: 6px;
    }
}