/* =========================================================
   SmartInvoice AI — Responsive Rules (mobile-first enhance)
   ========================================================= */

/* ---------------- 320–480px (Mobile) ---------------- */
/* Default styling (base rules in style.css) applies here.
   - Everything stacks vertically.
   - Container padding is minimized.
   - Grids collapse to single columns.
   - Nav bar is in mobile drawer mode. */

/* ---------------- 481–767px (Large Mobile) ---------------- */
@media (min-width: 481px) {
  .container { padding-inline: 20px; }
  h1 { font-size: clamp(2.1rem, 7vw, 3rem); }
  
  .btn { width: auto; }
  .hero-cta { flex-direction: row; width: auto; }
  .footer-bottom { flex-direction: row; text-align: left; align-items: flex-start; }
  
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-chip { display: flex; }
}

/* ---------------- 768–1024px (Tablet) ---------------- */
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-about { grid-column: 1 / -1; }
  .section { padding-block: clamp(56px, 8vw, 110px); }
  .ad-mobile { display: none; }
  .ad-desktop { display: flex; }
  
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------- 1025–1440px (Laptop) ---------------- */
@media (min-width: 1025px) {
  .nav-burger { display: none; }
  .nav-links {
    position: static;
    flex-direction: row;
    align-items: center;
    padding: 0;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    transform: none;
  }
  .nav-links a { padding: 9px 14px; font-size: 0.92rem; }
  
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
  .hero-visual { order: 0; max-width: none; }
  
  .footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; }
  .footer-about { grid-column: auto; }
}

/* ---------------- 1441px+ (Desktop) ---------------- */
@media (min-width: 1441px) {
  .container { max-width: 1320px; }
}