/**
 * 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-padding: var(--techbbq-logo-tile-padding);
	--techbbq-logo-grid-card-radius: var(--techbbq-logo-tile-radius);
	/* The same file the Partners widgets use. These tiles are the same box, built from the same
	 * --techbbq-logo-tile-* tokens, so the glow lands identically. */
	--techbbq-logo-grid-card-hover-bg: url("../../images/partners/card-hover.svg");

	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;
}

/* Column count via a custom property. The --large and --categorized variants
 * below override the same variable, and the widget's Grid Columns controls
 * target this element so they win over all of them. Tracker item 13. */
.techbbq-logo-grid-section__grid {
	--techbbq-lgs-grid-columns: 2;

	display: grid;
	/* THE 320px CAP BELONGS ON THE TRACK, NOT ON THE CARD.
	 *
	 * With `1fr` tracks and the cap on the card, every track takes an equal share of the full
	 * width and the card then shrinks inside it and centres, so the leftover shows up as space
	 * between the cards. The fewer the columns the worse it gets: at 4 across on a 1377px row a
	 * track is 335px and the 320px card leaves 15px of slack, which reads as a 27px gap instead
	 * of the 12px asked for. At 3 across the track is 451px and the gap looks like 143px, which
	 * is what Auri saw on Defence & Dual-Use.
	 *
	 * Capping the track instead means the gap is exactly --techbbq-logo-tile-gap at every column
	 * count, and `justify-content: center` puts the leftover around the whole grid where it
	 * belongs. minmax(0, …) keeps the tracks shrinking below 320px when the row is too narrow. */
	grid-template-columns: repeat(var(--techbbq-lgs-grid-columns), minmax(0, var(--techbbq-logo-tile-max-width)));
	justify-content: center;
	gap: var(--techbbq-logo-tile-gap);
	width: 100%;
}

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

/* The hover glow, identical to partners.css and partners-category.css: the wash fades in over
 * 0.3s, on hover and on keyboard focus. Applied to every tile rather than only the linked ones,
 * which is what the Partners grids do, so a grid reads as one thing whether or not a given logo
 * carries a website. */
.techbbq-logo-grid-section__card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: transparent;
	background-image: var(--techbbq-logo-grid-card-hover-bg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.techbbq-logo-grid-section__card:hover::before,
.techbbq-logo-grid-section__card:focus-visible::before {
	opacity: 1;
}

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; }`, which is (0,1,1).
 * Fills the card's content box so object-fit does the letterboxing; a pinned
 * logo height would waste the taller box the 5:3 ratio buys. */
.techbbq-logo-grid-section .techbbq-logo-grid-section__logo {
	/* Above the glow, which paints at the card's own stacking level. */
	position: relative;
	z-index: 1;
	display: block;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

/* ── Tablet (768–1023) ──────────────────────────────────────── */
@media (min-width: 768px) {
	.techbbq-logo-grid-section__grid {
		--techbbq-lgs-grid-columns: 3;
	}
}

/* ── Desktop (1024–1439) ──────────────────────────────────────── */
@media (min-width: 1024px) {
	.techbbq-logo-grid-section__grid {
		--techbbq-lgs-grid-columns: 4;
	}
}

/* ── Categorized layout (Life Science participated startups) ── */
/* This variant used to force a 48px logo inside a 104px card. It now simply
 * runs denser, 5 across at 1440, and the tile shrinks with the column count
 * like every other grid. */

.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%;
}

/* A labelled group hangs off its pill, and the pill is left-aligned, so a centred grid under it
 * reads as misaligned. Centring is still right for a plain grid, which sits under a centred
 * eyebrow, title and description. Both are only the DEFAULT: the Alignment control below overrides
 * either one. */
.techbbq-logo-grid-section__category .techbbq-logo-grid-section__grid {
	justify-content: start;
}

/* ── Alignment (the widget's Alignment control) ──────────────── */

/* One control moves the pill AND the tiles, because moving one without the other is never what
 * anybody wants. Three things have to agree: `justify-content` places the tracks in the grid,
 * `align-items` places the pill in the category column, and `align-self` on the pill itself has to
 * be released, because pill.css pins every pill to `flex-start` and that beats the parent.
 *
 * These sit AFTER the default rule above on purpose. Both are two class selectors, so specificity
 * ties and source order decides the winner. Moving this block up would silently do nothing on a
 * labelled group. */
.techbbq-logo-grid-section--align-left .techbbq-logo-grid-section__grid {
	justify-content: start;
}

.techbbq-logo-grid-section--align-center .techbbq-logo-grid-section__grid {
	justify-content: center;
}

.techbbq-logo-grid-section--align-right .techbbq-logo-grid-section__grid {
	justify-content: end;
}

.techbbq-logo-grid-section--align-left .techbbq-logo-grid-section__category {
	align-items: flex-start;
}

.techbbq-logo-grid-section--align-center .techbbq-logo-grid-section__category {
	align-items: center;
}

.techbbq-logo-grid-section--align-right .techbbq-logo-grid-section__category {
	align-items: flex-end;
}

.techbbq-logo-grid-section--align-left .techbbq-pill {
	align-self: flex-start;
}

.techbbq-logo-grid-section--align-center .techbbq-pill {
	align-self: center;
}

.techbbq-logo-grid-section--align-right .techbbq-pill {
	align-self: flex-end;
}

/* --large used to mean a 160px card; with a ratio it means fewer columns, so
 * the tile grows and its height follows. Same mechanism the partner wall uses
 * to rank tiers. */
@media (min-width: 768px) {
	.techbbq-logo-grid-section__grid--large {
		--techbbq-lgs-grid-columns: 2;
	}
}

@media (min-width: 1024px) {
	.techbbq-logo-grid-section__grid--large {
		--techbbq-lgs-grid-columns: 3;
	}
}

/* ── Wide screen (1440+) ──────────────────────────────────────── */
@media (min-width: 1440px) {
	.techbbq-logo-grid-section--categorized .techbbq-logo-grid-section__grid {
		--techbbq-lgs-grid-columns: 5;
	}
}