/* =========================================================
   Renovera AS – prosjektsider (lastes etter style.css)
   ========================================================= */

/* Stort før/etter-par – full-bleed stripe kant til kant.
   Hovedgrepet på casesiden får pusterom: bred luftsone over og under,
   og bildeteksten settes rolig med eik-strek – samme signatur som
   .badge, .detalj-kort figcaption og .site-footer h3. */
.side-hero + .sek { padding-top: 0; }
.ba-stor {
  background: var(--flate-alt);
  padding-top: clamp(64px, 11vw, 144px);
  padding-bottom: clamp(56px, 8vw, 104px);
  margin-bottom: clamp(56px, 8vw, 100px);
}
.ba-stor figure { margin: 0; }
.ba-stor .fig-par { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ba-stor .ba-bilde { position: relative; }
.ba-stor .ba-bilde a { display: block; height: 100%; }
.ba-stor .ba-bilde img { width: 100%; height: 100%; aspect-ratio: 3 / 2; max-height: 600px; object-fit: cover; display: block; }
.ba-stor .ba-tag { top: 16px; left: 16px; font-size: .75rem; padding: 4px 11px; }
.ba-stor figcaption {
  text-align: center;
  margin-top: clamp(24px, 3vw, 34px);
  padding-inline: 20px;
  font-size: var(--tekst-xs, .8125rem);
  line-height: 1.5;
  color: var(--tekst-sek);
}
.ba-stor figcaption::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--eik);
  margin: 0 auto 16px;
}
@media (max-width: 560px) {
  .ba-stor .fig-par { grid-template-columns: 1fr; }
}

/* Historietekst: anslag som storsitat, resten i to spalter på desktop.
   Storsitatet settes redaksjonelt – brødtekstsnitt, åpen linjeavstand og
   dempet størrelse – slik at det leser som en ingress, ikke som en overskrift. */
.prose .storsitat {
  margin: 0 0 clamp(32px, 4vw, 46px);
  border-left-width: 2px;
  padding-left: clamp(22px, 2.4vw, 30px);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.08rem, 1.3vw + .62rem, 1.34rem);
  line-height: 1.72;
  letter-spacing: -.005em;
  color: var(--marine);
}
.prose .storsitat:first-child { margin-top: 0; }

/* To-spalteren løftes opp mot storsitatet: samme brødtekstgrad som .prose > p,
   slik at forholdet mellom ingress og tekst blir 1,3 – ikke 1,6. */
@media (min-width: 880px) {
  .to-spalter { column-count: 2; column-gap: 52px; }
  .to-spalter p { break-inside: avoid; margin-top: 0; }
}
.to-spalter p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #2A3340;
}

/* Detaljbilde i portrettformat: ikke fyll hele skjermhøyden, og aldri skaler opp
   forbi kildeoppløsningen (640px bred → uskarpt). Sentrert innenfor brei-figur. */
.prose .brei-figur a.glightbox { display: block; }
.prose .brei-figur img { width: auto; max-width: 100%; max-height: min(78vh, 640px); margin-inline: auto; }

/* Oversikten: visuelle kort der bildet dominerer og teksten ligger oppå.
   Sjiktet er ett sammenhengende fall – ingen flat plate – slik at det leser
   som lysavfall i bildet og ikke som en blå film. Stoppene er låst i piksler
   fra toppen av tekstboksen, ikke i prosent, fordi kategorien alltid starter
   nøyaktig ved padding-top: da havner teksten på samme, målbare tetthet enten
   tittelen går over én eller to linjer. De øverste ~20 px er praktisk talt
   gjennomsiktige, så det tonede feltet leser kortere enn før selv om
   overgangen er lengre og mykere. */
/* Oversikten har brødsmulene på lys flate rett over en sentrert intro. Uten
   klaring la eik-streken på etiketten seg 17px under brødsmulesporet, og de
   to leste som én klemt blokk. Resten av siden puster i 56px mellom intro,
   mosaikk og CTA-felt, så samme mål her. */
.sek > .container > .brodsmuler + .sek-intro { margin-top: var(--luft-xl); }

.prosjekt-visuell { position: relative; }
.prosjekt-visuell img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.prosjekt-visuell .kort-innhold {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 56px 24px 42px;
  background: linear-gradient(to bottom,
    rgba(1, 26, 62, 0) 0,
    rgba(1, 26, 62, .04) 16px,
    rgba(1, 26, 62, .16) 30px,
    rgba(1, 26, 62, .38) 42px,
    rgba(1, 26, 62, .60) 54px,
    rgba(1, 26, 62, .74) 68px,
    rgba(1, 26, 62, .80) 88px,
    rgba(1, 26, 62, .83) 100%);
}
.prosjekt-visuell .kort-tittel {
  color: #fff;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -.015em;
  text-shadow: 0 1px 16px rgba(1, 26, 62, .5);
}
.prosjekt-visuell:hover .kort-tittel { color: #fff; }
.prosjekt-visuell .artikkel-meta {
  color: var(--isblaa);
  margin: 0 0 14px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-shadow: 0 1px 10px rgba(1, 26, 62, .55);
}
.prosjekt-visuell .les-mer {
  position: absolute; left: 24px; bottom: 18px;
  padding: 0; z-index: 1;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: #CFE4F7;
}
.prosjekt-visuell:hover .les-mer { color: #fff; }

/* Magasin-grid: heltekort for første prosjekt, variert rytme for resten */
@media (min-width: 720px) {
  .prosjekt-mosaikk .prosjekt-hero-kort { grid-column: span 2; }
  .prosjekt-mosaikk .prosjekt-hero-kort img { aspect-ratio: auto; height: 100%; min-height: 440px; flex: 1; }
  .prosjekt-mosaikk .prosjekt-hero-kort .kort-innhold { padding: 68px 30px 46px; }
  .prosjekt-mosaikk .prosjekt-hero-kort .kort-tittel { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
  .prosjekt-mosaikk .prosjekt-hero-kort .les-mer { left: 30px; bottom: 20px; }
}
@media (min-width: 720px) and (max-width: 999px) {
  .prosjekt-mosaikk .prosjekt-bred-kort { grid-column: span 2; }
  .prosjekt-mosaikk .prosjekt-bred-kort img { aspect-ratio: 21 / 9; }
}
@media (min-width: 1000px) {
  .prosjekt-mosaikk .prosjekt-hero-kort { grid-row: span 2; min-height: 0; }
}

/* Meta i heroen: ren tekst med eik-strek i stedet for et klumpete kort. */
.split-hero .meta-kort {
  gap: 0 clamp(32px, 4vw, 48px);
  margin-top: clamp(26px, 3vw, 34px);
}
.split-hero .meta-kort div {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #CFE4F7;
}
/* .meta-kort div er column-reverse i style.css, så verdien (dd) tegnes over
   etiketten (dt). Da havnet ::before nederst av alt, og eik-streken hang
   under «Type» som en løs understrek i stedet for å innlede blokka slik den
   gjør på .badge, .ba-stor figcaption og footer-overskriftene. ::after er
   siste barn i DOM og lander derfor øverst i en reversert kolonne. */
.split-hero .meta-kort div::before { content: none; }
.split-hero .meta-kort div::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--eik);
  margin-bottom: 14px;
}
.split-hero .meta-kort strong {
  display: block;
  color: #fff;
  font-family: var(--font-hode);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-transform: none;
  margin-bottom: 5px;
}

/* Forrige/neste prosjekt – rolig retning i stedet for kortvegg.
   Hårstreken tones ut mot kantene, etikettene trekkes ned til en diskret
   linje, og prosjektnavnene bærer navigasjonen. */
.prosjekt-nav {
  margin-top: clamp(56px, 7vw, 88px);
  padding-top: clamp(34px, 4vw, 48px);
  border-top: 0;
  background:
    linear-gradient(90deg,
      transparent 0,
      rgba(1, 42, 102, .14) 14%,
      rgba(1, 42, 102, .14) 86%,
      transparent 100%) top / 100% 1px no-repeat;
  display: grid;
  gap: 28px;
  text-align: center;
}
/* Navigasjonen får et litt bredere mål enn brødteksten – samme utbrytning
   som .brei-figur. Det gir prosjektnavnene plass til å stå på én linje og
   lar siden vide seg rolig ut mot slutten. Kun fra 720px, der lenkene står
   side om side; under det er navigasjonen én sentrert kolonne som ikke
   trenger – og ikke tåler – utbrytning. */
@media (min-width: 720px) {
  .prose .prosjekt-nav {
    margin-left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 880px);
  }
}
.prosjekt-nav-lenke { display: block; text-decoration: none; }
.prosjekt-nav-retning {
  display: block;
  font: 500 .7rem/1 var(--font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tekst-sek);
  margin-bottom: 12px;
}
.prosjekt-nav-navn {
  display: block;
  font-family: var(--font-hode);
  font-weight: 700;
  font-size: clamp(1.05rem, .45vw + .95rem, 1.18rem);
  line-height: 1.32;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: var(--marine);
  transition: color .18s;
}
.prosjekt-nav-lenke:hover .prosjekt-nav-navn { color: var(--blaa-tekst); }
.prosjekt-nav-alle {
  justify-self: center;
  align-self: center;
  order: 1;
  font: 500 .72rem/1 var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tekst-sek);
  text-decoration: none;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--eik);
  transition: color .18s;
}
.prosjekt-nav-alle:hover { color: var(--marine); text-decoration: none; }
@media (max-width: 719px) {
  /* Touch-mål: minst 44px høyt på mobil */
  .prosjekt-nav-alle { display: inline-block; padding: 14px 16px 12px; }
}
@media (min-width: 720px) {
  .prosjekt-nav { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; }
  .prosjekt-nav-alle { order: 0; }
  .prosjekt-nav-forrige { text-align: left; }
  .prosjekt-nav-neste { text-align: right; grid-column: 3; }
}

/* «Forrige prosjekt» og «Neste prosjekt» målte 11,2px på mobil. Samme grunn
   som i artikler.css: denne fila lastes etter style.css. */
@media (max-width: 879px) {
  .prosjekt-nav-retning { font-size: .78rem; }
  /* Samme sak: «Alle prosjekter» malte 11,52px. Loftet til samme
     stoerrelse som soeskenlenkene over. */
  .prosjekt-nav-alle { font-size: .78rem; }
  .prosjekt-visuell .artikkel-meta { font-size: .8rem; }
}