/* =====================================================================
   NETTSIDE · utkast 3 (lyst og midtstilt)
   Bare det siden trenger utover undersider.css:
   - de tre variantene som kort side om side, med store tynne priser
   - de to demo-skjermbildene under variantene
   - seks kort med det som alltid er med
   - korte deler med bare tittel, ingress og én knapp (leveringstid,
     flytting og driften i det mørke båndet). Alt om drift står på
     priser.html, stegene i et samarbeid på om-oss.html.
   ===================================================================== */

/* Overskrifter med id lander litt lenger ned, så etiketten over også vises */
.seksjonshode > [id] { scroll-margin-top: 3rem; }

/* ---------- Spalter og småtekst (som på de andre tjenestesidene) ---------- */
.spalte { max-width: 820px; margin-inline: auto; }
.smal { max-width: 1000px; margin-inline: auto; }
.nt-fot { margin-top: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); }
.mork-band { margin-inline: clamp(8px, 1.2vw, 16px); border-radius: 24px; }

/* ---------- Tre varianter: kort side om side ----------
   Kortene deler rader (subgrid), så navn, pris og tekst står på linje
   selv om navnene er ulikt lange. */
.nt-varianter { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); gap: 0 14px; }
.nt-variant {
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: .85rem; align-content: start;
  padding: clamp(1.5rem, 1.1rem + 1vw, 2rem); background: var(--flate); border: 1px solid var(--strek); border-radius: var(--radius);
  scroll-margin-top: 2rem; transition: border-color .3s;
}
/* Kortet man lander på fra søket eller en lenke, får en tydeligere kant */
.nt-variant:target { border-color: var(--tekst); }
.nt-nr { font-size: .6875rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--svak); }
.nt-navn { font-size: var(--t-h3); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--tekst); }
.nt-variant .tall { align-self: end; margin-top: .35rem; }
.nt-tekst { padding-top: 1rem; border-top: 1px solid var(--strek); color: var(--svak); font-size: .9375rem; }
@media (max-width: 900px) {
  .nt-varianter { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 14px; max-width: 560px; margin-inline: auto; }
  .nt-variant { grid-row: auto; grid-template-rows: none; }
}

/* ---------- Skjermbildene av de to demoene ---------- */
/* Én demo (Nordlin), midt under variantene */
.nt-eksempler { display: grid; max-width: 900px; margin-inline: auto; gap: 2.5rem clamp(1.25rem, .8rem + 1.5vw, 2rem); margin-top: clamp(3.5rem, 2.5rem + 3vw, 5rem); }
.nt-eksempler figure { display: grid; gap: .9rem; align-content: start; margin: 0; min-width: 0; }
.nt-eksempler .nettleser { box-shadow: 0 30px 60px -45px color-mix(in srgb, var(--tekst) 35%, transparent); }
.nt-eksempler figcaption { font-size: var(--t-liten); color: var(--svak); text-align: center; }
.nt-eksempler figcaption a { white-space: nowrap; }

/* ---------- Alltid med: seks kort, tre i bredden ---------- */
.nt-med { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; }
@media (max-width: 900px) { .nt-med { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nt-med { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Korte deler: tittel, ingress og én knapp ----------
   Knappen står like under ingressen, ikke en hel seksjonsavstand unna.
   «Har du en side fra før?» har bare tittel og ingress. */
.nt-kort-del .seksjonshode { margin-bottom: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
.nt-flytt .seksjonshode { margin-bottom: 0; }
/* Ingressen i de korte delene brytes jevnt, så ett ord ikke står alene */
.nt-kort-del .ingress { text-wrap: balance; }