/* =========================================================
   NEXTMOVE – DESIGNSYSTEM / BAS-CSS
   ---------------------------------------------------------
   STRUKTUR
   - .section            = generell sektion med vertikal luft
   - .section-gray       = grå sektion
   - .section-white      = vit sektion

   CONTAINERS
   - .container-narrow   = smal, centrerad textyta för rubrik + intro

   LAYOUTMÖNSTER
   - .grid-2x2           = fyrkortssektion
   - .split-2            = två kolumner (text + bild eller liknande)
   - .cards-3            = trekortssektion
   - .process            = vertikal processlista med steg 1–3
   - .credibility        = tvåkolumnssektion för trovärdighet

   KOMPONENTER
   - .card               = generellt kort
   - .cta / .cta-full    = CTA-knappar och deras wrappers
   - .process-step       = ett steg i processlistan

   FÄRGER
   - Accent / knapp / stegnummer: #f05a28
   - Grå sektion: #f5f5f5
   - Standard mörk text: #2b2b2b
   ========================================================= */


/* =========================================================
   1. GLOBAL BAS / RESET
   ---------------------------------------------------------
   Tar bort onödig topp-padding från temat så att hero/sektioner
   kan börja rent utan vita glapp.
   ========================================================= */

.site-main {
  padding-top: 0;
}

.wp-site-blocks {
  padding-top: 0;
}


/* =========================================================
   2. SPACING-TOKENS
   ---------------------------------------------------------
   Enkla avståndsvariabler för framtida återanvändning.
   Används inte överallt ännu, men bra att ha som bas.
   ========================================================= */

:root {
  --space-s: 16px;
  --space-m: 32px;
  --space-l: 48px;
}


/* =========================================================
   3. GENERELLA SEKTIONER
   ---------------------------------------------------------
   .section = grundsektion med luft ovan/under
   .section-gray = grå bakgrundssektion
   .section-white = vit bakgrundssektion
   ========================================================= */

.section {
  padding: 80px 20px;
}

.section-gray {
  background: #f5f5f5;
  margin-top: 0;
  padding: 80px 20px;
}

/* Säkerställer att inre block inte lägger egen vit bakgrund
   ovanpå en grå sektion */
.section-gray .wp-block-group,
.section-gray .wp-block-columns {
  background: transparent;
}

.section-gray .card {
  background: #ffffff;
}

.section-white {
  background: #ffffff;
}


/* =========================================================
   4. SMAL TEXTCONTAINER
   ---------------------------------------------------------
   Används för centrerade rubrik- och introblock.
   Passar inte för kort eller tvåkolumnslayouter.
   ========================================================= */

.container-narrow {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.container-narrow p {
  font-size: 18px;
  line-height: 1.65;
  color: #2b2b2b;
  opacity: 1;
}


/* =========================================================
   5. INTRO / OUTRO I SEKTIONSBLOCK
   ---------------------------------------------------------
   Används i centrerade informationssektioner.
   ========================================================= */

.section-intro {
  margin-top: 10px;
  margin-bottom: 48px;
}

.section-outro {
  margin-top: 72px;
  margin-bottom: 16px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 18px;
	font-weight: 600;
  line-height: 1.65;
  color: #2b2b2b;
  opacity: 1;
}


/* =========================================================
   6. HERO
   ---------------------------------------------------------
   Hero ligger på Cover-blocket och använder overlay samt
   separat innehållscontainer (.hero-content).
   ========================================================= */

.hero {
  min-height: 60vh;
  position: relative;
  margin-bottom: 0;
}

/* Mörk overlay ovanpå hero-bilden för bättre läsbarhet */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

/* Innehållet i hero ligger ovanpå overlay */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.hero h1 {
  color: #fff;
  margin-bottom: 20px;
}

.hero p {
  color: #fff;
  font-size: 18px;
  opacity: 0.95;
  margin-bottom: 48px;
}




/* =========================================================
   7. GENERELLT KORT
   ---------------------------------------------------------
   Basstil för kort som används i flera sektioner.
   Variationer kan sedan göras per layout, t.ex. .cards-3 .card
   ========================================================= */

.card {
  min-height: 120px;
  background: #ffffff;
  padding: 29px;
  border-radius: 8px;
	border: 2px solid rgba(218, 114, 63, 0.15);
	box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

/* Rubrik / stark första rad i kort */
.card strong,
.card b {
  display: block;
  margin-bottom: 12px;
}

/* Ikon i kort */
.card .wp-block-icon {
  margin-bottom: 6px;
}


/* =========================================================
   8. FYRKORTSSEKTION (PROBLEMBILD)
   ---------------------------------------------------------
   Används för 4 kort i rad i problemsektionen.
   ========================================================= */

.grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  margin-top: 0px;
}


/* =========================================================
   9. TVÅKOLUMNSSPLIT
   ---------------------------------------------------------
  9. TVÅKOLUMNSSPLIT
   ---------------------------------------------------------
   Används för sektioner med två kolumner (text + bild).
   Bygger på Gutenberg Columns (ingen egen grid).
   ========================================================= */

/* Container (Columns) */
.split-2 {
  gap: 32px;
  margin-top: 48px;
}

/* Kolumner */
.split-2 > .wp-block-column {
  display: flex;
  flex-direction: column;
}

.split-2 > .wp-block-column:first-child {
  flex-basis: 55%;
}

.split-2 > .wp-block-column:last-child {
  flex-basis: 45%;
}

/* Vänster textkolumn */
.text-left {
  text-align: left;
}

/* Ta bort default-top-margin på första elementet (H2) */
.text-left > h2:first-child {
  margin-top: 0;
  margin-block-start: 0;
}

/* Cover-blocket i högerkolumnen */
.split-2 .wp-block-column .wp-block-cover {
  width: 100%;
  min-height: 340px; /* justera 320–380 vid behov */
  border-radius: 6px;
  overflow: hidden;
}

/* Ta bort overlay/dimning */
.split-2 .wp-block-cover__background {
  opacity: 0;
}

/* Säkerställ att bilden fyller cover-ytan */
.split-2 .wp-block-cover__image-background {
  object-fit: cover;
	object-position: center right;
}




/* =========================================================
   10. TREKORTSSEKTION
   ---------------------------------------------------------
   Används för “Så fungerar Next Move i praktiken”.
   Samma kortkomponent som ovan, men med kompaktare padding
   och vänsterställda listor.
   ========================================================= */

.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 48px;
}

.cards-3 .wp-block-column {
  min-width: 0;
}

.cards-3 .card {
  height: 100%;
  padding: 16px;
  text-align: left;
  word-break: normal;
  overflow-wrap: normal;
}

.cards-3 .card ul {
  margin: 12px 0 0 18px;
  padding: 0;
}

.cards-3 .card li {
  margin-bottom: 8px;
  line-height: 1.5;
}


/* =========================================================
   11. CTA-KOMPONENTER
   ---------------------------------------------------------
   Två varianter:
   - .cta      = enklare CTA-wrapper
   - .cta-full = bredare wrapper som centrerar Buttons-blocket
   ========================================================= */

.offer {
  margin-top: 56px;
}

/* Enkel CTA-wrapper */
.cta {
  text-align: center;
  margin-top: 48px;
}



/* Bred CTA-wrapper, används när Buttons-blocket behöver centreras
   korrekt över sektionens fulla bredd */
.cta-full {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.cta-full .wp-block-buttons {
  display: flex;
  justify-content: center;
}



/* =========================================================
   12. PROCESSLISTA / ERBJUDANDE I 3 STEG
   ---------------------------------------------------------
   Vertikal process med steg 1, 2, 3 i orange cirklar.
   ========================================================= */

.process {
  max-width: 760px;
  margin: 32px auto 0 auto;
}

.process-section .process {
  margin-top: 24px;
}

.process-step {
  position: relative;
  padding: 24px 24px 24px 72px;
  border-bottom: 1px solid #e8e8e8;
}

.process-step:last-child {
  border-bottom: none;
}

/* Orange cirkel med stegnummer */
.process-step::before {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
}

/* Styr själva numret för respektive steg */
.step-1::before {
  content: "1";
}

.step-2::before {
  content: "2";
}

.step-3::before {
  content: "3";
}

/* Rubrik i processsteg */
.process-step strong,
.process-step b {
  display: block;
  font-size: 18px;
  margin-bottom: 8px;
}

/* Beskrivning i processsteg */
.process-step p {
  margin: 0 0 8px 0;
  color: #2b2b2b;
  line-height: 1.6;
}

/* Lista i processsteg */
.process-step ul {
  margin: 8px 0 0 18px;
  padding: 0;
}

.process-step li {
  margin-bottom: 6px;
  line-height: 1.5;
}


/* =========================================================
   13. CREDIBILITY-SEKTION
   ---------------------------------------------------------
   Tvåkolumnssektion med text till vänster och bild till höger.
   Denna sektion override:ar split-2-basen lokalt.
   ========================================================= */

.credibility {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

/* Textkolumn – lätt inryckt för bättre visuell balans */
.credibility-text {
  max-width: 560px;
  padding-left: 40px;
}

/* Bildkolumn – vertikalt centrerad */
.credibility-image {
  display: flex;
  align-items: center;
}

/* Bilden fyller kolumnens yta bättre */
.credibility-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* Bildtext / caption */
.credibility-image p {
  margin-top: 8px;
  font-size: 14px;
  font-style: italic;
  text-align: center;
  color: #666;
}

/*
=======================
14. Statement
=======================
*/

/* Smal brun remsa med inledande text under hero */

.statement {
  background: #3a3a3a;
  padding: 2px 0;
  text-align: center;
}

.statement p {
  margin: 0;
  font-size: 22px; /* upp från 20 */
  font-weight: 700; /* viktigt */
  color: #ffffff;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.35;
}

.container-medium {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.case-card {
  height: 100%;
  padding: 32px;
  text-align: left;
}

.case-card h3 {
  margin-top: 0;
  margin-bottom: 18px;
}

.case-card p {
  line-height: 1.65;
  margin-bottom: 18px;
}

.case-card p:last-child {
  margin-bottom: 0;
}

.case-card-right {
  background: #ffffff;
  border: 2px solid rgba(218, 114, 63, 0.22);
}

.case-conclusion {
  max-width: 820px;
  margin: 42px auto 0 auto;
  padding: 0 0 0 22px;
  text-align: left;
  border-left: 5px solid #f05a28;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: #2b2b2b;
}

.case-conclusion h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #2b2b2b;
}

.case-conclusion p {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  color: #2b2b2b;
}

.case-compare > .wp-block-column:first-child,
.case-compare > .wp-block-column:last-child {
  flex-basis: 50% !important;
}

.case-section {
  padding-bottom: 56px;
}

.offer-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.offer-card h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: #2b2b2b;
}

.offer-card p {
  line-height: 1.6;
  margin-bottom: 16px;
}

.offer-result {
  margin-top: auto;
  padding-top: 18px;
}

.offer-result p:first-child {
  margin: 0 0 8px 0;
  font-weight: 700;
}

.offer-result p:last-child {
  margin: 0;
  font-weight: 600;
}

.offer-cards,
.offer-cards > .wp-block-group__inner-container {
  max-width: 1120px;
  margin: 48px auto 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.offer-cards > .wp-block-group,
.offer-cards > .wp-block-group__inner-container > .wp-block-group {
  min-width: 0;
}

.offer-card {
  width: 100%;
  height: 100%;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.cta-full {
  max-width: 1120px;
  margin: 56px auto 0 auto;
  text-align: center;
}

.cta-full .wp-block-buttons {
  display: flex;
  justify-content: center;
}

.cta-full .wp-block-button__link {
  background: #f05a28;
  color: #ffffff;
  border-radius: 6px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: none;
}

.cta-full .wp-block-button__link:hover {
  background: #d94f22;
  color: #ffffff;
}

.fit-grid {
  max-width: 960px;
  margin: 48px auto 0 auto;
}

.fit-card {
  padding: 28px;
}

.fit-card h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
}

.fit-card p {
  margin: 0;
  line-height: 1.6;
}

.final-cta {
  padding: 72px 20px;
  text-align: center;
}

.final-cta h2 {
  margin-top: 0;
  margin-bottom: 18px;
}

.final-cta p {
  max-width: 680px;
  margin: 0 auto 48px auto;
  font-size: 18px;
  line-height: 1.6;
  color: #2b2b2b;
}

.final-cta .wp-block-buttons {
  display: flex;
  justify-content: center;
}

.final-cta .wp-block-button__link {
  background: #f05a28;
  color: #ffffff;
  border-radius: 6px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: none;
}

.final-cta .wp-block-button__link:hover {
  background: #d94f22;
  color: #ffffff;
}

/* =========================================================
   GRAFISKT STATEMENTBAND
   ---------------------------------------------------------
   Kort visuell brygga mellan förklaring och case.
   Bryter boxighet utan att skapa en ny tung sektion.
   ========================================================= */

.decision-band {
  background: #3a3a3a;
  padding: 0px 0px;
}

.decision-band-inner,
.decision-band-inner > .wp-block-group__inner-container {
  max-width: 1120px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  text-align: center;
}

.decision-band-inner p {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}



.decision-band-inner p:nth-child(even),
.decision-band-inner > .wp-block-group__inner-container p:nth-child(even) {
  color: #f05a28;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 700px) {
  .decision-band {
    padding: 28px 20px;
  }

  .decision-band-inner {
    gap: 10px;
  }

  .decision-band-inner p {
    font-size: 18px;
  }

  .decision-band-inner p:nth-child(even) {
    font-size: 20px;
		 line-height: 1.5;
  }
}

.content-left {
  text-align: left;
}

.content-left {
  text-align: left;
  width: 100%;
  max-width: none;
}

.content-left p {
  margin-bottom: 1em;
}

.content-left ul {
  text-align: left;
  margin-left: 0;
  padding-left: 1.25rem;
  margin-top: 0.5em;
  margin-bottom: 1.25em;
  padding-left: 1.25rem;
}

.content-left li {
  margin-bottom: 0.25em;
}

.content-left h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.cards-grid {
  max-width: 1120px;
  margin: 48px auto 0;
  gap: 20px;
}

.cards-grid > * {
  padding: 0 !important;
  margin: 0 !important;
}

.cards-grid .playbook-card {
  padding: 0px 0px;
	height: auto;
  border: 1px solid #f0d8cd;
  border-radius: 6px;
  background: #fff;
  min-height: 0px;
	display: block:
}

.cards-grid > .gb-container,
.cards-grid > .wp-block-group {
  min-width: 0;
}

.cards-grid .playbook-card h3 {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 6px 0 !important;
	margin-bottom: 0px;
}

.cards-grid .playbook-card p {
  font-size: 15px;
  line-height: 1.35;
  margin: 0;
}

.decision-band-inner.container-medium {
  max-width: 820px;
  justify-content: flex-start;
  text-align: left;
}