/* Case study — dark navy 2-column section: left = header + image, right = quote + button. */

.case-study {
	width: 100%;
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
	background: var(--color-blue-overlay);
	color: #fff;
}

.case-study.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.case-study__inner {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
	width: min(calc(100% - 2rem), var(--site-max-width));
	margin-inline: auto;
}

/* ── Left column ────────────────────────────────────── */

.case-study__left {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.5rem);
}

.case-study__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	color: var(--color-brand-red);
	/* Forside 2.0 mock: 16px CASE/BRANDING eyebrow. */
	font-size: 1rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.case-study__eyebrow::before {
	content: '';
	display: inline-block;
	width: 2rem;
	height: 2px;
	background: var(--color-brand-red);
	flex-shrink: 0;
}

.case-study .case-study__heading {
	margin: 0;
	color: #fff;
	font-size: clamp(2rem, 3.5vw, 3rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.08;
}

.case-study__body {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(0.9rem, 1.1vw, 1rem);
	line-height: 1.6;
}

.case-study__media {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 0.75rem;
}

.case-study__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Right column ───────────────────────────────────── */

.case-study__right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(2rem, 4vw, 3rem);
	min-height: 100%;
	padding-top: 0;
}

.case-study--image-right .case-study__inner {
	grid-template-columns: 7fr 5fr;
}

.case-study--image-right .case-study__right {
	justify-content: flex-start;
	padding-top: 0;
}

/* Text-led variant (e.g. Branding): 18px body kept inside the heading's edge,
   button flush left with the text column. */
.case-study--image-right .case-study__body {
	max-width: 34rem;
	font-size: 1.125rem;
}

.case-study--image-right .case-study__actions {
	justify-content: flex-start;
}

.case-study__quote {
	max-width: 42rem;
	margin: 0;
	padding: 0;
	border: none;
}

.case-study__quote-text {
	margin: 0 0 1.5rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(0.9rem, 1.1vw, 1.05rem);
	font-style: italic;
	line-height: 1.7;
}

.case-study__quote-footer {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.2rem;
	text-align: right;
}

.case-study__author-name {
	color: #fff;
	font-size: 0.95rem;
	font-weight: var(--font-weight-bold);
}

.case-study__author-title {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.85rem;
}

.case-study__actions {
	display: flex;
	justify-content: flex-end;
}

.case-study .case-study__button {
	min-width: 12rem;
	padding: var(--button-padding-y) 2rem;
	background: var(--color-brand-red);
	border: 2px solid var(--color-brand-red);
	border-radius: var(--button-radius);
	color: #fff;
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	transition: background 180ms ease, border-color 180ms ease;
}

.case-study .case-study__button:hover,
.case-study .case-study__button:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--color-blue-dark);
	text-decoration: none;
}

/* ── Quote/image alignment (Forside 2.0 mock) ───────── */

/* Image-left cases (Bellagroup, CBS): the quote column must start at the
   image's top edge and the author footer must sit at its bottom edge. The two
   flex columns dissolve into the shared grid so the media and quote share one
   row; header rows stay in column 1. Desktop only — mobile keeps the stack. */
@media (min-width: 60rem) {
	.case-study--image-left .case-study__inner {
		column-gap: clamp(2.5rem, 5vw, 5rem);
		row-gap: clamp(1rem, 2vw, 1.5rem);
		align-items: start;
	}

	.case-study--image-left .case-study__left,
	.case-study--image-left .case-study__right {
		display: contents;
	}

	.case-study--image-left .case-study__eyebrow {
		grid-area: 1 / 1;
	}

	.case-study--image-left .case-study__heading {
		grid-area: 2 / 1;
	}

	.case-study--image-left .case-study__body {
		grid-area: 3 / 1;
	}

	.case-study--image-left .case-study__media {
		grid-area: 4 / 1;
		/* The 4/3 ratio only sets the row's minimum: when the quote column is
		   taller, the image stretches with the row (object-fit: cover crops it)
		   so quote top and author bottom always meet the image's edges. The
		   width must stay pinned to the column — otherwise the stretched height
		   transfers back through the aspect-ratio and widens the image into
		   the quote column. */
		align-self: stretch;
		width: 100%;
		max-width: 100%;
	}

	.case-study--image-left .case-study__quote {
		display: flex;
		flex-direction: column;
		grid-area: 4 / 2;
		align-self: stretch;
	}

	.case-study--image-left .case-study__quote-footer {
		margin-top: auto;
	}

	.case-study--image-left .case-study__actions {
		grid-area: 5 / 2;
		margin-top: clamp(1.5rem, 3vw, 2.5rem);
	}
}

/* ── Responsive ─────────────────────────────────────── */

@media (max-width: 59.9375rem) {
	/* Stack on mobile — needs the extra .case-study specificity to beat the
	   .case-study--image-right/left variant column rules. */
	.case-study .case-study__inner {
		grid-template-columns: 1fr;
	}

	.case-study__right {
		padding-top: 0;
	}
}

@media (max-width: 39.9375rem) {
	.case-study {
		padding-block: 3rem 3.5rem;
	}
}

/* Design-review (mobil): alle brødtekster 14px — case-beskrivelsen følger
   body-tokenet (base.css: --font-size-body = 0.875rem under 48rem). */
@media (max-width: 47.9375rem) {
	.case-study .case-study__body,
	.case-study--image-right .case-study__body {
		font-size: var(--font-size-body);
	}

	/* Branding-segmentet: knappen højrestilles på mobil (den står flush med
	   tekstkolonnen på desktop). */
	.case-study--image-right .case-study__actions {
		justify-content: flex-end;
	}
}

/* WLP-35/36 (forsiden, store skærme): citatet er begrænset til 42rem, men
   knappen "Se flere løsninger" står i kolonnens højre kant. Fra 100rem
   (site-max-width 100rem) er kolonnen bredere end citatet, så navn og titel
   stod et godt stykke til venstre for knappen. Citatblokken skubbes til
   kolonnens højre kant, så footer og knap flugter. Under 100rem fylder
   citatet i forvejen hele kolonnen, og intet ændrer sig. */
@media (min-width: 60rem) {
	.case-study--image-left .case-study__quote {
		justify-self: end;
		width: 100%;
	}
}