/* ==========================================================
   extra.css – felles tillegg for alle sider
   Lastes ETTER sidens egen CSS, så den kan overstyre.
   Bruker samme design-tokens som resten av siden.
   ========================================================== */

/* ---- Pris: undertekst med eks. mva ---- */
.priceSub{
  display:block;
  margin-top:2px;
  font-size:13px;
  font-weight:700;
  color:rgba(7,20,39,.55);
  letter-spacing:0;
}
.priceLine{align-items:flex-start}

/* ---- Myk CTA-boks (erstatter gjentatte inline-stiler) ---- */
.softCta{
  margin-top:18px;
  padding:18px 20px;
  border:1px solid rgba(7,20,39,.10);
  border-radius:22px;
  background:linear-gradient(135deg, rgba(255,122,26,.10), rgba(33,184,255,.10));
}
.softCta.center{text-align:center}
.softCta p{margin:6px 0 0;color:rgba(7,20,39,.68)}
.softCta .softCtaActions{
  margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;
}
.softCta.center .softCtaActions{justify-content:center}

/* ---- Knapperad ---- */
.btnRow{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.btnRow.center{justify-content:center}

/* ---- Samtykke i kontaktskjema ---- */
.consentRow{
  display:flex;align-items:flex-start;gap:10px;
  margin-top:6px;font-size:14px;line-height:1.5;
  color:rgba(7,20,39,.72);
}
.consentRow input[type="checkbox"]{
  width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;accent-color:#ff7a1a;
}
.consentRow a{text-decoration:underline}

/* ---- Footer: juridisk info ---- */
.footerLegal{
  margin-top:10px;font-size:13px;line-height:1.6;
  color:rgba(255,255,255,.72);
}
.footerLegal span{display:block}

/* ---- Anmeldelser: sitatkort ---- */
.reviewGrid{
  display:grid;gap:14px;margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.reviewCard{
  padding:18px 20px;border-radius:20px;
  border:1px solid rgba(7,20,39,.10);
  background:rgba(255,255,255,.80);
  box-shadow:0 14px 30px rgba(2,6,23,.06);
}
.reviewCard .stars{color:#ff7a1a;font-size:15px;letter-spacing:2px}
.reviewCard blockquote{
  margin:10px 0 0;font-size:15px;line-height:1.6;color:rgba(7,20,39,.82);
}
.reviewCard cite{
  display:block;margin-top:10px;font-style:normal;font-weight:800;font-size:13px;
  color:rgba(7,20,39,.58);
}

/* ---- FAQ (fins bare i index.css fra før – gjøres tilgjengelig overalt) ---- */
.faq{display:grid;gap:12px;margin-top:18px}
.faq details{
  padding:16px 18px;
  border:1px solid rgba(7,20,39,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
  border-radius:24px;
  box-shadow:0 14px 38px rgba(2,6,23,.08);
}
.faq summary{cursor:pointer;font-weight:900;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin-top:10px;color:rgba(7,20,39,.76);line-height:1.65}

/* ---- Bilder: unngå layout-hopp ---- */
img{max-width:100%;height:auto}

/* ---- Defensivt: grid-barn med store bilder må kunne krympe ----
   Et grid-barn har min-width:auto som standard, altså «aldri
   smalere enn innholdet». Med bilder på 1400–1600 px betyr det at
   kolonnen nekter å krympe og skyver ut sidebredden. De fleste
   gridene i prosjektet bruker allerede minmax(0,1fr), men
   enkolonne-variantene i media queries gjør det ikke.
   Dette er ren forsikring – endrer ingenting der det er riktig. */
.heroGrid > *,
.beforeAfterGrid > *,
.projectPageGrid > *,
.projectGallery > *,
.baModalBody > *{min-width:0}
.projectGallery img,
.projectPreview img,
.projectHeroImage img,
.baImage{min-width:0}

/* ==========================================================
   Forsidens hero-logo: hele logoen skal vises

   index.css la en rund maske over .heroLogo:
     mask-image: radial-gradient(circle at 50% 48%, #000 74%, transparent 100%)

   Masken er helt dekkende ut til 74 % av radien og fader til
   gjennomsiktig ved 100 %. Sirkelen regnes fra midten til
   ytterste hjørne, så på et bredt bilde havner bunnen og
   sidene i fade-sonen – derfor forsvant skiftenøklene nederst
   og fyrtårnet/ferga ute i kantene.

   Masken var alt slått av på mobil (media-blokken lenger ned
   i index.css), så dette gjør desktop lik mobil.

   I tillegg var det brukt logo-hero-blend.png, som har den
   samme uttoningen BAKT INN i alfakanalen (alle kanter alfa 0).
   Å fjerne CSS-masken alene holdt derfor ikke. Forsiden bruker
   nå assets/logo-hero.png / .webp – originalen uten uttoning,
   der skiftenøklene, fyrtårnet og ferga er hele.
   ========================================================== */
.heroLogo{
  -webkit-mask-image:none;
  mask-image:none;
  border-radius:18px;   /* logoen har egen lys bakgrunn – myke hjørner
                           gjør at den leser som et bilde i panelet */
}

/* ==========================================================
   Hjemmehjelp-siden: bildet skal stå ØVERST ved siden av
   teksten, ikke midtstilt/nederst i raden.

   Originalen i pc-hjelp-horten.css har align-items:center på
   .homeHero. Når tekstkolonnen er høyere enn bildet, faller
   bildet ned mot midten/bunnen og etterlater et stort tomrom.
   Her låses bildet til toppen, kolonnen gjøres bredere, og
   bildet får fylle kolonnen i stedet for å hugge høyre kant.
   VIKTIG om minmax(0,1fr) under: et grid-barn har som standard
   min-width:auto, altsaa "ikke smalere enn innholdets egen
   bredde". Bildene er 1400 px brede, saa en vanlig 1fr-kolonne
   nekter aa krympe under 1400 px og sprenger containeren.
   Originalen skjulte dette med max-width:480px paa kortet.
   Riktig loesning er minmax(0,1fr) + min-width:0 paa barna.

   DEN EGENTLIGE AARSAKEN til at bildet la seg under teksten:
   .card har «grid-column: span 4» i pc-hjelp-horten.css, fordi
   den er laget for det 12-kolonners .grid-systemet. Bildekortet
   har klassen .card, så det ba om å spenne over 4 kolonner i et
   rutenett med 2. Da lager grid implisitte kolonner og dytter
   kortet ned på egen rad i full bredde – uansett hva
   grid-template-columns er satt til. Derfor hadde ingen av
   kolonnebreddene noen effekt. Løsningen er grid-column:auto.
   Samme problem i .simpleCards (3 kolonner, kort med span 4),
   som er grunnen til at «1-2-3»-stegene lå oppå hverandre.
   ========================================================== */
.homeHero{
  align-items:start;     /* var center – bildet sank ned i raden */
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:24px;
}
.homeHero > *{min-width:0;grid-column:auto}
.simpleCards > .card{grid-column:auto}
.homeImageCard{
  align-self:start;      /* topplinjen følger teksten */
  justify-self:stretch;  /* var justify-self:end – ga luft mot teksten */
  max-width:100%;        /* kolonnen styrer bredden, men aldri utenfor */
  max-height:none;
  margin:0;
  overflow:hidden;
}
.homeImageCard img{
  aspect-ratio:4/3;      /* rolige proporsjoner, ikke strukket */
  width:100%;
  height:auto;
  min-width:0;
  object-fit:cover;
  object-position:50% 40%;
}

/* Samme feilkilde i «Typiske ting jeg hjelper med»-båndet */
.reassureBand{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:start;
}
.reassureBand > *{min-width:0}
.reassureImage img{min-width:0}

/* Ingenting på denne siden skal kunne skyve ut sidebredden */
.homeHelp{overflow-x:clip}

/* To kolonner beholdes helt ned til 700 px. Originalen stablet
   allerede ved 980 px, som er tidlig – der ble det mye tomrom
   til høyre for teksten. Under 700 px er det for trangt til to
   spalter med denne skriftstørrelsen, så da stables den. */
@media (max-width:700px){
  .homeHero{grid-template-columns:minmax(0,1fr);gap:18px}
  .homeImageCard{justify-self:center;max-width:620px}
  .homeImageCard img{aspect-ratio:5/4}
  .reassureBand{grid-template-columns:minmax(0,1fr)}
}
/* Litt strammere tekst i to-spalte-modus, så linjene ikke blir
   for korte når tekstkolonnen er smal */
@media (min-width:701px) and (max-width:1000px){
  .checkList li{font-size:20px}
  .easy{font-size:18px}
  .easy strong{font-size:30px}
}

/* ---- 404 / personvern: enkel tekstside ----
   .card p i hvorfor-oss.css er 14 px med margin:0, som er laget
   for korte kort – ikke for en side med løpende tekst. Her settes
   lesbar skriftstørrelse, avstand mellom avsnitt og en linjelengde
   på ca. 70 tegn.                                              */
.textPage{max-width:70ch}
.textPage h1{margin:6px 0 18px}
.textPage h2{
  margin:34px 0 10px;
  font-size:clamp(21px,2vw,26px);
  letter-spacing:-.01em;
}
.textPage h2:first-of-type{margin-top:22px}
.textPage h3{margin:22px 0 8px;font-size:18px}
.textPage p{
  margin:0 0 14px;
  font-size:16.5px;
  line-height:1.75;
  color:rgba(7,20,39,.80);
}
.textPage ul{margin:0 0 16px;padding-left:24px}
.textPage li{
  margin:0 0 8px;
  font-size:16.5px;
  line-height:1.7;
  color:rgba(7,20,39,.80);
}
.textPage a{text-decoration:underline;text-underline-offset:2px}
.textPage .updated{
  margin-bottom:10px;
  font-size:14px;
  color:rgba(7,20,39,.55);
}
.textPage > .btnRow{margin-top:26px}
@media (max-width:640px){
  .textPage p, .textPage li{font-size:16px}
}