/**
 * Project case study
 *
 * A fixed spine, a re-arrangeable middle and a tail of shipped modules. This file carries the
 * spine and the two sections that aren't modules; the quote is testimonial/panel and the tail
 * is projects + cta.
 *
 * It does NOT load single.css — a case study shares nothing with the article shell, so
 * template-assets.php returns early for any post type with its own template.
 */

.case-study {
	isolation: isolate;
	overflow-x: clip;
	padding-bottom: var(--module-spacing-large);
	position: relative;
}

.case-study > .sunburst {
	color: color-mix(in srgb, var(--sun) calc(var(--jazzy-progress, 0) * 100%), var(--charcoal-pale));
	height: 528px;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	right: 0;
	scale: calc(.65 + var(--jazzy-progress, 0) * .35);
	top: calc(-1 * (var(--module-spacing-medium) + var(--text-spacing-small)));
	transform-origin: 100% 0;
	width: 682px;
	z-index: -1;
}

.case-study > .sunburst svg {
	display: block;
	height: 564px;
	left: 0;
	max-width: none;
	position: absolute;
	top: -36px;
	transform: rotate(180deg) translate(0, calc(var(--jazzy-progress, 0) * 40px));
	transform-origin: center;
	width: 1188px;
}

/** Hero **/

.case-study .hero {
	margin-top: var(--module-spacing-medium);
}

.case-study .hero > * {
	margin: 0;
	max-width: 887px;
}

.case-study .hero > .pill {
	max-width: none;
	width: fit-content;
}

.case-study .hero > * + * {
	margin-top: var(--text-spacing-medium);
}

.case-study .hero .deck {
	margin-top: var(--text-spacing-xsmall);
}

.case-study .hero .meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xsmall);
}

.case-study .hero .place {
	align-items: center;
	display: flex;
	gap: 12px;
}

.case-study .hero .place .icon {
	align-items: center;
	background: var(--aqua);
	border-radius: 30px;
	color: var(--charcoal);
	display: flex;
	height: 32px;
	justify-content: center;
	width: 32px;
}

.case-study .hero .meta .region::before {
	background: var(--charcoal-25);
	content: '';
	display: inline-block;
	height: 18px;
	margin-right: var(--text-spacing-xsmall);
	vertical-align: middle;
	width: 2px;
}

.case-study .hero .meta p {
	margin: 0;
}

/** Featured image **/

.case-study .media.featured {
	aspect-ratio: 1312 / 700;
	clip-path: inset(0 calc(var(--module-spacing-small) * (1 - var(--jazzy-progress, 0))));
	margin-top: var(--module-spacing-medium);
}

/** Facts band **/

.case-study .facts {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	list-style: none;
	margin: var(--text-spacing-large) 0 0;
	padding: 0;
}

/* On every cell rather than between them: the comp opens the band with a rule as well as dividing
   it with them, so the first fact is inside the measure rather than starting outside it. */
.case-study .facts > li {
	border-left: 1px solid var(--charcoal-15);
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	padding: var(--text-spacing-xsmall) var(--text-spacing-small);
}

.case-study .facts p {
	margin: 0;
}

.case-study .facts .large {
	color: var(--dark-teal);
}

/** Description + details panel **/

.case-study .body {
	align-items: start;
	margin-top: var(--module-spacing-medium);
}

.case-study .description {
	grid-column: 1 / span 7;
}

.case-study .body > .panel {
	background: var(--white);
	border-radius: 10px;
	grid-column: 9 / -1;
	margin-right: var(--container-breakout);
	overflow: hidden;
	padding: var(--text-spacing-large) var(--text-spacing-large) var(--module-spacing-medium);
	position: relative;
}

.case-study .body > .panel .pattern {
	background: var(--pattern, url('../svgs/pattern-bar.svg')) no-repeat left top / 100% auto;
	display: block;
	height: 24px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.case-study .body > .panel > h2 {
	margin: var(--text-spacing-small) 0 var(--text-spacing-small);
}

.case-study .body > .panel dl {
	margin: 0;
	position: relative;
}

/* Rule under each row rather than over it: the comp leaves the heading clear and closes the
   list with a line. */
.case-study .body > .panel .row {
	align-items: baseline;
	border-bottom: 1px solid var(--charcoal-15);
	display: flex;
	gap: var(--text-spacing-small);
	justify-content: space-between;
	padding: 12px 0;
}

.case-study .body > .panel dt,
.case-study .body > .panel dd {
	margin: 0;
}

/* The label is the quieter half of the pair — the value carries the row. */
.case-study .body > .panel dt {
	color: var(--text-gray);
}

/* The value keeps its own column and wraps inside it. Left to wrap freely it dropped below
   the label — Project Type and Partner are both long enough to do it — and the row stopped
   reading as a pair. The value column is 152 of 350. */
.case-study .body > .panel dt {
	flex: 1 1 auto;
	min-width: 0;
}

.case-study .body > .panel dd {
	flex: 0 1 auto;
	margin-left: auto;
	max-width: 45%;
	text-align: right;
}

.case-study .body > .panel .watermark {
	bottom: 0;
	color: var(--charcoal);
	opacity: .05;
	pointer-events: none;
	position: absolute;
	/* Off the panel's right edge, so the panel's own `overflow` crops it: at `right: 0` the whole
	   mark sat inside the box and read as a shape parked in the corner rather than one the corner
	   is cutting. */
	right: -200px;
	width: 460px;
}

.case-study .body > .panel .watermark svg {
	display: block;
	max-width: none;
	width: 100%;
}

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

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

	.case-study .body {
		display: block;
	}

	.case-study .media.featured {
		clip-path: none;
	}

	.case-study .body > .panel {
		margin-right: 0;
		margin-top: var(--module-spacing-small);
	}

	.case-study .facts {
		column-gap: var(--text-spacing-medium);
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--text-spacing-medium);
	}

	.case-study .facts > li {
		border-left: 0;
		padding: 0;
	}

	/* Reaching the top of the screen — the pull above is the hero's own inset, and the page starts
	   a step below the header on top of it. Arrived rather than arriving, too: the run of scroll
	   the growth and the warming are measured against is most of the screen here, so the burst
	   would spend it half-drawn. */
	.case-study > .sunburst {
		color: var(--charcoal-pale);
		scale: .65;
		top: calc(-1 * (var(--module-spacing-medium) + var(--text-spacing-small) + var(--text-spacing-xxsmall)));
	}

	.case-study > .sunburst svg {
		transform: rotate(180deg);
	}

	.case-study .hero .deck {
		margin-top: calc(-1 * var(--text-spacing-xxsmall));
	}

}

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

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

	/* Three to a row, so a short last row keeps the column width the rows above set rather than
	   spreading to fill. */
	.case-study .facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Back between the columns now that there are three of them, with the cell's own run either
	   side of the rule — the band opens on one as well, which is why every cell carries it. */
	.case-study .facts > li {
		border-left: 1px solid var(--charcoal-15);
		padding-left: var(--text-spacing-small);
	}

}

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

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

	/* The tablet mark scaled to the screen whole. Only its width used to follow the screen: the
	   drawing shrank inside an SVG still 564px tall, so it floated in the middle of that box and the
	   frame cut it to a sliver with a straight edge above and below. Every figure is now the tablet
	   one times the same factor, and the frame starts at the top of the screen — the header's bar
	   and the hero's margin, which collapses out through the article — so the drawing's own
	   straight side is off the page and the rays come down past the header as they do there. */
	.case-study > .sunburst {
		height: calc(131vw * 528 / 1188);
		top: calc(-1 * (76px + var(--module-spacing-medium)));
		width: 75vw;
	}

	.case-study > .sunburst svg {
		height: calc(131vw * 564 / 1188);
		top: calc(131vw * -36 / 1188);
		width: 131vw;
	}

	.case-study .hero > * + * {
		margin-top: var(--text-spacing-small);
	}

	/* The small pill's measurements, in the category's own colour. Restated rather than taken from
	   `.small`, because a class cannot change at a breakpoint. */
	.case-study .hero > .pill {
		border-radius: 30px;
		font-size: calc(11rem / 16);
		letter-spacing: 1px;
		line-height: calc(16 / 11);
		padding: 4.5px 16px 3.5px;
	}

	/* On one line the rule sits a small step off the place and the region either side of it. When
	   the region drops to a line of its own the rule has nothing to divide, so it goes and the
	   region lines up under the place's text rather than its icon — script.js marks that state,
	   measured with the class off. The inset is the icon and the gap beside it. */
	.case-study .hero .meta {
		column-gap: var(--text-spacing-xxsmall);
	}

	.case-study .hero .meta .region::before {
		margin-right: var(--text-spacing-xxsmall);
	}

	.case-study .hero .meta.meta-stacked .region::before {
		display: none;
	}

	.case-study .hero .meta.meta-stacked {
		gap: 4px;
	}

	.case-study .hero .meta.meta-stacked .region {
		padding-left: calc(32px + 12px);
	}

	.case-study .facts {
		row-gap: var(--text-spacing-small);
	}

	/* The rule opens each fact here too, as it does on a tablet, a step closer to its figure. */
	.case-study .facts > li {
		border-left: 1px solid var(--charcoal-15);
		padding-left: var(--text-spacing-xsmall);
		row-gap: 4px;
	}

	.case-study .media.featured {
		aspect-ratio: 3 / 2;
	}

	.case-study .body > .panel {
		padding: var(--text-spacing-medium) var(--text-spacing-small);
	}

	.case-study .body > .panel > h2 {
		margin-bottom: var(--text-spacing-xsmall);
	}

	/* A band that closes the page meets the footer, as it does on the page-builder pages. The
	   module's own margin is already dropped by the global rule; what was left is the article's
	   foot padding, which is for a page that ends on its own ground. */
	.case-study:has(> .wash:last-child > .module:is(.cta, .newsletter):last-child),
	.case-study:has(> .module:is(.cta, .newsletter)[class*="bg-"]:last-child) {
		padding-bottom: 0;
	}

}