/* ============================================================
   Euphoria Bygg: sider.css
   The other pages: services, one page per service, projects,
   about and contact. Same style as the front page, no motion,
   built for overview and easy navigation.
   ============================================================ */

.sidetopp {
  padding: calc(var(--meny-h) + clamp(40px, 6vw, 88px)) var(--side) clamp(36px, 4vw, 56px);
  background: var(--kalk-2);
}

.sidetopp + .side-seksjon,
.pr-oversikt + .side-seksjon {
  padding-top: clamp(36px, 4vw, 56px);
}

.sidetopp > * {
  max-width: var(--maks);
  margin-inline: auto;
}

.sidetopp h1 {
  max-width: min(var(--maks), 16em);
  margin-left: max(0px, calc((100% - var(--maks)) / 2));
  font-size: var(--tittel-side);
  overflow-wrap: break-word;              /* «Personvernerklæring» is wider than a 320 px phone */
  hyphens: auto;
}

.sidetopp .ingress {
  max-width: min(var(--maks), 40em);
  margin: 22px 0 0 max(0px, calc((100% - var(--maks)) / 2));
  font-size: var(--ingress);
  color: var(--tekst-2);
}

.smuler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  font-size: 14px;
  color: var(--tekst-2);
}

.smuler a {
  text-decoration: none;
}

.smuler a:hover {
  color: var(--tekst);
}

.side-seksjon {
  padding: 0 var(--side) var(--rad);
}

/* ---------- services overview ---------- */

.tj-kort-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) var(--gap);
  padding: 0;
  list-style: none;
}

.tj-kort-bilde {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 8px;
  border-radius: 3px;
  background: var(--svartbeis);
}

.tj-kort-bilde img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-ut);
}

.tj-kort-stor h2 {
  font-size: var(--tittel-liten);
  font-weight: var(--vekt-tekst);
  letter-spacing: -0.025em;
}

.tj-kort-stor p {
  color: var(--tekst-2);
}

.tj-kort-stor .lenke-pil {
  justify-self: start;
  margin-top: 4px;
}

/* ---------- one service ---------- */

.tj-side {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.tj-side > * {
  max-width: none;
  margin: 0;
}

.tj-hovedbilde {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  background: var(--svartbeis);
}

.tj-hovedbilde img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tj-innhold {
  display: grid;
  gap: 32px;
}

.tj-brod {
  display: grid;
  gap: 18px;
}

.tj-brod > p {
  color: var(--tekst-2);
}

.tj-brod h2 {
  margin-top: 8px;
  font-size: var(--tittel-liten);
  font-weight: var(--vekt-tekst);
  letter-spacing: -0.025em;
}

.hakeliste {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hakeliste li {
  display: flex;
  gap: 12px;
}

.hakeliste svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--furu-dyp);
}

.tj-brod .knapper {
  margin-top: 10px;
}

.tj-prosjekt {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 26px 28px;
  border-top: 2px solid var(--furu);
  background: var(--kalk-2);
}

.tj-prosjekt .overlinje {
  margin-bottom: 0;
}

.tj-prosjekt h2 {
  font-size: var(--tittel-liten);
  font-weight: var(--vekt-tekst);
  letter-spacing: -0.025em;
}

.tj-prosjekt p:not(.overlinje) {
  color: var(--tekst-2);
}

.tj-fotos {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap);
}

.tj-foto {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  background: var(--svartbeis);
}

.tj-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tj-andre {
  grid-column: 1 / -1;
  padding-top: 32px;
  border-top: 1px solid var(--linje-mork);
}

.tj-andre ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tj-andre a {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--linje-mork-2);
  border-radius: var(--runding);
  text-decoration: none;
}

.tj-andre a:hover {
  border-color: var(--tekst);
}

/* ---------- projects ---------- */

.pr-oversikt {
  padding: 0 var(--side) clamp(36px, 4vw, 56px);
  background: var(--kalk-2);
}

.pr-oversikt ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: var(--maks);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.pr-oversikt a {
  display: inline-block;
  padding: 9px 15px;
  border: 1px solid var(--linje-mork-2);
  border-radius: var(--runding);
  font-size: var(--liten);
  text-decoration: none;
}

.pr-oversikt a:hover {
  border-color: var(--tekst);
}

.pr-liste {
  display: grid;
  gap: 0;
}

.pr-artikkel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(36px, 4vw, 56px) 0;
  border-top: 1px solid var(--linje-mork);
  scroll-margin-top: calc(var(--meny-h) + 16px);
}

.pr-tekst {
  display: grid;
  gap: 16px;
  align-content: start;
  justify-items: start;
}

.pr-tekst .prosjekt-nr {
  color: var(--furu-dyp);
  font-size: var(--liten);
  font-weight: var(--vekt-sterk);
  letter-spacing: 0.04em;
}

.pr-tekst h2 {
  font-size: clamp(26px, 2.4vw, 36px);
}

.pr-tekst > p:not(.prosjekt-nr) {
  color: var(--tekst-2);
}

.pr-galleri {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pr-galleri figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  background: var(--svartbeis);
}

.pr-galleri img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pr-galleri.antall-1 {
  grid-template-columns: 1fr;
}

.pr-galleri.antall-1 figure {
  aspect-ratio: 3 / 2;
}

.pr-galleri.antall-3 figure:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.pr-galleri.antall-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pr-galleri.antall-6 figure {
  aspect-ratio: 4 / 5;
}

/* ---------- about ---------- */

.om-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 110px);
  align-items: start;
}

.om-side > * {
  max-width: none;
  margin: 0;
}

.om-brod {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.om-brod > p {
  max-width: 36em;
  color: var(--tekst-2);
}

.om-side .om-fakta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 12px clamp(24px, 4vw, 56px);
  margin: 14px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--linje-mork);
  list-style: none;
}

.om-side .om-fakta strong {
  display: block;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: var(--vekt-tittel);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.om-side .om-fakta span {
  font-size: var(--liten);
  color: var(--tekst-2);
}

/* the crew at work, backs to the camera */
.om-folk {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 12px;
  align-items: start;
}

.om-folk figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  background: var(--kalk-2);
}

.om-folk figure:last-child {
  margin-top: 22%;
}

.om-folk img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.om-vurderinger {
  padding-top: var(--rad);
  background: var(--kalk-2);
  overflow: hidden;
}

.om-steder {
  padding-top: var(--rad);
}

.om-steder h2 {
  margin-bottom: 16px;
}

.om-steder > p {
  color: var(--tekst-2);
}

/* ---------- contact ---------- */

.kontakt-side {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 6vw, 100px);
  align-items: start;
}

.kontakt-side > * {
  max-width: none;
  margin: 0;
}

.kontakt-info {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.kontakt-liste {
  display: grid;
  gap: 16px;
  margin: 18px 0 26px;
}

.kontakt-liste dt {
  font-size: var(--liten);
  font-weight: var(--vekt-sterk);
}

.kontakt-liste dd {
  margin: 4px 0 0;
  color: var(--tekst-2);
}

.kontakt-info .steder {
  margin-top: 0;
}

.kontakt-skjema h2 {
  margin-bottom: 24px;
  font-size: var(--tittel-liten);
  font-weight: var(--vekt-tekst);
  letter-spacing: -0.025em;
}

.kontakt-side .kontakt-skjema {
  padding: clamp(28px, 3vw, 44px);
  background: var(--kalk-2);
  border-radius: 3px;
}

.kontakt-tlf {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: var(--vekt-tittel);
  letter-spacing: -0.03em;
  text-decoration: none;
}

.kontakt-tlf svg {
  width: 0.7em;
  height: 0.7em;
}

.kontakt-epost {
  font-size: 18px;
  text-decoration: none;
  border-bottom: 1px solid var(--linje-mork-2);
}

/* ---------- smaller screens ---------- */

@media (max-width: 1023px) {
  .tj-kort-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tj-side,
  .om-side,
  .kontakt-side,
  .pr-artikkel {
    grid-template-columns: 1fr;
  }

  .om-folk {
    max-width: 620px;
  }
}

@media (max-width: 599px) {
  .tj-kort-liste {
    grid-template-columns: 1fr;
  }

  .pr-galleri.antall-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .om-side .om-fakta {
    grid-template-columns: 1fr 1fr;
  }
}

/* a set of three that starts with an upright photograph: it stands tall beside the other two */
.pr-galleri.antall-3.forst-hoy {
  grid-template-rows: 1fr 1fr;
}

.pr-galleri.antall-3.forst-hoy figure:first-child {
  grid-column: auto;
  grid-row: 1 / 3;
  aspect-ratio: auto;
}

/* ============================================================
   27.10.2026: the deeper pages. Cards where only the title is the
   link, the service text, questions and answers, reviews, one page
   per project, the areas page and the privacy page. Still pages:
   nothing moves, everything is readable without JavaScript.
   ============================================================ */

/* a card is one link: the title's ::after covers the card, so it can be pressed anywhere and the link text stays the title */
.tj-kort-stor,
.pr-kort {
  position: relative;
}

.kort-lenke {
  color: inherit;
  text-decoration: none;
}

.kort-lenke::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
}

.kort-lenke:focus-visible {
  outline: none;
}

.kort-lenke:focus-visible::after {
  outline: 2px solid var(--furu-dyp);
  outline-offset: 6px;
}

.tj-kort-stor {
  display: grid;
  gap: 10px;
  align-content: start;
}

.tj-kort-stor:hover img,
.pr-kort:hover img {
  transform: scale(1.04);
}

/* links inside running text */
.tj-del a,
.sp a,
.omr-del p a,
.pr-om p a,
.sidetopp .ingress a,
.om-steder p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------- the service text ---------- */
.tj-artikkel {
  display: grid;
  gap: clamp(32px, 4vw, 52px);
}

.tj-artikkel > .tj-del {
  display: grid;
  gap: 16px;
  max-width: min(var(--maks), 44em);
  margin-left: max(0px, calc((100% - var(--maks)) / 2));
}

.tj-del h2 {
  font-size: clamp(26px, 2.4vw, 36px);
}

.tj-fotos-seksjon .tj-fotos {
  grid-column: auto;
}

/* ---------- section heads on the deeper pages ---------- */
.sp-topp {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 40px;
  margin-bottom: clamp(28px, 3vw, 44px);
}

.sp-topp .overlinje {
  flex-basis: 100%;
  margin-bottom: 0;
}

/* ---------- questions and answers ---------- */
.sp-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px) clamp(32px, 4vw, 64px);
}

.sp {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 22px;
  border-top: 1px solid var(--linje-mork);
}

.sp h3 {
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.25;
}

.sp p {
  color: var(--tekst-2);
}

/* ---------- reviews that fit the page, as a still grid ---------- */
.vurd-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vurd-liste .vurdering {
  width: auto;
  background: var(--kalk-2);
}

/* ---------- project cards (the overview and the service pages) ---------- */
.pr-kort-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 3vw, 48px) var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr-kort {
  display: grid;
  gap: 10px;
  align-content: start;
}

.pr-kort-bilde {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 6px;
  border-radius: 3px;
  background: var(--svartbeis);
}

.pr-kort-bilde img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-ut);
}

.pr-kort h2,
.pr-kort h3 {
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: var(--vekt-tekst);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.pr-kort p {
  color: var(--tekst-2);
}

.pr-kort .merker {
  margin-top: 4px;
}

/* ---------- one project ---------- */
.pr-side {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.pr-side > * {
  max-width: none;
  margin: 0;
}

.pr-hovedbilde {
  margin: 0;
}

.pr-hovedbilde img,
.pr-foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: var(--svartbeis);
}

.pr-hovedbilde figcaption,
.pr-foto figcaption {
  margin-top: 10px;
  font-size: var(--liten);
  line-height: 1.45;
  color: var(--tekst-2);
}

.pr-om {
  display: grid;
  gap: 18px;
  align-content: start;
}

.pr-tjenester {
  display: grid;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--linje-mork);
}

.pr-tjenester h2 {
  font-size: var(--tittel-liten);
  font-weight: var(--vekt-tekst);
  letter-spacing: -0.025em;
}

.pr-tj-lenker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr-tj-lenker a,
.omr-tj a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--linje-mork-2);
  border-radius: var(--runding);
  text-decoration: none;
}

.pr-tj-lenker a:hover,
.omr-tj a:hover {
  border-color: var(--tekst);
}

.pr-tj-lenker .pil {
  width: 16px;
  height: 16px;
}

.pr-om .knapper {
  margin-top: 6px;
}

/* the other photos, each whole and in its own proportions */
.pr-galleri-rutenett {
  columns: 3 260px;
  column-gap: var(--gap);
}

.pr-foto {
  break-inside: avoid;
  margin: 0 0 var(--gap);
}

.pr-naboer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 20px 32px;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid var(--linje-mork);
}

.side-seksjon.pr-naboer {
  max-width: none;
}

.pr-nabo {
  display: grid;
  gap: 8px;
  justify-items: start;
  text-decoration: none;
}

.pr-nabo .overlinje {
  margin-bottom: 0;
}

.pr-nabo strong {
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: var(--vekt-tekst);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pr-nabo:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pr-nabo-neste {
  justify-items: end;
  text-align: right;
}

/* ---------- the areas page ---------- */
.omr-side {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.omr-side > * {
  max-width: none;
  margin: 0;
}

.omr-kart {
  position: sticky;
  top: calc(var(--meny-h) + 24px);
  margin: 0;
}

.omr-kart-lag {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--svartbeis);
}

/* held still beside the list on wide screens: never taller than the window under the menu (1210 x 654 and 1440 x 779 too);
   the width follows from the map's own shape (--kart-ar), so the places stay on their towns */
@media (min-width: 1024px) {
  .omr-kart-lag {
    width: min(100%, calc((100svh - var(--meny-h) - 96px) * var(--kart-ar, 0.8)));
  }
}

.omr-kart-lag img {
  display: block;
  width: 100%;
  height: auto;
}

.omr-sted {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 7px;
  transform: translate(-5px, -50%);
  color: var(--tekst-lys);
  font-size: 13px;
  font-weight: var(--vekt-sterk);
  line-height: 1;
  white-space: nowrap;
  text-shadow: var(--skygge-kart);
}

.omr-sted i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--furu);
  box-shadow: 0 0 0 4px var(--furu-ring);
}

.omr-sted.hjem i {
  background: var(--kalk);
}

.omr-kart figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--tekst-2);
}

.omr-liste {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
}

.omr-del {
  display: grid;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--linje-mork);
}

.omr-del h2 {
  font-size: clamp(28px, 2.6vw, 40px);
}

.omr-tj {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.omr-sitat {
  margin: 4px 0 0;
  padding: 18px 22px;
  border-left: 2px solid var(--furu);
  background: var(--kalk-2);
}

.omr-sitat blockquote {
  margin: 0;
}

.omr-sitat figcaption {
  margin-top: 8px;
  font-size: var(--liten);
  color: var(--tekst-2);
}

/* ---------- privacy ---------- */
.pv-side {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.pv-side > * {
  max-width: none;
  margin: 0;
}

.pv-innhold {
  position: sticky;
  top: calc(var(--meny-h) + 24px);
}

.pv-innhold ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.2em;
}

.pv-tekst {
  display: grid;
  gap: 30px;
  max-width: 44em;
}

.pv-del {
  display: grid;
  gap: 10px;
  scroll-margin-top: calc(var(--meny-h) + 16px);
}

.pv-del h2 {
  font-size: clamp(24px, 2vw, 30px);
}

.pv-dato {
  font-size: var(--liten);
  color: var(--tekst-2);
}

@media (max-width: 1023px) {
  .pr-kort-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pr-side,
  .omr-side,
  .pv-side {
    grid-template-columns: 1fr;
  }

  .omr-kart,
  .pv-innhold {
    position: static;
  }

  .omr-kart {
    max-width: 620px;
  }
}

@media (max-width: 767px) {
  .sp-liste {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 599px) {
  .pr-kort-liste {
    grid-template-columns: 1fr;
  }

  .pr-naboer {
    grid-template-columns: 1fr;
  }

  .pr-nabo-neste {
    justify-items: start;
    text-align: left;
  }

  .pr-alle {
    order: 3;
    justify-self: start;
  }
}