/* ===== HOW TO REACH PAGE STYLES ===== */

.travel-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-8); max-width: 900px; margin: 0 auto; }
.travel-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); position: relative; overflow: hidden; transition: border-color 0.3s; }
.travel-card:hover { border-color: var(--color-gold); }
.travel-card-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-gold), #c5962e); display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: var(--space-4); }
.travel-card h3 { margin-bottom: var(--space-3); }
.travel-card p { color: var(--color-text-secondary); line-height: 1.8; }
.travel-card ul { padding-left: var(--space-5); margin: var(--space-4) 0; }
.travel-card li { color: var(--color-text-secondary); margin-bottom: var(--space-2); line-height: 1.7; }
.travel-card li strong { color: var(--color-text); }

.route-table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.route-table th { background: var(--color-primary); color: #fff; padding: var(--space-3) var(--space-4); text-align: left; font-size: var(--text-sm); font-weight: 600; }
.route-table td { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); }
.route-table tr:last-child td { border-bottom: none; }
.route-table tr:nth-child(even) td { background: var(--color-surface-2); }

.travel-tip { background: linear-gradient(135deg, rgba(200, 170, 110, 0.1), rgba(200, 170, 110, 0.05)); border: 1px solid var(--color-gold); border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-4); }
.travel-tip h4 { color: var(--color-gold); margin-bottom: var(--space-2); font-size: var(--text-base); }
.travel-tip p { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }

@media (max-width: 680px) {
  .route-table { font-size: var(--text-xs); }
  .route-table th, .route-table td { padding: var(--space-2) var(--space-3); }
}