/* =======================================================================
   My Compuclinic — Responsive Stylesheet
   Breakpoints tested conceptually at: 320, 375, 390, 430, 768, 1024,
   1366, 1440, 1920.
   ======================================================================= */

/* Large desktop refinement */
@media (min-width: 1440px) {
  .container { max-width: 1280px; }
}

/* Laptop / small desktop */
@media (max-width: 1200px) {
  .hero-grid { gap: 32px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .header-inner { gap: 10px; }
  .main-nav a.nav-link { padding: 10px 8px; font-size: 0.85rem; }
  .header-actions .call-chip span.chip-label { display: none; }
  .call-chip { padding: 9px 12px; }
}

/* Tablet */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .mobile-menu-toggle { display: flex; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .split { grid-template-columns: 1fr; }
  .split-reverse .split-media { order: -1; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .location-grid { grid-template-columns: 1fr; }
  .two-col-text { grid-template-columns: 1fr; }
  .capability-bar .container { justify-content: center; }
}

/* Large phones / small tablets */
@media (max-width: 768px) {
  .section { padding: 60px 0; }
  .hero { padding: 90px 0 60px; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .cta-banner { flex-direction: column; text-align: center; padding: 40px 28px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group.full { grid-column: auto; }
  .hero-stats { gap: 20px; }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn { width: 100%; }
  .header-actions .call-chip span.chip-label { display: none; }
}

/* Standard phones */
@media (max-width: 430px) {
  .container { padding: 0 18px; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.55rem; }
  .steps { grid-template-columns: 1fr; }
  .form-card, .location-card { padding: 22px; }
  .cta-banner { padding: 32px 20px; }
  .brand-text span { display: none; }
  .floating-actions { right: 14px; bottom: 14px; }
  .fab { width: 50px; height: 50px; }
}

/* Small phones */
@media (max-width: 375px) {
  h1 { font-size: 1.8rem; }
  .hero-badge { font-size: 0.68rem; padding: 5px 10px; }
  .header-inner { padding: 10px 16px; }
  .brand img { height: 38px; }
}

@media (max-width: 320px) {
  .btn { padding: 12px 20px; font-size: 0.88rem; }
  .card { padding: 20px; }
}