/**
 * Auction night display page ([auction-display]).
 *
 * Layout: a fixed grid of cards_wide x cards_tall cards per "page", auto-
 * advancing on a configurable interval. Designed to project on a TV/screen
 * during the live auction event.
 *
 * Settings (PTA Tools > Selling > Auction):
 *   - cards per row, rows per screen
 *   - card size (% scale, applies to padding/typography)
 *   - seconds between screens
 *
 * The shortcode emits these as CSS custom properties on the wrapper:
 *   --auction-cards-wide  (integer)
 *   --auction-cards-tall  (integer, informational)
 *   --auction-card-scale  (decimal 0.30 - 1.00)
 */

.auction-display-wrapper {
    --auction-cards-wide: 4;
    --auction-cards-tall: 3;
    --auction-card-scale: 0.8;
    width: 100%;
    margin: 0 auto;
}

.auction-display-coming-soon {
    padding: 40px 20px;
    text-align: center;
    font-size: 1.25rem;
    color: #555;
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.auction-display-empty {
    padding: 40px 20px;
    text-align: center;
    color: #777;
    font-style: italic;
}

.auction-display-preview-banner {
    background: #fff8c4;
    border: 1px solid #e6db55;
    color: #6d5500;
    padding: 10px 14px;
    border-radius: 6px;
    margin: 0 0 18px;
    font-size: 0.95rem;
}

.auction-display-grid {
    display: grid;
    grid-template-columns: repeat(var(--auction-cards-wide), minmax(0, 1fr));
    gap: calc(18px * var(--auction-card-scale));
}

@media (max-width: 900px) {
    /* On phones/tablets the configured grid would crowd; collapse to a sane
       1- or 2-up layout. The carousel still works. */
    .auction-display-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .auction-display-grid { grid-template-columns: 1fr; }
}

/* Pagination: only the cards on the current page are visible. JS advances
   pages by toggling `.is-current` on cards (and on dots). Cross-fade kept
   short so the "screen change" is obvious on a projector. */
.auction-card {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    padding: calc(14px * var(--auction-card-scale));
    display: none;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: opacity 0.35s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
}

.auction-card.is-current {
    display: flex;
    opacity: 1;
}

.auction-card:hover,
.auction-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    border-color: #c8c8c8;
    text-decoration: none;
}

.auction-card:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.auction-card,
.auction-card:hover,
.auction-card:focus,
.auction-card:active,
.auction-card:visited {
    color: inherit;
    text-decoration: none;
}

.auction-card-title,
.auction-card:hover .auction-card-title {
    color: #222;
}

.auction-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(12px * var(--auction-card-scale));
}

.auction-card-image img,
.auction-card-image .auction-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.auction-card-no-image {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #efefef, #d8d8d8);
}

.auction-card-title {
    font-size: calc(1.05rem * var(--auction-card-scale));
    line-height: 1.3;
    margin: 0 0 calc(10px * var(--auction-card-scale));
    color: #222;
    /* clamp to 2 lines so cards stay aligned */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.auction-card-bid {
    margin-top: auto;
    padding-top: calc(10px * var(--auction-card-scale));
    border-top: 1px solid #f0f0f0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(6px * var(--auction-card-scale));
}

.auction-card-label {
    font-size: calc(0.85rem * var(--auction-card-scale));
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.auction-card-bidder {
    font-size: calc(0.85rem * var(--auction-card-scale));
    color: #888;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.auction-card-price {
    margin-left: auto;
    font-size: calc(1.35rem * var(--auction-card-scale));
    font-weight: 700;
    color: #1a7f37;
}

.auction-card-price .woocommerce-Price-amount {
    color: inherit;
}

.auction-card.flash-update .auction-card-price {
    animation: auctionPriceFlash 1s ease;
}

@keyframes auctionPriceFlash {
    0%   { background: rgba(255, 230, 0, 0.45); }
    100% { background: transparent; }
}

/* Pager dots underneath the grid. Click to jump to that page. */
.auction-display-pager {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 0;
}

.auction-display-pager .auction-display-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid #b8b8b8;
    border-radius: 50%;
    background: #e9e9e9;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.auction-display-pager .auction-display-dot:hover {
    background: #c9c9c9;
}

.auction-display-pager .auction-display-dot.is-current {
    background: #1a7f37;
    border-color: #1a7f37;
    transform: scale(1.15);
}