/* Mobile-first card system: keeps the HMS website compact and app-like. */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .section { padding-left: 18px !important; padding-right: 18px !important; }
  .section-top { text-align: center !important; }
  .section-top h2 { font-size: clamp(1.65rem, 7vw, 2.15rem) !important; line-height: 1.12 !important; }
  .intro-section h2,
  .home-appointment-image h2,
  .services-section .section-top h2,
  .doctors-section .section-top h2,
  .premium-care-section .section-top h2,
  .home-care-path h2,
  .home-specialties-premium .section-top h2,
  .patient-stories-section .section-top h2,
  .faq-content h2,
  .latest-articles-section .section-top h2,
  .bottom-testimonials .section-top h2,
  .cta-section h2 { white-space: nowrap !important; font-size: clamp(1.25rem, 5.4vw, 1.75rem) !important; }
  .section-subcopy { font-size: .88rem !important; line-height: 1.6 !important; }

  /* Compact two-card grids used throughout the public pages. */
  .blog-showcase-grid,
  .specialties-page-grid,
  .services-full-grid,
  .doctor-profile-grid,
  .promise-grid,
  .premium-care-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }

  .blog-showcase-grid .blog-card,
  .specialties-page-grid .specialty-page-card,
  .services-full-grid .service-page-card,
  .doctor-profile-grid > article,
  .promise-grid > article,
  .premium-care-grid > article { min-width: 0 !important; min-height: 0 !important; padding: 16px !important; border-radius: 16px !important; }

  .blog-showcase-grid .blog-card img { height: 108px !important; }
  .blog-showcase-grid .blog-card h3,
  .specialties-page-grid .specialty-page-card h3,
  .services-full-grid .service-page-card h3,
  .doctor-profile-grid h3,
  .promise-grid h3,
  .premium-care-grid h3 { font-size: .92rem !important; line-height: 1.25 !important; }
  .blog-showcase-grid .blog-card p,
  .specialties-page-grid .specialty-page-card p,
  .services-full-grid .service-page-card p,
  .doctor-profile-grid p,
  .promise-grid p,
  .premium-care-grid p { font-size: .74rem !important; line-height: 1.5 !important; }

  .specialties-page-grid .specialty-page-card i,
  .promise-grid > article i,
  .premium-care-grid > article i { width: 42px !important; height: 42px !important; font-size: 1rem !important; border-radius: 13px !important; }
  .specialties-page-grid .specialty-appointment-button,
  .services-full-grid .service-appointment-button { min-height: 34px !important; padding: 8px 9px !important; font-size: .66rem !important; }

  .doctor-profile-grid > article > img,
  .doctor-profile-grid .doctor-photo-placeholder { height: 132px !important; }
  .doctor-profile-grid .doctor-card-actions { grid-template-columns: 1fr !important; gap: 6px !important; margin-top: 11px !important; }
  .doctor-profile-grid .doctor-card-actions a,
  .doctor-profile-grid .doctor-card-actions button { min-height: 34px !important; padding: 7px !important; font-size: .62rem !important; }

  /* Home carousels: two compact cards are always visible and swipe naturally. */
  .services-section .card-carousel-track > article,
  .doctors-section .card-carousel-track > article,
  .home-specialties-premium .card-carousel-track > a { flex: 0 0 calc((100% - 16px) / 2) !important; }
  .services-section .card-carousel-track,
  .doctors-section .card-carousel-track,
  .home-specialties-premium .card-carousel-track { width: 100% !important; gap: 12px !important; }
  .services-section .card-carousel-track > article,
  .doctors-section .card-carousel-track > article,
  .home-specialties-premium .card-carousel-track > a { flex-basis: calc((100% - 12px) / 2) !important; }
  .services-section .card-carousel-viewport,
  .doctors-section .card-carousel-viewport,
  .home-specialties-premium .card-carousel-viewport { width: 100% !important; overflow: hidden !important; }
  .services-section .modern-service-grid article,
  .home-specialties-premium .premium-specialty-grid a { min-height: 170px !important; padding: 16px !important; border-radius: 16px !important; }
  .services-section .modern-service-grid h3,
  .home-specialties-premium .premium-specialty-grid span { font-size: .85rem !important; }
  .services-section .modern-service-grid p,
  .home-specialties-premium .premium-specialty-grid small { font-size: .69rem !important; line-height: 1.45 !important; }
  .doctors-section .modern-doctor-grid img,
  .doctors-section .doctor-photo-placeholder { height: 128px !important; }
  .doctors-section .modern-doctor-grid > article { overflow: hidden !important; }
  .doctors-section .modern-doctor-grid article > div:last-child { padding: 13px !important; }
  .doctors-section .modern-doctor-grid h3 { font-size: .82rem !important; }
  .doctors-section .modern-doctor-grid p,
  .doctors-section .modern-doctor-grid span { font-size: .67rem !important; }
  .doctors-section .doctor-card-actions { grid-template-columns: 1fr !important; gap: 6px !important; margin-top: 10px !important; }
  .doctors-section .doctor-card-actions a,
  .doctors-section .doctor-card-actions button { min-height: 33px !important; padding: 6px !important; font-size: .58rem !important; }

  /* Larger content stays readable; these retain one full-width card. */
  .mission-vision-grid,
  .intro-grid,
  .emergency-guide { grid-template-columns: 1fr !important; }
  .story-video-card { height: 330px !important; }
  .story-video-overlay { padding: 25px 21px !important; }
  .article-carousel-track > article > div { padding: 25px 21px !important; }
  .admin-video-carousel-track > article { grid-template-columns: 1fr !important; }

  /* All carousel rails are safe for finger swipes. */
  .card-carousel-viewport,
  .story-carousel,
  .article-carousel,
  .testimonial-carousel,
  .admin-video-carousel { touch-action: pan-y !important; }
}