/* Kurs og konferanse har et kjøligere, mer forretningsmessig uttrykk enn
   resten av nettstedet: rette former, tynne linjer, nummererte steg og en
   dempet gråskala med husets brune som eneste aksent.
   Alt er scopet til .side-kurs, så ingen andre sider påvirkes. */

.side-kurs{
    --ink:#222b33;
    --ink-dyp:#19212a;
    --slate:#57636d;
    --kald:#f3f4f5;
    --kant:#dde1e4;
    /* Samme mørke brune som footeren, og footerens egne strek- og tekstfarger. */
    --brun:#3f352c;
    --brun-strek:#55483c;
    --brun-tekst:#b3a595;
    --aksent:#a68a6e;
    --aksent-mork:#8a6e52;
    /* Kjølig off-white her, mot menysidenes varme — passer sidens register. */
    background-color:#f7f8f9;
}

.side-kurs .menu-page h2,
.side-kurs .menu-page h3,
.side-kurs .kurs-hero h1,
.side-kurs .kurs-cta h2{
    font-family:'Prosto One', cursive;
    color:var(--ink);
}

/* ---------- Toppbanner ---------- */

.kurs-hero{
    position:relative;
    display:flex;
    align-items:flex-end;
    min-height:62vh;
    overflow:hidden;
}

.kurs-hero-bilde{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 38%;
}

.kurs-hero::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(105deg, rgba(25, 33, 42, 0.92) 0%, rgba(25, 33, 42, 0.76) 46%,
        rgba(25, 33, 42, 0.3) 100%);
}

.kurs-hero-innhold{
    position:relative;
    z-index:1;
    width:100%;
    max-width:76rem;
    margin:0 auto;
    padding:0 7% 4.5rem;
}

.kurs-eyebrow{
    display:flex;
    align-items:center;
    gap:0.9rem;
    font-family:'Reem Kufi', sans-serif;
    font-size:0.76rem;
    letter-spacing:0.26em;
    text-transform:uppercase;
    color:var(--slate);
    margin:0;
}

/* Lysere variant der etiketten står mot mørk bakgrunn. */
.kurs-hero .kurs-eyebrow{
    color:#c9d0d6;
}

.kurs-cta .kurs-eyebrow{
    color:var(--brun-tekst);
}

/* Kort strek foran etiketten — går igjen i blokkene under. */
.kurs-eyebrow::before{
    content:"";
    width:2.25rem;
    height:2px;
    background-color:var(--aksent);
    flex:none;
}

.side-kurs .kurs-hero h1{
    font-size:clamp(2.2rem, 4.4vw, 3.6rem);
    line-height:1.14;
    color:white;
    max-width:24ch;
    margin:1.5rem 0 0;
}

/* Tvunget linjeskift i overskriften — bare på store skjermer.
   På mobil brytes tittelen naturlig, og mellomrommet foran <br> holder
   ordene fra hverandre når skiftet er skjult. */
.bryt-desktop{
    display:none;
}

@media only screen and (min-width: 992px) {
    .bryt-desktop{
        display:inline;
    }
}

.kurs-hero-ingress{
    font-family:'Reem Kufi', sans-serif;
    font-size:1.12rem;
    line-height:1.7;
    color:#d6dbdf;
    max-width:44rem;
    margin:1.35rem 0 0;
}

.kurs-knapper{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin-top:2.25rem;
}

.knapp-kurs{
    display:inline-block;
    font-family:'Reem Kufi', sans-serif;
    font-size:0.88rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:white !important;
    background-color:var(--aksent);
    border:2px solid var(--aksent);
    padding:0.95rem 2.25rem;
    transition:background-color 0.3s ease, border-color 0.3s ease;
}

.knapp-kurs:hover{
    background-color:var(--aksent-mork);
    border-color:var(--aksent-mork);
    color:white !important;
}

.knapp-kurs-linje{
    background-color:transparent;
    border-color:rgba(255, 255, 255, 0.5);
}

.knapp-kurs-linje:hover{
    background-color:rgba(255, 255, 255, 0.12);
    border-color:white;
}

/* ---------- Faktastripe ---------- */

.fakta{
    background-color:var(--brun);
}

.fakta-rad{
    display:grid;
    /* auto-fit framfor et fast antall, så raden holder seg jevn uansett
       hvor mange punkter som står der. */
    grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
    max-width:76rem;
    margin:0 auto;
    padding:0 7%;
}

.fakta-rad div{
    padding:1.9rem 1.25rem;
    border-left:1px solid var(--brun-strek);
    text-align:center;
}

.fakta-rad div:first-child{
    border-left:none;
}

.fakta-tall{
    display:block;
    font-family:'Prosto One', cursive;
    font-size:1.5rem;
    color:white;
    margin:0;
}

.fakta-tekst{
    display:block;
    font-family:'Reem Kufi', sans-serif;
    font-size:0.82rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--brun-tekst);
    margin:0.5rem 0 0;
}

/* ---------- Tekst- og bildeblokker ---------- */

.kurs-blokk{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:4.5rem;
    align-items:center;
    max-width:70rem;
    margin:4.5rem auto 0;
}

.kurs-blokk-tekst h2{
    font-size:clamp(1.8rem, 3vw, 2.5rem);
    line-height:1.2;
    margin:1.25rem 0 0;
}

/* Etiketten er også en <p> her, og må ikke arve brødtekststørrelsen. */
.kurs-blokk-tekst > p:not(.kurs-eyebrow){
    font-family:'Reem Kufi', sans-serif;
    font-size:1.05rem;
    line-height:1.75;
    color:var(--slate);
    margin:1.35rem 0 0;
}

/* Bildekomposisjon: ett stort bilde, ett forskjøvet, og en tynn vinkel bak. */

.kurs-bilder{
    position:relative;
    padding:1.25rem 0 3.5rem 1.25rem;
}

.kurs-bilder::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:11rem;
    height:11rem;
    border-left:2px solid var(--aksent);
    border-top:2px solid var(--aksent);
}

.kurs-bilde-stor{
    position:relative;
    display:block;
    width:88%;
    aspect-ratio:4 / 3.2;
    object-fit:cover;
}

.kurs-bilde-liten{
    position:absolute;
    right:0;
    bottom:0;
    width:46%;
    aspect-ratio:4 / 3.4;
    object-fit:cover;
    border:10px solid white;
}

/* Enkeltbilde, brukt i matblokka */
.kurs-bilde-enkel{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:4 / 3.1;
    object-fit:cover;
}

.kurs-bilde-ramme{
    position:relative;
    padding:0 1.25rem 1.25rem 0;
}

.kurs-bilde-ramme::after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    width:11rem;
    height:11rem;
    border-right:2px solid var(--aksent);
    border-bottom:2px solid var(--aksent);
}

/* Punktliste med firkantede merker */

.kurs-liste{
    list-style:none;
    font-family:'Reem Kufi', sans-serif;
    font-size:1.02rem;
    padding:0;
    margin:1.85rem 0 0;
}

.kurs-liste li{
    position:relative;
    padding-left:1.85rem;
    padding-bottom:0.85rem;
    margin-bottom:0.85rem;
    border-bottom:1px solid var(--kant);
    color:var(--ink);
}

.kurs-liste li:last-child{
    border-bottom:none;
    padding-bottom:0;
    margin-bottom:0;
}

.kurs-liste li::before{
    content:"";
    position:absolute;
    left:0;
    top:0.5rem;
    width:0.6rem;
    height:0.6rem;
    background-color:var(--aksent);
}

/* ---------- Nummererte steg ---------- */

.side-kurs .section-title{
    font-size:clamp(1.9rem, 3.2vw, 2.5rem);
    letter-spacing:0.01em;
}

.side-kurs .section-title::after{
    width:2.75rem;
    height:2px;
    background-color:var(--aksent);
    margin-top:1.1rem;
}

.side-kurs .section-lead,
.side-kurs .menu-intro p{
    font-family:'Reem Kufi', sans-serif;
    color:var(--slate);
    line-height:1.75;
}

.steg-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:2rem;
    margin-top:3rem;
}

.steg{
    background-color:white;
    border:1px solid var(--kant);
    border-top:3px solid var(--aksent);
    padding:2.25rem 2rem 2.5rem;
}

.steg-nummer{
    font-family:'Prosto One', cursive;
    font-size:2.9rem;
    line-height:1;
    color:#c2cbd2;
    margin:0;
}

.side-kurs .steg h3{
    font-size:1.25rem;
    letter-spacing:0.02em;
    margin:1.1rem 0 0;
}

.steg p:not(.steg-nummer){
    font-family:'Reem Kufi', sans-serif;
    font-size:1rem;
    line-height:1.7;
    color:var(--slate);
    margin:0.85rem 0 0;
}

/* ---------- Notis og avsluttende oppfordring ---------- */

.side-kurs .menu-note{
    background-color:var(--kald);
    border-left:3px solid var(--aksent);
    border-radius:0;
}

.side-kurs .menu-note p{
    font-family:'Reem Kufi', sans-serif;
    color:var(--slate);
    line-height:1.7;
}

/* Samme brune som faktabanneret og footeren — ellers blir det en synlig
   skjøt mellom to ulike mørke toner rett over footeren. */
.kurs-cta{
    background-color:var(--brun);
    padding:4.5rem 7%;
    margin-top:5.5rem;
    text-align:center;
}

.side-kurs .kurs-cta h2{
    font-size:clamp(1.7rem, 3vw, 2.4rem);
    color:white;
    margin:1.25rem 0 0;
}

.kurs-cta .kurs-eyebrow{
    justify-content:center;
}

.kurs-cta p:not(.kurs-eyebrow){
    font-family:'Reem Kufi', sans-serif;
    font-size:1.08rem;
    line-height:1.7;
    color:#c4b7a7;
    max-width:44rem;
    margin:1.25rem auto 0;
}

.kurs-cta .kurs-knapper{
    justify-content:center;
}

/* ---------- Mobil og nettbrett ---------- */

@media only screen and (max-width: 991px) {
    .kurs-hero{
        min-height:52vh;
    }

    .kurs-hero-innhold{
        padding:0 1.75rem 3rem;
    }

    .kurs-hero::after{
        background:linear-gradient(to bottom, rgba(25, 33, 42, 0.5) 20%, rgba(25, 33, 42, 0.92));
    }

    .fakta-rad{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        padding:0 1.25rem;
    }

    .fakta-rad div{
        padding:1.5rem 0.75rem;
        border-top:1px solid var(--brun-strek);
    }

    .fakta-rad div:nth-child(-n+2){
        border-top:none;
    }

    .fakta-rad div:nth-child(odd){
        border-left:none;
    }

    .kurs-blokk{
        grid-template-columns:minmax(0, 1fr);
        gap:2.5rem;
        margin-top:3rem;
    }

    /* Bildet skal ligge øverst også når teksten står først i koden. */
    .kurs-blokk-bilde{
        order:-1;
    }

    .kurs-bilder{
        padding-bottom:2.5rem;
    }

    .kurs-bilder::before,
    .kurs-bilde-ramme::after{
        width:6rem;
        height:6rem;
    }

    .steg-grid{
        grid-template-columns:minmax(0, 1fr);
        gap:1.5rem;
        margin-top:2.5rem;
    }

    .kurs-cta{
        padding:3.5rem 1.5rem;
        margin-top:4rem;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .kurs-blokk{
        gap:3rem;
    }

    .steg-grid{
        gap:1.35rem;
    }

    .steg{
        padding:1.85rem 1.5rem 2rem;
    }
}