/* ==========================================================================
   Industries grid
   Light background (the blue image band sits directly below). The keyhole
   device shows through transparent tiles, and the grid breaks unevenly.
   ========================================================================== */

.industries {
	padding-block: var(--space-section);
	background-color: var(--surface-100);
}

.industries__header {
	display: grid;
	justify-items: start;
}

.industries__title {
	max-width: 20ch;
	margin-top: var(--space-3);
	color: var(--brand-blue);
}

/* Uneven grid, mobile first. Tight gaps so it reads as one dense block.
   Every name fits on one line at every width, so all tiles share one height.
   Phones: two columns; Demand Generation, Health Tech, Sports and
   Manufacturing & Industrial run full width.
   Tablets: six columns; rows of 3-3, 2-2-2, 3-3, 1-2-3, 2-4.
   Desktop: eight columns; rows of 3-2-2-1 (2-2-3-1 from 1280px), 2-3-2-1, 1-2-2-3.
   Every row's spans add up to the column count, so there are never gaps. */
.industries__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
	margin-top: var(--space-7);
	padding: 0;
	list-style: none;
	counter-reset: industry;
}

.industries__grid > li {
	display: flex;
	counter-increment: industry;
}

.industries__grid > li:nth-child(1),
.industries__grid > li:nth-child(6),
.industries__grid > li:nth-child(9),
.industries__grid > li:nth-child(12) {
	grid-column: span 2;
}

/* Compact tile: small number, then the industry name as the main element.
   A thin border on the section background, so the keyhole device shows through. */
.industries__tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-1);
	width: 100%;
	min-height: 4rem;
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	line-height: var(--leading-snug);
	color: var(--ink);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
}

/* 01 to 12: a small secondary label. The empty alt after the slash hides it
   from screen readers, which already hear the list order, so it is decorative. */
.industries__tile::before {
	content: counter(industry, decimal-leading-zero);
	content: counter(industry, decimal-leading-zero) / "";
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--brand-blue);
}

@media (min-width: 48em) {
	.industries__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--space-3);
	}

	/* Rows: 3-3, 2-2-2, 3-3, 1-2-3, 2-4. */
	.industries__grid > li:nth-child(1),
	.industries__grid > li:nth-child(2),
	.industries__grid > li:nth-child(6),
	.industries__grid > li:nth-child(7),
	.industries__grid > li:nth-child(10) {
		grid-column: span 3;
	}

	.industries__grid > li:nth-child(3),
	.industries__grid > li:nth-child(4),
	.industries__grid > li:nth-child(5),
	.industries__grid > li:nth-child(9),
	.industries__grid > li:nth-child(11) {
		grid-column: span 2;
	}

	.industries__grid > li:nth-child(8) {
		grid-column: span 1;
	}

	.industries__grid > li:nth-child(12) {
		grid-column: span 4;
	}

	.industries__tile {
		min-height: 4.5rem;
	}
}

@media (min-width: 64em) {
	.industries__grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		margin-top: var(--space-8);
	}

	/* Rows: 3-2-2-1, 2-3-2-1, 1-2-2-3. On smaller laptops Demand Generation
	   needs three columns to stay on one line. */
	.industries__grid > li:nth-child(1),
	.industries__grid > li:nth-child(6),
	.industries__grid > li:nth-child(12) {
		grid-column: span 3;
	}

	.industries__grid > li:nth-child(2),
	.industries__grid > li:nth-child(3),
	.industries__grid > li:nth-child(5),
	.industries__grid > li:nth-child(7),
	.industries__grid > li:nth-child(10),
	.industries__grid > li:nth-child(11) {
		grid-column: span 2;
	}

	.industries__grid > li:nth-child(4),
	.industries__grid > li:nth-child(8),
	.industries__grid > li:nth-child(9) {
		grid-column: span 1;
	}
}

/* From 1280px Demand Generation fits in two columns, and SAP & ERP takes three:
   first row becomes 2-2-3-1. */
@media (min-width: 80em) {
	.industries__grid > li:nth-child(1) {
		grid-column: span 2;
	}

	.industries__grid > li:nth-child(3) {
		grid-column: span 3;
	}
}