/**
 * TechBBQ Program cards grid — centered title + Previous Projects card grid.
 *
 * Figma Previous Projects:
 * - 1440: node 5866:41401
 * - 1024: node 7356:70207
 * - 768:  node 7356:70563
 * - 375:  node 7356:70917
 *
 * Breakpoints (mobile-first): 0–767 (base), 768–1023, 1024–1439, 1440+.
 */

.techbbq-program-cards-grid {
	--techbbq-program-cards-grid-gap: var(--techbbq-space-1);
	--techbbq-program-cards-grid-inner-gap: 32px;
	--techbbq-program-cards-grid-columns: 1;

	box-sizing: border-box;
	width: 100%;
	color: var(--techbbq-content-primary);
	background-color: var(--techbbq-bg-main);
}

.techbbq-program-cards-grid__inner {
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-program-cards-grid-inner-gap);
	align-items: center;
	width: 100%;
}

.techbbq-program-cards-grid__header {
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-space-2);
	align-items: center;
	width: 100%;
	text-align: center;
}

.techbbq-program-cards-grid__title {
	margin: 0;
	width: 100%;
}

.techbbq-program-cards-grid__grid {
	display: grid;
	grid-template-columns: repeat(var(--techbbq-program-cards-grid-columns), minmax(0, 1fr));
	gap: var(--techbbq-program-cards-grid-gap);
	width: 100%;
}

/* ── Tablet (768–1023) ── */
@media (min-width: 768px) {
	.techbbq-program-cards-grid {
		--techbbq-program-cards-grid-columns: 2;
		--techbbq-program-cards-grid-inner-gap: 56px;
	}
}

/* ── Desktop (1024–1439) ── */
@media (min-width: 1024px) {
	.techbbq-program-cards-grid {
		--techbbq-program-cards-grid-columns: 3;
	}
}