/* ==========================================================
   HØJMANN DIGITAL – SOLUTIONS
   Anvendes af: /loesninger.php
   Ansvar: Løsningsoversigt, projektnavigation og caseudsnit.
   Designprincip: Formålet vises før teknologien.
   ========================================================== */

.solutions-page h1,.solutions-page h2{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.045em}
.solutions-hero{padding:104px 0 118px}
.solutions-hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.5fr);gap:90px;align-items:end}
.solutions-hero h1{max-width:980px;font-size:clamp(4.4rem,7.6vw,8.4rem);line-height:.92}
.solutions-hero__intro{max-width:70ch;margin:34px 0 0;color:var(--body-text);font-size:1.12rem;line-height:1.82}
.solutions-hero__note{padding:30px;color:var(--paper);background:var(--terracotta);transform:rotate(1.2deg);box-shadow:0 20px 46px rgba(41,39,32,.15)}
.solutions-hero__note span,.solution-story__factcard>span{display:block;margin-bottom:16px;color:#fff4ec;font-size:.68rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.solutions-hero__note strong{display:block;font-family:var(--serif);font-size:1.8rem;font-weight:500;line-height:1.12}

.solutions-overview{padding:94px 0 110px;color:var(--paper);background:var(--forest)}
.solutions-overview__heading{display:grid;grid-template-columns:1fr .55fr;gap:72px;align-items:end;margin-bottom:52px}
.solutions-overview__heading h2,.solutions-closing h2{font-size:clamp(3rem,5vw,5.4rem);line-height:1}
.solutions-overview__heading>p{margin:0;color:#f1ece5;line-height:1.75}
.solutions-overview__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.solution-jump{min-height:170px;display:flex;flex-direction:column;padding:22px;color:var(--ink);background:var(--paper);text-decoration:none;box-shadow:0 16px 34px rgba(0,0,0,.14);transition:.18s}
.solution-jump:hover{transform:translateY(-5px) rotate(0);box-shadow:0 22px 44px rgba(0,0,0,.2)}
.solution-jump--1{transform:rotate(-.8deg)}.solution-jump--2{transform:translateY(10px) rotate(.6deg);background:var(--sand)}
.solution-jump--3{transform:rotate(.4deg);background:var(--terracotta);color:var(--paper)}.solution-jump--4{transform:translateY(5px) rotate(-.5deg)}
.solution-jump__number{margin-bottom:auto;color:var(--terracotta-dark);font-size:.7rem;font-weight:850;letter-spacing:.12em}
.solution-jump--3 .solution-jump__number{color:#fff4ec}
.solution-jump strong{font-family:var(--serif);font-size:1.42rem;font-weight:500;line-height:1.08}
.solution-jump small{margin-top:10px;color:inherit;font-size:.75rem;font-weight:750;line-height:1.35}

.solutions-showcase{padding:128px 0 40px}
.solution-story{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:92px;align-items:center;padding:0 0 150px;scroll-margin-top:130px}
.solution-story--reverse{grid-template-columns:minmax(340px,.85fr) minmax(0,1.15fr)}
.solution-story--reverse .solution-story__visual{order:2}
.solution-story__visual{position:relative;min-height:560px}
.solution-story__backdrop{position:absolute;inset:42px 4px 0 54px;background:var(--sand);transform:rotate(1.4deg);box-shadow:0 24px 56px rgba(41,39,32,.10)}
.solution-story__screen,.solution-system{position:absolute;inset:0 54px 64px 0;overflow:hidden;background:var(--paper);border:10px solid var(--paper);transform:rotate(-.7deg);box-shadow:0 28px 70px rgba(41,39,32,.16)}
.solution-story--reverse .solution-story__screen{inset:0 0 64px 54px;transform:rotate(.7deg)}
.solution-story__screen{margin:0}.solution-story__screen img{width:100%;height:100%;object-fit:cover;object-position:center top}
.solution-story__factcard{position:absolute;right:0;bottom:0;width:min(330px,74%);padding:26px;color:var(--paper);background:var(--forest-dark);transform:rotate(1deg);box-shadow:0 20px 44px rgba(41,39,32,.2)}
.solution-story--reverse .solution-story__factcard{right:auto;left:0;transform:rotate(-1deg)}
.solution-story__factcard strong{display:block;font-family:var(--serif);font-size:1.6rem;font-weight:500;line-height:1.12}
.solution-story__factcard ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:20px 0 0;padding:0;list-style:none;font-size:.78rem}
.solution-story__factcard li::before{content:"✓";margin-right:7px;color:#e8cbbb}
.solution-story__copy{max-width:570px}
.solution-story__meta{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.solution-story__meta>span{color:var(--terracotta-dark);font-size:.72rem;font-weight:850;letter-spacing:.13em}
.solution-story__meta em{padding:5px 10px;color:var(--paper);background:var(--terracotta);font-size:.68rem;font-style:normal;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-1deg)}
.solution-story__copy h2{font-size:clamp(3.3rem,5vw,5.8rem);line-height:.98}
.solution-story__copy>p:not(.eyebrow){margin:28px 0 32px;color:var(--body-text);font-size:1.06rem;line-height:1.82}
.solution-story__pending{display:inline-flex;padding-bottom:4px;border-bottom:1px solid var(--line);color:var(--secondary-text);font-size:.84rem;font-weight:750}

.solution-system__bar{height:54px;display:flex;align-items:center;gap:8px;padding:0 18px;background:var(--forest-dark)}
.solution-system__bar span{width:9px;height:9px;border-radius:50%;background:var(--terracotta)}
.solution-system__sidebar{position:absolute;top:54px;bottom:0;left:0;width:24%;background:var(--sand-light)}
.solution-system__content{position:absolute;top:90px;right:42px;left:30%}
.solution-system__content>span{display:block;height:18px;margin-bottom:18px;background:var(--sand)}
.solution-system__content>span:nth-child(2){width:72%}.solution-system__content>span:nth-child(3){width:88%}
.solution-system__content div{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:42px}
.solution-system__content i{min-height:150px;background:var(--warm-white);border:1px solid var(--line)}

.solutions-closing{padding:116px 0;color:var(--paper);background:var(--terracotta)}
.solutions-closing__inner{max-width:980px}.solutions-closing h2{max-width:17ch}
.solutions-closing__inner>p:not(.eyebrow){max-width:66ch;margin:30px 0 36px;color:#fff7f1;font-size:1.08rem;line-height:1.78}

@media(max-width:1100px){
 .solutions-overview__grid{grid-template-columns:repeat(3,1fr)}
 .solution-story,.solution-story--reverse{grid-template-columns:1fr;gap:58px}
 .solution-story--reverse .solution-story__visual{order:0}
 .solution-story__copy{max-width:760px}
}
@media(max-width:760px){
 .solutions-hero,.solutions-overview,.solutions-showcase,.solutions-closing{padding-top:74px;padding-bottom:74px}
 .solutions-hero__grid,.solutions-overview__heading{grid-template-columns:1fr;gap:42px}
 .solutions-hero h1{font-size:clamp(3.3rem,15vw,5.3rem)}
 .solutions-overview__grid{grid-template-columns:repeat(2,1fr)}
 .solution-jump{min-height:150px;padding:18px}
 .solution-story{padding-bottom:96px}
 .solution-story__visual{min-height:470px}
 .solution-story__screen,.solution-system{inset:0 18px 78px 0;border-width:6px}
 .solution-story__backdrop{inset:30px 0 18px 26px}
 .solution-story__factcard,.solution-story--reverse .solution-story__factcard{right:0;left:auto;width:min(88%,330px);padding:22px}
 .solution-story__copy h2{font-size:clamp(3rem,13vw,4.8rem)}
}


/* ==========================================================
   VERSION 2 – DYREVÆRNET OG VARIEREDE PROJEKTKORT
   ========================================================== */

.solution-jump--group {
  grid-column: span 2;
  background: var(--terracotta);
  color: var(--paper);
}

.solution-jump--group .solution-jump__number {
  color: #fff4ec;
}

.solution-story__factcard--forest {
  color: var(--paper);
  background: var(--forest-dark);
}

.solution-story__factcard--terracotta {
  color: var(--paper);
  background: var(--terracotta);
}

.solution-story__factcard--sand {
  color: var(--ink);
  background: var(--sand);
}

.solution-story__factcard--paper {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
}

.solution-story__factcard--sand > span,
.solution-story__factcard--paper > span {
  color: var(--terracotta-dark);
}

.solution-story__factcard--sand li::before,
.solution-story__factcard--paper li::before {
  color: var(--terracotta-dark);
}

.solution-story__factcard--compact {
  width: min(290px, 68%);
  padding: 24px;
}

.dyrevaernet-group {
  margin: 10px 0 150px;
  padding: 72px;
  scroll-margin-top: 130px;
  background: var(--sand-light);
  border: 1px solid var(--line);
  box-shadow: 0 26px 66px rgba(41,39,32,.09);
}

.dyrevaernet-group__intro {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 86px;
  align-items: start;
  margin-bottom: 54px;
}

.dyrevaernet-group__intro h2 {
  font-size: clamp(3.8rem, 6vw, 6.8rem);
  line-height: .96;
}

.dyrevaernet-group__intro > div:last-child > p {
  margin: 0;
  color: var(--body-text);
  font-size: 1.08rem;
  line-height: 1.82;
}

.dyrevaernet-group__intro aside {
  width: min(360px, 100%);
  margin: 30px 0 0 auto;
  padding: 22px 24px;
  color: var(--paper);
  background: var(--terracotta);
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.2;
  transform: rotate(-1deg);
  box-shadow: 0 16px 34px rgba(41,39,32,.14);
}

.dyrevaernet-group__systems {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.dyrevaernet-system {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px;
  background: var(--paper);
  box-shadow: 0 18px 40px rgba(41,39,32,.10);
}

.dyrevaernet-system--dyrebase {
  transform: rotate(-.45deg);
}

.dyrevaernet-system--dvbasen {
  transform: translateY(18px) rotate(.45deg);
}

.dyrevaernet-system__heading h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}

.dyrevaernet-system__heading > strong {
  display: block;
  margin-top: 12px;
  color: var(--terracotta-dark);
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.dyrevaernet-system figure {
  margin: 28px 0 24px;
  overflow: hidden;
  background: var(--warm-white);
  border: 7px solid var(--warm-white);
  box-shadow: 0 16px 34px rgba(41,39,32,.13);
}

.dyrevaernet-system figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center top;
}

.dyrevaernet-system > p {
  margin: 0;
  color: var(--body-text);
  line-height: 1.72;
}

.dyrevaernet-system > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 24px 0 28px;
  padding: 0;
  list-style: none;
  font-size: .82rem;
  font-weight: 720;
}

.dyrevaernet-system > ul li::before {
  content: "✓";
  margin-right: 7px;
  color: var(--terracotta-dark);
}

.dyrevaernet-system .solution-story__pending {
  margin-top: auto;
  align-self: flex-start;
}

@media(max-width:1100px) {
  .dyrevaernet-group {
    padding: 54px;
  }

  .dyrevaernet-group__intro {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media(max-width:760px) {
  .solution-jump--group {
    grid-column: span 2;
  }

  .dyrevaernet-group {
    margin-bottom: 96px;
    padding: 30px 22px;
  }

  .dyrevaernet-group__systems {
    grid-template-columns: 1fr;
  }

  .dyrevaernet-system--dvbasen {
    transform: rotate(.35deg);
  }

  .dyrevaernet-system {
    padding: 22px;
  }

  .dyrevaernet-system > ul {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   DISTRICTOFFICE – VIS HELE SKÆRMBILLEDET
   DistrictOffice-dashboardet er bredere end de øvrige billeder.
   Derfor må det ikke beskæres med object-fit: cover.
   ========================================================== */

#districtoffice .solution-story__screen img {
  object-fit: contain;
  object-position: left top;
  background: #eef3f5;
}


/* ==========================================================
   VERSION 3 – KATEGORIOVERBLIK
   Seks visuelle indgange til de typer af organisationer og
   virksomheder, Højmann Digital har arbejdet med.
   ========================================================== */

.solutions-overview__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.solution-category {
  min-height: 245px;
  display: flex;
  flex-direction: column;
  padding: 26px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 16px 34px rgba(0,0,0,.14);
}

.solution-category--1 {
  transform: rotate(-.55deg);
}

.solution-category--2 {
  background: var(--sand);
  transform: translateY(10px) rotate(.45deg);
}

.solution-category--3 {
  color: var(--paper);
  background: var(--terracotta);
  transform: rotate(.35deg);
}

.solution-category--4 {
  transform: translateY(5px) rotate(-.4deg);
}

.solution-category__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: auto;
}

.solution-category__number {
  color: var(--terracotta-dark);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .12em;
}

.solution-category--3 .solution-category__number {
  color: #fff4ec;
}

.solution-category__top img {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  opacity: .92;
}

.solution-category strong {
  display: block;
  max-width: 15ch;
  margin-top: 34px;
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.05;
}

.solution-category p {
  margin: 14px 0 0;
  color: inherit;
  font-size: .86rem;
  line-height: 1.55;
}

@media(max-width:1100px) {
  .solutions-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:760px) {
  .solutions-overview__grid {
    grid-template-columns: 1fr;
  }

  .solution-category {
    min-height: 210px;
  }

  .solution-category--1,
  .solution-category--2,
  .solution-category--3,
  .solution-category--4 {
    transform: none;
  }
}


/* ==========================================================
   VERSION 4 – KATEGORI PÅ HVER LØSNING
   Binder kategorierne øverst sammen med de konkrete projekter.
   ========================================================== */

.solution-story__meta {
  flex-wrap: wrap;
}

.solution-story__meta .solution-story__category {
  padding: 5px 10px;
  color: var(--forest-dark);
  background: var(--sand-light);
  border: 1px solid rgba(41,39,32,.12);
  font-size: .68rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: none;
  transform: none;
}

.solution-story__meta .solution-story__status {
  padding: 5px 10px;
  color: var(--paper);
  background: var(--terracotta);
  font-size: .68rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

.dyrevaernet-group__meta {
  margin-bottom: 18px;
}

@media(max-width:760px) {
  .solution-story__meta {
    gap: 10px;
  }
}

/* ==========================================================
   KATEGORIOVERBLIK – KONTRAST PÅ MØRKT KORT
   Gør ikonet lyst på Administration & organisation-kortet.
   ========================================================== */

.solution-category--3 .solution-category__top img {
  filter: brightness(0) invert(1);
  opacity: .88;
}