/* =================================================================
   WanderBox Vehicle Card — Front-end Styles
   ================================================================= */

.wbv-card {
    --wbv-card-name-color:      #1e3a5f;
    --wbv-card-name-size:       1.5rem;
    --wbv-card-price-color:     #444;
    --wbv-card-price-size:      1.1rem;
    --wbv-card-desc-color:      #555;
    --wbv-card-desc-size:       0.95rem;
    --wbv-card-explore-bg:      transparent;
    --wbv-card-explore-border:  #1e3a5f;
    --wbv-card-explore-text:    #1e3a5f;
    --wbv-card-explore-size:    0.9rem;
    --wbv-card-explore-hover-bg:     var(--wbv-card-explore-border);
    --wbv-card-explore-hover-border: var(--wbv-card-explore-border);
    --wbv-card-explore-hover-text:   #fff;
    --wbv-card-explore-pad-y:        0.6rem;
    --wbv-card-explore-pad-x:        1.4rem;
    --wbv-card-build-bg:        #b8d935;
    --wbv-card-build-border:    #b8d935;
    --wbv-card-build-text:      #1e3a5f;
    --wbv-card-build-size:      0.9rem;
    --wbv-card-build-hover-bg:       var(--wbv-card-build-bg);
    --wbv-card-build-hover-border:   var(--wbv-card-build-border);
    --wbv-card-build-hover-text:     var(--wbv-card-build-text);
    --wbv-card-build-pad-y:          0.6rem;
    --wbv-card-build-pad-x:          1.4rem;
    --wbv-card-overlay-font:         inherit;
    --wbv-card-overlay-size:         0.85rem;
    --wbv-card-overlay-color:        #fff;
    --wbv-card-overlay-bg:           rgba(0,0,0,0.6);

    background: transparent;
    padding: 16px;
}

/* ---- Hero Image ---- */

.wbv-card__image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    margin-bottom: 1rem;
}

.wbv-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 30px;
}

/* ---- Overlay ---- */

.wbv-card__overlay {
    position: absolute;
    font-family: var(--wbv-card-overlay-font);
    font-size: var(--wbv-card-overlay-size);
    color: var(--wbv-card-overlay-color);
    background: var(--wbv-card-overlay-bg);
    padding: 0.35em 0.9em;
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.wbv-card__overlay--top-left      { top: 0.75rem; left: 0.75rem; }
.wbv-card__overlay--top-center    { top: 0.75rem; left: 50%; transform: translateX(-50%); }
.wbv-card__overlay--top-right     { top: 0.75rem; right: 0.75rem; }
.wbv-card__overlay--center        { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.wbv-card__overlay--bottom-left   { bottom: 0.75rem; left: 0.75rem; }
.wbv-card__overlay--bottom-center { bottom: 0.75rem; left: 50%; transform: translateX(-50%); }
.wbv-card__overlay--bottom-right  { bottom: 0.75rem; right: 0.75rem; }

/* ---- Name ---- */

.wbv-card__name {
    font-size: var(--wbv-card-name-size);
    font-weight: 700;
    color: var(--wbv-card-name-color);
    margin: 0;
    line-height: 1.2;
}

.wbv-card__tm {
    font-size: 0.6em;
    vertical-align: super;
    font-weight: 400;
}

/* ---- Price ---- */

.wbv-card__price {
    font-size: var(--wbv-card-price-size);
    font-weight: 500;
    color: var(--wbv-card-price-color);
    margin: 0;
}

.wbv-card__price-label {
    font-weight: 400;
}

/* ---- Description ---- */

.wbv-card__desc {
    font-size: var(--wbv-card-desc-size);
    line-height: 1.5;
    color: var(--wbv-card-desc-color);
    margin: 0.75rem 0 1rem;
}

/* ---- CTA Buttons ---- */

.wbv-card__ctas {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wbv-card__btn {
    display: inline-block;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.wbv-card__btn--explore {
    font-size: var(--wbv-card-explore-size);
    padding: var(--wbv-card-explore-pad-y) var(--wbv-card-explore-pad-x);
    border: 2px solid var(--wbv-card-explore-border);
    color: var(--wbv-card-explore-text);
    background: var(--wbv-card-explore-bg);
}

.wbv-card__btn--explore:hover {
    background: var(--wbv-card-explore-hover-bg);
    border-color: var(--wbv-card-explore-hover-border);
    color: var(--wbv-card-explore-hover-text);
}

.wbv-card__btn--build {
    font-size: var(--wbv-card-build-size);
    padding: var(--wbv-card-build-pad-y) var(--wbv-card-build-pad-x);
    border: 2px solid var(--wbv-card-build-border);
    background: var(--wbv-card-build-bg);
    color: var(--wbv-card-build-text);
}

.wbv-card__btn--build:hover {
    background: var(--wbv-card-build-hover-bg);
    border-color: var(--wbv-card-build-hover-border);
    color: var(--wbv-card-build-hover-text);
}

/* ---- Responsive ---- */

@media ( max-width: 600px ) {
    .wbv-card {
        padding: 10px;
    }

    .wbv-card__name {
        font-size: clamp(1.1rem, 4vw, 1.5rem);
    }

    .wbv-card__price {
        font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    }

    .wbv-card__desc {
        font-size: clamp(0.8rem, 2.5vw, 0.95rem);
    }

    .wbv-card__image-wrap {
        border-radius: clamp(16px, 3vw, 30px);
    }

    .wbv-card__image {
        border-radius: clamp(16px, 3vw, 30px);
    }

    .wbv-card__ctas {
        flex-direction: column;
    }

    .wbv-card__btn {
        width: 100%;
        font-size: 0.85rem;
    }

    .wbv-card__btn--build {
        display: none;
    }
}