/*
 * Cure Plus Pharmacy - Responsive Styles
 * Mobile-first responsive design
 */

/* ==========================================
   BREAKPOINTS
   Mobile: < 640px (base styles)
   SM: 640px+
   MD: 768px+
   LG: 1024px+
   XL: 1280px+
   2XL: 1536px+
   ========================================== */

/* ==========================================
   SMALL DEVICES (640px+)
   ========================================== */

@media (min-width: 640px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  
  .hero-cta {
    flex-direction: row;
  }
  
  .btn-block-sm {
    width: auto;
    display: inline-flex;
  }
}

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

@media (min-width: 768px) {
  /* Typography */
  h1 {
    font-size: var(--font-size-4xl);
  }
  
  h2 {
    font-size: var(--font-size-3xl);
  }
  
  /* Section spacing */
  .section {
    padding-top: var(--section-padding-tablet);
    padding-bottom: var(--section-padding-tablet);
  }
  
  /* Grid utilities */
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  /* Footer */
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Pricing comparison */
  .pricing-comparison {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Hero adjustments */
  .hero {
    padding: var(--space-20) 0;
  }
}

/* ==========================================
   LARGE DEVICES (1024px+) - Laptops/Desktops
   ========================================== */

@media (min-width: 1024px) {
  /* Container */
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  
  /* Typography */
  h1 {
    font-size: var(--font-size-5xl);
  }
  
  h2 {
    font-size: var(--font-size-4xl);
  }
  
  /* Section spacing */
  .section {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
  }
  
  /* Grid utilities */
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  /* Navigation */
  .nav-desktop {
    display: flex;
  }
  
  .mobile-menu-toggle {
    display: none;
  }
  
  /* Footer */
  .footer-content {
    grid-template-columns: 2fr repeat(3, 1fr);
  }
  
  /* Hero */
  .hero {
    padding: var(--space-24) 0;
  }
  
  .hero-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
  
  /* Forms - side by side layout */
  .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

/* ==========================================
   EXTRA LARGE DEVICES (1280px+)
   ========================================== */

@media (min-width: 1280px) {
  h1 {
    font-size: var(--font-size-6xl);
  }
  
  .container {
    max-width: var(--container-xl);
  }
}

/* ==========================================
   2XL DEVICES (1536px+)
   ========================================== */

@media (min-width: 1536px) {
  .container-2xl {
    max-width: var(--container-2xl);
  }
}

/* ==========================================
   MOBILE OPTIMIZATION
   ========================================== */

/* Ensure clickable elements are large enough on mobile */
@media (max-width: 767px) {
  .btn,
  .form-input,
  .form-select,
  .accordion-header,
  a.card {
    min-height: 44px; /* iOS/Android minimum touch target */
  }
  
  /* Stack buttons vertically on mobile */
  .btn-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .btn-group .btn {
    width: 100%;
  }
  
  /* Mobile-friendly tables */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Hide complex elements on mobile if needed */
  .hide-on-mobile {
    display: none;
  }
}

/* ==========================================
   TABLET-SPECIFIC (768px - 1023px)
   ========================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Adjustments specific to tablet sizes */
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hero-cta {
    justify-content: center;
  }
}

/* ==========================================
   LANDSCAPE MOBILE DEVICES
   ========================================== */

@media (max-height: 500px) and (orientation: landscape) {
  .section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  
  .hero {
    padding: var(--space-12) 0;
  }
  
  .modal {
    max-height: 95vh;
  }
}

/* ==========================================
   HIGH RESOLUTION DISPLAYS
   ========================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Use higher quality images for retina displays */
  .logo-img {
    image-rendering: -webkit-optimize-contrast;
  }
}

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

@media print {
  /* Hide navigation, footer, and interactive elements */
  .header,
  .footer,
  .btn,
  .mobile-menu-toggle,
  .nav-mobile,
  .no-print {
    display: none !important;
  }
  
  /* Adjust layout for print */
  .section {
    padding: var(--space-4) 0;
  }
  
  /* Ensure links show URLs */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.875rem;
    color: var(--color-gray-600);
  }
  
  /* Remove box shadows */
  .card,
  .hero-image img {
    box-shadow: none !important;
    border: 1px solid var(--color-gray-300);
  }
  
  /* Page breaks */
  .section {
    page-break-inside: avoid;
  }
  
  h1, h2, h3 {
    page-break-after: avoid;
  }
}

/* ==========================================
   DARK MODE SUPPORT (Optional)
   ========================================== */

@media (prefers-color-scheme: dark) {
  /* Uncomment to enable dark mode support */
  /*
  :root {
    --color-gray-900: #F7FAFC;
    --color-gray-800: #EDF2F7;
    --color-gray-700: #E2E8F0;
    --color-gray-600: #CBD5E0;
    --color-white: #1A202C;
  }
  
  body {
    background: var(--color-gray-900);
    color: var(--color-gray-100);
  }
  
  .card {
    background: var(--color-gray-800);
  }
  */
}