/* =========================================================
   Tjenestesider – lag oppå css/style.css
   (lastes ETTER css/style.css på tjenester/*.html)

   Sidene er én rolig kolonne i full bredde:
   hero → media-rader → «Slik jobber vi» → FAQ → skjema → andre tjenester.
   Skjemaet er sidens eneste konverteringspunkt.

   Bruker tokenskalaen fra style.css (--luft-*, --tekst-*) så
   tjenestesidene puster i samme rytme som resten av nettstedet.
   ========================================================= */

/* ---------------------------------------------------------
   Innholdskolonnen
   --------------------------------------------------------- */
.tjeneste-innhold > :first-child { margin-top: 0; }
.tjeneste-innhold > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------
   Media-rader – seksjonspuls mellom radene gir dem luft
   --------------------------------------------------------- */
.media-rad { margin-block: var(--luft-sek); }

/* Tekstkolonnen får en rolig linjelengde selv i full bredde */
.media-rad > :not(.media-bilde) { max-width: 34em; }
.media-rad p, .media-rad li {
  font-size: var(--tekst-l);
  line-height: 1.7;
  color: #2A3340;
  text-wrap: pretty;
}
.media-rad ul { margin: var(--luft-m) 0 0; padding-left: 20px; display: grid; gap: var(--luft-xs); }
.media-rad > div > :last-child { margin-bottom: 0; }

/* Jevn beskjæring av bildene i radene */
.media-bilde figure { margin: 0; }
.media-bilde .bilde-ramme img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }

/* Eik-rammen ligger 16px utenfor bildet, ned og mot høyre. Når bildet står i
   høyre kolonne og kolonnen går helt ut til containerkanten, havner streken
   4px fra skjermkanten på alt smalere enn ca. 1250px (1024, 1152, 1200 er
   vanlige bredder). Vi holder av de 16 pikslene i raden, så streken flukter
   med hårstrekene over og under i stedet for å presse seg mot kanten. */
@media (min-width: 880px) {
  .media-rad { padding-right: 16px; }
}

/* Bildetekst: stille, venstrestilt, merket med en kort eik-strek.
   Eik-rammen ligger 16px under bildet – klaringen legges oppå den. */
.media-bilde figcaption {
  margin-top: calc(16px + var(--luft-s));
  padding-left: var(--luft-s);
  border-left: 2px solid var(--eik);
  max-width: 46ch;
  font-size: var(--tekst-xs);
  line-height: 1.65;
  color: var(--tekst-sek);
  text-align: left;
}

/* ---------------------------------------------------------
   «Slik jobber vi» – hårfine linjer i stedet for en boks
   --------------------------------------------------------- */
.prosess-panel {
  margin-block: var(--luft-sek);
  padding-block: clamp(var(--luft-xl), 6vw, var(--luft-2xl));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.prosess-panel h2 { margin-top: 0; text-align: center; }
.prosess-panel .prosess-liste { margin-top: var(--luft-l); gap: var(--luft-l); }
/* Uten cellepadding treffer forbindelseslinjen (top: 24px) midt i tallsirkelen */
.prosess-panel .prosess-liste li { padding: 0; }

/* ---------------------------------------------------------
   FAQ – redaksjonell liste med hairline-skiller, ingen bokser
   --------------------------------------------------------- */
.tjeneste-innhold .prose { margin-top: var(--luft-sek); }
.tjeneste-innhold .prose > h2:first-child { margin-top: 0; text-align: center; }

.faq { border-bottom: 1px solid var(--hairline); margin-top: var(--luft-l); }
.faq details,
.faq details:hover {
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin-bottom: 0;
}
.faq summary {
  padding: var(--luft-m) var(--luft-l) var(--luft-m) 0;
  transition: color .18s;
}
.faq summary:hover { color: var(--blaa-tekst); }
.faq summary::after { right: 6px; color: var(--eik); font-size: var(--tekst-xl); }
.faq details[open] summary { color: var(--blaa-tekst); }
.faq details p { padding: 0 var(--luft-l) var(--luft-m) 0; line-height: 1.7; }

/* Avsluttende linje under FAQ – rolig og sentrert */
.tjeneste-innhold .prose > p:last-child {
  margin-top: var(--luft-m);
  text-align: center;
  color: var(--tekst-sek);
  font-size: var(--tekst-m);
}

/* ---------------------------------------------------------
   Skjemaet – lys flate-alt-flate i full bredde, skjema sentrert.
   box-shadow + clip-path gir full bleed uten 100vw-overflow.
   --------------------------------------------------------- */
.skjema-seksjon {
  position: relative;
  margin-top: var(--luft-sek);
  padding-block: clamp(var(--luft-xl), 7vw, var(--luft-2xl));
  background: var(--flate-alt);
  box-shadow: 0 0 0 100vmax var(--flate-alt);
  clip-path: inset(0 -100vmax);
}
.skjema-seksjon > * { max-width: 40rem; margin-inline: auto; }
.skjema-seksjon .sek-intro { margin-bottom: var(--luft-l); }
.skjema-seksjon .skjema { box-shadow: 0 18px 48px rgba(1, 42, 102, .10); }

/* ---------------------------------------------------------
   «Se resultatet» – peker videre til prosjektene
   Blokka lå i full 1160px-bredde mellom to sentrerte blokker, så knappen
   ble strandet nesten 460px fra teksten sin. Den lå også bare 56px under
   bookingfeltet, mens hver eneste andre overgang på siden er én seksjonspuls.
   Vi gir den målet til FAQ-spalten over, så hårstrekene står i samme spor,
   og samme puls som resten av siden.
   --------------------------------------------------------- */
.skjema-seksjon + .neste-steg {
  max-width: 720px;
  margin-inline: auto;
  margin-top: var(--luft-sek);
}

/* ---------------------------------------------------------
   «Andre tjenester» – arver kortrytmen fra style.css
   --------------------------------------------------------- */
.relatert-tittel { text-align: center; margin-top: var(--luft-sek); }
.relatert-grid { margin-top: var(--luft-l); }

/* ---------------------------------------------------------
   Mobil/nettbrett
   --------------------------------------------------------- */

/* Split-hero stablet: bildet ligger UNDER tekstpanelet, så overgangen
   skal tone fra det mørke panelet over bildet – ikke inn fra venstre kant */
@media (max-width: 879px) {
  .split-hero .split-hero-bilde::before {
    background: linear-gradient(180deg, #012A66 0%, rgba(1,42,102,.22) 26%, transparent 52%);
  }
}

/* Eik-rammen forskyves bare 10px på mobil – stram inn bildeteksten */
@media (max-width: 720px) {
  .media-bilde figcaption { margin-top: calc(10px + var(--luft-s)); }
  .faq summary { padding-right: var(--luft-m); }
  .faq details p { padding-right: var(--luft-2xs); }
}

/* Booking-blokk: sidens avslutning – åpner dialogen (ett skjema, ingen duplikater) */
.booking-blokk { max-width: 640px; margin-inline: auto; text-align: center; }
.booking-blokk .badge { justify-content: center; }
.booking-blokk h2 { margin-bottom: var(--luft-xs, 12px); }
.booking-blokk .sek-ingress { margin-bottom: var(--luft-l, 40px); }
.booking-blokk-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }