/* ═══════════════════════════════════════
   Smart President - Responsive Styles
   ═══════════════════════════════════════ */

/* ───── Small Devices (< 640px) ───── */
@media (max-width: 639px) {
  /* Hero */
  .hero-blur-overlay {
    backdrop-filter: blur(2px) brightness(0.45);
    -webkit-backdrop-filter: blur(2px) brightness(0.45);
  }

  /* Timeline Slider */
  .tl-track {
    gap: 1rem;
    padding: 2rem 0.75rem 1.5rem;
  }
  .tl-card {
    padding: 1.25rem;
    min-height: 240px;
  }
  .tl-card-light {
    min-height: 200px;
  }
  .tl-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    margin-bottom: 1rem;
  }
  .tl-card-title {
    font-size: 1.1rem;
  }
  .tl-card-desc {
    font-size: 0.8rem;
    line-height: 1.7;
  }

  /* Navigation Buttons - smaller on mobile */
  .tl-nav-btn {
    width: 36px;
    height: 36px;
  }
  .tl-nav-prev { right: 0.25rem; }
  .tl-nav-next { left: 0.25rem; }

  /* FAQ */
  .faq-trigger {
    font-size: 0.85rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .faq-content {
    font-size: 0.8rem !important;
  }

  /* Stats */
  .stat-card-value {
    font-size: 1.5rem !important;
  }

  /* Section padding */
  section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ───── Medium Devices (640px - 767px) ───── */
@media (min-width: 640px) and (max-width: 767px) {
  .tl-track {
    gap: 1.25rem;
    padding: 2.5rem 1rem 2rem;
  }
}

/* ───── Tablet (768px - 1023px) ───── */
@media (min-width: 768px) and (max-width: 1023px) {
  .tl-track {
    gap: 1.5rem;
  }
  .tl-nav-btn {
    width: 40px;
    height: 40px;
  }
}

/* ───── Desktop (≥ 1024px) ───── */
@media (min-width: 1024px) {
  .tl-card {
    min-height: 300px;
  }
  .tl-card-light {
    min-height: 260px;
  }
}

/* ───── Large Desktop (≥ 1280px) ───── */
@media (min-width: 1280px) {
  .tl-nav-prev { right: 1.5rem; }
  .tl-nav-next { left: 1.5rem; }
}

/* ───── Touch devices ───── */
@media (hover: none) and (pointer: coarse) {
  .tl-slide:hover {
    opacity: inherit !important;
    filter: inherit !important;
    transform: inherit !important;
  }
  .tl-track {
    cursor: default;
  }
}

/* ───── Reduced Motion ───── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-scroll-x {
    animation: none !important;
  }
  .tl-slide {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
}