/**
 * Archive: Insights
 *
 * The intro hero pads its bottom by the hero's own spacing; the card grid sits a step closer, so
 * the section pulls itself up by the difference. It also starts a small step above the cards, or its
 * clipping (from `.textured`) would cut the top of a focused card's ring. The background photo
 * starts below the first row of cards and takes its height from the image, which is cropped to the
 * band it fills.
 */

/*** Archive: Insights ***/

.archive-content {
	--texture-fade: 69%;
	--texture-opacity: 0.08;
	padding: var(--text-spacing-xxsmall) 0 var(--text-spacing-large);
}

.module.hero + .archive-content {
	margin-top: calc(var(--module-spacing-medium) - var(--module-spacing-large) - var(--text-spacing-xxsmall));
}

.archive-content > .texture {
	bottom: auto;
	top: calc(var(--text-spacing-xxsmall) + var(--module-spacing-large));
}

.archive-content > .texture img {
	display: block;
	height: auto;
}

.archive-content [jx-form-results] {
	display: flex;
	flex-direction: column;
}

/** Cards **/

.archive-content .cards {
	display: grid;
	gap: var(--module-spacing-medium);
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.archive-content .cards > li {
	display: grid;
}

.archive-content .cards > li:has(> .wide) {
	grid-column: 1 / -1;
}

.archive-content [jx-form-pagination="load_more"] {
	align-self: center;
	margin-top: var(--module-spacing-medium);
}

/** Search **/

.search-content .searchform {
	margin-bottom: var(--module-spacing-small);
	max-width: calc(6 * var(--one-column-width) + 5 * var(--gap));
}

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

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

	.archive-content .cards {
		gap: var(--gap);
		grid-template-columns: 1fr;
	}

	.archive-content [jx-form-pagination="load_more"] {
		margin-top: var(--module-spacing-small);
	}

}