/* About Page Mobile Responsiveness Fix */

/* Make all grid sections responsive */
@media (max-width: 768px) {
  /* Mission Section */
  section [style*="grid-template-columns:1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center !important;
  }
  
  /* Story Section - reverse order on mobile */
  section:nth-of-type(2) [style*="grid-template-columns:1fr 1fr"] > div:first-child {
    order: 2;
  }
  
  section:nth-of-type(2) [style*="grid-template-columns:1fr 1fr"] > div:last-child {
    order: 1;
  }
  
  /* Timeline Section Mobile Fix - Vertical Timeline */
  section [style*="display:grid;gap:3rem"] {
    max-width: 100% !important;
    position: relative !important;
  }
  
  /* Add vertical timeline line */
  section [style*="display:grid;gap:3rem"]::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--primary), #ccc);
    z-index: 1;
  }
  
  /* Timeline individual milestone containers */
  section [style*="display:grid;gap:3rem"] > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    margin-bottom: 3rem !important;
    margin-left: 60px !important;
    padding: 1rem !important;
    background: rgba(255,255,255,0.8) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }
  
  /* Timeline dot indicator */
  section [style*="display:grid;gap:3rem"] > div[style*="grid-template-columns"]::before {
    content: '';
    position: absolute;
    left: -42px;
    top: 1rem;
    width: 12px;
    height: 12px;
    background: var(--primary);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 2;
  }
  
  /* Timeline images */
  section [style*="display:grid;gap:3rem"] img[style*="height:250px"] {
    height: 150px !important;
    margin: 0 0 1rem 0 !important;
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0.5rem !important;
    order: 2 !important;
  }
  
  /* Timeline year badge */
  section [style*="display:grid;gap:3rem"] div[style*="background:var(--primary)"] {
    align-self: flex-start !important;
    margin-bottom: 0.5rem !important;
    order: 1 !important;
  }
  
  /* Timeline title */
  section [style*="display:grid;gap:3rem"] h3 {
    order: 3 !important;
    margin: 0.5rem 0 !important;
  }
  
  /* Timeline description */
  section [style*="display:grid;gap:3rem"] p {
    order: 4 !important;
    margin: 0 !important;
  }
  
  /* Timeline text content - left aligned for reading */
  section [style*="display:grid;gap:3rem"] div[style*="text-align"] {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Team Preview Grid */
  section [style*="grid-template-columns:repeat(auto-fit,minmax(350px,1fr))"] {
    grid-template-columns: 1fr !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }
  
  /* Facilities Grid */
  section [style*="grid-template-columns:repeat(auto-fit,minmax(350px,1fr))"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Values Grid */
  section [style*="grid-template-columns:repeat(auto-fit,minmax(250px,1fr))"] {
    grid-template-columns: 1fr !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }
  
  /* Gallery Grid */
  section [style*="grid-template-columns:repeat(auto-fill,minmax(300px,1fr))"] {
    grid-template-columns: 1fr !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }
  
  /* Text sizing adjustments */
  section h2[style*="font-size:2.5rem"] {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
  }
  
  section p[style*="font-size:1.1rem"] {
    font-size: 1rem !important;
  }
  
  /* Image height adjustments */
  section img[style*="height:400px"] {
    height: 250px !important;
  }
  
  section img[style*="height:350px"] {
    height: 220px !important;
  }
  
  section img[style*="height:250px"] {
    height: 200px !important;
  }
  
  /* Section padding adjustments */
  section[style*="padding:4rem 0"] {
    padding: 2rem 0 !important;
  }
}

@media (max-width: 480px) {
  /* Even tighter spacing on small phones */
  section [style*="grid-template-columns:1fr 1fr"] {
    gap: 1.5rem !important;
  }
  
  section h2[style*="font-size:2.5rem"] {
    font-size: 1.8rem !important;
  }
  
  section img[style*="height:400px"] {
    height: 200px !important;
  }
  
  section img[style*="height:350px"] {
    height: 180px !important;
  }
  
  section[style*="padding:4rem 0"] {
    padding: 1.5rem 0 !important;
  }
  
  /* Container padding */
  .container {
    padding: 0 1rem !important;
  }
}