/*
 * <lm-slide-info> vises som en helt vanlig side (ikke inni <lm-slide> sin
 * fastlåste 16:9-boks) - lesevennlig maks-bredde og luft rundt innholdet,
 * samme ånd som resten av det statiske nettstedet (rot-styles.css).
 */
:host {
    display: block;
    max-inline-size: var(--slide-info-maksbredde, 60rem);
    margin-inline: auto;
    padding: var(--slide-info-padding, clamp(1.5rem, 5vw, 3rem));
    color: var(--slide-text, canvasText);
}

.tittel {
    margin-block-end: var(--slide-info-tittel-margin-block-end, var(--space-xs, 0.4em));
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.beskrivelse {
    max-inline-size: var(--slide-info-beskrivelse-maksbredde, 60ch);
    color: color-mix(in srgb, currentColor 80%, transparent);
    margin-block-end: var(--slide-info-beskrivelse-margin-block-end, 1.5rem);
}

.handlinger {
    margin-block-end: var(--slide-info-handlinger-margin-block-end, 2rem);
}

.knapp {
    padding: var(--slide-info-knapp-padding, var(--space-small, 0.6em) var(--space-medium, 1em));
    border-radius: var(--slide-info-knapp-radius, var(--radius-small, 0.4em));
}

.side {
    &[hidden] {
        display: none;
    }
}

/* Samme visuelle oppskrift som filmstripens miniatyrer i
   <lm-slide-nav>/slide-nav.css (aspect-ratio 16:9, hjørne-nummer,
   bunn-bildetekst) - implementert lokalt her (ikke delt kode) siden dette
   er en statisk oversikt/startpunkt, ikke en scrollende "hvor er jeg
   nå"-visning (ingen aria-current, ingen avstand-basert
   inn-animasjon). */
.slide-forhandsvisning {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    border-radius: var(--radius-small, 0.4em);
    border: var(--border-width, 1px) solid var(--border-color, transparent);
    background: var(--color-surface, canvas);

    &:is(:hover, :focus-visible) {
        outline: 2px solid var(--color-focus-ring, canvasText);
        outline-offset: 1px;
    }
}

@media (forced-colors: active) {
    .slide-forhandsvisning {
        border-color: ButtonBorder;
    }

    .slide-forhandsvisning:is(:hover, :focus-visible) {
        outline-color: Highlight;
    }
}

@scope (.slide-oversikt) {
    :scope[hidden] {
        display: none;
    }

    h2 {
        font-size: 1.1rem;
        margin-block-end: var(--slide-info-slide-oversikt-tittel-margin-block-end, var(--space-small, 0.6em));
    }

    lm-grid {
        margin-block-end: var(--slide-info-slide-oversikt-margin-block-end, 2rem);
    }
}

@scope (.slide-forhandsvisning) {
    .slide-forhandsvisning-iframe {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        border: none;
        pointer-events: none;
    }

    .slide-forhandsvisning-nummer {
        position: absolute;
        inset-block-start: var(--space-xs, 0.4em);
        inset-inline-start: var(--space-xs, 0.4em);
        padding: var(--space-2xs, 0.2em) var(--space-xs, 0.4em);
        border-radius: var(--radius-pill, 1em);
        font-size: var(--font-size-extra-small, 0.7em);
        line-height: 1.4;
        background: color-mix(in srgb, var(--color-surface-inverse, canvasText) 55%, transparent);
        color: var(--color-surface-inverse-text, canvas);
        pointer-events: none;
    }

    .slide-forhandsvisning-tittel {
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        padding: var(--space-xs, 0.4em) var(--space-small, 0.6em);
        font-size: var(--font-size-extra-small, 0.7em);
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: var(--caption-overlay-color, color-mix(in srgb, black 65%, transparent));
        color: var(--caption-overlay-text-color, white);
        pointer-events: none;
        border-end-start-radius: var(--radius-small, 0.4em);
        border-end-end-radius: var(--radius-small, 0.4em);
    }
}

@scope (.ressurser) {
    :scope[hidden] {
        display: none;
    }

    h2 {
        font-size: 1.1rem;
        margin-block-end: var(--slide-info-ressurser-tittel-margin-block-end, var(--space-small, 0.6em));
    }

    ul {
        display: grid;
        gap: var(--slide-info-ressurs-gap, var(--space-xs, 0.4em));
        padding-inline-start: var(--slide-info-ressurs-innrykk, var(--space-medium, 1em));
        margin: 0;
    }
}