/* =========================================================
   FLYTT HIT — /flytt-hit/ og /en/moving-to-lister/
   =========================================================
   Retning A fra Claude Design-canvaset 15. sep 2026, «Slik fungerer det».
   Flatene i rekkefølge:

     0. Hero          midnatt / foto — hvorfor regionen gjør dette
     1. Losen         krem           — hva er en los?
     2. Portalen      varm hvit      — hvorfor gå via portalen?
     3. Forløpet      mørkt kort     — slik går det for seg (ekte rekkefølge)
     4. Forventninger krem           — hvem gjør hva
     5. FAQ           varm hvit      — bare ny informasjon
     6. Slutt         midnatt / foto — du trenger ikke ha bestemt deg

   Delte roller (.l-eyebrow, .l-section-title) kommer fra lister.css. Alt
   her har flytt-prefiks.
   ========================================================= */

.flytt-page { background: var(--color-cream); }

.flytt-inner {
  max-width: var(--l-content-max);
  margin: 0 auto;
}
.flytt-seksjon {
  padding: clamp(72px, 10vh, 128px) clamp(20px, 5vw, 56px);
}
.flytt-hode {
  display: flex;
  flex-direction: column;
}
.flytt-hode--delt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: end;
}
.flytt-hode--delt .flytt-ingress { margin: 0; }
.flytt-eyebrow { color: var(--aksent-tekst); }
.flytt-eyebrow--mork { color: var(--aksent-tekst-mork); }
.flytt-tittel--h2 {
  font-size: var(--text-3xl);
  font-weight: 400;
}
.flytt-ingress {
  margin: clamp(18px, 3vh, 26px) 0 0;
  max-width: 560px;
  font-family: var(--font-body);
  font-size: var(--brod);
  line-height: var(--linje-brod);
  color: var(--color-stein);
}
.flytt-ingress--lys { color: var(--tekst-dempet-mork); }

.flytt-kredit {
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-xs);
  color: var(--tekst-dempet);
}
.flytt-kredit--over {
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(10, 22, 40, 0.55);
  color: var(--color-cream);
}

.flytt-handling {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: clamp(26px, 4vh, 40px);
}
.flytt-knapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-sm);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-full);
  background: var(--color-gold);
  color: var(--color-midnight);
  transition: background var(--duration-normal) var(--ease-out-expo),
              transform var(--duration-normal) var(--ease-out-expo);
}
.flytt-knapp:hover,
.flytt-knapp:focus-visible {
  background: var(--color-leire-lys);
  color: var(--color-midnight);
  transform: translateY(-1px);
}
.flytt-mikro {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--brod-liten);
  letter-spacing: var(--sperring-xs);
  color: var(--tekst-dempet);
}
.flytt-mikro--mork { color: var(--tekst-dempet-mork); }

/* ---- 0. Hero ---- */
.flytt-hero {
  display: grid;
  grid-template-columns: 6fr 5fr;
  /* Gulvet er aldri høyere enn skjermen: på liggende telefon (390 px) ga
     et fast gulv en helt som var høyere enn skjermen, og tittelen, som står
     nederst, havnet under kanten. */
  min-height: clamp(min(560px, 100svh), 86vh, 820px);
  background: var(--color-midnight);
}
.flytt-hero__tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Toppstripa er fast og ligger over heroen. */
  padding: calc(var(--nav-height) + clamp(40px, 7vh, 72px)) clamp(28px, 5vw, 72px) clamp(56px, 9vh, 96px) max(clamp(20px, 5vw, 56px), calc((100vw - var(--l-content-max)) / 2));
}
.flytt-hero__tittel {
  margin: clamp(14px, 2vh, 22px) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* Høydetak, som tittelen på steds- og kommunesidene: på liggende telefon
     (390 px høy) gikk en tittel over fire linjer under kanten. Taket slår
     bare inn på lave skjermer; fra 1024×768 og opp er graden uendret. */
  font-size: min(var(--text-5xl), var(--hero-tittel-hoydetak));
  line-height: var(--linje-hero);
  letter-spacing: var(--sperring-tett);
  color: var(--color-cream);
  text-wrap: balance;
}
.flytt-hero__dek {
  margin: clamp(18px, 3vh, 28px) 0 0;
  max-width: 36rem;
  font-family: var(--font-body);
  font-size: var(--brod);
  line-height: var(--linje-brod);
  color: var(--tekst-dempet-mork);
}
.flytt-hero__figur {
  position: relative;
  margin: 0;
  min-height: 100%;
  overflow: hidden;
}
.flytt-hero__figur img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bildefila er beskåret slik at personene står midt i, mellom 41 og 65 %
     av høyden. Da holder et midtstilt utsnitt fra smal og høy (0,4) til
     liggende 4:3 — ikke juster fokuset mot kanten igjen, det brakk på
     skjermformater vi ikke målte. */
  object-position: 50% 55%;
}

/* ---- 1. Losen ---- */
.flytt-seksjon--los { background: var(--color-cream); }
.flytt-los {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}
.flytt-los__figur {
  margin: 0;
  aspect-ratio: 4 / 4.2;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-sand);
}
.flytt-los__figur img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.flytt-los .flytt-tittel--h2 { margin-top: clamp(12px, 2vh, 18px); }
.flytt-los__navn {
  margin: clamp(18px, 3vh, 24px) 0 0;
  font-size: var(--brod-liten);
  font-style: oblique 14deg;
}

/* ---- 2. Portalen ---- */
.flytt-seksjon--portal {
  background: var(--color-warm-white);
  border-top: 1px solid var(--color-sand);
}
.flytt-portal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vh, 44px) clamp(40px, 5vw, 72px);
  margin: clamp(40px, 6vh, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.flytt-portal__post {
  padding-top: 24px;
  border-top: 2px solid var(--color-text-primary);
}
.flytt-portal__tittel {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--linje-tittel);
  color: var(--color-text-primary);
}
.flytt-portal__tekst {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--color-stein);
}

/* ---- 3. Forløpet ---- */
.flytt-seksjon--forlop { background: var(--color-kort-mork); }
.flytt-forlop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(40px, 6vh, 64px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(241, 235, 227, 0.18);
}
.flytt-forlop__post {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px clamp(18px, 2vw, 28px) 8px;
  border-left: 1px solid rgba(241, 235, 227, 0.18);
}
.flytt-forlop__post:first-child {
  padding-left: 0;
  border-left: 0;
}
.flytt-forlop__nr {
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-md);
  color: var(--aksent-tekst-mork);
}
.flytt-forlop__tittel {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--linje-tittel);
  color: var(--color-cream);
}
.flytt-forlop__tekst {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--tekst-dempet-mork);
}

/* ---- 4. Forventninger ---- */
.flytt-seksjon--forventning { background: var(--color-cream); }
.flytt-roller {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 64px);
  margin: clamp(40px, 6vh, 56px) 0 0;
}
.flytt-rolle__tittel {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--linje-tittel);
  color: var(--color-text-primary);
}
.flytt-rolle__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-sand);
}
.flytt-rolle__liste li {
  position: relative;
  padding: 16px 0 16px 28px;
  border-bottom: 1px solid var(--color-sand);
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--color-stein);
}
.flytt-rolle__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(16px + 0.6em);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-stein);
}
.flytt-rolle__liste--los li::before { background: var(--aksent-tekst); }

/* ---- 5. FAQ ---- */
.flytt-seksjon--faq {
  background: var(--color-warm-white);
  border-top: 1px solid var(--color-sand);
}
.flytt-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 5vw, 72px);
  margin: clamp(36px, 5vh, 56px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--color-text-primary);
}
.flytt-faq__post {
  padding: 26px 0;
  border-bottom: 1px solid var(--color-sand);
}
.flytt-faq__sporsmal {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--linje-tittel);
  color: var(--color-text-primary);
}
.flytt-faq__svar {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--color-stein);
}

/* ---- 6. Slutt ---- */
.flytt-slutt {
  display: grid;
  grid-template-columns: 5fr 6fr;
  background: var(--color-midnight);
}
.flytt-slutt__figur {
  position: relative;
  margin: 0;
  /* Stående bilde i en kolonne som blir bred på store skjermer. Høyden
     følger bredden, og fokuset ligger øverst, så barnet på skuldrene ikke
     mister hodet (kuttet på 1920 px da høyden fulgte vinduet). */
  min-height: clamp(480px, 46vw, 900px);
  overflow: hidden;
}
.flytt-slutt__figur img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 5%;
}
.flytt-slutt__tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 9vh, 96px) max(clamp(20px, 5vw, 56px), calc((100vw - var(--l-content-max)) / 2)) clamp(56px, 9vh, 96px) clamp(28px, 6vw, 88px);
}

/* ---- Innfading ved scroll (samme kurve som /om/) ---- */
.js .flytt-page [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.js .flytt-page [data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* ---- Smalere flater ---- */
/* Helten stables (bildet over teksten) på smale skjermer, men ikke på en
   lav, bred skjerm: på liggende telefon (844×390) ga et 4:3-bilde over hele
   bredden 633 px bilde før tittelen. Der står tekst og bilde side om side,
   som på skrivebord. */
@media (max-width: 900px) and (min-height: 501px), (max-width: 560px) {
  .flytt-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  /* Bildet først på mobil, teksten under — tittelen skal ikke gjemme seg
     bak den faste toppstripa. */
  .flytt-hero__figur {
    order: -1;
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin-top: var(--nav-height);
  }
  .flytt-hero__tekst {
    padding: clamp(32px, 6vh, 48px) clamp(20px, 5vw, 56px) clamp(48px, 8vh, 72px);
  }
}
@media (max-width: 900px) {
  .flytt-slutt {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .flytt-slutt__figur {
    min-height: 0;
    aspect-ratio: 4 / 4.4;
  }
  .flytt-slutt__tekst {
    padding: clamp(40px, 7vh, 56px) clamp(20px, 5vw, 56px) clamp(56px, 9vh, 72px);
  }
  .flytt-hode--delt,
  .flytt-los,
  .flytt-portal,
  .flytt-roller,
  .flytt-faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .flytt-faq { gap: 0; }
  .flytt-forlop { grid-template-columns: minmax(0, 1fr); }
  .flytt-forlop__post,
  .flytt-forlop__post:first-child {
    padding: 22px 0;
    border-left: 0;
    border-top: 1px solid rgba(241, 235, 227, 0.18);
  }
  .flytt-forlop__post:first-child { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flytt-knapp { transition: none; }
  .js .flytt-page [data-reveal] { opacity: 1; transform: none; transition: none; }
}