/* ====================================================================
   CASE-LAYOUT – gælder ALLE cases (body-klassen .ht-casev2 sættes på
   enkelt-visningen af post-typen "case", se inc/case-designforslag.php).
   Bemærk: tal-listen .ht-list-numbered bruges i nyheder og må IKKE ændres –
   trinnene herunder er et selvstændigt element (.ht-case-trin).
   ==================================================================== */

/* Læsetid i bylinen */
.ht-case-readtime { color: inherit; }

/* ── "Kort fortalt": opsummeringskort i stedet for fed brødtekst ─── */
.ht-casev2 .entry-content > .ht-case-resume {
  /* content-box: de 710 px er selve TEKSTEN, og fladen lægger sig uden om,
     så teksten i kortet flugter med brødteksten. Topbilledet er i stedet
     rykket ud til kortets yderkant (se reglen for ct-featured-image). */
  box-sizing: content-box;
  max-width: var(--ht-artikel-spalte, 710px);
  margin: 1rem auto 2.4rem;
  padding: 1.35rem 1.7rem 1.45rem;
  background: #e8f5ee;
  border-radius: 14px;
}
.ht-casev2 .entry-content .ht-case-resume p {
  margin: 0 !important;
  line-height: 1.75;
  color: #24382f;
}
.ht-casev2 .entry-content .ht-case-resume p + p { margin-top: .8rem !important; }
/* Nogle cases bruger klassen ht-case-intro på resuméet – den skal følge
   kortets typografi som de øvrige. */
.ht-casev2 .entry-content .ht-case-resume .ht-case-intro {
  font-size: inherit;
  font-weight: 400;
}
@media (max-width: 789px) {
  /* På smalle skærme er der ikke plads til at lade fladen stikke ud i
     sidemargenen. Opsummeringen markeres i stedet med tynde streger over og
     under, og kortet får samme sidemargen som brødteksten (Blocksys spalte
     er 88vw op til 689px og 90vw derover), så teksten flugter præcis. */
  .ht-casev2 .entry-content > .ht-case-resume {
    box-sizing: border-box;
    /* !important: reglen for artikelspalten i style.css har højere
       specificitet (mange :not()-led) og ville ellers sætte margin til auto. */
    width: auto !important;
    max-width: none !important;
    margin: .6rem 6vw 2rem !important;
    padding: 1rem 0 1.1rem;
    background: none;
    border-radius: 0;
    border-top: 1px solid rgba(9,90,66,.16);
    border-bottom: 1px solid rgba(9,90,66,.16);
  }
}
@media (min-width: 690px) and (max-width: 789px) {
  .ht-casev2 .entry-content > .ht-case-resume { margin-left: 5vw !important; margin-right: 5vw !important; }
}

/* ── Trin: nyt element til "Hvordan gjorde de?" ──────────────────── */
/* .ht-list-numbered (bruges andre steder på sitet) er urørt. */
.ht-casev2 .entry-content ol.ht-case-trin {
  list-style: none;
  counter-reset: httrin;
  max-width: var(--ht-artikel-spalte, 710px);
  margin: 2rem auto 2.4rem;
  padding: 0;
}
.ht-casev2 .entry-content ol.ht-case-trin > li {
  counter-increment: httrin;
  position: relative;
  margin: 0;
  padding: 0 0 1.9rem 4.1rem;
  line-height: 1.72;
  color: #3d564b;
}
.ht-casev2 .entry-content ol.ht-case-trin > li:last-child { padding-bottom: 0; }
.ht-casev2 .entry-content ol.ht-case-trin > li::before {
  content: counter(httrin);
  position: absolute;
  left: 0;
  top: -.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: #095A42;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1;
}
.ht-casev2 .entry-content ol.ht-case-trin > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: 3.1rem;
  bottom: .3rem;
  width: 2px;
  transform: translateX(-1px);
  background: linear-gradient(#cfe7da, rgba(207,231,218,.15));
}
.ht-casev2 .entry-content ol.ht-case-trin > li > strong {
  display: block;
  margin-bottom: .3rem;
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: #0a1a13;
}
.ht-casev2 .entry-content ol.ht-case-trin > li > br { display: none; }
@media (max-width: 640px) {
  .ht-casev2 .entry-content ol.ht-case-trin > li { padding-left: 3.3rem; }
  .ht-casev2 .entry-content ol.ht-case-trin > li::before { width: 2.3rem; height: 2.3rem; font-size: .98rem; }
  .ht-casev2 .entry-content ol.ht-case-trin > li:not(:last-child)::after { left: 1.15rem; top: 2.6rem; }
}

/* ── Snubletråde: ingen streger (brugerønske) – afsnittene står som
      almindelig brødtekst, hvor den fede indledning bærer opdelingen. ── */
.ht-casev2 .entry-content .ht-case-snubler { margin: 0; }
.ht-casev2 .entry-content .ht-case-snubler p strong { color: #0a1a13; }

/* ── "Om virksomheden" som datablad ──────────────────────────────── */
.ht-casev2 .entry-content .ht-case-afrunding p {
  display: grid;
  grid-template-columns: minmax(8rem, 10.5rem) 1fr;
  gap: .1rem 1.4rem;
  /* Beholder den 88%/750px-centrerede spalte fra style.css – gruppen er
     brudt ud i fuld bredde, så uden dette lægger rækkerne sig helt ud til
     skærmkanten. */
  width: 88%;
  max-width: var(--ht-artikel-spalte, 710px);
  margin: 0 auto !important;
  padding: .38rem 0;
  font-size: .98rem;
  line-height: 1.6;
}
.ht-casev2 .entry-content .ht-case-afrunding p:last-child { padding-bottom: 0; }
/* Ingen skillelinjer i faktaboksen (brugerønske) – kun rækker. */
.ht-casev2 .entry-content .ht-case-afrunding p:first-of-type { padding-top: 0; }
.ht-casev2 .entry-content .ht-case-afrunding p > strong { color: #095A42; font-weight: 700; }
@media (max-width: 640px) {
  .ht-casev2 .entry-content .ht-case-afrunding p { grid-template-columns: 1fr; gap: .15rem; }
}
/* Gruppen er ikke længere sidste element (afsnittet "Videre herfra" følger
   efter), så den grønne boks skal selv holde afstand nedad. */
.ht-casev2 .entry-content .ht-case-afrunding { padding-bottom: 2rem; margin-bottom: 0; }

/* ── Videre herfra: flere cases + kontakt ────────────────────────── */
.ht-casev2 .entry-content .ht-case-videre { margin: 2.8rem auto 0; }
.ht-casev2 .ht-case-videre-kicker {
  margin: 0 0 .9rem !important;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #095A42;
}
.ht-casev2 .ht-case-videre-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ht-casev2 .ht-case-videre-grid a {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(9,90,66,.12);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ht-casev2 .ht-case-videre-grid a:hover { transform: translateY(-3px); border-color: rgba(9,90,66,.28); }
.ht-casev2 .ht-case-videre-img { display: block; }
.ht-casev2 .ht-case-videre-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.25,.8,.25,1);
}
.ht-casev2 .ht-case-videre-grid a:hover .ht-case-videre-img img { transform: scale(1.04); }
.ht-casev2 .ht-case-videre-tekst { display: block; padding: 1rem 1.2rem 1.15rem; }
.ht-casev2 .ht-case-videre-grid strong { display: block; font-size: 1.02rem; line-height: 1.35; color: #0a1a13; }


.ht-casev2 .ht-case-videre-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 1rem;
  padding: 1.25rem 1.4rem;
  background: #095A42;
  border-radius: 16px;
  color: #fff;
}
.ht-casev2 .ht-case-videre-cta p { margin: 0 !important; font-size: 1rem; line-height: 1.5; color: #fff; }
.ht-casev2 .ht-case-videre-cta a {
  flex-shrink: 0;
  padding: .62rem 1.15rem;
  background: #fff;
  border-radius: 999px;
  color: #095A42;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .ht-casev2 .ht-case-videre-cta { flex-direction: column; align-items: flex-start; }
}

/* En anelse mere luft over citatet (brugerønske) – 64 px → 80 px. */
.ht-casev2 .entry-content .ht-case-quote { margin-top: 5rem; margin-bottom: 2.75rem; }
/* Ens luft mellem de store blokke i bunden – samme rytme som sektionsskiftene. */
.ht-casev2 .entry-content .ht-case-raad { margin-top: 4rem; margin-bottom: 4rem; }
.ht-casev2 .entry-content .ht-case-afrunding { margin-top: 4rem; padding-top: 2rem; padding-bottom: 2.4rem; }
.ht-casev2 .entry-content .ht-case-videre { margin-top: 4rem; }

@media (max-width: 640px) {
  .ht-casev2 .ht-case-videre-grid { grid-template-columns: 1fr; }
}

/* ── Skift mellem sektioner: markeres udelukkende med luft. ── */
.ht-casev2 .entry-content > .ht-case-section-heading {
  position: relative;
  margin-top: 2.8rem;
  padding-top: 2.2rem;
}
/* Ingen streg mellem sektionerne (brugerønske) – kun luften bærer skiftet. */
/* Første rubrik ("Kort fortalt") står lige under topbilledet – ingen streg. */
.ht-casev2 .entry-content > .ht-case-section-heading:first-of-type {
  margin-top: 0;
  padding-top: 0;
}
.ht-casev2 .entry-content > .ht-case-section-heading:first-of-type::before { display: none; }

/* "Kort fortalt": rubrik og tekst er ÉT element inde i kortet. Rubrikken må
   derfor hverken have streg over (sektionsskift) eller grøn understregning. */
.ht-casev2 .entry-content .ht-case-resume .ht-case-section-heading {
  margin: 0 0 .85rem;
  padding: 0;
}
.ht-casev2 .entry-content .ht-case-resume .ht-case-section-heading::before { display: none; }
.ht-casev2 .entry-content .ht-case-resume .ht-case-section-heading h2 {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.ht-casev2 .entry-content > .ht-case-resume { padding: 1.5rem 1.7rem 1.6rem; }

/* Balance omkring opsummeringen: luften over kortet (fra topbilledet) og
   luften ned til første rubrik skal stå i forhold til hinanden – ca. 60 px
   over og 80 px under, så kortet hører til toppen, men skiftet stadig ses. */
.ht-casev2 figure.ct-featured-image {
  margin-bottom: 3.75rem; /* 60 px op til kortet */
  /* Venstrekanten flugter med opsummeringskortets yderkant, ikke med
     tekstspalten: kortets indvendige luft er 1.7rem. */
  margin-left: max(1.5rem, calc((100% - var(--ht-artikel-spalte, 710px)) / 2 - 1.7rem));
}
/* Blocksy rykker selve billedet 20 px længere til venstre end figuren
   (margin-left:-20px på .ct-media-container). Det nulstilles her, ellers
   flugter den SYNLIGE billedkant ikke med kortet. */
.ht-casev2 figure.ct-featured-image .ct-media-container { margin-left: 0 !important; }
.ht-casev2 .entry-content > .ht-case-resume { margin-top: 0; margin-bottom: 0; }
@media (max-width: 640px) {
  /* Samme forhold i det mindre format: ca. 40 px over, 56 px under. */
  .ht-casev2 figure.ct-featured-image { margin-bottom: 2.5rem; }
  .ht-casev2 .entry-content > .ht-case-section-heading {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }
}

/* Mindre luft under citatet end over (80 px over, 44 px under). */
.ht-casev2 .entry-content .ht-case-quote + .ht-case-raad { margin-top: 2.75rem; }

/* Mobil: opsummeringen har ingen vandret luft, så teksten flugter med
   brødteksten (skal stå efter desktop-reglen for at vinde i kaskaden). */
@media (max-width: 789px) {
  .ht-casev2 .entry-content > .ht-case-resume { padding: 1.15rem 0 1.25rem; }
}

/* Mobil/tablet: topbilledet følger samme sidemargen som spalten, så det
   flugter med opsummeringen (6vw op til 689 px, 5vw derover). */
@media (max-width: 789px) {
  .ht-casev2 figure.ct-featured-image { margin-left: 6vw !important; margin-right: 6vw !important; }
}
@media (min-width: 690px) and (max-width: 789px) {
  .ht-casev2 figure.ct-featured-image { margin-left: 5vw !important; margin-right: 5vw !important; }
}