/* =====================================================================
   PRISER · utkast 3 (lyst og midtstilt)
   Midtstilte hoder (fra stil.css) over hvite priskort med store, tynne
   tall. Drift står i sidens ene mørke bånd (.mork snur fargene), og
   spørsmålene i .sporsmal. Her står bare det siden trenger i tillegg.
   ===================================================================== */

/* ---------- Pillene i sidehodet som hopper til hver del ----------
   De står under knappen «Be om fast pris», med litt ekstra luft. */
.hopp-piller ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
.hopp-piller a {
  display: inline-flex; align-items: center; min-height: 40px; padding: .35rem 1.05rem;
  border: 1px solid var(--strek-sterk); border-radius: var(--pille);
  font-size: .875rem; font-weight: 500; color: var(--tekst); text-decoration: none;
  transition: background-color .25s, border-color .25s;
}
.hopp-piller a:hover { border-color: var(--tekst); color: var(--tekst); }

/* ---------- Prisgruppene ----------
   Tre grupper etter hverandre: bare luft under hver, så avstanden
   mellom dem ikke blir dobbel. Den første står tett under sidehodet. */
.pris-gruppe { padding-bottom: 0; }
#nettsider { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.pris-gruppe + .drift-band { margin-top: var(--seksjon); }

/* Kortene: hvite, avrundede, med prisen som stort tynt tall */
.priskort { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1100px; margin-inline: auto; }
.priskort > li, .priskort-bred {
  display: grid; align-content: start; gap: 1.1rem;
  padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); background: var(--flate); border: 1px solid var(--strek); border-radius: var(--radius);
}
.priskort-navn { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.35; color: var(--tekst); text-wrap: balance; }
/* Kortene deler radene (subgrid), så navn, pris, tekst og lenker står på
   linje i alle tre kortene selv om ett navn går over to linjer */
@media (min-width: 901px) {
  .priskort { grid-template-rows: auto auto 1fr auto; row-gap: 1.1rem; }
  .priskort > li { grid-row: span 4; grid-template-rows: subgrid; }
}
.priskort .tall, .priskort-bred .tall { font-size: clamp(3rem, 2.4rem + 2vw, 4rem); padding-bottom: 1.1rem; border-bottom: 1px solid var(--strek); width: 100%; }
.priskort-tekst { color: var(--svak); font-size: .9375rem; max-width: 34em; }
/* align-self/align-content: start, så «Om …»-lenken står øverst i den
   delte raden og på samme høyde i alle kortene. */
.priskort-lenker { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; align-self: start; gap: 0 1.25rem; margin-top: .2rem; }
.priskort-lenker .tekstlenke { text-decoration: none; }
.priskort-lenker .tekstlenke:hover { text-decoration: underline; }
.priskort-lenker .pil { width: 14px; height: 14px; transition: transform .5s var(--myk); }
.priskort-lenker .tekstlenke:hover .pil { transform: translateX(3px); }

/* Innhold: ett bredt kort, prisen til høyre (på mobil under navnet) */
.priskort-bred {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "navn tall" "tekst tall" "lenker tall";
  gap: 1.1rem clamp(2rem, 1rem + 4vw, 5rem); max-width: 1100px; margin-inline: auto;
}
.priskort-bred .priskort-navn { grid-area: navn; }
.priskort-bred .priskort-tekst { grid-area: tekst; }
.priskort-bred .priskort-lenker { grid-area: lenker; }
.priskort-bred .tall { grid-area: tall; align-self: center; width: auto; padding: 0 0 0 clamp(2rem, 1rem + 4vw, 5rem); border-bottom: 0; border-left: 1px solid var(--strek); min-height: 100%; align-items: center; }

/* ---------- Drift: det mørke båndet ---------- */
.drift-band { margin-inline: clamp(8px, 1.2vw, 16px); border-radius: 24px; }
/* To store tall (pris og binding fra år to) side om side */
.drift-tall { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; margin-inline: auto; }
.drift-tall li { display: grid; justify-items: center; align-content: start; gap: 1rem; padding: 1.25rem clamp(1rem, .5rem + 2vw, 2.5rem); text-align: center; }
.drift-tall li + li { border-left: 1px solid var(--strek-sterk); }
.drift-tall-tekst { color: var(--svak); font-size: .9375rem; max-width: 18em; }
/* Ett kort med to spalter: hva driften dekker, og vilkårene */
.drift-kort {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; margin: clamp(3rem, 2.4rem + 2vw, 4.5rem) auto 0;
  background: var(--flate); border: 1px solid var(--strek); border-radius: var(--radius);
}
.drift-kort > div { display: grid; align-content: start; gap: 1.25rem; padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); }
.drift-kort > div + div { border-left: 1px solid var(--strek); }
.drift-kort .hake-liste { gap: 0; border-top: 1px solid var(--strek); }
.drift-kort .hake-liste li { padding-block: .85rem; border-bottom: 1px solid var(--strek); color: var(--tekst); }
.drift-kort .hake-liste li::before { top: 1.35em; }
.drift-kort .hake-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.drift-kort .faktaboks { border-top-color: var(--strek); }
.drift-kort .faktaboks > div { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); }
.drift-kort .faktaboks > div:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- Spørsmål ---------- */
.pris-sporsmal { max-width: 820px; margin-inline: auto; }
.seksjonshode .ingress a { color: var(--tekst); }

/* ---------- Smalere skjermer ---------- */
/* Under 900 px står alt i én spalte på 560 px, også innholdskortet, så
   kortene ikke skifter bredde nedover siden. De to drift-tallene stables
   også her, som kortene over dem. */
@media (max-width: 900px) {
  .priskort { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .priskort > li { grid-template-rows: none; }
  .priskort-bred { grid-template-columns: minmax(0, 1fr); grid-template-areas: "navn" "tall" "tekst" "lenker"; max-width: 560px; }
  .priskort-bred .tall { width: 100%; min-height: 0; padding: 0 0 1.1rem; border-left: 0; border-bottom: 1px solid var(--strek); }
  .drift-kort { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .drift-kort > div + div { border-left: 0; border-top: 1px solid var(--strek); }
  .drift-tall { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  .drift-tall li + li { border-left: 0; border-top: 1px solid var(--strek-sterk); }
  .drift-tall li { padding-block: 1.75rem; }
}
@media (max-width: 640px) {
  .drift-kort .faktaboks > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}