/* =========================================================
   STARTE BEDRIFT — /starte-bedrift/
   =========================================================
   Retning A fra Claude Design-canvaset 15. sep 2026, «Veien fra idé til
   bedrift». Samme familie som /trainee-lister/ (hero, seksjonsrytme,
   videre-lenker), men egne komponenter der innholdet har egen form:

     0. Hero          midnatt / foto — hva kan jeg få hjelp til?
     1. Veien         krem           — fire steg, hvert med sin aktør,
                                       og NAV-notisen for den som har jobb
     2. Kommunen      varm hvit      — seks lenker til næringssidene
     3. Kontor        krem           — kontorfellesskapene, med lenke til
                                       Lister Nyskapings oversikt
     4. Videre        mørk kortflate — de tre viktigste inngangene

   Delte roller (.l-eyebrow, .l-section-title) kommer fra lister.css.
   ========================================================= */

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

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

.bedrift-lenke {
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  color: var(--aksent-tekst);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.bedrift-lenke:hover,
.bedrift-lenke:focus-visible { color: var(--color-text-primary); }

/* ---- 0. Hero ---- */
.bedrift-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);
}
.bedrift-hero__tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  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));
}
.bedrift-eyebrow--mork { color: var(--aksent-tekst-mork); }
.bedrift-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;
}
.bedrift-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);
}
.bedrift-hero__handling { margin-top: clamp(26px, 4vh, 40px); }
.bedrift-hero__figur {
  position: relative;
  margin: 0;
  min-height: 100%;
  overflow: hidden;
}
.bedrift-hero__figur img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Folkene står midt i bildet; skiltet over dem skal med. */
  object-position: 50% 40%;
}

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

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

/* ---- 1. Veien fra idé til bedrift ---- */
.bedrift-seksjon--veien { background: var(--color-cream); }
.bedrift-steg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(40px, 6vh, 64px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--color-text-primary);
}
.bedrift-steg__post {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px clamp(18px, 2vw, 28px) 8px;
  border-left: 1px solid var(--color-sand);
}
.bedrift-steg__post:first-child {
  padding-left: 0;
  border-left: 0;
}
.bedrift-steg__nr {
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-md);
  color: var(--aksent-tekst);
  font-variant-numeric: tabular-nums;
}
.bedrift-steg__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);
}
.bedrift-steg__tekst {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--color-stein);
}
.bedrift-steg__lenker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.bedrift-notis {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: clamp(40px, 6vh, 56px);
  padding: 22px 26px;
  border: 1px solid var(--color-sand);
  border-radius: 10px;
  background: var(--color-warm-white);
}
.bedrift-notis__etikett {
  flex: none;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--color-pine);
}
.bedrift-notis__tekst {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--color-stein);
}

/* ---- 2. Kommunen ---- */
.bedrift-seksjon--kommune {
  background: var(--color-warm-white);
  border-top: 1px solid var(--color-sand);
}
.bedrift-kommuner {
  display: grid;
  /* To kolonner bare når et kommunenavn med pil får plass i hver. Faste to
     kolonner ga 197 px på 1024, og radene ble ujevne når noen navn brøt. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12em), 1fr));
  gap: 0 clamp(20px, 3vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-sand);
}
.bedrift-kommuner__lenke {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-sand);
  font-family: var(--font-body);
  font-size: var(--brod);
  color: var(--color-text-primary);
  text-decoration: none;
}
.bedrift-kommuner__pil {
  color: var(--aksent-tekst);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
.bedrift-kommuner__lenke:hover span:first-child,
.bedrift-kommuner__lenke:focus-visible span:first-child {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.bedrift-kommuner__lenke:hover .bedrift-kommuner__pil,
.bedrift-kommuner__lenke:focus-visible .bedrift-kommuner__pil {
  transform: translate(2px, -2px);
}

/* ---- 3. Kontorfellesskap ---- */
.bedrift-seksjon--kontor { background: var(--color-cream); }
/* To bildekort og en lenkeliste med stedene vi ikke har bilde av. */
.bedrift-kontor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
  margin: clamp(40px, 6vh, 56px) 0 0;
  align-items: start;
}
.bedrift-kontor__post {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.bedrift-kontor__navn {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--linje-tittel);
  color: var(--color-text-primary);
}
.bedrift-kontor__pil {
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  color: var(--aksent-tekst);
  transition: transform var(--duration-normal) var(--ease-out-expo);
  display: inline-block;
}
.bedrift-kontor__post:hover .bedrift-kontor__navn,
.bedrift-kontor__post:focus-visible .bedrift-kontor__navn {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
.bedrift-kontor__post:hover .bedrift-kontor__pil,
.bedrift-kontor__rad:hover .bedrift-kontor__pil {
  transform: translate(2px, -2px);
}
.bedrift-kontor__flere {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--color-sand);
  border-radius: 10px;
  background: var(--color-warm-white);
}
.bedrift-kontor__flere-tittel {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--color-pine);
}
.bedrift-kontor__liste {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bedrift-kontor__rad {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-sand);
  text-decoration: none;
}
.bedrift-kontor__liste li:last-child .bedrift-kontor__rad { border-bottom: 0; }
.bedrift-kontor__rad-tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bedrift-kontor__rad-navn {
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  color: var(--color-text-primary);
}
.bedrift-kontor__rad-sted {
  font-family: var(--font-body);
  font-size: var(--brod-liten);
  color: var(--tekst-dempet);
}
.bedrift-kontor__rad:hover .bedrift-kontor__rad-navn,
.bedrift-kontor__rad:focus-visible .bedrift-kontor__rad-navn {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.bedrift-kontor__post:focus-visible,
.bedrift-kontor__rad:focus-visible {
  outline: 2px solid var(--color-aurora);
  outline-offset: 4px;
}
.bedrift-kontor__figur {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--color-sand);
}
.bedrift-kontor__figur img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bedrift-kontor__sted {
  display: block;
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--color-pine);
}
.bedrift-kontor__tekst {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--color-stein);
}
.bedrift-kontor__alle { margin: clamp(32px, 5vh, 48px) 0 0; }

/* ---- 4. Videre ---- */
.bedrift-seksjon--videre { background: var(--color-kort-mork); }
.bedrift-videre-blokk { max-width: 720px; }
.bedrift-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);
}
.bedrift-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;
}
.bedrift-videre__tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bedrift-videre__navn {
  font-family: var(--font-body);
  font-size: var(--brod);
  color: var(--color-cream);
}
.bedrift-videre__hva {
  font-family: var(--font-body);
  font-size: var(--brod-liten);
  color: var(--tekst-dempet-mork);
}
.bedrift-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);
}
.bedrift-videre__lenke:hover .bedrift-videre__navn,
.bedrift-videre__lenke:focus-visible .bedrift-videre__navn {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.bedrift-videre__lenke:hover .bedrift-videre__pil,
.bedrift-videre__lenke:focus-visible .bedrift-videre__pil {
  transform: translate(2px, -2px);
}
.bedrift-videre__lenke:focus-visible,
.bedrift-kommuner__lenke:focus-visible {
  outline: 2px solid var(--color-aurora);
  outline-offset: 4px;
}

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

/* ---- Smalere flater ---- */
@media (max-width: 1100px) {
  .bedrift-steg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bedrift-steg__post:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .bedrift-steg__post:nth-child(n + 3) { border-top: 1px solid var(--color-sand); }
}
/* 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) {
  .bedrift-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .bedrift-hero__figur {
    order: -1;
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin-top: var(--nav-height);
  }
  .bedrift-hero__tekst {
    padding: clamp(32px, 6vh, 48px) clamp(20px, 5vw, 56px) clamp(48px, 8vh, 72px);
  }
}
@media (max-width: 900px) {
  .bedrift-hode--to,
  .bedrift-to-kol {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .bedrift-kontor { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .bedrift-notis { flex-direction: column; gap: 8px; }
}
@media (max-width: 600px) {
  .bedrift-steg { grid-template-columns: minmax(0, 1fr); }
  .bedrift-steg__post,
  .bedrift-steg__post:nth-child(3) {
    padding: 22px 0;
    border-left: 0;
    border-top: 1px solid var(--color-sand);
  }
  .bedrift-steg__post:first-child { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bedrift-knapp,
  .bedrift-kommuner__pil,
  .bedrift-videre__pil { transition: none; }
  .js .bedrift-page [data-reveal] { opacity: 1; transform: none; transition: none; }
}