/* -------------------------------------------------------------------------- */
/* Case Study Header                                                          */
/* -------------------------------------------------------------------------- */

.case-study-header-section {
	padding-block-start: 6.5rem;
}

.case-study-post-title-wrap {
	margin: 0;
}

.case-study-post-title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-weight: 350;
}


/* Case Study label */

.case-study-header__label {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 0;
	background: transparent;

	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: uppercase;
}


/* Case Study subtitle / manual post excerpt */

.case-study-header__subtitle {
	margin-bottom: 0;
}

.case-study-header__subtitle p {
	margin: 0;
	max-width: 36rem;
	color: var(--wp--preset--color--dark-grey);
	font-size: clamp(
		var(--wp--preset--font-size--medium),
		calc(0.9375rem + 0.65vw),
		1.5rem
	);
	font-weight: 300;
	line-height: 1.5;
}


/* Case Study facts row */

.case-study-header__facts {
	display: grid;
	grid-template-columns:
		minmax(0, 0.7fr)
		minmax(0, 1fr)
		minmax(0, 1.1fr)
		minmax(0, 1.45fr);
	align-items: end;
	gap: 0;
	width: 100%;
	margin-top: var(--wp--preset--spacing--20);
}

.case-study-header__fact.wp-block-group {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
	min-width: 0;
	margin: 0;
	padding-inline: var(--wp--preset--spacing--30);
}

.case-study-header__fact:first-child {
	padding-inline-start: 0;
}

.case-study-header__fact:last-child {
	padding-inline-end: 0;
}

.case-study-header__fact + .case-study-header__fact {
	border-inline-start: 1px solid var(--wp--preset--color--medium-grey);
}


/* Fact icons */

.case-study-header__fact-icon {
	flex: 0 0 auto;
	width: 2.25rem;
	margin: 0;
}

.case-study-header__fact-icon svg {
	display: block;
	width: 100%;
	height: auto;
	color: var(--wp--preset--color--thula-blue);
}


/* Fact text */

.case-study-header__fact-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	min-width: 0;
	margin: 0;
}

.case-study-header__fact-label {
	margin: 0;
	color: var(--wp--preset--color--thula-blue);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.2;
}

.case-study-header__fact-value,
.case-study-header__fact-value time {
	margin: 0;
	color: var(--wp--preset--color--dark-grey);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.3;
}


/* Organisation */

.case-study-header__fact--organisation {
	align-self: start;
	align-items: flex-start;
	overflow: visible;
	padding-inline-start: var(--wp--preset--spacing--20);
}

.case-study-header__fact--organisation .case-study-header__fact-content {
	gap: var(--wp--preset--spacing--10);
	overflow: visible;
}

.case-study-header__organisation-logo {
	position: relative;
	left: 0;
	margin: 0;
	margin-inline-start: 0.5rem;
	overflow: visible;
}

.case-study-header__organisation-logo img {
	display: block;
	width: auto;
	max-width: 14rem;
	height: auto;
	object-fit: contain;
}


/* Header separator */

.case-study-post-separator {
	width: 100%;
	max-width: 72rem;
	height: 1px;
	margin:
		var(--wp--preset--spacing--20)
		auto
		0;
	border: 0;
	background-color: var(--wp--preset--color--thula-blue);
	opacity: 0.4;
}


/* -------------------------------------------------------------------------- */
/* Case Study Content                                                         */
/* -------------------------------------------------------------------------- */

.case-study-content-section {
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: 0;
}

.case-study__content .wp-block-quote {
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--10);
	padding-inline-end: 0;
}


/* -------------------------------------------------------------------------- */
/* Case Study Page CTA                                                        */
/* -------------------------------------------------------------------------- */

/**
 * Constrain the Case Study's Page CTA to the article's wide width.
 *
 * The shared Page CTA keeps its original full-width behaviour
 * everywhere else on the website.
 */
.case-study__content .thula-page-cta--case-study {
	box-sizing: border-box;
	width: min(68rem, calc(100% - 2rem));
	max-width: 68rem;
	margin-inline: auto !important;
}

/**
 * Keep the Case Study CTA container within the viewport on mobile.
 */
@media (max-width: 480px) {

	.case-study__content
		.thula-page-cta--case-study {
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
		border-radius: 0.875rem;
	}
}


/* -------------------------------------------------------------------------- */
/* Case Study Deployment                                                      */
/* -------------------------------------------------------------------------- */

.thula-case-study-deployment-grid .thula-card--icon {
	padding-inline: 1rem !important;
	padding-block: 1.5rem !important;
}

/* Centre a lone final card in a two-column deployment grid. */
@media (min-width: 601px) {
	.thula-case-study-deployment-grid
		> .thula-card--icon:last-child:nth-child(odd):not(:first-child) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(
			(100% - var(--wp--preset--spacing--10)) / 2
		);
	}
}


/* -------------------------------------------------------------------------- */
/* Case Study Impact Figures                                                  */
/* -------------------------------------------------------------------------- */

.thula-case-study-impact-grid {
	gap: var(--wp--preset--spacing--10);
}

.thula-case-study-impact-grid .thula-card--impact {
	padding-inline: 0.5rem !important;
}

.thula-case-study-impact-grid .thula-impact-card__figure {
	min-height: 0 !important;
	margin-block: 0 0.35rem !important;
	line-height: 1.2 !important;
}


/* -------------------------------------------------------------------------- */
/* Responsive Case Study                                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 900px) {

	.case-study-header-section {
		padding-block-start: clamp(
			6.5rem,
			calc(11.2rem - 11vw),
			7.5rem
		);
	}

	.case-study-header__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--wp--preset--spacing--30);

		/* Increase the subtitle-to-facts gap on smaller screens. */
		margin-top: clamp(
			1rem,
			calc(4rem - 5.333vw),
			3rem
		);
	}

	.case-study-header__fact:nth-child(odd) {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.case-study-header__fact:nth-child(even) {
		padding-inline-end: 0;
	}
}


@media (max-width: 600px) {

	.wp-block-group.case-study-header.is-style-site-container,
	.wp-block-group.case-study.is-style-site-container {
		padding-left: var(--wp--preset--spacing--10);
		padding-right: var(--wp--preset--spacing--10);
	}

	/* Reduce spacing so fact labels fit beside icons at 320px. */
	.case-study-header__fact.wp-block-group {
		gap: 0.4rem;
		padding-inline: var(--wp--preset--spacing--10);
	}

	.case-study-header__fact.wp-block-group:nth-child(odd) {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.case-study-header__fact.wp-block-group:nth-child(even) {
		padding-inline-end: 0;
	}

	.case-study-header__fact-icon {
		width: 1.75rem;
	}

	/* Allow the organisation logo to fit within its column. */
	.case-study-header__organisation-logo {
		max-width: min(100%, 8rem);
	}

	.case-study-header__organisation-logo img {
		max-width: 100%;
	}

	.case-study__content .wp-block-quote {
		padding-inline-start: var(--wp--preset--spacing--10);
	}
}


/* -------------------------------------------------------------------------- */
/* Case Study Photographic Header                                             */
/* -------------------------------------------------------------------------- */

/**
 * Reuse the existing Page Hero image and gradient.
 * Keep all custom layout rules scoped to the Case Study.
 */

/* Remove the white header's previous top offset. */
.case-study-header-section--landscape {
	padding-block-start: 0;
}

.case-study-header-hero.thula-page-hero {
	margin: 0;
}

/**
 * Fill the available header height using a vertical layout.
 * Breadcrumbs stay at the top; the title group is centred below.
 */
.case-study-header-hero__inner.wp-block-group.is-style-site-container {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: inherit;

	padding-block-start: 6.5rem;
	padding-block-end: 4rem;
}

/* Keep breadcrumbs left-aligned within the hero container. */
.case-study-header-hero__inner > .wp-block-breadcrumbs {
	box-sizing: border-box;
	width: 100%;
	align-self: stretch;
	margin-inline: 0 !important;
	text-align: left;
}

/**
 * Desktop height - slightly shorter than the standard Page Hero.
 * Allow extra height where necessary for content.
 */
@media (min-width: 901px) {

	.case-study-header-hero.thula-page-hero {
		min-height: 31rem;
	}

	.case-study-header-hero__inner.wp-block-group.is-style-site-container {
		padding-block-start: 4.5rem;
		padding-block-end: 3rem;
	}
}

/**
 * Vertically centre the title group without overriding
 * its horizontal sizing or constrained WordPress layout.
 */
.case-study-header-hero__inner > .case-study-post {
	margin-block: auto;
}

/* Keep the title white against the photographic background. */
.case-study-header-hero .case-study-post-title {
	color: var(--wp--preset--color--white);
}

/* Ensure the subtitle is readable against the dark image. */
.case-study-header-hero .case-study-header__subtitle,
.case-study-header-hero .case-study-header__subtitle p {
	color: rgba(255, 255, 255, 0.94);
}

/* Breadcrumb contrast and accessible keyboard focus. */
.case-study-header-hero .wp-block-breadcrumbs,
.case-study-header-hero .wp-block-breadcrumbs a {
	color: var(--wp--preset--color--white);
	font-weight: 300;
}

.case-study-header-hero .wp-block-breadcrumbs a:hover {
	color: var(--wp--preset--color--light-teal);
}

.case-study-header-hero .wp-block-breadcrumbs a:focus-visible {
	color: var(--wp--preset--color--white);
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

/**
 * Preserve the existing responsive top padding for smaller screens.
 */
@media (max-width: 900px) {
	.case-study-header-hero__inner.wp-block-group.is-style-site-container {
		padding-block-start: clamp(
			6.5rem,
			calc(11.2rem - 11vw),
			7.5rem
		);
	}
}