/**
 * Projects
 *
 * A left-aligned head block with the carousel arrows bottom-right, over a row of
 * .card.project. The cards are the global — nothing here restyles one.
 *
 * One <ul.cards> serves both states of the Carousel toggle. JazzyCarousel only wraps the
 * track in .jazzy-carousel-wrapper when it actually activates, so "direct child of
 * .container" is the reliable test for the grid state — it covers Carousel off *and* the
 * static fallback Jazzy leaves when there are too few projects to scroll.
 */

.module.projects .container {
	row-gap: var(--text-spacing-xsmall);
}

.module.projects .container > .eyebrow {
	grid-column: 1 / span 8;
	grid-row: 1;
	margin: 0;
}

.module.projects .container > .heading-5 {
	grid-column: 1 / span 9;
	grid-row: 2;
}

/* The link sits under the heading rather than riding its line, and the pager shares that row and
   its baseline. 8px on top of the container's own 16 makes the 24 the comp measures. */
.module.projects .container > .btn {
	align-self: end;
	grid-column: 1 / span 7;
	grid-row: 3;
	justify-self: start;
	margin-top: var(--text-spacing-xxsmall);
}

.module.projects .arrows {
	align-self: end;
	display: flex;
	gap: var(--text-spacing-xxsmall);
	grid-column: 8 / -1;
	grid-row: 3;
	justify-self: end;
	margin-right: var(--container-breakout-full);
}

/** Style: related — the case study's own deck **/

/* The link goes back beside the heading, hard right, where the page-builder deck drops it under.
   These are two different decks that happen to share a template. */
.module.projects.style-related .container > .btn {
	align-self: center;
	grid-column: 9 / -1;
	grid-row: 2;
	justify-self: end;
	margin-top: 0;
}

.module.projects.style-related .container:not(:has(> .eyebrow)) > .btn {
	grid-row: 1;
}

/* 4px is the pair at the foot — title to location. The type sits 8 above the title, which is that
   gap plus the title's own margin, because a gap cannot vary per pair. */
.module.projects.style-related .card .text {
	gap: 4px;
	transition: margin var(--motion) var(--ease-out);
}

.module.projects.style-related .card .text > .type + * {
	margin-top: 4px;
}

/* Paired so they cancel: the card's height cannot move, and the whole card is a link whose cover
   is an `::after` inside this block — a transform here would make it that cover's containing block
   and shrink the target from the card to the copy. */
.module.projects.style-related .card:is(:hover, :focus-within) .text {
	margin-bottom: 4px;
	margin-top: -4px;
}

.module.projects.style-related .card .type {
	color: var(--charcoal);
}

.module.projects.style-related .card .location {
	color: var(--text-gray);
}

/* With the two sharing a row, the only thing that moves the rows is whether there is an eyebrow —
   the four rules this replaces were a matrix over the button's presence as well. */
.module.projects .container:not(:has(> .eyebrow)) > .heading-5 {
	grid-row: 1;
}

.module.projects .container:not(:has(> .eyebrow)) > .btn,
.module.projects .container:not(:has(> .eyebrow)) .arrows {
	grid-row: 2;
}

/* Without the link there is nothing under the heading for the pager to stand on, and it sat in an
   empty row of its own. It joins the heading's row instead and centres on it — the head block and
   the control that works it read as one line. */
.module.projects .container:not(:has(> .btn)) .arrows {
	align-self: center;
	grid-row: 2;
}

.module.projects .container:not(:has(> .eyebrow)):not(:has(> .btn)) .arrows {
	grid-row: 1;
}

.module.projects:has(.jazzy-static) .arrows {
	display: none;
}

.module.projects .cards {
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.projects .container > .cards,
.module.projects .container > .jazzy-carousel-wrapper {
	grid-column: 1 / -1;
	margin-top: var(--text-spacing-large);
}

.module.projects .container > .jazzy-carousel-wrapper {
	height: auto;
	margin-right: var(--viewport-edge);
}

.module.projects .container > .cards {
	display: grid;
	gap: var(--module-spacing-small) var(--text-spacing-xlarge);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module.projects .cards > li {
	display: flex;
}

.module.projects .cards .card {
	width: 100%;
}

/** One project — a single card on the module's own grid, photograph on five columns, copy beside it **/

.module.projects .container > .cards:has(> li:only-child) {
	grid-template-columns: minmax(0, 1fr);
}

.module.projects .cards > li:only-child .card {
	display: grid;
	gap: 0 var(--gap);
	grid-template-columns: var(--grid);
	grid-template-rows: 1fr auto;
}

.module.projects .cards > li:only-child .card .media {
	grid-column: 1 / span 5;
	grid-row: 1 / -1;
}

.module.projects .cards > li:only-child .card .content {
	align-self: center;
	grid-column: 6 / -1;
	padding: var(--text-spacing-large) var(--text-spacing-large) 0 0;
}

.module.projects .cards > li:only-child .card > .arrow {
	grid-column: 6 / -1;
	grid-row: 2;
	justify-self: end;
	margin: var(--text-spacing-xsmall) var(--text-spacing-xsmall) var(--text-spacing-xsmall) 0;
}

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

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

	.module.projects .container > .eyebrow,
	.module.projects .container > .heading-5 {
		grid-column: 1 / -1;
	}

	.module.projects .container > .btn {
		grid-column: 1 / span 6;
	}

	.module.projects .arrows {
		grid-column: 7 / -1;
	}

	.module.projects .container:not(:has(> .eyebrow)):not(:has(> .btn)) .arrows,
	.module.projects .container:not(:has(> .btn)) .arrows {
		grid-row: auto;
	}

	.module.projects .container > .cards,
	.module.projects .container > .cards:has(> li:only-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* A lone card is just a card from here down — one of the two columns, photograph over copy. */
	.module.projects .cards > li:only-child .card {
		display: flex;
	}

	/* align-self carries over from the grid cut, and in a column it centres the copy sideways. */
	.module.projects .cards > li:only-child .card .content {
		align-self: stretch;
		padding: var(--text-spacing-small) var(--text-spacing-medium);
	}

	.module.projects .cards > li:only-child .card > .arrow {
		margin: auto var(--text-spacing-xsmall) var(--text-spacing-xsmall) 0;
	}

	/* Two, not three. On a tablet two across, so a third would sit alone on a row of its own; on a
	   phone stacked, where a third is one more screen before the page's close. The related run is
	   topped up from the latest projects rather than curated to a length, so dropping one costs
	   nothing. */
	.module.projects.style-related .cards > li:nth-child(n+3) {
		display: none;
	}

	/* The fill the card takes under a cursor, taken at rest: there is no cursor here, and a card
	   that only answers a finger already committed to scrolling past it says nothing. */
	.module.projects.style-related .card {
		background: color-mix(in srgb, var(--aqua) 30%, transparent);
	}

	.module.projects.style-related .card > .arrow {
		opacity: 1;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ 651-950 - Tablet Sizes Only */
/***************************************************************************************************************************************************************************************/

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

	/* The pairing the wider rungs make holds here too: with no link to stand on, the pager sits on
	   the heading's row and centres against it, and the heading gives up the columns it needs.
	   Below this the two stack, which is where the pager gets a row of its own back. */
	.module.projects .container:not(:has(> .btn)) > .heading-5 {
		grid-column: 1 / span 6;
	}

	.module.projects .container:not(:has(> .btn)) .arrows {
		align-self: center;
		grid-row: 2;
	}

	.module.projects .container:not(:has(> .eyebrow)):not(:has(> .btn)) .arrows {
		grid-row: 1;
	}

	.module.projects.style-related .container > .cards {
		gap: var(--text-spacing-medium);
	}

}

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

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

	.module.projects .container > .eyebrow,
	.module.projects .container > .heading-5,
	.module.projects .container > .btn,
	.module.projects .arrows,
	.module.projects .container > .cards,
	.module.projects .container > .jazzy-carousel-wrapper {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.module.projects .container:not(:has(> .eyebrow)):not(:has(> .btn)) .arrows,
	.module.projects .container:not(:has(> .eyebrow)):has(> .btn) .arrows,
	.module.projects .container:not(:has(> .btn)) .arrows {
		grid-row: auto;
	}

	/* The link and the pager share a line when they both fit and the pager drops under when they do
	   not, which a grid row cannot do — it would have to pick one or the other at every width. So
	   the container becomes a wrapping row here, every other part given the whole line, and the two
	   of them left to their own widths. */
	.module.projects .container {
		column-gap: var(--text-spacing-small);
		display: flex;
		flex-wrap: wrap;
	}

	.module.projects .container > * {
		flex-basis: 100%;
	}

	.module.projects .container > .btn,
	.module.projects .arrows {
		flex-basis: auto;
	}

	/* The carousel runs past the container to the screen's edge on a negative right margin, which
	   widens a grid item and only moves a flex one — so the basis carries the same figure and the
	   cut card reaches the edge again. */
	.module.projects .container > .jazzy-carousel-wrapper {
		flex-basis: calc(100% - var(--viewport-edge));
	}

	.module.projects .arrows {
		justify-self: start;
		margin-top: var(--text-spacing-small);
	}

	/* Only where there is a link to share the line with: alone on a line the pager keeps the start
	   and the step it had. */
	.module.projects .container:has(> .btn) .arrows {
		margin-left: auto;
		margin-top: 0;
	}

	.module.projects .container > .cards,
	.module.projects .container > .cards:has(> li:only-child) {
		grid-template-columns: minmax(0, 1fr);
	}

	.module.projects .container > .cards,
	.module.projects .container > .jazzy-carousel-wrapper {
		margin-top: var(--text-spacing-small);
	}

	.module.projects.style-related .container > .cards {
		gap: 20px;
	}

	/* With no link to share with, the pager takes the heading's line when the heading leaves it
	   room, centred against it, and drops under a heading too long for that at half the 40 it
	   used to stand below. The half-step is the container's row gap rather than a margin on the
	   pager, so on a shared line nothing pushes it off centre; the eyebrow above and the deck
	   below give the difference back and keep the steps they had. The least the two may sit
	   apart is 8: the pager is pushed to the far end, so what shows is whatever the heading
	   leaves, and at 24 a two-word heading like "Our Projects" missed the line by 9px. */
	.module.projects .container:not(:has(> .btn)) {
		--pager-step: calc(var(--text-spacing-large) / 2);
		column-gap: var(--text-spacing-xxsmall);
		row-gap: var(--pager-step);
	}

	.module.projects .container:not(:has(> .btn)) > .eyebrow {
		margin-bottom: calc(var(--text-spacing-xsmall) - var(--pager-step));
	}

	.module.projects .container:not(:has(> .btn)) > .heading-5 {
		flex: 1 1 auto;
	}

	.module.projects .container:not(:has(> .btn)) .arrows {
		align-self: center;
		margin-left: auto;
		margin-top: 0;
	}

	.module.projects .container:not(:has(> .btn)) > :is(.cards, .jazzy-carousel-wrapper) {
		margin-top: calc(var(--text-spacing-large) - var(--pager-step));
	}

}