/* ==========================================================================
   Card Grid — Responsive grid layout for card collections

   Two modes:
   - Auto-fit: wraps based on min card width (no media queries needed)
   - Fixed (2/3/4): explicit columns with responsive breakdowns

   Builder scaffolding uses display:contents so children are promoted to grid items.
   ========================================================================== */

/* ---------- Builder scaffolding: promote children to grid items ------------------- */
.card-grid > .brx-nestable-children-placeholder,
.card-grid > .brx-nestable-children {
  display: contents;
}

/* ---------- Base --------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: 2em;
  width: 100%;
  align-items: stretch;
}

/* Prevent grid blowout from children with long content */
.card-grid > * {
  min-width: 0;
}

/* ---------- Auto-fit mode ------------------------------------------------ */
.card-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ---------- Fixed column modes ------------------------------------------- */
.card-grid--cols-1 {
  grid-template-columns: 1fr;
}

.card-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.card-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ---------- Responsive: fixed column breakdowns -------------------------- */

/* Tablet (≤1279px): 4→3, 3→2 */
@media (max-width: 1279px) {
  .card-grid--cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }

  .card-grid--cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile landscape (≤767px): 4→2, 3→1, 2→1 */
@media (max-width: 767px) {
  .card-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid--cols-3,
  .card-grid--cols-2 {
    grid-template-columns: 1fr;
  }
}

/* Mobile portrait (≤478px): all fixed → 1 column, tighter gap */
@media (max-width: 478px) {
  .card-grid--cols-4,
  .card-grid--cols-3,
  .card-grid--cols-2 {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }
}