/* ==========================================================================
   THE WATER PROJECT DESIGN SYSTEM 2025 - GRID COMPONENTS
   ========================================================================== */

/* 
 * Grid system extracted from 2025 redesigned pages
 * Provides responsive grid layouts with consistent spacing
 * and intelligent breakpoint behavior.
 */

/* ========================================
   BASE GRID SYSTEM
   ======================================== */

.motif-2025 .grid {
  display: grid;
  gap: var(--space-2xl);
  width: 100%;
}

/* ========================================
   FIXED COLUMN GRIDS
   ======================================== */

/* 2 Column Grid */
.motif-2025 .grid--2-col {
  grid-template-columns: repeat(2, 1fr);
}

/* 3 Column Grid */
.motif-2025 .grid--3-col {
  grid-template-columns: repeat(3, 1fr);
}

/* 4 Column Grid */
.motif-2025 .grid--4-col {
  grid-template-columns: repeat(4, 1fr);
}

/* 5 Column Grid */
.motif-2025 .grid--5-col {
  grid-template-columns: repeat(5, 1fr);
}

/* 6 Column Grid */
.motif-2025 .grid--6-col {
  grid-template-columns: repeat(6, 1fr);
}

/* ========================================
   AUTO-FIT GRIDS
   Responsive grids that adapt based on content
   ======================================== */

.motif-2025 .grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.motif-2025 .grid--auto-fit-sm {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.motif-2025 .grid--auto-fit-lg {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.motif-2025 .grid--auto-fit-xl {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

/* ========================================
   SPECIALIZED GRID PATTERNS
   ======================================== */

/* Leadership Grid - Optimized for bio cards */
.motif-2025 .grid--leadership {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-2xl);
}

@media (min-width: 1280px) {
  .motif-2025 .grid--leadership {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Sponsorship Grid - Equal height cards */
.motif-2025 .grid--sponsorship {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-2xl);
  align-items: stretch;
}

/* Impact Stats Grid - Number displays */
.motif-2025 .grid--impact-stats {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

/* Navigation Grid - Section navigation */
.motif-2025 .grid--nav {
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-lg);
}

/* Project Types Grid - Technology showcase */
.motif-2025 .grid--project-types {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2xl);
}

/* Blog Cards Grid - Content showcase */
.motif-2025 .grid--blog-cards {
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  align-items: stretch;
}

/* ========================================
   GAP VARIATIONS
   ======================================== */

.motif-2025 .grid--gap-xs { gap: var(--space-xs); }
.motif-2025 .grid--gap-sm { gap: var(--space-sm); }
.motif-2025 .grid--gap-md { gap: var(--space-md); }
.motif-2025 .grid--gap-lg { gap: var(--space-lg); }
.motif-2025 .grid--gap-xl { gap: var(--space-xl); }
.motif-2025 .grid--gap-2xl { gap: var(--space-2xl); }
.motif-2025 .grid--gap-3xl { gap: var(--space-3xl); }

/* Gap utility classes without grid prefix */
.motif-2025 .gap-xs { gap: var(--space-xs) !important; }
.motif-2025 .gap-sm { gap: var(--space-sm) !important; }
.motif-2025 .gap-md { gap: var(--space-md) !important; }
.motif-2025 .gap-lg { gap: var(--space-lg) !important; }
.motif-2025 .gap-xl { gap: var(--space-xl) !important; }
.motif-2025 .gap-2xl { gap: var(--space-2xl) !important; }
.motif-2025 .gap-3xl { gap: var(--space-3xl) !important; }

/* ========================================
   ALIGNMENT OPTIONS
   ======================================== */

.motif-2025 .grid--items-start { align-items: start; }
.motif-2025 .grid--items-center { align-items: center; }
.motif-2025 .grid--items-end { align-items: end; }
.motif-2025 .grid--items-stretch { align-items: stretch; }

.motif-2025 .grid--justify-start { justify-content: start; }
.motif-2025 .grid--justify-center { justify-content: center; }
.motif-2025 .grid--justify-end { justify-content: end; }

/* ========================================
   RESPONSIVE BREAKPOINT BEHAVIOR
   ======================================== */

/* Tablet breakpoint (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .motif-2025 .grid--4-col,
  .motif-2025 .grid--5-col,
  .motif-2025 .grid--6-col {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .motif-2025 .grid--3-col {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .motif-2025 .grid--impact-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .motif-2025 .grid--nav {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .motif-2025 .grid--blog-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
}

/* Mobile breakpoint (max-width: 767px) */
@media (max-width: 767px) {
  .motif-2025 .grid {
    gap: var(--space-lg); /* Tighter gaps on mobile */
  }
  
  /* Most grids become single column on mobile */
  .motif-2025 .grid--2-col,
  .motif-2025 .grid--3-col,
  .motif-2025 .grid--4-col,
  .motif-2025 .grid--5-col,
  .motif-2025 .grid--6-col {
    grid-template-columns: 1fr;
  }
  
  /* Some grids maintain 2 columns on mobile for better space usage */
  .motif-2025 .grid--impact-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  
  .motif-2025 .grid--nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
  
  .motif-2025 .grid--blog-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
  
  /* Auto-fit grids adjust their min-width on mobile */
  .motif-2025 .grid--auto-fit {
    grid-template-columns: 1fr;
  }
  
  .motif-2025 .grid--auto-fit-sm {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, calc(100% - 40px)), 1fr)); /* Prevent overflow */
  }
  
  .motif-2025 .grid--leadership {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* Small mobile breakpoint (max-width: 480px) */
@media (max-width: 480px) {
  .motif-2025 .grid {
    gap: var(--space-md);
  }
  
  /* Force single column for very small screens */
  .motif-2025 .grid--impact-stats,
  .motif-2025 .grid--nav,
  .motif-2025 .grid--blog-cards {
    grid-template-columns: 1fr;
  }
  
  .motif-2025 .grid--nav {
    gap: var(--space-xs);
  }
}

/* Large screen optimizations (min-width: 1200px) */
@media (min-width: 1200px) {
  /* Some grids can expand on very large screens */
  .motif-2025 .grid--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
  
  .motif-2025 .grid--impact-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ========================================
   SPECIAL LAYOUT PATTERNS
   ======================================== */

/* Masonry-style grid for varied content heights */
.motif-2025 .grid--masonry {
  grid-template-rows: masonry; /* Future CSS feature */
  align-items: start;
}

/* Fallback for browsers without masonry support */
@supports not (grid-template-rows: masonry) {
  .motif-2025 .grid--masonry {
    /* Use flexbox fallback or maintain regular grid */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  
  .motif-2025 .grid--masonry > * {
    flex: 1 1 300px;
    margin-bottom: var(--space-lg);
  }
}

/* Featured grid item - spans multiple columns */
.motif-2025 .grid__item--featured {
  grid-column: span 2;
}

@media (max-width: 767px) {
  .motif-2025 .grid__item--featured {
    grid-column: span 1;
  }
}

/* ========================================
   GRID CONTAINERS
   ======================================== */

/* Full-width grid containers */
.motif-2025 .grid-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-x);
}

@media (max-width: 767px) {
  .motif-2025 .grid-container {
    padding: 0 var(--container-padding-x-mobile);
  }
}

/* Centered grid content */
.motif-2025 .grid-content {
  max-width: 1000px; /* Slightly narrower for better readability */
  margin: 0 auto;
}

/* ========================================
   ANIMATION PATTERNS
   ======================================== */

/* Staggered animation for grid items */
.motif-2025 .grid--animate .card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s var(--ease-out) forwards;
}

.motif-2025 .grid--animate .card:nth-child(1) { animation-delay: 0.1s; }
.motif-2025 .grid--animate .card:nth-child(2) { animation-delay: 0.2s; }
.motif-2025 .grid--animate .card:nth-child(3) { animation-delay: 0.3s; }
.motif-2025 .grid--animate .card:nth-child(4) { animation-delay: 0.4s; }
.motif-2025 .grid--animate .card:nth-child(5) { animation-delay: 0.5s; }
.motif-2025 .grid--animate .card:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Disable animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .motif-2025 .grid--animate .card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Apply containment to grid containers */
.motif-2025 .grid {
  contain: layout style;
}

/* Optimize frequently scrolled grids */
.motif-2025 .grid--scrollable {
  contain: layout style paint;
  will-change: scroll-position;
}

/* GPU acceleration for animated grids */
.motif-2025 .grid--animated {
  transform: translateZ(0);
  backface-visibility: hidden;
}