/* ============================================================================
 * UNIVERSAL RESPONSIVE CARD GRID SYSTEM
 * ============================================================================
 * 
 * SOLUTION: Explicit column counts with responsive breakpoints
 * - Desktop: Shows intended number of columns (2, 3, or 4)
 * - Tablet: Reduces to 2-3 columns
 * - Mobile: Stacks to 1 column
 * 
 * USAGE:
 * - .card-grid-4: 4 columns on desktop → 3 on large tablet → 2 on tablet → 1 on mobile
 * - .card-grid-3: 3 columns on desktop → 2 on tablet → 1 on mobile
 * - .card-grid-2: 2 columns on desktop → 1 on mobile
 * 
 * This approach fixes the issue where cards were stacking vertically on wide screens
 * ============================================================================
 */

/* ====================================
 * IMPORTANT: Override Tailwind grid-cols classes
 * ==================================== */
.grid-cols-1,
.card-grid-1 {
  display: grid !important;
  gap: 1.5rem;
  grid-template-columns: 1fr !important;
  width: 100%;
}

/* ====================================
 * 2 COLUMN GRID
 * Desktop: 2 cols → Mobile: 1 col
 * ==================================== */
.grid-cols-2,
.card-grid-2 {
  display: grid !important;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr) !important; /* Explicit 2 columns */
  width: 100%;
}

/* Support for align-items with grid-cols-2 */
.grid-cols-2.items-center {
  align-items: center;
}

/* ====================================
 * 3 COLUMN GRID
 * Desktop: 3 cols → Tablet: 2 cols → Mobile: 1 col
 * ==================================== */
.grid-cols-3,
.card-grid-3 {
  display: grid !important;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr) !important; /* Explicit 3 columns */
  width: 100%;
}

/* Support for text-center with grid-cols-3 */
.grid-cols-3.text-center > * {
  text-align: center;
}

/* ====================================
 * 4 COLUMN GRID (Most Common)
 * Desktop: 4 cols → Large Tablet: 3 cols → Tablet: 2 cols → Mobile: 1 col
 * ==================================== */
.grid-cols-4,
.card-grid-4 {
  display: grid !important;
  gap: 1.5rem;
  grid-template-columns: repeat(4, 1fr) !important; /* Explicit 4 columns */
  width: 100%;
}

/* ====================================
 * LEGACY SUPPORT - Universal Card Grids
 * Using auto-fit for backwards compatibility
 * ==================================== */
.universal-card-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  width: 100%;
}

.universal-card-grid-sm {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  width: 100%;
}

.universal-card-grid-lg {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  width: 100%;
}

/* ============================================================================
 * RESPONSIVE BREAKPOINTS
 * ============================================================================ */

/* ====================================
 * LARGE DESKTOP (> 1280px)
 * Default: Full column counts
 * ==================================== */
/* No media query needed - base styles apply */

/* ====================================
 * DESKTOP (1024px - 1280px)
 * 4 cols → 3 cols (keep others as is)
 * ==================================== */
@media screen and (max-width: 80rem) { /* 1280px */
  .grid-cols-4,
  .card-grid-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ====================================
 * TABLET (768px - 1024px)
 * 4 cols → 2 cols
 * 3 cols → 2 cols
 * ==================================== */
@media screen and (max-width: 64rem) { /* 1024px */
  .grid-cols-4,
  .card-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-cols-3,
  .card-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ====================================
 * SMALL TABLET (640px - 768px)
 * Keep 2 cols for 3-4 grids
 * 2 cols → 1 col
 * ==================================== */
@media screen and (max-width: 48rem) { /* 768px */
  .grid-cols-2,
  .card-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ====================================
 * MOBILE (< 640px)
 * All grids → 1 col
 * ==================================== */
@media screen and (max-width: 40rem) { /* 640px */
  .grid-cols-4,
  .grid-cols-3,
  .grid-cols-2,
  .card-grid-4,
  .card-grid-3,
  .card-grid-2,
  .universal-card-grid,
  .universal-card-grid-sm,
  .universal-card-grid-lg {
    grid-template-columns: 1fr !important;
  }
}

/* 
 * Flexbox 대체 솔루션 (필요시)
 * CSS Grid를 지원하지 않는 구형 브라우저용
 */
.flex-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 100%;
}

.flex-card-grid > * {
  flex: 1 1 280px;
  min-width: 280px;
  max-width: 100%;
}

@media (max-width: 640px) {
  .flex-card-grid > * {
    flex: 1 1 100%;
  }
}