/*
 * Case study: hero (pages/case-study/hero.php) — on top of the shared page
 * hero (components/page-hero.css): a smaller title (case titles are long),
 * the facts row, and the picture in the brand's rounded frame.
 */

.gb-case-hero__title {
	font-size: var(--gb-step-5);
	line-height: 1.25;
	text-wrap: balance;
}

.gb-case-hero__subtitle {
	display: block;
	margin-block-start: 0.2em;
	font-size: 0.55em;
	color: var(--gb-primary);
}

.gb-case-hero__tagline {
	font-family: var(--gb-font-display);
	color: var(--gb-scene-text);
}

/* ---------- Facts: client · year · services ---------- */

.gb-case-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gb-space-s) var(--gb-space-l);
	margin: var(--gb-space-xs) 0 0;
}

.gb-case-facts__item {
	display: grid;
	gap: 0.2em;
}

.gb-case-facts dt {
	font-size: var(--gb-step--1);
	color: var(--gb-scene-text-muted);
}

.gb-case-facts dd {
	margin: 0;
	font-weight: var(--gb-weight-bold);
	color: var(--gb-scene-text);
}

.gb-case-facts__services {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 0.9em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gb-case-facts__services a {
	color: inherit;
	text-decoration: none;
	border-block-end: 2px solid var(--gb-primary);
}

.gb-case-facts__services a:hover {
	color: var(--gb-primary);
}

.gb-case-hero .gb-review-mark {
	margin-block-start: var(--gb-space-xs);
}

/* ---------- The picture ---------- */

.gb-case-hero__visual {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	max-inline-size: 30rem;
	inline-size: 100%;
	justify-self: center;
	overflow: hidden;
	border: 1px solid var(--gb-color-turquoise-a20);
	border-radius: calc(var(--gb-radius-l) * 2);
	background-color: rgb(255 255 255 / 0.03);
	background-image: radial-gradient(60% 60% at 50% 50%, var(--gb-color-turquoise-a20), transparent 70%);
}

.gb-case-hero__visual--photo {
	aspect-ratio: 4 / 3;
	max-inline-size: 36rem;
}

.gb-case-hero__image {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.gb-case-hero__visual--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(12 35 66 / 0.8), transparent 50%);
	pointer-events: none;
}

.gb-case-hero__art {
	position: absolute;
	inset: 12%;
	inline-size: 76%;
	block-size: 76%;
}

.gb-case-hero__art path {
	fill: none;
	stroke: var(--gb-color-turquoise-a35);
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gb-case-hero__art circle {
	fill: var(--gb-seed);
}

.gb-case-hero__logo {
	position: relative;
	z-index: 1;
}

.gb-case-hero__visual--photo .gb-case-hero__logo {
	position: absolute;
	inset-block-end: var(--gb-space-m);
	inset-inline-start: var(--gb-space-m);
}