/* ========================================
   BMW USA — Model Navigation Cards
   Source: BUILD_PLAN §3.1 (Model Navigation Card), §2
   ======================================== */

.modelnavigation {
  width: 100%;
  overflow: hidden;
}

.cmp-modelnavigation {
  display: flex;
  gap: 0;
  padding: 24px 16px;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.cmp-modelnavigation::-webkit-scrollbar {
  display: none;
}

.cmp-modelnavigation__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.cmp-modelnavigationcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  padding: 8px 12px;
  min-width: 120px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  border-radius: 4px;
}

.cmp-modelnavigationcard:hover {
  transform: scale(1.03);
}

.cmp-modelnavigationcard:active {
  transform: scale(0.98);
}

.cmp-modelnavigationcard__image {
  width: 100px;
  height: 75px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bmw-bg-light-grey);
  margin-bottom: 8px;
  transition: box-shadow var(--transition-fast);
}

.cmp-modelnavigationcard:hover .cmp-modelnavigationcard__image {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cmp-modelnavigationcard__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.cmp-modelnavigationcard:hover .cmp-modelnavigationcard__image img {
  transform: scale(1.05);
}

.cmp-modelnavigationcard__title {
  font-size: var(--body-default-size);
  font-weight: 700;
  color: var(--bmw-dark-text);
  text-align: center;
  white-space: nowrap;
}

.cmp-modelnavigationcard__subtitle {
  font-size: 0.6875rem;
  color: var(--bmw-light-text);
  text-align: center;
}

/* Active/selected state */
.cmp-modelnavigationcard--active .cmp-modelnavigationcard__image {
  box-shadow: 0 0 0 2px var(--bmw-blue);
}

.cmp-modelnavigationcard--active .cmp-modelnavigationcard__title {
  color: var(--bmw-blue);
}

/* Desktop: Grid layout */
@media (min-width: 768px) {
  .cmp-modelnavigation {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    padding: 24px 32px;
    max-width: 1600px;
    margin: 0 auto;
    overflow-x: visible;
  }

  .cmp-modelnavigationcard {
    min-width: auto;
    padding: 12px 8px;
  }
}

@media (min-width: 1024px) {
  .cmp-modelnavigation {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
}

@media (min-width: 1280px) {
  .cmp-modelnavigation {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}