/*
 * Car Image Fix and Card Responsiveness
 * This CSS fixes the car image display and improves card responsiveness
 * !important is used throughout to override any conflicting styles
 */

/* Override any conflicting styles from carcard.css - ONLY for car year and title */
.car-card .car-year,
.car-card .card-title {
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* Fix the card structure */
.car-card .card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Target the card image wrapper */
.card-img-wrapper {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 16/9 !important; /* Using the same aspect ratio as in editcar.css */
    background-color: #1a1a1a !important; /* Dark background for car images */
    height: 220px !important; /* Fixed height for consistency */
    min-height: 180px !important; /* Minimum height to ensure visibility */
}

/* Ensure the image fills the container properly - exactly like in editcar.css */
.card-img-top {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Use cover to fill the space without black bars */
    object-position: center !important; /* Center the car in the frame */
    transition: transform 0.4s ease !important;
    padding: 0 !important; /* Remove padding to maximize image space */
}

/* Make card body smaller relative to image */
.car-card .card-body {
    flex: 1 !important;
    padding: 0.75rem !important;
    min-height: auto !important; /* Allow natural height */
    max-height: none !important; /* Remove max height to prevent cropping */
    overflow: visible !important; /* Allow content to be visible */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Improve text responsiveness with ellipsis */
.car-card .car-year {
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important; /* Ensure block display for ellipsis to work */
    width: 100% !important; /* Force full width */
    text-align: left !important; /* Ensure left alignment */
}

.car-card .card-title {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important; /* Ensure block display for ellipsis to work */
    margin-bottom: 0.25rem !important; /* Add some space below the title */
    width: 100% !important; /* Force full width */
    text-align: left !important; /* Ensure left alignment */
}

/* Make car price more responsive */
.car-card .car-price {
    font-size: 0.95rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0.125rem 0 !important; /* Reduced padding by 50% as requested */
    display: block !important; /* Ensure block display for ellipsis to work */
    width: 100% !important; /* Force full width */
    text-align: left !important; /* Ensure left alignment */
}

/* Make features section more compact */
.car-card .features {
    margin-top: 0.25rem !important;
    padding: 0 !important;
}

.car-card .row.g-0 {
    gap: 0.1rem !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
}

.car-card .feature-box {
    padding: 0.1rem 0.25rem !important;
    gap: 0.1rem !important;
}

.car-card .feature-text {
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important; /* Ensure block display for ellipsis to work */
}

.car-card .feature-icon {
    font-size: 0.85rem !important;
}

.car-card .vertical-line {
    height: 15px !important;
    margin: 0 0.1rem !important;
}

/* Add a slight zoom effect on hover - exactly like in editcar.css */
.card-img-wrapper:hover .card-img-top {
    transform: scale(1.05) !important; /* Same hover effect as in editcar.css */
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .card-img-wrapper {
        height: 200px !important;
    }

    .car-card .car-year {
        font-size: 0.85rem !important;
    }

    .car-card .card-title {
        font-size: 0.75rem !important;
    }

    .car-card .car-price {
        font-size: 0.9rem !important;
    }

    .car-card .feature-text {
        font-size: 0.7rem !important;
    }

    .car-card .feature-icon {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 768px) {
    .card-img-wrapper {
        height: 180px !important;
        min-height: 160px !important;
    }

    .car-card .card-body {
        padding: 0.5rem !important;
    }

    .car-card .car-year {
        font-size: 0.8rem !important;
    }

    .car-card .card-title {
        font-size: 0.7rem !important;
    }

    .car-card .car-price {
        font-size: 0.85rem !important;
        padding: 0.075rem 0 !important; /* Reduced padding by 50% as requested */
    }

    .car-card .feature-text {
        font-size: 0.65rem !important;
    }

    .car-card .feature-icon {
        font-size: 0.75rem !important;
    }

    .car-card .vertical-line {
        height: 12px !important;
    }
}

@media (max-width: 576px) {
    .card-img-wrapper {
        height: 160px !important;
        min-height: 140px !important;
    }

    .car-card .card-body {
        padding: 0.4rem !important;
    }

    .car-card .car-year {
        font-size: 0.75rem !important;
    }

    .car-card .card-title {
        font-size: 0.65rem !important;
    }

    .car-card .car-price {
        font-size: 0.8rem !important;
        padding: 0.05rem 0 !important; /* Reduced padding by 50% as requested */
    }

    .car-card .feature-text {
        font-size: 0.6rem !important;
    }

    .car-card .feature-icon {
        font-size: 0.7rem !important;
    }

    .car-card .vertical-line {
        height: 10px !important;
        margin: 0 0.05rem !important;
    }
}