/* 
 * assets/css/responsive.css 
 * Comprehensive Mobile Responsiveness for Pangene Biotech
 */

/* ==========================================================================
   Tablets and Smaller (max-width: 992px)
   ========================================================================== */
@media (max-width: 992px) {
  /* Typography */
  h1 { font-size: 2.2rem !important; }
  h2 { font-size: 1.8rem !important; }
  
  /* Sections */
  .section, .py-20 { padding-top: 50px !important; padding-bottom: 50px !important; }
  .py-16 { padding-top: 40px !important; padding-bottom: 40px !important; }
  
  /* Layouts */
  .container { padding-left: 20px; padding-right: 20px; }
  
  /* Hero Specific (if any flex layouts are too wide) */
  .hero-content {
      padding: 0 15px;
  }
}

/* ==========================================================================
   Mobile Devices (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Typography */
  h1 { font-size: 1.8rem !important; line-height: 1.3 !important; }
  h2 { font-size: 1.5rem !important; line-height: 1.3 !important; }
  h3 { font-size: 1.25rem !important; }
  p { font-size: 14px !important; line-height: 1.5 !important; }
  
  /* Flex & Grid overrides */
  .flex { flex-direction: column !important; align-items: flex-start !important; }
  /* Exception for header/logo area which needs to stay horizontal */
  .header .container.flex, 
  .header-transparent .container.flex,
  header .container.flex {
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
  }
  
  .topbar {
      display: none !important; /* Hide topbar entirely on small screens */
  }
  
  .header-right-actions {
      display: none !important; /* Hide extra CTA in header on mobile */
  }
  
  /* General Flex overrides */
  .items-center { align-items: flex-start !important; }
  .justify-between { justify-content: flex-start !important; gap: 15px; }
  .gap-8, .gap-12 { gap: 20px !important; }
  
  /* Grid overrides */
  .grid, .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5 {
      grid-template-columns: 1fr !important;
      gap: 20px !important;
  }
  
  /* Custom Image Widths on mobile (e.g. Hero images, about images) */
  img { max-width: 100% !important; height: auto !important; }
  .w-1\/2 { width: 100% !important; }
  .w-1\/3 { width: 100% !important; }
  .w-2\/3 { width: 100% !important; }
  .w-1\/4 { width: 100% !important; }
  .w-3\/4 { width: 100% !important; }
  
  /* Specific Components */
  /* Hero padding */
  .hero-section, .about-hero, .cert-hero, .contact-hero, .ge-hero, .mfg-hero, .products-hero, .hero {
      padding-top: 100px !important; 
      padding-bottom: 60px !important;
      text-align: center;
  }
  .hero-section .flex {
      align-items: center !important; /* Center hero content on mobile */
  }
  .hero-buttons {
      flex-direction: column !important;
      width: 100%;
      gap: 10px;
  }
  .hero-buttons .btn {
      width: 100%;
  }
  
  /* RFQ / Modals */
  .modal-content {
      width: 95% !important;
      margin: 10px;
      max-height: 90vh;
      overflow-y: auto;
  }
  
  .modal-body {
      padding: 15px !important;
  }
  
  .modal-header {
      padding: 15px !important;
  }
  
  /* Footer */
  .footer {
      padding-top: 40px !important;
      text-align: center;
  }
  .footer .flex {
      align-items: center !important;
  }
  .footer-bottom .flex {
      flex-direction: column !important;
      text-align: center;
      gap: 15px;
  }
  
  /* Product Cards & Catalog */
  .product-card {
      margin-bottom: 15px;
  }
  .product-image {
      height: 200px !important; /* Reduce image height on mobile */
  }
  
  /* Contact Layout */
  .contact-layout {
      flex-direction: column !important;
  }
  .contact-info, .contact-form {
      width: 100% !important;
      padding: 20px !important;
  }
  
  /* Certifications */
  .cert-card {
      padding: 20px !important;
      text-align: center;
  }
  .cert-card .flex {
      align-items: center !important;
  }
  
  /* Manufacturing Section */
  .mfg-image-container, .mfg-text-container {
      width: 100% !important;
  }
  .mfg-stats {
      grid-template-columns: 1fr 1fr !important; /* 2 stats per row on mobile */
  }
}

/* ==========================================================================
   Extra Small Devices (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
  .mfg-stats {
      grid-template-columns: 1fr !important; /* 1 stat per row on very small screens */
  }
  
  .btn {
      padding: 10px 15px !important;
      font-size: 13px !important;
  }
  
  .form-control {
      padding: 8px 10px !important;
      font-size: 13px !important;
  }
}

/* Fix for long words in titles overflowing */
@media (max-width: 768px) {
  h1, h2, h3, .ah-title, .ch-title, .ge-title, .mh-title, .ph-title, .hero-title {
    font-size: 2rem !important; /* Force smaller size for component-specific titles */
    word-break: break-word !important; /* Prevent long words like "Pharmaceutical" from overflowing */
    hyphens: auto !important;
  }
}

@media (max-width: 480px) {
  h1, h2, h3, .ah-title, .ch-title, .ge-title, .mh-title, .ph-title, .hero-title {
    font-size: 1.6rem !important; 
  }
}

/* Footer Mobile Grid (2 Columns) */
@media (max-width: 768px) {
  .site-footer .grid-cols-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    text-align: left !important;
  }
  
  .site-footer .grid-cols-5 > div:first-child,
  .site-footer .grid-cols-5 > div:last-child {
    grid-column: span 2 !important; /* Make the first (Logo/Social) and last (Newsletter/Contact) span full width for better layout */
  }
  
  .footer .flex {
      align-items: flex-start !important; /* reset alignment since we changed footer to 2 col */
  }
}