/*!
 * CzarCommerce Grid — FASE 12.3
 * -----------------------------------------------------------------------------
 * Sistema de grid próprio baseado em CSS Grid nativo. Opt-in:
 *
 *   .czar-grid                container grid
 *   .czar-grid--cols-{1..6}   N colunas em desktop
 *   .czar-grid--auto-fit      auto-fit com min 16rem (responsivo automático)
 *   .czar-grid--auto-fit-sm   auto-fit com min 12rem
 *   .czar-grid--auto-fit-lg   auto-fit com min 20rem
 *   .czar-grid--gap-{sm,md,lg,xl}   espaçamento
 *
 * Breakpoints aplicados:
 *   <= 640px  (sm):  todas as variantes viram 1 coluna
 *   <= 960px  (md):  6/5/4 colunas viram 3; 3 cols mantém; 2 cols mantém
 *   > 960px:         valor declarado
 *
 * Sem container queries por enquanto (compat com browsers ainda em margin).
 * Quando bumpar baseline para 2024, refatorar pra @container.
 */

.czar-grid {
	display: grid;
	gap: var(--czar-space-5);
}

/* ---- Coluna fixa ---- */

.czar-grid--cols-1 { grid-template-columns: 1fr; }
.czar-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.czar-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.czar-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.czar-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.czar-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }

/* ---- Auto-fit (responsivo automático) ---- */

.czar-grid--auto-fit {
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.czar-grid--auto-fit-sm {
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.czar-grid--auto-fit-lg {
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

/* ---- Espaçamento ---- */

.czar-grid--gap-sm { gap: var(--czar-space-3); }
.czar-grid--gap-md { gap: var(--czar-space-5); }
.czar-grid--gap-lg { gap: var(--czar-space-8); }
.czar-grid--gap-xl { gap: var(--czar-space-12); }

/* ---- Span (item ocupa N colunas) ---- */

.czar-grid__item--span-2 { grid-column: span 2; }
.czar-grid__item--span-3 { grid-column: span 3; }
.czar-grid__item--span-full { grid-column: 1 / -1; }

/* ---- Breakpoint: tablet (<= 960px) ---- */

@media (max-width: 960px) {
	.czar-grid--cols-4,
	.czar-grid--cols-5,
	.czar-grid--cols-6 {
		grid-template-columns: repeat(3, 1fr);
	}
	.czar-grid__item--span-3 {
		grid-column: span 2;
	}
}

/* ---- Breakpoint: mobile (<= 640px) ---- */

@media (max-width: 640px) {
	.czar-grid--cols-2,
	.czar-grid--cols-3,
	.czar-grid--cols-4,
	.czar-grid--cols-5,
	.czar-grid--cols-6 {
		grid-template-columns: 1fr;
	}
	.czar-grid__item--span-2,
	.czar-grid__item--span-3 {
		grid-column: 1 / -1;
	}
}

/* ---- Flex helpers complementares ----
   Para usos simples (linha de items com gap) sem precisar criar grid. */

.czar-stack {
	display: flex;
	flex-direction: column;
	gap: var(--czar-space-4);
}

.czar-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--czar-space-3);
	align-items: center;
}

.czar-cluster--center { justify-content: center; }
.czar-cluster--between { justify-content: space-between; }