/* ──────────────────────────────────────────────
   SIA Grid base — shared structural styles for ALL SIA grid listings
   (Variable Product Grid, Team Member Grid, Call to Action Grid). Each grid
   widget adds `.sia-grid` to its outer wrapper and `.sia-grid__list` to the
   inner grid container, alongside its own widget-specific class so older
   user CSS targeting `.sia-pg` / `.sia-tg` / `.sia-ctag` keeps working.

   Owned by this file:
   - Outer wrapper display
   - Grid layout + gap + responsive breakpoints (default values; Elementor
     responsive controls per widget override them with higher specificity)
   - Empty-state visual styling

   NOT owned here (stays per-module because it differs per widget):
   - Equal-height behavior (Team + CTA always ON; Variable Product has a
     toggle and an extra `.sia-pg__item` wrapper for align-items control)
   - AJAX pagination, load-more button, infinite-scroll sentinel, loading
     state — only Variable Product Grid has these
   ────────────────────────────────────────────── */

.sia-grid { display: block; }

.sia-grid__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.sia-grid__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.sia-grid__list { grid-template-columns: 1fr; }
}

/* Empty state — same look across every SIA grid. */
.sia-grid--empty {
	padding: 24px;
	text-align: center;
	color: #9ca3af;
	font-style: italic;
	border: 1px dashed #d1d5db;
	background: #f9fafb;
	border-radius: 12px;
}