/* =========================================================
   TRAINEE LISTER — /trainee-lister/
   =========================================================
   Retning A fra Claude Design-canvaset 14. sep 2026, «Livet rundt jobben».
   Flatene i rekkefølge, og spørsmålet hver svarer på:

     0. Hero       midnatt / foto — hva er det?
     1. Fakta      varm hvit      — hva innebærer året?
     2. Nettverk   krem           — hvorfor er det bra for meg?
     3. Hvem       varm hvit      — for hvem?
     4. Videre     midnatt        — hvor finner jeg mer? (traineelister.no)

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

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

.trainee-inner {
  max-width: var(--l-content-max);
  margin: 0 auto;
}
.trainee-seksjon {
  padding: clamp(72px, 10vh, 128px) clamp(20px, 5vw, 56px);
}
.trainee-to-kol {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: start;
}
.trainee-hode {
  display: flex;
  flex-direction: column;
}
.trainee-tittel--h2 {
  font-size: var(--text-3xl);
  font-weight: 400;
}
.trainee-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);
}
.trainee-ingress--lys { color: var(--tekst-dempet-mork); }

/* ---- 0. Hero: tekst til venstre, foto til høyre ---- */
.trainee-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* 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);
}
.trainee-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));
}
.trainee-eyebrow--mork { color: var(--aksent-tekst-mork); }
.trainee-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;
}
.trainee-hero__dek {
  margin: clamp(18px, 3vh, 28px) 0 0;
  max-width: 34rem;
  font-family: var(--font-body);
  font-size: var(--brod);
  line-height: var(--linje-brod);
  color: var(--tekst-dempet-mork);
}
.trainee-hero__handling {
  margin-top: clamp(26px, 4vh, 40px);
}
.trainee-hero__figur {
  position: relative;
  margin: 0;
  min-height: 100%;
  overflow: hidden;
}
.trainee-hero__figur img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Folkene og brettene står i nedre halvdel; himmelen kan gå. */
  object-position: 50% 62%;
}

.trainee-kredit {
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-xs);
  color: var(--tekst-dempet);
}
.trainee-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);
}

.trainee-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);
}
.trainee-knapp:hover,
.trainee-knapp:focus-visible {
  background: var(--color-leire-lys);
  color: var(--color-midnight);
  transform: translateY(-1px);
}

/* ---- 1. Fakta ---- */
.trainee-fakta {
  background: var(--color-warm-white);
  border-bottom: 1px solid var(--color-sand);
  padding: 0 clamp(20px, 5vw, 56px);
}
.trainee-fakta__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: var(--l-content-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.trainee-fakta__post {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(32px, 5vh, 52px) clamp(20px, 3vw, 40px);
  border-left: 1px solid var(--color-sand);
}
.trainee-fakta__post:first-child {
  padding-left: 0;
  border-left: 0;
}
.trainee-fakta__tittel {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-3xl);
  line-height: var(--linje-tett);
  color: var(--color-text-primary);
}
.trainee-fakta__tekst {
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--tekst-dempet);
}

/* ---- 2. Nettverket ---- */
.trainee-seksjon--nettverk { background: var(--color-cream); }
.trainee-seksjon--nettverk .trainee-hode {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: end;
}
.trainee-seksjon--nettverk .trainee-ingress { margin: 0; }
.trainee-nettverk {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin: clamp(40px, 6vh, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.trainee-nettverk__post {
  display: flex;
  flex-direction: column;
}
.trainee-nettverk__figur {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-sand);
}
.trainee-nettverk__figur img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trainee-nettverk__tittel {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--linje-tittel);
  color: var(--color-text-primary);
}
.trainee-nettverk__tekst {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--color-stein);
}

/* ---- 3. For hvem ---- */
.trainee-seksjon--hvem {
  background: var(--color-warm-white);
  border-top: 1px solid rgba(10, 22, 40, 0.06);
}
.trainee-hvem {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-sand);
}
.trainee-hvem li {
  position: relative;
  padding: 22px 0 22px 30px;
  border-bottom: 1px solid var(--color-sand);
  font-family: var(--font-body);
  font-size: var(--brod);
  line-height: var(--linje-brod-tett);
  color: var(--color-text-primary);
}
.trainee-hvem li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(22px + 0.7em);
  width: 14px;
  height: 1px;
  background: var(--aksent-tekst);
}

/* ---- 4. Videre til traineelister.no ---- */
.trainee-seksjon--videre { background: var(--color-kort-mork); }
.trainee-to-kol--videre { align-items: center; }
.trainee-merke {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-midnight);
}
/* Mønsteret fyller toppen; logoen står på en rolig mørk flate under.
   Lagt oppå løkkene druknet den lyse logoen i den grønne streken. */
.trainee-merke__monster {
  position: absolute;
  inset: 0 0 30% 0;
  width: 100%;
  height: 70%;
  object-fit: cover;
  object-position: 50% 30%;
}
.trainee-merke__logo {
  position: absolute;
  left: 10%;
  bottom: 10%;
  width: 80%;
  height: auto;
}
.trainee-videre {
  display: flex;
  flex-direction: column;
  margin: clamp(28px, 4vh, 40px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(241, 235, 227, 0.18);
}
.trainee-videre__lenke {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(241, 235, 227, 0.18);
  text-decoration: none;
}
.trainee-videre__tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trainee-videre__navn {
  font-family: var(--font-body);
  font-size: var(--brod);
  color: var(--color-cream);
}
.trainee-videre__hva {
  font-family: var(--font-body);
  font-size: var(--brod-liten);
  color: var(--tekst-dempet-mork);
}
.trainee-videre__pil {
  font-family: var(--font-body);
  font-size: var(--brod);
  color: var(--aksent-tekst-mork);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
.trainee-videre__lenke:hover .trainee-videre__navn,
.trainee-videre__lenke:focus-visible .trainee-videre__navn {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.trainee-videre__lenke:hover .trainee-videre__pil,
.trainee-videre__lenke:focus-visible .trainee-videre__pil {
  transform: translate(2px, -2px);
}
.trainee-videre__lenke:focus-visible {
  outline: 2px solid var(--color-aurora);
  outline-offset: 4px;
}

/* ---- Innfading ved scroll (samme kurve som /om/) ---- */
.js .trainee-page [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.js .trainee-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) {
  .trainee-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. */
  .trainee-hero__figur {
    order: -1;
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin-top: var(--nav-height);
  }
  .trainee-hero__tekst {
    padding: clamp(32px, 6vh, 48px) clamp(20px, 5vw, 56px) clamp(48px, 8vh, 72px);
  }
}
@media (max-width: 900px) {
  .trainee-fakta__liste { grid-template-columns: minmax(0, 1fr); }
  .trainee-fakta__post,
  .trainee-fakta__post:first-child {
    padding: 24px 0;
    border-left: 0;
    border-top: 1px solid var(--color-sand);
  }
  .trainee-fakta__post:first-child { border-top: 0; }
  .trainee-seksjon--nettverk .trainee-hode,
  .trainee-to-kol {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .trainee-nettverk { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .trainee-to-kol--videre .trainee-merke { order: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .trainee-knapp,
  .trainee-videre__pil { transition: none; }
  .js .trainee-page [data-reveal] { opacity: 1; transform: none; transition: none; }
}