/* TC Sold Vehicle Manager — Front-end Styles */

:root {
    --tc-svm-card-bg:    #ffffff;
    --tc-svm-card-border:#e0e0e0;
    --tc-svm-card-radius:6px;
    --tc-svm-gap:        1.5rem;
    --tc-svm-thumb-ratio:56.25%;
}

/* ── Archive grid ──────────────────────────────────────────────────────── */

.tc-svm-archive {
    display: grid;
    gap: var(--tc-svm-gap);
    grid-template-columns: repeat(1, 1fr);
    margin: 0 0 2rem;
}

.tc-svm-cols-2 { grid-template-columns: repeat(2, 1fr); }
.tc-svm-cols-3 { grid-template-columns: repeat(3, 1fr); }
.tc-svm-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .tc-svm-cols-3,
    .tc-svm-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .tc-svm-cols-2,
    .tc-svm-cols-3,
    .tc-svm-cols-4 { grid-template-columns: 1fr; }
}

/* ── Card ──────────────────────────────────────────────────────────────── */

.tc-svm-card {
    background:    var(--tc-svm-card-bg);
    border:        1px solid var(--tc-svm-card-border);
    border-radius: var(--tc-svm-card-radius);
    overflow:      hidden;
    display:       flex;
    flex-direction:column;
}

/* ── Image / thumbnail ─────────────────────────────────────────────────── */

.tc-svm-card__image-wrap {
    position:        relative;
    display:         block;
    overflow:        hidden;
    padding-top:     var(--tc-svm-thumb-ratio);
    background:      #f5f5f5;
    text-decoration: none;
}

.tc-svm-card__image-wrap img.tc-svm-thumb,
.tc-svm-card__image-wrap img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tc-svm-card:hover .tc-svm-card__image-wrap img {
    transform: scale(1.04);
}

.tc-svm-card__no-image {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #e8e8e8;
    color:           #888;
    font-size:       0.85rem;
}

/* ── SOLD badge — gradient red pill ───────────────────────────────────── */

.tc-svm-badge {
    position:        absolute !important;
    top:             0.85rem !important;
    left:            0.85rem !important;
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             6px !important;
    padding:         7px 16px 7px 11px !important;
    background:      linear-gradient(135deg, #c0000a 0%, #e8001a 55%, #ff1f35 100%) !important;
    border:          1.5px solid rgba(255,255,255,0.4) !important;
    border-radius:   999px !important;
    box-shadow:      0 2px 16px rgba(192,0,10,0.5), 0 1px 4px rgba(0,0,0,0.25) !important;
    color:           #ffffff !important;
    font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size:       0.68rem !important;
    font-weight:     700 !important;
    letter-spacing:  0.14em !important;
    text-transform:  uppercase !important;
    line-height:     1 !important;
    pointer-events:  none !important;
    z-index:         10 !important;
}

.tc-svm-badge::before {
    content:       '' !important;
    display:       inline-block !important;
    width:         7px !important;
    height:        7px !important;
    border-radius: 50% !important;
    background:    rgba(255,255,255,0.9) !important;
    flex-shrink:   0 !important;
}

/* ── Card body ─────────────────────────────────────────────────────────── */

.tc-svm-card__body {
    padding: 1rem 1.25rem 1.25rem;
    flex:    1;
}

.tc-svm-card__title {
    margin:      0 0 0.35rem;
    font-size:   1rem;
    line-height: 1.35;
}

.tc-svm-card__title a {
    color:           inherit;
    text-decoration: none;
}

.tc-svm-card__title a:hover {
    text-decoration: underline;
}

.tc-svm-card__date {
    margin:    0;
    font-size: 0.8rem;
    color:     #888;
}

/* ── Pagination ────────────────────────────────────────────────────────── */

.tc-svm-pagination {
    margin:     2rem 0;
    text-align: center;
}

.tc-svm-pagination .page-numbers {
    display:         inline-block;
    padding:         0.4em 0.8em;
    margin:          0 0.15em;
    border:          1px solid #ddd;
    border-radius:   3px;
    text-decoration: none;
    color:           inherit;
}

.tc-svm-pagination .page-numbers.current,
.tc-svm-pagination .page-numbers:hover {
    background:   #c0000a;
    border-color: #c0000a;
    color:        #fff;
}

/* ── "No vehicles" message ─────────────────────────────────────────────── */

.tc-svm-no-vehicles {
    padding:    2rem;
    text-align: center;
    color:      #888;
    font-style: italic;
}