/* ============================================================
   ALGO — RESPONSIVE STYLESHEET (mobile-first overrides)
   Breakpoints: 480 / 768 / 1024 / 1280
   ============================================================ */

/* Base (mobile <480px) adjustments already assumed mobile-first in style.css;
   the rules below progressively enhance for larger viewports. */

@media (max-width: 1023px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { max-width: 420px; margin-inline: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .mega-menu { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
  .main-nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--c-bg); flex-direction: column; align-items: stretch; padding: var(--sp-6); overflow-y: auto; transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out); }
  .main-nav[data-open="true"] { transform: translateX(0); }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav a.nav-link { padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-border); }
  .mega-menu { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; border: none; background: none; padding: var(--sp-4) 0 0; display: none; }
  .has-mega[data-expanded="true"] .mega-menu { display: grid; }
  .search-box { display: none; }
  .mobile-toggle { display: flex; }
  .header-actions .search-box { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --fs-4xl: 2.4rem; --fs-3xl: 2rem; --fs-2xl: 1.6rem; }
  .container { padding-inline: var(--sp-4); }
  .section { padding-block: var(--sp-8); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .back-to-top { right: var(--sp-4); bottom: var(--sp-4); }
}

@media (min-width: 1280px) {
  .container { padding-inline: var(--sp-6); }
}

/* Print styles — professional touch for reports/invoices */
@media print {
  .site-header, .back-to-top, .mobile-toggle, .lang-switch, .search-box { display: none !important; }
  body { background: #fff; color: #000; }
}