/*
 * Mall: Enskilt vunnet mål (single-case.php) — Figma 98:5686.
 */

/* ==========================================================================
   Hero — Figma 98:5687 / 98:5708. Bygger på blocks/hero-service/style.css.
   Desktop (≥768): höjd 746, rubrik 55/1.2 24 under brödsmulorna (ingen Trustpilot), ingress · 24 · metarad · 40 · knappar.
   Mobil (<768):   härledd — rubrik 36 (Hero - Service mobil), metarad radbryts, knappar staplade fullbreda.
   ========================================================================== */

.b-hero-service--case .b-hero-service__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2.5rem; /* 40px */
	width: 100%;
}

.b-hero-service--case .b-hero-service__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem; /* 24px */
}

.b-hero-service--case .b-hero-service__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem; /* 8px (härledd) / 32px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.b-hero-service__meta-item {
	display: flex;
	align-items: center;
	gap: 0.5rem; /* 8px */
	color: #fafafa; /* Figma 98:5927 */
	font-family: var(--font-family-heading);
	font-size: 1rem; /* 16px */
	line-height: 1.15;
	white-space: nowrap;
}

/* Taggen länkar till tjänstesidan (beslut): ser ut som texten, utan understrykning. */
.b-hero-service__meta-link {
	color: inherit;
	text-decoration: none;
}

.b-hero-service__meta-icon.c-icon {
	width: 1rem;  /* 16px */
	height: 1rem;
	color: var(--color-bg-white);
}

.b-hero-service--case .b-hero-service__buttons {
	display: flex;
	flex-direction: column;
	gap: 1rem; /* 16px (härledd) */
	width: 100%;
}

.b-hero-service--case .b-hero-service__button {
	width: 100%;
}

@media (min-width: 768px) {
	.b-hero-service--case .b-hero-service__inner {
		min-height: 46.625rem; /* 746px (Figma 98:5687) */
	}

	.b-hero-service--case .b-hero-service__header {
		margin-top: 1.5rem; /* 24px: brödsmulor slutar y167, rubrik y191 */
	}

	.b-hero-service--case .b-hero-service__heading {
		font-size: var(--font-size-h2); /* 55px */
		line-height: var(--line-height-heading); /* 1.2 */
	}

	.b-hero-service--case .b-hero-service__buttons {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 2rem; /* 32px */
		width: auto;
	}

	.b-hero-service--case .b-hero-service__button {
		width: auto;
	}
}

/* ==========================================================================
   Innehåll — Figma 98:6085 (sammanfattning), 98:6158 (referat + utfall), 98:6086 (sidopanel).
   Desktop (≥1024): grid 839 / 405 (gap 36), padding 76/58. Vänster: sammanfattning · 48 · referat (p24) med utfall 48 under.
                    Sidopanel sticky under Ankarnav + 24 (härledd), följer headerns in/utglidning.
   Mobil (<1024):   härledd — staplat (sammanfattning → referat → sidopanel), padding 48, rutor p24, rubriker via tokens.
   ========================================================================== */

.b-case-body {
	padding-block: 3rem; /* 48px (härledd) */
}

.b-case-body__layout {
	display: flex;
	flex-direction: column;
	gap: 3rem; /* 48px (härledd) */
}

.b-case-body__main {
	display: flex;
	flex-direction: column;
	gap: 3rem; /* 48px */
	min-width: 0;
}

/* Kort sammanfattning — Figma 98:6085 */
.b-case-body__summary {
	display: flex;
	flex-direction: column;
	gap: 1.125rem; /* 18px */
	padding: 1.5rem; /* 24px (härledd) */
	background-color: var(--color-brand-200);
}

.b-case-body__summary-title {
	color: var(--color-neutral-900);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h4); /* 35px desktop / 25px mobil */
	font-weight: 400;
	line-height: var(--line-height-heading);
}

.b-case-body .b-case-body__summary-list {
	display: flex;
	flex-direction: column;
	gap: 1.125rem; /* 18px */
	margin: 0;
	padding-left: 1.6875rem; /* 27px (Figma ms-27) */
	list-style: disc;
	color: #000; /* Figma 98:6061: text-black */
	font-size: var(--font-size-body-l); /* 18px */
	line-height: var(--line-height-body);
}

/* Referat (Gutenberg: Rubrik, Stycke, Citat, Lista) — Figma 98:6158 */
.b-case-body__article {
	display: flex;
	flex-direction: column;
	gap: 3rem; /* 48px */
}

.b-case-body__content {
	color: var(--color-neutral-900);
	font-size: var(--font-size-body-l); /* 18px */
	line-height: 1.55;
}

.b-case-body__content > * {
	margin: 0;
}

/* Stycke → stycke: en tom rad (Figma 98:6163). */
.b-case-body__content > * + * {
	margin-top: 1.55em;
}

.b-case-body__content h2,
.b-case-body__content h3 {
	color: var(--color-neutral-900);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h3); /* 44px desktop / 28px mobil */
	font-weight: 400;
	line-height: var(--line-height-heading);
}

/* Nytt avsnitt: 48 före rubriken, 24 ned till texten. */
.b-case-body__content > * + h2,
.b-case-body__content > * + h3 {
	margin-top: 3rem;
}

.b-case-body__content > h2 + *,
.b-case-body__content > h3 + * {
	margin-top: 1.5rem;
}

.b-case-body__content ul,
.b-case-body__content ol {
	padding-left: 1.6875rem; /* 27px — som sammanfattningen */
}

/* Citat — Figma 102:6219: citattecken 45×40 · 24 · Gloock 40/1.3 Brand/700. */
.b-case-body__content .wp-block-quote {
	margin-block: 3rem 0;
	padding: 0;
	border: 0;
	color: var(--color-brand-700);
	font-family: var(--font-family-heading);
	font-size: 1.75rem; /* 28px (härledd) */
	line-height: 1.3;
}

.b-case-body__content .wp-block-quote + * {
	margin-top: 3rem;
}

.b-case-body__content .wp-block-quote::before {
	content: "";
	display: block;
	width: 2.84rem;   /* 45.44px */
	height: 2.488rem; /* 39.808px */
	margin-bottom: 1.5rem; /* 24px */
	background-color: currentColor;
	-webkit-mask: url("../../icons/quote.svg") no-repeat center / contain;
	mask: url("../../icons/quote.svg") no-repeat center / contain;
}

.b-case-body__content .wp-block-quote p {
	margin: 0;
}

.b-case-body__content .wp-block-quote cite {
	display: block;
	margin-top: 1rem;
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-m);
	font-style: normal;
	line-height: var(--line-height-body);
}

/* Utfall — Figma 102:6220 */
.b-case-body__result {
	display: flex;
	flex-direction: column;
	gap: 1.125rem; /* 18px */
	padding: 1.5rem; /* 24px (härledd) */
	background-color: var(--color-brand-200);
	color: var(--color-neutral-900);
}

.b-case-body__result-title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h3); /* 44px desktop / 28px mobil */
	font-weight: 400;
	line-height: var(--line-height-heading);
}

.b-case-body__result-label {
	color: var(--color-brand-900);
}

.b-case-body__result-text {
	font-size: var(--font-size-body-l); /* 18px */
	line-height: var(--line-height-body);
}

/* Sidopanel — Figma 98:6086 */
.b-case-body__sidebar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2.5rem; /* 40px */
	padding: 1.5rem; /* 24px (härledd) */
	background-color: var(--color-brand-1000);
	color: var(--color-bg-white);
}

.b-case-body__sidebar-header {
	display: flex;
	flex-direction: column;
	gap: 1.0625rem; /* 17px */
}

.b-case-body__sidebar-title {
	color: inherit;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h4); /* 35px desktop / 25px mobil */
	font-weight: 400;
	line-height: var(--line-height-heading);
}

.b-case-body__sidebar-text,
.b-case-body__sidebar-note {
	font-size: var(--font-size-body-m); /* 14px */
	line-height: var(--line-height-body);
}

.b-case-body__sidebar-buttons {
	display: flex;
	flex-direction: column;
	gap: 1.0625rem; /* 17px */
}

.b-case-body__sidebar-button {
	width: 100%;
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
	.b-case-body {
		--case-header: 4.5rem; /* 72px — scrollad header desktop */
		--case-nav: 0px;
		--case-sticky-gap: 1.5rem; /* 24px (härledd) */
		padding-block: 4.75rem 3.625rem; /* 76px / 58px (Figma 824 → 900, 3301 → 3359) */
	}

	.b-case-body--has-nav {
		--case-nav: 5rem; /* 80px — Ankarnav desktop */
	}

	.b-case-body__layout {
		display: grid;
		grid-template-columns: minmax(0, 52.4375rem) minmax(0, 25.3125rem); /* 839px / 405px */
		justify-content: space-between;
		align-items: start;
		column-gap: 2.25rem; /* 36px */
	}

	.b-case-body--no-sidebar .b-case-body__layout {
		grid-template-columns: minmax(0, 52.4375rem);
	}

	.b-case-body__summary {
		padding: 2.5rem; /* 40px */
	}

	.b-case-body__article {
		padding: 1.5rem; /* 24px (Figma 98:6158) */
	}

	.b-case-body__content .wp-block-quote {
		font-size: 2.5rem; /* 40px */
	}

	.b-case-body__result {
		padding: 2.5rem; /* 40px */
	}

	.b-case-body__sidebar {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--case-header) + var(--case-nav) + var(--case-sticky-gap));
		padding: 2.5rem; /* 40px */
		/* Följer headerns in/utglidning: explicit begärt för headern (300ms ease), samma som Ankarnav. */
		transition: top 300ms ease;
	}

	.is-header-hidden .b-case-body__sidebar {
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--case-nav) + var(--case-sticky-gap));
	}
}

/* ==========================================================================
   Vunna mål-slider — Figma 107:9037 (Cases mörk, blocks/cases/style.css). Direkt efter "Vad du kan ta med dig" (ingen luft upptill),
   80 under pagineringen till footern. Mobil: 48 (härledd, som Padding Medium mobil).
   ========================================================================== */

.b-cases--case {
	padding-bottom: var(--space-section-medium); /* 48px mobil */
}

@media (min-width: 768px) {
	.b-cases--case {
		padding-bottom: 5rem; /* 80px (Figma: paginering 5084 → footer 5164) */
	}
}

/* ==========================================================================
   Hero, enskilt inlägg — Figma 102:6285 (Brand/900 utan bild) / 102:6306 / 102:6534. Bygger på blocks/hero-service/style.css.
   Desktop (≥768): höjd 648, rubrik 55/1.2 max 839 56 under brödsmulorna (y223, beslut: följ Figma för inlägg),
                   ingress 16 under, författarrad 40 under (porträtt 51 runt · 8 · Inter 18/1.5 #FCFCFC, gap 8).
   Mobil (<768):   härledd — rubrik 36, författarraden radbryts.
   ========================================================================== */

/* Bakgrundsfärg när varken inlägget eller Temainställningar har hero-bild (Figma 102:6285: Brand/900). Bild läggs ovanpå. */
.b-hero-service--post .b-hero-service__inner,
.b-hero-service--page .b-hero-service__inner {
	background-color: var(--color-brand-900);
}

.b-hero-service--post .b-hero-service__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2.5rem; /* 40px */
	width: 100%;
}

.b-hero-service__author {
	display: flex;
	align-items: center;
	gap: 0.5rem; /* 8px */
}

.b-hero-service__author-image {
	flex-shrink: 0;
	width: 3.1875rem; /* 51px */
	height: 3.1875rem;
	border-radius: 50%; /* Figma 102:6525: ellips */
	object-fit: cover;
}

.b-hero-service__author-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.5rem; /* 8px */
	color: var(--color-bg-white);
	font-size: var(--font-size-body-l); /* 18px */
	line-height: var(--line-height-body);
}

@media (min-width: 768px) {
	.b-hero-service--post .b-hero-service__header {
		margin-top: 3.5rem; /* 56px: brödsmulor slutar y167, rubrik y223 (Figma 102:6306) */
	}

	.b-hero-service--post .b-hero-service__heading {
		max-width: 52.4375rem; /* 839px */
		font-size: var(--font-size-h2); /* 55px */
		line-height: var(--line-height-heading); /* 1.2 */
	}

	.b-hero-service--post .b-hero-service__description {
		max-width: 52.4375rem; /* 839px */
	}

	.b-hero-service__author-meta {
		white-space: nowrap;
	}
}

/* ==========================================================================
   Innehåll, enskilt inlägg — Figma 102:6645 / 102:6413 / 102:6629. Padding 80 upptill (727 → 807), 144 nedtill (3299 → 3443).
   Om författaren — Figma 102:6436: Brand/200 p40 gap 24, rubrik 28/1.2 Brand/900, porträtt 51 + namn/titel Inter Bold 18/1.5
   Brand/900, 24 ned till bio 14/1.5 Neutral/900 (tom rad mellan stycken). Mobil: p24 (härledd).
   ========================================================================== */

.b-case-body__author {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 24px */
	padding: 1.5rem; /* 24px (härledd) */
	background-color: var(--color-brand-200);
}

.b-case-body__author-heading {
	color: var(--color-brand-900);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h5); /* 28px desktop / 23px mobil */
	font-weight: 400;
	line-height: var(--line-height-heading);
}

.b-case-body__author-content {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 24px */
}

.b-case-body__author-person {
	display: flex;
	align-items: center;
	gap: 0.5rem; /* 8px */
}

.b-case-body__author-image {
	flex-shrink: 0;
	width: 3.1875rem; /* 51px */
	height: 3.1875rem;
	border-radius: 50%; /* Figma 102:6922: ellips */
	object-fit: cover;
}

.b-case-body__author-name {
	color: var(--color-brand-900);
	font-size: var(--font-size-body-l); /* 18px */
	font-weight: 700;
	line-height: var(--line-height-body);
}

.b-case-body__author-bio {
	color: var(--color-neutral-900);
	font-size: var(--font-size-body-m); /* 14px */
	line-height: var(--line-height-body);
}

.b-case-body__author-bio > * {
	margin: 0;
}

.b-case-body__author-bio > * + * {
	margin-top: 1.5em; /* tom rad (Figma 102:6438) */
}

@media (min-width: 1024px) {
	.b-case-body.b-case-body--post {
		padding-block: 5rem 9rem; /* 80px / 144px */
	}

	.b-case-body__author {
		padding: 2.5rem; /* 40px */
	}
}

/* Textsidor (page.php via inc/page-text.php, t.ex. Sekretesspolicy) — samma luft som inlägg. Ingen Figma (beslut). */

/*
 * Importerad text ligger ofta i omslag (t.ex. <div class="cmplz-document">), så Vunna måls avstånd för direkta barn
 * når inte styckena. Här gäller samma rytm på alla nivåer: tom rad mellan stycken, 48 före avsnittsrubrik, 24 efter.
 */
.b-case-body--page .b-case-body__content :is(p, ul, ol, details, h2, h3, h4, h5, h6) {
	margin-block: 0;
}

.b-case-body--page .b-case-body__content :is(p, ul, ol, details, div) + :is(p, ul, ol, details) {
	margin-top: 1.55em;
}

.b-case-body--page .b-case-body__content * + :is(h2, h3) {
	margin-top: 3rem; /* 48px */
}

.b-case-body--page .b-case-body__content :is(h2, h3) + * {
	margin-top: 1.5rem; /* 24px */
}

.b-case-body--page .b-case-body__content * + :is(h4, h5, h6) {
	margin-top: 1.5em;
}

.b-case-body--page .b-case-body__content :is(h4, h5, h6) + * {
	margin-top: 0.5em;
}

/* Rubriker mindre än på Vunna mål (begärt): H2 = H5-token (28/23), H3 = H6-token (23/20), H4–H6 i brödtextens storlek. */
.b-case-body--page .b-case-body__content h2 {
	font-size: var(--font-size-h5);
}

.b-case-body--page .b-case-body__content h3 {
	font-size: var(--font-size-h6);
}

.b-case-body--page .b-case-body__content :is(h4, h5, h6) {
	color: var(--color-neutral-900);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-l); /* 18px */
	font-weight: 600;
	line-height: var(--line-height-body);
}

/* Långa ord som "Marknadsförings-/spårningscookies" får brytas, annars blir sidan bredare än mobilen. */
.b-case-body--page .b-case-body__content :is(h2, h3, h4, h5, h6) {
	overflow-wrap: anywhere;
}

/* Utfällbara rader (importerad policytext, <details>): rubrikerna i dem i brödtextens storlek, inte som sektionsrubriker. */
.b-case-body--page .b-case-body__content details :is(h3, h4) {
	margin: 0;
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-l); /* 18px */
	font-weight: 600;
	line-height: var(--line-height-body);
	color: var(--color-neutral-900);
}

.b-case-body--page .b-case-body__content details > * + * {
	margin-top: 0.75em;
}

.b-case-body--page .b-case-body__content summary {
	cursor: pointer;
}
@media (min-width: 1024px) {
	.b-case-body.b-case-body--page {
		padding-block: 5rem 9rem; /* 80px / 144px */
	}
}