/* ============================================================
   Fix My Appointment — Responsive breakpoints (responsive.css)
   Mobile-first refinements for tablets and phones.
   ============================================================ */

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-features { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid { gap: 32px; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 480px; }
  /* Narrow viewports crop a background-cover image toward its centre, which
     would slide the doctor under the text. Anchoring to the right edge keeps
     her visible beside the copy instead of behind it. */
  .hero-photo-bg { background-position: 78% 15%; min-height: 480px; padding: 64px 0 56px; }
  .hero-photo-bg::before {
    background: linear-gradient(100deg,
      rgba(255,255,255,0.98) 0%,
      rgba(255,255,255,0.95) 46%,
      rgba(255,255,255,0.80) 62%,
      rgba(255,255,255,0.30) 78%,
      rgba(255,255,255,0.05) 92%);
  }
  .hero-copy { max-width: 560px; }
  .grid-3, .steps { grid-template-columns: 1fr 1fr; }

  /* Navbar collapses to hamburger */
  .nav-toggle { display: grid; place-items: center; }
  .nav-links {
    position: fixed; top: var(--nav-height); left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch; padding: 12px 20px 18px;
    display: none; box-shadow: var(--shadow-md); z-index: 99;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 10px; font-size: 1rem; }
  .nav-cta .btn-outline { display: none; }
}

@media (max-width: 640px) {
  .section { padding: 52px 0; }
  .grid-2, .grid-3, .grid-4, .steps { grid-template-columns: 1fr; }
  .hero { padding: 56px 0 48px; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .hero-features { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* Phone: there is no room for copy AND an uncovered photo side by side, so
     the image becomes a soft backdrop and legibility wins outright. */
  .hero-photo-bg { background-position: 72% 15%; min-height: 0; padding: 48px 0 44px; }
  .hero-photo-bg::before {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.93) 60%,
      rgba(255,255,255,0.90) 100%);
  }
  .doctor-card { flex-direction: column; }
  .doctor-actions { margin-left: 0; text-align: left; width: 100%; }
  .doctor-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .modal { padding: 22px; }
  .modal-actions .btn { flex: 1 1 auto; }
  #Toast_Container { left: 16px; right: 16px; }
  .toast { max-width: none; }
  .form-row { grid-template-columns: 1fr !important; }
  .otp-inputs input { width: 40px !important; height: 48px !important; }
}

@media (max-width: 400px) {
  .container { padding: 0 16px; }
  h1 { font-size: 1.7rem; }
  .btn-lg { padding: 13px 20px; font-size: 0.96rem; }
}