.sgmf-modal[hidden] {
    display: none !important;
}

.sgmf-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: clamp(12px, 3vw, 34px);
}

.sgmf-overlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 16, 16, var(--sgmf-overlay-opacity, .72));
    opacity: 0;
    transition: opacity var(--sgmf-duration, 320ms) ease;
}

.sgmf-dialog {
    position: relative;
    z-index: 1;
    width: min(1120px, 100%);
    max-height: min(90vh, 980px);
    overflow: auto;
    background: #fff;
    color: #101010;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
    opacity: 0;
    transform: translateY(14px) scale(.985);
    transition: opacity var(--sgmf-duration, 320ms) ease, transform var(--sgmf-duration, 320ms) cubic-bezier(.22, .61, .36, 1);
    overscroll-behavior: contain;
}

.sgmf-modal.is-open .sgmf-overlay,
.sgmf-modal.is-open .sgmf-dialog {
    opacity: 1;
}

.sgmf-modal.is-open .sgmf-dialog {
    transform: translateY(0) scale(1);
}

.sgmf-modal.is-closing .sgmf-overlay,
.sgmf-modal.is-closing .sgmf-dialog {
    opacity: 0;
}

.sgmf-dialog[data-size="standard"] { width: min(760px, 100%); }
.sgmf-dialog[data-size="wide"] { width: min(980px, 100%); }
.sgmf-dialog[data-size="large"] { width: min(1120px, 100%); }
.sgmf-dialog[data-size="full"] { width: min(1500px, 100%); max-height: calc(100vh - 24px); }

.sgmf-close {
    position: sticky;
    top: 0;
    z-index: 4;
    float: right;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 10px 10px -58px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #101010;
    font: 300 34px/1 Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}

.sgmf-close:hover,
.sgmf-close:focus-visible {
    background: #f2e9df;
}

.sgmf-content-wrap {
    padding: clamp(28px, 5vw, 72px);
}

.sgmf-title {
    margin: 0 64px 30px 0;
    color: inherit;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.12;
}

.sgmf-title:empty {
    display: none;
}

.sgmf-content {
    min-width: 0;
}

/*
 * Felles innholdslinje i modalvinduet.
 * JavaScript måler den faktiske synlige bildeflaten og setter disse
 * variablene. Dermed får tittel og tekst nøyaktig samme startlinje
 * som bildet, uavhengig av bildets bredde eller sentrering.
 */
.sgmf-content-wrap {
    --sgmf-line-left: 0px;
    --sgmf-line-right: 0px;
}

.sgmf-title,
.sgmf-content > p,
.sgmf-content > h1,
.sgmf-content > h2,
.sgmf-content > h3,
.sgmf-content > h4,
.sgmf-content > h5,
.sgmf-content > h6,
.sgmf-content > ul,
.sgmf-content > ol,
.sgmf-content > blockquote {
    margin-left: var(--sgmf-line-left);
    margin-right: var(--sgmf-line-right);
}

.sgmf-title {
    margin-right: calc(var(--sgmf-line-right) + 64px);
}

.sgmf-content > :first-child { margin-top: 0; }
.sgmf-content > :last-child { margin-bottom: 0; }
.sgmf-content img,
.sgmf-content video,
.sgmf-content iframe {
    max-width: 100%;
    height: auto;
}

.sgmf-content iframe {
    width: 100%;
}

.sgmf-status {
    display: none;
    padding: 56px 30px;
    text-align: center;
}

.sgmf-modal.is-loading .sgmf-status,
.sgmf-modal.has-error .sgmf-status {
    display: block;
}

.sgmf-modal.is-loading .sgmf-content-wrap,
.sgmf-modal.has-error .sgmf-content-wrap {
    display: none;
}

body.sgmf-modal-open {
    overflow: hidden !important;
}

@media (max-width: 1024px) {
    .sgmf-modal {
        padding: 18px;
    }
    .sgmf-dialog,
    .sgmf-dialog[data-size] {
        width: 100%;
        max-height: calc(100vh - 36px);
    }
}

@media (max-width: 640px) {
    .sgmf-modal {
        padding: 8px;
        align-items: end;
    }
    .sgmf-dialog,
    .sgmf-dialog[data-size] {
        width: 100%;
        max-height: calc(100vh - 8px);
        border-radius: 8px 8px 0 0;
    }
    .sgmf-content-wrap {
        padding: 28px 20px 36px;
    }
    .sgmf-title {
        margin-right: calc(var(--sgmf-line-right) + 56px);
        margin-bottom: 22px;
    }
    .sgmf-close {
        width: 44px;
        height: 44px;
        margin: 8px 8px -52px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgmf-overlay,
    .sgmf-dialog {
        transition: none !important;
    }
}