/* ================================================================
   VELIXA — RESPONSIVE CSS
   Mobile-first responsive breakpoints
   ================================================================ */

/* ── Tablet (max 1024px) ── */
@media (max-width: 1024px) {
  .container { padding: 0 var(--space-lg); }

  .categories-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .articles-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .article-layout {
    grid-template-columns: 1fr 260px;
    gap: var(--space-xl);
  }

  .contact-grid { grid-template-columns: 1fr; }
}

/* ── Small Tablet (max 768px) ── */
@media (max-width: 768px) {
  :root {
    --header-height: 64px;
  }

  .container { padding: 0 var(--space-md); }

  /* Nav */
  .nav-links { display: none; }

  .nav-search { display: none; }

  .nav-hamburger { display: flex; }

  /* Mobile Menu */
  .mobile-menu {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: var(--space-lg);
    z-index: 999;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .mobile-menu.open { display: flex; }

  .mobile-menu a {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    display: block;
    transition: all var(--transition-fast);
  }

  .mobile-menu a:hover { background: var(--bg-card); color: var(--text-primary); }

  .mobile-search {
    position: relative;
    margin-top: var(--space-sm);
  }

  .mobile-search input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    font-family: var(--font-body);
  }

  .mobile-search .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    width: 16px;
  }

  /* Hero */
  .hero { padding: var(--space-2xl) 0; }
  .hero-stats { gap: var(--space-xl); }
  .hero-stat-number { font-size: 1.5rem; }

  /* Categories */
  .categories-grid { grid-template-columns: repeat(3, 1fr); }

  /* Articles */
  .articles-grid { grid-template-columns: 1fr; }
  .articles-grid.cols-4 { grid-template-columns: 1fr; }

  /* Article Layout */
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-sidebar { order: -1; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }

  /* Error Page */
  .error-code { font-size: 5rem; }

  /* Section header */
  .section-header { flex-direction: column; align-items: flex-start; }
}

/* ── Mobile (max 480px) ── */
@media (max-width: 480px) {
  .container { padding: 0 var(--space-md); }

  .hero-search input { padding: 14px 50px 14px 18px; font-size: 0.9rem; }

  .categories-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-stats { gap: var(--space-lg); }

  .ad-container.sidebar { min-height: 280px; }

  #scroll-top { bottom: 20px; right: 20px; }

  .article-header h1 { font-size: 1.6rem; }
}

/* ── Prefers Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}