/* =============================================================================
   Browse Card Component
   Provides card grid styling for vehicle browse pages (makes, models, rules).
   HTML structure is provided by Bootstrap 5 grid wrappers + browse-card.html.twig.
   ============================================================================= */

/* ----------------------------------------------------------------------------
   0. Grid gutters — views_bootstrap_grid row needs explicit gutter variables
   ---------------------------------------------------------------------------- */
.views-view-grid > .row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
}

/* ----------------------------------------------------------------------------
   1. Card container
   ---------------------------------------------------------------------------- */
.browse-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 250ms ease, transform 250ms ease;
}

/* ----------------------------------------------------------------------------
   2. Hover and focus states
   ---------------------------------------------------------------------------- */
.browse-card:hover,
.browse-card:focus-within {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------------------
   3. Card link
   ---------------------------------------------------------------------------- */
.browse-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
  outline: none;
}

/* ----------------------------------------------------------------------------
   4. Image wrapper — 4:3 aspect ratio with inset padding
   ---------------------------------------------------------------------------- */
.browse-card__image-wrapper {
  aspect-ratio: 4 / 3;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fafafa;
}

/* ----------------------------------------------------------------------------
   5. Image
   ---------------------------------------------------------------------------- */
.browse-card__image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* ----------------------------------------------------------------------------
   6. No-image placeholder — fills the aspect-ratio wrapper, shows vehicle icon
   ---------------------------------------------------------------------------- */
.browse-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
}

.browse-card__placeholder::after {
  content: '';
  width: 48px;
  height: 48px;
  opacity: 0.25;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ----------------------------------------------------------------------------
   7. Label
   ---------------------------------------------------------------------------- */
.browse-card__label {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
}