/*
 * Réalisations archive: filter pills over a masonry grid.
 *
 * The grid is four columns of very short rows; the view script gives each tile
 * a grid-row span matching its rendered height, so tiles of different heights
 * pack together. Landscape covers get .is-wide and claim two columns, and
 * grid-auto-flow: dense backfills the holes that leaves.
 */

.tdev-realisations__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: var(--wp--preset--spacing--70, 3rem);
}

/* Same treatment as every other button on the site: the background is clipped
   by the brush silhouette, so the filters get the hand-drawn edge and the
   button typography. Colours are unchanged -- terracotta, anthracite once
   selected. */
.tdev-realisations__filter {
	border: none;
	cursor: pointer;
	padding: 0.7em 0.98em 0.42em;
	background-color: var(--wp--preset--color--terracotta);
	-webkit-mask: url('../images/button-brush-fill.svg') no-repeat center / 100% 100%;
	mask: url('../images/button-brush-fill.svg') no-repeat center / 100% 100%;
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--lunchbox);
	font-size: 27px;
	font-weight: var(--wp--custom--typography--font-weight--bold);
	line-height: 1;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}

.tdev-realisations__filter.is-active,
.tdev-realisations__filter:hover,
.tdev-realisations__filter:focus-visible {
	background-color: var(--wp--preset--color--noir);
}

.tdev-realisations__grid {
	/* The mockup does not line the columns up: two of them start lower than
	   their neighbours, which is what stops the grid reading as a table. The
	   view script applies these as a translation, so the packing itself is
	   untouched. Set any of them to 0 to straighten a column. */
	--stagger-col-1: 0px;
	--stagger-col-2: 104px;
	--stagger-col-3: 80px;
	--stagger-col-4: 0px;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 8px;
	grid-auto-flow: dense;
	column-gap: var(--wp--preset--spacing--30, 1rem);
	row-gap: var(--wp--preset--spacing--30, 1rem);
	/* Without this each tile is stretched to its row span and clipped, so the
	   script would only ever measure one row tall and never grow. */
	align-items: start;
	/* Room for the lowest column, which the translation pushes past the last row. */
	padding-bottom: var(--stagger-col-2);
}

.tdev-realisation-tile {
	grid-column: span 1;
}

.tdev-realisation-tile.is-wide {
	grid-column: span 2;
}

.tdev-realisations__empty {
	text-align: center;
}

@media (max-width: 999px) {
	.tdev-realisations__grid {
		grid-template-columns: repeat(2, 1fr);
		--stagger-col-2: 56px;
		--stagger-col-3: 0px;
	}
}

@media (max-width: 599px) {
	.tdev-realisations__grid {
		grid-template-columns: 1fr;
		--stagger-col-2: 0px;
		--stagger-col-3: 0px;
	}

	.tdev-realisation-tile.is-wide {
		grid-column: span 1;
	}
}