@charset "UTF-8";

/* INVENTORY GRID STYLES
   -------------------------------------------------------------------
   GOALS:
   • Make card images render consistently (with/without CSS present)
   • Preserve aspect ratio and crop nicely (object-fit: cover)
   • Give you easy knobs to resize image height, spacing, and text
*/

/* ========== IMAGE AREA ============================================= */

/* The clickable image at the top of each card. We treat it like a
   16:9 “window” that the photo fills, cropping gently if needed. */
.inv-img {
    /* Make image span card width */
    width: 100%;              /* ← ensures full card width */
    display: block;           /* ← removes inline-spacing gaps */

    /* Set a predictable height by aspect-ratio (no JS required) */
    aspect-ratio: 16 / 9;     /* ← change to 4/3, 3/2, 1/1 as desired */

    /* Fill that window, cropping edges if aspect ratios differ */
    object-fit: cover;        /* ← switches from “fit” to “fill + crop” */
    object-position: center;  /* ← centers the crop; try 'top' or 'left' */

    /* Optional: subtle border for dark theme consistency */
    border-bottom: 1px solid rgba(255,255,255,.12); /* ← visual separation */
}

/* If you prefer tall images (e.g., 4:3), change aspect-ratio above to 4/3.
   To make images shorter, use 3/2 or even 21/9. */

/* ========== CARD BODY ============================================== */

.inv-body {
    /* Control inner spacing between title, price, tagline, CTA */
    padding: 0.75rem;         /* ↑ increase to add breathing room, ↓ to tighten */
}

/* Title line */
.inv-title {
    /* Font sizing control for the card title */
    font-size: 1rem;          /* ↑ 1.125rem for slightly larger titles */
    font-weight: 600;         /* 400=normal, 700=bold; tune to brand */
    line-height: 1.25;        /* tighter line for compact cards */

    /* Optional: stroke-ish effect using text-shadow (fake emboldening) */
    /* text-shadow: 0 0 0.5px rgba(255,255,255,.75); */
}

/* Price line under title */
.inv-price {
    /* Subdued style; the color is set in HTML via .text-secondary */
    /* Adjust spacing between price and tagline by tweaking margin in HTML */
}

/* Tagline paragraph */
.inv-tag {
    margin-bottom: 0.75rem;   /* space before CTA; ↑ for more breathing room */
}

/* ========== GRID GAPS & ALIGNMENT ================================== */

/* The Bootstrap classes `g-3`, `row-cols-*` on the container handle
   responsiveness: 1 col on xs, 2 on sm, 3 on lg. You can override: */

@media (min-width: 992px) {  /* lg and up */
    /* Example: force 4 cards per row on desktops (if you want) */
    /* .row.row-cols-lg-3 { grid-template-columns: repeat(4, 1fr); } */
}

/* ========== QUICK CHEATSHEET ========================================
Move card image crop left:     .inv-img { object-position: left; }
Make images taller:            .inv-img { aspect-ratio: 4 / 3; }
Make titles larger:            .inv-title { font-size: 1.125rem; }
Bolder titles:                 .inv-title { font-weight: 700; }
Fake stroke on text:           .inv-title { text-shadow: 0 0 0.5px #fff; }
Tighten body spacing:          .inv-body { padding: 0.5rem; }
===================================================================== */