/* ==========================================================================
   amondi — case study page (single-am_case.php).
   Figma "Work > Details" 158:616 (desktop) / 158:615 (mobile).

   The hero and the body rhythm live here; the blocks in the body
   (before/after list, checklist, quote, device mocks) carry their own CSS.
   Loaded only on case studies, by the template.
   ========================================================================== */

/* ---- Title hero: centred label + headline, then 568px text / flexible media ---- */

.am-case-hero {
	overflow: hidden; /* the phone's shadow must not widen the page */
}

.am-case-hero__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	margin-bottom: 80px;
	text-align: center;
}

.am-case-hero__title {
	max-width: 1200px;
}

.am-case-hero__cols {
	display: flex;
	align-items: center;
	gap: var(--am-col-gap);
}

.am-case-hero__text {
	flex: 0 0 var(--am-img);
	max-width: var(--am-img);
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.am-case-hero__intro strong {
	font-weight: 400;
}

.am-case-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Tint pill (the detail page's service tags). */
.am-pill {
	display: inline-block;
	padding: 12px 32px;
	border-radius: var(--am-radius-pill);
	background: var(--am-tint-12);
	font-size: var(--am-fs-sm);
	font-weight: 300;
	line-height: 1.4;
}

.am-case-hero__media {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 880px;
}

.am-case-hero__media--laptop {
	min-height: 0;
	padding-block: 64px; /* room for the result box to hang below the lid */
}

/*
 * "Headline result": teal glass, hangs off the right edge of the column over
 * the phone. As wide as its text up to 400px, then the label wraps; a fixed
 * single line would run off a phone screen with a longer label.
 */
.am-case-hero__result {
	position: absolute;
	right: 0;
	top: 50%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: max-content;
	max-width: min(100%, 400px);
	padding: 24px;
	transform: translateY(-50%);
	border-radius: var(--am-radius);
	background: var(--am-tint-40);
	-webkit-backdrop-filter: var(--am-blur);
	backdrop-filter: var(--am-blur);
}

.am-case-hero__result-label {
	color: var(--am-white);
	font-size: var(--am-fs-sm);
	font-weight: 400;
}

.am-case-hero__result .am-result__number {
	line-height: 1.2;
}

/* ---- Body: 960px text column, full-width lists and mocks, 80px between blocks ---- */

.am-prose.am-case-body {
	font-size: var(--am-fs-lg);
	line-height: 1.4;
}

.am-prose.am-case-body > * {
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
}

.am-prose.am-case-body > .am-case-ba,
.am-prose.am-case-body > .am-mock {
	max-width: none;
}

.am-prose.am-case-body > * + * {
	margin-top: 80px;
}

/* A text block is eyebrow → h2 → paragraphs, 16 / 24 apart. */
.am-prose.am-case-body > .am-eyebrow + h2,
.am-prose.am-case-body > .am-eyebrow + h3 {
	margin-top: 16px;
}

.am-prose.am-case-body > h2 + p,
.am-prose.am-case-body > h3 + p,
.am-prose.am-case-body > p + p,
.am-prose.am-case-body > p + ul,
.am-prose.am-case-body > p + ol {
	margin-top: 24px;
}

/* Body copy is Light; theme.css gives every <p> Regular, so say so on the paragraphs themselves. */
.am-prose.am-case-body > p:not(.am-eyebrow),
.am-prose.am-case-body > ul,
.am-prose.am-case-body > ol {
	font-weight: 300;
}

.am-prose.am-case-body > h2 {
	font-size: var(--am-fs-h2);
	line-height: 1.2;
	text-wrap: balance;
}

.am-prose.am-case-body > h3 {
	font-size: var(--am-fs-h2-sm);
	line-height: 1.2;
}

.am-prose.am-case-body > .am-eyebrow {
	font-size: var(--am-fs-lg);
}

/* The hairline row lists are not prose lists: no bullets, no gaps between rows. */
.am-prose.am-case-body .am-rows > li + li {
	margin-top: 0;
}

/* ---- Mobile (≤1023): single column, tags stacked, phone with the result box bottom-right ---- */

@media (max-width: 1023px) {
	.am-case-hero__head {
		gap: 24px;
		margin-bottom: 40px;
	}

	.am-case-hero__cols {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.am-case-hero__text {
		flex-basis: auto;
		max-width: none;
	}

	.am-case-hero__tags {
		flex-direction: column;
		align-items: flex-start;
	}

	.am-case-hero__media {
		flex: 0 0 auto; /* a 0 basis in the column direction would collapse the phone's box */
		min-height: 0;
		padding-bottom: 40px;
	}

	.am-case-hero__media--laptop {
		padding-block: 0 96px;
	}

	.am-case-hero__result {
		top: auto;
		bottom: 0;
		max-width: min(100%, 280px);
		transform: none;
		gap: 8px;
	}

	.am-case-hero__result .am-result__number {
		font-size: var(--am-fs-h2-sm);
	}

	.am-case-hero__result .am-result__label {
		font-size: var(--am-fs-body);
	}

	.am-prose.am-case-body > * + * {
		margin-top: 48px;
	}
}