/* ============================================================================
   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; }

/* Bildeteksten i forsidens bildeserie ligger på mørkt overlegg: kantlinjen
   må være lys for å synes. */
.affy-knapper--bildetekst { margin-top: 1.25rem; }
.affy-knapper--bildetekst a.affy-knapp--kontur {
    --knapp-fg: #fff;
    --knapp-kant: rgba(255,255,255,.85);
}
.affy-knapper--bildetekst a.affy-knapp--kontur:hover {
    --knapp-bg: rgba(255,255,255,.12);
}

/* 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;
}

/* Søk og hovedknapp i menylinjen når menyen er en hamburger (menu.inc.php).
   style.css gir logoen order:1, hamburgeren order:2 og nedtrekket order:3.
   Søk og knapp hadde ingen order (0), og havnet derfor FORAN logoen - og
   på en egen rad over den når det ikke var plass. Med order:2 står de i
   DOM-rekkefølge rett før hamburgeren.

   Logoen har margin-right:auto og skyver resten mot høyre; de andre auto-
   margene nulles så luften ikke deles opp. flex-basis 0 på logoen gjør at
   linjen ikke brytes: logoen tar plassen som er igjen og krymper bildet. */
.navbar.affy-navbar .affy-sok-toggle--frittstaende,
.navbar.affy-navbar .affy-header-knapper-mobil {
    order: 2;
    flex: 0 0 auto;
    margin-left: 0;
}
.navbar.affy-navbar .affy-header-knapper-mobil { margin-right: .4rem; }
.navbar.affy-navbar .affy-sok-toggle--frittstaende ~ .navbar-toggler,
.navbar.affy-navbar .affy-header-knapper-mobil ~ .navbar-toggler {
    margin-left: 0;
}
@media (max-width: 991.98px) {
    .navbar.affy-navbar:has(.affy-header-knapper-mobil, .affy-sok-toggle--frittstaende) .navbar-brand {
        flex: 1 1 0;
        min-width: 0;
    }
    .navbar.affy-navbar:has(.affy-header-knapper-mobil, .affy-sok-toggle--frittstaende) .navbar-brand img {
        max-width: 100%;
        height: auto;
    }
}
/* Hamburger på alle bredder: samme oppførsel også på desktop. */
.navbar.affy-navbar.navbar-expand-hamburger:has(.affy-header-knapper-mobil, .affy-sok-toggle--frittstaende) .navbar-brand {
    flex: 1 1 0;
    min-width: 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;
}
/* Smale skjermer: bare ikonet, hvis knappen har et, så logoen får plass. */
@media (max-width: 419px) {
    .affy-knapper--mobil a.affy-knapp .affy-knapp__ikon ~ .affy-knapp__tekst { display: none; }
}

/* Knappene inne i nedtrekksmenyen (valget «i nedtrekksmenyen» på mobil, og
   alltid ved hamburger på alle bredder): fulle rader, ikke klemt mot høyre. */
@media (max-width: 991.98px) {
    .navbar-collapse .affy-header-knapper-wrap { padding: .75rem 1rem; }
    .navbar-collapse .affy-header-knapper-wrap .affy-knapper--header {
        margin: 0;
        width: 100%;
        flex-wrap: wrap;
    }
    .navbar-collapse .affy-header-knapper-wrap .affy-knapper--header a.affy-knapp {
        flex: 1 1 auto;
        justify-content: center;
    }
}
.navbar-expand-hamburger .navbar-collapse .affy-header-knapper-wrap .affy-knapper--header {
    margin: 0;
    width: 100%;
    flex-wrap: wrap;
}
.navbar-expand-hamburger .navbar-collapse .affy-header-knapper-wrap .affy-knapper--header a.affy-knapp {
    flex: 1 1 auto;
    justify-content: center;
}

/* «Logg inn» som tydelig knapp i hovedmenyen (fylt, i sameiets primærfarge –
   leselig både på hvit og på gjennomsiktig meny over forsidebildet). */
.affy-nav-actions .nav-link.affy-login-knapp {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  background: var(--color-primary, #0F6E6A);
  color: var(--color-primary-contrast, #fff) !important;
  border-radius: 999px;
  padding: .45rem 1.1rem !important;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  transition: filter .15s ease, transform .15s ease;
}
.affy-nav-actions .nav-link.affy-login-knapp:hover,
.affy-nav-actions .nav-link.affy-login-knapp:focus-visible {
  filter: brightness(.92);
  transform: translateY(-1px);
}
.affy-nav-actions .nav-link.affy-login-knapp .ph-light { font-size: 1.35em; }
@media (max-width: 991.98px) {
  /* Mobilmenyen (style.css) gjør alle menylenker gjennomsiktige med !important –
     uten dette blir knappen hvit tekst på hvit bunn. */
  .navbar.affy-navbar .affy-nav-actions .nav-link.affy-login-knapp {
    display: inline-flex;
    width: auto;
    margin: .75rem 1.25rem;
    padding: .55rem 1.25rem !important;
    border-radius: 999px;
    border-bottom: 0;
    background: var(--color-primary, #0F6E6A) !important;
    color: var(--color-primary-contrast, #fff) !important;
  }
}

/* Samme i topp-stripa, men diskret nok for den lille linja: pille med kant. */
.header-top .affy-login-topbar a {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 10px;
  font-weight: 600;
}
.header-top .affy-login-topbar .ph-light { font-size: 1.15em; }


/* ============================================================================
   PROSPEKT-MODULENE — grunnstiler uten drakt
   ============================================================================
   Velkomst (front_hero.php), Innlogging (front_innlogging.php), Leie lokale
   (front_utleie.php), Oppslag i listevisning (front_bulletinboard.php) og
   «Kart og adkomst» (front_form.php). Modulene skal se ordentlige ut med
   hvilken som helst drakt; css/prospekt.css legger formen fra designet oppå
   når prospekt-drakten er valgt. Kolonnestabling (front-col__del) og mørk
   bakgrunn (front-bg-mork) hører også hjemme her.
   ============================================================================ */

/* Stablede seksjoner i én kolonne («Legg under forrige») */
.front-col--stablet {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Mørk bakgrunn (frontpage_bg_<key> = mork): bunnfargen med lys tekst */
.front-bg-mork,
.front-bg-mork h1, .front-bg-mork h2, .front-bg-mork h3, .front-bg-mork h4 {
  color: #fff;
}
.front-bg-mork a { color: #fff; }

/* Hengelås foran menypunkter som krever innlogging (MenuBuilder::labelHtml) */
.affy-menu-las {
  font-size: .8em;
  margin-right: .35em;
  opacity: .7;
}
/* Over bakgrunnsbilde (navbar-dark) gjør style.css ikoner i menypunktene
   små, svarte og på egen linje. Hengelåsen hører til teksten. */
.navbar.navbar-dark .navbar-nav .nav-link > i.affy-menu-las {
  display: inline-block;
  font-size: .8em;
  margin: 0 .35em 0 0;
  color: inherit;
}

/* Material-ikonet i innloggingskortet vises bare med de lokale fontene */
.front-innlogging .p-ikon { display: none; }

/* ---------- Velkomst ---------- */
.front-hero { padding: 40px 0; }
.front-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  min-height: 420px;
}
.front-hero--uten-bilde .front-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.front-hero__tekst {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 16px 0;
}
.front-hero__topp { display: flex; flex-direction: column; gap: 14px; }
.front-hero__sted { font-size: 14px; font-weight: 600; color: var(--color-link-hover, #1e40af); }
.front-hero__tittel { margin: 0; line-height: 1.05; }
.front-hero__intro { max-width: 34em; }
.front-hero__intro p:last-child { margin-bottom: 0; }
.front-hero__tall {
  display: grid;
  grid-template-columns: repeat(var(--hero-tall, 3), minmax(0, 1fr));
  border-top: 1px solid var(--color-border-soft, rgba(16, 42, 67, .1));
  padding-top: 18px;
}
.front-hero__tall--1 { --hero-tall: 1; }
.front-hero__tall--2 { --hero-tall: 2; }
.front-hero__tall--4 { --hero-tall: 4; }
.front-hero__tallfelt { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; }
.front-hero__tallfelt:first-child { padding-left: 0; }
.front-hero__tallfelt + .front-hero__tallfelt { border-left: 1px solid var(--color-border-soft, rgba(16, 42, 67, .1)); }
.front-hero__verdi { font-family: var(--font-title); font-weight: 700; font-size: 32px; line-height: 1.1; color: var(--color-text); overflow-wrap: anywhere; }
.front-hero__etikett { font-size: 14px; opacity: .75; }
.front-hero__bilde {
  background: var(--color-panel, #e0ebe6) center / cover no-repeat;
  border-radius: var(--radius-base, 14px);
  min-height: 280px;
}
@media (max-width: 991.98px) {
  .front-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 18px; }
  .front-hero__tekst { display: contents; }
  .front-hero__topp { order: 1; }
  .front-hero__bilde { order: 2; min-height: 200px; }
  .front-hero__tall { order: 3; border-bottom: 1px solid var(--color-border-soft, rgba(16, 42, 67, .1)); padding-bottom: 12px; }
  .front-hero__verdi { font-size: 24px; }
  .front-hero__etikett { font-size: 12.5px; }
}

/* ---------- Innlogging ---------- */
.front-innlogging {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border-radius: var(--radius-base, 14px);
  background: var(--color-primary, #1b3a57);
  color: #fff;
  text-decoration: none;
  height: 100%;
}
.front-innlogging:hover { color: #fff; text-decoration: none; filter: brightness(1.06); }
.front-innlogging__ikon { font-size: 22px; line-height: 1; margin-bottom: 8px; }
.front-innlogging__tittel { font-family: var(--font-title); font-weight: 700; font-size: 20px; line-height: 1.2; }
.front-innlogging__tekst { font-size: 15px; line-height: 1.45; opacity: .92; }
.front-innlogging__lenke { font-weight: 600; margin-top: 10px; }

/* ---------- Leie lokale ---------- */
.front-utleie__kort {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 22px 24px;
  border-radius: var(--radius-base, 14px);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border-soft, rgba(16, 42, 67, .1));
  color: var(--color-text);
  text-decoration: none;
}
.front-utleie__kort:hover { text-decoration: none; color: var(--color-text); border-color: var(--color-link, #1d4ed8); }
.front-utleie__tittel { font-family: var(--font-title); font-weight: 700; font-size: 21px; line-height: 1.2; }
.front-utleie__tekst { font-size: 15px; line-height: 1.5; opacity: .85; }
.front-utleie__lenke { margin-top: auto; padding-top: 4px; font-weight: 600; color: var(--color-link, #1d4ed8); }
.front-utleie__alle { display: inline-block; margin-top: 12px; font-weight: 600; }
.front-utleie__innhold { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
/* Med bilde: bildet øverst i kortet, kant i kant; teksten får polstringen */
.front-utleie__kort--bilde { padding: 0; gap: 0; overflow: hidden; }
.front-utleie__kort--bilde .front-utleie__innhold { padding: 20px 24px 22px; }
.front-utleie__bilde { display: block; aspect-ratio: 3 / 2; background: var(--color-panel, #eee); overflow: hidden; }
.front-utleie__bilde img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.front-utleie__kort--bilde:hover .front-utleie__bilde img { transform: scale(1.03); }
/* To kort over full bredde: lavere bilder, ellers blir kortene svært høye */
.front-utleie--to .front-utleie__bilde { aspect-ratio: 16 / 9; }
/* Ett objekt på bred flate: bildet til venstre for teksten */
@media (min-width: 768px) {
  .front-utleie--liggende .front-utleie__kort--bilde { flex-direction: row; }
  .front-utleie--liggende .front-utleie__bilde { flex: 0 0 42%; aspect-ratio: auto; min-height: 240px; }
  .front-utleie--liggende .front-utleie__innhold { justify-content: center; padding: 32px 36px; }
  .front-utleie--liggende .front-utleie__lenke { margin-top: 8px; }
}

/* ---------- Oppslag (listevisning) ---------- */
.front-oppslag__hode { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 10px; }
.front-oppslag__tittel { margin: 0; }
.front-oppslag__alle { font-weight: 600; white-space: nowrap; }
.front-oppslag__liste { list-style: none; margin: 0; padding: 0; }
.front-oppslag__rad {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--color-border-soft, rgba(16, 42, 67, .1));
}
.front-oppslag__dato { font-size: 14px; opacity: .7; }
.front-oppslag__lenke { font-weight: 500; line-height: 1.35; color: var(--color-text); }
.front-oppslag__lukket {
  display: flex; gap: 10px; align-items: baseline;
  padding: 14px 0; border-top: 1px solid var(--color-border-soft, rgba(16, 42, 67, .1));
  font-weight: 500;
}
.front-oppslag__tom { padding: 14px 0; margin: 0; border-top: 1px solid var(--color-border-soft, rgba(16, 42, 67, .1)); opacity: .75; }
@media (max-width: 575.98px) {
  .front-oppslag__rad { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; }
}

/* ---------- Kart og adkomst ---------- */
.front-adkomst {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  border-radius: var(--radius-base, 14px);
  overflow: hidden;
  background: var(--color-surface, #fff);
}
.front-adkomst--uten-kart { grid-template-columns: minmax(0, 1fr); }
.front-adkomst__kart { min-height: 280px; }
.front-adkomst__kart > * { height: 100% !important; min-height: 280px; }
.front-adkomst__info { padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 14px; font-size: 15px; line-height: 1.5; }
.front-adkomst__etikett { font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; opacity: .7; }
.front-adkomst__adresse { margin: 0; font-size: 24px; }
.front-adkomst__rad { display: flex; gap: 10px; align-items: center; }
.front-adkomst__rad i { width: 20px; text-align: center; color: var(--color-link, #1d4ed8); }
@media (max-width: 767.98px) {
  .front-adkomst { grid-template-columns: minmax(0, 1fr); }
  .front-adkomst__kart, .front-adkomst__kart > * { min-height: 170px; }
  .front-adkomst__info { padding: 20px; }
}

/* ---------- Ikon-bokser: «Enkle kort» ---------- */
.lb-card--kort {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 24px 26px;
  border-radius: var(--radius-base, 14px);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border-soft, rgba(16, 42, 67, .1));
  color: var(--color-text);
  text-decoration: none;
}
a.lb-card--kort:hover { text-decoration: none; color: var(--color-text); border-color: var(--color-link, #1d4ed8); }
.lb-card--kort .lb-card__title { font-family: var(--font-title); font-weight: 700; font-size: 22px; line-height: 1.15; }
.lb-card--kort .lb-card__text { font-size: 15px; line-height: 1.55; opacity: .85; }
.lb-card--kort .lb-card__lenke { margin-top: auto; font-weight: 600; color: var(--color-link, #1d4ed8); }
.lb-card--kort.lb-card--farge-mork { background: var(--color-footerbg, #14233a); border-color: transparent; color: #fff; }
.lb-card--kort.lb-card--farge-mork .lb-card__text { color: #d3d9e3; opacity: 1; }
.lb-card--kort.lb-card--farge-mork .lb-card__lenke { color: #fff; }
a.lb-card--kort.lb-card--farge-mork:hover { color: #fff; filter: brightness(1.12); }
.lb-card--kort.lb-card--farge-primary { background: var(--color-primary, #1b3a57); border-color: transparent; color: #fff; }
.lb-card--kort.lb-card--farge-primary .lb-card__text,
.lb-card--kort.lb-card--farge-primary .lb-card__lenke { color: #fff; }
.lb-rad--kort { --bs-gutter-y: 16px; }


/* ============================================================================
   TEKST OG BILDE — knappene under teksten (Full width 50/50 og Parallax)
   ============================================================================
   Innholdskolonnen er display: flex på rad (for å sentrere vertikalt), så
   knapperaden fra affyFrontKnapper('text2') havnet VED SIDEN AV teksten.
   I kolonne legger knappene seg under teksten, venstrestilt med den.
   ============================================================================ */
.ous-hero-flex--split .ous-hero-flex__content,
.ous-hero-flex--parallax .ous-hero-flex__content,
.ous-hero-flex--parallax.ous-hero-flex--media-right .ous-hero-flex__content,
.ous-hero-flex--parallax.ous-hero-flex--media-left .ous-hero-flex__content {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.ous-hero-flex--split .ous-hero-flex__content > .affy-knapper,
.ous-hero-flex--parallax .ous-hero-flex__content > .affy-knapper {
  margin-top: 16px;
}