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

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

.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); }

/* ── 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 ─────────────────────────────────────────────── */

.lp-sponsors { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.4rem; }
.lp-sponsor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 84px;
    padding: 1rem;
    border: 1px solid var(--lp-line);
    border-radius: 16px;
    background: #ffffff06;
    transition: border-color 0.2s, transform 0.2s;
}
.lp-sponsor--lg { width: 210px; height: 110px; }
.lp-sponsor:hover { border-color: #ffffff33; transform: translateY(-3px); }
.lp-sponsor img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lp-sponsor i { font-size: 1.6rem; color: var(--lp-dim); }

/* ── 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);
}
body.public-page .public-footer-social { display: flex; gap: 0.9rem; }
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; }
}