/** Partnerships band **/

/* The band carries the overlap itself rather than a page builder carrying it, so the payback is
   stated here too: the pull-up, then 64 down to the label, and 80 under the logos to the band's
   own edge. */
.single.cohort > .wash.margin-overlap {
	padding-block: calc(var(--module-overlap) + var(--module-spacing-small)) var(--module-spacing-medium);
}

/**
 * Cohort detail
 *
 * Three columns on one grid row: the derived section rail in the left margin, the article on
 * the seven middle columns, and the enrolment panel in the right margin. Both rails sit 24px
 * from the viewport, matching the hero band's own inset; only the article is on the container.
 *
 * Source order is article → rail → panel, so the columns are placed and never ordered.
 */

.single.cohort .body {
	padding-block: var(--module-spacing-medium) var(--module-spacing-xlarge);
}

.single.cohort .article {
	grid-column: 3 / span 7;
	grid-row: 1;
	margin-top: var(--text-spacing-small);
	min-width: 0;
}

.single.cohort .article > * + h2:not([class^="heading-"]) {
	margin-top: var(--text-spacing-xxlarge);
}

.single.cohort .article > * + :is(h3, h4):not([class^="heading-"]) {
	margin-top: var(--text-spacing-medium);
}

.single.cohort .article > :first-child {
	margin-top: 0;
}

/*** Follow — the region's accounts at the article's foot ***/

.single.cohort .follow {
	border-top: 1px solid var(--charcoal-15);
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-small);
	margin-top: var(--text-spacing-xxlarge);
	padding-top: var(--text-spacing-large);
}

/* The accordion's last row already rules the article off; a second line under it doubles up. */
.single.cohort .accordions + .follow {
	border-top: 0;
	padding-top: 0;
}

.single.cohort .follow > * {
	margin: 0;
}

.single.cohort .follow .social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	padding: 0;
}

/*** Enrolment panel ***/

/* The card rides the middle of the screen, the way the rail opposite does — so the column is a
   viewport-tall sticky box with the card centred in it. Same cost: it releases when this box's
   foot reaches the article's, a screen earlier than a card-height box would. */
.single.cohort .panel-column {
	align-items: center;
	align-self: start;
	display: flex;
	grid-column: 10 / -1;
	grid-row: 1;
	height: 100vh;
	margin-left: auto;
	margin-right: calc(var(--viewport-edge) + var(--text-spacing-small));
	pointer-events: none;
	position: sticky;
	top: 0;
}

.single.cohort .panel {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-small);
	margin-left: auto;
	background: var(--white);
	max-width: 320px;
	min-width: 0;
	padding: var(--text-spacing-small);
	pointer-events: auto;
}

.single.cohort .panel .request {
	display: flex;
	flex-direction: column;
}

.single.cohort .panel .request > :not(.media) {
	margin-inline: var(--text-spacing-xxsmall);
}

.single.cohort .panel .request > * {
	margin-block: 0;
}

.single.cohort .panel .request > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.single.cohort .panel .request > .facts + .btn {
	margin-top: var(--text-spacing-small);
}

.single.cohort .panel .media {
	aspect-ratio: 272 / 200;
	border-radius: 10px;
}

.single.cohort .panel .facts {
	display: flex;
	flex-direction: column;
	list-style: none;
	/* `list-style: none` hides the markers but leaves the UA's 40px indent, which set every
	   fact row in from the prompt, the button and the legal line that share this column. */
	padding-inline-start: 0;
}

.single.cohort .panel .facts li {
	align-items: center;
	border-bottom: 1px solid var(--charcoal-15);
	display: flex;
	gap: var(--text-spacing-small);
	justify-content: space-between;
	padding-block: 12px;
}

.single.cohort .panel .facts li:first-child {
	padding-top: 0;
}

.single.cohort .panel .facts .eyebrow {
	color: var(--text-gray);
	flex: none;
}

.single.cohort .panel .facts .value {
	text-align: right;
}

.single.cohort .panel .btn {
	width: auto;
}

.single.cohort .panel .request .legal {
	color: var(--text-gray);
	text-align: center;
}

.single.cohort .panel .legal > * {
	margin: 0;
}

.single.cohort .panel .questions {
	background: var(--linen-50);
	border-radius: 10px;
	color: var(--text-gray);
	padding: var(--text-spacing-small);
}

/* The same answer an inline link gives in the article: the colour steps back and the rule drops
   away from the words. No transition, because that one has none either. */
.single.cohort .panel .questions a {
	color: inherit;
	text-underline-offset: 2px;
}

.single.cohort .panel .questions a:is(:hover, :focus-visible) {
	color: color-mix(in srgb, currentColor 85%, transparent);
	text-underline-offset: 4px;
}

.single.cohort .panel .questions > * {
	margin: 0;
	overflow-wrap: anywhere;
}

.single.cohort .panel .questions > .prompt {
	margin-bottom: 4px;
}

.single.cohort .panel .questions > .xsmall-text + * {
	margin-top: 2px;
}

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

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

	/* Stacked above the article rather than beside it: the column stops being a column, and the
	   card stops being centred in one. */
	.single.cohort .panel-column {
		display: block;
		grid-column: 1 / -1;
		grid-row: 2;
		height: auto;
		margin-inline: 0;
		pointer-events: auto;
		position: static;
	}

	/* Stacked it is a run of the page rather than a card beside the article, so it sheds the card:
	   a white panel on a white page only draws an edge around nothing.

	   It is also the grid itself, the request stepping out of the way below, so the questions land
	   at the foot of the column the copy runs down rather than on a full row under everything. The
	   rows close to the step below the one they take beside the article. */
	.single.cohort .panel {
		background: none;
		display: grid;
		gap: var(--text-spacing-xsmall) var(--text-spacing-large);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-inline: 0;
		max-width: none;
		padding-inline: 0;
	}

	.single.cohort .panel .request {
		display: contents;
	}

	.single.cohort .panel .questions {
		grid-column: 2;
	}

	/* The request becomes a grid here, and a grid item fills its cell both ways — which stretched
	   the button to the height of the row beside it. It sizes to its own label again. */
	.single.cohort .panel .btn {
		align-self: start;
		justify-self: start;
	}

	/* On the hero's foot rather than a step below it, half over the photograph — the seat the jump
	   bar takes on any band. The body's own inset is the rest of what it climbs. */
	.single.cohort .module.sticky-navigation.style-rail {
		margin-top: calc(-1 * (var(--module-spacing-medium) + var(--sticky-nav-height) / 2));
	}

	.single.cohort .article {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: var(--module-spacing-small);
	}

	/* Its own crop rather than the column's height, so it is shorter than the copy beside it at
	   some widths and taller at others — centred it reads as one pair either way. */
	.single.cohort .panel .media {
		align-self: center;
		grid-row: span 5;
	}

	.single.cohort .panel .request > :not(.media) {
		margin-inline: 0;
	}

	.single.cohort .panel .request > * + *,
	.single.cohort .panel .request > .facts + .btn {
		margin-top: 0;
	}

	.single.cohort .panel .request .legal {
		text-align: left;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ 651-1200 - Larger Tablet Sizes Only */
/***************************************************************************************************************************************************************************************/

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

	/* The panel had a band's worth of room on either side of it: the jump bar hangs into the top
	   of the one above, and the article below keeps the step it takes beside a rail that runs
	   past it. Neither is doing that work here — the row's own gap is the step. */
	.single.cohort .panel-column {
		margin-top: calc(-1 * var(--text-spacing-medium));
	}

	.single.cohort .article {
		margin-top: 0;
	}

	/* The three places the row gap alone reads tight in the two-column panel: a heading over a
	   list, and each of the two boxes that follow one. */
	.single.cohort .panel .request > .prompt {
		margin-bottom: var(--text-spacing-xxsmall);
	}

	.single.cohort .panel .request > .facts + .btn,
	.single.cohort .panel .questions {
		margin-top: var(--text-spacing-xxsmall);
	}

	/* Its own inset is the one thing that does not halve with the rows around it, and it sat
	   deeper than the copy beside it. The sides keep the measure the text is set on. */
	.single.cohort .panel .questions {
		padding-block: var(--text-spacing-xsmall);
	}

}

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

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

	.single.cohort .panel .media {
		display: none;
	}

	.single.cohort .panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.single.cohort .panel .questions {
		grid-column: 1;
	}

}

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

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

	/* One column again, so neither the panel nor the request is a grid and the questions follow
	   the copy rather than sitting in a second column. */
	.single.cohort .panel {
		display: flex;
		gap: var(--text-spacing-small);
	}

	.single.cohort .panel .request {
		display: flex;
		gap: var(--text-spacing-small);
	}

	/* The headline takes a step off the band's top edge rather than starting on its inset. */
	.single.cohort .module.hero.style-program .content > h1 {
		margin-top: var(--text-spacing-small);
	}

	/* About half the space either end: 68 under the jump bar to 32, 104 under the copy to 56. The
	   bar climbs out of the top inset onto the hero's foot, so its pull is restated from the same
	   figure and it keeps its seat half over the band. With the inset that small the bar's own row
	   no longer folds to nothing, and the grid's 40 between rows is what stands under it — the
	   panel takes 8 of that back. */
	.single.cohort .body {
		padding-block: var(--text-spacing-xsmall) var(--text-spacing-medium);
	}

	.single.cohort .module.sticky-navigation.style-rail {
		margin-top: calc(-1 * (var(--text-spacing-xsmall) + var(--sticky-nav-height) / 2));
	}

	.single.cohort .panel-column {
		margin-top: calc(-1 * var(--text-spacing-xxsmall));
	}

	/* The row's own gap is the step from the panel to the copy, as it is on a tablet: the 48 on top
	   of it was the step the article takes beside a rail, and there is no rail here. */
	.single.cohort .article {
		margin-top: 0;
	}

	.single.cohort .article > * + h2:not([class^="heading-"]) {
		margin-top: var(--text-spacing-large);
	}

}