/* =============================================================
   Weinberg Healthcare & Technology Pte Ltd — Responsive Styles
   Breakpoints: 480px / 768px / 1024px / 1440px (mobile-first)
   ============================================================= */

/* ── 1440px+ ── Wide screens ────────────────────────────────── */
@media (min-width: 1440px) {
  :root { --container-max: 1320px; }
  .hero { padding: 9rem 0 7rem; }
}

/* ── ≤1024px ── Tablet ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .features-grid,
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-teaser-grid,
  .about-overview-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer-brand { grid-column: span 2; }
}

/* ── ≤768px ── Mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --container-pad: 1.125rem;
    --header-height: 64px;
  }

  section { padding: 3.5rem 0; }

  /* Nav: hide desktop links, show hamburger */
  .nav-links  { display: none; }
  .hamburger  { display: flex; }

  /* Hero */
  .hero { padding: 4rem 0 3.5rem; }
  .hero-stats { gap: 1.75rem; flex-wrap: wrap; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn,
  .hero-actions .btn-outline-hero { justify-content: center; }

  .category-tabs { overflow-x: auto; }

  /* Grids → single column */
  .features-grid,
  .services-grid,
  .services-full-grid,
  .mission-vision-grid,
  .products-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .form-row     { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Page hero */
  .page-hero { padding: 3.5rem 0 3rem; }
}

/* ── ≤480px ── Small mobile ─────────────────────────────────── */
@media (max-width: 480px) {
  :root { --container-pad: 1rem; }

  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }

  .btn { padding: 0.6875rem 1.375rem; font-size: 0.875rem; }

  .hero { padding: 3rem 0 2.5rem; }
  .hero-stats { gap: 1.25rem; }
  .hero-stat-value { font-size: 1.5rem; }

  .feature-card { padding: 1.5rem; }
  .service-card { padding: 1.5rem; }

  .service-card-header,
  .service-card-body { padding: 1.5rem; }

  .contact-section { padding: 3rem 0; }

  .section-header { margin-bottom: 2rem; }

  .category-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .category-tabs::-webkit-scrollbar { display: none; }
  .tab-btn { padding: 0.75rem 1rem; font-size: 0.875rem; }

  .about-visual-card { padding: 2rem 1.5rem; }
}