/* ======================
   GLOBAL GRID COMPONENT - RESPONSIVE DESIGN
   Based on defined breakpoint system
   Flexible and reusable across the application
   ====================== */

.grid {
  width: 100%;
  display: grid;
  box-sizing: border-box;
}

/* ======================
   VARIANT STYLES
   ====================== */

/* Equal columns - default behavior */
.grid.variant-equal {
  /* Mobile: 320px – 480px */
  grid-template-columns: repeat(var(--grid-columns-mobile, 1), 1fr);
  gap: var(--grid-gap-mobile, 20px);
}

/* Auto-fit columns - responsive without explicit breakpoints */
.grid.variant-auto {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--grid-gap-mobile, 20px);
}

/* Featured layout - first item larger */
.grid.variant-featured {
  grid-template-columns: 2fr 1fr;
  gap: var(--grid-gap-mobile, 20px);
}

/* Custom - fully customizable via CSS variables */
.grid.variant-custom {
  grid-template-columns: repeat(var(--grid-columns-mobile, 1), 1fr);
  gap: var(--grid-gap-mobile, 20px);
}

/* ======================
   RESPONSIVE BREAKPOINTS
   Following your defined breakpoint system
   ====================== */

/* Tablet: 481px – 1024px */
@media (min-width: 481px) and (max-width: 1024px) {
  .grid.variant-equal,
  .grid.variant-custom {
    grid-template-columns: repeat(var(--grid-columns-tablet, 1), 1fr);
    gap: var(--grid-gap-tablet, 24px);
  }
  
  .grid.variant-auto {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--grid-gap-tablet, 24px);
  }
  
  .grid.variant-featured {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--grid-gap-tablet, 24px);
  }
}

/* Laptop: 1025px – 1366px */
@media (min-width: 1025px) and (max-width: 1366px) {
  .grid.variant-equal,
  .grid.variant-custom {
    grid-template-columns: repeat(var(--grid-columns-laptop, 3), 1fr);
    gap: var(--grid-gap-laptop, 28px);
  }
  
  .grid.variant-auto {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--grid-gap-laptop, 28px);
  }
  
  .grid.variant-featured {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--grid-gap-laptop, 28px);
  }
}

/* Desktop: 1367px – 1920px */
@media (min-width: 1367px) and (max-width: 1920px) {
  .grid.variant-equal,
  .grid.variant-custom {
    grid-template-columns: repeat(var(--grid-columns-desktop, 3), 1fr);
    gap: var(--grid-gap-desktop, 32px);
  }
  
  .grid.variant-auto {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--grid-gap-desktop, 32px);
  }
  
  .grid.variant-featured {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--grid-gap-desktop, 32px);
  }
}

/* Large Desktop: 1921px+ */
@media (min-width: 1921px) {
  .grid.variant-equal,
  .grid.variant-custom {
    grid-template-columns: repeat(var(--grid-columns-large-desktop, 3), 1fr);
    gap: var(--grid-gap-large-desktop, 40px);
  }
  
  .grid.variant-auto {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--grid-gap-large-desktop, 40px);
  }
  
  .grid.variant-featured {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--grid-gap-large-desktop, 40px);
  }
}

/* ======================
   UTILITY MODIFIERS
   ====================== */

/* Dense grid for compact layouts */
.grid.dense {
  grid-auto-flow: dense;
}

/* Align items center */
.grid.items-center {
  align-items: center;
}

/* Justify items center */
.grid.justify-center {
  justify-items: center;
}

/* Full height grid */
.grid.full-height {
  min-height: 100%;
}