/* responsive.css — Ruta Verde Knowledge Hub */

/* ── Tablet (1024px) ──────────────────────────────── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 32px; }
  .hero-kpis { gap: var(--sp-xl); }
  .timeline::before { left: 24px; }
  .timeline-step, .timeline-step:nth-child(even) { flex-direction: row; }
  .timeline-step .step-number { margin-left: 0; }
}

/* ── Mobile (768px) ───────────────────────────────── */
@media (max-width: 768px) {
  :root { font-size: 14px; }
  .container { padding: 0 var(--sp-md); }
  .section { padding: var(--sp-2xl) 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero { padding: var(--sp-2xl) var(--sp-md); }
  .hero h1 { font-size: 26px; }
  .hero::before, .hero::after { display: none; }
  .hero-kpis { gap: var(--sp-md); }
  .hero-kpi .number { font-size: 32px; }
  .topbar-nav { display: none; }
  .topbar-inner { padding: 0 var(--sp-md); }
  .filter-bar { flex-direction: column; }
  .cta-banner::after { display: none; }
  .photo-card img { height: 200px; }
}

/* ── Small mobile (480px) ─────────────────────────── */
@media (max-width: 480px) {
  .hero h1 { font-size: 22px; }
  .hero-kpis { flex-direction: column; gap: var(--sp-sm); align-items: center; }
  .stat-card .value { font-size: 24px; }
}

/* ── Accessibility ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .photo-card img { transition: none; }
  .photo-card:hover img { transform: none; }
}

@media (prefers-color-scheme: dark) {
  /* Future: dark mode tokens */
}