/* ============================================================
   FORSIDEN – index.html

   Sektioner der kun findes på forsiden:
     0. Balance – lille "hint"-sektion lige under hero
     1. Om mig – teaser (grønt kort med foto)
     2. Det kan jeg hjælpe dig med (+ tjekliste)
     3. Hvorfor Manuvision kropsterapi?
     4. Bånd med signatur ("Mette Thaisen Kropsterapi")
     5. Et forløb hos mig
     6. Book en tid

   Hero, header, footer og galleri ligger i base.css.
   Skrevet mobil-først: reglerne uden media query gælder mobil,
   og @media (min-width: 700px) bygger ovenpå til tablet/computer.
   ============================================================ */

/* ============================================================
   0. BALANCE – lille "hint"-sektion
   Foto og en kort tekst, der peger videre ned til "Det kan jeg
   hjælpe dig med" (linket herunder springer til det afsnit).
   ============================================================ */
.balance-teaser {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.balance-teaser img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 20px;
}

.balance-teaser-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;
}

.balance-teaser-tekst h2 {
  margin-bottom: 0.6rem;
}

/* Linket peger op på siden (til "Et forløb hos mig" ovenfor), så det får
   en lille pil op foran teksten i stedet for ned-pilen, de andre "læs
   mere"-links bruger. */
.balance-teaser-tekst .tekst-link-op::before {
  content: "↑";
  display: inline-block;
  margin-right: 0.4rem;
}

/* Computer: foto til venstre, tekst til højre, lige så høj som fotoet */
@media (min-width: 700px) {
  .balance-teaser {
    flex-direction: row;
    align-items: center;
    gap: 3.5rem;
  }

  .balance-teaser img {
    flex: 0 0 42%;
    min-width: 0; /* uden denne kan billedet ikke krympe under sin egen naturlige bredde */
    height: 320px;
  }

  .balance-teaser-tekst {
    flex: 1;
    min-width: 0; /* samme for teksten, så lange ord ikke skubber layoutet bredere */
  }
}

/* ============================================================
   1. OM MIG – TEASER
   Grønt kort med foto, en lille label over overskriften og en
   signatur under teksten.
   ============================================================ */
.om-mig-kort {
  background-color: var(--salvie-lys);
  margin-top: 3rem;
  box-shadow: 0 16px 38px rgba(63, 95, 104, 0.16);
  padding: 1.4rem;
}

/* Mobil: billede og tekst under hinanden (flex-direction: column) */
.om-mig-kort .kort-indhold {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  max-width: none;
  align-items: stretch;
  text-align: left;
}

/* Mobil: teksten skal vises FØR billedet, selvom billedet står
   først i HTML'en. "order" flytter den visuelt uden at ændre
   rækkefølgen i koden (vigtigt for skærmlæsere). Billedet får en
   tilsvarende order, så det altid kommer efter teksten. */
.om-mig-kort .kort-tekst {
  order: -1;
}

.om-mig-kort img {
  order: 1;
}

/* Billedet er kvadratisk (aspect-ratio: 1 / 1) og beskæres pænt
   med object-fit: cover. object-position flytter udsnittet, så
   ansigtet bliver i billedet. */
.om-mig-kort img {
  border-radius: 16px;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 30%;
  margin: 4rem auto 0;
}

.om-mig-kort .kort-tekst {
  padding: 0 0.6rem 0.8rem;
}

/* Lille label OVER overskriften. Teksten kommer fra CSS'en
   (content) og ikke fra HTML'en. */
.om-mig-kort h2 {
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

.om-mig-kort h2::before {
  content: "Mød mig bag behandlingen";
  display: block;
  font-family: "Poppins", Arial, sans-serif;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--petroleum-moerk);
  margin-bottom: 2rem;
}

/* Signaturen "— Mette" sættes ind EFTER afsnittet med ::after */
.om-mig-kort p::after {
  content: "— Kh Mette";
  display: block;
  margin-top: 1rem;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--petroleum-moerk);
}

.om-mig-kort .knap-lys {
  margin-inline: 0;
  margin-bottom: 3rem;
}

/* --- Tablet/computer: tekst til venstre, foto til højre --- */
@media (min-width: 700px) {
  .om-mig-kort {
    padding: 6rem;
    border-radius: 3rem;
    margin-inline: auto;
  }

  /* row-reverse = billedet (som står først i HTML) havner til højre.
     order nulstilles her, så mobilens "tekst først"-rækkefølge ikke
     blander sig i row-reverse. */
  .om-mig-kort .kort-indhold {
    flex-direction: row-reverse;
    gap: 2.5rem;
  }

  .om-mig-kort .kort-tekst,
  .om-mig-kort img {
    order: 0;
  }

  /* Billedet fylder 42% af bredden og er lige så højt som teksten
     (align-self: stretch), så de flugter i top og bund.
     contain: size gør, at billedets egen størrelse ikke påvirker
     rækkens højde – det er teksten, der bestemmer den.
     Marginerne (3rem/4rem) svarer til luften over og under teksten. */
  .om-mig-kort img {
    flex: 0 0 42%;
    width: 42%;
    aspect-ratio: auto;
    height: auto;
    contain: size;
    align-self: stretch;
    margin: 3rem 0 4rem;
    border-radius: 18px;
  }

  .om-mig-kort .kort-tekst {
    flex: 1;
    align-self: center;
    padding: 1rem 1.4rem;
  }
}

/* ============================================================
   2. DET KAN JEG HJÆLPE DIG MED (+ tjekliste)
   ============================================================ */
.hjaelper-dig {
  max-width: 52rem;
  margin-bottom: 1rem;
}

.hjaelper-dig-tekst p:last-child {
  margin-bottom: 0;
}

/* Tjeklisten: sandfarvet kort med prikker foran hvert punkt */
.tjekliste {
  background-color: var(--sand);
  border-radius: 16px;
  padding: 3rem 2rem;
  margin-top: 2rem;
}

.tjekliste h3 {
  text-align: center;
  margin-bottom: 2rem;
}

.tjekliste ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid; /* grid = punkterne ligger under hinanden med gap imellem */
  gap: 0.9rem;
}

.tjekliste li {
  position: relative; /* prikken placeres ud fra punktet */
  padding-left: 1.5rem;
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* Den røde prik laves med ::before (en tom, rund boks) */
.tjekliste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%; /* 50% = cirkel */
  background-color: var(--bordeaux);
}

.uforpligtende_samtale {
  text-align: center;
  background-color: var(--salvie-lys);
  margin-bottom: 0;
}
.uforpligtende_samtale p {
  font-size: 1.2rem;
}

/* --- Tablet/computer: tekst og tjekliste ved siden af hinanden --- */
@media (min-width: 700px) {
  .hjaelper-dig {
    max-width: 68rem;
  }

  .hjaelper-dig-indhold {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
  }

  /* flex: 1.2 og flex: 1 = teksten får lidt mere plads end kassen */
  .hjaelper-dig-tekst {
    flex: 1.2;
  }

  /* align-self: stretch = kassen bliver lige så høj som teksten.
     margin-top: 0 = kassen starter i samme højde som teksten. */
  .tjekliste {
    flex: 1;
    align-self: stretch;
    margin-top: 0;
    padding: 2.4rem 3rem;
  }
}

/* ============================================================
   3. HVORFOR MANUVISION KROPSTERAPI?
   Bånd med lys baggrund.
   ============================================================ */
.hvorfor-manuvision {
  max-width: 52rem;
  margin-top: 3rem;
  margin-bottom: 0;
  padding-block: 5rem; /* mere luft i top og bund */
  background-color: var(--lyscreme);
  border-bottom: 3px solid var(--salvie-lys);
}

.hvorfor-manuvision h2 {
  margin-bottom: 1.6rem;
}

.hvorfor-manuvision p {
  margin-bottom: 1.4rem; /* luft mellem afsnittene */
}

/* Computer: baggrunden går ud til skærmens kanter (max-width: none),
   mens teksten holdes i en smallere, centreret spalte. */
@media (min-width: 700px) {
  .hvorfor-manuvision {
    max-width: none;
    margin-inline: 0;
    padding-block: 8rem;
    margin-top: 0;
  }

  .hvorfor-manuvision h2,
  .hvorfor-manuvision p {
    max-width: 56rem;
    margin-inline: auto;
  }
}

/* ============================================================
   4. BÅND MED SIGNATUR
   Hele båndet er ét stort link til bookingsystemet.
   Teksten står i skriveskrift, så den ligner en underskrift.
   ============================================================ */
.bjaelke {
  display: block;
  background-color: var(--petroleum-moerk);
  color: var(--hvid);
  text-decoration: none;
  text-align: center;
  padding: 3.5rem 1.5rem;
  transition: filter 0.2s ease;
  margin: 0;
}

.bjaelke:hover {
  filter: brightness(1.15);
}

/* clamp(mindst, ønsket, størst) = skriftstørrelsen vokser med
   skærmbredden (9vw), men aldrig under 1.8rem eller over 3.4rem. */
.bjaelke h2 {
  margin-bottom: 0.3rem;
  white-space: nowrap;
  font-family: "Alex Brush", "Playfair Display", cursive;
  font-weight: 400;
  font-size: clamp(1.8rem, 9vw, 3.4rem);
}

.bjaelke p {
  margin: 0;
}

@media (min-width: 700px) {
  .bjaelke {
    padding: 4.5rem 2rem;
  }
}

.balance-teaser {
  background-color: var(--sand);
  border-radius: 16px;
  padding: 2rem;
}

/* padding: 8rem på alle sider var for meget på tablet (700-999px) –
   billede + tekst + den brede luft kunne ikke være der i bredden, så
   siden fik vandret scroll. Luften trappes op i to trin i stedet. */
@media (min-width: 700px) {
  .balance-teaser {
    padding: 3rem;
  }
}

@media (min-width: 1000px) {
  .balance-teaser {
    padding: 8rem;
  }
}
/* ============================================================
   5. ET FORLØB HOS MIG
   ============================================================ */
#et-forloeb-hos-mig {
  background-color: var(--sand);
}
.forloeb-kort img {
  margin-top: 2rem;
}
@media (min-width: 700px) {
  #et-forloeb-hos-mig {
    max-width: none;
    padding: 8.2rem;
    margin-bottom: 0;
  }
}