/* VisionLAN - Rich text content styling (.cms-content)
   Used on: news articles, CMS pages, event descriptions, rules
   Also imported in TinyMCE via content_css for WYSIWYG preview */

/* Lesespalta for en hel side med brodtekst.
   Se `.cms-content` under for hvorfor 40rem og ikke 800px. */
.cms-page {
    max-width: 40rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* Sidetittelen.
   `base.css` setter ingen `font-size` paa `h1` — den falt derfor til
   nettleserens standard paa 2em (32 px), altsaa MINDRE enn sine egne
   seksjonsoverskrifter paa 37,6 px. Tittelen saa forglemt ut fordi den
   bokstavelig talt var mindre enn alt under seg.

   `clamp` og ikke en fast verdi, saa den foelger samme mal som de andre
   offentlige sidetitlene (`.lp-sec-head h2`). */
.cms-page-title {
    font-size: clamp(2.2rem, 5vw, 3.1rem);
    line-height: 1.1;
    margin: 0 0 2rem;
}

/* ── Maalet ──
   0,95 rem i en spalte paa 800 px gir ~105 tegn per linje. Typografisk
   standard er 45-75, med 66 som optimum. Over ~90 mister oyet RETUREN: naar
   blikket skal tilbake til venstre kant etter en linje, treffer det feil
   linje. Det leses som «tung tekst», men er et navigasjonsproblem.

   1,05 rem i 40rem (640 px) gir ~76 tegn. De to henger sammen: krymper man
   spalta uten aa oke skriften, blir linja kort OG teksten fortsatt liten. */
.cms-content {
    color: var(--vl-text, #e6edf3);
    line-height: 1.75;
    font-size: 1.05rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* First child should not have top margin */
.cms-content > *:first-child {
    margin-top: 0;
}

/* Last child should not have bottom margin */
.cms-content > *:last-child {
    margin-bottom: 0;
}

/* ── Overskrifter ──

   Skalaen er bygget MOT brodteksten, ikke satt uavhengig av den. Da
   brodteksten gikk fra 0,95 til 1,05 rem, kollapset den gamle skalaen:

     h3  1,20 rem  ->  1,14x brodtekst   praktisk talt usynlig
     h4  1,05 rem  ->  1,00x             noyaktig samme storrelse
     h5  0,95 rem  ->  0,90x             MINDRE enn brodteksten

   Resultatet var at en side ble «bare tekst» — squint-testen fant ingen
   struktur, fordi det ikke var noen.

   Ny skala, ~1,3x mellom hvert trinn, alt regnet fra 1,05 rem:

     h2  2,35 rem  ->  2,24x    seksjon
     h3  1,65 rem  ->  1,57x    underseksjon
     h4  1,25 rem  ->  1,19x    baeres ogsaa av farge og vekt
     h5  0,92 rem  ->  0,88x    en ETIKETT, ikke en overskrift

   ── Hvorfor saa stort ──

   2,35 rem er 37,6 px mot en brodtekst paa 16,8 px. Det ser stort ut i en
   CSS-fil og normalt paa skjerm: lesespalta er 640 px, saa en h2 tar under
   halvannen linje. Skalaen er valgt mot MAALET, ikke mot skjermbredden — det
   er forholdet mellom overskrift og spalte som avgjor om den virker stor
   eller ropende.

   Over 2,5 rem begynner en toords overskrift aa brekke i to linjer paa 640
   px, og da er den ikke lenger en overskrift man skummer forbi.

   h5/h6 er mindre enn brodteksten MED VILJE: de er merkelapper i
   versaler, en annen slags ting, ikke et svakere trinn paa samme stige.

   ── Nivaaene brukes om hverandre ──

   `/page/informasjon` har ti h3 og ingen h2. `/page/regler` har én h2.
   `/page/foreldre` har begge. Forfatterne velger nivaa etter foelelse, saa
   BADE h2 og h3 maa lese som en tydelig seksjonsoverskrift — h3 kan vaere
   underordnet, men den kan ikke vaere utydelig. */

.cms-content h1 {
    font-size: 2.6rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--vl-text, #e6edf3);
}

/* Luft OVER, ikke rundt. En overskrift med like mye luft paa begge sider
   flyter mellom to avsnitt; med tyngden over binder den seg til teksten den
   innleder. Forholdet er omtrent 4:1. */
.cms-content h2 {
    font-size: 2.35rem;
    margin-top: 4.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--vl-text, #e6edf3);
}

.cms-content h3 {
    font-size: 1.65rem;
    margin-top: 3.25rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--vl-text, #e6edf3);
}

.cms-content h4 {
    font-size: 1.25rem;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--vl-text, #e6edf3);
}

.cms-content h5,
.cms-content h6 {
    font-size: 0.92rem;
    margin-top: 2rem;
    margin-bottom: 0.4rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--vl-text-muted, #8b949e);
}

/* Den forste overskriften skal ikke skyve seg vekk fra sidetittelen. */
.cms-content > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

/* ── Paragraphs & text ── */

.cms-content p {
    margin-bottom: 1.05em;
}

.cms-content strong,
.cms-content b {
    font-weight: 700;
    color: var(--vl-text, #e6edf3);
}

/* ── Links ── */

.cms-content a {
    color: var(--vl-primary, #6c5ce7);
    text-decoration: underline;
    text-decoration-color: rgba(108, 92, 231, 0.4);
    text-underline-offset: 2px;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.cms-content a.btn {
    color: inherit;
    text-decoration: none;
}

.cms-content a:hover {
    color: var(--vl-accent, #a29bfe);
    text-decoration-color: var(--vl-accent, #a29bfe);
}

/* ── Images ── */

.cms-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--vl-radius, 16px);
    margin: 1em 0;
    display: block;
}

/* Centered images (TinyMCE alignment) */
.cms-content img[style*="margin-left: auto"],
.cms-content img.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

/* ── Bilder og innbygginger med oppsett ──
   Blokkeditoren lagrer et OPPSETT, ikke maal: `full`, `medium`, `left` eller
   `right`. Maalene ligger her, saa de kan endres for alt innhold paa én gang —
   og saa de kan legges om paa smal skjerm, der «tekst ved siden av» ikke
   finnes som mulighet.

   `figure` eier avstanden; bildet inni nullstiller sin egen. */

.cms-content figure { margin: 1.4em 0; }
.cms-content figure img { margin: 0; width: 100%; }

.cms-content figcaption {
    margin-top: 0.55em;
    font-size: 0.84rem;
    color: var(--vl-text-muted, #8b949e);
    line-height: 1.5;
}

.cms-content .fig--medium {
    max-width: 60%;
    margin-inline: auto;
}

.cms-content .fig--left,
.cms-content .fig--right {
    max-width: 42%;
    margin-top: 0.35em;
}
.cms-content .fig--left {
    float: left;
    margin-right: 1.6em;
    margin-bottom: 1em;
}
.cms-content .fig--right {
    float: right;
    margin-left: 1.6em;
    margin-bottom: 1em;
}

/* En float som ikke lukkes renner ut av innholdet og legger seg over det som
   kommer etter. Overskrifter starter paa ny linje; broedtekst wrapper, som er
   hele poenget. */
.cms-content::after {
    content: "";
    display: block;
    clear: both;
}
.cms-content h2,
.cms-content h3 { clear: both; }

/* Under 640px er det ikke plass til tekst ved siden av noe som helst. */
@media (max-width: 640px) {
    .cms-content .fig--medium,
    .cms-content .fig--left,
    .cms-content .fig--right {
        float: none;
        max-width: 100%;
        margin-inline: 0;
    }
}

/* ── Innbygginger ──
   Ramma faar hoyden fra `aspect-ratio`, satt av `BlockRenderer` per tjeneste.
   Uten den ville en iframe uten innhold vaert null piksler hoy til den lastet. */

.cms-content .embed-frame {
    position: relative;
    width: 100%;
    border-radius: var(--vl-radius, 16px);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}
.cms-content .embed-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* `.cms-content iframe` lenger nede gir alle iframes `margin: 1em 0`. Paa
       et absolutt plassert element med `inset: 0` FLYTTER den elementet i
       stedet for aa gi det luft — kartet la seg 15px for lavt og ble klippet
       nederst. */
    margin: 0;
}

/* ── Lists ── */

.cms-content ul,
.cms-content ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}

.cms-content li {
    margin-bottom: 0.35em;
}

.cms-content li > ul,
.cms-content li > ol {
    margin-top: 0.35em;
    margin-bottom: 0;
}

/* ── Blockquotes ── */

.cms-content blockquote {
    border-left: 3px solid var(--vl-primary, #6c5ce7);
    padding: 0.75rem 1rem;
    margin: 1.5em 0;
    color: var(--vl-text-muted, #8b949e);
    font-style: italic;
    background: var(--vl-glass, rgba(255, 255, 255, 0.03));
    border-radius: 0 var(--vl-radius-sm, 8px) var(--vl-radius-sm, 8px) 0;
}

.cms-content blockquote p:last-child {
    margin-bottom: 0;
}

/* ── Tables ── */

.cms-content table {
    width: 100%;
    margin: 1em 0;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.cms-content th,
.cms-content td {
    border: 1px solid var(--vl-border, #30363d);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.cms-content th {
    background: var(--vl-glass, rgba(255, 255, 255, 0.03));
    font-weight: 600;
    color: var(--vl-text, #e6edf3);
}

.cms-content tr:nth-child(even) td {
    background: var(--vl-glass, rgba(255, 255, 255, 0.02));
}

/* ── Code ── */

.cms-content code {
    background: var(--vl-glass, rgba(255, 255, 255, 0.06));
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.88em;
    color: var(--vl-accent, #a29bfe);
}

.cms-content pre {
    background: var(--vl-surface-2, #161b22);
    padding: 1rem;
    border-radius: var(--vl-radius-sm, 8px);
    overflow-x: auto;
    margin: 1em 0;
    border: 1px solid var(--vl-border, #30363d);
}

.cms-content pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 0.88rem;
    color: var(--vl-text, #e6edf3);
}

/* ── Horizontal rules ── */

.cms-content hr {
    border: none;
    border-top: 1px solid var(--vl-border, #30363d);
    margin: 2em 0;
}

/* ── Embedded media (iframes, videos) ── */

.cms-content iframe,
.cms-content video {
    max-width: 100%;
    border-radius: var(--vl-radius, 16px);
    margin: 1em 0;
}

/* ── Lightbox ── */

.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.lightbox-overlay.lightbox-active {
    opacity: 1;
    pointer-events: auto;
}

/* Scenen holder ETT element — et bilde eller en video. Den er en egen boks og
   ikke bare en `<img>`, fordi en `<video>` som bare bytter `src` kan fortsette
   å spille lyden fra den forrige mens den laster den nye. */
.lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 88vh;
}

.lightbox-media {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.lightbox-active .lightbox-media {
    transform: scale(1);
}

/* Bildeteksten står over telleren, ikke i stedet for den — de svarer på hvert
   sitt spørsmål: «hva er dette» og «hvor er jeg i serien». */
.lightbox-caption {
    position: absolute;
    bottom: 3.25rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(90vw, 640px);
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.9rem;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
    line-height: 1;
    padding: 0.25rem;
}

.lightbox-close:hover {
    opacity: 1;
}

/* Nav arrows */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 1.25rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-nav:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

/* Last ned / Kopier lenke — øverst til venstre, lukk står til høyre.
   Bare på gallerier som har en adresse (1004-2308). */
.lightbox-tools {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}
.lightbox-tool {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
}
.lightbox-tool:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Counter */
.lightbox-counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* Clickable cursor hint for images in .cms-content */
.cms-content img {
    cursor: zoom-in;
}

/* ── Legacy class alias ── */

.event-description {
    line-height: 1.7;
    color: var(--vl-text-muted, #8b949e);
}

.event-description p {
    margin-bottom: 0.75rem;
}

.event-description img {
    max-width: 100%;
    height: auto;
    border-radius: var(--vl-radius, 16px);
}

/* ══════════════════════════════════════════
   BILDE OG TEKST — .cms-split

   Én rad = én aktivitet. Bildet på én side, teksten på den andre.

   ── Vekslingen ligger her, ikke i innholdet ──

   `:nth-of-type(even)` snur annenhver rad. Crew legger inn aktivitetene i den
   rekkefølgen som er riktig, og sida veksler av seg selv — de skal ikke måtte
   bokføre hvilken side forrige bilde sto på. `--left` og `--right` overstyrer
   for den ene raden som må stå annerledes.

   ── Bredden bryter ut av tekstspalten ──

   `.cms-content` er 40rem bred, fordi det er der brødtekst er lesbar. To
   kolonner i 40rem gir to smale spalter. Raden strekker seg derfor forbi
   spalten med negativ margin — men bare så langt at teksten i den fortsatt
   ikke blir for bred.
   ══════════════════════════════════════════ */

.cms-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.25rem, 4vw, 2.75rem);
    align-items: center;
    margin: clamp(2.5rem, 6vw, 4.5rem) 0;
}

/* Bryt ut av tekstspalten der det er plass. */
@media (min-width: 60rem) {
    .cms-split {
        width: min(64rem, calc(100vw - 3rem));
        margin-inline: calc((100% - min(64rem, 100vw - 3rem)) / 2);
    }
}

.cms-split-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 24rem;
    object-fit: cover;
    border-radius: var(--vl-radius, 16px);
    /* Bildene er fotografier fra hallen, ofte mørke. En svak kant holder dem
       fra å flyte ut i bakgrunnen på Nattmodus. */
    border: 1px solid var(--vl-glass-border, #ffffff14);
    cursor: zoom-in;
}

/* Video oppfoerer seg som bildet: samme ramme, samme beskjaering. En kort
   stum sloyfe SKAL se ut som et levende bilde, ikke som en videospiller. */
.cms-split-media video {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 24rem;
    object-fit: cover;
    border-radius: var(--vl-radius, 16px);
    border: 1px solid var(--vl-glass-border, #ffffff14);
}

/* Innbygging kan ikke beskjaeres — en iframe har sitt eget innhold. Den faar
   16:9 og fyller bredden. */
.cms-split-media--embed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--vl-radius, 16px);
    overflow: hidden;
    border: 1px solid var(--vl-glass-border, #ffffff14);
}
.cms-split-media--embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cms-split-body > *:first-child { margin-top: 0; }
.cms-split-body > *:last-child { margin-bottom: 0; }

.cms-split-link { margin-top: 1.25rem; }

/* Annenhver rad snus. Bildet flyttes til kolonne to, teksten til kolonne én —
   rekkefølgen i markupen er urørt, så skjermlesere og mobil får den samme
   sekvensen: bilde, så tekst. */
.cms-split:nth-of-type(even) .cms-split-media { grid-column: 2; grid-row: 1; }
.cms-split:nth-of-type(even) .cms-split-body { grid-column: 1; grid-row: 1; }

/* Eksplisitt valg slår vekslingen. */
.cms-split--left .cms-split-media,
.cms-split--right .cms-split-body { grid-column: 1; grid-row: 1; }
.cms-split--left .cms-split-body,
.cms-split--right .cms-split-media { grid-column: 2; grid-row: 1; }

/* Uten bilde er det ingenting å stille opp ved siden av. */
.cms-split--tekstalene { grid-template-columns: 1fr; }

/* Smal skjerm: alltid bilde over tekst. To kolonner på 375 px er to spalter
   ingen kan lese, og en veksling ingen ser. */
@media (max-width: 46rem) {
    .cms-split,
    .cms-split--left,
    .cms-split--right {
        grid-template-columns: 1fr;
    }
    .cms-split .cms-split-media,
    .cms-split .cms-split-body {
        grid-column: 1;
        grid-row: auto;
    }
    .cms-split-media img,
    .cms-split-media video { max-height: 15rem; }
}