/* ============================================================
   FORLØB – forloeb.html
   Skrevet mobile-first. Sektionerne følger samme spalte, margin
   og padding som de øvrige sider – det styres i base.css via
   "main section". Header og footer er også fælles (base.css).

   Afsnit:
     1. Intro (foto + tekst)
     2. Faner (spring ned til emnet)
     3. Spørgsmål / svar
     4. Forløbets gang (fire farvede trin-kort)
   ============================================================ */

/* ============================================================
   1. INTRO
   Kort tekst med et lille foto ved siden – intet stort banner.
   ============================================================ */
.forloeb-intro {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  max-width: 78rem;
  margin: 4rem auto 0;
  padding: 0 1.8rem;
}

.forloeb-intro figure {
  margin: 0;
}

.forloeb-intro figure img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: 25% 40%; /* holder Mettes ansigt (til venstre) i billedet */
  border-radius: 20px;
}

.forloeb-intro-tekst .kicker {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--petroleum-moerk);
  margin-bottom: 0.4rem;
}

.forloeb-intro-tekst h1 {
  margin-top: 0;
  margin-bottom: 0.8rem;
}

@media (min-width: 700px) {
  .forloeb-intro {
    flex-direction: row;
    gap: 3.5rem;
    margin-top: 4rem;
    padding-inline: 2.5rem;
  }
  /* rolige størrelser: h1 og brødtekst er mindre end på de andre sider */
  /* Billedet er lige så højt som teksten, så top og bund flugter.
     align-items: stretch = figuren bliver lige så høj som tekstblokken.
     Billedet ligger absolut inde i figuren (position: absolute + inset: 0),
     så dets egen højde ikke styrer rækken – det er teksten, der gør. */
  .forloeb-intro {
    align-items: stretch;
  }
  .forloeb-intro figure {
    flex: 0 0 34%;
    position: relative;
  }
  .forloeb-intro figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .forloeb-intro-tekst {
    flex: 1;
  }
  /* sidste afsnit uden luft under, så bunden flugter med billedet */
  .forloeb-intro-tekst p:last-child {
    margin-bottom: 0;
  }
}

/* ============================================================
   2. FANER
   Tre pille-links der springer ned til hvert emne.
   ============================================================ */
.faner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  background-color: var(--salvie);
  margin: 5rem 0 0;
  padding: 2rem 2rem;
}

.faner a {
  text-decoration: none;
  padding: 0.7rem 1.7rem;
  border-radius: 30px;
  font-size: var(--fs-note);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--bordeaux);
  background-color: var(--creme);
}

.faner a:hover {
  background-color: var(--hvid);
}

@media (min-width: 700px) {
  .faner {
    gap: 1.5rem;
    margin-top: 8rem;
    padding: 2rem 2.5rem;
  }
  .faner a {
    padding: 0.85rem 2.4rem;
  }
}

/* ============================================================
   3. SPØRGSMÅL / SVAR
   Sandfarvet bånd i fuld bredde (samme farve som headeren).
   Teksten holdes i en smal spalte, så linjerne er behagelige
   at læse.
   ============================================================ */
.sporgsmaal-svar {
  background-color: var(--sand);
  max-width: none;
  margin-inline: 0;
  /* ingen margin – sektionen skal støde direkte op til "Forløbets
     gang", så der ikke er en lys creme-stribe imellem */
  margin-block: 0;
  padding: 5.5rem 0 4rem; /* luft mellem fanerne og første række */
  position: relative;
  overflow: hidden;
}

/* Hver spørgsmålsgruppe holdes i samme spalte som resten af siden */
.qa-gruppe {
  max-width: 78rem; /* samme bredde som resten af siden, så alt flugter i venstre side */
  margin-inline: auto;
  padding-inline: 1.8rem;
  scroll-margin-top: 6rem; /* så anker-spring ikke gemmer sig under header */
}

/* "+" = en gruppe der står lige efter en anden gruppe.
   Så får gruppe 2 og 3 en tynd streg og luft over sig. */
.qa-gruppe + .qa-gruppe {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.sporgsmaal-svar h3 {
  margin-bottom: 0.4rem;
  color: var(--petroleum-moerk);
  font-family: "Playfair Display", Georgia, serif; /* varmere skrift end resten */
  font-weight: 600;
}
/* Luft mellem to spørgsmål under hinanden (mobil/tablet) */
.qa-spoergsmaal + .qa-spoergsmaal {
  margin-top: 2.4rem;
}

/* "Læs mere" er et fladt link, der folder svaret ud (ingen boks) */
.sporgsmaal-svar details {
  background: none;
  border-radius: 0;
  padding: 0;
  margin: 0.8rem 0 0;
}
.sporgsmaal-svar details p {
  margin: 0.8rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--salvie);
  font-size: var(--fs-small);
}

@media (min-width: 700px) {
  .sporgsmaal-svar {
    padding: 8rem 0 4rem; /* luft mellem fanerne og første række */
    margin-block: 0;
  }
  .qa-gruppe {
    padding-inline: 2.5rem;
  }
}

/* "Læs mere" skifter til "Luk", når boksen er åben.
   Den rigtige tekst i HTML skjules, og pseudo-elementet viser
   den aktuelle tilstand. */
.sporgsmaal-svar summary,
.forloebets-gang summary {
  font-size: 0;
}
.sporgsmaal-svar summary::after,
.forloebets-gang summary::after {
  content: "Læs mere";
  font-size: var(--fs-small);
  font-weight: 600;
}
.sporgsmaal-svar details[open] summary::after,
.forloebets-gang details[open] summary::after {
  content: "Luk";
}

/* ============================================================
   4. FORLØBETS GANG
   Sandfarvet sektion i FULD bredde (kant til kant). Indholdet
   holdes i samme spalte som resten (se reglen med brødtekst + trin-liste).
   Fire farvede trin-kort – samme grøn/blå-skala som "Mine ydelser".
   ============================================================ */
.forloebets-gang {
  background-color: var(--creme);
  position: relative;
  overflow: hidden;
  max-width: none;
  /* ingen margin – sektionen skal støde helt op til "Spørgsmål/svar"
     ovenfor (ingen lys creme-stribe) og til footeren nedenfor */
  margin: 0;
  padding: 0rem; /* ingen top-padding – den hvide bjælke er flush med toppen */
}

/* Brødtekst og trin-liste holdes i midterspalten. Titel-bjælken og
   CTA-kortet er med vilje IKKE med, for de har deres egen bredde.
   ".forloebets-gang .xxx" (to klasser) er "stærkere" end de enkelte
   klasse-regler længere nede, så max-width her vinder. */
.forloebets-gang .forloebets-gang-brod,
.forloebets-gang .trin-liste {
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: 1.8rem;
}

/*  titel-bjælke i fuld bredde øverst */
.forloebets-gang-top {
  position: relative;
  overflow: hidden;
  background-color: var(--creme);
  padding-block: 3rem 0.5rem;
  margin-bottom: 1.5rem;
}
.forloebets-gang-top h2 {
  max-width: 78rem;
  margin: 0 auto;
  padding-inline: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bordeaux);
  font-weight: 700;
}

.forloebets-gang-brod {
  max-width: 46rem;
}

.trin-liste {
  counter-reset: trin;
  list-style: none;
  padding: 0;
  margin: 3rem 0;
  display: grid;
  gap: 1rem;
}

.trin {
  counter-increment: trin;
  border-radius: 16px;
  padding: 1.6rem 1.4rem;
}

.trin h3 {
  margin: 0 0 0.8rem;
  font-size: var(--fs-card);
  font-weight: 600;
}
.trin h3::before {
  content: counter(trin);
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 0.3rem;
  opacity: 0.55;
}

/* inde i trin-kortene er "Læs mere" bare tekst i kortets egen farve */
.trin details {
  background: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.trin summary {
  color: inherit;
}
.trin details p {
  margin: 0.8rem 0 0;
  font-size: var(--fs-small);
}

.trin-1 {
  background-color: var(--salvie-lys);
  color: var(--tekst);
}
.trin-2 {
  background-color: var(--salvie);
  color: var(--tekst);
}
.trin-3 {
  background-color: var(--petroleum);
  color: var(--hvid);
}
.trin-4 {
  background-color: var(--petroleum-moerk);
  color: var(--hvid);
}

@media (min-width: 700px) {
  .forloebets-gang {
    padding: 0 0 10rem;
  }
  /* brødtekst og trin-liste får samme sideluft som overskriften (2.5rem),
     så alt står på præcis samme lodrette linje */
  .forloebets-gang .forloebets-gang-brod,
  .forloebets-gang .trin-liste {
    padding-inline: 2.5rem;
  }
  /* kun brødteksten (første element efter titel-bjælken) skal have
     ekstra luft ned til titlen – ramte tidligere ALLE elementer i
     sektionen (også trin-listen og CTA-kortet), så luften hobede sig
     op nedover og gjorde hele sektionen rodet */
  .forloebets-gang-top {
    padding-block: 8rem 1rem;
    padding-inline: 0;
    margin-bottom: 2.5rem;
  }
  .forloebets-gang-top h2 {
    padding-inline: 2.5rem;
  }
}

@media (min-width: 1000px) {
  /* SPØRGSMÅL OG SVAR: to spørgsmål ved siden af hinanden (grid 1 : 1).
     1fr 1fr = to lige brede spalter. Hver gruppe (Balance / Ro / Nærvær)
     får sit eget grid, så anker-linkene i fanerne stadig virker. */
  .qa-gruppe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    align-items: start;
  }
  .qa-spoergsmaal + .qa-spoergsmaal {
    margin-top: 0;
  }

  /* FORLØBETS GANG: tekst til venstre, trin-kort til højre.
     Sektionen bliver et grid med 4 spalter: en tom kant, to indholdsspalter
     (39rem hver) og en tom kant. Titel-bjælken og "Book"-kortet spænder
     over alle 4 spalter (grid-column: 1 / -1), så deres baggrund stadig
     går helt ud til skærmens kanter. */
  .forloebets-gang {
    display: grid;
    grid-template-columns: 1fr minmax(0, 39rem) minmax(0, 39rem) 1fr;
    align-items: start;
  }
  /* Overskrift + tekst i venstre spalte (række 1 og 2). Trin-kortene i
     højre spalte spænder over begge rækker, så kortene starter i samme
     højde som overskriften. */
  .forloebets-gang .forloebets-gang-top {
    grid-column: 2;
    grid-row: 1;
  }
  .forloebets-gang .forloebets-gang-brod {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    padding: 0 3rem 0 2.5rem;
    max-width: none;
  }

  /* Trin-kortene ligger som 2 x 2 mindre bokse i højre spalte.
     Øverste række starter i samme højde som teksten til venstre. */
  .forloebets-gang .trin-liste {
    grid-column: 3;
    grid-row: 1 / span 2;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 8rem 2.5rem 0 0; /* 8rem = samme luft over som overskriften har */
    padding: 0;
    max-width: none;
  }
  .forloebets-gang .trin {
    padding: 2rem;
  }
  .forloebets-gang .trin h3 {
    margin-bottom: 0.4rem;
  }
  .forloebets-gang .trin h3::before {
    font-size: 1.3rem;
  }
}