/* ================================================================
   PlanIt — travel.css  |  Travel Hub Styles
   ================================================================ */
.travel-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.travel-mode-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: all var(--dur-fast);
  width: 100%;
}
.travel-mode-card:hover {
  border-color: var(--clr-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.travel-mode-icon { font-size: 2rem; line-height: 1; }
.travel-mode-name { font-family: var(--font-display); font-size: var(--text-md); color: var(--clr-text); display: block; margin-bottom: var(--space-1); }
.travel-mode-desc { font-size: var(--text-sm); color: var(--clr-text-2); margin: 0; line-height: 1.5; }
.travel-mode-arrow { font-size: var(--text-xl); color: var(--clr-text-3); }