/**
 * TechBBQ Cards with gradient background — centered intro + cards with PNG glow.
 *
 * Figma Startups "Find the Right Program for Your Startup":
 * - 1440: 7136:46131
 * - 1024: 7141:66970
 * - 768:  7156:68054
 * - 375:  7157:70150
 *
 * Breakpoints (mobile-first): 0–767 (base), 768–1023, 1024–1439, 1440+.
 */

.techbbq-cards-with-gradient-background {
	--techbbq-cards-gradient-gap: var(--techbbq-space-4);
	--techbbq-cards-gradient-header-gap: var(--techbbq-space-1);
	--techbbq-cards-gradient-intro-gap: var(--techbbq-space-sm);
	--techbbq-cards-gradient-title-size: var(--techbbq-text-h3-size);
	--techbbq-cards-gradient-desc-size: var(--techbbq-text-paragraph-m-size);
	--techbbq-cards-gradient-desc-max-width: 576px;
	--techbbq-cards-gradient-card-gap: var(--techbbq-space-1);
	--techbbq-cards-gradient-card-height: 260px;
	--techbbq-cards-gradient-card-title-size: 20px;
	--techbbq-cards-gradient-dot-size: 12px;
	--techbbq-cards-gradient-body-gap: var(--techbbq-space-1);

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--techbbq-cards-gradient-gap);
	width: 100%;
	color: var(--techbbq-content-primary);
	background-color: var(--techbbq-bg-main);
}

.techbbq-cards-with-gradient-background__header,
.techbbq-cards-with-gradient-background__grid {
	width: 100%;
}

.techbbq-cards-with-gradient-background__header {
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-cards-gradient-header-gap);
	align-items: center;
	text-align: center;
}

.techbbq-cards-with-gradient-background__intro {
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-cards-gradient-intro-gap);
	align-items: center;
	width: 100%;
}

.techbbq-cards-with-gradient-background__title {
	margin: 0;
	font-size: var(--techbbq-cards-gradient-title-size);
}

.techbbq-cards-with-gradient-background__description {
	max-width: var(--techbbq-cards-gradient-desc-max-width);
	margin: 0;
	font-size: var(--techbbq-cards-gradient-desc-size);
	line-height: var(--techbbq-text-paragraph-line-height);
	color: var(--techbbq-content-secondary);
}

.techbbq-cards-with-gradient-background__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--techbbq-cards-gradient-card-gap);
}

.techbbq-cards-with-gradient-background__card {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: var(--techbbq-cards-gradient-card-height);
	padding: 20px;
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--techbbq-bg-surface);
}

.techbbq-cards-with-gradient-background__card-background {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.techbbq-cards-with-gradient-background__card-background-image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.techbbq-cards-with-gradient-background__icon {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: 4px;
}

.techbbq-cards-with-gradient-background__icon-image {
	display: block;
	width: 32px;
	height: 32px;
}

.techbbq-cards-with-gradient-background__card-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-cards-gradient-body-gap);
	align-items: flex-start;
	width: 100%;
}

.techbbq-cards-with-gradient-background__title-row {
	display: flex;
	gap: var(--techbbq-space-1);
	align-items: center;
	width: 100%;
}

.techbbq-cards-with-gradient-background__dot {
	flex-shrink: 0;
	width: var(--techbbq-cards-gradient-dot-size);
	height: var(--techbbq-cards-gradient-dot-size);
	border-radius: 50%;
	background-color: var(--techbbq-cards-gradient-dot-color, var(--techbbq-content-accent-1));
}

.techbbq-cards-with-gradient-background__card-title {
	margin: 0;
	font-size: var(--techbbq-cards-gradient-card-title-size);
	line-height: var(--techbbq-text-h5-line-height);
	letter-spacing: var(--techbbq-text-h5-letter-spacing);
}

.techbbq-cards-with-gradient-background__card-text {
	margin: 0;
	opacity: 0.4;
}

/* ── Tablet (768–1023) ── */
@media (min-width: 768px) {
	.techbbq-cards-with-gradient-background {
		--techbbq-cards-gradient-gap: var(--techbbq-space-7);
		--techbbq-cards-gradient-header-gap: var(--techbbq-space-3);
		--techbbq-cards-gradient-desc-size: 20px; /* 768/Paragraph/L */
		--techbbq-cards-gradient-card-title-size: var(--techbbq-text-h5-size);
		--techbbq-cards-gradient-dot-size: 16px;
		--techbbq-cards-gradient-body-gap: var(--techbbq-space-2);
	}
}

/* ── Desktop (1024–1439) ── */
@media (min-width: 1024px) {
	.techbbq-cards-with-gradient-background {
		--techbbq-cards-gradient-title-size: 44px; /* 1024/Heading/H3 */
		--techbbq-cards-gradient-desc-size: var(--techbbq-text-paragraph-l-size);
		--techbbq-cards-gradient-card-height: 256px;
	}

	.techbbq-cards-with-gradient-background__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.techbbq-cards-with-gradient-background__description {
		max-width: 660px;
	}
}

/* ── Wide screen (1440+) ── */
@media (min-width: 1440px) {
	.techbbq-cards-with-gradient-background {
		--techbbq-cards-gradient-title-size: 48px;
	}
}