/*
 * block-group-layouts.css — CSS THẬT cho setting type `grid_layout` (SDK theme-page-editor, xem
 * lib/theme-page-editor/grid-layout/GridLayoutInput.tsx's GRID_LAYOUT_OPTIONS). SDK chỉ định nghĩa TÊN
 * class cố định (catalog dùng chung mọi theme) + thumbnail minh hoạ vẽ riêng trong editor — THEME
 * (file này) mới là nơi quyết định layout đó THỰC SỰ trông ra sao trên trang publish. Đổi số
 * cột/gap/breakpoint ở đây KHÔNG cần đổi gì phía SDK/editor.
 *
 * Áp dụng cho container bọc các NHÓM của section có `block_group` (vd `.cc-grid` của
 * sections/custom-content) — section.liquid gắn ĐỒNG THỜI class riêng của nó ('.cc-grid') VÀ 1
 * trong các class layout dưới đây (`{{ group_layout }}`). Breakpoint khớp `utility.css`
 * (md=768px, lg=1024px) để đồng bộ cảm giác responsive giữa 2 file.
 */

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-featured,
.grid-center {
  display: grid;
  gap: 1.5rem;
}

.grid-1 {
  grid-template-columns: minmax(0, 1fr);
}

.grid-2 {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.grid-3 {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.grid-4 {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Nhóm ĐẦU TIÊN chiếm trọn hàng (nổi bật) — hàng dưới TỐI ĐA 3 cột (khớp thumbnail
 * GridLayoutInput.tsx's preview 'featured': 1 hàng trên + 3 ô hàng dưới), NHƯNG ít hơn 3 nhóm còn
 * lại thì các nhóm đó phải TỰ GIÃN lấp đầy hàng — KHÔNG để trống ô như `repeat(3, ...)` cố định sẽ
 * làm. Kỹ thuật "RAM" (repeat/auto-fit/minmax) kinh điển: mốc tối thiểu mỗi track tính theo %
 * (`(100% - 2 gap)/3`, không phải px cố định như auto-fit thường thấy) → ép TRẦN đúng 3 cột dù màn
 * hình rộng bao nhiêu (auto-fit không thể nhét track thứ 4 vì mỗi track đã chiếm >= 1/3 bề rộng),
 * đồng thời khi số nhóm ít hơn số track vừa đủ, auto-fit COLLAPSE track thừa (không ai chiếm) về 0,
 * `1fr` của track còn lại tự giãn hết phần trống — đúng nghĩa "lấp đầy". `max(220px, ...)` chỉ là
 * sàn cho màn hẹp (dưới ~660px, tự co về 1-2 cột trước khi chạm breakpoint `lg`, xem `.grid-3`). */
.grid-featured {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .grid-featured {
    grid-template-columns: repeat(auto-fit, minmax(max(220px, calc((100% - 3rem) / 3)), 1fr));
  }
}
.grid-featured > *:first-child {
  grid-column: 1 / -1;
}

/* 1 cột, giới hạn bề rộng + căn giữa — hợp nội dung dạng văn bản dài, không cần trải hết chiều
 * ngang section. */
.grid-center {
  grid-template-columns: minmax(0, 1fr);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}