/* autonet V1 mobile listing density
 * Goal: preserve readability while showing 2 columns x ~3 rows on common mobile viewports.
 * Mobile-only and CSS-only so desktop/tablet behavior and marketplace logic remain unchanged.
 */
@media (max-width: 767px) {
  .grid:has(> [data-testid^="card-vehicle-"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }

  [data-testid^="card-vehicle-"] > div:first-child {
    aspect-ratio: 16 / 10 !important;
  }

  [data-testid^="card-vehicle-"] > div:nth-child(2) {
    padding: 0.625rem !important;
  }

  /* Brand: slightly larger than the prior compact 10px treatment. */
  [data-testid^="card-vehicle-"] > div:nth-child(2) > p:first-child {
    font-size: 0.6875rem !important;
    line-height: 0.875rem !important;
    margin-bottom: 0.125rem !important;
  }

  /* Model/title: increase legibility without growing card height materially. */
  [data-testid^="card-vehicle-"] > div:nth-child(2) > h3 {
    font-size: 0.8125rem !important;
    line-height: 1rem !important;
    margin-bottom: 0.25rem !important;
  }

  [data-testid^="card-vehicle-"] > div:nth-child(2) > h3 + p {
    font-size: 0.875rem !important;
    line-height: 1.125rem !important;
    margin-bottom: 0.375rem !important;
  }

  [data-testid^="card-vehicle-"] > div:nth-child(2) .mb-2 {
    margin-bottom: 0.25rem !important;
  }

  [data-testid^="card-vehicle-"] > div:nth-child(2) .pt-2 {
    padding-top: 0.375rem !important;
  }
}