/* --- Forsidens afsnit om Den Forpligtede Viden -----------------------------

   Overskriften var spærret til 8 anslag ved op til 4,5 rem. «Den Forpligtede
   Viden» er 19 tegn, så den blev tvunget over tre linjer i kæmpestørrelse og
   lagde sig tungt i venstre side, mens listen ved siden af var let og lav.

   Her sættes overskriften i to linjer i en mindre grad, spalterne stilles op
   fra toppen i stedet for at flyde om midten, og listen får de samme
   reaktioner som resten af siden bruger.
--------------------------------------------------------------------------- */

.obligatory-layout {
    /* Fra midten til toppen: overskriften begynder, hvor listen begynder,
       i stedet for at svæve ud for dens midte. */
    align-items: start;
    gap: clamp(2.5rem, 4.5vw, 4.5rem);
}

.obligatory-intro {
    position: relative;
    padding-right: 0;
}

/* Guldstregen over etiketten. Den samme markør som sidetopperne bruger, så
   afsnittet hører hjemme i sidens sprog. */
.obligatory-intro::before {
    content: "";
    display: block;
    width: 82px;
    height: 1px;
    margin-bottom: 1.35rem;
    background: linear-gradient(90deg, #e7bd70, rgba(231, 189, 112, 0));
}

.obligatory-intro h2 {
    /* 11 anslag lader «Den Forpligtede» stå på én linje og «Viden» på den
       næste — to linjer i stedet for tre, og i en grad der ikke overdøver
       listen ved siden af. */
    max-width: 11ch;
    margin-block: .55rem 1.1rem;
    font-size: clamp(2.1rem, 3.2vw, 3.2rem);
    line-height: 1.02;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.obligatory-intro > p {
    max-width: 38ch;
}

/* Mønstret drejer meget langsomt. Det står bagved på 14% og skal knap kunne
   ses — det er der for at hjørnet ikke er helt dødt. */
.mini-pattern {
    animation: obligatory-pattern-turn 90s linear infinite;
}

@keyframes obligatory-pattern-turn {
    to {
        transform: rotate(360deg);
    }
}

/* --- Listen ----------------------------------------------------------------

   Rækkerne skiftede før padding ved hover, så teksten hoppede til siden og
   linjerne kunne ombrydes undervejs. Nu står teksten stille, og det er en
   guldstreg i kanten og pilen, der svarer.
--------------------------------------------------------------------------- */

.knowledge-explorer a {
    position: relative;
    isolation: isolate;
    transition: background-color .24s ease, color .24s ease;
}

.knowledge-explorer a:hover {
    /* Ophæver springet i den gamle regel. */
    padding-left: .9rem;
}

/* Guldstregen i kanten vokser op, når man peger på rækken. */
.knowledge-explorer a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 2px;
    background: #d9aa62;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .26s cubic-bezier(.2, .72, .2, 1);
}

.knowledge-explorer a:hover::before,
.knowledge-explorer a:focus-visible::before {
    transform: scaleY(1);
}

.knowledge-explorer a span,
.knowledge-explorer a strong,
.knowledge-explorer a b {
    transition: transform .24s cubic-bezier(.2, .72, .2, 1), color .24s ease;
}

.knowledge-explorer a:hover strong,
.knowledge-explorer a:focus-visible strong {
    transform: translateX(6px);
}

.knowledge-explorer a:hover b,
.knowledge-explorer a:focus-visible b {
    transform: translateX(4px);
    color: #e7bd70;
}

.knowledge-explorer a:hover span,
.knowledge-explorer a:focus-visible span {
    color: #f0c97d;
}

@media (max-width: 1000px) {
    .obligatory-intro h2 {
        max-width: none;
    }

    .obligatory-intro::before {
        margin-bottom: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mini-pattern {
        animation: none;
    }

    .knowledge-explorer a::before,
    .knowledge-explorer a span,
    .knowledge-explorer a strong,
    .knowledge-explorer a b {
        transition: none;
    }
}