/* ============================================================
   MIN AVA CAMPAIGN — Case Story page CSS
   Selectors target classes directly so they match in the block
   editor iframe as well as on the front-end. Tokens come from
   tokens.css.

   Sections (in order):
     1. .hero ............ reused from campaign.css (DO NOT redeclare)
     2. .principal-section  ink full-bleed quote with aside
     3. .beforeafter-section two-panel før/efter comparison
     4. .sylvester ........ image-left split with quote + btn-ink CTA
     5. .closing-cta ...... ink full-bleed final CTA

   Note: .reveal / .reveal-delay-N classes from the mockup are NOT
   used here — JS isn't wired up in WordPress. Sections render static.
   ============================================================ */


/* ============================================================
   2) PRINCIPAL SECTION — ink full-bleed, aside left, quote right
   ============================================================ */

.principal-section {
	background-color: var(--linen-mid);
	padding: var(--space-2xl) clamp(1.5rem, 7vw, 6rem);
	margin: 0;
}

.principal-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--space-xl);
	align-items: start;
}

@media (max-width: 860px) {
	.principal-inner {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
}

.principal-aside {
	padding-top: 0.25em;
	margin: 0;
}

.principal-role-label {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay-deep);
	margin: 0 0 var(--space-sm);
}

.principal-name {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 900;
	line-height: 1.1;
	color: var(--ink);
	margin: 0 0 var(--space-xs);
}

.principal-school {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--ink-soft);
	margin: 0;
}

.principal-quotes {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin: 0;
}

.principal-quote-item {
	position: relative;
	padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 1.5rem);
	background-color: var(--linen);
}

.principal-quote-item::before {
	content: '\201C';
	position: absolute;
	top: calc(var(--space-md) - 0.4em);
	left: calc(var(--space-md) - 0.1em);
	font-family: var(--font-display);
	font-size: calc(var(--text-3xl) * 1.2);
	font-weight: 900;
	line-height: 1;
	color: var(--clay);
	pointer-events: none;
}

.principal-quote-item p {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 400;
	font-style: normal;
	line-height: 1.55;
	letter-spacing: -0.005em;
	color: var(--ink);
	max-width: 56ch;
	margin: 0;
}

/* Multi-paragraph long-form quotes (full case story) — give vertical
   rhythm between paragraphs so it reads as flowing prose rather than
   one collapsed wall of text. */
.principal-quote-item p + p {
	margin-top: var(--space-md);
}


/* ============================================================
   3) BEFORE / AFTER — two-panel full-bleed comparison
   ============================================================ */

.beforeafter-section {
	background-color: var(--linen);
	margin: 0;
	padding: 0;
}

.beforeafter-header {
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--space-2xl) clamp(1.5rem, 6vw, 5rem) var(--space-lg);
	text-align: center;
}

.beforeafter-label {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay);
	margin: 0 0 var(--space-sm);
}

.beforeafter-heading {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--ink);
	max-width: 22ch;
	margin: 0 auto;
}

.beforeafter-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 0;
}

@media (max-width: 860px) {
	.beforeafter-grid {
		grid-template-columns: 1fr;
	}
}

.beforeafter-panel {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: var(--space-xl) clamp(1.5rem, 5vw, 4.5rem);
	margin: 0;
	min-height: 32rem;
}

.beforeafter-panel--before {
	background-color: var(--ink);
	color: var(--warm-white);
}

.beforeafter-panel--after {
	background-color: var(--clay);
	color: var(--warm-white);
}

.beforeafter-num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(5rem, 9vw, 8rem);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.04em;
	margin: 0 0 var(--space-md);
}

.beforeafter-panel--before .beforeafter-num {
	color: var(--clay-light);
}

.beforeafter-panel--after .beforeafter-num {
	color: var(--clay-deep);
}

.beforeafter-sub {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 var(--space-md);
}

.beforeafter-panel--before .beforeafter-sub {
	color: var(--clay-light);
}

.beforeafter-panel--after .beforeafter-sub {
	color: oklch(0.94 0.025 60 / 0.85);
}

.beforeafter-quote {
	margin: 0;
	padding: var(--space-md) 0 0;
	border-top: 1px solid oklch(0.94 0.025 60 / 0.18);
}

.beforeafter-panel--after .beforeafter-quote {
	border-top-color: oklch(0.94 0.025 60 / 0.32);
}

.beforeafter-quote p {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--warm-white);
	max-width: 36ch;
	margin: 0 0 var(--space-md);
}

.beforeafter-quote cite {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.04em;
}

.beforeafter-panel--before .beforeafter-quote cite {
	color: var(--clay-light);
}

.beforeafter-panel--after .beforeafter-quote cite {
	color: oklch(0.94 0.025 60 / 0.75);
}


/* ============================================================
   4) SYLVESTER — image-left split, text-right on linen
   ============================================================ */

.sylvester {
	display: grid;
	grid-template-columns: 50% 50%;
	min-height: 80vh;
	background-color: var(--linen-mid);
	margin: 0;
	padding: 0;
}

@media (max-width: 860px) {
	.sylvester {
		grid-template-columns: 1fr;
		min-height: auto;
	}
}

.sylvester-image {
	position: relative;
	overflow: hidden;
	background-color: var(--linen-dark);
	margin: 0;
	min-height: 24rem;
	height: 100%;
	display: flex;
}

/* Inside the figure wrapper, the wp:image renders an inner figure that
   needs to stretch too so the img fills the grid cell instead of leaving
   empty space below the image. */
.sylvester-image,
.sylvester-image > * {
	width: 100%;
	height: 100%;
}

.sylvester-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	display: block;
}

.sylvester-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		transparent 50%,
		oklch(0.89 0.030 62 / 0.5) 100%
	);
	pointer-events: none;
}

@media (max-width: 860px) {
	/* Image first on mobile */
	.sylvester-image {
		order: -1;
	}
}

.sylvester-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-xl) clamp(1.5rem, 5vw, 4.5rem);
	background-color: var(--linen-mid);
	margin: 0;
}

.sylvester-label {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--clay);
	margin: 0 0 var(--space-sm);
}

.sylvester-heading {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--ink);
	margin: 0 0 var(--space-md);
	max-width: 18ch;
}

.sylvester-body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--ink-soft);
	line-height: 1.7;
	margin: 0 0 var(--space-md);
	max-width: 56ch;
}

.sylvester-quote {
	background-color: var(--linen-dark);
	padding: var(--space-md);
	margin: var(--space-sm) 0 var(--space-md);
	border-top: 3px solid var(--clay);
}

/* Override core blockquote default left border on the Sylvester quote
   (campaign uses a top accent instead). */
.sylvester .wp-block-quote.sylvester-quote {
	border-left: none;
}

/* Same for the Før/Efter quotes — the panel border-top is the accent. */
.beforeafter-section .wp-block-quote.beforeafter-quote {
	border-left: none;
}

.sylvester-quote p {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-style: italic;
	line-height: 1.7;
	color: var(--ink);
	max-width: none;
	margin: 0;
}

.sylvester-quote cite {
	display: block;
	margin-top: var(--space-xs);
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-style: normal;
	font-weight: 600;
	color: var(--clay-deep);
	letter-spacing: 0.02em;
}

.sylvester-cta {
	margin: var(--space-sm) 0 0;
	max-width: none;
}

/* ============================================================
   .btn-ink — ported from mockup lines 192-230
   Used inside .sylvester-text as a square-cornered ink button.
   ============================================================ */

.btn-ink,
.wp-block-button.is-style-ink > .wp-block-button__link {
	display: inline-block;
	background-color: var(--ink);
	color: var(--warm-white);
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 0.85em 2em;
	border: 2px solid var(--ink);
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
	transition:
		background-color 0.3s var(--ease-out-quart),
		color 0.3s var(--ease-out-quart),
		border-color 0.3s var(--ease-out-quart),
		transform 0.3s var(--ease-out-quart);
}

.btn-ink:hover,
.btn-ink:focus-visible,
.wp-block-button.is-style-ink > .wp-block-button__link:hover,
.wp-block-button.is-style-ink > .wp-block-button__link:focus-visible {
	background-color: transparent;
	color: var(--ink);
	border-color: var(--ink);
	transform: translateY(-2px);
	outline: none;
}

.btn-ink:focus-visible,
.wp-block-button.is-style-ink > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}


/* ============================================================
   CASE RECOMMEND — narrow centered "Vi anbefaler at" band
   Used at the bottom of /case to surface the introduction guidance
   from the printed flyer. Uses shared .ava-eyebrow + heading classes.
   ============================================================ */

.case-recommend {
	background-color: var(--linen);
	padding: var(--space-2xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
}

.case-recommend-inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.case-recommend-inner > .ava-eyebrow {
	margin-left: auto;
	margin-right: auto;
}

.case-recommend-heading {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--ink);
	margin: 0 auto var(--space-md);
	max-width: 22ch;
}

.case-recommend-body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.75;
	color: var(--ink-soft);
	margin: 0 auto;
	max-width: 60ch;
}


/* ============================================================
   5) CLOSING CTA — ink full-bleed
   ============================================================ */

.closing-cta {
	background-color: var(--ink);
	padding: var(--space-2xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
	position: relative;
	overflow: hidden;
}

.closing-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at 80% 50%,
		oklch(0.40 0.08 42 / 0.4) 0%,
		transparent 65%
	);
	pointer-events: none;
}

.closing-cta-inner {
	position: relative;
	max-width: 700px;
	margin: 0 auto 0 0;
}

@media (min-width: 1200px) {
	.closing-cta-inner {
		margin-left: max(0px, calc((100% - 1100px) / 2));
	}
}

.closing-cta-label {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay-light);
	margin: 0 0 var(--space-md);
}

.closing-cta-heading {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--warm-white);
	margin: 0 0 var(--space-md);
}

.closing-cta-heading em {
	font-style: normal;
	color: var(--clay-light);
}

.closing-cta-body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: oklch(0.72 0.025 52);
	line-height: 1.7;
	max-width: 55ch;
	margin: 0 0 var(--space-lg);
}

.closing-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin: 0;
}

.closing-cta-links {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid oklch(0.35 0.04 42);
	display: flex;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.closing-cta-links a {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: oklch(0.58 0.025 48);
	text-decoration: underline;
	text-decoration-color: oklch(0.40 0.04 44);
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.closing-cta-links a:hover,
.closing-cta-links a:focus-visible {
	color: var(--clay-light);
	outline: none;
}

.closing-cta-links p {
	margin: 0;
}


/* ============================================================
   BUTTON BRIDGE — non-hero CTA rows
   campaign.css scopes its button bridge to .hero-cta-row only,
   so we re-bridge .closing-cta-row buttons here. Square corners.
   ============================================================ */

.closing-cta-row .wp-block-button > .wp-block-button__link {
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 0.85em 2em;
	border-radius: 0;
	transition:
		background-color 0.3s var(--ease-out-quart),
		border-color 0.3s var(--ease-out-quart),
		color 0.3s var(--ease-out-quart),
		transform 0.3s var(--ease-out-quart);
}

.closing-cta-row .wp-block-button.is-style-fill > .wp-block-button__link {
	background-color: var(--clay);
	color: var(--warm-white);
	border: none;
}

.closing-cta-row .wp-block-button.is-style-fill > .wp-block-button__link:hover,
.closing-cta-row .wp-block-button.is-style-fill > .wp-block-button__link:focus-visible {
	background-color: var(--clay-deep);
	transform: translateY(-2px);
	outline: none;
}

.closing-cta-row .wp-block-button.is-style-fill > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--clay-deep);
	outline-offset: 3px;
}

.closing-cta-row .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--warm-white);
	border: 2px solid oklch(0.94 0.025 60 / 0.5);
	padding: 0.80em 1.9em;
}

.closing-cta-row .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.closing-cta-row .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: transparent;
	border-color: var(--warm-white);
	color: var(--warm-white);
	transform: translateY(-2px);
	outline: none;
}