/* ============================================================================
   CECILIAS RESA TILL HÄLSA ([sp_cecilias_resa])

   Berättelsesida byggd på mallen "Swedish Paleo — Full bredd (utan
   Elementor)". Följer landningssidornas designstandard och speglar
   Om oss-modulen: full-bleed sektionsband (vitt/#f9f9f9), Montserrat-
   rubriker, Proxima Nova Regular-brödtext, kortanatomi #ece6db + radius 16,
   sektionsluft 96/56px.

   Sektioner:
     1. Sida & FOUC-skydd
     2. Band & layout
     3. Typografi
     4. Introband (porträtt + text)
     5. Artikel & figurer
     6. Signatur
     7. Avslut & knappar
     8. Mobil
   ========================================================================== */


/* === 1. SIDA & FOUC-SKYDD =============================================== */

body.sp-cecilia-page {
	background: #fff !important;
}

body.sp-cecilia-page main.sp-fullwidth-page {
	padding: 0;
}

body.sp-cecilia-page .sp-page-hero {
	margin-top: 0;
	margin-bottom: 0;
}

.sp-cr {
	opacity: 1 !important;
	transition: opacity 0.15s ease;
	background: #fff;
}


/* === 2. BAND & LAYOUT =================================================== */

.sp-cr-band {
	padding: 96px 24px;
	background: #fff;
}

.sp-cr-band--alt {
	background: #f9f9f9;
}

.sp-cr-inner {
	max-width: 1080px;
	margin: 0 auto;
}

.sp-cr-inner--smal {
	max-width: 760px;
}


/* === 3. TYPOGRAFI ======================================================= */

.sp-cr h2 {
	font-family: 'Montserrat', 'Proxima Nova', sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	color: #2c2c2c;
	margin: 0 0 16px;
}

.sp-cr p {
	font-family: 'Proxima Nova Regular', proxima_nova_regular, 'Proxima Nova', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.65;
	color: #4D524D;
	margin: 0 0 16px;
}

.sp-cr p:last-child {
	margin-bottom: 0;
}

.sp-cr a {
	color: #3D5F42;
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (hover: hover) {
    .sp-cr a:hover {
        color: #2e4832;
    }
}

.sp-cr a:focus-visible {
	outline: 2px solid #3D5F42;
	outline-offset: 2px;
	border-radius: 2px;
}


/* === 4. INTROBAND (PORTRÄTT + TEXT) ===================================== */

.sp-cr-intro {
	display: grid;
	grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.sp-cr-intro-bild {
	margin: 0;
}

.sp-cr-intro-bild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	border: 1px solid #ece6db;
	box-shadow: 0 3px 14px rgba(70, 58, 44, 0.09);
}


/* === 5. ARTIKEL & FIGURER =============================================== */

/* Kapitelrubriker inne i löptexten får luft ovanför sig så kapitlen
   läses som avsnitt utan att brytas av bandväxlingar. */
.sp-cr-artikel h2 {
	margin-top: 48px;
}

.sp-cr-artikel h2:first-child {
	margin-top: 0;
}

.sp-cr-figur {
	margin: 40px auto;
	max-width: 520px;
}

.sp-cr-figur img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	border: 1px solid #ece6db;
	box-shadow: 0 3px 14px rgba(70, 58, 44, 0.09);
}

/* Ansiktskollaget finns bara i 500 px bredd — visas mindre än kolumnen
   så det inte skalas upp och blir suddigt. */
.sp-cr-figur--ansikte {
	max-width: 420px;
}

.sp-cr-figur figcaption {
	font-family: 'Proxima Nova Regular', proxima_nova_regular, 'Proxima Nova', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: #6b6558;
	text-align: center;
	margin-top: 12px;
}


/* === 6. SIGNATUR ======================================================== */

.sp-cr-signatur {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid #ece6db;
}

/* p-selektorn slår .sp-cr p i specificitet — annars vinner brödtextfonten. */
.sp-cr p.sp-cr-signatur-namn {
	font-family: 'Montserrat', 'Proxima Nova', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: #2c2c2c;
	margin: 0 0 4px;
}

.sp-cr-signatur-roll {
	font-size: 16px !important;
	color: #6b6558 !important;
	margin: 0 !important;
}


/* === 7. AVSLUT & KNAPPAR ================================================ */

.sp-cr-avslut {
	text-align: center;
}

.sp-cr-avslut-rubrik {
	margin-bottom: 16px !important;
}

.sp-cr-avslut > p {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.sp-cr-avslut .sp-cta-wrap,
.sp-cr-avslut-knappar {
	margin-top: 28px;
}

.sp-cr-avslut-lank {
	margin-top: 24px !important;
	font-size: 16px !important;
}

/* Sekundärknapp för medlemmar — outline-pillen från /veckomenyer/
   (samma som Om oss-sidans "Läs mer"-knapp): grön outline = sekundär
   handling, sajtens [sp_cta] = konverterings-CTA för besökare. */
.sp-cr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	background: transparent;
	border: 2px solid #3D5F42;
	border-radius: 999px;
	color: #3D5F42 !important;
	font-family: 'Proxima Nova Regular', proxima_nova_regular, 'Proxima Nova', sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none !important;
	min-height: 48px;
	min-width: 44px;
	box-sizing: border-box;
	transition: background 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
    .sp-cr-btn:hover {
        background: #3D5F42;
        color: #fff !important;
    }
}

.sp-cr-btn:focus {
	background: #3D5F42;
	color: #fff !important;
}

.sp-cr-btn:focus-visible {
	outline: 2px solid #3D5F42;
	outline-offset: 3px;
}

.sp-cr-btn:focus:not(:focus-visible) {
	outline: none;
}


/* === 8. MOBIL =========================================================== */

@media (max-width: 767px) {

	.sp-cr-band {
		padding: 56px 20px;
	}

	.sp-cr h2 {
		font-size: 26px;
	}

	.sp-cr p {
		font-size: 17px;
	}

	/* Stackordning rubrik → porträtt → text (startsidans grundar-mönster):
	   rubriken är skanningsankaret och ska komma före blocket den
	   beskriver, och porträttet i 250 px låter rubrik, ansikte och textens
	   första rader dela skärm. display: contents lyfter textkolumnens barn
	   till gridet så ordningen kan styras utan DOM-ändring. */
	.sp-cr-intro {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.sp-cr-intro-text {
		display: contents;
	}

	.sp-cr-intro-text > h2 {
		order: -1;
	}

	.sp-cr-intro-bild {
		max-width: 250px;
		margin: 4px auto 24px;
	}

	.sp-cr-artikel h2 {
		margin-top: 40px;
	}

	.sp-cr-figur {
		margin: 32px auto;
	}

	.sp-cr p.sp-cr-signatur-namn {
		font-size: 22px;
	}

	.sp-cr-btn {
		width: 100%;
	}
}