/* ========================================================================
   inventory.css — Inventory grid + cards for /inventory
   ------------------------------------------------------------------------
   QUICK CHEAT SHEET (MOST COMMON TWEAKS)

   • PAGE TITLE ("Inventory" at top):
       .inv-page-title → font-size: clamp(2.3rem, 3.5vw, 2.9rem);
       :root           → --inv-title-color

   • VEHICLE TITLES (inside each card):
       :root → --inv-card-title-size
         - Smaller: 1.1rem
         - Current: 1.4rem
         - Bigger:  1.6rem, 1.8rem, etc.

   • IMAGE HEIGHT (HERO/PLACEHOLDER on cards):
       :root → --inv-img-max-height
         - Taller photos: 380px, 420px…
         - Shorter:       260px, 300px…
       .inv-img uses object-fit: contain to avoid cropping.

   • SPACE BETWEEN CARDS:
       #invGrid → gap: 2rem;

   • BUTTON COLOR ("View details"):
       :root → --inv-button-bg
                --inv-button-bg-hover
   ======================================================================== */

:root {
    /* Page / card colors */
    --inv-bg: #000000;
    --inv-card-bg: #000000;
    --inv-card-border: #333333;
    --inv-card-radius: 14px;
    --inv-img-radius: 10px;

    /* Typography knobs */
    /* MAIN KNOB for the vehicle titles on each card */
    --inv-card-title-size: 2.1rem;
    /* ↑ Try 1.6rem or 1.8rem if you want them even larger. */

    --inv-price-size: 0.9rem;
    --inv-title-color: #f8f8f8;         /* PAGE TITLE color ("Inventory") */
    --inv-text-color: #f5f5f5;          /* Card body text */
    --inv-muted-color: #bbbbbb;         /* Price / subtle text */

    /* CTA button colors */
    --inv-button-bg: #c1141c;
    --inv-button-bg-hover: #e01f29;
    --inv-button-text: #ffffff;

    /* Image height control
       - Increase to make card photos taller (e.g. 380px, 420px)
       - Decrease for shorter cards.
    */
    --inv-img-max-height: 360px;
}

/* ------------------------------------------------------------------------
   Page-level title — “Inventory”
   ------------------------------------------------------------------------ */
.inv-page-title {
    font-size: clamp(2.6rem, 3.8vw, 3.0rem);  /* BIGGER & responsive */
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--inv-title-color);
    margin-bottom: 1.75rem;
    text-align: center;
}

/* ------------------------------------------------------------------------
   Grid layout for the inventory cards
   ------------------------------------------------------------------------ */
#invGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;              /* space between cards */
    margin-top: 2rem;
}

/* Card container */
.inv-card {
    background-color: var(--inv-card-bg);
    border: 1px solid var(--inv-card-border);
    border-radius: var(--inv-card-radius);
    padding: 1rem;
    color: var(--inv-text-color);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Image link wrapper */
.inv-img-link {
    display: block;
    border-radius: var(--inv-img-radius);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

/* ------------------------------------------------------------------------
   Hero image (card photo / placeholder)
   ------------------------------------------------------------------------
   CURRENT:
     • Fully fluid width.
     • Max height controlled via --inv-img-max-height.
     • object-fit: contain keeps the full car visible (no cropping).

   TWEAKS:
     • Taller photos: bump --inv-img-max-height in :root.
     • No max height at all: set max-height: none; on .inv-img.
   ------------------------------------------------------------------------ */
.inv-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: var(--inv-img-max-height);
    object-fit: contain;   /* show whole image; letterboxing if needed */
}

/* Card body layout */
.inv-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.25rem;
    flex-grow: 1;
}

/* Vehicle title (per card) */
.inv-title {
    font-size: var(--inv-card-title-size);  /* main knob for card title size */
    margin: 0;
    color: var(--inv-text-color);
}

/* Price line */
.inv-price {
    font-size: var(--inv-price-size);
    color: var(--inv-muted-color);
}

/* Tagline kept for future use (not in HTML right now) */
.inv-tag {
    font-size: 0.85rem;
    color: var(--inv-muted-color);
    margin-bottom: 0.75rem;
}

/* Primary CTA button (View details) */
.inv-card .inv-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background-color: var(--inv-button-bg);
    color: var(--inv-button-text);
    text-decoration: none;
    font-size: 0.9rem;
    border: none;
}

.inv-card .inv-btn:hover {
    background-color: var(--inv-button-bg-hover);
    color: var(--inv-button-text);
}

/* Extra breathing room below the grid */
#invGrid + * {
    margin-top: 2rem;
}

/* Small screens */
@media (max-width: 600px) {
    #invGrid {
        gap: 1.5rem;
    }

    .inv-img {
        max-height: 260px;   /* slightly shorter on very small screens */
    }
}