/* ============================================================
   PRISER – priser.html
   Skrevet mobil-først: alt ligger i én kolonne på mobil, og
   folder sig ud i flere kolonner fra 700px / 1000px.

   Afsnit:
     1. Topbillede
     2. Nyhed-kort (varm introduktion)
     3. Individuel behandling (blå bånd på computer)
     4. Vælg den pris der passer til dig (sandfarvet bånd på computer)
     5. Book din tid
     6. Betingelser for afbestilling
     7. Fælles: sektionstitel med streger, kort-ikon

   SKRIFTSTØRRELSER PÅ DENNE SIDE (så det er ens overalt):
     sektionstitel   1rem   (1.15rem på computer)
     kort-overskrift 1rem
     brødtekst       0.95rem
     pris            1.8rem  (Playfair Display)
   ============================================================ */

/* ============================================================
   1. TOPBILLEDE – går kant til kant
   ============================================================ */
main .sidebanner {
  max-width: none;
  margin: 0;
  padding: 0;
}

.sidebanner figure {
  margin: 0;
}

/* height i vw (procent af skærmbredden) + max-height = billedet er
   lavt og bredt, men bliver aldrig højere end 300px */
.sidebanner figure img {
  width: 100%;
  height: 42vw;
  max-height: 300px;
  object-fit: cover;
  object-position: center 55%; /* holder svanen og vandpladsket i billedet */
}

/* ============================================================
   2. NYHED-KORT
   Sandfarvet kort der lapper en anelse op over topbilledet
   (negativ margin-top = kortet rykkes op over billedet).
   ============================================================ */
.nyhed {
  background-color: var(--sand);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(63, 95, 104, 0.14);
  padding: 2rem 1.6rem;
  margin: -3.5rem 1.2rem 0;
  position: relative; /* så kortet ligger OVENPÅ billedet */
}

/* Lille pille-label over overskriften (centreret) */
.nyhed-tekst {
  text-align: center;
}

.nyhed .kicker {
  display: inline-block;
  background-color: var(--petroleum);
  color: var(--hvid);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.nyhed h2 {
  margin-bottom: 1rem;
  margin-inline: auto; /* h2 har max-width, så auto-margin centrerer den */
  text-align: center;
}

/* De tre punkter: én under hinanden på mobil, prik foran hvert punkt */
.nyhed-punkter {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: grid;
  gap: 0.8rem;
  text-align: left;
}

.nyhed-punkter li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-small);
  line-height: 1.5;
}

.nyhed-punkter li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bordeaux);
}

@media (min-width: 700px) {
  .nyhed {
    width: calc(100% - 5rem); /* 2.5rem er luft i hver side på tablet */
    max-width: 74rem;
    margin: -5rem auto 9rem; /* 9rem er luft ned til det blå bånd */
    padding: 3.5rem 4rem;
  }

  .nyhed p {
    max-width: 52rem;
    margin-inline: auto;
  }

  /* Tre punkter ved siden af hinanden */
  .nyhed-punkter {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(90, 68, 50, 0.2);
  }
}

/* ============================================================
   3. INDIVIDUEL BEHANDLING
   ============================================================ */
.individuel {
  margin-top: 4rem;
}

/* Kortene ligger under hinanden på mobil */
.pris-liste {
  display: grid;
  gap: 1.2rem;
  margin-top: 2rem;
}

.pris-kort {
  border: 1.5px solid var(--petroleum);
  border-radius: 16px;
  padding: 2rem 1.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pris-kort h3 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-card);
  margin: 0.3rem 0 0.8rem;
}

.pris-kort p {
  margin: 0.2rem 0;
  font-size: var(--fs-small);
}

.pris-kort .spar {
  color: var(--petroleum-moerk);
  font-weight: 600;
}

.pris-kort .pris-tal {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--fs-pris);
  font-weight: 600;
  margin: 0.8rem 0 1.4rem;
}

.pris-kort .knap {
  margin: 0 auto;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-note);
}

.pris-note {
  margin: 1.6rem auto 0;
  max-width: 40rem;
  text-align: center;
  font-size: var(--fs-note);
  color: var(--petroleum-moerk);
}

/* Fælles for de to bånd på computer (.individuel og .prisvalg):
   baggrunden går kant til kant, men indholdet holdes i en spalte.
   max(2.5rem, calc((100% - 73rem) / 2)) = "sideluft er mindst 2.5rem,
   men på store skærme bliver den så stor, at indholdet er 73rem bredt". */
@media (min-width: 700px) {
  .individuel,
  .prisvalg {
    max-width: none;
    margin-block: 0;
    padding-block: 6rem;
    padding-inline: max(2.5rem, calc((100% - 73rem) / 2));
  }

  .individuel {
    background-color: var(--petroleum);
    color: var(--creme);
  }

  /* SUBGRID: hvert kort har 6 dele (ikon, overskrift, 2 tekstlinjer, pris,
     knap). Kortene spænder over 6 rækker i det store grid og bruger
     "grid-template-rows: subgrid" = de låner forælderens rækker. Så står
     ikon, overskrift, pris og knap på præcis samme højde i begge kort,
     selv om teksten er lidt forskellig. row-gap er 0, for luften styres af
     de enkelte elementers margin. */
  .pris-liste {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.6rem;
  }

  .pris-kort {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    justify-items: center;
    align-items: start;
  }

  /* Kortene får en svag fyldfarve på det blå bånd */
  .pris-kort {
    border-color: var(--petroleum-moerk);
    background-color: rgba(253, 251, 246, 0.08);
    padding: 2.6rem 2rem;
  }

  /* Lys tekst, fordi baggrunden er mørk */
  .pris-kort .spar,
  .pris-note {
    color: var(--creme);
  }
}

/* ============================================================
   4. VÆLG DEN PRIS DER PASSER TIL DIG
   Tre grønne kort. På computer ligger de i et sandfarvet bånd.
   ============================================================ */
.prisvalg {
  background: none;
  margin-top: 4rem;
}

.pris-gruppe {
  display: grid;
  gap: 1.2rem;
  margin-top: 2rem;
}

.gruppe {
  background-color: var(--salvie);
  border-radius: 16px;
  padding: 2rem 1.6rem;
}

.gruppe h3 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-card);
  margin: 0.3rem 0 0.8rem;
}

.gruppe p {
  margin: 0.3rem 0;
  font-size: var(--fs-small);
}

.gruppe .pris-tal {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--fs-pris);
  font-weight: 600;
  margin: 0.5rem 0 1rem;
}

/* Lille note nederst i kortet med en tynd streg over */
.gruppe .gruppe-note {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(90, 68, 50, 0.2);
  font-size: var(--fs-note);
}

@media (min-width: 700px) {
  .prisvalg {
    background-color: var(--sand);
  }

  .gruppe {
    padding: 2.4rem 2rem;
  }
}

/* Tre kort ved siden af hinanden fra 1000px – med SUBGRID.
   Kortene har forskelligt indhold (nogle har to priser, andre kun én),
   men de skal stå ens. Derfor har gridet 7 rækker: ikon, overskrift,
   tekst, pris, tekst, pris og note. Hvert kort spænder over alle 7
   rækker (grid-row: span 7) og låner dem med "grid-template-rows:
   subgrid". Så står ikon, overskrift og priser på samme højde i alle
   kort. Noten lægges i række 7 (nederst), så den altid står i bunden.
   row-gap er 0, for luften styres af de enkelte elementers margin. */
@media (min-width: 1000px) {
  .pris-gruppe {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 1.4rem;
  }

  .gruppe {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    align-items: start;
  }

  .gruppe .gruppe-note {
    grid-row: 7;
    align-self: end;
  }
}

/* ============================================================
   5. BOOK DIN TID
   ============================================================ */
.book-cta {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  margin-top: 4rem;
}

.book-foto {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center 40%; /* viser Mette og klienten i samtalen */
  border-radius: 18px;
}

.book-cta h2 {
  margin-bottom: 0.8rem;
}

.book-knapper {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

.book-knapper .knap {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-note);
}

/* Ugedagene står på en linje under knappens tekst */
.book-knapper .knap span {
  display: block;
  font-size: var(--fs-label);
  opacity: 0.85;
  text-transform: none;
  letter-spacing: normal;
}

.book-kontakt {
  margin-top: 1.6rem;
  font-size: var(--fs-small);
  color: var(--petroleum-moerk);
}

/* Telefon og mail: ikon + tekst på samme linje, må ikke brydes */
.book-kontakt span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1.2rem;
  white-space: nowrap;
}

/* Linket er selv en flex-boks, så ikonet står ved siden af teksten
   (billeder er "display: block" i base.css og ellers ville de stå over) */
.book-kontakt a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.book-kontakt img {
  width: 14px;
  height: 14px;
}

/* Tablet: fotoet står stadig over teksten, men teksten er lidt større */
@media (min-width: 700px) {
  .book-cta {
    margin-top: 9rem;
  }

  .book-foto {
    height: 320px;
  }

  .book-knapper {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Computer: foto til venstre, tekst til højre */
@media (min-width: 1000px) {
  .book-cta {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }

  .book-foto {
    flex: 0 0 38%;
    width: 38%;
    height: 340px;
  }

  /* min-width: 0 = teksten må blive smallere end sit indhold, så
     siden ikke får vandret scroll */
  .book-cta-tekst {
    flex: 1;
    min-width: 0;
  }
}

/* ============================================================
   6. BETINGELSER FOR AFBESTILLING
   Lys sandfarvet boks med tynd kant.
   ============================================================ */
.betingelser {
  background-color: var(--sand);
  border: 1.5px solid var(--petroleum);
  border-radius: 18px;
  margin: 4rem 1.2rem 3rem;
  padding: 2.4rem 1.6rem 3rem;
}

.betingelser h2 {
  max-width: none; /* ellers holder h2's 60ch-grænse den til venstre */
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1.2rem;
}

.betingelser p {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

/* margin-inline: auto centrerer boksen i den normale spalte
   (en fast margin på begge sider ville presse den til venstre) */
@media (min-width: 700px) {
  .betingelser {
    width: calc(100% - 5rem);
    margin: 9.6rem auto;
    padding: 3.5rem 4rem 4rem;
  }
}

/* ============================================================
   7. FÆLLES
   ============================================================ */

/* Sektionstitel med en tynd streg på hver side.
   ::before og ::after er to tomme "streger" (flex: 1 = de fylder
   resten af bredden), og teksten står imellem dem. */
.linje-titel {
  max-width: none; /* h2 har ellers max-width: 60ch, så titlen stod til venstre og stregerne blev korte */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.linje-titel::before,
.linje-titel::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--bordeaux);
  opacity: 0.45;
}

/* Rundt logo-ikon øverst på priskortene */
.kort-ikon {
  display: block;
  width: 7rem;
  height: 3.4rem;
  background-image: url(../images/logoer/logo-ikon-blaa.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56%;
  margin-block: 1rem;
}

@media (min-width: 700px) {
  .linje-titel {
    gap: 2rem;
    margin-bottom: 2.5rem;
  }

  /* På det blå bånd skal stregerne og ikonet være lyse */
  .individuel .linje-titel::before,
  .individuel .linje-titel::after {
    background-color: var(--creme);
  }

  .kort-ikon {
    margin-bottom: 1.6rem;
    background-image: url(../images/logoer/logo-ikon-hvid.png);
    width: 30%;
  }
}