/*** Archive: PAM Research Library ***/

.pam-research {
	padding-block: var(--module-spacing-large);
}

/** Filter bar **/

.pam-research .filters {
	align-items: stretch;
	column-gap: var(--text-spacing-medium);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: var(--text-spacing-xlarge);
	row-gap: var(--text-spacing-small);
}

.pam-research .dropdowns {
	column-gap: var(--text-spacing-medium);
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--text-spacing-small);
}

.pam-research .search {
	flex: 1;
	max-width: 360px;
	position: relative;
}

.pam-research .search .icon {
	align-items: center;
	background: var(--gray-light);
	border-radius: 50%;
	color: var(--black);
	display: flex;
	height: 24px;
	justify-content: center;
	position: absolute;
	right: 8px;
	top: 50%;
	translate: 0 -50%;
	width: 24px;
}

.pam-research .search .icon svg {
	display: block;
	height: 9px;
	width: 9px;
}

/* Height 100% matches the adjacent multiselect trigger; right padding clears the icon circle. */
.pam-research .search input {
	background: transparent;
	height: 100%;
	line-height: normal;
	padding: 12px 40px 12px 20px;
}

.pam-research .search input:focus-visible {
	border-color: var(--black);
	outline: none;
}

/** Study grid **/

/* Jazzy renders results inside <ul jx-form-results-items> as a child of
   .studies — so the grid lives on the ul, not on .studies itself. */
.pam-research .studies > ul {
	column-gap: var(--gap);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: var(--text-spacing-xlarge);
}

.pam-research .studies li {
	display: flex;
	list-style: none;
}

/* display:flex above defeats the [hidden] attribute the load-more JS toggles. */
.pam-research .studies li[hidden] {
	display: none;
}

.pam-research .study {
	background: var(--white);
	filter: var(--shadow-card);
	gap: var(--text-spacing-xsmall);
	height: 100%;
	padding: var(--text-spacing-medium);
	position: relative;
	width: 100%;
}

.pam-research .study .pill.category {
	align-self: flex-start;
}

.pam-research .study .card-link {
	color: inherit;
}

.pam-research .study .card-link::after {
	content: '';
	inset: 0;
	position: absolute;
}

.pam-research .study p {
	color: var(--gray-dark);
}

.pam-research .study .btn.tertiary {
	margin-top: auto;
	padding-top: var(--text-spacing-xsmall);
}

.pam-research .study:hover .card-link,
.pam-research .study:focus-within .card-link {
	color: var(--black-hover);
}

.pam-research .study.featured {
	padding: var(--text-spacing-xlarge);
}

.pam-research .study.featured + .studies {
	margin-top: var(--module-spacing-small);
}

/* Jazzy renders the load-more <a> (or .load-more-complete <p>) as a sibling of
   the results <ul>, so centre it here rather than inside the grid. */
.pam-research .studies > [jx-form-pagination="load_more"] {
	display: block;
	margin-inline: auto;
	margin-top: var(--text-spacing-xlarge);
	width: fit-content;
}

.pam-research .studies > .load-more-complete {
	background: var(--gray-light);
	color: var(--gray-dark);
	text-align: center;
}

/** "What is PAM" explainer **/

.pam-explainer {
	padding-block: var(--module-spacing-large);
}

/* isolation contains the .panel's z-index:-1 behind the row's content. */
.pam-explainer .container.grid {
	align-items: center;
	isolation: isolate;
}

.pam-explainer .panel {
	align-self: stretch;
	background: var(--parchment);
	grid-column: 4 / -1;
	grid-row: 1;
	justify-self: start;
	margin-block: calc(-1 * var(--text-spacing-xlarge));
	width: calc(100% + var(--container-outer-margin) + var(--container-outer-padding));
	z-index: -1;
}

.pam-explainer .media {
	aspect-ratio: 4 / 3;
	grid-column: 1 / span 6;
	grid-row: 1;
	margin-right: var(--text-spacing-large);
}

.pam-explainer .content {
	grid-column: 7 / -1;
	grid-row: 1;
}

/* Fall back to a comfortable centred measure when the editor leaves the image
   blank — otherwise the content sits stranded in the right-half with empty grid
   columns alongside it. */
.pam-explainer .container.grid:not(:has(.media)) .content {
	grid-column: 3 / span 8;
}

.pam-explainer .content > * + * {
	margin-top: var(--text-spacing-xsmall);
}

/** Closing CTA **/

/* Runs on the page background (no .bg-field band), so it misses the demo-cta's
   band-only padding — give it the same full breathing room here. */
.module.demo-cta.style-demo-cta {
	padding-block: var(--module-spacing-xlarge);
}

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

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

	.pam-research .studies > ul {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Stack the explainer; image first, then copy. No parchment panel when the
	   grid collapses (its breakout width would overflow the block layout). */
	.pam-explainer .container.grid {
		display: block;
	}

	.pam-explainer .panel {
		display: none;
	}

	.pam-explainer .content {
		margin-top: var(--text-spacing-large);
	}

	.pam-cta .heading-2,
	.pam-cta .large-text {
		grid-column: 2 / span 10;
	}

}

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

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

	.pam-research .studies > ul {
		grid-template-columns: 1fr;
	}

	.pam-research .search {
		max-width: none;
	}

}