/**
 * Responsive - Mobile-First Media Queries
 *
 * Progressive enhancement approach - base styles are mobile,
 * larger screens get enhanced layouts.
 *
 * Breakpoints:
 * - sm: 640px  (Large phones)
 * - md: 768px  (Tablets)
 * - lg: 1024px (Desktops)
 * - xl: 1280px (Large desktops)
 * - 2xl: 1536px (Extra large screens)
 *
 * @package Assure_Clinic
 * @version 1.0.0
 */

/* ============================================================================
   SMALL SCREENS (640px+) - Large Phones
   ========================================================================== */

@media (min-width: 640px) {
  /* Typography */
  .sm\:text-xl { font-size: var(--font-size-xl); }
  .sm\:text-2xl { font-size: var(--font-size-2xl); }
  .sm\:text-3xl { font-size: var(--font-size-3xl); }

  /* Layout */
  .sm\:flex { display: flex; }
  .sm\:grid { display: grid; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Spacing */
  .sm\:px-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  /* Buttons */
  .btn {
    min-width: 160px;
  }

  /* Stats Grid */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================================
   MEDIUM SCREENS (768px+) - Tablets
   ========================================================================== */

@media (min-width: 768px) {
  /* Container */
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  /* Typography */
  h1 {
    font-size: var(--font-size-6xl);
  }

  h2 {
    font-size: var(--font-size-5xl);
  }

  .md\:text-2xl { font-size: var(--font-size-2xl); }
  .md\:text-3xl { font-size: var(--font-size-3xl); }
  .md\:text-4xl { font-size: var(--font-size-4xl); }
  .md\:text-5xl { font-size: var(--font-size-5xl); }
  .md\:text-6xl { font-size: var(--font-size-6xl); }

  /* Layout */
  .md\:flex { display: flex; }
  .md\:flex-row { flex-direction: row; }
  .md\:grid { display: grid; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Display */
  .md\:block { display: block; }
  .md\:hidden { display: none; }

  /* Spacing */
  .section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }

  .section-lg {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
  }

  .md\:px-8 {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  .md\:py-16 {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  /* Hero */
  .hero {
    min-height: 700px;
  }

  .hero-title {
    font-size: var(--font-size-6xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-xl);
  }

  .hero-cta {
    justify-content: flex-start;
  }

  /* Stats Grid */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Cards */
  .card-testimonial {
    padding: var(--space-10);
  }

  .card-doctor-image {
    width: 150px;
    height: 150px;
  }

  /* CTA */
  .cta-title {
    font-size: var(--font-size-5xl);
  }

  /* Forms */
  .consultation-form {
    padding: var(--space-10);
  }

  /* Section Headers */
  .section-title {
    font-size: var(--font-size-5xl);
  }

  .section-subtitle {
    font-size: var(--font-size-xl);
  }
}

/* ============================================================================
   LARGE SCREENS (1024px+) - Desktops
   ========================================================================== */

@media (min-width: 1024px) {
  /* Container */
  .container {
    padding-left: var(--container-padding-lg);
    padding-right: var(--container-padding-lg);
  }

  /* Typography */
  h1 {
    font-size: var(--font-size-7xl);
  }

  h2 {
    font-size: var(--font-size-6xl);
  }

  .lg\:text-4xl { font-size: var(--font-size-4xl); }
  .lg\:text-5xl { font-size: var(--font-size-5xl); }
  .lg\:text-6xl { font-size: var(--font-size-6xl); }
  .lg\:text-7xl { font-size: var(--font-size-7xl); }

  /* Layout */
  .lg\:flex { display: flex; }
  .lg\:flex-row { flex-direction: row; }
  .lg\:grid { display: grid; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Display */
  .lg\:block { display: block; }
  .lg\:hidden { display: none; }

  /* Spacing */
  .section {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }

  .section-lg {
    padding-top: var(--space-40);
    padding-bottom: var(--space-40);
  }

  .lg\:px-12 {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }

  .lg\:py-20 {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }

  /* Hero */
  .hero {
    min-height: 800px;
  }

  .hero-title {
    font-size: var(--font-size-7xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-2xl);
  }

  /* Cards */
  .card-service:hover {
    transform: translateY(-8px);
  }

  .card-location:hover {
    transform: translateY(-8px);
  }

  /* CTA */
  .cta-banner {
    padding: var(--space-20) var(--space-8);
  }

  .cta-title {
    font-size: var(--font-size-6xl);
  }

  .cta-subtitle {
    font-size: var(--font-size-xl);
  }

  /* Forms */
  .consultation-form {
    padding: var(--space-12);
  }

  /* Section Headers */
  .section-header {
    margin-bottom: var(--space-16);
  }

  .section-title {
    font-size: var(--font-size-6xl);
  }
}

/* ============================================================================
   EXTRA LARGE SCREENS (1280px+) - Large Desktops
   ========================================================================== */

@media (min-width: 1280px) {
  /* Typography */
  .xl\:text-7xl { font-size: var(--font-size-7xl); }

  /* Layout */
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  /* Hero */
  .hero-content {
    max-width: 900px;
  }

  /* Stats */
  .stat-number {
    font-size: var(--font-size-6xl);
  }
}

/* ============================================================================
   2X LARGE SCREENS (1536px+) - Extra Large Displays
   ========================================================================== */

@media (min-width: 1536px) {
  /* Container */
  .container {
    max-width: 1400px;
  }

  /* Hero */
  .hero-content {
    max-width: 1000px;
  }
}

/* ============================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  /* Hide non-essential elements */
  .btn,
  .cta-banner,
  .cta-sticky,
  nav,
  footer {
    display: none !important;
  }

  /* Ensure good contrast */
  body {
    color: #000;
    background: #fff;
  }

  /* Avoid page breaks inside elements */
  .card,
  .faq-item,
  .stat-item {
    page-break-inside: avoid;
  }

  /* Show link URLs */
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

/* ============================================================================
   REDUCED MOTION (Accessibility)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   HIGH CONTRAST MODE (Accessibility)
   ========================================================================== */

@media (prefers-contrast: high) {
  .btn {
    border-width: 3px;
  }

  .card {
    border: 2px solid var(--color-gray-900);
  }

  a {
    text-decoration: underline;
  }
}

/* ============================================================================
   DARK MODE SUPPORT (Future Enhancement)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Dark mode styles can be added here if needed */
  /* For now, we maintain light theme for medical professionalism */
}

/* ============================================================================
   MOBILE SPECIFIC OPTIMIZATIONS
   ========================================================================== */

/* Touch targets for mobile */
@media (max-width: 767px) {
  /* Ensure minimum touch target size (44x44px) */
  .btn,
  button,
  a.btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Mobile-optimized spacing */
  .section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  /* Full-width buttons on mobile */
  .btn-mobile-full {
    width: 100%;
  }

  /* Stack cards on mobile */
  .card-service,
  .card-location,
  .pricing-card {
    margin-bottom: var(--space-4);
  }

  /* Mobile hero */
  .hero {
    min-height: 500px;
    padding: var(--space-12) 0;
  }

  .hero-title {
    font-size: var(--font-size-4xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-base);
  }

  /* Mobile CTA */
  .cta-title {
    font-size: var(--font-size-3xl);
  }

  .cta-subtitle {
    font-size: var(--font-size-base);
  }

  /* Mobile stats */
  .stat-number {
    font-size: var(--font-size-4xl);
  }

  /* Mobile forms */
  .consultation-form {
    padding: var(--space-6);
  }

  /* Mobile section headers */
  .section-title {
    font-size: var(--font-size-3xl);
  }

  .section-subtitle {
    font-size: var(--font-size-base);
  }
}

/* ============================================================================
   TABLET SPECIFIC (between 768px and 1023px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Two-column layouts on tablets */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Balanced card layouts */
  .card-grid-tablet {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================================
   LANDSCAPE ORIENTATION (Mobile)
   ========================================================================== */

@media (max-width: 767px) and (orientation: landscape) {
  .hero {
    min-height: 400px;
  }

  .section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
}

/* ============================================================================
   UTILITY CLASSES FOR RESPONSIVE VISIBILITY
   ========================================================================== */

/* Hide on mobile */
.hidden-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hidden-mobile {
    display: block;
  }
}

/* Show only on mobile */
.visible-mobile {
  display: block;
}

@media (min-width: 768px) {
  .visible-mobile {
    display: none;
  }
}

/* Hide on desktop */
.hidden-desktop {
  display: block;
}

@media (min-width: 1024px) {
  .hidden-desktop {
    display: none;
  }
}

/* Show only on desktop */
.visible-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .visible-desktop {
    display: block;
  }
}