/**
 * VEFS Foundation - Mobile Responsive Overrides
 *
 * This file contains responsive adjustments for mobile devices
 * to improve readability and layout on small screens.
 */

/* ============================================
   MOBILE TYPOGRAPHY ADJUSTMENTS
   ============================================ */

/* Mobile Breakpoint: 640px and below */
@media (max-width: 640px) {

  /* Base body text - slightly smaller on mobile */
  body {
    font-size: 15px; /* Down from 16px */
    line-height: 1.6;
  }

  /* Headings - significantly reduced for mobile */
  h1 {
    font-size: 1.75rem !important; /* 28px - down from 47.8px */
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }

  h2 {
    font-size: 1.5rem !important; /* 24px - down from 33.2px */
    line-height: 1.3 !important;
    margin-bottom: 0.875rem !important;
  }

  h3 {
    font-size: 1.25rem !important; /* 20px - down from 27.6px */
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
  }

  h4 {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.4 !important;
  }

  h5, h6 {
    font-size: 1rem !important; /* 16px */
    line-height: 1.5 !important;
  }

  /* Paragraph text adjustments */
  p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
  }

  /* Large text - reduce size */
  .text-lg,
  p[style*="font-size: var(--font-size-lg)"] {
    font-size: 17px !important; /* Down from 23px */
  }

  /* Extra large text - reduce dramatically */
  .text-xl,
  p[style*="font-size: var(--font-size-xl)"] {
    font-size: 20px !important; /* Down from 27.6px */
  }
}

/* ============================================
   MOBILE SPACING ADJUSTMENTS
   ============================================ */

@media (max-width: 640px) {

  /* Section padding - reduce for mobile */
  .section-py {
    padding-top: 2rem !important; /* Down from 4rem */
    padding-bottom: 2rem !important;
  }

  /* Container padding */
  .container {
    padding-left: 1rem !important; /* Down from 1.5rem */
    padding-right: 1rem !important;
  }

  /* Card padding - reduce significantly */
  .card {
    padding: 1rem !important; /* Down from 1.5rem */
  }

  /* Large card padding override */
  .card[style*="padding: var(--space-2xl)"],
  .card[style*="padding: var(--space-xl)"] {
    padding: 1.25rem !important; /* Down from 48px or 32px */
  }

  /* Gap adjustments */
  [style*="gap: var(--space-3xl)"] {
    gap: 1.5rem !important; /* Down from 64px */
  }

  [style*="gap: var(--space-2xl)"] {
    gap: 1.25rem !important; /* Down from 48px */
  }

  [style*="gap: var(--space-xl)"] {
    gap: 1rem !important; /* Down from 32px */
  }

  /* Emoji sizes - reduce for mobile */
  [style*="font-size: 4rem"] {
    font-size: 2.5rem !important; /* Down from 4rem (64px to 40px) */
  }

  [style*="font-size: 3rem"] {
    font-size: 2rem !important; /* Down from 3rem */
  }
}

/* ============================================
   GRID RESPONSIVE FIXES
   ============================================ */

@media (max-width: 640px) {

  /* All 2-column grids become 1 column on mobile */
  .grid-cols-2,
  .grid[class*="grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }

  /* All 3-column grids become 1 column on mobile */
  .grid-cols-3,
  .grid[class*="grid-cols-3"] {
    grid-template-columns: 1fr !important;
  }

  /* All 4-column grids become 2 columns on mobile */
  .grid-cols-4,
  .grid[class*="grid-cols-4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Tablet breakpoint: 641px to 1024px */
@media (min-width: 641px) and (max-width: 1024px) {

  /* 3-column grids become 2 columns on tablet */
  .grid-cols-3,
  .grid[class*="grid-cols-3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 4-column grids become 2 columns on tablet */
  .grid-cols-4,
  .grid[class*="grid-cols-4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================
   MISSION & VISION SECTION FIX
   ============================================ */

@media (max-width: 640px) {

  /* Mission/Vision cards - stack vertically on mobile */
  .mission-vision-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
}

/* ============================================
   FUTURE PLANS TIMELINE FIX
   ============================================ */

@media (max-width: 640px) {

  /* Timeline container adjustments */
  .timeline-container {
    padding-left: 0 !important;
  }

  /* Hide vertical timeline line on mobile */
  .timeline-line {
    display: none !important;
  }

  /* Timeline items - simplified layout */
  .timeline-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding-left: 0 !important;
  }

  /* Year badge - full width on mobile */
  .timeline-year {
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 0.5rem !important;
  }

  /* Timeline dot - smaller on mobile */
  .timeline-dot {
    width: 12px !important;
    height: 12px !important;
    position: relative !important;
    left: 0 !important;
  }

  /* Timeline content card */
  .timeline-card {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ============================================
   STATS/METRICS RESPONSIVE
   ============================================ */

@media (max-width: 640px) {

  /* Stats grid - single column on mobile */
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  /* Stat card adjustments */
  .stat-card {
    text-align: center !important;
    padding: 1rem !important;
  }

  /* Large stat numbers - reduce size on mobile */
  .stat-number {
    font-size: 2rem !important; /* Down from 3rem or larger */
  }
}

/* ============================================
   BUTTON & CTA ADJUSTMENTS
   ============================================ */

@media (max-width: 640px) {

  /* Buttons - full width on mobile for better touch targets */
  .btn-primary,
  .btn-secondary {
    width: 100%;
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem !important;
  }

  /* Button groups - stack vertically */
  .button-group {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
}

/* ============================================
   IMAGE & MEDIA RESPONSIVE
   ============================================ */

@media (max-width: 640px) {

  /* All images responsive */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Hero images - maintain aspect ratio */
  .hero-image,
  [style*="background-image"] {
    min-height: 200px !important; /* Down from larger values */
    background-size: cover !important;
    background-position: center !important;
  }
}

/* ============================================
   TABLE RESPONSIVE
   ============================================ */

@media (max-width: 640px) {

  /* Tables - enable horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Table cells - reduce padding */
  td, th {
    padding: 0.5rem !important;
    font-size: 14px !important;
  }
}

/* ============================================
   UTILITY OVERRIDES FOR MOBILE
   ============================================ */

@media (max-width: 640px) {

  /* Text alignment - center on mobile for better readability */
  .mobile-text-center {
    text-align: center !important;
  }

  /* Hide on mobile */
  .hide-mobile {
    display: none !important;
  }

  /* Show only on mobile */
  .show-mobile {
    display: block !important;
  }

  /* Reduce margin/padding utilities */
  .m-auto {
    margin: 0 auto !important;
  }

  /* Max width adjustments */
  [style*="max-width: 900px"],
  [style*="max-width: 800px"] {
    max-width: 100% !important;
  }
}