/* ============================================================
   SECTION: Suggested Itineraries
   Edit: mockup/css/sections/itineraries.css
   ============================================================ */

.itineraries {
  --section-bg: var(--color-linen);
  --section-accent: var(--color-copper);
}

.itineraries__track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-md);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.itineraries__track::-webkit-scrollbar {
  height: 6px;
}

.itineraries__track::-webkit-scrollbar-thumb {
  background: var(--color-stone);
  border-radius: 3px;
}

.route-card {
  flex: 0 0 min(85vw, 18rem);
  scroll-snap-align: start;
  padding: var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-stone);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.route-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.route-card__duration {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--color-copper);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.route-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.route-card__stops {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: 1.5;
  flex: 1;
}

.route-card__stops::before {
  content: "→ ";
  color: var(--color-sage);
}

.itineraries__hint {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  font-family: var(--font-data);
}