/* ══════════════════════════════════════════
   LANDINGSSIDA — «Nattmodus»

   Designet crew stemte fram (designforslag 01). Skissen ligger i
   `_tmp/landingside-forslag/01-nattmodus.html`.

   ── Hvorfor egen palett, og hvorfor den er SCOPET ──

   Nattmodus har sin egen fargeverden: nesten svart bunn, og en gradient av
   cyan → fiolett → rav som går igjen i knapper, tall og aksenter. Den er
   riktig for et førsteinntrykk og feil for et arbeidsverktøy — /app og /crew
   skal fortsatt være rolige.

   Derfor er alt her scopet til `body.public-page`, som `app.js` setter på
   offentlige ruter. Ingen av `--vl-*`-tokenene røres; de nye lever ved siden
   av under `--lp-*`.

   ── Forholdet til public.css ──

   `public.css` beholder listesidene og detaljsidene (arrangementer, spill,
   turneringer). Denne fila er landingssidas egne seksjoner pluss det delte
   krommet — navbar og bunntekst — som designet også endrer.
   ══════════════════════════════════════════ */

body.public-page {
    --lp-bg: #06070d;
    --lp-bg-2: #0b0d18;
    --lp-surface: #11142099;
    /* `--lp-surface` lagt over `--lp-bg` — altsaa fargen oeyet faktisk ser paa
       et `.lp-note`. Trengs der noe maa TONE UT mot kortet: en gradient mot
       en halvgjennomsiktig farge blir dobbelt saa moerk i bunnen. */
    --lp-surface-solid: #0d0f18;
    --lp-line: #ffffff14;
    --lp-ink: #eef1ff;
    --lp-muted: #9aa3c4;
    /* Loeftet fra #6a7297, som ga 4,28:1 mot --lp-bg — under AA-kravet paa
       4,5:1 for brodtekst. Brukes bl.a. paa datoene i nyhetskortene, som
       staar paa 0,82 rem. #7c85ab gir 5,56:1. Samme klasse feil som
       beslutning 202 rettet for .cms-content a. */
    --lp-dim: #7c85ab;

    --lp-cyan: #3fe3ff;
    --lp-amber: #ecab35;
    --lp-violet: #7b5cff;
    --lp-grad: linear-gradient(100deg, var(--lp-cyan), var(--lp-violet) 52%, var(--lp-amber));

    --lp-shell: min(1180px, calc(100% - 2.5rem));
    --lp-display: "Space Grotesk", Inter, -apple-system, system-ui, sans-serif;

    background: var(--lp-bg) !important;
    color: var(--lp-ink);
}

/* Overskrifter på offentlige sider bruker merkevarens display-type.
   Brødteksten blir Inter, som resten av appen. */
body.public-page h1,
body.public-page h2,
body.public-page h3,
body.public-page .lp-display {
    font-family: var(--lp-display);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.lp-shell {
    width: var(--lp-shell);
    margin-inline: auto;
}

.lp-grad-text {
    background: var(--lp-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Knapper ───────────────────────────────────────────────── */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.94rem;
    text-decoration: none;
    border: 1px solid transparent;
    /* Uten denne arver en <button> nettleserens grae standardbakgrunn.
       Klassen ble foerst bare brukt paa <a>, som ikke har noen — foerste
       `<button class="lp-btn lp-btn-ghost">` kom ut som en grae pille midt i
       en ellers gjennomsiktig rad. `lp-btn-primary` setter sin egen og er
       uberort. */
    background: transparent;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.25s, background 0.2s;
}
.lp-btn-primary {
    background: var(--lp-grad);
    color: #05060c;
    box-shadow: 0 6px 30px -8px var(--lp-violet);
}
.lp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px -8px var(--lp-violet);
    color: #05060c;
}
.lp-btn-ghost { border-color: #ffffff2e; color: var(--lp-ink); }
.lp-btn-ghost:hover { background: #ffffff0d; border-color: #ffffff55; color: var(--lp-ink); }

/* ── Hero ──────────────────────────────────────────────────── */

.lp-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 8rem 0 5rem;
    overflow: hidden;
}

/* Lysene bak. Tre myke flekker som driver sakte — nok til at flata lever,
   lite nok til at ingen ser på det. */
.lp-hero::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto;
    height: 150%;
    background:
        radial-gradient(48rem 34rem at 18% 8%, #7b5cff44, transparent 62%),
        radial-gradient(40rem 30rem at 88% 22%, #ecab3526, transparent 60%),
        radial-gradient(46rem 32rem at 55% 96%, #3fe3ff2e, transparent 62%);
    filter: blur(6px);
    animation: lp-drift 24s ease-in-out infinite alternate;
}
@keyframes lp-drift { to { transform: translate3d(-3%, 2%, 0) scale(1.08); } }

/* Rutenettet, maskert bort mot kantene så det ikke blir en ramme. */
.lp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(#ffffff08 1px, transparent 1px),
        linear-gradient(90deg, #ffffff08 1px, transparent 1px);
    background-size: 66px 66px;
    mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
}
.lp-hero .lp-shell { position: relative; z-index: 2; }

/* Hero-bilde fra CMS-et legger seg UNDER lysene, ikke over.
   «Nattmodus» er tegnet UTEN foto — lysene og rutenettet er bakgrunnen. Er et
   bilde likevel valgt, skal det ligge som en stemning bak, ikke ta over: uten
   skjermen under druknet både teksten og gradientene i motivet. */
.lp-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    z-index: 0;
}

/* Skjermen er kraftigst der teksten står — til venstre og mot bunnen. */
.lp-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, #06070df7 0%, #06070de0 42%, #06070d70 100%),
        linear-gradient(180deg, #06070dcc 0%, transparent 30%, #06070d 100%);
}

.lp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1rem;
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    background: #ffffff08;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-muted);
    backdrop-filter: blur(6px);
}
.lp-kicker b { color: var(--lp-cyan); font-weight: 600; }

body.public-page .lp-hero h1 {
    font-size: clamp(3.1rem, 11vw, 8.4rem);
    font-weight: 700;
    margin: 1.4rem 0 0;
    text-transform: uppercase;
}

/* Ordmerket ER merkevarens display-type, så det ERSTATTER den store satsen
   i stedet for å stå ved siden av den. */
.lp-hero-logo {
    width: min(600px, 84%);
    height: auto;
    display: block;
    margin: 1.8rem 0 0;
    filter: drop-shadow(0 14px 44px #ecab3540);
}

.lp-lede {
    max-width: 36rem;
    color: var(--lp-muted);
    font-size: clamp(1.02rem, 2vw, 1.22rem);
    margin: 1.6rem 0 0;
}

.lp-hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.4rem; }

.lp-hero-meta {
    margin-top: 3.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2.6rem;
    font-size: 0.9rem;
    color: var(--lp-dim);
}
.lp-hero-meta b {
    display: block;
    color: var(--lp-ink);
    font-family: var(--lp-display);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* ── Nedtelling ────────────────────────────────────────────── */

.lp-count { display: flex; gap: 0.6rem; margin-top: 2.6rem; flex-wrap: wrap; }
.lp-count > div {
    min-width: 5.4rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--lp-line);
    border-radius: 14px;
    background: #0d101c99;
    backdrop-filter: blur(10px);
    text-align: center;
}
.lp-count b {
    display: block;
    font-family: var(--lp-display);
    font-size: 2rem;
    font-weight: 700;
    /* Uten dette hopper bredden for hvert sekund som tikker. */
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.lp-count small {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lp-dim);
}

/* Nedtelling mot LAN-et. Ingen ramme og ingen farge — forskjellen paa denne og
   `.lp-frist` er nettopp at denne ikke roper. Men overskrifta staar, ellers er
   fire tall uten et subjekt: heroen nevner tre datoer, og leseren skal ikke
   gjette hvilken av dem klokka gaar mot.

   `.lp-count` har selv `margin-top`, saa avstanden ovenfra styres her og
   nullstilles inni — ellers blir den dobbel, samme grep som i `.lp-frist`. */
.lp-teller { margin-top: 2.6rem; }
.lp-teller-topp {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lp-dim);
}
.lp-teller .lp-count { margin-top: 0.85rem; }

/* Nedtelling mot en FRIST — rammen skiller den fra nedtellingen mot LAN-et,
   som er et loefte og ikke et varsel.

   Rav og ikke rodt: `--lp-amber` staar i paletten, rodt gjor det ikke, og
   rodt er reservert for det ugjenkallelige. Et rodt felt paa en forside leses
   som at noe er galt med SIDA, ikke med tida man har igjen.

   Fargen brukes med lav dekkevne paa kant og flate, ikke som fyll: heroen har
   alt et bakgrunnsbilde og tre lysflekker bak seg, og et mettet felt oppaa det
   blir stoy. */
.lp-frist {
    margin-top: 2.4rem;
    padding: 1.3rem 1.5rem 1.5rem;
    border: 1px solid #ecab3559;
    border-radius: 18px;
    background: #ecab350f;
    /* Uten dette strekker feltet seg over hele heroens bredde paa store
       skjermer, og nedtellingen blir liggende aalene i et tomt felt. */
    display: inline-block;
}
.lp-frist-topp {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lp-amber);
}
/* Nedtellingen inni har alt avstand ovenfra via `.lp-count`; her styrer
   rammen avstanden, ellers blir det dobbelt. */
.lp-frist .lp-count { margin-top: 1rem; }
.lp-frist-dato {
    margin: 1rem 0 0;
    font-size: 0.95rem;
    color: var(--lp-ink);
    /* Datoen er setningen folk faktisk planlegger etter — den skal ikke
       dempes bort slik smaatekst ellers blir i Nattmodus. */
}

/* Paa smal skjerm faar feltet staa fullbredde; `inline-block` over ville latt
   det krympe rundt en nedtelling som alt har brutt til to rader. */
@media (max-width: 560px) {
    .lp-frist { display: block; padding: 1.1rem 1.1rem 1.3rem; }
}

/* ── Seksjoner ─────────────────────────────────────────────── */

.lp-section { padding: 6.5rem 0; position: relative; }
.lp-section--tint { background: linear-gradient(180deg, transparent, var(--lp-bg-2) 30%, var(--lp-bg-2) 70%, transparent); }

/*
 * Bakgrunn valgt i CMS-et. `--bg-lys` er et HVITT felt midt i en mork side —
 * det er der de fleste sponsorlogoer hoerer hjemme, siden de er tegnet for
 * papir. Da maa ogsaa overskriften snu: en lys overskrift paa hvitt er
 * usynlig, og det ville vaert en felle aa la redaktoren gaa i.
 */
.lp-section--bg-dempet { background: var(--lp-bg-2); }
.lp-section--bg-lys { background: #f4f6f8; }
.lp-section--bg-lys .lp-sec-head .lp-num { color: #0a6c7e; }
body.public-page .lp-section--bg-lys .lp-sec-head h2 { color: #101820; }
.lp-section--bg-lys .lp-sec-head p { color: #46545f; }

.lp-sec-head { max-width: 44rem; margin-bottom: 3.2rem; }
.lp-sec-head .lp-num {
    font-family: var(--lp-display);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--lp-cyan);
    text-transform: uppercase;
}
body.public-page .lp-sec-head h2 {
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    margin: 0.7rem 0 0;
    font-weight: 700;
}
.lp-sec-head p { color: var(--lp-muted); margin: 1rem 0 0; }

/* ── Tallstripe ────────────────────────────────────────────── */

.lp-strip {
    border-block: 1px solid var(--lp-line);
    background: linear-gradient(180deg, #ffffff05, transparent);
}
.lp-strip .lp-shell {
    display: grid;
    /* Følger ANTALLET celler, ikke et fast tall.
       Sto `repeat(4, 1fr)` før. Cellene redigeres i CMS-et, og da fjernet vi
       én — «3 turneringer», som var feil — og satt igjen med et tomt felt der
       linjefargen skinte gjennom. Et rutenett som forutsetter fire, brekker
       første gang noen har tre.
       `grid-auto-flow: column` + `1fr` gir nøyaktig så mange like kolonner som
       det finnes celler. */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    /* 1px gap på en linjefarget bakgrunn gir skillelinjer uten border-krangel
       i hjørnene. */
    gap: 1px;
    background: var(--lp-line);
}
.lp-strip .lp-cell { background: var(--lp-bg); padding: 2.4rem 1.2rem; text-align: center; }
.lp-strip b {
    display: block;
    font-family: var(--lp-display);
    font-size: clamp(2rem, 4.5vw, 2.9rem);
    font-weight: 700;
}
.lp-strip small {
    color: var(--lp-dim);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
@media (max-width: 700px) {
    .lp-strip .lp-shell {
        grid-auto-flow: row;
        grid-template-columns: 1fr 1fr;
    }
    /* Odde antall celler ville ellers latt den siste stå med et tomt felt ved
       siden av seg — samme hull som på skrivebordet, bare på rad to. */
    .lp-strip .lp-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── Kort ──────────────────────────────────────────────────── */

.lp-cards {
    display: grid;
    /* `auto-fill`, ikke `auto-fit`: med auto-fit kollapser de tomme sporene, og
       ÉN turnering blir et kort på 1180px. Med auto-fill står sporene igjen, og
       kortet beholder sin bredde uansett hvor mange det er. */
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.1rem;
}
.lp-card {
    padding: 1.9rem;
    border: 1px solid var(--lp-line);
    border-radius: 20px;
    background: var(--lp-surface);
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.lp-card:hover { border-color: #ffffff33; transform: translateY(-4px); color: inherit; }
.lp-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--lp-grad);
    opacity: 0;
    transition: opacity 0.25s;
}
.lp-card:hover::before { opacity: 1; }
.lp-card .lp-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #ffffff0d;
    border: 1px solid var(--lp-line);
    font-size: 1.3rem;
    margin-bottom: 1.1rem;
    overflow: hidden;
}
.lp-card .lp-ico img { width: 100%; height: 100%; object-fit: cover; }
body.public-page .lp-card h3 { font-size: 1.22rem; margin: 0 0 0.55rem; }
.lp-card p { color: var(--lp-muted); font-size: 0.94rem; margin: 0; }
/* Et kort som ikke er en lenke skal ikke love at det er en. Uten dette gir
   det loft og gradientstrek på hover — en klikkeflate som ikke finnes. */
.lp-card--static { cursor: default; }
.lp-card--static:hover { border-color: var(--lp-line); transform: none; }
.lp-card--static:hover::before { opacity: 0; }

.lp-card-cover {
    height: 150px;
    margin: -1.9rem -1.9rem 1.3rem;
    background-size: cover;
    background-position: center;
    background-color: #ffffff08;
}

/* ── Setekart-teaser ───────────────────────────────────────── */

.lp-seat-wrap {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 3.4rem;
    align-items: center;
}
@media (max-width: 900px) { .lp-seat-wrap { grid-template-columns: 1fr; gap: 2.4rem; } }

.lp-seatmap {
    border: 1px solid var(--lp-line);
    border-radius: 22px;
    padding: 1.5rem;
    background: #0a0c16;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 5px;
    box-shadow: inset 0 0 60px #7b5cff1a;
}
.lp-seatmap i { aspect-ratio: 1; border-radius: 3px; background: #ffffff12; }
.lp-seatmap i.t { background: var(--lp-cyan); box-shadow: 0 0 8px #3fe3ff88; }
.lp-seatmap i.l { background: #ffffff05; }
.lp-seatmap i.m { background: var(--lp-amber); box-shadow: 0 0 8px #ecab3599; }

.lp-legend {
    display: flex;
    gap: 1.4rem;
    flex-wrap: wrap;
    margin-top: 1.2rem;
    font-size: 0.82rem;
    color: var(--lp-dim);
}
.lp-legend span { display: flex; align-items: center; gap: 0.45rem; }
.lp-legend s { width: 10px; height: 10px; border-radius: 3px; display: block; text-decoration: none; }

.news-date {
    color: var(--vl-text-muted);
    font-size: 0.86rem;
    margin: 0 0 1.6rem;
}

/* ── Brødtekst fra CMS-et ──────────────────────────────────── */

/* ── Tre farger, tre roller ──

   Da overskriftene ble amber, ble den lysnede fioletten (#a99bff) en TREDJE
   kulor som ikke gjorde noen jobb. Paa en side med sju lenker i en punktliste
   rett under en amber overskrift kranglet de to.

     AMBER   struktur — overskrifter, skillelinjer
     CYAN    handling — lenker, kjennemerker
     HVIT    tittel og underoverskrift

   Beslutning 202 lysnet fioletten fordi #6c5ce7 ga 4,1:1 mot Nattmodus. Det
   var et KONTRASTvalg, ikke et harmonivalg — cyan gir 13,1:1 og bryter derfor
   ingenting i den beslutningen.

   Hover gaar til hvitt, siden cyan naa er hviletilstanden. */
body.public-page .cms-content a {
    color: var(--lp-cyan);
    text-decoration-color: #3fe3ff59;
}
body.public-page .cms-content a:hover {
    color: #fff;
    text-decoration-color: #fff;
}

body.public-page .cms-content blockquote {
    border-left-color: var(--lp-violet);
}

/* ── Overskrifter i CMS-innhold: ÉN familie ──

   Foerste utgave ga hvert nivaa sin egen farge: gradient paa tittelen, amber
   paa h2, hvit paa h3, amber igjen paa h4. Fargen markerte da INGENTING — den
   vekslet, og leseren kunne ikke bruke den til aa vite hvor dypt hun var.

   Word, nyhetssider og trykte dokumenter gjor det motsatte: alle overskrifter
   deler farge, og STORRELSEN baerer rangen. Sidetittelen er ikke noe utenfor
   dokumentet, den er dokumentets h1.

   ── Hvorfor to trinn og ikke tre ──

   Malt mot bakgrunnen:

     amber-lys  #f7c552  12,5:1     mot amber:      1,25:1  nesten identiske
     amber      #ecab35  10,0:1     mot amber-dyp:  1,47:1  skilles
     amber-dyp  #c98a12   6,8:1

   Et trinn som ikke SES er ikke et trinn. amber-lys ligger for taett paa
   amber, saa familien er to nivaaer: full amber paa tittel og seksjon,
   dyp amber paa underoverskriftene.

   amber-dyp holder 6,8:1 — over kravet paa 4,5:1 selv for det minste
   nivaaet, saa den dypere tonen koster ingen lesbarhet.

   h5/h6 staar utenfor familien: de er ETIKETTER i versaler, en annen slags
   ting, ikke et svakere trinn paa samme stige. */

body.public-page .cms-content {
    color: #c7cee0;
}

body.public-page .cms-page-title,
body.public-page .cms-content h1,
body.public-page .cms-content h2 {
    color: var(--vl-amber);
}

body.public-page .cms-content h3,
body.public-page .cms-content h4 {
    color: var(--vl-amber-dyp);
}

body.public-page .cms-content h5,
body.public-page .cms-content h6 {
    color: var(--lp-dim);
}

/* Streken hoerer til SEKSJONEN, altsaa h2. Den satt tidligere ogsaa paa h3,
   den gang fargen skilte de to — naa gjor storrelsen og tonen den jobben, og
   en strek paa begge ville sagt «ny seksjon» to ganger. */
body.public-page .cms-content h2 {
    padding-top: 1.8rem;
    border-top: 1px solid #ecab3540;
    line-height: 1.2;
}

body.public-page .cms-content h3 { line-height: 1.3; }
body.public-page .cms-content h4 { line-height: 1.35; }

body.public-page .cms-content > :is(h2, h3):first-child {
    padding-top: 0;
    border-top: none;
}

/* Tittelen: samme amber, men storst — og en strek under som avslutter
   sidehodet. */
body.public-page .cms-page-title {
    padding-bottom: 1.25rem;
    border-bottom: 2px solid #ecab3559;
}

/* Fet tekst i et avsnitt brukes av forfatterne som en slags mini-overskrift.
   Den skal skille seg fra brodteksten, men ikke ta plass i overskrifts-
   familien — derfor lysstyrke og ikke amber. */
body.public-page .cms-content strong {
    color: var(--lp-ink);
    font-weight: 600;
}

/* ── Lenker: cyan ──

   Overskriftene eier amber. Lenkene maa da ha sin egen farge, ellers blir en
   punktliste med sju lenker seende ut som sju overskrifter.

   Beslutning 202 lysnet den opprinnelige fioletten (#6c5ce7 ga 4,1:1 mot
   Nattmodus). Det var et KONTRASTvalg; cyan gir 13,1:1 og bryter ingenting
   i den beslutningen.

   Understreken er ikke pynt: cyan og brodteksten har nesten samme LYSHET
   (1,02:1), saa for en fargeblind leser er understreken det eneste som sier
   at dette er en lenke. */
body.public-page .cms-content a {
    color: var(--lp-cyan);
    text-decoration-color: #3fe3ff59;
}
body.public-page .cms-content a:hover {
    color: #fff;
    text-decoration-color: #fff;
}

/* ── Billettsida (/billetter) ──────────────────────────────── */

/* Nedtellingen staar for seg selv her, uten hero rundt. */
.lp-section .lp-count { margin-top: 2.2rem; }

.lp-note {
    margin-top: 2.6rem;
    padding: 1.6rem 1.8rem;
    border: 1px solid var(--lp-line);
    border-radius: 18px;
    background: var(--lp-surface);
    backdrop-filter: blur(8px);
}
body.public-page .lp-note h3 { font-size: 1.15rem; margin: 0 0 0.55rem; }
.lp-note p { color: var(--lp-muted); margin: 0; font-size: 0.95rem; }
.lp-note .lp-hero-cta { margin-top: 1.4rem; }

.lp-ok {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem !important;
    color: var(--lp-cyan) !important;
}

/* ── Stegene ──
   Nummeret ligger i sin egen kolonne, ikke som en `list-style`. En `<ol>` med
   standardmarkoer kan ikke tegne tallet som en sirkel, og et steg man har
   gjort skal kunne bytte tallet mot en hake. Semantikken er fortsatt en
   nummerert liste — det er bare markoeren som er vaar. */

.lp-steps { margin-top: 3rem; }
body.public-page .lp-steps h3 { font-size: 1.15rem; margin: 0 0 1.4rem; }

.lp-steps ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.lp-steps li {
    display: flex;
    gap: 1.1rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--lp-line);
}
.lp-steps li:first-child { border-top: 0; }

.lp-steps-num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--lp-line);
    background: #ffffff0a;
    font-family: var(--lp-display);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--lp-muted);
}

.lp-steps strong { display: block; font-size: 1rem; margin-bottom: 0.25rem; }
.lp-steps p { color: var(--lp-muted); font-size: 0.92rem; margin: 0; }

/* Et steg som er gjort skal se gjort ut, ikke bare ha en hake. */
.lp-steps .er-gjort .lp-steps-num {
    background: #3fe3ff1f;
    border-color: #3fe3ff55;
    color: var(--lp-cyan);
}
.lp-steps .er-gjort strong { color: var(--lp-muted); }

/* Henvisningen til vilkaarene under stegene. `.lp-steps p` er allerede dempet
   og liten — denne skal staa litt fra lista, og lenka skal vaere synlig. */
.lp-steps-note {
    margin-top: 1.4rem !important;
    font-size: 0.9rem;
    color: var(--lp-muted);
}

.lp-steps-note a { color: var(--lp-cyan); text-underline-offset: 2px; }

/* ── Setekartsida (/setekart) ──────────────────────────────── */

/* Selve kartet tegnes av `seatmap-viewer.js` og har kassas farger — det er
   med vilje, se toppen av `pages/public/seatmap.js`. Her er bare rammen. */
.lp-map {
    border: 1px solid var(--lp-line);
    border-radius: 22px;
    background: #0a0c16;
    padding: 1.4rem;
    overflow: auto;
    margin-top: 2.2rem;
}

.lp-map-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2.8rem;
}
.lp-map-stats b {
    display: block;
    font-family: var(--lp-display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
}
.lp-map-stats small {
    color: var(--lp-dim);
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* ── Billetter ─────────────────────────────────────────────── */

.lp-tiers {
    display: grid;
    /* Billettene er få og skal fylle bredden — her er auto-fit riktig. */
    grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
    gap: 1.2rem;
    /* `stretch`, ikke `start`: kortene skal ende på samme linje selv om ett
       av dem har en setning mer i lista. Ulik høyde leses som at det ene
       tilbudet er «mindre», ikke bare kortere beskrevet. */
    align-items: stretch;
    max-width: 980px;
}
.lp-tier {
    border: 1px solid var(--lp-line);
    border-radius: 22px;
    padding: 2rem;
    background: var(--lp-surface);
    backdrop-filter: blur(8px);
    position: relative;
    /* Kolonne med lista som strekkfelt, så kjøpsknappene står på samme
       høyde i alle kortene — det er dem øyet sammenligner. */
    display: flex;
    flex-direction: column;
}
.lp-tier ul { flex: 1; }
.lp-tier.hot {
    border-color: #7b5cff66;
    background: linear-gradient(180deg, #7b5cff1f, #11142099);
    box-shadow: 0 20px 60px -30px var(--lp-violet);
}
.lp-tier .lp-flag {
    position: absolute;
    top: -11px;
    left: 2rem;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    background: var(--lp-grad);
    color: #05060c;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
body.public-page .lp-tier h3 {
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lp-muted);
    font-weight: 500;
    margin: 0;
}
.lp-price {
    font-family: var(--lp-display);
    font-size: 3rem;
    font-weight: 700;
    margin: 0.6rem 0 0.3rem;
}
.lp-price small { font-size: 1rem; color: var(--lp-dim); font-weight: 400; }
/* Beskrivelsen er en SETNING om hva billetten er, ikke en av tingene du får.
   Som fjerde kulepunkt mellom «Strøm og kablet nett» og «Adgang hele
   arrangementet» leses den som en feil. Den står derfor for seg selv, under
   prisen, før lista over hva som følger med. */
.lp-tier-desc {
    margin: 0.9rem 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--lp-dim);
}

.lp-tier ul { list-style: none; padding: 0; margin: 1.5rem 0 2rem; font-size: 0.92rem; color: var(--lp-muted); }
.lp-tier li { padding: 0.5rem 0 0.5rem 1.6rem; position: relative; border-top: 1px solid var(--lp-line); }
.lp-tier li:first-child { border-top: 0; }
.lp-tier li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.05rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lp-cyan);
}
.lp-tier .lp-btn { width: 100%; }

/* ── FAQ ───────────────────────────────────────────────────── */

.lp-faq details { border-bottom: 1px solid var(--lp-line); padding: 1.25rem 0; }
.lp-faq summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--lp-display);
    font-size: 1.08rem;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
    content: "+";
    color: var(--lp-cyan);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.2s;
}
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq .lp-answer { color: var(--lp-muted); margin: 0.9rem 0 0; max-width: 52rem; font-size: 0.96rem; }
.lp-faq .lp-answer p:last-child { margin-bottom: 0; }

/* ── Avslutning ────────────────────────────────────────────── */

.lp-finale {
    text-align: center;
    border-top: 1px solid var(--lp-line);
    background: radial-gradient(50rem 26rem at 50% 0%, #7b5cff2e, transparent 68%);
}
body.public-page .lp-finale h2 { font-size: clamp(2.2rem, 6vw, 4.2rem); text-transform: uppercase; }
.lp-finale .lp-lede { margin: 1.4rem auto 0; text-align: center; }
.lp-finale .lp-hero-cta { justify-content: center; }

/* ── Sponsorer ─────────────────────────────────────────────── */

/*
 * En rad per niva, og storrelsen faller med nivaet.
 *
 * Gull ovest og storst. Uten det er nivaet en opplysning ingen kan se: en
 * gullsponsor har betalt for mer plass enn en partner, og en felles rad der
 * alle er like store gir den ingenting.
 *
 * ── Hvorfor flisene er naer kvadratiske ──
 *
 * Flisa var 150 x 84 med 1rem padding — et innhold paa 118 x 52. Med
 * `object-fit: contain` binder den KORTESTE sida, og her var det hoyden: en
 * kvadratisk logo ble 52 x 52 i en flis paa 150 x 84, altsaa under en
 * tredjedel av ruta si, og en staaende ble 26 x 52.
 *
 * Sponsorlogoer kommer i alle forhold (452 x 78, 1752 x 528, 1276 x 1080), og
 * en liggende flis kan bare vise den ene av dem stort. Derfor er forholdet
 * naa ~1.55:1 paa alle nivaer — det er stoerrelsen som skiller dem, ikke
 * formen.
 */

.lp-sponsors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.4rem;
}

/* Luft MELLOM nivaaene, saa radene leses som trinn og ikke som én blokk. */
.lp-sponsors + .lp-sponsors { margin-top: 1.6rem; }

.lp-sponsor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 16px;
    transition: border-color 0.2s, transform 0.2s, background 0.2s;
}

/*
 * ── Utseendet er redaktorens valg ──
 *
 * Sponsorlogoer er ikke vaare. De kommer som de kommer: morke logoer tegnet
 * for hvitt papir, hvite logoer tegnet for mork bakgrunn, noen med sin egen
 * bakgrunnsfarge bakt inn i fila. Uten disse variantene er svaret paa «denne
 * logoen forsvinner» en kodeendring og en utrulling — hver gang.
 *
 * Variantene settes i CMS-et (seksjonen Sponsorer) og henger paa veggen, ikke
 * paa hver flis, saa en flis aldri kan komme i utakt med naboen.
 */
.lp-sponsorwall--boks-mork .lp-sponsor {
    background: #ffffff06;
    border: 1px solid var(--lp-line);
}
.lp-sponsorwall--boks-lys .lp-sponsor {
    background: #ffffff14;
    border: 1px solid #ffffff26;
}
.lp-sponsorwall--boks-hvit .lp-sponsor {
    background: #ffffff;
    border: 1px solid #ffffff;
}
.lp-sponsorwall--uten-boks .lp-sponsor {
    background: transparent;
    border: 1px solid transparent;
}

/* Gull faar litt mer naervaer — men bare der en boks faktisk tegnes. */
.lp-sponsorwall--boks-mork .lp-sponsor--gold {
    border-color: #ffffff1f;
    background: #ffffff0a;
}

.lp-sponsor--gold    { width: 240px; height: 154px; padding: 0.9rem; }
.lp-sponsor--silver  { width: 196px; height: 126px; }
.lp-sponsor--bronze  { width: 164px; height: 106px; }
.lp-sponsor--partner { width: 140px; height: 92px; padding: 0.6rem; }

.lp-sponsor:hover { border-color: #ffffff33; transform: translateY(-3px); }
.lp-sponsorwall--boks-hvit .lp-sponsor:hover { border-color: #ffffff; }
/* Uten boks skal det heller ikke komme én ved hover — bare loeftet. */
.lp-sponsorwall--uten-boks .lp-sponsor:hover { border-color: transparent; }
.lp-sponsor img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lp-sponsor i { font-size: 1.6rem; color: var(--lp-dim); }
/* Reserveikonet (sponsor uten logo) maa ogsaa synes paa lys flate. */
.lp-sponsorwall--boks-hvit .lp-sponsor i,
.lp-section--bg-lys .lp-sponsorwall--uten-boks .lp-sponsor i { color: #8a97a3; }

@media (max-width: 480px) {
    /* To fliser + gap maa faa plass paa 360 px, ogsaa paa gull. */
    .lp-sponsors { gap: 0.8rem; }
    .lp-sponsors + .lp-sponsors { margin-top: 1.1rem; }
    .lp-sponsor--gold    { width: 168px; height: 108px; padding: 0.7rem; }
    .lp-sponsor--silver  { width: 152px; height: 98px; }
    .lp-sponsor--bronze  { width: 140px; height: 92px; }
    .lp-sponsor--partner { width: 128px; height: 84px; }
}

/* ── Klippet innhold ───────────────────────────────────────── */

/* Et langt regelverk skal ikke dytte alt annet tretti skjermer ned. Taket
   settes av `klipp()` i `_lp.js`, som maaler FOERST — et kort regelsett faar
   verken klipp eller knapp. Se design/public.md. */
.lp-klipp {
    overflow: hidden;
    position: relative;
}

/* Kanten skal si at det er MER, ikke at teksten slutter. En hard kant leses
   som slutten paa innholdet; en uttoning leses som et snitt. */
.lp-klipp::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5rem;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(13, 15, 24, 0), var(--lp-surface-solid));
}

.lp-klipp--apen { overflow: visible; }
.lp-klipp--apen::after { content: none; }

.lp-klipp-knapp { margin-top: 1.1rem; }

/* ── Rull inn ──────────────────────────────────────────────── */

.lp-rv {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.lp-rv.in { opacity: 1; transform: none; }

/* Den som har bedt om mindre bevegelse skal ikke få en side som glir og
   driver. Alt vises med én gang, uten animasjon. */
@media (prefers-reduced-motion: reduce) {
    .lp-rv { opacity: 1; transform: none; transition: none; }
    .lp-hero::before { animation: none; }
    .lp-btn:hover, .lp-card:hover, .lp-sponsor:hover { transform: none; }
}

/* CMS-et viser forsiden i en iframe som er smalere enn en skjerm. Uten dette
   ville `100svh` gjort heroen like høy som hele forhåndsvisningen, og
   redaktøren måtte scrollet forbi den for å se noe annet. */
@media (max-height: 700px) {
    .lp-hero { min-height: auto; padding: 6rem 0 4rem; }
}

/* ══════════════════════════════════════════
   DELT KROM — menylinje og bunntekst

   Begge vises på ALLE offentlige sider, ikke bare forsiden, så de styles her
   framfor i seksjonene over. `public.css` beholder resten av listesidene.
   ══════════════════════════════════════════ */

body.public-page .public-navbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    padding: 1rem 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    backdrop-filter: none;
    transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
}

/* Gjennomsiktig over heroen, med bakgrunn så snart man ruller — eller med
   én gang på sider som ikke har en hero å ligge oppå. */
body.public-page .public-navbar.stuck {
    background: #06070de6;
    backdrop-filter: blur(14px);
    border-bottom-color: var(--lp-line);
}

body.public-page .public-navbar-inner {
    width: var(--lp-shell);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0;
}

body.public-page .public-navbar-brand { display: flex; align-items: center; height: 26px; }
body.public-page .public-navbar-brand img { height: 100%; width: auto; display: block; }

body.public-page .public-navbar-links {
    margin-left: auto;
    display: flex;
    gap: 1.9rem;
    font-size: 0.9rem;
    color: var(--lp-muted);
}
body.public-page .public-navbar-links a {
    color: var(--lp-muted);
    text-decoration: none;
    transition: color 0.2s;
    padding: 0;
    background: none;
}
body.public-page .public-navbar-links a:hover,
body.public-page .public-navbar-links a.active { color: var(--lp-ink); background: none; }

body.public-page .public-navbar-actions { display: flex; align-items: center; gap: 0.6rem; }

/* Knappene i linja er mindre enn de i innholdet — de er krom, ikke tilbud. */
.lp-btn-sm { padding: 0.5rem 1.05rem; font-size: 0.85rem; }

/* ── Menylinja paa smal skjerm ──
   Bade lenkene OG knappen legger seg i nedtrekket. «Gaa til app» ved siden av
   logoen og hamburgeren stjal halve linja og brakk over to linjer paa en
   telefon — og den er ikke viktigere enn de fem lenkene den stod foran.

   Nedtrekket er `flex-wrap` paa selve linja, ikke et absolutt plassert panel:
   da flyter lenkene og knappen naturlig etter hverandre, og hoyden foelger
   innholdet uten at noe maa regnes ut. */
@media (max-width: 860px) {
    body.public-page .public-navbar-links,
    body.public-page .public-navbar-actions { display: none; }

    body.public-page .public-navbar-inner {
        flex-wrap: wrap;
        gap: 0;
    }

    /* Rekkefolgen maa settes eksplisitt. Hamburgeren er siste barn i markupen,
       saa naar lenkene og knappen legger seg paa hver sin fulle rad, ville den
       havnet UNDER dem — krysset man skal lukke med endte nederst paa
       skjermen. `order` holder den oppe ved siden av logoen. */
    body.public-page .public-navbar-brand { order: 1; margin-right: auto; }
    body.public-page .public-navbar-toggle { order: 2; }
    body.public-page .public-navbar-links { order: 3; }
    body.public-page .public-navbar-actions { order: 4; }

    body.public-page .public-navbar.stuck,
    body.public-page .public-navbar:has(.public-navbar-inner.open) {
        background: #06070df2;
        backdrop-filter: blur(14px);
        border-bottom-color: var(--lp-line);
    }

    body.public-page .public-navbar-inner.open .public-navbar-links {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
        margin: 0.9rem 0 0;
        padding-top: 0.4rem;
        border-top: 1px solid var(--lp-line);
    }
    body.public-page .public-navbar-inner.open .public-navbar-links a { padding: 0.75rem 0; }

    body.public-page .public-navbar-inner.open .public-navbar-actions {
        display: flex;
        width: 100%;
        padding: 0.4rem 0 1rem;
    }
    body.public-page .public-navbar-inner.open .public-navbar-actions .lp-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Heroen paa telefon ──
   Nedtellingen skal staa paa ÉN rad. Fire bokser med `min-width: 5.4rem` og
   `flex-wrap` gir tre pluss én, som ser ut som en feil. Fast firekolonners
   rutenett og mindre tall loeser det uten aa gjore boksene ulike. */
@media (max-width: 560px) {
    .lp-count {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.4rem;
    }
    .lp-count > div {
        min-width: 0;
        padding: 0.7rem 0.3rem;
    }
    .lp-count b { font-size: 1.5rem; }
    .lp-count small { font-size: 0.58rem; letter-spacing: 0.08em; }

    /* Kickeren brekker over to linjer med full sperring. Mindre skrift og
       tettere sperring holder «2.–4. OKTOBER 2026 · RISSAHALLEN» samlet. */
    .lp-kicker {
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        padding: 0.35rem 0.8rem;
        gap: 0.4rem;
    }
}

/* ── Bunntekst ─────────────────────────────────────────────── */

body.public-page .public-footer {
    border-top: 1px solid var(--lp-line);
    background: transparent;
    color: var(--lp-dim);
    font-size: 0.9rem;
    padding: 4rem 0 2.5rem;
}
body.public-page .public-footer-inner {
    width: var(--lp-shell);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2.5rem;
    padding: 0;
}
@media (max-width: 760px) {
    body.public-page .public-footer-inner { grid-template-columns: 1fr; gap: 2rem; }
}

body.public-page .public-footer-logo { height: 26px; width: auto; opacity: 0.8; }
body.public-page .public-footer h6 {
    font-family: var(--lp-display);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lp-muted);
    margin-bottom: 0.9rem;
}
body.public-page .public-footer a { color: var(--lp-muted); text-decoration: none; }
body.public-page .public-footer a:hover { color: var(--lp-ink); }
body.public-page .public-footer-col a { display: block; padding: 0.28rem 0; }

body.public-page .public-footer-copy {
    width: var(--lp-shell);
    margin: 2.5rem auto 0;
    padding-top: 1.6rem;
    border-top: 1px solid var(--lp-line);
}
/* Org-linja og copyright sto tidligere i en flex-rad sammen med ikonene.
   Ikonene er flyttet opp til merkevarekolonnen, saa de to stables — og
   trenger da luft mellom seg. */
body.public-page .public-footer-org { margin-bottom: 0.75rem; }
body.public-page .public-footer-social { display: flex; gap: 0.9rem; }
/* Ikonene står nå under logoen og setningen, ikke nede til høyre ved
   copyright. De trenger luft til teksten over seg. */
body.public-page .public-footer-brand .public-footer-social { margin-top: 1.35rem; }
body.public-page .public-footer-social a {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--lp-line);
    border-radius: 50%;
    transition: border-color 0.2s, color 0.2s;
}
body.public-page .public-footer-social a:hover { border-color: #ffffff44; color: var(--lp-cyan); }

/* Menylinja er `fixed`, så innholdet under må ha luft til å begynne på.
   Forsiden er unntaket: heroen skal ligge OPPÅ linja, og har sin egen
   topp-padding. `:has()` avgjør det på det som faktisk står der, framfor en
   klasse på <body> som må settes ved inngang og fjernes ved utgang — og som
   blir hengende igjen den dagen noen glemmer det siste. */
body.public-page .public-content { padding-top: 5.5rem; }
body.public-page:has(.lp-hero) .public-content { padding-top: 0; }

/* Plassen som nettopp skiftet blinker kort opp. Uten den ville endringen
   skjedd usynlig — man ville bare oppdaget at kartet var annerledes. */
.lp-seatmap i { transition: background 0.45s ease, box-shadow 0.45s ease; }
.lp-seat-flip { animation: lp-seat-pop 0.6s ease; }
@keyframes lp-seat-pop {
    0% { transform: scale(1); }
    35% { transform: scale(1.35); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .lp-seatmap i { transition: none; }
    .lp-seat-flip { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   KAMPANJEVISNING  ·  .cms-page--kampanje
   ──────────────────────────────────────────────────────────────────
   En CMS-side som skal SELGE noe, ikke informere. Velges per side i
   CMS-et (`pages.layout`), og alt her er scopet til klassen — en
   standardside tegnes byte for byte som for.

   ── Den laaner landingssidas STRUKTUR, ikke bare fargene ──

   Foerste utgave ga kortene ny drakt inne i `.cms-page` sin lesespalte
   paa 40rem. Den saa penere ut og var fortsatt en NYHETSSIDE: én smal
   kolonne, alt under hverandre. Rytmen er det som skiller en designet
   side fra et dokument.

   Derfor samme tre lag som `/`:

     .kmp-hero   full bredde, som `.lp-hero`
     .kmp-band   seksjon med tonet flate, som `.lp-section--tint`
     .kmp-shell  innholdsbredden, samme `--lp-shell` som `.lp-shell`

   Drakta er fortsatt ren CSS oppa samme HTML fra `BlockRenderer`.
   Se docs/design/public.md og moduler/cms.md.
   ══════════════════════════════════════════════════════════════════ */

/* Ut av lesespalta. `width` alene holdt ikke — `.cms-page` setter
   `max-width: 40rem`, og max-width vinner over width. Det var grunnen
   til at rutenettet aldri fikk mer enn én kolonne. */
body.public-page .cms-page--kampanje {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Toppfeltet gaar helt til topps, under navbaren — som paa forsiden.
   Uten dette staar det 5,5rem tom flate over bildet. */
body.public-page:has(.kmp-hero) .public-content { padding-top: 0; }

body.public-page .kmp-shell {
    width: var(--lp-shell, min(1180px, calc(100% - 2.5rem)));
    margin-inline: auto;
}

/* ── Toppfeltet ────────────────────────────────────────────────── */

body.public-page .kmp-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(22rem, 62vh, 40rem);
    padding: 9rem 0 clamp(2.5rem, 6vw, 4.5rem);
    overflow: hidden;
    /* Uten bilde: samme lysspill som forsidens hero, dempet. Det skal
       ikke vaere PAAKREVD aa finne et bilde for aa bytte visning. */
    background:
        radial-gradient(46rem 32rem at 20% 10%, #7b5cff3d, transparent 62%),
        radial-gradient(38rem 28rem at 85% 30%, #ecab351f, transparent 60%),
        var(--lp-bg, #06070d);
}

body.public-page .kmp-hero--bilde {
    background:
        var(--kmp-hero) center / cover no-repeat,
        var(--lp-bg, #06070d);
}

/* Gradienten ligger som et eget lag OVER bildet og UNDER teksten.
   Som `background-image` ville den blitt malt bak bildet i stedet. */
body.public-page .kmp-hero--bilde::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #06070dd9 0%, #06070d59 40%, #06070df2 100%);
}
body.public-page .kmp-hero .kmp-shell { position: relative; z-index: 2; }

body.public-page .kmp-tittel {
    margin: 0;
    max-width: 16ch;
    font-family: var(--lp-display, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(2.4rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--lp-ink, #eef1ff);
}

/* Ingressen loeftes hit fra innholdet av `loftIngress()`. Venstrestilt
   under tittelen, ikke midtstilt: en midtstilt ingress under en
   venstrestilt tittel er to ulike akser i samme blokk. */
body.public-page .kmp-ingress {
    max-width: 42rem;
    margin-top: 1.25rem;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.55;
    color: var(--lp-muted, #9aa3c4);
}
body.public-page .kmp-ingress p { margin: 0; }

/* ── Seksjonen med kortene ─────────────────────────────────────── */

body.public-page .kmp-band {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    background: linear-gradient(180deg, var(--lp-bg-2, #0b0d18), transparent 70%);
}

body.public-page .cms-page--kampanje .cms-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: clamp(1.1rem, 2.2vw, 1.75rem);
    /* `stretch`, ikke `start`. Med `start` faar hvert kort sin egen hoyde, og
       en rad med tre ulike tekstlengder blir en trappetrinnsrad. Kortene skal
       ha radens hoyde — det er det som gjor rutenettet til et rutenett. */
    align-items: stretch;
    color: var(--lp-muted, #9aa3c4);
}

/* Alt som IKKE er et kort spenner hele bredden — en avslutning, eller en
   overskrift redaktoeren legger inn senere. Uten dette ville et loest
   avsnitt blitt staaende som en tom kortplass. */
body.public-page .cms-page--kampanje .cms-content > *:not(.cms-split) {
    grid-column: 1 / -1;
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

/* ── Kortet ────────────────────────────────────────────────────── */
/*
   `.cms-split` er en todelt RAD i standardvisning. Overstyringene her er
   de som gjor rad til kort: stables, egen flate, og uten radens
   utbrytning fra tekstspalta.
*/
body.public-page .cms-page--kampanje .cms-split {
    display: flex;
    flex-direction: column;
    /* ── `stretch`, ikke arven fra standardvisningen ──
       `.cms-split` er en RAD med `align-items: center`. I en flex-KOLONNE
       styrer den samme egenskapen bredden, og `center` gir barna
       innholdsbredde i stedet for full bredde.
       For et bilde merkes det saavidt — det staar litt inn fra kanten. For en
       innbygging er det fatalt: `.cms-split-media--embed` har ingen egen
       bredde (iframen er `position: absolute`), saa den kollapser til null,
       og `aspect-ratio: 16/9` av null er null hoyde. Videoen ble borte. */
    align-items: stretch;
    grid-template-columns: none;
    gap: 0;
    width: auto;
    margin: 0;
    margin-inline: 0;
    background: var(--lp-bg-2, #0b0d18);
    border: 1px solid var(--lp-line, #ffffff14);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease;
}

body.public-page .cms-page--kampanje .cms-split:hover {
    border-color: #7b5cff66;
    transform: translateY(-3px);
}

body.public-page .cms-page--kampanje .cms-split-media img,
body.public-page .cms-page--kampanje .cms-split-media video {
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 0;
    border: 0;
}

/* Innbyggingen faar samme forhold som bildene, saa kortene i en rad blir
   like hoye. Standardvisningens 16:9 gjelder en full bredde; her er kortet
   smalere, og 16:10 holder mediedelen paa samme hoyde som naboene. */
body.public-page .cms-page--kampanje .cms-split-media--embed {
    aspect-ratio: 16 / 10;
    border-radius: 0;
    border: 0;
}

/* Kroppen tar resten av kortet. Uten `flex: 1` stopper den ved teksten, og
   kortet strekker seg med en tom stripe under i stedet. */
body.public-page .cms-page--kampanje .cms-split-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(1.15rem, 2.2vw, 1.6rem);
}

/* Kortoverskriften er ikke en seksjonsoverskrift. Streken og toppluften
   fra `.cms-content h2` hoerer til en side som leses ovenfra og ned; i
   et rutenett ville den delt hvert kort i to. */
body.public-page .cms-page--kampanje .cms-split-body h2 {
    padding-top: 0;
    border-top: 0;
    margin: 0 0 .55rem;
    font-family: var(--lp-display, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

body.public-page .cms-page--kampanje .cms-split-body p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--lp-muted, #9aa3c4);
}

/* Lenka blir en handling nederst i kortet, ikke en setning i teksten.
   `margin-top: auto` skyver den til bunnen naar kortet er hoyere enn
   innholdet — da staar handlingene paa linje paa tvers av raden, i stedet for
   aa flyte der teksten tilfeldigvis slutter. */
body.public-page .cms-page--kampanje .cms-split-link {
    margin-top: auto;
    padding-top: 1.1rem;
}
body.public-page .cms-page--kampanje .cms-split-link a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
}
body.public-page .cms-page--kampanje .cms-split-link a::after {
    content: '→';
    transition: transform .18s ease;
}
body.public-page .cms-page--kampanje .cms-split:hover .cms-split-link a::after {
    transform: translateX(3px);
}

/* Kort UTEN bilde faar ikke staa som en halvtom plass. De er like
   gyldige — discgolf og «kom uten maskin» har ingen bilder ennaa — saa
   de faar en tonet topp i stedet for et hull. */
body.public-page .cms-page--kampanje .cms-split--tekstalene {
    background:
        linear-gradient(180deg, #7b5cff24 0%, transparent 6rem),
        var(--lp-bg-2, #0b0d18);
}

/* Uten bilde blir kortet like hoyt som naboene, men fyller bare toppen. Da
   sentreres teksten i stedet for aa henge oeverst med en tom halvdel under.
   Har kortet en lenke, vinner `margin-top: auto` paa den og skyver den til
   bunnen uansett — som er riktig: handlingene skal staa paa linje. */
body.public-page .cms-page--kampanje .cms-split--tekstalene .cms-split-body {
    justify-content: center;
}

@media (max-width: 34rem) {
    body.public-page .cms-page--kampanje .cms-content {
        grid-template-columns: 1fr;
    }
}

/* ── Turneringsprofil ────────────────────────────────────────────────────
   Coveren er en egen flate og ikke `.lp-card-cover`: den er sidens bilde,
   ikke et kort i et rutenett, og trenger sin egen hoyde. */
.lp-turn-cover {
    height: clamp(9rem, 26vw, 15rem);
    border-radius: 1rem;
    background-size: cover;
    background-position: center;
    margin-bottom: 1.4rem;
}

/* Faktarader. Samme grep som `.meta-row` i appen — etikett til venstre,
   verdi til hoyre — men i Nattmodus-paletten. Bryter til to linjer paa
   smal skjerm i stedet for aa presse verdien ut av kanten. */
.lp-turn-fakta { display: flex; flex-direction: column; }
/* The archive (pages/public/archive.js) */
.lp-archive-year { margin: 0 0 .6rem; font-family: var(--lp-display); font-size: 2rem; font-weight: 700; line-height: 1; background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-archive-heading { margin: 2.4rem 0 1rem; font-family: var(--lp-display); font-size: 1.4rem; color: var(--lp-ink); }
.lp-archive-note { margin-bottom: 1.2rem !important; font-size: .85rem !important; color: var(--lp-dim) !important; }
.lp-archive-image { display: block; max-width: 100%; max-height: 360px; margin: 0 0 1.2rem; border-radius: 10px; }
.lp-note .cms-content img { max-width: 100%; height: auto; border-radius: 8px; }
.lp-note .cms-content table { width: 100%; }

.lp-turn-rad {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--lp-line);
}

.lp-turn-rad:last-child { border-bottom: 0; }

.lp-turn-navn { color: var(--lp-dim); }

@media (max-width: 30rem) {
    .lp-turn-rad { flex-direction: column; gap: .15rem; }
}

/* ══════════════════════════════════════════
   FORELDRESAMTYKKE — /foreldresamtykke
   Hjelpesida med to likestilte veier, og papirskjemaet som bare finnes paa
   utskriften. Se docs/planer/deltakeropplysninger.md § 5.
   ══════════════════════════════════════════ */

.fs-valg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.1rem;
    margin-top: 2rem;
}

/* De to valgene er LIKESTILTE. Papir er ikke en nodloesning gjemt nederst —
   det er foreldrene som skal levere, og ikke alle er vante med BankID. */
.fs-kort {
    position: relative;
    padding: 1.6rem 1.5rem 1.5rem;
    border: 1px solid var(--lp-line);
    border-radius: 18px;
    background: var(--lp-surface);
}
.fs-kort h2 { font-size: 1.12rem; margin: 0 0 0.5rem; }
.fs-kort p { color: var(--lp-muted); font-size: 0.93rem; margin: 0 0 1.2rem; }

.fs-kort-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--lp-line);
    color: var(--lp-dim);
    font-size: 0.85rem;
    font-weight: 600;
}

.fs-note {
    margin-top: 1.8rem;
    color: var(--lp-muted);
    font-size: 0.9rem;
}

/* ── Papirskjemaet ──
   Finnes i dokumentet hele tiden, men vises bare naar det skrives ut. Da
   slipper vi en egen rute, en egen mal og en ekstra ting aa holde i synk —
   arrangementets navn og datoer staar alt her. */
.fs-skjema { display: none; }

@media print {
    /* Skjul nettsida, vis skjemaet. `visibility: hidden` ble forsokt foerst,
       men den beholder PLASSEN til alt som skjules — arket fikk et tomt
       forsteside og skjemaet havnet i driv. `display: none` fjerner den. */
    .public-navbar,
    .public-footer,
    .lp-section,
    .report-fab,
    #chat-widget { display: none !important; }

    /* Nattmodus gir `body` en nesten svart bakgrunn. Paa papir er det en
       blekkslukende ramme rundt et skjema som skal fylles ut med penn. */
    html, body, body.public-page {
        background: #fff !important;
        color: #000 !important;
    }

    .fs-skjema {
        display: block;
        color: #000;
        background: #fff;
        font-family: Georgia, 'Times New Roman', serif;
    }

    /* Fargen maa settes EKSPLISITT paa hvert element. Nattmodus-paletten gir
       overskrifter sin egen lyse farge med hoyere spesifisitet enn arvingen
       fra `.fs-skjema`, saa tittelen kom ut nesten usynlig paa hvitt ark. */
    .fs-skjema h1,
    .fs-skjema p,
    .fs-skjema span { color: #000; }

    .fs-skjema h1 { font-size: 20pt; margin: 0 0 0.2rem; }
    .fs-skjema-arr { font-size: 11pt; margin: 0 0 1.6rem; }
    .fs-skjema-inn { font-size: 11pt; margin: 0 0 2rem; max-width: 34em; }

    .fs-skjema-felt { margin-bottom: 1.5rem; }
    .fs-skjema-felt span {
        display: block;
        font-size: 9pt;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 0.9rem;
    }
    /* En LINJE aa skrive paa, ikke en boks. En boks inviterer til aa skrive
       smaatt inni; en linje sier bare «her». */
    .fs-skjema-linje { border-bottom: 1px solid #000; height: 0; }

    .fs-skjema-sign { display: flex; gap: 2.5rem; margin-top: 3rem; }
    .fs-skjema-felt--halv { flex: 1; }

    .fs-skjema-fot { margin-top: 3rem; font-size: 9pt; }

    @page { margin: 22mm 20mm; }
}