/**
 * Projects archive
 *
 * The hero, the quote and the tail are shipped modules driven from the archive settings, so
 * this file is the band that runs behind the middle of the page, the filter row and the card
 * grid. Everything else is archive.php's shell.
 */

.archive-portfolio .band {
	padding-block: var(--module-spacing-large) var(--module-spacing-medium);
}

.archive-portfolio .band > .testimonial + .container {
	margin-top: var(--module-spacing-small);
}

.archive-portfolio .filters-bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xxsmall) var(--text-spacing-small);
	margin-bottom: var(--text-spacing-xxlarge);
}

.archive-portfolio .filters-bar > .eyebrow {
	color: var(--charcoal);
	margin: 0;
}

/* One fixed width for every control rather than each sizing to its own longest option, and the
   group sized to its contents rather than stretched across the container. */
.archive-portfolio .filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xxsmall);
}

.archive-portfolio .filters > .filter {
	width: 220px;
}

/* The select sizes itself to its longest option through a `max-content` sizer, so a control given
   a width of its own overflows and laps the one beside it. Same clamp the news archive uses: let
   the grid track shrink, and let the sizer take the width it is given rather than the width it
   wants. The label then fades out at the pill's edge when an option is longer than the pill. */
.archive-portfolio .filters .jazzy-select {
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
}

.archive-portfolio .filters .sizer {
	width: auto;
}

.archive-portfolio .filters .trigger .label {
	flex: 1;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

.archive-portfolio .jazzy-select .trigger {
	font-size: calc(13rem / 16);
	height: 50px;
	line-height: calc(24 / 13);
	padding-right: var(--text-spacing-xsmall);
}

.archive-portfolio .results > [jx-form-results-items] {
	column-gap: var(--text-spacing-xxlarge);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: var(--module-spacing-medium);
}

.archive-portfolio .results > [jx-form-results-items] > li {
	display: flex;
}

.archive-portfolio .results .card {
	width: 100%;
}

.archive-portfolio .pagination {
	margin-top: var(--module-spacing-medium);
}

/*** Responsive ***/

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.archive-portfolio .filters-bar {
		align-items: stretch;
		flex-direction: column;
		flex-wrap: nowrap;
	}

	/* Stacked, the bar has the width to spare, so the controls take even shares of it again. */
	.archive-portfolio .filters > .filter {
		flex: 1 1 180px;
		width: auto;
	}

	.archive-portfolio .results > [jx-form-results-items] {
		column-gap: var(--text-spacing-medium);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--text-spacing-medium);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	/* The control stands off the quote above it and close to the cards it filters. */
	.archive-portfolio .band > .testimonial + .container {
		margin-top: var(--module-spacing-medium);
	}

	.archive-portfolio .filters-bar {
		margin-bottom: var(--text-spacing-small);
	}

	/* Five dropdowns is a screen of them before the first project, so they fold behind one control
	   here, as The Current's do. The group's label goes off-screen rather than away: the control
	   says Filter beside it, and the set still has a name for a screen reader. */
	.archive-portfolio .filters-bar > .eyebrow {
		backface-visibility: hidden;
		left: -999999999px;
		opacity: 0;
		position: absolute;
	}

	/* Its own width, not the column's: the bar stretches its rows, and an invisible box the width
	   of the screen takes taps meant for the page beside it. */
	.archive-portfolio .filters-bar .filters-toggle {
		align-self: flex-start;
		display: inline-flex;
	}

	.archive-portfolio .filters-bar .filters {
		display: none;
	}

	.archive-portfolio .filters-bar:has(.filters-toggle[aria-expanded="true"]) .filters {
		display: flex;
	}

	.archive-portfolio .filters > .filter {
		flex-basis: 100%;
	}

	.archive-portfolio .results > [jx-form-results-items] {
		column-gap: 20px;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
	}

}