/* Responsive Media CSS for DCI Microfinance
   Progressive scaling from small to large screens (up to 1920px) */

/* Base styles (mobile first) */
.container {
    width: 100%;
    padding: 0 1rem;
    margin: 0 auto;
    max-width: 100%;
  }
  
  .container-hero {
    width: 100%;
    margin: 0 auto;
  }
  
  img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
  
  /* Hero and carousel base styles */
  .hero-section, 
  .services-hero, 
  .calculator-hero, 
  .contact-hero {
    min-height: 300px;
  }
  
  .hero-content {
    padding: 1.5rem;
    max-width: 100%;
  }
  
  /* Card and grid base styles */
  .press-grid,
  .comparison-grid,
  .tiles-container,
  .benefits-grid,
  .document-grid,
  .products-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  /* Typography base styles */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.5rem; }
  p { font-size: 1rem; }
  
  /* Progressive Media Queries */
  
  /* Small tablets (576px and up) */
  @media (min-width: 576px) {
    .container {
      max-width: 540px;
      padding: 0 1.25rem;
    }
    
    .press-grid,
    .comparison-grid,
    .tiles-container,
    .benefits-grid,
    .document-grid,
    .products-container {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.25rem;
    }
    
    .hero-section, 
    .services-hero, 
    .calculator-hero, 
    .contact-hero {
      min-height: 350px;
    }
    
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.9rem; }
    h3 { font-size: 1.6rem; }
  }
  
  /* Medium tablets (768px and up) */
  @media (min-width: 768px) {
    .container {
      max-width: 720px;
      padding: 0 1.5rem;
    }
    
    .press-grid,
    .comparison-grid,
    .tiles-container,
    .benefits-grid,
    .document-grid,
    .products-container {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.5rem;
    }
    
    .hero-section, 
    .services-hero, 
    .calculator-hero, 
    .contact-hero {
      min-height: 400px;
    }
    
    .hero-content {
      padding: 2rem;
      max-width: 600px;
    }
    
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2.1rem; }
    h3 { font-size: 1.7rem; }
    p { font-size: 1.05rem; }
    
    /* Process steps improvements */
    .process-steps {
      margin-left: auto;
      margin-right: auto;
    }
    
    /* Contact section improvements */
    .contact-section {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }
  }
  
  /* Large tablets/small desktops (992px and up) */
  @media (min-width: 992px) {
    .container {
      max-width: 960px;
      padding: 0 1.75rem;
    }
    
    .press-grid,
    .comparison-grid,
    .tiles-container,
    .benefits-grid,
    .document-grid,
    .products-container {
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 2rem;
    }
    
    .hero-section, 
    .services-hero, 
    .calculator-hero, 
    .contact-hero {
      min-height: 450px;
    }
    
    .hero-content {
      padding: 2.5rem;
      max-width: 700px;
    }
    
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2.3rem; }
    h3 { font-size: 1.8rem; }
    p { font-size: 1.05rem; }
    
    /* Calculator section improvements */
    .calculator-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
    
    /* Contact section improvements */
    .contact-section {
      flex-direction: row;
    }
    
    .contact-form-container,
    .contact-info {
      flex: 1;
    }
    
    /* Chart container improvements */
    .chart-container {
      min-height: 300px;
    }
    
    /* Footer improvements */
    .footer-container {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  /* Standard desktops (1200px and up) */
  @media (min-width: 1200px) {
    .container {
      max-width: 1140px;
      padding: 0 2rem;
    }
    
    .container-hero {
      max-width: 1600px;
    }
    
    .press-grid,
    .comparison-grid,
    .tiles-container,
    .benefits-grid,
    .document-grid,
    .products-container {
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 2.25rem;
    }
    
    .hero-section, 
    .services-hero, 
    .calculator-hero, 
    .contact-hero {
      min-height: 500px;
    }
    
    .hero-content {
      padding: 3rem;
      max-width: 800px;
    }
    
    h1 { font-size: 3rem; }
    h2 { font-size: 2.5rem; }
    h3 { font-size: 2rem; }
    p { font-size: 1.1rem; }
    
    /* Process steps improvements */
    .process-steps {
      max-width: 1100px;
    }
    
    /* Calculator section improvements */
    .calculator-section {
      gap: 2.5rem;
    }
    
    /* Chart container improvements */
    .chart-container {
      min-height: 320px;
    }
    
    /* Footer improvements */
    .footer-container {
      grid-template-columns: repeat(4, 1fr);
    }
    
    /* Fix for image aspect ratios */
    .service-image img,
    .press-image,
    .featured-press-image,
    .process-detail-image img {
      aspect-ratio: 16/9;
    }
  }
  
  /* Large desktops (1400px and up) */
  @media (min-width: 1400px) {
    .container {
      max-width: 1320px;
      padding: 0 2.25rem;
    }
    
    .container-hero {
      max-width: 1800px;
    }
    
    .press-grid,
    .comparison-grid,
    .tiles-container,
    .benefits-grid,
    .document-grid,
    .products-container {
      grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
      gap: 2.5rem;
    }
    
    .hero-section, 
    .services-hero, 
    .calculator-hero, 
    .contact-hero {
      min-height: 600px;
    }
    
    .hero-content {
      padding: 3.5rem;
      max-width: 900px;
    }
    
    h1 { font-size: 3.2rem; }
    h2 { font-size: 2.7rem; }
    h3 { font-size: 2.1rem; }
    p { font-size: 1.15rem; }
    
    /* Process steps improvements */
    .process-steps {
      max-width: 1300px;
    }
    
    /* Calculator section improvements */
    .calculator-section {
      gap: 3rem;
    }
    
    /* Chart container improvements */
    .chart-container {
      min-height: 350px;
    }
    
    /* Fix for modal content */
    .modal-content {
      max-width: 700px;
    }
    
    /* Fix for loan process steps */
    .step-content {
      max-width: 700px;
    }
  }
  
  /* Extra large desktops (1600px and up) */
  @media (min-width: 1600px) {
    .container {
      max-width: 1500px;
      padding: 0 2.5rem;
    }
    
    .container-hero {
      max-width: 1920px;
    }
    
    .press-grid,
    .comparison-grid,
    .tiles-container,
    .benefits-grid,
    .document-grid,
    .products-container {
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 3rem;
    }
    
    .hero-section, 
    .services-hero, 
    .calculator-hero, 
    .contact-hero {
      min-height: 700px;
    }
    
    .hero-content {
      padding: 4rem;
      max-width: 1000px;
    }
    
    h1 { font-size: 3.5rem; }
    h2 { font-size: 2.9rem; }
    h3 { font-size: 2.3rem; }
    p { font-size: 1.2rem; }
    
    /* Process steps improvements */
    .process-steps {
      max-width: 1400px;
    }
    
    /* Calculator section improvements */
    .calculator-section {
      gap: 3.5rem;
    }
    
    /* Chart container improvements */
    .chart-container {
      min-height: 400px;
    }
    
    /* Fix for modal content */
    .modal-content {
      max-width: 800px;
    }
    
    /* Fix for loan process steps */
    .step-content {
      max-width: 800px;
    }
  }
  
  /* Ultra wide screens (1920px and up) */
  @media (min-width: 1920px) {
    .container {
      max-width: 1800px;
      padding: 0 3rem;
    }
    
    .container-hero {
      max-width: 1920px;
    }
    
    .press-grid,
    .comparison-grid,
    .tiles-container,
    .benefits-grid,
    .document-grid,
    .products-container {
      grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
      gap: 3.5rem;
    }
    
    .hero-section, 
    .services-hero, 
    .calculator-hero, 
    .contact-hero {
      min-height: 800px;
    }
    
    .hero-content {
      padding: 4.5rem;
      max-width: 1200px;
    }
    
    h1 { font-size: 3.8rem; }
    h2 { font-size: 3.2rem; }
    h3 { font-size: 2.5rem; }
    p { font-size: 1.25rem; }
    
    /* Process steps improvements */
    .process-steps {
      max-width: 1600px;
    }
    
    /* Calculator section improvements */
    .calculator-section {
      gap: 4rem;
    }
    
    /* Chart container improvements */
    .chart-container {
      min-height: 450px;
    }
    
    /* Ensure images don't stretch too much */
    img {
      max-height: 800px;
    }
  }
  
  /* Additional fixes for specific elements */
  
  /* Fix for image aspect ratios across all screen sizes */
  .service-image img,
  .press-image,
  .featured-press-image,
  .process-detail-image img {
    aspect-ratio: 16/9;
    object-fit: cover;
  }
  
  /* Fix for card content across all screen sizes */
  .press-card,
  .service-tile,
  .benefit-card,
  .document-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .press-content-wrapper,
  .service-content,
  .benefit-card {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .press-excerpt,
  .service-description,
  .benefit-description {
    flex: 1;
  }
  
  /* Fix for form elements across all screen sizes */
  .form-control,
  .range-slider {
    width: 100%;
  }
  
  /* Fix for buttons across all screen sizes */
  .btn,
  .service-btn,
  .calculator-btn,
  .comparison-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }