/* ===========================================================
 tonghopmahang — search-responsive.css
 SEARCH-6b: Responsive column layout for search results grid.

 Breakpoints (mobile-first):
   - <768px        : 1 column (mobile)
   - 768-1139.98px : 2 columns (tablet)
   - 1140-1450.98px: 3 columns with narrower right column
                     (1141-1450 overlap fix — see wireframe-1141-1450-right-column
                      memory: search panel Tìm overlaps right-column here)
   - >=1451px      : 3 equal columns (desktop)
 =========================================================== */

/* Base: 1 column (mobile-first) */
.search-results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Tablet: 2 columns (768-1139px) */
@media (min-width: 768px) and (max-width: 1139.98px) {
  .search-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop default: 3 columns (>=1140px) */
@media (min-width: 1140px) {
  .search-results-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Overlap zone: 1141-1450px viewport
   Avoid search panel Tìm overlap with right-column.
   Memory: wireframe-1141-1450-right-column.
   Keep 3 columns but reduce right-column width to prevent visual overlap.
   Override placed AFTER the desktop default to win the cascade. */
@media (min-width: 1141px) and (max-width: 1450.98px) {
  .search-results-grid {
    grid-template-columns: 1fr 1fr 0.85fr;
  }
}