/* ============================================================
   LISTER PORTAL-SEKSJONEN (ps) — eies av src/components/PortalSeksjon.astro
   Samme seksjon på forsiden, kommunesidene og stedssidene (Tom 19. okt
   2026): losens portrett til venstre, hva en profil gir til høyre. Arket er
   selvstendig, fordi stedssidene ikke laster lister.css eller forside.css.
   Bare tokens for skrift, grad, linje, sperring, farge og radius.
   ============================================================ */

.ps {
  padding: clamp(90px, 11vh, 160px) clamp(16px, 4vw, 56px);
  background: var(--surface-strong);
  color: var(--color-text-inverse);
}
.ps__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.ps__figur { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ps__bilde { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
.ps__bildetekst {
  font-family: var(--font-body);
  font-size: var(--etikett-stor);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-xs);
  color: var(--tekst-dempet-mork);
}

.ps__eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 400;
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: var(--color-aurora);
}
.ps__tittel {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-seksjonstittel);
  font-weight: 300;
  line-height: var(--linje-hero);
  letter-spacing: var(--sperring-tett);
  color: var(--surface-card-light);
  text-wrap: balance;
}
.ps__ingress {
  max-width: 640px;
  margin: clamp(18px, 3vh, 28px) 0 0;
  font-family: var(--font-body);
  font-size: var(--brod);
  line-height: var(--linje-brod);
  color: var(--color-mist);
}

.ps__fordeler {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 40px;
}
.ps__fordel { display: grid; grid-template-columns: 10px 1fr; gap: 4px 14px; }
.ps__prikk { width: 10px; height: 10px; margin-top: 9px; border-radius: 50%; background: var(--color-aurora); }
.ps__fordel-tittel {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--linje-tittel);
  color: var(--color-cream);
}
.ps__fordel-tekst {
  grid-column: 2;
  font-family: var(--font-body);
  font-size: var(--brod-liten);
  line-height: var(--linje-brod-tett);
  color: var(--tekst-dempet-mork);
}

.ps__knapper { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
.ps__knapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-sm);
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal) var(--ease-out-expo), transform var(--duration-normal) var(--ease-out-expo);
}
.ps__knapp--primar { background: var(--color-gold); color: var(--color-midnight); }
.ps__knapp--primar:hover { background: var(--color-leire-lys); transform: translateY(-1px); }
.ps__knapp--sekundar { background: transparent; color: var(--color-text-inverse); border-color: var(--tekst-dempet-mork); }
.ps__knapp--sekundar:hover { background: var(--color-kort-mork); border-color: var(--color-cream); }
.ps a:focus-visible { outline: 2px solid var(--color-aurora); outline-offset: 3px; }
.ps__mikro {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: var(--brod-liten);
  letter-spacing: var(--sperring-xs);
  color: var(--tekst-dempet-mork);
}

@media (max-width: 1179px) {
  .ps__inner { grid-template-columns: minmax(0, 1fr); }
  .ps__bilde { aspect-ratio: 16 / 9; object-position: center 25%; }
}
@media (max-width: 767px) {
  .ps__fordeler { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ps__knapper { flex-direction: column; }
  .ps__knapp { justify-content: center; }
  .ps__mikro { text-align: center; }
}
@media (hover: none) {
  .ps__knapp:active { transform: scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
  .ps__knapp { transition: none; }
}

/* Mobil: seksjonsluften (styles.css, --mobil-seksjon). */
@media (max-width: 767px) {
  .ps { padding-block: var(--mobil-seksjon); }
  /* Losbildet går kant i kant; bildeteksten står på tekstmargen. */
  .ps__bilde {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
  }
}