/* Case detail. Visual source: archive-pages/case-detail HTML demo. */

.brem-case-detail-page .hero h1 {
	max-width: 900px;
}

.brem-case-detail-page .role {
	display: block;
	color: var(--brem-blue, #0873ba);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.brem-case-detail-page .chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.brem-case-detail-page .chips span {
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.brem-case-detail-page .snapshot {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 40px;
}

.brem-case-detail-page .snap-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--brem-line, #d6e3eb);
}

.brem-case-detail-page .snap-grid div {
	padding: 16px;
	background: #fff;
	font-size: 14px;
}

.brem-case-detail-page .snap-grid b {
	display: block;
	color: var(--brem-blue, #0873ba);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.brem-case-detail-page .req,
.brem-case-detail-page .challenges,
.brem-case-detail-page .decisions,
.brem-case-detail-page .results,
.brem-case-detail-page .takeaways {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.brem-case-detail-page .challenges,
.brem-case-detail-page .decisions {
	grid-template-columns: repeat(2, 1fr);
}

.brem-case-detail-page .results {
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--brem-line, #d6e3eb);
}

.brem-case-detail-page .takeaways {
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--brem-line, #d6e3eb);
}

.brem-case-detail-page .req article,
.brem-case-detail-page .challenges article,
.brem-case-detail-page .decisions article,
.brem-case-detail-page .related article {
	padding: 22px;
	border: 1px solid var(--brem-line, #d6e3eb);
	background: #fff;
}

.brem-case-detail-page .req ul {
	margin: 10px 0 0;
	padding-left: 18px;
	color: var(--brem-muted, #5c7388);
	font-size: 14px;
}

.brem-case-detail-page .challenges p,
.brem-case-detail-page .decisions p,
.brem-case-detail-page .related p {
	margin: 8px 0 0;
	color: var(--brem-muted, #5c7388);
	font-size: 14px;
}

.brem-case-detail-page .challenges b,
.brem-case-detail-page .decisions b,
.brem-case-detail-page .results b,
.brem-case-detail-page .takeaways b,
.brem-case-detail-page .related b {
	color: var(--brem-blue, #0873ba);
}

.brem-case-detail-page .results div,
.brem-case-detail-page .takeaways div {
	padding: 21px;
	background: #fff;
}

.brem-case-detail-page .why {
	padding: 22px 24px;
	margin-bottom: 20px;
	border: 1px solid var(--brem-line, #d6e3eb);
	background: var(--brem-soft, #eff6fa);
}

.brem-case-detail-page .why b {
	display: block;
	color: var(--brem-blue, #0873ba);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.brem-case-detail-page .process {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.brem-case-detail-page .process div {
	padding: 18px 14px;
	min-height: 210px;
	background: #fff;
	border: 1px solid var(--brem-line, #d6e3eb);
	border-right: 1px solid var(--brem-line, #d6e3eb);
}

.brem-case-detail-page .process h3 {
	margin: 0 0 8px;
	font-size: 18px;
}

.brem-case-detail-page .process-step--active {
	background: var(--brem-navy, #072d51);
	color: #fff;
}

.brem-case-detail-page .process-step--active h3 {
	color: #fff;
}

.brem-case-detail-page .equip {
	display: grid;
	gap: 14px;
}

.brem-case-detail-page .equip article {
	display: grid;
	grid-template-columns: 220px 1fr;
	background: #fff;
	border: 1px solid var(--brem-line, #d6e3eb);
}

.brem-case-detail-page .equip img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 180px;
	object-fit: cover;
	background: #e8f0f5;
}

.brem-case-detail-page .equip article > div {
	display: flex;
	flex-direction: column;
	padding: 20px 24px;
}

.brem-case-detail-page .equip span {
	display: block;
	font-size: 13px;
}

.brem-case-detail-page .equip span + span {
	margin-top: 4px;
}

.brem-case-detail-page .equip p {
	color: var(--brem-muted, #5c7388);
	font-size: 14px;
}

.brem-case-detail-page .equip .role {
	margin-bottom: 8px;
	font-size: 10px;
}

.brem-case-detail-page .equip .text-link {
	margin-top: auto;
	padding-top: 10px;
}

.brem-case-detail-page .fat-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--brem-line, #d6e3eb);
	margin-bottom: 16px;
}

.brem-case-detail-page .fat-facts div {
	padding: 18px;
	background: #fff;
}

.brem-case-detail-page .fat-facts b {
	display: block;
	color: var(--brem-blue, #0873ba);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.brem-case-detail-page .fat-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.brem-case-detail-page .fat-steps div {
	padding: 8px 12px;
	border: 1px solid var(--brem-line, #d6e3eb);
	background: #fff;
	font-size: 12px;
	font-weight: 700;
	color: var(--brem-navy, #072d51);
}

.brem-case-detail-page .evidence-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.brem-case-detail-page .evidence-row img {
	height: 240px;
	object-fit: cover;
	background: #e8f0f5;
}

.brem-case-detail-page .evidence-row figcaption,
.brem-case-detail-page .gallery figcaption {
	padding: 10px 0 0;
	color: var(--brem-muted, #5c7388);
	font-size: 12px;
}

.brem-case-detail-page .timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--brem-line, #d6e3eb);
}

.brem-case-detail-page .timeline div {
	padding: 20px;
	background: #fff;
}

.brem-case-detail-page .timeline span {
	display: block;
	color: var(--brem-blue, #0873ba);
	font-size: 12px;
	font-weight: 800;
	margin-bottom: 8px;
}

.brem-case-detail-page .timeline p {
	margin: 0;
	color: var(--brem-muted, #5c7388);
	font-size: 13px;
}

.brem-case-detail-page .support-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.brem-case-detail-page .support-chips b {
	padding: 7px 11px;
	border: 1px solid var(--brem-line, #d6e3eb);
	background: #fff;
	font-size: 12px;
}

.brem-case-detail-page .gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.brem-case-detail-page .gallery figure {
	margin: 0;
}

.brem-case-detail-page .gallery img {
	height: 190px;
	object-fit: cover;
	background: #e8f0f5;
}

.brem-case-detail-page .related {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}

@media (max-width: 1024px) {
	.brem-case-detail-page .snapshot {
		grid-template-columns: 1fr;
	}

	.brem-case-detail-page .process {
		grid-template-columns: 1fr 1fr;
	}

	.brem-case-detail-page .equip article {
		grid-template-columns: 1fr;
	}

	.brem-case-detail-page .equip img {
		height: 200px;
		min-height: 0;
	}

	.brem-case-detail-page .timeline,
	.brem-case-detail-page .gallery {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.brem-case-detail-page .req,
	.brem-case-detail-page .challenges,
	.brem-case-detail-page .decisions,
	.brem-case-detail-page .results,
	.brem-case-detail-page .related,
	.brem-case-detail-page .evidence-row,
	.brem-case-detail-page .fat-facts {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.brem-case-detail-page .snap-grid,
	.brem-case-detail-page .process,
	.brem-case-detail-page .timeline,
	.brem-case-detail-page .gallery {
		grid-template-columns: 1fr;
	}
}