/* ============================================================
   AUCTION SECTION — Adaptive layout (1 / 2 / 3 / 4 / 0 states)
   Standalone stylesheet — load alongside custom-style.css,
   does not modify or depend on it.

   Namespace: everything scoped under .auction-section so it
   cannot collide with existing site classes. The one shared
   platform widget used here, .aiz-count-down, is only ever
   extended via descendant selectors (.auction-section .auction-card__timer …)
   — its own base rule elsewhere on the site is never touched,
   so the timer keeps its normal site-wide look everywhere else.
   ============================================================ */

.auction-section {
    padding: 24px 20px;
    margin: 16px 20px;
    border-radius: 8px;
    background: transparent;
    font-family: 'Poppins', sans-serif; /* matches the rest of the site; the
        mockup's "Instrument Sans" was not introduced to avoid a second
        webfont load and visual inconsistency with the rest of Korners */
    color: #01152d;
    /* No Bootstrap .container: matches .kfp-section's own margin/padding
       approach (see New Products, custom-style.css) so this section lines
       up at the same width as the rest of the homepage sections. */
}

/* ── HEADER ── */
.auction-section .auction-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 28px;
}
.auction-section .auction-title {
    margin: 0;
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.auction-section .auction-subtitle {
    margin-top: 6px;
    font-size: 14px;
    color: #5a6270;
}
.auction-section .auction-view-all {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #01152d;
    border-bottom: 1px solid #01152d;
    padding-bottom: 2px;
    white-space: nowrap;
}
.auction-section .auction-view-all:hover {
    color: #3c5675;
    border-color: #3c5675;
}

/* ── ZERO STATE PROMO ── */
.auction-section .auction-promo {
    border: 1px solid #e2e0da;
    background: #fbfbf9;
    padding: 22px 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 32px;
}
.auction-section .auction-promo__title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.auction-section .auction-promo__desc {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: #3f4854;
    max-width: 620px;
}
.auction-section .auction-promo__cta {
    flex: 0 0 auto;
    background: #01152d;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 26px;
    font: 500 12px/1 'Poppins', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 0;
}
.auction-section .auction-promo__cta:hover {
    color: #ffffff;
    opacity: .9;
}

/* ── DESKTOP / MOBILE SPLIT ──
   Uses Bootstrap's existing d-none / d-lg-* utilities (already
   loaded site-wide) rather than a new custom toggle class.
   Note: Bootstrap's lg breakpoint is 992px; the design reference
   didn't specify an exact pixel breakpoint, so this is the
   closest existing platform breakpoint rather than a new one. */

/* ── DESKTOP CARD GRIDS ── */
.auction-section .auction-cards {
    display: grid;
}
.auction-section .auction-cards--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.auction-section .auction-cards--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.auction-section .auction-cards--two {
    display: flex;
    gap: 24px;
}
.auction-section .auction-cards--two .auction-card {
    flex: 1 1 0;
    min-width: 0;
}
.auction-section .auction-cards--one {
    display: block;
}

/* ── CARD SHELL ── */
.auction-section .auction-card {
    border: 1px solid #e2e0da;
    background: #ffffff;
    border-radius: 0; /* sharp corners, per spec */
    display: flex;
    flex-direction: column;
}
.auction-section .auction-card--horizontal {
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
}

/* ── CARD IMAGE ── */
.auction-section .auction-card__image {
    aspect-ratio: 1 / 1;
    background: #fbfbf9;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.auction-section .auction-card:not(.auction-card--horizontal) .auction-card__image {
    border-bottom: 1px solid #eceae4;
}
.auction-section .auction-card--horizontal .auction-card__image {
    border-right: 1px solid #eceae4;
}
.auction-section .auction-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* square + contain, never cropped, per spec */
    object-position: center;
}

/* Per-count image sizing/padding, matched to the design reference */
.auction-section .auction-cards--four .auction-card__image { padding: 20px; }
.auction-section .auction-cards--three .auction-card__image { padding: 28px; }
.auction-section .auction-cards--two .auction-card__image { flex: 0 1 clamp(160px, 36%, 240px); padding: 24px; }
.auction-section .auction-cards--one .auction-card__image { flex: 1 1 300px; max-width: 380px; padding: 32px; }

/* ── CARD BODY ── */
.auction-section .auction-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.auction-section .auction-cards--four .auction-card__body { padding: 18px 16px 20px; }
.auction-section .auction-cards--three .auction-card__body { padding: 20px 20px 22px; gap: 18px; }
.auction-section .auction-cards--two .auction-card__body { padding: 28px 28px 30px; justify-content: center; gap: 22px; }
.auction-section .auction-cards--one .auction-card__body { padding: 40px; justify-content: center; gap: 26px; }

/* "Featured auction" eyebrow — single-auction state only */
.auction-section .auction-card__eyebrow {
    font: 500 11px/1 'Poppins', sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7b7b73;
}

/* ── PRODUCT NAME ── */
.auction-section .auction-card__name {
    font-weight: 500;
    text-align: center;
    line-height: 1.35;
}
.auction-section .auction-card__name a {
    color: inherit;
    text-decoration: none;
}
.auction-section .auction-card__name a:hover {
    color: #3c5675;
}
.auction-section .auction-cards--four .auction-card__name { font-size: 15px; min-height: 2.7em; }
.auction-section .auction-cards--three .auction-card__name { font-size: 16px; }
.auction-section .auction-cards--two .auction-card__name { font-size: 18px; }
.auction-section .auction-cards--one .auction-card__name { font-size: 26px; max-width: 420px; }

/* ── META BLOCK: end label / end date / timer / starting bid ── */
.auction-section .auction-card__meta {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid #eceae4;
}
.auction-section .auction-card__end-label,
.auction-section .auction-card__bid-label {
    font: 500 10px/1.4 'Poppins', sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b6b63;
}
.auction-section .auction-card__end-date {
    font-size: 13px;
    color: #3f4854;
}

/* Countdown widget — kept at its default site-wide appearance;
   no color override per instruction. Only a small caption is
   added under each digit box, scoped to this section only. */
.auction-section .auction-card__timer .countdown-item {
    position: relative;
}
.auction-section .auction-card__timer .countdown-item::after {
    content: 'Days';
    display: block;
    margin-top: 4px;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a8a82;
    text-align: center;
}
.auction-section .auction-card__timer .countdown-item:nth-of-type(2)::after { content: 'Hrs'; }
.auction-section .auction-card__timer .countdown-item:nth-of-type(3)::after { content: 'Min'; }
.auction-section .auction-card__timer .countdown-item:nth-of-type(4)::after { content: 'Sec'; }

.auction-section .auction-card__bid-amount {
    font-weight: 500;
    color: #01152d;
}
.auction-section .auction-cards--four .auction-card__bid-amount { font-size: 16px; }
.auction-section .auction-cards--three .auction-card__bid-amount,
.auction-section .auction-cards--two .auction-card__bid-amount { font-size: 18px; }
.auction-section .auction-cards--one .auction-card__bid-amount { font-size: 22px; }

/* ── PLACE BID BUTTON ── */
.auction-section .auction-card__cta {
    margin-top: auto;
    width: 100%;
    background: #01152d;
    color: #ffffff;
    border: 0;
    border-radius: 0; /* sharp corners, per spec */
    padding: 13px 0;
    font: 500 12px/1 'Poppins', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}
.auction-section .auction-card__cta:hover {
    opacity: .9;
}
.auction-section .auction-cards--two .auction-card__cta,
.auction-section .auction-cards--one .auction-card__cta {
    max-width: 260px;
}

/* ── MOBILE ── */
.auction-section .auction-card--mobile-single {
    width: 100%;
}
.auction-section .auction-mobile-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.auction-section .auction-mobile-track::-webkit-scrollbar {
    display: none;
}
.auction-section .auction-mobile-slide {
    flex: 0 0 300px;
    scroll-snap-align: center;
}
.auction-section .auction-mobile-slide .auction-card__body {
    padding: 18px;
    gap: 16px;
}
.auction-section .auction-mobile-slide .auction-card__name {
    font-size: 16px;
}