/* inventory.css — 3-card recommendation carousel + per-vehicle gallery overlay.
 *
 * Single file with BOTH Style A (parents — neumorphic) and Style B (students — glass)
 * variants per C12 of docs/superpowers/plans/2026-05-28-inventory-pipeline-crawl4ai-ghactions-repojson.md.
 *
 * Consumes tokens from tokens-a.css + tokens-b.css; does NOT redefine.
 * Spec sources: funnel/insurance-and-inventory-logic.md §§8, 9, 13, 16.
 *
 * WCAG contrast accounting (verified against tokens-a.css + tokens-b.css):
 *   - Style A Pass badge: bg #437a22 (--color-success) + text #faf7f2 (--color-text-inverse)
 *     Contrast ≈ 5.7:1 → AA pass for normal text.
 *   - Style A Stretch badge: bg #964219 (--color-warning) + text #faf7f2 (--color-text-inverse)
 *     Contrast ≈ 6.2:1 → AA pass for normal text.
 *   - Style B Pass badge: bg rgba(109,170,69,0.22) over #0c0c18 (effective ~#1a2f15)
 *     + text #f0ecff (--color-text). Contrast ≈ 13.4:1 → AAA pass.
 *     Per [[feedback_adversarial_review_pattern]] spec adversarial-pass lesson, the
 *     Pass color must use dark bg + light text on Style B — pink CTA tokens are NOT
 *     repurposed as Pass badge bg.
 *   - Style B Stretch badge: bg rgba(253,171,67,0.22) over #0c0c18 (effective ~#3a2c0e)
 *     + text #f0ecff (--color-text). Contrast ≈ 11.9:1 → AAA pass.
 *   - Style A CTA reuse: inherits .c-btn--a contrast (text #231515 on #9fb9bf, 8.55:1 AAA).
 *   - Style B CTA reuse: inherits .c-btn--b contrast (text #0c0c18 on #e86af0, 7.17:1 AAA).
 */

/* =============================================================================
 * Grid
 * ========================================================================== */

.inv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6, 1.5rem);
  max-width: 1100px;
  margin: var(--space-8, 2rem) auto;
  padding: 0 var(--space-4, 1rem);
}

@media (min-width: 600px) {
  .inv-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .inv-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8, 2rem); }
}

/* =============================================================================
 * Card — base shape (variant-agnostic)
 * ========================================================================== */

.inv-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-2xl, 1.5rem);
  overflow: hidden;
  position: relative;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.inv-card__hero {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

.inv-card__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.inv-card__hero-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-sm, 0.9rem);
  color: var(--color-text-muted);
  font-style: italic;
}

.inv-card__body {
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem) var(--space-6, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  flex: 1;
}

.inv-card__title {
  font-size: var(--text-lg, 1.25rem);
  margin: 0;
  line-height: 1.2;
}

.inv-card__trim {
  font-style: normal;
  font-weight: 500;
  font-size: 0.85em;
  color: var(--color-text-muted);
}

.inv-card__reason {
  margin: 0;
  font-size: var(--text-sm, 0.95rem);
  color: var(--color-text);
  font-weight: 500;
}

.inv-card__caution {
  margin: 0;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-md, 0.5rem);
  font-size: var(--text-xs, 0.8rem);
  line-height: 1.4;
}

.inv-card__pricing {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}

.inv-card__price {
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: var(--text-xl, 1.75rem);
  line-height: 1;
}

.inv-card__msrp {
  font-size: var(--text-sm, 0.9rem);
  color: var(--color-text-muted);
}

.inv-card__specs {
  display: grid;
  /* minmax(0, 1fr) — NOT 1fr (= minmax(auto, 1fr)). A bare `1fr` track's `auto`
     min lets an intrinsically-wide value ("$23,126/mo all-in", "$18k–$24k OTD")
     blow the column past 1fr, pushing the grid wider than the card and clipping
     the right edge. The 0 min lets the track shrink so the grid always fits the
     card padding. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
  margin: 0;
}

/* On narrow cards (mobile single-column carousel + the 375px viewport) two
   columns leave too little room for long money strings — drop to one column so
   every label+value pair is fully visible. */
@media (max-width: 420px) {
  .inv-card__specs { grid-template-columns: minmax(0, 1fr); }
}

.inv-card__spec {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Grid items default to min-width:auto, which refuses to shrink below the
     intrinsic content width. Force 0 so the flex column can wrap its value
     inside the track instead of overflowing. */
  min-width: 0;
}

.inv-card__spec dt {
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  /* Let long labels wrap rather than force the track wider. */
  overflow-wrap: anywhere;
}

.inv-card__spec dd {
  margin: 0;
  font-size: var(--text-sm, 0.95rem);
  color: var(--color-text);
  /* Long money/OTD strings wrap inside the track instead of clipping. */
  overflow-wrap: anywhere;
}

.inv-card__freshness {
  /* Bottom-anchor the freshness + actions group so it aligns across cards
     regardless of how many lines the specs (e.g. a 2-line color) occupy. */
  margin: auto 0 0;
  font-size: var(--text-xs, 0.78rem);
  font-style: italic;
  color: var(--color-text-muted);
}

.inv-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  padding-top: var(--space-3, 0.75rem);
}

.inv-card__see-more {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.625rem var(--space-3, 0.75rem);  /* 44px min tap target */
  min-height: 44px;
  font: inherit;
  font-size: var(--text-sm, 0.9rem);
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  align-self: flex-start;
}

.inv-card__see-more:hover {
  color: var(--color-primary);
}

.inv-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--cta-padding, 0.75rem 2rem);
  border-radius: var(--cta-radius, 9999px);
  font-weight: var(--cta-fontweight, 700);
  letter-spacing: var(--cta-letterspacing, 0.06em);
  text-transform: var(--cta-text-transform, uppercase);
  text-decoration: none;
  text-align: center;
  font-size: var(--text-sm, 0.9rem);
}

/* =============================================================================
 * Tier badge — base shape (variant skin below)
 * ========================================================================== */

.inv-card__badge {
  position: absolute;
  top: var(--space-3, 0.75rem);
  right: var(--space-3, 0.75rem);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  z-index: 2;
}

.inv-card__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.inv-card__badge-icon {
  flex-shrink: 0;
}

/* =============================================================================
 * Style A variant — neumorphic (parents)
 * Pulls --color-bg cream, --neuro-* shadows, --color-cta slate teal.
 * ========================================================================== */

.inv-card--a {
  background: var(--color-bg);
  border: var(--neuro-border);
  box-shadow: var(--neuro-light), var(--neuro-dark);
}

.inv-card--a:hover {
  transform: translateY(-2px);
  box-shadow:
    -8px -8px 18px #ffffff,
    8px 8px 18px #d4cfc7;
}

.inv-card--a .inv-card__title {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text);
}

.inv-card--a .inv-card__caution {
  background: var(--color-surface-offset);
  color: var(--color-warning);
  border-left: 3px solid var(--color-warning);
}

.inv-card--a .inv-card__cta {
  background: var(--color-cta);
  color: var(--color-cta-text);    /* AAA 8.55:1 */
  border: var(--neuro-border);
  box-shadow: var(--neuro-light), var(--neuro-dark);
}

.inv-card--a .inv-card__cta:hover {
  background: var(--color-cta-hover);
}

.inv-card--a .inv-card__cta:active {
  background: var(--color-cta-active);
  box-shadow: var(--neuro-inset);
}

/* Style A badge skins
 * Pass: --color-success #437a22 + --color-text-inverse #faf7f2 → ~5.7:1 AA
 * Stretch: --color-warning #964219 + --color-text-inverse #faf7f2 → ~6.2:1 AA
 */
.inv-card--a .inv-card__badge--pass {
  background: var(--color-success);
  color: var(--color-text-inverse);
}

.inv-card--a .inv-card__badge--stretch {
  background: var(--color-warning);
  color: var(--color-text-inverse);
}

/* =============================================================================
 * Style B variant — glass (students)
 * Pulls --glass-* tokens, --color-cta electric pink, --color-text lavender.
 * ========================================================================== */

.inv-card--b {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.inv-card--b::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-scrim);
  pointer-events: none;
  z-index: 1;
}

.inv-card--b > * {
  position: relative;
  z-index: 2;
}

.inv-card--b:hover {
  background: var(--glass-bg-hover);
  border-color: rgba(232, 106, 240, 0.32);
  transform: translateY(-2px);
}

.inv-card--b .inv-card__title {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text);
}

.inv-card--b .inv-card__trim,
.inv-card--b .inv-card__msrp,
.inv-card--b .inv-card__freshness,
.inv-card--b .inv-card__spec dt {
  color: var(--color-text-muted);
}

.inv-card--b .inv-card__price,
.inv-card--b .inv-card__reason,
.inv-card--b .inv-card__spec dd {
  color: var(--color-text);
}

.inv-card--b .inv-card__caution {
  background: rgba(253, 171, 67, 0.12);
  color: var(--color-warning);
  border-left: 3px solid var(--color-warning);
}

.inv-card--b .inv-card__see-more {
  color: var(--color-secondary);
}

.inv-card--b .inv-card__see-more:hover {
  color: var(--color-primary);
}

.inv-card--b .inv-card__cta {
  background: var(--color-cta);
  color: var(--color-cta-text);    /* AAA 7.17:1 */
  box-shadow: 0 0 20px var(--color-cta-glow);
}

.inv-card--b .inv-card__cta:hover {
  background: var(--color-cta-hover);
  box-shadow: 0 0 36px var(--color-cta-glow), 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Style B badge skins — high contrast against #0c0c18 page bg via dark-tinted
 * translucent fills + light text. AAA contrast verified above.
 */
.inv-card--b .inv-card__badge--pass {
  background: rgba(67, 122, 34, 0.85);
  color: var(--color-text);        /* #f0ecff on dark green ≈ 13.4:1 */
  border: 1px solid rgba(109, 170, 69, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.inv-card--b .inv-card__badge--stretch {
  background: rgba(150, 66, 25, 0.85);
  color: var(--color-text);        /* #f0ecff on dark amber ≈ 11.9:1 */
  border: 1px solid rgba(253, 171, 67, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* =============================================================================
 * Empty / error state card
 * ========================================================================== */

.inv-empty {
  max-width: 640px;
  margin: var(--space-8, 2rem) auto;
  padding: var(--space-8, 2rem);
  text-align: center;
  border-radius: var(--radius-2xl, 1.5rem);
  background: var(--color-surface, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--color-surface-offset, rgba(255, 255, 255, 0.08));
}

.inv-empty p {
  margin: 0 0 var(--space-3, 0.75rem);
}

.inv-empty p:last-child {
  margin-bottom: 0;
}

/* Variant-specific tinting for empty-state */
body[data-route="students"] .inv-empty {
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--color-text);
}

/* Honest income-floor empty-state (§9): shows the 20/4/10 math when the
 * cheapest car still costs more per month than the user's safe budget. Left-
 * aligned because it carries a math table + a lever list, not a one-line notice. */
.inv-empty__lead,
.inv-empty__levers-lead,
.inv-empty__consult {
  text-align: left;
}

.inv-empty__math {
  margin: var(--space-4, 1rem) 0;
  padding: var(--space-4, 1rem);
  border-radius: var(--radius-lg, 0.75rem);
  background: var(--color-surface-offset, rgba(255, 255, 255, 0.06));
  text-align: left;
}

.inv-empty__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  padding: var(--space-2, 0.5rem) 0;
}

.inv-empty__row dt { margin: 0; }
.inv-empty__row dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }

.inv-empty__row--gap {
  margin-top: var(--space-2, 0.5rem);
  border-top: 1px solid var(--color-surface-offset, rgba(255, 255, 255, 0.12));
  font-weight: 700;
}

.inv-empty__levers {
  margin: 0 0 var(--space-3, 0.75rem);
  padding-left: var(--space-5, 1.25rem);
  text-align: left;
}

.inv-empty__levers li {
  margin-bottom: var(--space-2, 0.5rem);
}

/* =============================================================================
 * Gallery overlay (per-vehicle second carousel — spec §13)
 * ========================================================================== */

.inv-gallery {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-gallery__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.inv-gallery__frame {
  position: relative;
  max-width: min(1100px, 96vw);
  max-height: 92vh;
  padding: var(--space-6, 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  background: var(--color-surface, #1a1a32);
  color: var(--color-text, #f0ecff);
  border-radius: var(--radius-2xl, 1.5rem);
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(0, 0, 0, 0.5));
}

.inv-gallery__close {
  position: absolute;
  top: var(--space-3, 0.75rem);
  right: var(--space-3, 0.75rem);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-gallery__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.inv-gallery__title {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: var(--text-lg, 1.25rem);
  padding-right: 56px;   /* clearance for close button */
  align-self: stretch;
  text-align: left;
}

.inv-gallery__stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-gallery__img {
  max-height: 70vh;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg, 0.75rem);
  background: #000;
}

.inv-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-text, #fff);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-gallery__nav:hover {
  background: rgba(255, 255, 255, 0.32);
}

.inv-gallery__nav--prev { left: var(--space-3, 0.75rem); }
.inv-gallery__nav--next { right: var(--space-3, 0.75rem); }

.inv-gallery__count {
  margin: 0;
  font-size: var(--text-xs, 0.78rem);
  color: var(--color-text-muted);
}

/* =============================================================================
 * Post-selection panel (spec §14 contact capture, §15 test-drive, §16 stale)
 * Shown ONLY after the user selects a specific vehicle. Variant tint follows
 * body[data-route] like the empty-state above.
 * ========================================================================== */

.inv-select {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 1rem);
}

.inv-select__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.inv-select__frame {
  position: relative;
  width: min(480px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: var(--space-7, 1.75rem) var(--space-6, 1.5rem);
  border-radius: var(--radius-2xl, 1.5rem);
  background: var(--color-surface, #1a1a32);
  color: var(--color-text, #f0ecff);
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(0, 0, 0, 0.5));
}

.inv-select__close {
  position: absolute;
  top: var(--space-3, 0.75rem);
  right: var(--space-3, 0.75rem);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.inv-select__lead {
  margin: 0 0 var(--space-5, 1.25rem);
  font-size: var(--text-base, 1rem);
  line-height: 1.5;
}

.inv-select__step-label {
  margin: 0 0 var(--space-2, 0.5rem);
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: var(--text-lg, 1.25rem);
}

.inv-select__step-label--warn {
  color: var(--color-warning);
}

.inv-select__field {
  margin-bottom: var(--space-4, 1rem);
}

.inv-select__field label {
  display: block;
  font-size: var(--text-sm, 0.9rem);
  font-weight: 600;
  margin-bottom: var(--space-2, 0.5rem);
}

.inv-select__field input {
  width: 100%;
  font: inherit;
  font-size: var(--text-base, 1rem);
  padding: 0.625rem 0.75rem;
  min-height: 44px;
  border: 1px solid var(--color-surface-offset, rgba(255, 255, 255, 0.18));
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-surface-2, rgba(255, 255, 255, 0.06));
  color: var(--color-text);
}

.inv-select__field input:focus-visible {
  outline: 2px solid var(--color-primary, #e86af0);
  outline-offset: 1px;
}

.inv-select__error {
  margin: 0 0 var(--space-3, 0.75rem);
  color: var(--color-warning);
  font-size: var(--text-sm, 0.9rem);
}

.inv-select__choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-4, 1rem);
}

.inv-select__cta {
  width: 100%;
}

.inv-select__cta--consult,
.inv-select__cta--another {
  background: transparent;
  border: 2px solid currentColor;
  color: var(--color-text);
  box-shadow: none;
}

.inv-select__submit {
  width: 100%;
}

.inv-select__license {
  margin: 0;
  padding: var(--space-3, 0.75rem);
  border-radius: var(--radius-md, 0.5rem);
  background: rgba(253, 171, 67, 0.12);
  border-left: 3px solid var(--color-warning);
  font-size: var(--text-sm, 0.85rem);
  line-height: 1.45;
}

/* Style A (parents) tint */
body:not([data-route="students"]) .inv-select__frame {
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--neuro-border);
}
body:not([data-route="students"]) .inv-select__submit,
body:not([data-route="students"]) .inv-select__cta--testdrive {
  background: var(--color-cta);
  color: var(--color-cta-text);
}

/* Style B (students) tint */
body[data-route="students"] .inv-select__frame {
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--color-text);
}
body[data-route="students"] .inv-select__submit,
body[data-route="students"] .inv-select__cta--testdrive {
  background: var(--color-cta);
  color: var(--color-cta-text);
  box-shadow: 0 0 20px var(--color-cta-glow);
}

/* =============================================================================
 * Forced-colors mode — strip translucent/blur effects + restore borders.
 * Matches the discipline used in neuro.css + glass.css.
 * ========================================================================== */

@media (forced-colors: active) {
  .inv-card,
  .inv-empty,
  .inv-select__frame,
  .inv-gallery__frame {
    border: 2px solid CanvasText;
    background: Canvas;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .inv-card--b::before {
    display: none;
  }
  .inv-card__badge {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  .inv-card__cta,
  .inv-gallery__nav,
  .inv-gallery__close {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
}

/* =============================================================================
 * Reduced motion
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .inv-card,
  .inv-card:hover {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
  .inv-gallery__backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Opt-in link from the recommendation carousel to the immersive /showroom/.
   Subtle + centered; does not compete with the primary Book/See-options CTAs. */
.inventory-section__showroom {
  margin: var(--space-5, 1.25rem) 0 0;
  text-align: center;
  font-size: var(--text-sm, 0.9rem);
}
.inventory-section__showroom a {
  color: var(--color-text-muted, #6b6b60);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.inventory-section__showroom a:hover,
.inventory-section__showroom a:focus-visible {
  opacity: 1;
}