/**
 * Homepage clients grid (template-parts/home/clients-grid.php, Task 15
 * spec, no Figma node). Light section on the page background.
 *
 * Responsive plan (future pass): 3 columns on tablet, 2 on mobile, same
 * line and empty-cell rules.
 */

.clients-grid {
	padding-block: var(--section-pad-y);
	/* The logo box is the one knob. The row height derives from it, so the
	   minimum clear space between the box and the cell border holds by
	   construction whenever the box is retuned. Columns are fluid and give
	   more room than that minimum at desktop widths (45px at 1440); they
	   reach the minimum around a 1184px viewport, below which the
	   responsive pass drops to 3 columns anyway. */
	--client-logo-size: 128px;
	--client-logo-clearance: 24px;
}

.clients-grid .eyebrow {
	margin-bottom: 32px;
}

/* Fillers are rendered for the largest remainder across all three column
   counts and marked with the counts they belong to; each width shows only
   its own. display:none is safe because fillers are always the LAST
   children, so dropping some cannot move a visible cell and the nth-child
   border formulas below stay correct. */
.clients-grid__cell--empty:not(.is-6) {
	display: none;
}

/* Inner 1px lines only, drawn as start-side cell borders with the first
   row/column zeroed: single-pixel by construction, no doubles, and nothing
   at the outer edges. (The gap + grid-background technique leaves a faint
   border-color ghost on the outer edge pixel whenever the grid lands on a
   fractional y offset; borders cannot.) The template pads the last row
   with empty cells so the lines are complete at any client count. The
   responsive pass must retarget the two nth-child formulas to the 3- and
   2-column counts. */
.clients-grid__grid {
	list-style: none;
	padding: 0;
	margin: 64px 0 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: calc(var(--client-logo-size) + 2 * var(--client-logo-clearance));
}

.clients-grid__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0 solid var(--color-border-subtle);
	border-top-width: 1px;
	border-left-width: 1px;
}

.clients-grid__cell:nth-child(-n + 6) {
	border-top-width: 0;
}

.clients-grid__cell:nth-child(6n + 1) {
	border-left-width: 0;
}

.clients-grid__logo {
	position: relative;
	display: block;
	width: var(--client-logo-size);
	height: var(--client-logo-size);
}

/* Resting state: the marquee's silhouette technique (logo file as an alpha
   mask over a flat gray fill), same gray token. */
.clients-grid__silhouette {
	position: absolute;
	inset: 0;
	background-color: var(--color-text-secondary-on-dark);
	-webkit-mask-image: var(--mask);
	mask-image: var(--mask);
	mask-mode: alpha;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	transition: opacity 300ms var(--motion-ease);
}

.clients-grid__color {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 300ms var(--motion-ease);
}

/* Crossfade to the real logo; nothing else changes (no scale, no bg). */
.clients-grid__cell:hover .clients-grid__silhouette,
.clients-grid__cell:focus-visible .clients-grid__silhouette {
	opacity: 0;
}

.clients-grid__cell:hover .clients-grid__color,
.clients-grid__cell:focus-visible .clients-grid__color {
	opacity: 1;
}

/* Hover-less devices: full color always, no silhouettes. */
@media (hover: none) {
	.clients-grid__silhouette {
		display: none;
	}

	.clients-grid__color {
		opacity: 1;
	}
}

/* --------------------------------------------------------------------
 * Responsive: 3 columns at tablet, 2 at mobile
 *
 * The line rules are index-based, so the nth-child formulas have to be
 * retargeted per column count (noted when the grid was built). The empty
 * trailing cells come from PHP at a fixed 6-wide remainder, so at 3 and 2
 * columns they simply fall on later rows and still read as the same
 * deliberate grid.
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.clients-grid__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Reset first: a filler hidden by the 6-column rule may well be one this
	   width needs, and the counts do not nest. */
	.clients-grid__cell--empty {
		display: flex;
	}

	.clients-grid__cell--empty:not(.is-3) {
		display: none;
	}

	.clients-grid__cell:nth-child(-n + 6) {
		border-top-width: 1px;
	}

	.clients-grid__cell:nth-child(6n + 1) {
		border-left-width: 1px;
	}

	.clients-grid__cell:nth-child(-n + 3) {
		border-top-width: 0;
	}

	.clients-grid__cell:nth-child(3n + 1) {
		border-left-width: 0;
	}
}

@media (max-width: 767px) {
	.clients-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.clients-grid__cell--empty {
		display: flex;
	}

	.clients-grid__cell--empty:not(.is-2) {
		display: none;
	}

	.clients-grid__cell:nth-child(-n + 3) {
		border-top-width: 1px;
	}

	.clients-grid__cell:nth-child(3n + 1) {
		border-left-width: 1px;
	}

	.clients-grid__cell:nth-child(-n + 2) {
		border-top-width: 0;
	}

	.clients-grid__cell:nth-child(2n + 1) {
		border-left-width: 0;
	}
}

/* --------------------------------------------------------------------
 * Escape hatch: solid-plate artwork (logo_solid_bg)
 *
 * A logo whose file is opaque across the whole canvas cannot be masked:
 * the alpha mask resolves to a filled rectangle. Those render as the real
 * image in grayscale instead, held back to the masked logos' weight, and
 * the hover crossfade becomes grayscale to colour rather than silhouette
 * to colour. Sizing and the 1080x1080 canvas handling are untouched.
 * -------------------------------------------------------------------- */

.clients-grid__logo--solid .clients-grid__color {
	opacity: var(--logo-solid-opacity);
	filter: grayscale(1);
	transition:
		opacity 300ms var(--motion-ease),
		filter 300ms var(--motion-ease);
}

.clients-grid__cell:hover .clients-grid__logo--solid .clients-grid__color,
.clients-grid__cell:focus-visible .clients-grid__logo--solid .clients-grid__color {
	opacity: 1;
	filter: grayscale(0);
}

@media (hover: none) {
	.clients-grid__logo--solid .clients-grid__color {
		opacity: 1;
		filter: none;
	}
}