/* =================================================================
   CONDITIONS GRID - DYNAMIC CARD COUNT SUPPORT
   Add this to your style.css or include as separate file
   ================================================================= */

/* 
 * Grid layout based on number of cards (data-items-count attribute)
 * Desktop: 992px+
 * Tablet: 576px - 991px  
 * Mobile: < 576px
 */

/* ===== DESKTOP (992px+) ===== */
@media (min-width: 992px) {
  /* 1 card - centered */
  .conditions-grid[data-items-count="1"] {
    grid-template-columns: minmax(320px, 480px);
    justify-content: center;
  }
  
  /* 2 cards - 2 columns */
  .conditions-grid[data-items-count="2"] {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* 3 cards - 3 columns */
  .conditions-grid[data-items-count="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* 4 cards - 2x2 grid */
  .conditions-grid[data-items-count="4"] {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* 5 cards - 3+2 layout */
  .conditions-grid[data-items-count="5"] {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* 6 cards - 3x2 grid (default) */
  .conditions-grid[data-items-count="6"] {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* 7+ cards - 3 columns, wrapping */
  .conditions-grid[data-items-count="7"],
  .conditions-grid[data-items-count="8"],
  .conditions-grid[data-items-count="9"] {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* 10+ cards - 4 columns for better fit */
  .conditions-grid[data-items-count="10"],
  .conditions-grid[data-items-count="11"],
  .conditions-grid[data-items-count="12"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===== TABLET (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* 1 card - centered */
  .conditions-grid[data-items-count="1"] {
    grid-template-columns: minmax(280px, 400px);
    justify-content: center;
  }
  
  /* 2 cards - 2 columns */
  .conditions-grid[data-items-count="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* 3+ cards - 2 columns */
  .conditions-grid[data-items-count="3"],
  .conditions-grid[data-items-count="4"],
  .conditions-grid[data-items-count="5"],
  .conditions-grid[data-items-count="6"],
  .conditions-grid[data-items-count="7"],
  .conditions-grid[data-items-count="8"],
  .conditions-grid[data-items-count="9"],
  .conditions-grid[data-items-count="10"],
  .conditions-grid[data-items-count="11"],
  .conditions-grid[data-items-count="12"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== SMALL TABLET (576px - 767px) ===== */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* All counts - 2 columns */
  .conditions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* 1 card - centered single */
  .conditions-grid[data-items-count="1"] {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== MOBILE (< 576px) ===== */
@media (max-width: 575.98px) {
  /* All cards - single column on mobile */
  .conditions-grid,
  .conditions-grid[data-items-count="1"],
  .conditions-grid[data-items-count="2"],
  .conditions-grid[data-items-count="3"],
  .conditions-grid[data-items-count="4"],
  .conditions-grid[data-items-count="5"],
  .conditions-grid[data-items-count="6"] {
    grid-template-columns: 1fr;
  }
}

/* ===== CENTER LAST ROW ITEMS ===== */
/* For odd number of items on 2-column layouts */
@media (min-width: 992px) {
  /* 5 cards - center last 2 */
  .conditions-grid[data-items-count="5"] {
    justify-items: center;
  }
  
  .conditions-grid[data-items-count="5"] .condition-card:nth-child(4),
  .conditions-grid[data-items-count="5"] .condition-card:nth-child(5) {
    max-width: 100%;
  }
}

/* For 4 cards - ensure proper 2x2 centering */
@media (min-width: 992px) {
  .conditions-grid[data-items-count="4"] .condition-card {
    max-width: 100%;
  }
}