/* =========================================================
   CHOOSE YOUR RIDE — VEHICLE CARD IMAGE FIX
   The theme sets width:100%;height:100px;object-fit:cover
   inline on these images, but something (a lazy-load plugin
   or the theme's own image CSS) is overriding it, so cards
   with a photo render much taller/uneven vs. icon-only cards.
   This re-asserts consistent sizing with !important so it
   wins regardless of load order, and uses aspect-ratio so
   the browser reserves the space before the image loads
   (prevents layout shift / protects CLS).
   ========================================================= */

#fares .cab-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    align-items: stretch; /* equal-height cards even when only some have images */
}

#fares .cab-icon-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#fares .cab-icon-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 5 / 3;      /* matches the 500x300 source images */
    object-fit: cover !important;
    object-position: center top;
    border-radius: 8px;
    margin-bottom: 10px;
    display: block;
}

/* push the Book Now button to the same baseline across all cards,
   whether the card is short (icon-only) or tall (has an image) */
#fares .cab-icon-card .cab-book-now-btn {
    margin-top: auto;
}

@media (max-width: 480px) {
    #fares .cab-card-grid { grid-template-columns: 1fr 1fr; }
}