/*
 * Page-scoped styling for the Golden Blueprint /inventory route.
 *
 * SHARED experience only — every value here comes from the brand.css token family, so this file
 * inherits each site's theme rather than hard-coding one site's look. No keyframe animation: the
 * loading state is a static placeholder, and hover affordance is a shadow/border change only.
 *
 * Loaded from Pages/Inventory.cshtml (the golden shell exposes no head section, and the layout is
 * outside this unit's fence), so it applies to /inventory and nothing else.
 */

/* ------------------------------------------------------------------ header: tighten the dead space */

.ifmg-inventory-head {
    padding-bottom: 0;
}

.ifmg-inventory-head h1 {
    margin-bottom: .5rem;
}

.ifmg-inventory-head .ifmg-inventory-intro {
    max-width: 64ch;
    margin-bottom: 1.25rem;
    color: var(--ifmg-ink-soft);
    font-size: 1.0625rem;
}

/* -------------------------------------------------------------- one coherent horizontal filter bar */

.ifmg-inventory-search {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem 1rem;
    align-items: end;
    padding: 1rem 1.25rem;
    background: var(--ifmg-surface);
    border: 1px solid var(--ifmg-border);
    border-radius: var(--ifmg-radius);
    box-shadow: var(--ifmg-shadow-sm);
}

/* Trim | Color | ZIP | Condition | Search — a single row once there is room for it. The ZIP column is
   narrow (5 digits) and Condition is intrinsically sized so the three radios never wrap mid-group. */
@media (min-width: 768px) {
    .ifmg-inventory-search {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .ifmg-inventory-search {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 7.5rem max-content max-content;
    }
}

.ifmg-inventory-search__field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.ifmg-inventory-search__field > fieldset {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
    border: 0;
    padding: 0;
    margin: 0;
}

/* Labels and the <legend> that stands in for one must sit on the same baseline across the bar. */
.ifmg-inventory-search .form-label,
.ifmg-inventory-search legend.form-label {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--ifmg-muted);
}

.ifmg-inventory-search__condition {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    /* Match the rendered height of the sibling inputs so the radios line up with them, not above. */
    min-height: 2.375rem;
}

.ifmg-inventory-search__condition .form-check {
    margin: 0;
}

.ifmg-inventory-search__action .btn {
    /* Same height as the inputs it sits beside. */
    min-height: 2.375rem;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .ifmg-inventory-search__action .btn {
        width: 100%;
    }
}

/* ------------------------------------------------------------------------ results: keep them high up */

.ifmg-inventory-results-section {
    padding-top: 1.5rem;
}

.ifmg-inventory-group + .ifmg-inventory-group {
    margin-top: 2rem;
}

.ifmg-inventory-group > h2 {
    margin-bottom: .875rem;
}

/* Desktop uses the width it has: 1-up mobile, 2-up md, 3-up lg, 4-up xl. */
.ifmg-inventory-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 576px) {
    .ifmg-inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .ifmg-inventory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1400px) {
    .ifmg-inventory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------------------------------------- the card */

/* The whole card is one <a>, so browser link defaults (blue, underlined, visited purple) must be
   neutralised explicitly for every state — inheriting the design system's ink instead. */
.ifmg-inventory-card,
.ifmg-inventory-card:link,
.ifmg-inventory-card:visited,
.ifmg-inventory-card:hover,
.ifmg-inventory-card:focus,
.ifmg-inventory-card:active {
    color: var(--ifmg-ink);
    text-decoration: none;
}

.ifmg-inventory-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* .ifmg-card supplies surface/border/radius/shadow; the media is full-bleed, so padding moves
       onto the body element instead. */
    padding: 0;
    height: 100%;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.ifmg-inventory-card:hover,
.ifmg-inventory-card:focus-visible {
    box-shadow: var(--ifmg-shadow);
    border-color: var(--ifmg-muted);
}

/* Fixed ratio box: every card's image occupies exactly the same height, so card tops and bottoms
   align across the row whatever the upstream image dimensions are. */
.ifmg-inventory-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--ifmg-tint, #F2F4F7);
    border-bottom: 1px solid var(--ifmg-border);
    overflow: hidden;
}

.ifmg-inventory-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ifmg-inventory-card__body {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    flex: 1 1 auto;
    padding: 1rem 1.125rem 1.125rem;
}

.ifmg-inventory-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ifmg-ink);
}

/* Price is the largest type after the title — the second thing the eye lands on. */
.ifmg-inventory-card__price {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ifmg-ink);
}

.ifmg-inventory-card__condition {
    align-self: flex-start;
}

.ifmg-inventory-card__meta,
.ifmg-inventory-card__dealer {
    margin: 0;
    color: var(--ifmg-muted);
    line-height: 1.35;
}

.ifmg-inventory-card__dealer {
    /* Sits under the key details, above the CTA cue, and takes the slack so the cue stays pinned. */
    margin-bottom: .25rem;
}

/* A CTA *cue*, not the click target — the whole card is still the link. */
.ifmg-inventory-card__cue {
    margin-top: auto;
    padding-top: .5rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ifmg-accent-text, var(--ifmg-orange-text));
}

/* ---------------------------------------------------------------------------- loading placeholders */

/* Static (no shimmer, no animation): grey blocks in the card silhouette, so the ~3.7s cold fetch
   reads as "loading" instead of "failed". Server-rendered for the initial load; re-inserted by
   inventory.js for every refinement. */
.ifmg-inventory-loading__label {
    margin-bottom: .875rem;
    color: var(--ifmg-muted);
}

.ifmg-inventory-skeleton {
    pointer-events: none;
}

.ifmg-inventory-skeleton .ifmg-inventory-card__media {
    background: #E9ECF1;
}

.ifmg-inventory-skeleton__line {
    background: #E9ECF1;
    border-radius: var(--ifmg-radius-sm);
}

.ifmg-inventory-skeleton__line--title { height: 1rem; width: 80%; }
.ifmg-inventory-skeleton__line--price { height: 1.375rem; width: 45%; }
.ifmg-inventory-skeleton__line--meta { height: .75rem; width: 65%; }
.ifmg-inventory-skeleton__line--dealer { height: .75rem; width: 55%; }

/* ------------------------------------------------------- AEO block: separated from the commercial UI */

.ifmg-inventory-about {
    margin-top: 1rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    border-top: 1px solid var(--ifmg-border);
    background: var(--ifmg-tint, #F7F8FA);
}

.ifmg-inventory-about h2 {
    margin-bottom: .75rem;
}

.ifmg-inventory-about p {
    max-width: 72ch;
    color: var(--ifmg-ink-soft);
}

.ifmg-inventory-about p:last-child {
    margin-bottom: 0;
}

/* Deterministic answer surface (AEO hardening, 2026-08-26): a concise, truthfully-scoped summary of the
   listings being shown, rendered client-side from the same payload as the cards. */
.ifmg-inventory-answer { margin: 0 0 1rem; padding: .9rem 1.1rem; border-left: 3px solid var(--ifmg-blue, #1b75bc); background: rgba(27, 117, 188, .05); border-radius: 4px; }
.ifmg-inventory-answer__lead { margin: 0; font-weight: 600; }
.ifmg-inventory-answer__facts { margin: .35rem 0 0; color: #555; }

.ifmg-inventory-more { display: block; margin: 1.25rem auto 0; }