/* ============================================
   V-AVIS — «Jobb i og rundt X» som avisspalte (VillageJobs.astro).
   Designrunde 3. sep 2026, portert fra canvaset med husets tokens.
   Moerkt avishode paa verktoeyflaten, papir i krem, hovedrubrikk
   med leire-kant, tre spalter med haarstreker, sektorprikker og
   frist-stempel.
   ============================================ */
.v-avis {
  background: var(--surface-story);
  /* Samme sidepolstring som arbeidsgiverne (.v-employers), som alltid
     står rett over: de to skal flukte på alle bredder (Tom 19. okt 2026). */
  padding: clamp(48px, 6vw, 88px) var(--space-xl);
  /* Seksjonen kommer rett etter et kapittel som har egen bunnluft; med
     full toppluft ble det 142 px ned til arket («litt meget luft», Herad,
     Marion 21. sep 2026). Naa ~96 px, som mellom to kapitler. */
  padding-top: clamp(24px, 3vw, 40px);
}

/* Arket: hode og spalter er ÉN gjenstand i lesebredde, med tynn ramme
   (Toms innspill 3. sep — hodet svevde i full bredde over et smalere
   innhold). Varmhvitt papir mot sidens krem loefter arket fra siden. */
.v-avis__ark {
  /* Lesebredden på stedssidene, lik arbeidsgiverrutenettet (1060). Var
     1160, og arket stakk 50 px ut på hver side av kortene over. */
  max-width: 1060px;
  margin: 0 auto;
  background: var(--color-warm-white);
  border: 1px solid var(--color-sand);
  /* Leire-stroeket langs venstrekanten er borte (Tom 7. sep: roedt leser som
     stopp/fare). Arket loeftes i stedet av en myk papirskygge, og hodet faar
     nettstedets aurora-haarlinje i toppen — samme signatur som los-stripa. */
  box-shadow: 0 30px 60px -44px rgba(10, 22, 40, 0.45);
  /* Avrundede hjørner som de andre boksene på stedssidene (faktaboksen,
     prosjektboksen: 20 px). Arket hadde rette hjørner og skilte seg ut
     rett under en avrundet boks (Marions pirk 30. sep 2026). overflow
     klipper det mørke hodet og papiret til hjørnene. */
  border-radius: 20px;
  overflow: hidden;
}
.v-avis__hode { position: relative; }
.v-avis__hode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-aurora), rgba(125, 211, 192, 0.1));
}

/* ---------- Avishodet ---------- */
.v-avis__hode {
  background: var(--surface-utility);
  padding: clamp(28px, 3vw, 40px) clamp(20px, 3.5vw, 44px) 0;
}

.v-avis__hode-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.v-avis__hode-rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--space-2xl);
  align-items: end;
}

/* Folden: datolinja i overgangen mellom hode og papir — den peker paa
   innholdet under i stedet for aa sitte oeverst. */
.v-avis__fold {
  display: flex;
  margin-top: var(--space-md);
  padding: 12px 0 14px;
  border-top: 1px solid rgba(250, 248, 245, 0.22);
}

.v-avis__eyebrow,
.v-avis__dato {
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
}

.v-avis__eyebrow { color: var(--color-aurora); }
.v-avis__dato { color: var(--tekst-dempet-mork); letter-spacing: var(--sperring-lg); }

.v-avis__hode-tekst {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.v-avis__tittel {
  font-family: var(--font-display);
  font-size: var(--text-seksjonstittel);
  font-weight: 400;
  font-style: italic;
  line-height: var(--linje-hero);
  letter-spacing: var(--sperring-tett);
  color: var(--color-text-inverse);
  margin: 0;
  text-wrap: balance;
}

.v-avis__intro {
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--tekst-dempet-mork);
  margin: 0;
  max-width: 620px;
  text-wrap: pretty;
}

.v-avis__tall {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.v-avis__tall-nummer {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: var(--sperring-tett);
  color: var(--color-aurora);
}

.v-avis__tall-etikett {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  line-height: var(--linje-etikett);
  color: var(--color-text-inverse);
}

.v-avis__tall-etikett span + span { color: var(--tekst-dempet-mork); }

/* ---------- Papiret ---------- */
.v-avis__papir {
  padding: clamp(24px, 3vw, 36px) clamp(20px, 3.5vw, 44px) clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
}

.v-avis__kategori {
  display: flex;
  /* Øverst, ikke midtstilt: en kategori over to linjer fikk prikken midt
     mellom linjene. Prikken sentreres på første linje (se .v-avis__prikk). */
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--tekst-dempet);
}

.v-avis__kategori--hoved { color: var(--color-pine); }

.v-avis__prikk {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-top: calc((1lh - 8px) / 2);
  border-radius: 50%;
  flex: 0 0 auto;
}

/* Groenn offentlig, marine privat. Jobbfilteret bruker leire for privat;
   her er den byttet til marine — roedt leser som stopp (Tom 7. sep). */
.v-avis__prikk--offentlig { background: var(--color-pine); }
.v-avis__prikk--privat { background: var(--color-midnight); }
.v-avis__prikk--annet { background: var(--color-sand); }

.v-avis__arbeidsgiver {
  font-family: var(--font-display);
  font-size: var(--brod-kort);
  font-style: italic;
  color: var(--color-midnight);
}

.v-avis__meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--etikett-stor);
  line-height: var(--linje-etikett);
  color: var(--tekst-dempet);
}

.v-avis__stempel {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  font-weight: 700;
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  /* Var et roedt, skraatt stempel. Naa en stille sandchip med marine tekst —
     fristen skal leses, ikke rope (Tom 7. sep). */
  color: var(--color-midnight);
  background: var(--color-sand);
  border-radius: 999px;
  padding: 5px 12px;
}

/* Hovedrubrikken — nyeste stilling */
.v-avis__hoved {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: end;
  padding: clamp(24px, 3vw, 32px) clamp(20px, 3vw, 36px);
  margin: 0 0 var(--space-sm);
  /* Krem boks paa varmhvitt papir: leire-teksten inni maaler 4,67 (AA);
     paa sand-lys var den 4,49 — derfor ikke den tonen. Leire-kanten sitter
     naa paa arket (hele venstrekanten), ikke paa boksen. */
  background: var(--surface-story);
  border: 1px solid var(--color-sand);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo);
}

.v-avis__hoved-tekst,
.v-avis__hoved-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.v-avis__hoved-side { align-items: flex-start; }

.v-avis__hoved-tittel {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--linje-display);
  letter-spacing: var(--sperring-tett);
  color: var(--color-midnight);
  text-wrap: balance;
  /* Sikkerhetsnett for et enkeltord lenger enn spalten; skråstreker har
     eget bruddpunkt (Brytbar.astro). */
  overflow-wrap: break-word;
}

.v-avis__arbeidsgiver--hoved { font-size: var(--text-xl); }

.v-avis__knapp {
  margin-top: 6px;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-sm);
  text-transform: uppercase;
  color: var(--color-text-inverse);
  background: var(--color-midnight);
  transition: background var(--duration-fast) var(--ease-out-quart);
}

.v-avis__hoved:hover .v-avis__knapp,
.v-avis__hoved:focus-visible .v-avis__knapp { background: var(--color-pine); }

/* Spaltene — rutenett, saa haarstrekene staar i flukt paa tvers */
.v-avis__spalter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 3px double var(--color-midnight);
  margin-top: var(--space-lg);
}

.v-avis__rubrikk {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-lg) 20px;
  border-bottom: 1px solid var(--color-sand);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo),
    background var(--duration-normal) var(--ease-out-expo);
}

/* Loeft ved hover: hele rubrikken (og hovedrubrikken) hever seg litt fra
   papiret med en lagdelt, myk skygge — tett kontaktskygge under, bredere
   og svakere lenger ned, som et ark som loeftes (Toms oenske 3. sep). */
@media (hover: hover) {
  .v-avis__rubrikk:hover,
  .v-avis__hoved:hover {
    transform: translateY(-4px);
    z-index: 1;
    box-shadow:
      0 1px 2px rgba(10, 22, 40, 0.08),
      0 6px 14px rgba(10, 22, 40, 0.12),
      0 18px 36px rgba(10, 22, 40, 0.2);
  }
  .v-avis__rubrikk:hover {
    background: var(--color-warm-white);
  }
}
/* Ytterspaltene har null polstring mot arkkanten (teksten skal flukte med
   hodet). Naar kortet loefter seg, vokser boksen UTOVER i stedet: marg ut,
   polstring inn — teksten staar i ro og faar luft rundt seg (Tom 3. sep).
   Ytterspalter finnes bare i tre-spalteoppsettet over 900 px. */
@media (hover: hover) and (min-width: 901px) {
  .v-avis__rubrikk:nth-child(3n + 1):hover { padding-left: 20px; margin-left: -20px; }
  .v-avis__rubrikk:nth-child(3n):hover { padding-right: 20px; margin-right: -20px; }
}

@media (prefers-reduced-motion: reduce) {
  .v-avis__rubrikk,
  .v-avis__hoved { transition: none; }
  .v-avis__rubrikk:hover,
  .v-avis__hoved:hover { transform: none; }
}

/* Tre spalter finnes bare over 900 px. Som grunnregler slo
   :not(:nth-child(3n + 1)) (0,2,0) nullstillingen i mobilblokka, og kort
   2, 5, 8 … fikk en strek med teksten klistret inntil. */
@media (min-width: 901px) {
  .v-avis__rubrikk:nth-child(3n + 1) { padding-left: 0; }
  .v-avis__rubrikk:nth-child(3n) { padding-right: 0; }
  .v-avis__rubrikk:not(:nth-child(3n + 1)) { border-left: 1px solid var(--color-sand); }
}

.v-avis__rubrikk-tittel {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--linje-tittel);
  color: var(--color-midnight);
  text-wrap: pretty;
  /* Sikkerhetsnett for et enkeltord lenger enn spalten; skråstreker har
     eget bruddpunkt (Brytbar.astro). */
  overflow-wrap: break-word;
}

.v-avis__rubrikk:hover .v-avis__rubrikk-tittel,
.v-avis__rubrikk:focus-visible .v-avis__rubrikk-tittel,
.v-avis__hoved:hover .v-avis__hoved-tittel { color: var(--color-pine); }

/* Bunnen — forklaring og lenker */
.v-avis__bunn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-md) var(--space-2xl);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 3px double var(--color-midnight);
}

.v-avis__forklaring {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  font-weight: 700;
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  color: var(--tekst-dempet);
}

.v-avis__forklaring > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.v-avis__lenke {
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-sm);
  text-transform: uppercase;
  color: var(--color-pine);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
}

.v-avis__lenke--primaer,
.v-avis__lenke:hover,
.v-avis__lenke:focus-visible { border-bottom-color: currentColor; }

@media (max-width: 900px) {
  .v-avis { padding-left: 0; padding-right: 0; }
  .v-avis__ark { border-right: 0; }
  .v-avis__hode-rad { grid-template-columns: 1fr; }
  .v-avis__hode-rad { grid-template-columns: 1fr; }
  .v-avis__hoved { grid-template-columns: 1fr; }
  .v-avis__spalter { grid-template-columns: 1fr; }
  .v-avis__rubrikk { padding-left: 0; padding-right: 0; }
  .v-avis__rubrikk:hover { padding: var(--space-lg) 20px; margin: 0 -20px; }
}