/**
 * Archive shell
 *
 * Hero, one featured story laid out wide, then a three-up grid of the global .card.
 * Nothing here restyles a card — the grid only supplies tracks and gutters.
 *
 * Every post type that falls through to archive.php renders this — Stories, Press Releases
 * and Press Mentions today — so it hangs on the section rather than on Stories' body class.
 * The featured row is Stories-only and simply has nothing to match elsewhere.
 */

/*** Hero ***/

.archive-content .archive-hero {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
	padding-top: var(--module-spacing-medium);
	position: relative;
	text-align: center;
}

.archive-content .archive-hero > * {
	margin: 0;
}

.archive-content .archive-hero .subheading > :first-child {
	margin-top: 0;
}

.archive-content .archive-hero .subheading > :last-child {
	margin-bottom: 0;
}

.archive-press-release .archive-content .archive-hero {
	align-items: flex-start;
	text-align: left;
}

.archive-content .sunburst {
	color: color-mix(in srgb, var(--sun) calc(var(--jazzy-progress, 0) * 100%), var(--charcoal-5));
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 152px;
	transform: translate(-50%, calc(var(--jazzy-progress, 0) * -40px));
	width: min(990px, 100%);
	z-index: -1;
}

.archive-content .sunburst svg {
	display: block;
	height: auto;
	max-width: none;
	width: 100%;
}

/*** Featured story ***/

.archive-content .featured {
	--featured-breakout: 42px;
	display: grid;
	grid-template-columns: 723fr 557fr;
	margin-inline: calc(var(--featured-breakout) * -1);
	padding-block: var(--module-spacing-medium) 0;
	position: relative;
	width: calc(100% + var(--featured-breakout) * 2);
}

.archive-content .featured .media {
	aspect-ratio: auto;
	border-radius: 10px 0 0 10px;
}

/* The ratio on a pseudo rather than on the box: it sets the row's floor and then lets the
   photograph come up with a headline that runs taller than it, which a ratio on the box —
   a size of its own — would not. */
.archive-content .featured .media::before {
	aspect-ratio: 723 / 482;
	content: '';
	display: block;
}

.archive-content .featured .media .pill {
	left: var(--text-spacing-xsmall);
	position: absolute;
	top: var(--text-spacing-xsmall);
	z-index: 1;
}

.archive-content .featured .content {
	background: var(--white);
	border-radius: 0 10px 10px 0;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-small);
	justify-content: space-between;
	padding: var(--text-spacing-xlarge) var(--text-spacing-large);
}

.archive-content .featured .content > * {
	margin: 0;
}

.archive-content .featured .text {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	transition: color var(--motion) var(--ease-out);
}

.archive-content .featured .location + p {
	margin-top: var(--text-spacing-xxsmall);
}

.archive-content .featured:hover .text,
.archive-content .featured:focus-within .text {
	color: var(--text-gray);
}

.archive-content .featured .text > * {
	margin: 0;
}

.archive-content .featured .location {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-xxsmall);
}

.archive-content .featured .btn {
	align-self: flex-end;
	margin-bottom: calc(var(--text-spacing-medium) - var(--text-spacing-xlarge));
	margin-right: calc(var(--text-spacing-medium) - var(--text-spacing-large));
}

.archive-content .featured:hover .btn.secondary,
.archive-content .featured:focus-within .btn.secondary {
	gap: 12px;
}

.archive-content .featured:hover .btn.secondary .arrow,
.archive-content .featured:focus-within .btn.secondary .arrow {
	background: var(--sun-light);
}

/*** Listing ***/

.archive-content .listing {
	margin-top: var(--module-spacing-medium);
}

.archive-content .listing:has(.media-contact) {
	align-items: start;
	display: grid;
	gap: var(--text-spacing-xxlarge);
	grid-template-columns: minmax(0, 1fr) 320px;
}

.archive-content .listing:has(.media-contact) .main {
	border-right: 1px solid var(--charcoal-25);
	padding-right: var(--module-spacing-small);
}

.archive-content .listing .media-contact {
	position: sticky;
	top: calc(var(--sticky-nav-height) + var(--text-spacing-small) + 100px);
}

/*** Filters ***/

.archive-content .filters-bar {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-xxsmall);
	justify-content: space-between;
	margin: 0 0 var(--text-spacing-xxlarge);
}

.archive-content .filters-bar .filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xxsmall);
}

.archive-content .filters-bar .filter {
	flex: 0 0 180px;
	min-width: 0;
}

.archive-content .filters-bar .filter .jazzy-select {
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
}

.archive-content .filters-bar .filter .sizer {
	width: auto;
}

.archive-content .filters-bar .filter .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-content .filters-bar .search {
	width: 240px;
}

.search-results .archive-content .filters-bar {
	justify-content: center;
}

/* Press Releases only, and only while the bar is a row. The rail beside the listing leaves the
   filters a column's width short between 1136 and the 1100 rung where the rail drops below, and a
   wrapping row spent that squeeze by dropping the second dropdown onto a line of its own. Here the
   fields give up width instead and stay on one line; at 1100 they have the whole container again.
   Stories is left alone — four dropdowns in one squeezed row is a different trade. Not below 951:
   there the bar turns to a column, and a flex basis would size the search's height. */
@media only screen and (min-width: calc(951rem / 16)) {

	.archive-press-release .archive-content .filters-bar .filters {
		flex-wrap: nowrap;
		min-width: 0;
	}

	.archive-press-release .archive-content .filters-bar .filter {
		flex: 0 1 180px;
	}

	.archive-press-release .archive-content .filters-bar .search {
		flex: 0 1 240px;
		min-width: 0;
	}

}

/*** Card grid ***/

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

.archive-content .results > :is([jx-form-results-items], .cards) > li {
	display: flex;
}

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

.archive-press-release .archive-content .results > [jx-form-results-items] {
	display: block;
}

.archive-press-release .archive-content .results > [jx-form-results-items] > li {
	padding: var(--text-spacing-medium) 0;
}

.archive-team .archive-content .results > [jx-form-results-items] {
	grid-template-columns: repeat(4, 1fr);
}

.archive-press-mention .archive-content .results > [jx-form-results-items] {
	display: block;
}

.archive-press-mention .archive-content .results > [jx-form-results-items] > li + li {
	border-top: 1px solid var(--charcoal-15);
	margin-top: var(--text-spacing-medium);
	padding-top: var(--text-spacing-medium);
}

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

/*** Responsive ***/

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

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

	.archive-content .featured {
		--featured-breakout: 0px;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1100 - Mobile Header / Nav */
/***************************************************************************************************************************************************************************************/

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

	.archive-content .listing:has(.media-contact) {
		grid-template-columns: minmax(0, 1fr);
	}

	.archive-content .listing:has(.media-contact) .main {
		border-right: none;
		padding-right: 0;
	}

	.archive-content .listing .media-contact {
		position: static;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ 651-1100 - The media contact under the listing */
/***************************************************************************************************************************************************************************************/

/* Once the rail drops below the pagination it has the listing's whole width, and a single 320
   column of contact details down the left of it left most of that empty. The person and the press
   resources sit side by side instead, the label across both. The phone stacks them again. */
@media only screen and (min-width: calc(651rem / 16)) and (max-width: calc(1100rem / 16)) {

	.archive-press-release .archive-content .listing .media-contact {
		column-gap: var(--text-spacing-large);
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.archive-press-release .archive-content .listing .media-contact > .eyebrow {
		grid-column: 1 / -1;
	}

	/* The name takes a row of its own and the two blocks of details start level under it — lined
	   up with the name, the resources read as a caption to the name instead of a second column. The
	   person wrapper steps out of the layout so its name and its details can be placed separately;
	   it carries no meaning of its own, so nothing is lost to a reader. Spacing is restated because
	   the rules that set it counted on the wrapper being there. */
	.archive-press-release .archive-content .listing .media-contact > .person {
		display: contents;
	}

	.archive-press-release .archive-content .listing .media-contact > .person > :not(.info) {
		grid-column: 1 / -1;
	}

	.archive-press-release .archive-content .listing .media-contact > * + .person > :first-child {
		margin-top: var(--text-spacing-xsmall);
	}

	.archive-press-release .archive-content .listing .media-contact > .person > .info {
		grid-column: 1;
	}

	.archive-press-release .archive-content .listing .media-contact > .info {
		grid-column: 2;
		margin-top: 0;
	}

}

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

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

	.archive-content .archive-hero {
		padding-top: var(--module-spacing-large);
	}

	.archive-content .featured {
		grid-template-columns: 1fr;
	}

	/* No hover once the story stacks. Stacked it is most of the screen, so a finger that lands on
	   it to scroll the page recolours the copy and opens the button before anything has been
	   chosen. Only the hover goes: keyboard focus still opens the button. */
	.archive-content .featured:hover .text {
		color: inherit;
	}

	.archive-content .featured:hover:not(:focus-within) .btn.secondary,
	.archive-content .featured .btn.secondary:hover:not(:focus-visible) {
		gap: var(--text-spacing-xxsmall);
	}

	.archive-content .featured:hover:not(:focus-within) .btn.secondary .arrow,
	.archive-content .featured .btn.secondary:hover:not(:focus-visible) .arrow {
		background: var(--sun);
	}

	.archive-content .featured .media {
		border-radius: 10px 10px 0 0;
	}

	.archive-content .featured .media::before {
		aspect-ratio: 723 / 400;
	}

	.archive-content .featured .btn {
		align-self: flex-start;
		margin-right: 0;
	}

	.archive-content .featured .content {
		border-radius: 0 0 10px 10px;
		padding: var(--text-spacing-large) var(--text-spacing-medium);
	}

	.archive-content .filters-bar {
		align-items: stretch;
		flex-direction: column;
	}

	.archive-content .filters-bar .filters {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}

	.archive-content .filters-bar .filters .filter,
	.archive-content .filters-bar .search {
		width: auto;
	}

	/* Stacked, the search is the bar's last line and the releases start straight under it. */
	.archive-press-release .archive-content .filters-bar {
		margin-bottom: var(--text-spacing-small);
	}

	.archive-content .results > :is([jx-form-results-items], .cards) {
		gap: var(--text-spacing-medium);
		grid-template-columns: repeat(2, 1fr);
	}

	.archive-team .archive-content .results > [jx-form-results-items] {
		grid-template-columns: repeat(2, 1fr);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ 651-823 - Narrow Tablet Sizes */
/***************************************************************************************************************************************************************************************/

/* Three dropdowns and a fourth on a line of its own is a ragged bar. Two and two reads as a block,
   and the search keeps the line under it. */
@media only screen and (min-width: calc(651rem / 16)) and (max-width: calc(823rem / 16)) {

	.archive-content .filters-bar .filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

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

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

	.archive-content .archive-hero {
		padding-top: var(--module-spacing-medium);
	}

	/* The deck is the headline's second half here, not a paragraph under it. */
	.archive-content .archive-hero .subheading {
		margin-top: calc(var(--text-spacing-xxsmall) * -1);
	}

	/* At this width the featured story is a card among cards: no white panel under the copy, the
	   photograph rounded on all four corners, and the category pill drawn at the cards' size. The
	   pill's `.small` treatment is restated here rather than shared, because the class it comes
	   from cannot change at a breakpoint. */
	.archive-content .featured .media {
		border-radius: 10px;
	}

	.archive-content .featured .media .pill {
		border-radius: 30px;
		font-size: calc(11rem / 16);
		left: var(--text-spacing-xxsmall);
		letter-spacing: 1px;
		line-height: calc(16 / 11);
		padding: 4.5px 16px 3.5px;
		top: var(--text-spacing-xxsmall);
	}

	.archive-content .featured .content {
		background: none;
		padding: var(--text-spacing-small) var(--text-spacing-xsmall);
	}

	/* The button hung 16px into the panel's 48px of padding; with the padding down to 24 there is
	   nothing left to hang into, so the step below the button is the padding itself. */
	.archive-content .featured .btn {
		margin-bottom: 0;
	}

	.archive-content .filters-bar .filters {
		grid-template-columns: 1fr;
	}

	.archive-content .results > :is([jx-form-results-items], .cards) {
		grid-template-columns: 1fr;
	}

	.archive-team .archive-content .results > [jx-form-results-items] {
		grid-template-columns: 1fr;
	}

	.archive-content .listing {
		margin-top: var(--text-spacing-large);
	}

	/* The filter row's own top margin collapses out through the listing and the form around it, so
	   the space above the row is the listing's step and is set there. */
	.archive-post .archive-content .listing {
		margin-top: var(--text-spacing-xxlarge);
	}

	/* One control instead of four: the dropdowns fold behind it and the search keeps its place.
	   `:has()` does the opening — the button carries the state for a screen reader either way, so
	   nothing needs to be told twice. */
	/* The control and the search share the row, the dropdowns take the line under it when they
	   open. Source order is control, dropdowns, search, so the order runs them the other way. */
	.archive-post .archive-content .filters-bar {
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--text-spacing-small);
		/* The row sits closer to the stories it filters than to the featured one above it. */
		margin-bottom: var(--text-spacing-large);
	}

	.archive-post .archive-content .filters-bar .filters-toggle {
		display: inline-flex;
		order: 1;
	}

	/* A zero basis, not the field's own width: with `auto` the row wrapped or held depending on how
	   wide the browser thinks a search input is, and Safari's idea is wider than Chrome's — on a
	   phone that dropped the field onto its own line. With nothing measured, it simply takes the
	   width the label leaves, and the input shrinks with it rather than holding the field open. */
	.archive-post .archive-content .filters-bar .search {
		flex: 1 1 0;
		min-width: 0;
		order: 2;
	}

	.archive-post .archive-content .filters-bar .search-field {
		min-width: 0;
	}

	.archive-post .archive-content .filters-bar .search-field input[type="search"] {
		flex: 1 1 0;
		min-width: 0;
	}

	.archive-post .archive-content .filters-bar .filters {
		flex-basis: 100%;
		order: 3;
	}

	.archive-post .archive-content .filters-bar .filters {
		display: none;
	}

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

	/* The mark rides up 40 as the page scrolls and its own bottom edge is a straight cut, which
	   showed above the featured card at the end of the run. Seated so that the cut lands on the
	   card's top edge there, the rays still read above it and the edge never does. Measured from
	   the band rather than the page, so the header is out of the sum — the hero is not, and a
	   headline that wraps to another line moves the card with it. */
	.archive-post .archive-content {
		position: relative;
	}

	.archive-post .archive-content .sunburst {
		top: 211px;
	}

	.archive-content .results > :is([jx-form-results-items], .cards) {
		gap: 20px;
	}

	/* The mark sits the same distance off the field's right edge that it does off its top and foot
	   — 14 against the caret's own 20, 12 against the disc's 24. Both were reading as a mark pushed
	   into the corner rather than one placed in it. */
	.archive-content .filters-bar .jazzy-select .trigger {
		padding-right: 13px;
	}

	.archive-content .filters-bar .search-field {
		padding-right: 11px;
	}

}