/* ==========================================================================
   Kakle – byggeklosser for innholdssider

   Sidene kom fra Elementor som én lang spalte med overskrifter, avsnitt og
   bilder. Teksten er god, men den hadde ingen form: ingen seksjoner, ingen
   rangering, ingen pust. Her er klossene vi bygger den opp igjen med.

   Alt er laget for aa staa inne i .sideinnhold, som er en lesespalte paa
   74 tegn. Klosser som skal ha mer plass bryter ut av den selv.
   ========================================================================== */

/* En kloss som skal vaere bredere enn lesespalten bryter ut av den.
   Da slipper vi aa bygge om malen for hver seksjonstype. */
.sideinnhold > .bred {
    width: min(var(--bredde), 100%);
    max-width: none;
    margin-inline: calc(50% - min(var(--bredde), 100vw - var(--gutter) * 2) / 2);
    margin-left: 50%;
    transform: translateX(-50%);
}

/* ---------- 1. Seksjon ----------------------------------------------------
   En gruppe innhold med egen tittel. Avstanden mellom seksjoner er stoerre
   enn avstanden inne i dem - det er det som gjor at oyet ser grupper.
   ------------------------------------------------------------------------ */
.sideinnhold .seksjon-h {
    margin: var(--r9) 0 var(--r5);
}
.sideinnhold .seksjon-h:first-child { margin-top: 0; }
.sideinnhold .seksjon-h h2 {
    margin: 0 0 var(--r2);
    font-family: var(--display);
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    line-height: 1.22;
    letter-spacing: -.01em;
    color: var(--navy);
}
.sideinnhold .seksjon-h p {
    margin: 0;
    font-size: 1.06rem;
    color: var(--tekst-svak);
    max-width: 62ch;
}
.sideinnhold .seksjon-h__merke {
    display: inline-block;
    margin-bottom: var(--r3);
    padding: 5px 13px;
    border-radius: 100px;
    background: var(--gronn-lys);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gronn-dyp);
}

/* ---------- 2. Bilde og tekst side om side ------------------------------- */
.medierad {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: center;
    gap: var(--r7);
    margin: var(--r6) 0 var(--r8);
}
.medierad--omvendt .medierad__bilde { order: 2; }
.medierad__bilde {
    margin: 0;
    border-radius: var(--radius-l);
    overflow: hidden;
    background: var(--sand);
}
.medierad__bilde img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
}
.medierad__tekst > :first-child { margin-top: 0; }
.medierad__tekst > :last-child { margin-bottom: 0; }
.medierad__tekst h2,
.medierad__tekst h3 { margin-top: 0; }

/* ---------- 3. Kort i rutenett ------------------------------------------- */
.kortrad {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--r4);
    margin: var(--r5) 0 var(--r8);
    list-style: none;
    padding: 0;
}
.infokort {
    display: grid;
    align-content: start;
    gap: var(--r2);
    margin: 0;
    padding: var(--r5);
    background: var(--hvit);
    border: 1px solid var(--kant);
    border-radius: var(--radius-l);
    box-shadow: var(--skygge-s);
    transition: border-color var(--fart), box-shadow var(--fart), transform var(--fart);
}
.infokort:hover {
    border-color: var(--gronn);
    box-shadow: var(--skygge-m);
    transform: translateY(-2px);
}
.infokort__ikon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: var(--r2);
    border-radius: var(--radius-m);
    background: var(--gronn-lys);
    color: var(--gronn-dyp);
}
.infokort__ikon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.infokort h3 {
    margin: 0;
    font-family: var(--ui);
    font-size: 1.04rem;
    font-weight: 600;
    color: var(--navy);
}
.infokort p {
    margin: 0;
    font-size: .93rem;
    line-height: 1.55;
    color: var(--tekst-svak);
}
.infokort a { font-weight: 600; }

/* Kortet som er en lenke i sin helhet. */
a.infokort { text-decoration: none; }
a.infokort:hover { color: inherit; }

/* ---------- 4. Tall som sier noe ----------------------------------------- */
.tallrad {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--r4);
    margin: var(--r6) 0 var(--r8);
    padding: var(--r6) var(--r5);
    list-style: none;
    background: linear-gradient(160deg, var(--gronn-lys) 0%, var(--sand) 100%);
    border-radius: var(--radius-l);
}
.tallrad li { margin: 0; text-align: center; }
.tallrad strong {
    display: block;
    font-family: var(--display);
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    font-weight: 900;
    line-height: 1.05;
    color: var(--navy);
}
.tallrad span {
    display: block;
    margin-top: var(--r1);
    font-size: .88rem;
    line-height: 1.4;
    color: var(--tekst-svak);
}

/* ---------- 5. Sitat ------------------------------------------------------ */
.sitatrad {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--r4);
    margin: var(--r5) 0 var(--r8);
    list-style: none;
    padding: 0;
}
.sitat {
    display: grid;
    align-content: start;
    gap: var(--r3);
    margin: 0;
    padding: var(--r6) var(--r5);
    background: var(--hvit);
    border: 1px solid var(--kant);
    border-radius: var(--radius-l);
    box-shadow: var(--skygge-s);
}
.sitat__hermetegn {
    font-family: var(--display);
    font-size: 2.6rem;
    font-weight: 900;
    line-height: .6;
    color: var(--gronn);
}
.sitat p {
    margin: 0;
    font-size: .98rem;
    line-height: 1.65;
    color: var(--tekst);
}
.sitat footer {
    display: flex;
    align-items: center;
    gap: var(--r3);
    padding-top: var(--r3);
    border-top: 1px solid var(--kant);
    font-size: .88rem;
}
.sitat cite {
    font-style: normal;
    font-weight: 600;
    color: var(--navy);
}
.sitat footer span { color: var(--tekst-svak); }

/* ---------- 6. Prisliste -------------------------------------------------- */
.prisliste {
    margin: var(--r5) 0 var(--r6);
    padding: 0;
    list-style: none;
    background: var(--hvit);
    border: 1px solid var(--kant);
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: var(--skygge-s);
}
.prisliste li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--r4);
    margin: 0;
    padding: var(--r4) var(--r5);
    border-top: 1px solid var(--kant);
}
.prisliste li:first-child { border-top: 0; }
.prisliste strong {
    font-weight: 500;
    color: var(--tekst);
}
.prisliste span {
    font-family: var(--display);
    font-size: 1.14rem;
    font-weight: 900;
    color: var(--navy);
    white-space: nowrap;
}
.prisliste em {
    display: block;
    font-style: normal;
    font-size: .85rem;
    color: var(--tekst-svak);
}

/* ---------- 7. Trinn ------------------------------------------------------ */
.trinnrad {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--r5);
    margin: var(--r5) 0 var(--r8);
    padding: 0;
    list-style: none;
    counter-reset: trinn;
}
.trinnrad li {
    margin: 0;
    padding-top: var(--r5);
    border-top: 2px solid var(--gronn-lys);
    counter-increment: trinn;
}
.trinnrad li::before {
    content: counter(trinn);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: var(--r3);
    border-radius: 50%;
    background: var(--navy);
    color: var(--tekst-hvit);
    font-size: .88rem;
    font-weight: 700;
}
.trinnrad strong {
    display: block;
    margin-bottom: var(--r2);
    font-size: 1.02rem;
    color: var(--navy);
}
.trinnrad p { margin: 0; font-size: .93rem; color: var(--tekst-svak); }

/* ---------- 8. Oppfordring ------------------------------------------------ */
.oppfordring {
    display: grid;
    gap: var(--r4);
    justify-items: start;
    margin: var(--r8) 0;
    padding: var(--r7) var(--r6);
    background: var(--navy);
    border-radius: var(--radius-l);
    color: var(--tekst-hvit);
}
.oppfordring h2,
.oppfordring h3 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    color: var(--tekst-hvit);
}
.oppfordring p {
    margin: 0;
    color: rgba(255, 255, 255, .78);
    max-width: 54ch;
}
.oppfordring__knapper { display: flex; flex-wrap: wrap; gap: var(--r3); }
.oppfordring a {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    padding: 0 var(--r6);
    border-radius: 100px;
    background: var(--gronn);
    color: var(--tekst-hvit);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--fart), transform var(--fart);
}
.oppfordring a:hover { background: var(--gronn-hover); color: var(--tekst-hvit); transform: translateY(-1px); }
.oppfordring a.er-rolig {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .35);
}
.oppfordring a.er-rolig:hover { background: rgba(255, 255, 255, .1); border-color: var(--hvit); }

/* ---------- 9. Galleri ---------------------------------------------------- */
.galleri-rutenett {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--r3);
    margin: var(--r5) 0 var(--r8);
    padding: 0;
    list-style: none;
}
.galleri-rutenett li { margin: 0; }
.galleri-rutenett img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin: 0;
    border-radius: var(--radius-m);
    background: var(--sand);
    transition: transform var(--fart);
}
.galleri-rutenett li:hover img { transform: scale(1.02); }

/* ---------- 10. Presseoppslag -------------------------------------------- */
.presserad {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--r4);
    margin: var(--r5) 0 var(--r8);
    padding: 0;
    list-style: none;
}
.pressekort {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    background: var(--hvit);
    border: 1px solid var(--kant);
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: var(--skygge-s);
    text-decoration: none;
    transition: border-color var(--fart), box-shadow var(--fart), transform var(--fart);
}
.pressekort:hover {
    border-color: var(--gronn);
    box-shadow: var(--skygge-m);
    transform: translateY(-2px);
}
.pressekort img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
    background: var(--sand);
}
.pressekort__tekst {
    display: grid;
    align-content: start;
    gap: var(--r2);
    padding: var(--r4) var(--r5) var(--r5);
    flex: 1;
}
.pressekort__kilde {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gronn-dyp);
}
.pressekort__tittel {
    font-family: var(--display);
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--navy);
}
.pressekort__les {
    margin-top: auto;
    padding-top: var(--r2);
    font-size: .88rem;
    font-weight: 600;
    color: var(--gronn-dyp);
}

/* ---------- 11. Kontaktkort ---------------------------------------------- */
.kontaktrad {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--r4);
    margin: var(--r5) 0 var(--r7);
    padding: 0;
    list-style: none;
}
.kontaktkort {
    display: grid;
    align-content: start;
    gap: var(--r2);
    margin: 0;
    padding: var(--r5);
    background: var(--hvit);
    border: 1px solid var(--kant);
    border-radius: var(--radius-l);
    box-shadow: var(--skygge-s);
}
.kontaktkort__merke {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tekst-svak);
}
.kontaktkort strong {
    font-family: var(--display);
    font-size: 1.16rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
}
.kontaktkort a { color: var(--navy); text-decoration: none; }
.kontaktkort a:hover { color: var(--gronn-dyp); text-decoration: underline; text-underline-offset: 3px; }
.kontaktkort p { margin: 0; font-size: .9rem; color: var(--tekst-svak); line-height: 1.5; }

/* ---------- 12. Innholdsfortegnelse for lange sider ---------------------- */
.innholdsliste {
    margin: 0 0 var(--r8);
    padding: var(--r5);
    background: var(--krem);
    border: 1px solid var(--kant);
    border-radius: var(--radius-l);
}
.innholdsliste h2 {
    margin: 0 0 var(--r3);
    font-family: var(--ui);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tekst-svak);
}
.innholdsliste ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--r2) var(--r5);
    counter-reset: punkt;
}
.innholdsliste li { margin: 0; counter-increment: punkt; }
.innholdsliste a {
    display: flex;
    gap: var(--r2);
    font-size: .93rem;
    color: var(--navy);
    text-decoration: none;
}
.innholdsliste a::before {
    content: counter(punkt) '.';
    color: var(--gronn-dyp);
    font-weight: 600;
}
.innholdsliste a:hover { color: var(--gronn-dyp); text-decoration: underline; text-underline-offset: 3px; }

/* Overskriftene de peker til maa ikke gjemme seg bak den faste headeren. */
.sideinnhold h2[id],
.sideinnhold h3[id] { scroll-margin-top: calc(var(--topp-h, 172px) + var(--r4)); }

/* ---------- 13. Merknadsboks --------------------------------------------- */
.merknad {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: var(--r3);
    margin: var(--r5) 0;
    padding: var(--r4) var(--r5);
    background: var(--gronn-lys);
    border: 1px solid var(--sand-mork);
    border-radius: var(--radius-m);
}
.merknad svg {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    fill: none;
    stroke: var(--gronn-dyp);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.merknad p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--tekst); }
.merknad p + p { margin-top: var(--r2); }

@media (max-width: 720px) {
    .sideinnhold .seksjon-h { margin-top: var(--r8); }
    .medierad { gap: var(--r5); margin-bottom: var(--r7); }
    .medierad--omvendt .medierad__bilde { order: 0; }
    .oppfordring { padding: var(--r6) var(--r5); }
    .oppfordring a { width: 100%; justify-content: center; }
    .tallrad { padding: var(--r5) var(--r4); }
}

/* ==========================================================================
   14. Full bredde

   .sideinnhold var en lesespalte paa 74 tegn, og ALT laa inni den - ogsaa
   kort, gallerier og pressekort. De ble klemt sammen til halve bredden av
   containeren, mens det var god plass til hver side.

   Nytt forhold: spalten fyller containeren, og det er brodteksten som
   holdes smal. Tekst leses best paa rundt 70 tegn; et kortrutenett gjor
   ikke det, det skal ha plassen det kan faa.
   ========================================================================== */
.sideinnhold {
    max-width: none;
    margin-inline: 0;
}

/* Brodteksten beholder lesebredden. */
.sideinnhold > p,
.sideinnhold > h2,
.sideinnhold > h3,
.sideinnhold > h4,
.sideinnhold > h5,
.sideinnhold > ul:not([class]),
.sideinnhold > ol:not([class]),
.sideinnhold > dl,
.sideinnhold > blockquote,
.sideinnhold > figure:not([class]),
.sideinnhold > .merknad,
.sideinnhold > .seksjon-h,
.sideinnhold > .innholdsliste {
    max-width: 74ch;
}

/* Innholdsfortegnelsen taaler mer plass naar den har mange punkter. */
.sideinnhold > .innholdsliste { max-width: 100%; }

/* Komponentene bruker hele bredden. */
.sideinnhold > .medierad,
.sideinnhold > .kortrad,
.sideinnhold > .tallrad,
.sideinnhold > .sitatrad,
.sideinnhold > .trinnrad,
.sideinnhold > .galleri-rutenett,
.sideinnhold > .presserad,
.sideinnhold > .kontaktrad,
.sideinnhold > .oppfordring,
.sideinnhold > .prisliste,
.sideinnhold > .kursliste,
.sideinnhold > figure.sitat,
.sideinnhold > .wpcf7 {
    max-width: none;
    width: 100%;
}

/* Med mer plass taaler bilde-og-tekst en skjevere deling: bildet er
   illustrasjon, teksten er innholdet. */
@media (min-width: 900px) {
    .sideinnhold > .medierad {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--r8);
    }
    .sideinnhold > .medierad--omvendt {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    }
    .sideinnhold > .medierad .medierad__tekst { max-width: 62ch; }
}

/* Sitatene staar to i bredden naar det er plass. */
@media (min-width: 1000px) {
    .sideinnhold > figure.sitat { max-width: 90ch; }
}

/* Skjemaene trenger ikke hele 1320 px - de blir uleselige da. */
.sideinnhold > .wpcf7 { max-width: 860px; }

/* Den gamle utbryter-klassen trengs ikke lenger. */
.sideinnhold > .bred {
    width: auto;
    margin-left: 0;
    transform: none;
}

/* ==========================================================================
   15. Lange sider med innholdsfortegnelse i venstre kolonne

   Som en vannrett boks over teksten tok innholdsfortegnelsen mye plass og
   ga lite: ni punkter paa to rader, og saa var den ute av syne resten av
   siden. Som en kolonne ved siden av teksten foelger den med nedover, og
   man ser hele tiden hvor man er.
   ========================================================================== */
@media (min-width: 1000px) {
    .sideinnhold:has(> .innholdsliste) {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        column-gap: var(--r8);
        align-items: start;
    }

    /* Alt innhold gaar i hoyre kolonne. */
    .sideinnhold:has(> .innholdsliste) > * {
        grid-column: 2;
        max-width: 74ch;
    }

    .sideinnhold:has(> .innholdsliste) > .innholdsliste {
        grid-column: 1;
        grid-row: 1 / span 500;
        position: sticky;
        top: calc(var(--topp-h, 172px) + var(--r4));
        margin: 0;
        padding: var(--r5) var(--r4);
        max-width: none;
    }

    .sideinnhold:has(> .innholdsliste) > .innholdsliste ol {
        grid-template-columns: 1fr;
        gap: var(--r2);
    }
    .sideinnhold:has(> .innholdsliste) > .innholdsliste a { line-height: 1.4; }

    /* Komponentene far fortsatt hele hoyre kolonne. */
    .sideinnhold:has(> .innholdsliste) > .medierad,
    .sideinnhold:has(> .innholdsliste) > .kortrad,
    .sideinnhold:has(> .innholdsliste) > .tallrad,
    .sideinnhold:has(> .innholdsliste) > .sitatrad,
    .sideinnhold:has(> .innholdsliste) > .trinnrad,
    .sideinnhold:has(> .innholdsliste) > .galleri-rutenett,
    .sideinnhold:has(> .innholdsliste) > .presserad,
    .sideinnhold:has(> .innholdsliste) > .kontaktrad,
    .sideinnhold:has(> .innholdsliste) > .oppfordring,
    .sideinnhold:has(> .innholdsliste) > .prisliste { max-width: none; }
}

/* Uten :has()-stotte staar lista der den alltid har staatt - over teksten.
   Det er ikke like bra, men det virker. */