/**
 * TechBBQ Logo Grid Section — static logo cards in a responsive grid.
 *
 * Figma cardLogo component: 1689:7908 (size S), 1579:1145 (size L).
 * Figma North Star Pitch Finalists:
 * - 375: 7164:72200 (grid 7166:77069)
 * - 768: 7164:71967 (grid 7165:75188)
 * - 1024: 7164:71732 (grid 7164:73486)
 * - 1440: 7164:70753 (grid 7164:70755)
 *
 * Section vertical spacing lives on the Elementor wrapper container.
 *
 * Breakpoints (mobile-first): 0–767, 768–1023, 1024–1439, 1440+.
 */

.techbbq-logo-grid-section {
	--techbbq-logo-grid-section-gap: var(--techbbq-space-7);
	--techbbq-logo-grid-card-height: 80px;
	--techbbq-logo-grid-card-padding: var(--techbbq-space-2);
	--techbbq-logo-grid-card-radius: 12px;
	--techbbq-logo-grid-logo-height: 32px;

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

.techbbq-logo-grid-section__header {
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-space-3);
	align-items: center;
	width: 100%;
	text-align: center;
}

.techbbq-logo-grid-section__title {
	margin: 0;
}

.techbbq-logo-grid-section__description {
	max-width: 660px;
	margin: 0;
	color: var(--techbbq-content-secondary);
	text-align: center;
}

.techbbq-logo-grid-section__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--techbbq-space-1);
	width: 100%;
}

.techbbq-logo-grid-section__card {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--techbbq-logo-grid-card-height);
	min-height: var(--techbbq-logo-grid-card-height);
	max-height: var(--techbbq-logo-grid-card-height);
	padding: var(--techbbq-logo-grid-card-padding);
	overflow: hidden;
	border-radius: var(--techbbq-logo-grid-card-radius);
	background-color: var(--techbbq-bg-surface);
}

a.techbbq-logo-grid-section__card {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

a.techbbq-logo-grid-section__card:focus-visible {
	outline: 2px solid var(--techbbq-content-accent-1);
	outline-offset: 2px;
}

/* Scope beats Elementor `.elementor img { height: auto; }`. */
.techbbq-logo-grid-section .techbbq-logo-grid-section__logo {
	display: block;
	flex-shrink: 0;
	width: auto;
	max-width: 100%;
	height: var(--techbbq-logo-grid-logo-height);
	max-height: var(--techbbq-logo-grid-logo-height);
	object-fit: contain;
}

/* ── Tablet (768–1023) ──────────────────────────────────────── */
@media (min-width: 768px) {
	.techbbq-logo-grid-section {
		--techbbq-logo-grid-card-height: 104px;
		--techbbq-logo-grid-logo-height: 40px;
	}

	.techbbq-logo-grid-section__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ── Desktop (1024–1439) ──────────────────────────────────────── */
@media (min-width: 1024px) {
	.techbbq-logo-grid-section__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ── Categorized layout (Life Science participated startups) ── */

.techbbq-logo-grid-section--categorized {
	--techbbq-logo-grid-logo-height: 48px;
}

.techbbq-logo-grid-section__categories {
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-space-7);
	align-items: stretch;
	width: 100%;
}

.techbbq-logo-grid-section__category {
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-space-3);
	align-items: flex-start;
	width: 100%;
}

.techbbq-logo-grid-section--categorized .techbbq-logo-grid-section__grid {
	width: 100%;
}

.techbbq-logo-grid-section__grid--large {
	--techbbq-logo-grid-card-height: 80px;
	--techbbq-logo-grid-logo-height: 32px;
}

@media (min-width: 768px) {
	.techbbq-logo-grid-section__grid--large {
		--techbbq-logo-grid-card-height: 160px;
		--techbbq-logo-grid-logo-height: 56px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.techbbq-logo-grid-section__grid--large {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ── Wide screen (1440+) ──────────────────────────────────────── */
@media (min-width: 1440px) {
	.techbbq-logo-grid-section--categorized .techbbq-logo-grid-section__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}