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


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