/* ============================================================================
   FORSIDEMODULER — håndskrevet CSS, ikke bygget fra SCSS
   ============================================================================

   Hvorfor denne fila finnes i stedet for en partial i scss-classic-main/:

   css/style.css er et Prepros-bygg (se scss/prepros-6.config). En regel som
   bare legges i SCSS-en havner aldri på nettstedet før noen kjører bygget for
   hånd, og det er ikke en del av deploy. Samme resonnement ligger bak
   css/beboer-portal.css, som lastes rett etter style.css av nøyaktig samme
   grunn.

   En egen fil framfor <style> inne i hver partial gir to ting:
     - admin kan lenke den, slik at forhåndsvisningen av ikon-boksene viser
       det samme som nettstedet i stedet for en egen, avvikende markup
     - koden for de tre funksjonene ligger samlet i stedet for spredt

   Lastes ETTER style.css, så override-er vinner på rekkefølge.
   Alle farger går gjennom temavariablene fra «Farger og fonter»
   (header-html.php), med en fallback som matcher standardtemaet.
   ============================================================================ */


/* ============================================================================
   1. INNHOLDSSIDER — RUTENETT  (frontpage_contentgroups_layout = grid)
   ============================================================================
   Kortene tegnes som kort — ramme, flate og svak skygge — og ikke bare som
   tekst på seksjonsbakgrunnen. Det er nødvendig fordi rutenettet arver
   bakgrunnen fra «slot A», som ofte ER --color-surface: uten rammen ville
   kortene smeltet inn i flaten og rutenettet blitt en formløs tekstvegg.
   Oppskriften er den samme som .entrance-card bruker.
   ============================================================================ */

.fcg-grid {
    padding: 4rem 0;
}

.fcg-grid__topp {
    margin-bottom: 2rem;
}

.fcg-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border-soft, rgba(16, 42, 67, .10));
    border-radius: var(--radius-base, 14px);
    box-shadow: var(--shadow-soft, 0 10px 25px rgba(15, 23, 42, .06));
    transition: transform .15s ease, box-shadow .15s ease;
}

.fcg-card__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--color-light-gray, #f3f3f3);
}

.fcg-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* flex:1 på body + margin-top:auto på foten gjør at «Les mer» havner på samme
   linje i alle kortene, selv når ingressene er ulikt lange. */
.fcg-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.4rem 1.5rem 1.6rem;
}

.fcg-card__title {
    margin: 0 0 .6rem;
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: var(--font-title, inherit);
}

.fcg-card__title a {
    color: inherit;
    text-decoration: none;
}

.fcg-card__title a:hover {
    text-decoration: underline;
}

.fcg-card__intro {
    margin: 0;
    color: var(--color-text-muted, rgba(16, 42, 67, .78));
    line-height: 1.6;
}

.fcg-card__foot {
    margin-top: auto;
    padding-top: 1rem;
}

/* Hele kortet klikkbart: .fcg-row--clickable og .fcg-block-overlay finnes
   allerede i style.css (position:relative / position:absolute;inset:0), så her
   trengs bare tilbakemeldingen ved hover. */
.fcg-card.fcg-row--clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .12);
}

.fcg-card.fcg-row--clickable:hover .fcg-card__title {
    text-decoration: underline;
}

/* Lys tekst på mørk seksjonsbakgrunn — men IKKE inne i kortene.
   ---------------------------------------------------------------------------
   style.css setter `.fcg-row--text-light { color:#fff }` og
   `.fcg-row--text-light .btn-outline-primary { color:#fff !important }`. Det er
   riktig for de tre andre layoutene, der teksten ligger rett på den mørke
   seksjonsbakgrunnen. I rutenettet ligger teksten inne i et kort som har sin
   EGEN lyse flate — der ville arven gitt hvit tekst på lys bakgrunn, altså en
   usynlig tittel og en nesten usynlig knapp.
   Vi setter derfor fargene tilbake innenfor kortet. */
.fcg-row--text-light .fcg-grid__topp,
.fcg-row--text-light .fcg-grid__topp h2 {
    color: #fff;
}

.fcg-row--text-light .fcg-card {
    color: var(--color-text, #0b1f33);
}

.fcg-row--text-light .fcg-card__title,
.fcg-row--text-light .fcg-card__title a {
    color: var(--color-text-strong, var(--color-text, #102a43));
}

.fcg-row--text-light .fcg-card__intro {
    color: var(--color-text-muted, rgba(16, 42, 67, .78));
}

.fcg-row--text-light .fcg-card .btn-outline-primary {
    color: var(--color-primary, #1b3a57) !important;
    border-color: rgba(15, 23, 42, .22);
}

.fcg-row--text-light .fcg-card .btn-outline-primary:hover,
.fcg-row--text-light .fcg-card .btn-outline-primary:focus,
.fcg-row--text-light .fcg-card .btn-outline-primary:active {
    color: #fff !important;
    border-color: var(--color-primary, #1b3a57);
}

@media (max-width: 575.98px) {
    .fcg-grid {
        padding: 2.5rem 0;
    }
}


/* ============================================================================
   3. SØKEFELT PÅ FORSIDEN  (modulnøkkel «sok»)
   ============================================================================
   Widgeten fra commonviews/sok/ har sin egen stil (max-width 460px, venstre­-
   stilt), laget for menypanelet. Den skrives dessuten bare ut ÉN gang per
   request, og menypanelet rekker å gjøre det først — så den kan vi verken
   arve fra eller regne med her. All stilen til den brede søkeraden må ligge
   i denne fila.
   ============================================================================ */

.affy-sokmodul {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.affy-sokmodul__tittel {
    margin: 0 0 .5rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.affy-sokmodul__ingress {
    margin: 0 0 1.4rem;
    color: var(--color-text-muted, rgba(16, 42, 67, .78));
}

/* Overstyrer widgetens egen .affy-sok — se kommentaren over. */
.affy-sokmodul .affy-sok {
    max-width: none;
    margin: 0;
}

.affy-sokmodul .affy-sok__skjema {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.affy-sokmodul .affy-sok__felt {
    flex: 1 1 auto;
    min-width: 0;
    height: 62px;
    padding: 0 1.25rem;
    font-size: 1.05rem;
    border-radius: var(--radius-base, 14px);
    border: 1px solid var(--color-border-soft, rgba(16, 42, 67, .14));
}

.affy-sokmodul .affy-sok__knapp {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 62px;
    padding: 0 1.6rem;
    border-radius: var(--radius-base, 14px);
}

/* Treffelista arver text-align:center fra modulen, men en trefflinje skal
   leses som en liste — ikke som en overskrift. */
.affy-sokmodul .affy-treff {
    text-align: left;
}

.affy-sokmodul--kompakt {
    max-width: 560px;
}

.affy-sokmodul--kompakt .affy-sok__felt,
.affy-sokmodul--kompakt .affy-sok__knapp {
    height: 46px;
    font-size: 1rem;
}

.affy-sokmodul__snarveier {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
}

.affy-sokmodul__snarveier a {
    display: inline-block;
    padding: .35rem .85rem;
    font-size: .9rem;
    text-decoration: none;
    border-radius: 999px;
    color: var(--color-primary, #1b3a57);
    background: var(--color-primary-soft, rgba(27, 58, 87, .08));
}

.affy-sokmodul__snarveier a:hover {
    background: var(--color-primary-soft-hover, rgba(27, 58, 87, .14));
}

@media (max-width: 575.98px) {
    /* Knappeteksten forsvinner; ikonet blir igjen. Feltet trenger bredden
       mer enn knappen trenger ordet «Søk». */
    .affy-sokmodul .affy-sok__felt,
    .affy-sokmodul .affy-sok__knapp {
        height: 52px;
    }

    .affy-sokmodul .affy-sok__knapp {
        padding: 0 1.1rem;
    }

    .affy-sokmodul .affy-sok__knapptekst {
        display: none;
    }
}


/* ============================================================================
   2. IKON-BOKSER — DESIGNVARIANTER  (frontpage_linkbox_variant)
   ============================================================================
   Standardvarianten «entrance» har sin egen stil i style.css og røres ikke.
   Reglene under gjelder bare de tre nye, som har en egen klassestamme
   (.lb-card) nettopp for å ikke kunne arve noe fra de gamle
   .icon-box/.icon-hover-*-reglene som fortsatt ligger i style.css.

   Aksentfargen kommer fra --lb-accent, som settes av .lb-card--farge-*.
   Da trenger hver variant bare å bestemme HVOR fargen brukes, ikke hvilken.
   ============================================================================ */

.lb-card {
    --lb-accent: var(--color-primary, #1b3a57);
    position: relative;
    display: block;
    height: 100%;
    text-decoration: none;
    color: var(--color-text, #0b1f33);
}

.lb-card--haslink:hover,
.lb-card--haslink:focus-visible {
    text-decoration: none;
}

.lb-card__title {
    display: block;
    font-family: var(--font-title, inherit);
    font-weight: 600;
    line-height: 1.3;
}

.lb-card__text {
    display: block;
    color: var(--color-text-muted, rgba(16, 42, 67, .78));
    line-height: 1.55;
}

.lb-card--farge-primary { --lb-accent: var(--color-primary, #1b3a57); }
.lb-card--farge-success { --lb-accent: var(--color-secondary, #0f766e); }
.lb-card--farge-danger  { --lb-accent: #b3261e; }
/* Tonepaletten (theme_tone_1..4). --lb-flate brukes av hurtigvalg som
   bakgrunn, --lb-accent av de andre variantene. */
.lb-card--farge-primary { --lb-flate: var(--color-primary, #1b3a57); --lb-flate-fg: var(--color-primary-contrast, #fff); }
.lb-card--farge-success { --lb-flate: var(--color-secondary, #0f766e); --lb-flate-fg: #fff; }
.lb-card--farge-danger  { --lb-flate: #b3261e; --lb-flate-fg: #fff; }
.lb-card--farge-tone1 { --lb-accent: var(--color-tone-1); --lb-flate: var(--color-tone-1); --lb-flate-fg: var(--color-tone-1-fg); }
.lb-card--farge-tone2 { --lb-accent: var(--color-tone-2); --lb-flate: var(--color-tone-2); --lb-flate-fg: var(--color-tone-2-fg); }
.lb-card--farge-tone3 { --lb-accent: var(--color-tone-3); --lb-flate: var(--color-tone-3); --lb-flate-fg: var(--color-tone-3-fg); }
.lb-card--farge-tone4 { --lb-accent: var(--color-tone-4); --lb-flate: var(--color-tone-4); --lb-flate-fg: var(--color-tone-4-fg); }


/* --- a) Sirkel over boks ---------------------------------------------------
   Medaljongen henger over toppkanten. Ringen rundt den er i sidens
   bakgrunnsfarge, ikke hvit: det er den som får sirkelen til å se ut som den
   ligger OPPÅ boksen i stedet for å være klistret på den, og med en hardkodet
   hvit ville illusjonen brutt sammen på en farget seksjon. */
.lb-card--medaljong {
    margin-top: 44px;
    padding: 58px 1.3rem 1.6rem;
    text-align: center;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border-soft, rgba(16, 42, 67, .10));
    border-radius: var(--radius-base, 14px);
    transition: transform .15s ease, box-shadow .15s ease;
}

.lb-card--medaljong .lb-card__icon {
    position: absolute;
    top: -44px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--color-surface, #fff);
    color: var(--lb-accent);
    font-size: 2rem;
    border: 1px solid var(--color-border-soft, rgba(16, 42, 67, .10));
    box-shadow: 0 0 0 7px var(--color-bg, #f3f2ee);
}

.lb-card--medaljong .lb-card__title {
    margin-bottom: .5rem;
    font-size: 1.1rem;
}

.lb-card--medaljong.lb-card--haslink:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}


/* --- b) Dempet kort, ikon øverst til venstre ------------------------------- */
.lb-card--dempet {
    padding: 1.5rem;
    text-align: left;
    background: var(--color-primary-soft, rgba(27, 58, 87, .07));
    border: 1px solid transparent;
    border-radius: var(--radius-base, 14px);
    transition: background .15s ease, border-color .15s ease;
}

.lb-card--dempet .lb-card__icon {
    display: block;
    margin-bottom: .8rem;
    font-size: 1.5rem;
    color: var(--lb-accent);
}

.lb-card--dempet .lb-card__title {
    margin-bottom: .45rem;
    font-size: 1.15rem;
}

.lb-card--dempet.lb-card--haslink:hover {
    background: var(--color-primary-soft-hover, rgba(27, 58, 87, .12));
    border-color: var(--lb-accent);
}


/* --- c) Kompakt rad -------------------------------------------------------- */
.lb-card--kompakt {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: .9rem 1.1rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border-soft, rgba(16, 42, 67, .10));
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.lb-card--kompakt .lb-card__icon {
    flex: 0 0 auto;
    width: 34px;
    text-align: center;
    font-size: 1.25rem;
    color: var(--lb-accent);
}

.lb-card--kompakt .lb-card__body {
    min-width: 0;
}

.lb-card--kompakt .lb-card__title {
    font-size: 1rem;
}

/* Poenget med den kompakte raden er lav høyde. Beskrivelsen ville spist det
   opp, så den er skjult — den ligger fortsatt i markupen for skjermlesere og
   for den som bytter variant senere. */
.lb-card--kompakt .lb-card__text {
    display: none;
}

.lb-card--kompakt.lb-card--haslink:hover {
    border-color: var(--lb-accent);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}

/* =========================================================================
   Knappesett (utilities/knapper.php)
   Egen komponent i stedet for .btn: .btn har versaler, fast farge paa
   .btn-primary og flere regler som overstyrer hverandre. Disse knappene
   folger temaets variabler og ser like ut i hero, CTA og header.
   ========================================================================= */
.affy-knapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 1.75rem;
}
.affy-knapper--midt  { justify-content: center; }
.affy-knapper--hoyre { justify-content: flex-end; }

.affy-knapper a.affy-knapp,
.affy-knapper a.affy-knapp:hover,
.affy-knapper a.affy-knapp:focus {
    text-decoration: none;
}
.affy-knapper a.affy-knapp {
    --knapp-bg: var(--color-primary, #1b3a57);
    --knapp-fg: var(--color-primary-contrast, #fff);
    --knapp-kant: var(--knapp-bg);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 24px;
    border: 1.5px solid var(--knapp-kant);
    border-radius: var(--knapp-radius, 8px);
    background: var(--knapp-bg);
    color: var(--knapp-fg);
    font-family: var(--font-base, inherit);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    white-space: normal;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.affy-knapper a.affy-knapp:hover { transform: translateY(-1px); color: var(--knapp-fg); }
.affy-knapper a.affy-knapp:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-primary, #1b3a57) 35%, transparent);
    outline-offset: 2px;
}

/* Fylt: hovedvalget. */
.affy-knapper a.affy-knapp--fylt:hover {
    --knapp-bg: color-mix(in srgb, var(--color-primary, #1b3a57) 86%, #000);
}
/* Dempet: alternativet ved siden av. En svak tone av primærfargen, til
   paletten (fase 2) kan gi den en egen. */
.affy-knapper a.affy-knapp--dempet {
    --knapp-bg: var(--knapp-dempet-bg, color-mix(in srgb, var(--color-primary, #1b3a57) 12%, var(--color-surface, #fff)));
    --knapp-fg: var(--knapp-dempet-fg, var(--color-primary, #1b3a57));
}
.affy-knapper a.affy-knapp--dempet:hover {
    --knapp-bg: var(--knapp-dempet-bg-hover, color-mix(in srgb, var(--color-primary, #1b3a57) 20%, var(--color-surface, #fff)));
}
/* Kantlinje: tredje valg, f.eks. «Kontakt oss». */
.affy-knapper a.affy-knapp--kontur {
    --knapp-bg: transparent;
    --knapp-fg: var(--color-primary, #1b3a57);
    --knapp-kant: currentColor;
}
.affy-knapper a.affy-knapp--kontur:hover {
    --knapp-bg: color-mix(in srgb, var(--color-primary, #1b3a57) 8%, transparent);
}
/* Lys: på mørke bakgrunner (CTA, bildehero). */
.affy-knapper a.affy-knapp--lys {
    --knapp-bg: #fff;
    --knapp-fg: var(--color-primary, #1b3a57);
    --knapp-kant: #fff;
}
.affy-knapper a.affy-knapp--lys:hover {
    --knapp-bg: rgba(255,255,255,.88);
}

.affy-knapp__ikon {
    flex: 0 0 auto;
    width: 1.15em;
    font-size: 1.1em;
    text-align: center;
}
.affy-knapp__tekst { display: flex; flex-direction: column; }
.affy-knapp__under {
    font-size: 12.5px;
    font-weight: 400;
    opacity: .82;
    margin-top: 3px;
}
.affy-knapp--to-linjer { padding-top: 10px; padding-bottom: 10px; }

/* Header: kompakte knapper på linje med menyen. */
.affy-knapper--header {
    margin: 0 0 0 12px;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
}
.affy-knapper--header a.affy-knapp {
    min-height: 42px;
    padding: 8px 16px;
    font-size: 14px;
    gap: 8px;
}
.affy-knapper--header .affy-knapp__under { display: none; }

@media (max-width: 575px) {
    /* Hele bredden på mobil: lettere å treffe, og to knapper med ulik
       tekstlengde ser ikke tilfeldige ut. */
    .affy-knapper:not(.affy-knapper--header) a.affy-knapp {
        flex: 1 1 100%;
    }
}

/* --- e) Hurtigvalg ----------------------------------------------------------
   Sammenhengende rad med fargede fliser: ikon til venstre, tittel og
   undertekst ved siden av. Fargen er flisens bakgrunn. «Standard» veksler
   etter plassering - primær, tone 1, tone 2, tone 4 - slik at en rad uten valgte
   farger likevel får en palett som hører sammen. */
.lb-rad--hurtigvalg {
    border-radius: var(--radius-base, 14px);
    overflow: hidden;
}
.lb-rad--hurtigvalg > div:nth-child(4n+1) .lb-card--farge-default { --lb-flate: var(--color-primary, #1b3a57); --lb-flate-fg: var(--color-primary-contrast, #fff); }
.lb-rad--hurtigvalg > div:nth-child(4n+2) .lb-card--farge-default { --lb-flate: var(--color-tone-1, #b99e83); --lb-flate-fg: var(--color-tone-1-fg, #2a2118); }
.lb-rad--hurtigvalg > div:nth-child(4n+3) .lb-card--farge-default { --lb-flate: var(--color-tone-2, #dbccbd); --lb-flate-fg: var(--color-tone-2-fg, #2b2117); }
.lb-rad--hurtigvalg > div:nth-child(4n+4) .lb-card--farge-default { --lb-flate: var(--color-tone-4, #594536); --lb-flate-fg: var(--color-tone-4-fg, #fff); }

.lb-card--hurtigvalg {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 100px;
    padding: 26px 30px;
    background: var(--lb-flate, var(--color-primary, #1b3a57));
    color: var(--lb-flate-fg, #fff);
    transition: filter .15s ease;
}
.lb-card--hurtigvalg.lb-card--haslink:hover,
.lb-card--hurtigvalg.lb-card--haslink:focus-visible {
    filter: brightness(1.08);
    color: var(--lb-flate-fg, #fff);
}
.lb-card--hurtigvalg .lb-card__icon {
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 1;
    opacity: .9;
}
.lb-card--hurtigvalg .lb-card__icon:empty { display: none; }
.lb-card--hurtigvalg .lb-card__title {
    font-family: var(--font-base, inherit);
    font-size: 15px;
    font-weight: 600;
    color: inherit;
}
.lb-card--hurtigvalg .lb-card__text {
    margin-top: 4px;
    font-size: 13.5px;
    color: inherit;
    opacity: .82;
}

/* --- Ensfarget bakgrunn på alle boksene (frontpage_linkbox_flate) ---------
   Overstyrer variantens egen flate og vekslingen i hurtigvalg. Selektoren
   .lb-rad.lb-rad--flate > div > .lb-card er bevisst sterkere enn
   hurtigvalgets nth-child-regler. Tittel, tekst og ikon arver tekstfargen,
   som er regnet ut for å være lesbar på flaten. */
.lb-rad--flate-primary { --lb-ens: var(--color-primary, #1b3a57); --lb-ens-fg: var(--color-primary-contrast, #fff); }
.lb-rad--flate-tone1   { --lb-ens: var(--color-tone-1); --lb-ens-fg: var(--color-tone-1-fg); }
.lb-rad--flate-tone2   { --lb-ens: var(--color-tone-2); --lb-ens-fg: var(--color-tone-2-fg); }
.lb-rad--flate-tone3   { --lb-ens: var(--color-tone-3); --lb-ens-fg: var(--color-tone-3-fg); }
.lb-rad--flate-tone4   { --lb-ens: var(--color-tone-4); --lb-ens-fg: var(--color-tone-4-fg); }
.lb-rad--flate-panel   { --lb-ens: var(--color-panel, #e0ebe6); --lb-ens-fg: var(--color-text, #0b1f33); }

.lb-rad.lb-rad--flate > div > .lb-card {
    --lb-flate: var(--lb-ens);
    --lb-flate-fg: var(--lb-ens-fg);
    background: var(--lb-ens);
    color: var(--lb-ens-fg);
    border-color: transparent;
}
.lb-rad.lb-rad--flate > div > .lb-card .lb-card__title,
.lb-rad.lb-rad--flate > div > .lb-card .lb-card__text,
.lb-rad.lb-rad--flate > div > .lb-card .lb-card__icon {
    color: inherit;
}
.lb-rad.lb-rad--flate > div > .lb-card .lb-card__text { opacity: .85; }
.lb-rad.lb-rad--flate > div > .lb-card.lb-card--haslink:hover {
    background: color-mix(in srgb, var(--lb-ens) 92%, var(--lb-ens-fg));
    color: var(--lb-ens-fg);
}
/* Medaljongen: sirkelen får tekstfargen som flate, ikonet flatefargen. */
.lb-rad.lb-rad--flate > div > .lb-card--medaljong .lb-card__icon {
    background: var(--lb-ens-fg);
    color: var(--lb-ens);
}
/* Hurtigvalg i én farge trenger skillelinjer mellom flisene, og retningen
   følger oppsettet: loddrett når flisene står på rad, vannrett når de
   stables. En loddrett linje på stablede fliser ble en strek langs
   venstre kant på mobil. */
.lb-rad--hurtigvalg.lb-rad--flate { --lb-skille: color-mix(in srgb, var(--lb-ens-fg) 18%, transparent); }

/* Mobil: én kolonne. */
.lb-rad--hurtigvalg.lb-rad--flate > div + div > .lb-card {
    box-shadow: inset 0 1px 0 var(--lb-skille);
}
/* Nettbrett: to og to (col-md-6). */
@media (min-width: 768px) and (max-width: 991.98px) {
    .lb-rad--hurtigvalg.lb-rad--flate > div > .lb-card { box-shadow: none; }
    .lb-rad--hurtigvalg.lb-rad--flate > div:nth-child(2n) > .lb-card {
        box-shadow: inset 1px 0 0 var(--lb-skille);
    }
    .lb-rad--hurtigvalg.lb-rad--flate > div:nth-child(n+3) > .lb-card {
        box-shadow: inset 0 1px 0 var(--lb-skille);
    }
    .lb-rad--hurtigvalg.lb-rad--flate > div:nth-child(2n):nth-child(n+3) > .lb-card {
        box-shadow: inset 1px 0 0 var(--lb-skille), inset 0 1px 0 var(--lb-skille);
    }
}
/* Desktop: én rad (col-lg). */
@media (min-width: 992px) {
    .lb-rad--hurtigvalg.lb-rad--flate > div + div > .lb-card {
        box-shadow: inset 1px 0 0 var(--lb-skille);
    }
}

/* =========================================================================
   Innholdsseksjoner: «Tjenestekort» (frontpage_contentgroups_layout)
   Fargede kort uten bilde: tynt ikon, serif-tittel, ingress og «Les mer →».
   Farge per kort fra seksjonens kort_farge, ellers veksling i rekkefølgen
   primær, tone 1, tone 3, tone 2.
   ========================================================================= */
.fcg-tk-seksjon { padding: 3rem 0; }

.fcg-tk {
    --tk-bg: var(--color-primary, #1b3a57);
    --tk-fg: var(--color-primary-contrast, #fff);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 320px;
    padding: 2.25rem 1.9rem 1.9rem;
    border-radius: var(--radius-base, 14px);
    background: var(--tk-bg);
    color: var(--tk-fg);
    transition: transform .18s ease, box-shadow .18s ease;
}
.fcg-tk.fcg-row--clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .10);
}

.fcg-tk--primary { --tk-bg: var(--color-primary, #1b3a57); --tk-fg: var(--color-primary-contrast, #fff); }
.fcg-tk--tone1   { --tk-bg: var(--color-tone-1); --tk-fg: var(--color-tone-1-fg); }
.fcg-tk--tone2   { --tk-bg: var(--color-tone-2); --tk-fg: var(--color-tone-2-fg); }
.fcg-tk--tone3   { --tk-bg: var(--color-tone-3); --tk-fg: var(--color-tone-3-fg); }
.fcg-tk--tone4   { --tk-bg: var(--color-tone-4); --tk-fg: var(--color-tone-4-fg); }
.fcg-tk--panel   { --tk-bg: var(--color-panel, #e0ebe6); --tk-fg: var(--color-text, #0b1f33); }

.fcg-tk-rad > div:nth-child(4n+1) .fcg-tk--auto { --tk-bg: var(--color-primary, #1b3a57); --tk-fg: var(--color-primary-contrast, #fff); }
.fcg-tk-rad > div:nth-child(4n+2) .fcg-tk--auto { --tk-bg: var(--color-tone-1, #b99e83); --tk-fg: var(--color-tone-1-fg, #2a2118); }
.fcg-tk-rad > div:nth-child(4n+3) .fcg-tk--auto { --tk-bg: var(--color-tone-3, #f5eee8); --tk-fg: var(--color-tone-3-fg, #2d2016); }
.fcg-tk-rad > div:nth-child(4n+4) .fcg-tk--auto { --tk-bg: var(--color-tone-2, #dbccbd); --tk-fg: var(--color-tone-2-fg, #2b2117); }

.fcg-tk__ikon {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 2.25rem;
    color: inherit;
}
.fcg-tk__tittel {
    margin: 0 0 1rem;
    font-family: var(--font-styled, var(--font-title, Georgia, serif));
    font-weight: var(--font-styled-weight, 400);
    font-size: 1.55rem;
    line-height: 1.25;
    color: inherit;
    text-transform: none;
}
.fcg-tk__tekst {
    margin: 0 0 1.5rem;
    font-size: .95rem;
    line-height: 1.6;
    color: inherit;
    opacity: .85;
}
.fcg-tk a.fcg-tk__lenke,
.fcg-tk a.fcg-tk__lenke:hover {
    margin-top: auto;
    color: inherit;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
}
.fcg-tk a.fcg-tk__lenke span[aria-hidden] {
    display: inline-block;
    margin-left: 6px;
    transition: transform .15s ease;
}
.fcg-tk:hover a.fcg-tk__lenke span[aria-hidden] { transform: translateX(4px); }

@media (max-width: 575px) {
    .fcg-tk { min-height: 0; padding: 1.75rem 1.5rem; }
    .fcg-tk__ikon { font-size: 44px; margin-bottom: 1.5rem; }
}

/* =========================================================================
   Tekst og bilde (front_text2): bildeformene «bue» og «hjorne»
   Egne formater i stedet for kvadratet: buet topp (5:6) og liggende
   bilde med ett stort hjørne (3:2).
   ========================================================================= */
/* Buen trenger høyde for å se ut som en bue (5:6). Hjørnet er liggende (3:2),
   så bildet ikke blir mye høyere enn en kort tekst ved siden av. */
.ous-hero__imagewrap.ous-hero__imagewrap--bue {
    aspect-ratio: 5 / 6;
    width: 400px;
    max-width: 100%;
    /* Vertikal radius = halve bredden: 50% av bredden / (6/5) = 41.7% av høyden. */
    border-radius: 50% 50% var(--hero-media-radius, 18px) var(--hero-media-radius, 18px) / 41.7% 41.7% var(--hero-media-radius, 18px) var(--hero-media-radius, 18px);
}
.ous-hero__imagewrap.ous-hero__imagewrap--hjorne {
    aspect-ratio: 3 / 2;
    width: 540px;
    max-width: 100%;
}
/* Stort hjørne mot ytterkanten: øverst til høyre når bildet står til høyre,
   øverst til venstre når det står til venstre. */
.ous-hero-flex--media-right .ous-hero__imagewrap.ous-hero__imagewrap--hjorne {
    border-radius: var(--hero-media-radius, 18px) 160px var(--hero-media-radius, 18px) var(--hero-media-radius, 18px);
}
.ous-hero-flex--media-left .ous-hero__imagewrap.ous-hero__imagewrap--hjorne {
    border-radius: 160px var(--hero-media-radius, 18px) var(--hero-media-radius, 18px) var(--hero-media-radius, 18px);
}
@media (max-width: 991px) {
    .ous-hero__imagewrap.ous-hero__imagewrap--bue { width: 320px; }
    .ous-hero__imagewrap.ous-hero__imagewrap--hjorne { width: 420px; }
    .ous-hero-flex--media-right .ous-hero__imagewrap.ous-hero__imagewrap--hjorne { border-top-right-radius: 110px; }
    .ous-hero-flex--media-left .ous-hero__imagewrap.ous-hero__imagewrap--hjorne { border-top-left-radius: 110px; }
}
@media (max-width: 575px) {
    .ous-hero__imagewrap.ous-hero__imagewrap--bue { width: 260px; }
    .ous-hero__imagewrap.ous-hero__imagewrap--hjorne { width: 100%; }
}

/* Hurtigvalg i én farge ligger i et bånd i samme farge, kant til kant
   (forside/index.tpl). Avrundede hjørner ville da sett ut som et hakk. */
.lb-rad--hurtigvalg.lb-rad--flate { border-radius: 0; }

/* =========================================================================
   Tekst og bilde (front_text2) som toppseksjon: typografi
   Teksten fikk brødtekstens størrelse, mens seksjonene under har h2 på
   2,7rem og .lead på 1,36em - toppen ble mindre enn introen til neste
   seksjon. Her er den tydelig størst: overskrift opptil ~3,4rem og
   ingress på samme nivå som .lead. clamp() skalerer jevnt ned på mobil.
   Tre klasser i selektoren for å slå de eldre .ous-hero__lead-reglene.
   ========================================================================= */
.ous-hero-flex .ous-hero-flex__content .ous-hero__lead {
    font-size: clamp(1.1rem, 0.95rem + 0.55vw, 1.4rem);
    line-height: 1.6;
}
.ous-hero-flex .ous-hero-flex__content .ous-hero__lead h1,
.ous-hero-flex .ous-hero-flex__content .ous-hero__lead h2 {
    font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem);
    line-height: 1.12;
    margin: 0 0 .5em;
}
.ous-hero-flex .ous-hero-flex__content .ous-hero__lead h3 {
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.2rem);
    line-height: 1.2;
}
.ous-hero-flex .ous-hero-flex__content .ous-hero__lead p {
    margin: 0 0 .6em;
}
/* Overlinje: et kort avsnitt rett foran overskriften («Velkommen til»)
   blir en liten linje over den, i stedet for brødtekst i full størrelse.
   CKEditor tilbyr bare overskrift 1-3, så dette kan ikke settes som h5/h6.
   Nettlesere uten :has() viser det som vanlig avsnitt. */
.ous-hero-flex .ous-hero-flex__content .ous-hero__lead p:has(+ h1),
.ous-hero-flex .ous-hero-flex__content .ous-hero__lead p:has(+ h2),
.ous-hero-flex .ous-hero-flex__content .ous-hero__lead p:has(+ h3) {
    font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .8;
    margin-bottom: .35em;
}

/* Hovedknappen i menylinjen når menyen er en hamburger (menu.inc.php).
   Søkeknappen har margin-left:auto; står den foran, ligger knappen rett
   etter den, ellers skyver knappen seg selv mot høyre. */
.affy-header-knapper-mobil {
    margin-left: auto;
    margin-right: .4rem;
}
.affy-sok-toggle--frittstaende + .affy-header-knapper-mobil { margin-left: 0; }
.affy-knapper--mobil { margin: 0; }
.affy-knapper--mobil a.affy-knapp {
    min-height: 38px;
    padding: 6px 12px;
    font-size: 13.5px;
    white-space: nowrap;
}
/* Svært smale skjermer: bare ikonet, hvis knappen har et. */
@media (max-width: 359px) {
    .affy-knapper--mobil a.affy-knapp .affy-knapp__ikon ~ .affy-knapp__tekst { display: none; }
}