/* ============================================================
   Nordic MRO: tjeneste.css
   A page for every service (tjenester/<slug>/, the old site's own addresses) and the overview tjenester/, written by production/bygg/bygg.py
   from production/bygg/tj/ (Sverre 06.11.2026: «lag også alle tjenestesidene slik for bygglund»; this file came from the Bygglund site).
   A subpage: the front page's style, an overview and simple navigation, no motion (Sverre 18.10.2026, Janis).
   Grounds down the page, never the same twice in a row: kalk, betong, (kalk), grafitt, kalk, betong, dis, the footer.
   Every colour and size comes from tokens.css.
   ============================================================ */

/* ---------- the top: what we do, the two ways in, the proof, one big photo ---------- */
.ts-topp {
  --flate: var(--kalk);
  padding: calc(var(--meny-h) + clamp(1.75rem, 4vw, 3.25rem)) 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--flate);
}
.ts-hode { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  .ts-hode { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: clamp(2rem, 5vw, 5rem); }
}
.ts-tekst h1 {
  font-size: var(--str-hero); font-weight: var(--vekt-tittel); letter-spacing: var(--sporing-tittel);
  line-height: 1.03; text-wrap: balance;
}
.ts-tekst .ingress { margin-top: clamp(1rem, 2vw, 1.4rem); }
.ts-knapper { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.5rem, 3vw, 2rem); }
.ts-bevis {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem 1.4rem;
  margin-top: clamp(1.5rem, 3vw, 2rem); font-size: 0.95rem; color: var(--tekst-dempet);
}
.ts-bevis li { display: inline-flex; align-items: center; gap: 0.5rem; }
.ts-bevis li::before { content: ""; width: 7px; height: 7px; background: var(--fjord); flex: none; }
.ts-bilde {
  margin: 0; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--betong);
}
.ts-bilde img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .ts-bilde { max-width: 32rem; justify-self: end; max-height: calc(100svh - var(--meny-h) - 4rem); }
}

/* ---------- a section's head ---------- */
.ts-del-topp { display: grid; gap: 1rem 3rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.ts-del-topp .seksjon-tittel { max-width: 18em; }

/* ---------- what we do: one cell per job, each an anchor the front page's small cards link to ---------- */
.ts-gjor { --flate: var(--betong); }
.ts-punkter {
  list-style: none; padding: 0; display: grid; gap: 1px;
  background: var(--linje); border: 1px solid var(--linje); border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 640px) { .ts-punkter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ts-punkter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ts-punkt {
  display: grid; align-content: start; gap: 0.55rem; padding: clamp(1.4rem, 2.5vw, 2rem);
  background: var(--kalk); scroll-margin-top: calc(var(--meny-h) + 1.5rem);
}
/* the job a small card on the front page pointed at */
.ts-punkt:target { box-shadow: inset 0 3px 0 var(--fjord); background: var(--hvit); }
.ts-nr { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; color: var(--aksent); font-variant-numeric: tabular-nums; }
.ts-punkt h3 { font-size: var(--str-h3); font-weight: var(--vekt-sterk); letter-spacing: -0.01em; line-height: 1.2; }
.ts-punkt p:last-child { color: var(--tekst-dempet); }

/* ---------- the bathroom page: the work the tiles hide ---------- */
.ts-under { --flate: var(--kalk); }
.ts-under-rad { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 900px) {
  .ts-under-rad { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: clamp(2rem, 5vw, 5rem); }
}
.ts-under .ingress { margin-top: 1rem; }
.ts-under-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.ts-under-bilder figure { margin: 0; }
.ts-under-bilder img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); background: var(--betong); }
.ts-under-bilder figcaption { margin-top: 0.55rem; font-size: 0.9rem; color: var(--tekst-dempet); }

/* ---------- jobs we have done (dark) ---------- */
.ts-pr { --flate: var(--grafitt); color: var(--tekst-lys); --aksent: var(--is); --fokus: var(--is); }
.ts-pr-rad { list-style: none; padding: 0; display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); }
@media (min-width: 640px) { .ts-pr-rad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ts-pr-rad { grid-template-columns: repeat(var(--kol, 3), minmax(0, 1fr)); } }
.ts-pr-kort { position: relative; display: grid; align-content: start; gap: 0.85rem; }
.ts-pr-kort figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--grafitt-2); }
.ts-pr-kort img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--mykt); }
.ts-pr-kort:hover img { transform: scale(1.03); }
.ts-pr-kort h3 { font-size: var(--str-h3); font-weight: var(--vekt-tittel); letter-spacing: -0.01em; line-height: 1.2; text-wrap: balance; }
.ts-pr-kort h3 a { color: inherit; text-decoration: none; }
.ts-pr-kort h3 a::after { content: ""; position: absolute; inset: 0; }   /* the whole card opens the project */
.ts-pr-kort h3 a:focus-visible { outline: none; }
.ts-pr-kort:focus-within { outline: 2px solid var(--fokus); outline-offset: 4px; }
.ts-pr-merker { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ts-pr-merker li { padding: 0.25rem 0.7rem; border: 1px solid var(--linje-lys); border-radius: 999px; font-size: 0.85rem; color: var(--tekst-lys-dempet); }
.ts-pr-alle { margin-top: clamp(1.75rem, 3vw, 2.5rem); border-bottom-color: var(--linje-lys); }

/* ---------- the steps: the same five as on the front page, in one plain row ---------- */
.ts-steg { --flate: var(--kalk); }
.ts-steg-rad { list-style: none; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .ts-steg-rad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ts-steg-rad { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem; } }
.ts-steg-rad li { display: grid; align-content: start; gap: 0.45rem; padding-top: 1rem; border-top: 2px solid var(--grafitt); }
.ts-steg-rad h3 { font-size: 1.2rem; font-weight: var(--vekt-sterk); line-height: 1.25; }
.ts-steg-rad p:last-child { color: var(--tekst-dempet); }

/* ---------- the other services ---------- */
.ts-andre { --flate: var(--betong); }
.ts-andre-tittel { margin-bottom: 1.25rem; font-size: var(--str-h3); font-weight: var(--vekt-tittel); letter-spacing: -0.01em; }
.ts-andre-rad { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 768px) { .ts-andre-rad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ts-andre-rad a {
  display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  min-height: 44px; padding: 0.65rem 1rem 0.65rem 0.65rem; border-radius: var(--radius);
  background: var(--kalk); color: inherit; text-decoration: none; font-size: 1.15rem;
  transition: background-color 0.25s var(--mykt);
}
.ts-andre-rad a:hover { background: var(--hvit); }
.ts-andre-rad img { width: 4.75rem; height: 4.75rem; object-fit: cover; border-radius: var(--radius); }
.ts-andre-rad svg { width: 20px; height: 20px; color: var(--fjord); transition: transform 0.25s var(--mykt); }
.ts-andre-rad a:hover svg { transform: translateX(4px); }

/* ---------- a page for every service: a landscape top photo keeps its shape ---------- */
.ts-bilde-bred { aspect-ratio: 4 / 3; }

/* ---------- a cell that is a link to the job's own page ---------- */
.ts-punkt-med { padding: 0; }
.ts-punkt-lenke {
  display: grid; align-content: start; gap: 0.55rem; height: 100%; padding: clamp(1.4rem, 2.5vw, 2rem);
  color: inherit; text-decoration: none; transition: background-color 0.25s var(--mykt);
}
.ts-punkt-lenke:hover { background: var(--hvit); }
.ts-punkt-lenke:focus-visible { outline: 2px solid var(--fokus); outline-offset: -4px; }
.ts-punkt-lenke p { color: var(--tekst-dempet); }
.ts-punkt-pil { display: block; width: 20px; height: 20px; margin-top: 0.35rem; color: var(--fjord); transition: transform 0.25s var(--mykt); }
.ts-punkt-lenke:hover .ts-punkt-pil { transform: translateX(4px); }

/* the last row never leaves an empty cell in the grid of hairlines */
@media (min-width: 640px) and (max-width: 1023px) { .ts-punkt:last-child:nth-child(odd) { grid-column: span 2; } }
@media (min-width: 1024px) {
  .ts-punkt:last-child:nth-child(3n + 2) { grid-column: span 2; }
  .ts-punkt:last-child:nth-child(3n + 1) { grid-column: span 3; }
  .ts-punkter[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ts-punkter[data-n="4"] .ts-punkt:last-child { grid-column: auto; }
}

/* ---------- the numbers: beside the title where there is no photo of the job, and in the row of photos ---------- */
.ts-tall {
  margin: 0; display: grid; align-content: center; width: 100%; padding: clamp(1.25rem, 2.5vw, 2.25rem); border-radius: var(--radius);
  background: var(--grafitt); color: var(--tekst-lys);
}
.ts-tall > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; column-gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--linje-lys); }
.ts-tall > div:first-child { border-top: 0; }
.ts-tall dt { font-size: clamp(2.2rem, 1.7rem + 1.6vw, 3.2rem); font-weight: var(--vekt-tittel); letter-spacing: var(--sporing-tittel); line-height: 1; }
.ts-tall dd { margin: 0; font-size: 1.05rem; line-height: 1.35; color: var(--tekst-lys-dempet); }
.ts-hode > .ts-tall { justify-self: end; max-width: 32rem; }

/* ---------- the photos from the jobs, and the numbers, on one line with the same height ---------- */
.ts-rad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); margin-top: clamp(1rem, 2vw, 1.5rem); }
.ts-rad-bilde { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--kalk); }
.ts-rad-bilde img { width: 100%; height: 100%; object-fit: cover; }
.ts-rad > .ts-tall { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .ts-rad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ts-rad > .ts-tall { grid-column: span var(--rest, 1); }
}

/* ---------- a job from the Mittanbud profile ---------- */
/* ---------- one review that speaks of this kind of job ---------- */
.ts-vurd { --flate: var(--kalk); }
.ts-vurd-rad { display: grid; gap: 1.25rem 3rem; }
@media (min-width: 900px) { .ts-vurd-rad { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr); } }
.ts-vurd-figur { margin: 0; }
.ts-vurd-figur blockquote { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem); font-weight: var(--vekt-tittel); letter-spacing: -0.015em; line-height: 1.32; }
.ts-vurd-figur figcaption { margin-top: 1rem; color: var(--tekst-dempet); }

/* ---------- the questions, as on the front page: the title and the list start on the same line ---------- */
.ts-faq-rad { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 900px) { .ts-faq-rad { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }

/* ---------- the jobs that belong with this one ---------- */
.ts-rel { --flate: var(--kalk); }   /* the contact section under it is sand: betong beside it would read as one surface */
.ts-rel-rad { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .ts-rel-rad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ts-rel-rad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ts-rel-rad a {
  display: grid; align-content: start; gap: 0.35rem; height: 100%; padding: 1.1rem 1.15rem; border-radius: var(--radius);
  background: var(--betong); color: inherit; text-decoration: none; transition: background-color 0.25s var(--mykt);
}
.ts-rel-rad a:hover { background: var(--dis); }
.ts-rel-navn { font-size: 1.15rem; font-weight: var(--vekt-sterk); line-height: 1.25; }
.ts-rel-kort { font-size: 1rem; line-height: 1.4; color: var(--tekst-dempet); }
.ts-rel-pil { display: block; width: 20px; height: 20px; margin-top: 0.25rem; color: var(--fjord); transition: transform 0.25s var(--mykt); }
.ts-rel-rad a:hover .ts-rel-pil { transform: translateX(4px); }
.ts-rel-alle { margin-top: clamp(1rem, 2vw, 1.5rem); }

/* ---------- the overview: tjenester.html ---------- */
.tl-hode { display: grid; gap: 1.25rem 3rem; align-items: end; }
@media (min-width: 900px) { .tl-hode { grid-template-columns: minmax(0, 1fr) auto; } }
.tl-hode .ts-knapper { margin-top: 0; }
.tl-hopp { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
.tl-hopp a { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--linje-sterk); border-radius: 999px; color: inherit; text-decoration: none; font-size: 0.98rem; }
.tl-hopp a:hover { background: var(--betong); }
.tl-gruppe { scroll-margin-top: var(--meny-h); }
.tl-rad { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 900px) { .tl-rad { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: start; } }
.tl-venstre .ingress { margin-top: 0.75rem; }
.tl-bilde { margin: clamp(1rem, 2vw, 1.5rem) 0 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--linje); }
.tl-bilde img { width: 100%; height: 100%; object-fit: cover; }
.tl-liste { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linje-sterk); }
.tl-liste a {
  display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 0.15rem 1.25rem; align-items: center; padding: 0.8rem 0;
  border-bottom: 1px solid var(--linje-sterk); color: inherit; text-decoration: none;
}
.tl-liste svg { grid-column: 2; grid-row: 1 / 3; width: 20px; height: 20px; color: var(--fjord); transition: transform 0.25s var(--mykt); }
.tl-liste a:hover svg { transform: translateX(4px); }
.tl-navn { font-size: 1.12rem; font-weight: var(--vekt-sterk); line-height: 1.3; }
.tl-kort { grid-column: 1; font-size: 1rem; line-height: 1.4; color: var(--tekst-dempet); }
@media (min-width: 1100px) {
  .tl-liste a { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 20px; }
  .tl-kort { grid-column: 2; }
  .tl-liste svg { grid-column: 3; grid-row: 1; }
}

/* the questions (Nordic has no such section on the front page), on the deep fjord */
.ts-faq { --flate: var(--skifer-dyp); color: var(--tekst-lys); --fokus: var(--is); }
.faq-liste { align-self: stretch; border-top: 1px solid var(--linje-lys); }
.faq-sporsmal { border-bottom: 1px solid var(--linje-lys); }
.faq-sporsmal summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.1rem; cursor: pointer; list-style: none;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.2rem); font-weight: 500; line-height: 1.35;
}
.faq-sporsmal summary::-webkit-details-marker { display: none; }
.faq-sporsmal summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 300; line-height: 1; color: var(--is); transition: transform 0.25s var(--mykt); }
.faq-sporsmal[open] summary::after { transform: rotate(45deg); }
.faq-sporsmal summary:hover { color: var(--is); }
.faq-sporsmal summary:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; }
.faq-sporsmal p { padding: 0 0 1.25rem; max-width: 40rem; color: var(--tekst-lys-dempet); font-size: var(--str-tekst); line-height: var(--linjehoyde); }

/* one job of the kind left on the page: the photo with its words beside it, not one card and two empty cells */
.ts-pr-rad.ts-pr-en { display: block; }
.ts-pr-en .ts-pr-kort { display: grid; gap: 1rem 2rem; align-items: center; }
@media (min-width: 640px) { .ts-pr-en .ts-pr-kort { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } .ts-pr-en .ts-pr-kort figure { grid-row: 1 / span 2; } .ts-pr-en .ts-pr-kort h3 { align-self: end; } .ts-pr-en .ts-pr-merker { align-self: start; } }

/* on a phone the row has two columns: an odd photo at the end takes the whole width instead of leaving a hole */
@media (max-width: 899px) { .ts-rad-bilde:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 4 / 3; } }

/* ---------- phones (mobil 08.11.2026; behind max-width: 767px, so the PC stays as it is) ---------- */
@media (max-width: 767px) {
  /* the longest job name («Bygningskonstruksjoner») pushed the page 16 px wider than a 390 px phone: a title shrinks only as far as its own longest word needs (--ord, bygg.py) */
  .ts-tekst h1 { font-size: min(var(--str-hero), calc((100vw - 2 * var(--marg)) / (var(--ord, 10) * 0.54))); overflow-wrap: anywhere; }
  .ts-tall dd { font-size: var(--str-tekst); overflow-wrap: anywhere; hyphens: auto; }
  .ts-pr-kort h3 a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -9px; }
}

/* a <picture> wrapper (a phone's larger copy of a small photo) makes no box of its own */
.ts-pr-kort picture { display: contents; }
.ts-pr-kort source { display: none; }