/* ============================================================
   Tid Bolig: prosjekter.css
   The projects page (prosjekter.html). A subpage: the front page's style, an overview at the top and simple
   navigation, no motion (Sverre 18.10.2026, Janis: subpages need no animations). Each project reads from its text
   and big picture to a row of pictures along the way, left to right. Every colour and size comes from tokens.css.
   ============================================================ */

/* ---------- the top: title, what the labels mean, a shortcut to every project ---------- */
.ps-topp {
  --flate: var(--kalk);
  padding: calc(var(--meny-h) + clamp(1.75rem, 4vw, 3.25rem)) 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--flate);
}
.sti { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); font-size: 0.9rem; color: var(--tekst-dempet); }
.sti li { display: flex; gap: 0.5rem; }
.sti li + li::before { content: "/"; color: var(--linje-sterk); }
.sti a { color: inherit; text-underline-offset: 3px; }
.ps-hode { display: grid; gap: 1.25rem; }
.ps-hode h1 {
  font-size: var(--str-h2); font-weight: var(--vekt-tittel); letter-spacing: var(--sporing-tittel);
  line-height: 1.04; text-wrap: balance;
}
.ps-hint { margin-top: 0.9rem; font-size: 0.95rem; color: var(--tekst-dempet); }
@media (min-width: 900px) {
  .ps-hode { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: end; column-gap: clamp(2rem, 4vw, 4rem); }
}
.ps-oversikt {
  display: grid; gap: 1.5rem 3rem;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--linje);
}
@media (min-width: 768px) { .ps-oversikt { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); } }
.ps-oversikt .merke { margin-bottom: 0.8rem; color: var(--kobber-tekst); }
.ps-oversikt ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ps-oversikt a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.45rem 1rem;
  border: 1px solid var(--linje-sterk); border-radius: 999px; font-size: 0.95rem; text-decoration: none;
  transition: background-color 0.25s var(--mykt), color 0.25s var(--mykt), border-color 0.25s var(--mykt);
}
.ps-oversikt a:hover { background: var(--marine); color: var(--tekst-lys); border-color: var(--marine); }

/* ---------- the sections; neighbours never share a ground ---------- */
.ps-bygget { --flate: var(--marine); color: var(--tekst-lys); --fokus: var(--kobber-lys); }
.ps-bygget .merke-linje { color: var(--kobber-lys); }
.ps-tegnet { --flate: var(--sand); }
.ps-galleri { --flate: var(--kalk); }
.ps-kontakt { --flate: var(--himmel); }
.ps-seksjon-topp { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.ps-seksjon-topp .seksjon-tittel { max-width: 16em; }

/* ---------- one project ---------- */
.pp { scroll-margin-top: calc(var(--meny-h) + 1rem); }
.pp + .pp { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--linje); }
.ps-bygget .pp + .pp { border-top-color: var(--linje-lys); }
.pp-topp { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 900px) {
  .pp-topp { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; }
  /* every other project turns round, so the pictures change side down the page */
  .pp-snudd .pp-topp { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .pp-snudd .pp-tekst { order: 2; }
}
.pp-nr { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; color: var(--kobber-tekst); font-variant-numeric: tabular-nums; }
.ps-bygget .pp-nr { color: var(--kobber-lys); }
.pp-tekst h3 {
  margin-top: 0.4rem; font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.5rem); font-weight: var(--vekt-tittel);
  letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance;
}
.pp-fakta { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.pp-fakta li { padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--kalk); font-size: 0.85rem; font-weight: 500; }
.ps-bygget .pp-fakta li { background: var(--marine-3); color: var(--tekst-lys); }
.pp-brod { margin-top: 1.1rem; max-width: 34rem; color: var(--tekst-dempet); }
.ps-bygget .pp-brod { color: var(--tekst-lys-dempet); }

/* the pictures: each one a link to the large file, opened in the viewer */
.pp-bilde { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--kalk); cursor: zoom-in; }
.ps-bygget .pp-bilde { background: var(--marine-3); }
.pp-bilde img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--bilde-y, 50%); }
.pp-bilde.tegning { background: var(--hvit); }
.pp-bilde.tegning img { object-fit: contain; padding: 0.5rem; }
.pp-bilde:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.pp-hoved { margin: 0; }
.pp-hoved .pp-bilde { width: 100%; aspect-ratio: 3 / 2; }
figure figcaption { margin-top: 0.6rem; font-size: 0.95rem; line-height: 1.45; color: var(--tekst-dempet); }
.ps-bygget figure figcaption { color: var(--tekst-lys-dempet); }

/* the pictures along the way, in the order the work went */
.pp-steg { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.pp-steg figure { margin: 0; }
.pp-steg .pp-bilde { width: 100%; aspect-ratio: 4 / 3; max-height: 16rem; }
@media (min-width: 900px) {
  .pp-steg { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1.25rem; }
  /* a row of two gets taller pictures than a row of five, so no row is a thin strip */
  .pp-steg .pp-bilde { max-height: calc(64rem / var(--n, 4)); }
}
@media (max-width: 899px) {
  /* two columns: the last picture of an odd row takes the whole width instead of leaving half a row empty */
  .pp-steg > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ps-galleri-rad { margin-top: 0; }
.ps-galleri-rad .pp-bilde { max-height: 22rem; }
@media (max-width: 599px) {
  .ps-galleri-rad { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- get in touch ---------- */
.ps-kontakt-rad { display: grid; gap: 1.5rem; align-items: end; }
.ps-kontakt-rad .ingress { margin-top: 1rem; }
.ps-kontakt-knapper { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 900px) { .ps-kontakt-rad { grid-template-columns: minmax(0, 1.3fr) auto; column-gap: 4rem; } }

/* ---------- the picture viewer ---------- */
html:has(.lysboks[open]) { overflow: hidden; }
.lysboks {
  width: 100vw; max-width: none; height: 100svh; max-height: none; margin: 0; padding: clamp(3.75rem, 7vw, 4.5rem) clamp(0.75rem, 6vw, 5.5rem) 1.5rem;
  border: 0; background: transparent; color: var(--tekst-lys);
  touch-action: pan-y pinch-zoom;   /* a sideways swipe pages through the pictures (js/prosjekter.js) */
}
.lysboks::backdrop { background: var(--lysboks); }
.lysboks[open] { display: grid; place-items: center; }
.lysboks-figur { margin: 0; display: grid; gap: 0.85rem; justify-items: center; max-width: 100%; }
.lysboks-figur img.laster { opacity: 0; }   /* the old picture never stands over the new caption */
.lysboks-figur img {
  display: block; max-width: 100%; max-height: calc(100svh - 10rem); width: auto; height: auto;
  border-radius: var(--radius); background: var(--hvit);
}
.lysboks-figur figcaption { margin: 0; max-width: 46rem; text-align: center; font-size: 1rem; color: var(--tekst-lys); }
.lysboks-teller { position: fixed; top: 1.6rem; left: clamp(1rem, 3vw, 1.75rem); font-size: 0.9rem; letter-spacing: 0.08em; color: var(--tekst-lys-dempet); font-variant-numeric: tabular-nums; }
.lb-knapp {
  position: fixed; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border-radius: 50%; border: 1px solid var(--linje-lys); background: var(--slor); color: var(--tekst-lys); cursor: pointer;
  transition: background-color 0.25s var(--mykt), color 0.25s var(--mykt);
}
.lb-knapp:hover { background: var(--tekst-lys); color: var(--marine); }
.lb-knapp:focus-visible { outline: 2px solid var(--kobber-lys); outline-offset: 3px; }
.lb-knapp svg { width: 22px; height: 22px; }
.lysboks-lukk { top: 1rem; right: clamp(0.75rem, 3vw, 1.5rem); }
.lysboks-forrige, .lysboks-neste { top: 50%; margin-top: -24px; }
.lysboks-forrige { left: clamp(0.5rem, 2vw, 1.5rem); }
.lysboks-neste { right: clamp(0.5rem, 2vw, 1.5rem); }
@media (max-width: 599px) {
  /* on a phone the arrows sit under the picture, out of the way of the thumb's swipe */
  .lysboks-forrige, .lysboks-neste { top: auto; bottom: 1rem; margin-top: 0; }
  .lysboks-forrige { left: calc(50% - 60px); }
  .lysboks-neste { right: calc(50% - 60px); }
  .lysboks { padding-bottom: 5rem; }
  .lysboks-figur img { max-height: calc(100svh - 12rem); }
}
.lysboks.en .lysboks-forrige, .lysboks.en .lysboks-neste, .lysboks.en .lysboks-teller { display: none; }