/* =============================================
   MINIMAL CRITICAL FIXES ONLY
   Version: 1.0
   Description: Only fixes visibility and spacing without changing settings
   ============================================= */
/* =============================================
   1. TEXT COLOR FIXES - Make text visible
   ============================================= */
/* Fix white on white text issues */
.stat-item .stat-number {
  color: #1f2937 !important; /* Dark gray instead of white */
}
.stat-item .stat-label {
  color: #6b7280 !important; /* Medium gray instead of white */
}
.media-stats {
  background: #f9fafb !important; /* Light gray background */
}
.media-stats h2 {
  color: #1f2937 !important; /* Dark gray text */
}
/* Ensure filter and view buttons have contrast */
.filter-btn,
.view-btn {
  background: white !important;
  color: #4b5563 !important;
  border: 2px solid #d1d5db !important;
  transition: all 0.3s ease !important; /* Smooth transitions for dynamic feel */
}
.filter-btn:hover,
.view-btn:hover {
  background: #e5e7eb !important; /* Light gray on hover */
  transform: scale(1.05) !important; /* Slight scale-up on hover */
  cursor: pointer !important;
}
.filter-btn.active,
.view-btn.active {
  background: #667eea !important;
  color: white !important;
}
.filter-btn.active:hover,
.view-btn.active:hover {
  background: #5a67d8 !important; /* Darker shade on active hover */
}
/* Fix CTA visibility */
.media-cta {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
.media-cta h2,
.media-cta p {
  color: white !important;
}
/* =============================================
   2. PICTURE SPACING - Add gaps, constrain, and reduce image size
   ============================================= */
.gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; /* Smaller columns; adjust 200px if needed */
  gap: 20px !important;
  padding: 20px !important;
}
.gallery-grid img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}
/* =============================================
   3. MOBILE BUTTON SCROLLING - Make filter and view buttons scrollable
   ============================================= */
.filter-options,
.view-options {
  display: flex !important;
  gap: 10px !important; /* Space between buttons */
}
@media (max-width: 768px) {
  .media-filters .container {
    overflow: visible !important; /* Ensure parent doesn't clip scrolling */
  }
  .filter-options,
  .view-options {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    padding-bottom: 10px !important;
    scroll-snap-type: x mandatory !important; /* Smooth snapping to buttons */
  }
  .filter-btn,
  .view-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    scroll-snap-align: start !important; /* Align buttons when scrolling */
  }
}
/* =============================================
   4. ENSURE STATS GRID STAYS HORIZONTAL
   ============================================= */
.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* =============================================
   5. ENSURE CTA SECTION IS VISIBLE
   ============================================= */
.media-cta,
.contact-cta-section {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* =============================================
   MOBILE SCROLLABLE FILTER BUTTONS
   Version: 1.0
   Description: Makes filter buttons horizontally scrollable on mobile
   ============================================= */

/* =============================================
   MOBILE FILTER SCROLLING
   ============================================= */

/* Mobile and Tablet screens */
@media (max-width: 768px) {
  /* Filter options container - make scrollable */
  .filter-options {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Prevent wrapping */
    overflow-x: auto !important; /* Enable horizontal scroll */
    overflow-y: hidden !important;
    gap: 10px !important;
    padding: 15px !important;
    margin: 0 -15px !important; /* Extend to screen edges */
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth iOS scrolling */
    scroll-snap-type: x proximity !important; /* Optional snap scrolling */
  }
  
  /* Filter buttons - prevent shrinking */
  .filter-btn {
    flex: 0 0 auto !important; /* Don't shrink or grow */
    white-space: nowrap !important; /* Keep text on one line */
    min-width: fit-content !important;
    padding: 10px 18px !important;
    scroll-snap-align: start !important; /* Snap to start of each button */
  }
  
  /* View options - also make scrollable if needed */
  .view-options {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    justify-content: center !important;
    overflow-x: auto !important;
    padding: 10px !important;
  }
  
  .view-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  
  /* Hide scrollbar but keep functionality */
  .filter-options::-webkit-scrollbar,
  .view-options::-webkit-scrollbar {
    height: 4px;
  }
  
  .filter-options::-webkit-scrollbar-track,
  .view-options::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .filter-options::-webkit-scrollbar-thumb,
  .view-options::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }
  
  /* Visual indicator that scrolling is available */
  .media-filters {
    position: relative;
  }
  
  /* Add subtle shadows to indicate more content */
  .filter-options::before,
  .filter-options::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 1;
  }
  
  .filter-options::before {
    left: 0;
    background: linear-gradient(to right, white, transparent);
  }
  
  .filter-options::after {
    right: 0;
    background: linear-gradient(to left, white, transparent);
  }
  
  /* Ensure the container has proper spacing */
  .media-filters .container {
    padding: 0;
    overflow: hidden;
  }
}

/* Small mobile screens */
@media (max-width: 480px) {
  .filter-btn {
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
  
  .view-btn {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  
  .filter-options {
    gap: 8px !important;
    padding: 12px !important;
  }
}

/* =============================================
   MAINTAIN EXISTING COLORS
   ============================================= */

.filter-btn {
  background: white;
  color: #374151;
  border: 2px solid #d1d5db;
}

.filter-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

/* =============================================
   ENSURE STATS STAY HORIZONTAL
   ============================================= */

.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* 2x2 grid on mobile */
  }
}

/* =============================================
   ENSURE CTA IS VISIBLE
   ============================================= */

.media-cta,
.contact-cta-section {
  display: block !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60px 20px;
}

.media-cta h2 {
  color: white !important;
}

.media-cta p {
  color: rgba(255, 255, 255, 0.95) !important;
}