:root {
    --topstory: hsl(60, 100%, 50%);
}

    .teaser--topstory {
        --teaser-section-color: var(--body-color);
        background-color: var(--topstory) !important;
    }

        .teaser--topstory .teaser-section {
            font-size: 1rem;
        }

        .teaser--topstory .teaser-title {
            font-weight: 900;
        }


    .banner-label {
        flex-basis: 100%;
        text-align: center;
        font-size: 0.75rem;
        color: #777;
        margin-bottom: 4px;
    }


    .banner-label-topscroll {
        flex-basis: 100%;
        text-align: center;
        font-size: .75rem;
        color: #777;
        margin-bottom: 4px;
        position: absolute;
        z-index: 999;
        right: 10px;
    }


    .article-content p a, .article-bodytext p a, .article-bodytext ul a {
        text-decoration: underline !important
    }


    .Kommentar-skribent, .grundskrift-kursiv {
        font-style: italic;
    }

    @media (max-width: 768px) {
        .banner--display, .banner--spot {
            width: auto !important;
        }
    }

    div#cke_1_contents {
        height: 300px !important;
    }

    .zone-sm zone-topic-clusters {
        background-color: #00ff21 !important;
        color: #fff;
    }

    .topic-faq a {
        color: #fff !important;
        text-decoration: underline !important
    }

    .lm-banner:has(.banner--interscroll,.banner--topscroll) .bannercontent {
        background-position: center !important;
    }
    /*.lm-banner:has(.banner--interscroll) {
    height: 120vh;
}
*/
    /* ─── Article image carousel modal ─── */
    body.modal-open {
        overflow: auto !important;
        padding-right: 0 !important;
    }

    .carousel-icon {
        background-color: rgba(255, 255, 255, 0.9);
        border-color: rgba(255, 255, 255, 0.8);
        color: #333;
        z-index: 3;
        padding: 0.2rem;
        display: block;
    }

    .carousel-icon .icon {
        width: 1.25rem;
        height: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel-icon .icon svg {
        width: 1.25rem;
        height: 1.25rem;
        display: block;
        fill: currentColor;
    }

    #article-img-carousel .modal-dialog {
        margin: 12px;
    }

    @media (min-width: 576px) {
        #article-img-carousel .modal-dialog {
            margin-right: auto;
            margin-left: auto;
        }
    }

    #article-img-carousel .carousel-caption {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        top: auto !important;
        padding: 0.75rem 1rem !important;
        background: #fff !important;
        background-image: none !important;
        color: #333 !important;
        font-size: 0.875rem;
        line-height: 1.4;
        text-align: left;
        border-radius: 0 0 var(--modal-border-radius, 0.5rem) var(--modal-border-radius, 0.5rem);
    }

    #article-img-carousel .carousel-item {
        overflow: visible;
    }

    #article-img-carousel .carousel-item::before,
    #article-img-carousel .carousel-item::after,
    #article-img-carousel .carousel-caption::before,
    #article-img-carousel .carousel-caption::after {
        display: none !important;
    }

    #article-img-carousel .carousel-item img {
        border-radius: var(--modal-border-radius, 0.5rem) var(--modal-border-radius, 0.5rem) 0 0;
        width: 100%;
        height: auto;
        display: block;
        background: #fff;
    }

    /* Neutralize .ratio class on carousel images so they keep natural aspect */
    #article-img-carousel .carousel-item .ratio {
        position: static;
        --aspect-ratio: none;
    }

    #article-img-carousel .carousel-item .ratio::before {
        display: none;
        padding-top: 0;
    }

    #article-img-carousel .carousel-item .ratio > * {
        position: static;
    }

    #article-img-carousel .carousel-inner {
        overflow: visible;
    }

    #article-img-carousel .modal-body {
        overflow: visible;
        padding: 0;
        background: transparent;
    }

    #article-img-carousel .modal-content {
        overflow: visible;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    #article-img-carousel .btn-close {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        z-index: 10;
        background-color: rgba(255,255,255,0.9);
        border-radius: 50%;
        padding: 0.65rem;
        opacity: 1;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    @media (min-width: 768px) {
        #article-img-carousel .carousel-indicators {
            margin-bottom: -2rem;
        }
    }

    #article-img-carousel .carousel-control-prev,
    #article-img-carousel .carousel-control-next {
        width: 3rem;
        height: 3rem;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        background-color: rgba(0,0,0,0.4);
        border: 0;
        border-radius: 50%;
        opacity: 0.8;
        padding: 0;
    }

    #article-img-carousel .carousel-control-prev:hover,
    #article-img-carousel .carousel-control-next:hover {
        background-color: rgba(0,0,0,0.6);
        opacity: 1;
    }

    @media (min-width: 768px) {
        #article-img-carousel .carousel-control-prev {
            left: -3.5rem;
        }

        #article-img-carousel .carousel-control-next {
            right: -3.5rem;
        }
    }

    #article-img-carousel .carousel-control-prev-icon,
    #article-img-carousel .carousel-control-next-icon {
        width: 1.5rem;
        height: 1.5rem;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        transform: translate(-50%, -50%);
    }

    #article-img-carousel .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.5 2.5 L5 8 L10.5 13.5'/%3e%3c/svg%3e");
    }

    #article-img-carousel .carousel-control-next-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5.5 2.5 L11 8 L5.5 13.5'/%3e%3c/svg%3e");
    }

    /* Mobile: stack indicators and arrows below the image */
    @media (max-width: 767.98px) {
        #article-img-carousel .carousel {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        #article-img-carousel .carousel-inner {
            order: 1;
            width: 100%;
        }

        #article-img-carousel .carousel-indicators {
            order: 2;
            position: static;
            width: 100%;
            margin: 0.75rem auto 0;
        }

        #article-img-carousel .carousel-control-prev,
        #article-img-carousel .carousel-control-next {
            order: 3;
            position: relative;
            top: auto;
            left: auto;
            right: auto;
            transform: none;
            display: inline-block;
            margin: 0.5rem 0.25rem 0;
            flex: none;
            background-color: rgba(0,0,0,0.4);
            touch-action: manipulation;
            transition: none;
        }

        #article-img-carousel .carousel-control-prev:hover,
        #article-img-carousel .carousel-control-prev:focus,
        #article-img-carousel .carousel-control-prev:active,
        #article-img-carousel .carousel-control-next:hover,
        #article-img-carousel .carousel-control-next:focus,
        #article-img-carousel .carousel-control-next:active {
            background-color: rgba(0,0,0,0.4) !important;
            opacity: 0.8 !important;
        }
    }


    .article blockquote:before {
        content: "“";
        position: absolute;
        top: -.35rem;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        width: 3rem;
        height: 2rem;
        font-size: 6rem;
        line-height: 1;
        font-family: georgia;
        color: #036d76;
        text-align: center;
    }

    .article blockquote {
        display: block;
        border-width: 2px 0;
        border-style: solid;
        border-color: rgba(0, 0, 0, .125);
        padding: 2rem 0 1.5rem;
        margin: 2rem auto;
        position: relative;
        max-width: 80%;
    }

        .article blockquote:after {
            content: attr(cite);
            display: block;
            text-align: right;
            color: #036d76;
            margin-top: .5rem;
        }


    .Kommentar-skribent {
        width: auto;
        margin-bottom: 1rem !important;
    }

    /* Afsenderlinjen er typisk et <p> med ren inline-tekst. display:flex fra
       base-CSS'en gør HVER direkte børneknude til sit eget flex-item, så
       "…Hals</em>, b<em>yrådsmedlem…" bliver til tre kolonner ved siden af
       hinanden - og det løsrevne "b" ender i sin egen. Flex hører til
       billedvarianten (img + p); en ren tekstlinje skal sættes som block. */
    p.Kommentar-skribent {
        display: block;
    }

    /* Samme problem i en <div> uden billede. Egen regel og ikke lagt i
       selektørlisten ovenfor: en browser uden :has() ville kassere HELE reglen. */
    .Kommentar-skribent:not(:has(img)) {
        display: block;
    }

    blockquote p:last-of-type {
        margin-bottom: 0;
    }

    .citat-person, .hojre-kursiv {
        display: block !important;
        font-style: italic !important;
        text-align: right !important;
    }

    .related-article .card-body {
        padding: 1rem !important;
    }
    /* Mobile (default) */
    .banner--display:has(*) {
        min-height: 250px;
    }
    /* Desktop (min-width: 992px = Bootstrap's lg breakpoint) */
    @media (min-width: 992px) {
        .banner--display:has(*) {
            min-height: 190px;
        }

        .hidden-spinner {
            display: none !important;
        }
    }

    .video-wrapper {
        position: relative;
        width: 100%;
        max-width: 976px; /* Adjust as needed */
        height: 0;
        padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    }

        .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }


    .theme-primary a {
        color: hsla(0, 0%, 100%, 0.95) !important;
    }


    .paywall:before {
        content: "";
        position: absolute;
        z-index: 0;
        top: -171px;
        height: 167px;
        width: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.9) 100%);
        /*background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0.75) 24%, hsla(0, 0%, 100%, 0.9) 77%, #fff);*/
    }

    .article-preview {
        max-height: 160px;
        overflow: hidden;
        position: relative;
    }

        .article-preview::before {
            content: "";
            position: absolute;
            bottom: 0;
            height: 160px; /* adjust if needed */
            width: 100%;
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);
            pointer-events: none;
            z-index: 1;
        }


    .lm-banner:has(.banner--interscroll) .banner--interscroll {
        top: 0;
    }
    /* Skærmbredde ≥ 992px og pixel‐ratio ≥ 1.25 (125 % og op) */
    @media (min-width: 992px) and (min-resolution: 1.25dppx) {
        .lm-banner:has(.banner--interscroll) {
            --scroll-banner-offset: -40px;
        }
        /*    .featured-news {
        display: none
    }*/
    }
    /* Samme med dpi‐notation */
    @media (min-width: 992px) and (min-resolution: 120dpi) {
        .lm-banner:has(.banner--interscroll) {
            --scroll-banner-offset: -25px;
        }
        /*    .featured-news {
        display: none
    }*/
    }
    /* Ældre WebKit/Firefox‐prefixer */
    @media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-moz-device-pixel-ratio: 1.25) {
        .lm-banner:has(.banner--interscroll) {
            --scroll-banner-offset: -40px;
        }
        /* .featured-news {
        display: none
    }*/
    }

    @media (max-width: 600px) {

        .banner--spot iframe, .banner--display iframe {
            position: relative !important
        }
    }

    .hoest-tour-ticker h6.teaser-title {
        font-size: 1.3rem;
        margin: 0 auto;
    }



    .inline-banner {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        padding: 8px 16px;
        background: #f5f5f5;
        color: #222;
        border: 1px solid #ccc;
        border-radius: 6px;
    }

        .inline-banner .logo svg {
            height: 60px;
            width: auto;
            display: block;
        }

        .inline-banner .copy {
            font-size: 20px;
            font-weight: 600;
            line-height: 1.3
        }

        .inline-banner .highlight-banner {
            font-size: 28px;
            font-weight: 800;
            color: #004c97;
            display: block;
            margin: 0 0 4px 0
        }

        .inline-banner .dash {
            margin: 0 6px;
            font-weight: 400;
            color: #555
        }
        /* Size caps per format */
        .inline-banner .w980 {
            max-width: 980px;
            min-height: 80px
        }

        .inline-banner .w380 {
            max-width: 380px;
            min-height: 180px
        }

    @media (max-width: 768px) {
        .inline-banner {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 12px;
            padding: 16px;
        }

            .inline-banner .logo {
                display: flex;
                justify-content: center;
            }

                .inline-banner .logo svg {
                    width: 100%;
                    max-width: 200px; /* eller en størrelse du ønsker */
                    height: auto;
                }

            .inline-banner .copy {
                font-size: 18px;
            }

            .inline-banner .highlight-banner {
                font-size: 24px;
            }
    }



    .video-ad-banner {
        margin: 20px 0 30px 0;
        overflow: hidden;
        transition: max-height 0.6s ease-out, opacity 0.6s ease-out, margin 0.6s ease-out;
        max-height: 500px;
        opacity: 1;
    }

        .video-ad-banner.collapsed {
            max-height: 0;
            opacity: 0;
            margin: 0;
        }

    .injected-banner-text {
        display: block;
        text-align: center;
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
    }

    .video-container {
        border: 1px solid #000;
        margin-bottom: 40px;
        height: 343px;
        position: relative;
        background: #000;
    }

    .vjs-ad-top {
        padding-bottom: 56.25%;
        position: relative;
        background: #000;
    }

    #linkOverlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }

    #replayContainer {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        display: none;
    }

        #replayContainer.active {
            display: block;
        }

    #replayButton, #followLinkButton {
        background: rgba(0, 0, 0, 0.8);
        color: white;
        border: none;
        padding: 20px;
        border-radius: 10px;
        cursor: pointer;
        text-align: center;
        margin: 10px;
        transition: background 0.3s ease;
    }

        #replayButton:hover, #followLinkButton:hover {
            background: rgba(0, 0, 0, 0.9);
        }

        #replayButton svg, #followLinkButton svg {
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
        }

    #closeAdButtonContainer {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
    }

    #closeAdButton {
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 8px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        transition: background 0.3s ease;
    }

        #closeAdButton:hover {
            background: rgba(0, 0, 0, 0.9);
        }

    #audioButtonContainer {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 10;
    }

    #toggleAudioButton {
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
        transition: background 0.3s ease;
    }

        #toggleAudioButton:hover {
            background: rgba(0, 0, 0, 0.9);
        }

        #toggleAudioButton.audioOff::before {
            content: "🔇";
        }

        #toggleAudioButton.audioOn::before {
            content: "🔊";
        }

    .video-player {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
    }

    @media (max-width: 768px) {
        .video-ad-banner {
            margin: 10px 0 20px 0;
        }

        .video-container {
            height: 200px;
        }

        #replayButton, #followLinkButton {
            padding: 15px;
        }

            #replayButton svg, #followLinkButton svg {
                width: 40px;
                height: 40px;
            }
    }

    .page {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .page-content {
        flex: 1;
    }

    .featured-news {
        height: auto;
        overflow-x: clip;
    }

    .featured-news .teaser-media {
        aspect-ratio: 16 / 9 !important;
    }

    .featured-news .teaser-img,
    .featured-news .teaser-media > img {
        aspect-ratio: 16 / 9 !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
    }

    .page-header {
        background-color: #fff;
    }

    .page-content, .page-footer {
        background-color: var(--body-bg, #fff);
        position: relative;
        z-index: 1;
    }

    .card--teaser {
        border-radius: 0 !important;
        border: none !important;
    }

    .eu-box {
        border: 1px solid #000; /* small border */
        background-color: #d2d2d2;
        padding: 15px; /* optional but recommended */
        margin-bottom: 20px;
    }
    /* Blå faktaboks */
    .card.bg-blue {
        background-color: #0d6efd; /* Bootstrap primary blue */
        color: #ffffff;
    }
        /* Tekst i faktaboksen */
        .card.bg-blue p,
        .card.bg-blue li,
        .card.bg-blue h2 {
            color: #ffffff;
        }
        /* Links: hvide og fede */
        .card.bg-blue a {
            color: #ffffff;
            font-weight: 700;
            text-decoration: underline !important;
        }
            /* Hover/focus for links */
            .card.bg-blue a:hover,
            .card.bg-blue a:focus {
                color: #e6e6e6;
                text-decoration: none !important;
            }
        /* Knap i bunden – tilpasset blå baggrund */
        .card.bg-blue .btn-outline-secondary {
            color: #ffffff;
            border-color: #ffffff;
        }

            .card.bg-blue .btn-outline-secondary:hover {
                background-color: #ffffff;
                color: #0d6efd;
            }






/* Fejlrapport #4237655 — Faktaboks-trunkering (håndteres serverside i
   DocumentFactBox.razor; her er kun styling af inline "Læs mere"-link). */
a.factbox-laes-mere,
.factbox-laes-mere {
    color: hsl(208, 100%, 32%);
    cursor: pointer;
    font-weight: 600;
    margin-left: 0.25em;
    user-select: none;
    white-space: nowrap;
    text-decoration: none !important;
}

a.factbox-laes-mere:hover,
.factbox-laes-mere:hover {
    text-decoration: underline !important;
    color: hsl(208, 100%, 24%);
}


/* ──────────────────────────────────────────────────────────────────────────
   Web-font FOUT / CLS mitigation
   The Google Fonts (Bitter, Lora, PT Serif) are loaded with display=swap. Until
   they arrive the browser paints the generic `serif` (Times New Roman), then
   swaps — that is the visible font/size change and layout shift seen on the
   front page, ticker and header during load.

   These metric-matched fallback faces map Times New Roman onto each web font's
   metrics, so the pre-swap text occupies the same width/height and the swap no
   longer shifts layout. Override values were measured from the live fonts
   (canvas TextMetrics) against Times New Roman; line-gap-override is 0% because
   none of the three define a line gap. They are inserted between the web font
   and the generic `serif` in each stack (mirrors --body-font-family, the
   heading rule and .article-subtitle in effektivt.min.css).
   ────────────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: "Bitter Fallback";
    src: local("Times New Roman"), local("Times");
    size-adjust: 111.95%;
    ascent-override: 83.97%;
    descent-override: 24.12%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Lora Fallback";
    src: local("Times New Roman"), local("Times");
    size-adjust: 113.78%;
    ascent-override: 88.77%;
    descent-override: 23.73%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "PT Serif Fallback";
    src: local("Times New Roman"), local("Times");
    size-adjust: 107.93%;
    ascent-override: 96.36%;
    descent-override: 26.87%;
    line-gap-override: 0%;
}

:root {
    --body-font-family: "Bitter", "Bitter Fallback", serif;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "Lora", "Lora Fallback", serif;
}

.article-subtitle {
    font-family: "PT Serif", "PT Serif Fallback", serif;
}

/* ──────────────────────────────────────────────────────────────────────────
   TopicCluster (tag) hero – 16:9 image instead of the wide cover background.
   Desktop/tablet: 16:9. Below 720px: 4:3 with the image centered.
   A grid ::before establishes a *minimum* height from the aspect-ratio, so a
   long title/summary grows the hero downward instead of being clipped – no
   character limit on the text.
   ────────────────────────────────────────────────────────────────────────── */
/* Full-width band behind the centered hero – ambient blurred backdrop of the
   same header image so the centered 16:9 card doesn't float on an empty surface.
   No extra image production: it reuses --tagview-ambient set on the element. */
.lm-canvas-tagview.tagview-hero-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: clamp(1.5rem, 4vw, 3rem) !important;
    background-color: var(--bs-primary, #2c5234);
}

    .lm-canvas-tagview.tagview-hero-band::before {
        content: "";
        position: absolute;
        inset: -40px;
        z-index: -1;
        background-image: var(--tagview-ambient);
        background-size: cover;
        background-position: center;
        filter: blur(34px) brightness(0.55) saturate(1.1);
        transform: scale(1.12);
    }

.tagview-hero {
    display: grid;
    grid-template-areas: "stack";
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    background-color: var(--bs-primary, #2c5234);
}

    .tagview-hero::before {
        content: "";
        grid-area: stack;
        aspect-ratio: 16 / 9;
    }

    /* Stack the image and the text overlay in the same grid cell */
    .tagview-hero > * {
        grid-area: stack;
        min-width: 0;
    }

.tagview-hero-img {
    align-self: stretch;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tagview-hero-overlay {
    align-self: end;
    z-index: 1;
    width: 100%;
    padding-block: clamp(1.25rem, 4vw, 3rem);
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0) 85%);
}

    .tagview-hero .cover-title,
    .tagview-hero .cover-text {
        color: #fff;
    }

    .tagview-hero .cover-text {
        margin-bottom: 0;
        color: rgba(255, 255, 255, 0.92);
    }

/* Below 720px: 4:3 ratio with the image centered */
@media (max-width: 719.98px) {
    .tagview-hero::before {
        aspect-ratio: 4 / 3;
    }

    .tagview-hero-img {
        object-position: center center;
    }
}

/* HTML-only ticker items (Manual ticker with no image/heading/link – the editor supplies raw
   TickerHTML, typically <a><img></a>). Make the artwork fill the 20rem slide card and drop the
   inline-image gap. Inline styles in the TickerHTML still win, so this is only a sensible default. */
.featured-news .card--teaser > .ticker-html,
.featured-news .card--teaser > .ticker-html > a {
    display: block;
}

.featured-news .card--teaser > .ticker-html img {
    display: block;
    width: 100%;
    height: auto;
}

/* Compact the desktop top-nav links (was 1rem, set on .navbar). Scoped to the header nav so other
   navbars are unaffected; overrides.css loads after effektivt.min.css, so this wins. */
.lm-navbar-navigation {
    --navbar-nav-link-padding-x: 0.75rem;
}

/* Center the main nav items so the shorter Høst-Tour pill stays vertically centered (the navbar-nav
   has no align-items, so it would otherwise stretch and top-align the pill). Not the icon buttons. */
.lm-navbar-navigation .navbar-nav:not(.nav-btns) {
    align-items: center;
}

/* Seasonal "Høst-Tour" CTA in the desktop top nav: primary-teal pill, kept short so it isn't too tall
   (default nav-link padding is 0.75rem top/bottom). */
.lm-navbar-navigation .nav-link.nav-link--hoesttour {
    font-weight: 700;
    color: #fff;
    background-color: hsl(190, 56%, 30%);
    border-radius: 999px;
    padding-block: 0.35rem;
}

.lm-navbar-navigation .nav-link.nav-link--hoesttour:hover {
    color: #fff;
    background-color: hsl(190, 56%, 38%);
}

/* "Høst-Tour" badge on teaser images for documents tagged 84. Rendered as a real element inside
   .teaser-media (which is position:relative + overflow:hidden), so it anchors to and is clipped to
   the image box; z-index keeps it above the gallery/video ::before tint (z-index:1). */
.teaser-media .teaser-hoesttour {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    background-color: #f5b301;
    color: #fff;
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* På horisontale teasere er billedboksen kun clamp(5rem, 30%, 12rem) bred, så 20px-indrykket lander
   midt i miniaturen. Trækkes ind i hjørnet fra md og op (under md er teaseren stacked, se nedenfor). */
@media (min-width: 768px) {
    .teaser--horizontal .teaser-media .teaser-hoesttour {
        top: 10px;
        left: 10px;
    }
}

/* Horisontale teasere stables på mobil. .teaser--horizontal er ikke et selvstændigt layout - det er
   basis-.teaser (som er stacked) med seks variabler skrevet ovenpå, så vi sætter blot de seks tilbage
   til deres basisværdier under md. Billedet bliver dermed fuldbredde 16:9 i stedet for en 5-12rem
   miniature - hvilket også giver Høst-Tour-badgen plads.
   Tickeren (.featured-news) bruger også .teaser--horizontal men skal forblive en miniature-række
   på alle bredder - derfor undtaget via :not(). */
@media (max-width: 767.98px) {
    .teaser--horizontal:not(.featured-news *) {
        --teaser-flex-direction: column;
        --teaser-media-width: auto;
        --teaser-media-margin: var(--teaser-offset) var(--teaser-offset) 0;
        --teaser-body-width: auto;
        --teaser-title-size: clamp(1.0625rem, 0.5874rem + 3.3049cqi, 3rem);
    }

    /* i zoner er body-padding sat til et venstreindryk beregnet til sidebilledet */
    .zone .teaser--horizontal {
        --teaser-body-padding: var(--spacing-base) 0;
    }
}


/* ===== LmPagination (fejlrapport #5091790) - holdes ens paa tvaers af tenants ===== */
.lm-pagination {
	--lm-pg-accent: #036d76;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	margin: 1.5rem 0;
}

.lm-pagination__label {
	font-size: .875rem;
	color: #6c757d;
}

.lm-pagination__items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .3rem;
}

.lm-pagination__btn {
	min-width: 2.375rem;
	height: 2.375rem;
	padding: 0 .625rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--lm-pg-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--lm-pg-accent);
	text-decoration: none;
	font-weight: 500;
	font-size: .9375rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

a.lm-pagination__btn:hover,
button.lm-pagination__btn:hover {
	background: color-mix(in srgb, var(--lm-pg-accent) 12%, transparent);
	color: var(--lm-pg-accent);
	text-decoration: none;
}

.lm-pagination__btn--active {
	background: var(--lm-pg-accent);
	border-color: var(--lm-pg-accent);
	color: #fff;
	cursor: default;
}

.lm-pagination__btn--disabled,
.lm-pagination__btn:disabled {
	color: #adb5bd;
	border-color: #dee2e6;
	background: transparent;
	cursor: default;
	pointer-events: none;
}

.lm-pagination__ellipsis {
	min-width: 1.5rem;
	text-align: center;
	color: #6c757d;
	user-select: none;
}

@media (max-width: 575.98px) {
	/* Mobil: alt skal passe paa EN linje (ingen orphan-wrap). Midtervinduet skjules,
	   og foerste/sidste-pilene skjules - "1" og sidste sidetal ER allerede de links. */
	.lm-pagination__btn--middle:not(.lm-pagination__btn--active),
	.lm-pagination__btn--first,
	.lm-pagination__btn--last {
		display: none;
	}

	.lm-pagination__items {
		gap: .25rem;
	}

	.lm-pagination__btn {
		min-width: 2.125rem;
		height: 2.125rem;
		padding: 0 .5rem;
		font-size: .875rem;
	}

	.lm-pagination__ellipsis {
		min-width: 1rem;
	}

	/* To midtpunkter (aktiv side midt i arkivet) fylder for meget paa mobil:
	   skjul dem og kollaps deres efterfoelgende ellipse, saa "... ..." aldrig opstaar. */
	.lm-pagination__btn--midpoint-paired,
	.lm-pagination__btn--midpoint-paired + .lm-pagination__ellipsis {
		display: none;
	}
}


@media (max-width: 374.98px) {
	/* Smalleste enheder: skjul ogsaa inderste boundary-sidetal, saa raekken aldrig wrapper. */
	.lm-pagination__btn--boundary-inner:not(.lm-pagination__btn--active) {
		display: none;
	}
}

/* Fade-in af listen efter sideskift (LmPagination) - perceived feedback ved hurtige loads. */
.lm-fade-in {
	animation: lmFadeIn .3s ease-out;
}

@keyframes lmFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* ─── Google Preferred Sources ───────────────────────────────────────────────
   CTA'en er et deeplink til https://www.google.com/preferences/source, ikke Googles
   publisher.js-knap: scriptet initialiserer kun ved sideload, og AppRoutes kører
   InteractiveServer, så <head> genindlæses aldrig ved intern navigation.
   Google-G'et må ikke farves om, så knapfladen er altid hvid med Googles egen
   kantfarve (#dadce0) - resten af boksen er husets sandfarve. */

.preferred-source {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	gap: .5625rem;
	font-family: var(--font-sans-serif);
	font-weight: 600;
	line-height: 1.2;
	border-radius: 50rem;
	background-color: var(--white);
	color: var(--body-color);
	text-decoration: none !important;
	transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

	.preferred-source:hover,
	.preferred-source:focus {
		background-color: var(--gray-100);
		border-color: var(--gray-400);
		box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
		color: var(--body-color);
	}

	.preferred-source:focus-visible {
		outline: 3px solid rgba(var(--primary-rgb), .45);
		outline-offset: 2px;
	}

.preferred-source-glyph {
	flex: none;
	display: block;
}

.preferred-source-label {
	white-space: nowrap;
}

.preferred-source-label--short {
	display: none;
}

/* Chip - artiklens byline */
.preferred-source--chip {
	min-height: 44px;
	padding: 0 1.125rem;
	border: 1px solid var(--gray-300);
	font-size: var(--fs-sm);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

	.preferred-source--chip .preferred-source-glyph {
		width: 18px;
		height: 18px;
	}

/* Pille - footerens ikonrække */
.preferred-source--pill {
	min-height: 40px;
	padding: 0 .9375rem;
	border: 1px solid #dadce0;
	font-size: var(--fs-xs);
	color: #3c4043;
	box-shadow: 0 1px 2px rgba(60, 64, 67, .14);
}

	.preferred-source--pill .preferred-source-glyph {
		width: 17px;
		height: 17px;
	}

/* Knap - inde i båndet */
.preferred-source--button {
	min-height: 52px;
	padding: 0 1.625rem;
	border: 1px solid #dadce0;
	font-size: var(--fs-base);
	color: #3c4043;
	box-shadow: 0 1px 3px rgba(60, 64, 67, .15);
}

	.preferred-source--button .preferred-source-glyph {
		width: 20px;
		height: 20px;
	}

/* Båndet - artikelbund og forside */
.preferred-source-band {
	display: flex;
	align-items: center;
	gap: var(--spacing-xl);
	background-color: hsl(45, 35%, 90%);
	border: 1px solid var(--tertiary);
	border-radius: var(--border-radius);
	padding: var(--spacing-lg) var(--spacing-xl);
	margin-bottom: var(--spacing-xl);
}

.preferred-source-band-text {
	flex: 1 1 auto;
}

.preferred-source-band-kicker {
	display: block;
	font-family: var(--font-sans-serif);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--secondary);
	margin-bottom: .375rem;
}

.preferred-source-band-headline {
	font-family: Lora, serif;
	font-weight: 600;
	font-size: var(--fs-lg);
	line-height: 1.3;
	margin: 0 0 .5rem;
	color: var(--body-color);
}

.preferred-source-band-body {
	margin: 0;
	font-size: var(--fs-base);
	line-height: 1.6;
	color: var(--body-light-color);
	max-width: 68ch;
}

.preferred-source-band-action {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .5rem;
}

.preferred-source-note {
	font-family: var(--font-sans-serif);
	font-size: var(--fs-2xs);
	line-height: 1.4;
	color: var(--gray-500);
	text-align: center;
	text-wrap: pretty;
	max-width: 18.125rem;
}

/* Chippen ligger til højre i byline-rækken, men kun når rækken faktisk er en række */
@media (min-width: 768px) {
	.byline-preferred-source {
		margin-left: auto;
	}
}

/* Mobil: chippen får stadig sin egen linje under forfatteren, men er ikke længere en
   knap i fuld bredde. Den er en lav meta-stribe: hairline over (.byline's egen
   border-bottom lukker den nedadtil), ingen ramme, ingen flade, chevron yderst til
   højre. Så læses den som en linje i bylinen frem for som en CTA, der konkurrerer med
   artiklens egne knapper. row-gap gør luften over hairlinen lig med padding under den. */
@media (max-width: 767.98px) {
	.byline-row {
		row-gap: .5rem;
	}

	.byline-preferred-source .preferred-source--chip {
		width: 100%;
		justify-content: flex-start;
		min-height: 0;
		gap: .5rem;
		padding: .5rem 0;
		border: 0;
		border-top: 1px solid var(--gray-300);
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
		font-size: var(--fs-2xs);
		color: var(--body-light-color);
	}

		.byline-preferred-source .preferred-source--chip:hover,
		.byline-preferred-source .preferred-source--chip:focus {
			background-color: transparent;
			box-shadow: none;
			color: var(--body-color);
		}

		.byline-preferred-source .preferred-source--chip:focus-visible {
			outline-offset: -2px;
		}

		.byline-preferred-source .preferred-source--chip .preferred-source-glyph {
			width: 15px;
			height: 15px;
		}

		/* Chevron viser at striben fører ud af sitet. Tegnet med borders og ikke som
		   tegnet ›: husets sans-font mangler glyffen og rendere en tofu-firkant.
		   Dekorativ - hele linkets tekst står allerede i aria-label. */
		.byline-preferred-source .preferred-source--chip::after {
			content: "";
			flex: none;
			margin-left: auto;
			margin-right: .125rem;
			width: .375rem;
			height: .375rem;
			border-top: 1.5px solid var(--gray-500);
			border-right: 1.5px solid var(--gray-500);
			transform: rotate(45deg);
		}
}

@media (max-width: 767.98px) {
	.preferred-source-band {
		flex-direction: column;
		align-items: stretch;
		gap: var(--spacing-md);
		padding: var(--spacing-md);
	}

	.preferred-source-band-action {
		align-items: stretch;
	}

	.preferred-source--button {
		width: 100%;
	}

	.preferred-source-note {
		max-width: none;
	}
}

/* ─── Planlagt blackout (Components/Shared/Common/ScheduledBlackout.razor) ────
   Overlayet skal ligge over ALT paa siden - ogsaa OneSignal-overlayet
   (z-index 999999, defineret nederst i denne fil) og #modal-search .close
   (99999). Derfor den ekstreme vaerdi frem for husets normale skala.

   Scroll-laasen er ren CSS via :has() og ikke en klasse paa <body>. Tre grunde:
   Blazor kan slet ikke saette body-klasser uden JS-interop; laasen virker
   dermed ogsaa i det prerenderede HTML, hvor der endnu ikke er nogen circuit;
   og den rydder sig selv op i samme oejeblik Blazor fjerner overlayet fra DOM.
   !important er noedvendigt, fordi linje 76 i denne fil bevidst ophaever
   Bootstraps .modal-open-laas globalt med samme vaegt.
   :has() bruges i forvejen flere steder i filen, saa der er ingen ny
   browserrisiko. 100dvh frem for 100vh, saa mobilbrowserens adressebjaelke
   ikke efterlader en stribe af siden synlig under overlayet. */
html:has(.blackout),
body:has(.blackout) {
	height: 100dvh;
	overflow: hidden !important;
}

.blackout {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(1.5rem, 6vw, 4rem) clamp(1.25rem, 6vw, 3rem);
	background: #000;
	color: #fff;
	text-align: center;
}

	/* Husets normale fokusmarkering er en primaerfarvet glow, som forsvinder paa
	   sort. Her skal den vaere hvid for at kunne ses. */
	.blackout :focus-visible {
		outline: 3px solid #fff;
		outline-offset: 3px;
	}

	.blackout-inner {
		width: 100%;
		max-width: 44rem;
		margin: auto;
	}

	.blackout-title {
		margin: 0 0 clamp(1.25rem, 4vw, 2rem);
		font-family: var(--font-sans-serif);
		font-size: clamp(1.75rem, 7vw, 3.5rem);
		font-weight: 800;
		line-height: 1.05;
		letter-spacing: .01em;
		text-transform: uppercase;
		color: #fff;
	}

	.blackout-lead {
		margin: 0 0 clamp(1rem, 3vw, 1.5rem);
		font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
		font-weight: 600;
		line-height: 1.45;
		color: #fff;
	}

	.blackout-body {
		margin: 0 0 clamp(1.75rem, 5vw, 2.5rem);
		font-size: clamp(.9375rem, 2vw, 1.0625rem);
		line-height: 1.6;
		color: rgba(255, 255, 255, .78);
	}

		.blackout-body > p {
			margin: 0 0 .75rem;
		}

			.blackout-body > p:last-child {
				margin-bottom: 0;
			}

	/* CTA'en er sidens eneste vej videre, saa den er den hvide flade. Pilen er en
	   ren glyf her - modsat .preferred-source-chippen, hvor husets sans mangler
	   tegnet - fordi overlayet saetter sin egen skrifttype.
	   Selektoren er bevidst .blackout .blackout-cta og ikke bare .blackout-cta:
	   temaets a:not(.btn, .gallery, .collection-image, .teaser, .nav-link) i
	   effektivt.min.css har specificitet (0,1,1) og ville ellers farve linket
	   turkis med --theme-accent. To klasser slaar den uden !important. */
	.blackout .blackout-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .625rem;
		min-height: 3.25rem;
		padding: .875rem 1.75rem;
		border: 2px solid #fff;
		border-radius: 50rem;
		background-color: #fff;
		color: #000;
		font-family: var(--font-sans-serif);
		font-size: clamp(.9375rem, 2vw, 1.0625rem);
		font-weight: 700;
		letter-spacing: .02em;
		text-transform: uppercase;
		text-decoration: none !important;
		transition: background-color .15s ease-in-out, color .15s ease-in-out;
	}

		.blackout .blackout-cta:hover,
		.blackout .blackout-cta:focus {
			background-color: transparent;
			color: #fff;
		}

	.blackout-cta-arrow {
		font-size: 1.1em;
		line-height: 1;
	}

	.blackout-return {
		margin: clamp(1.5rem, 4vw, 2rem) 0 0;
		font-size: var(--fs-sm);
		color: rgba(255, 255, 255, .6);
	}

	/* Bevidst underordnet CTA'en: en tekstknap, ikke en konkurrerende flade. */
	.blackout-skip {
		margin-top: clamp(1.25rem, 3vw, 1.75rem);
		padding: .5rem .25rem;
		border: 0;
		background: none;
		color: rgba(255, 255, 255, .6);
		font-family: var(--font-sans-serif);
		font-size: var(--fs-sm);
		text-decoration: underline;
		text-underline-offset: .25em;
		cursor: pointer;
		transition: color .15s ease-in-out;
	}

		.blackout-skip:hover,
		.blackout-skip:focus {
			color: #fff;
		}

@media (prefers-reduced-motion: no-preference) {
	.blackout {
		animation: blackout-fade .35s ease-out both;
	}

	@keyframes blackout-fade {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
}

@media (max-width: 767.98px) {
	.blackout {
		align-items: flex-start;
	}

	.blackout .blackout-cta {
		width: 100%;
	}
}

/* ─── Web push permission-prompt (wwwroot/js/webpush.js) ─────────────────────
   Laa foer inline i AppEffektivt.razor; flyttet hertil fordi overrides.css er
   den eneste CSS-fil huset vedligeholder. z-index 999999 er bevaret - se
   blackout-blokken ovenfor, som bevidst skal ligge over denne.

   Overlayet har fire tilstande, styret af data-state fra webpush.js:
     ask     - soft-prompt med knapper. Selve den native browser-dialog kaldes
               foerst paa klik, fordi Firefox/Safari kraever en user gesture og
               Chrome ellers sender anmodningen i "quiet UI".
     waiting - den native dialog er aaben; pilen peger op mod den (Chrome/Firefox
               tegner den oeverst til venstre i vinduet).
     denied  - brugeren har blokeret; vi forklarer vejen tilbage via haengelaasen.
     quiet   - Chrome viste aldrig dialogen (quieter permission UI). Uden denne
               tilstand forsvandt overlayet bare tavst efter et par sekunder. */
.onesignal-permission-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	z-index: 999999;
}

	.onesignal-permission-overlay.active {
		display: block;
	}

.onesignal-permission-content {
	position: absolute;
	top: 130px;
	left: 140px;
	text-align: center;
	color: #fff;
	max-width: 350px;
}

	/* I ask/denied/quiet er der ingen browser-dialog at pege paa, saa kortet
	   centreres i stedet for at klaebe sig op i hjoernet. */
	.onesignal-permission-overlay[data-state="ask"] .onesignal-permission-content,
	.onesignal-permission-overlay[data-state="denied"] .onesignal-permission-content,
	.onesignal-permission-overlay[data-state="quiet"] .onesignal-permission-content {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 420px;
	}

.onesignal-permission-arrow {
	font-size: 48px;
	line-height: 1;
	animation: onesignal-bounce 1s infinite;
}

	/* Pilen peger paa browserens egen dialog og vises derfor KUN i waiting. I quiet
	   ligger Chromes klokkeikon i hoejre ende af adressefeltet, ikke hvor pilen peger,
	   saa der forklarer teksten det i stedet - en pil mod det forkerte sted er vaerre
	   end ingen pil. */
	.onesignal-permission-overlay:not([data-state="waiting"]) .onesignal-permission-arrow {
		display: none;
	}

.onesignal-permission-text {
	font-size: 18px;
	line-height: 1.5;
	margin-top: 12px;
	background: rgba(0, 0, 0, 0.8);
	padding: 16px 20px;
	border-radius: 8px;
}

.onesignal-permission-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 14px;
}

	/* Kun soft-prompten har knapper; de oevrige tilstande lukkes af sig selv
	   eller af "Luk"-knappen, som webpush.js selv skifter tekst paa. */
	.onesignal-permission-overlay:not([data-state="ask"]) .onesignal-permission-allow {
		display: none;
	}

.onesignal-permission-btn {
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: 6px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.onesignal-permission-allow {
	background: #4e8b1d;
	color: #fff;
}

	.onesignal-permission-allow:hover,
	.onesignal-permission-allow:focus-visible {
		background: #3f7117;
	}

.onesignal-permission-dismiss {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
}

	.onesignal-permission-dismiss:hover,
	.onesignal-permission-dismiss:focus-visible {
		background: rgba(255, 255, 255, 0.12);
		border-color: #fff;
	}

@keyframes onesignal-bounce {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.onesignal-permission-arrow {
		animation: none;
	}
}

@media (max-width: 768px) {
	.onesignal-permission-content {
		top: 80px;
		left: 50%;
		transform: translateX(-50%);
		max-width: 90%;
	}

	.onesignal-permission-text {
		font-size: 16px;
	}

	.onesignal-permission-btn {
		flex: 1 1 100%;
	}
}

/* ─── Kampagnebånd over topartiklen (CampaignBand.razor) ──────────────────────
   Båndet skal kunne ses som noget andet end en artikel, så det låner intet fra
   .teaser: sort flade, gul fare-stribe og versal sans i stedet for hvidt kort
   med serif. Gul på sort er samtidig husets egne farver her — --topstory er den
   gule flade, topartiklen i forvejen bruger — så det er markant uden at være
   fremmed. Det er den nedtonede afløser for fuldskærms-blackoutet.

   Selektoren er .campaign-band.campaign-band--link og ikke bare .campaign-band:
   temaets a:not(.btn, .gallery, .collection-image, .teaser, .nav-link) i
   effektivt.min.css har specificitet (0,1,1) og ville ellers farve båndet
   turkis med --theme-accent. To klasser slår den uden !important. */
.campaign-band {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-lg) 0;
	border-radius: var(--border-radius);
	background-color: #101010;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
	transition: box-shadow .15s ease-in-out;
}

.campaign-band.campaign-band--link {
	color: #fff;
	text-decoration: none !important;
}

	.campaign-band:hover,
	.campaign-band:focus-visible {
		box-shadow: inset 0 0 0 1px var(--topstory);
	}

	.campaign-band:focus-visible {
		outline: 3px solid var(--topstory);
		outline-offset: 2px;
	}

/* Fare-striben — båndets signatur. align-self: stretch lader den følge højden
   uden at kende den, så den også holder, når teksten bryder til flere linjer. */
.campaign-band-rail {
	flex: none;
	align-self: stretch;
	width: .875rem;
	background-image: repeating-linear-gradient(135deg, var(--topstory) 0 .5rem, #101010 .5rem 1rem);
}

.campaign-band-text {
	flex: 1 1 auto;
	min-width: 0;
}

.campaign-band-kicker {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--font-sans-serif);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--topstory);
}

.campaign-band-pulse {
	flex: none;
	width: .4375rem;
	height: .4375rem;
	border-radius: 50%;
	background-color: var(--topstory);
}

.campaign-band-headline {
	display: block;
	margin: .375rem 0;
	font-family: var(--font-sans-serif);
	font-size: clamp(1.375rem, 3.2vw, 1.875rem);
	font-weight: 800;
	line-height: 1.08;
	text-transform: uppercase;
	text-wrap: balance;
	color: #fff;
}

.campaign-band-body {
	display: block;
	max-width: 52ch;
	font-size: var(--fs-sm);
	line-height: 1.5;
	text-wrap: pretty;
	color: rgba(255, 255, 255, .72);
}

/* CTA'en er en span, ikke et link — hele båndet er ankeret. Derfor hænger
   hover/focus på .campaign-band og ikke på knappen selv. */
.campaign-band-cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 2.875rem;
	padding: .625rem 1.375rem;
	border: 2px solid var(--topstory);
	border-radius: 50rem;
	background-color: var(--topstory);
	color: #000;
	font-family: var(--font-sans-serif);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

	.campaign-band:hover .campaign-band-cta,
	.campaign-band:focus-visible .campaign-band-cta {
		background-color: transparent;
		color: var(--topstory);
	}

.campaign-band-arrow {
	flex: none;
	width: 1rem;
	height: 1rem;
	transition: transform .15s ease-in-out;
}

	.campaign-band:hover .campaign-band-arrow {
		transform: translateX(.1875rem);
	}

@media (prefers-reduced-motion: no-preference) {
	.campaign-band-pulse {
		animation: campaign-band-pulse 2.4s ease-out infinite;
	}

	@keyframes campaign-band-pulse {
		0% {
			box-shadow: 0 0 0 0 rgba(255, 255, 0, .55);
		}

		70% {
			box-shadow: 0 0 0 .5rem rgba(255, 255, 0, 0);
		}

		100% {
			box-shadow: 0 0 0 0 rgba(255, 255, 0, 0);
		}
	}
}

/* Mobil: striben lægger sig som en tapelinje øverst i stedet for langs kanten,
   og knappen fylder båndets bredde. De negative margener spejler paddingen. */
@media (max-width: 767.98px) {
	.campaign-band {
		flex-direction: column;
		align-items: stretch;
		gap: var(--spacing-md);
		padding: 0 var(--spacing-lg) var(--spacing-lg);
	}

	.campaign-band-rail {
		width: auto;
		height: .625rem;
		margin: 0 calc(var(--spacing-lg) * -1);
		background-image: repeating-linear-gradient(135deg, var(--topstory) 0 .4375rem, #101010 .4375rem .875rem);
	}

	.campaign-band-cta {
		width: 100%;
	}
}


/* ──────────────────────────────────────────────────────────────────────────
   Container-moduler (Faktaboksmodul / Tekstboksmodul).
   Et modul er en CMSContent-blok (CMSContentType 226), som andre blokke ligger
   inde i (ParentCMSContent_id). Blokkene renderes af deres egne komponenter
   INDE I kortet (DocumentFactBoxModule / DocumentTextBoxModule), så her er kun
   afstande og titlen — selve kortet er det samme som den gamle enkeltbloks-
   faktaboks (.card--factbox) og tekstboks (.card.theme-primary).
   ────────────────────────────────────────────────────────────────────────── */
.card--factbox-module .card-body > *:last-child,
.card--textbox-module .card-body > *:last-child {
	margin-bottom: 0;
}

.card--factbox-module .card-body > table,
.card--factbox-module .card-body > .table-responsive,
.card--factbox-module .card-body > figure,
.card--factbox-module .card-body > blockquote,
.card--factbox-module .card-body > .row,
.card--textbox-module .card-body > table,
.card--textbox-module .card-body > .table-responsive,
.card--textbox-module .card-body > figure,
.card--textbox-module .card-body > blockquote,
.card--textbox-module .card-body > .row {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

/* Tekstboksens titel spejler faktaboksens (.faktaboks-titel i det genererede stylesheet). */
.tekstboks-titel {
	font-size: var(--fs-lg);
	margin-bottom: 1rem;
}


/* --------------------------------------------------------------------------
   Podcast: forsidens lead (Common/PodcastLead.razor, parkeret i FrontPageZone1
   indtil web-lanceringen er godkendt), /podcast-siden (Pages/PodcastPage.razor)
   og sitets ene afspiller, "docken", i bunden af vinduet
   (Shared/Audio/PodcastDock.razor + js/podcast-dock.js).

   Samme komposition som appens podcast-modul, saa laeseren moeder det samme
   paa web og i app: ET fremhaevet afsnit paa kanalens brand-gradient med EN
   stor, hvid "Afspil"-knap, og alle kanaler som avatarer (forsiden) eller kort
   (siden). Alle kanaler er for abonnenter; en laeser uden abonnement hoerer en
   smagsproeve (intro + laase-besked) og faar derefter en pulserende
   "Faa adgang"-knap (.is-preview-ended, sat af docken). Lyden koerer i docken,
   der glider op nedefra og bliver der, mens laeseren navigerer videre.

   Tilstand: js/podcast-dock.js holder .is-current/.is-playing paa ALT med
   data-podcast-id (knapper, lead, kort, tidslinjer) og maler --podcast-progress
   paa tidslinjerne. Al visuel respons herfra - Afspil/Pause, glyf -> lydboelge,
   tidslinjens fyld - er ren CSS paa de klasser.

   Sitets stylesheet farver alle links med `a:not(.btn, ...)` (specificitet 0,1,1),
   som slaar en enkelt klasse. Derfor er hvide links herunder skrevet som
   `.podcast-lead a.klasse` - ellers bliver kanalnavnene link-groenne.
   -------------------------------------------------------------------------- */

/* ---- Kanalernes brand-gradienter (samme par som appens BrandGradients) ---- */
.podcast-art--kvaeg       { background: linear-gradient(135deg, #036d76, #66332a); }
.podcast-art--grise       { background: linear-gradient(135deg, #b0722a, #66332a); }
.podcast-art--planter     { background: linear-gradient(135deg, #488a42, #036d76); }
.podcast-art--maskiner    { background: linear-gradient(135deg, #5a6b6d, #036d76); }
.podcast-art--business    { background: linear-gradient(135deg, #66332a, #b0722a); }
.podcast-art--marked      { background: linear-gradient(135deg, #b0722a, #036d76); }
.podcast-art--debat       { background: linear-gradient(135deg, #66332a, #5a6b6d); }
.podcast-art--dagens-avis { background: linear-gradient(135deg, #036d76, #488a42); }
.podcast-art--default     { background: linear-gradient(135deg, #036d76, #66332a); }

.podcast-glyph {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* ---- Cover-morph: glyffen toner ud og en lydboelge toner ind, mens afsnittet spiller ----
   .podcast-morph er selve coveret (lead, kort, dock); .is-playing sidder paa
   det element, docken har markeret (lead-sektionen, kortet, docken selv). */
.podcast-morph {
	position: relative;
}

.podcast-morph .podcast-glyph {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.podcast-wavebars {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.podcast-wavebars i {
	display: block;
	width: 4px;
	height: 50%;
	border-radius: 4px;
	background: currentColor;
	transform: scaleY(0.35);
}

.is-playing .podcast-morph .podcast-glyph {
	opacity: 0;
	transform: scale(0.6);
}

.is-playing .podcast-morph .podcast-wavebars {
	opacity: 1;
	transform: none;
}

/* Selve animationen hoerer til TILSTANDEN - ikke til stregerne med en pause paa. En
   pauset animation, en anden regel skal genstarte, er skroebelig: enhver animation-
   shorthand i kaskaden nulstiller play-state igen, og i praksis stod stregerne stille.
   Forskudt timing, saa de boelger i stedet for at pulsere i takt. */
.is-playing .podcast-morph .podcast-wavebars i {
	animation: podcast-wave 1s ease-in-out infinite;
}

.is-playing .podcast-morph .podcast-wavebars i:nth-child(1) { animation-delay: 0s;    animation-duration: 0.9s; }
.is-playing .podcast-morph .podcast-wavebars i:nth-child(2) { animation-delay: 0.18s; animation-duration: 1.1s; }
.is-playing .podcast-morph .podcast-wavebars i:nth-child(3) { animation-delay: 0.36s; animation-duration: 0.8s; }
.is-playing .podcast-morph .podcast-wavebars i:nth-child(4) { animation-delay: 0.12s; animation-duration: 1s; }
.is-playing .podcast-morph .podcast-wavebars i:nth-child(5) { animation-delay: 0.3s;  animation-duration: 1.2s; }

@keyframes podcast-wave {
	0%, 100% { transform: scaleY(0.35); }
	50%      { transform: scaleY(1); }
}

/* ---- Den store afspil-knap (lead, side, kort) ---- */
.podcast-play,
.podcast-lead a.podcast-play {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #036d76;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	padding: 0.55rem 1.3rem 0.55rem 0.6rem;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.55);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.podcast-play:hover,
.podcast-play:focus-visible,
.podcast-lead a.podcast-play:hover,
.podcast-lead a.podcast-play:focus-visible {
	background: #f6f3f2;
	color: #025961;
	text-decoration: none;
	transform: translateY(-1px);
}

.podcast-play__icon {
	position: relative;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #036d76;
}

/* Trekanten er optisk centreret (lidt til hoejre for boksens midte). */
.podcast-play__icon::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 11px;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #fff;
}

.podcast-play__label--pause {
	display: none;
}

/* Spillende tilstand (docken saetter .is-playing paa knappen): to streger og "Pause". */
.podcast-play.is-playing .podcast-play__label--play {
	display: none;
}

.podcast-play.is-playing .podcast-play__label--pause {
	display: inline;
}

.podcast-play.is-playing .podcast-play__icon::before {
	left: 13px;
	top: 12px;
	width: 12px;
	height: 14px;
	border: 0;
	background: linear-gradient(90deg, #fff 0 4px, transparent 4px 8px, #fff 8px 12px);
}

/* Laast afsnit: samme knap, men med haengelaas paa ikonet - den foerer til kanalens kort og CTA. */
.podcast-play__lock.podcast-lead__lock {
	right: -4px;
	bottom: -4px;
	background: #036d76;
	border-color: #fff;
}

/* Knappen i afsnitslisten er teal paa hvidt. */
.podcast-play--card {
	background: #036d76;
	color: #fff;
	box-shadow: 0 8px 18px -12px rgba(3, 109, 118, 0.9);
}

.podcast-play--card:hover,
.podcast-play--card:focus-visible {
	background: #025961;
	color: #fff;
}

.podcast-play--card .podcast-play__icon {
	background: #fff;
}

.podcast-play--card .podcast-play__icon::before {
	border-color: transparent transparent transparent #036d76;
}

.podcast-play--card.is-playing .podcast-play__icon::before {
	background: linear-gradient(90deg, #036d76 0 4px, transparent 4px 8px, #036d76 8px 12px);
}

/* Kompakt variant til listen af tidligere afsnit. */
.podcast-play--compact {
	gap: 0.45rem;
	font-size: 0.9rem;
	padding: 0.35rem 0.95rem 0.35rem 0.4rem;
}

.podcast-play--compact .podcast-play__icon {
	width: 30px;
	height: 30px;
}

.podcast-play--compact .podcast-play__icon::before {
	left: 11px;
	top: 9px;
	border-width: 6px 0 6px 10px;
}

.podcast-play--compact.is-playing .podcast-play__icon::before {
	left: 10px;
	top: 9px;
	width: 10px;
	height: 12px;
	background: linear-gradient(90deg, #036d76 0 3px, transparent 3px 7px, #036d76 7px 10px);
}

/* ---- Tidslinje: vises kun for det afsnit, der ligger i docken (.is-current) ---- */
.podcast-timeline {
	display: none;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.9rem;
}

.podcast-timeline.is-current {
	display: flex;
	animation: podcast-reveal 0.25s ease;
}

@keyframes podcast-reveal {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

/* 18px hoej ramme at ramme med fingeren; selve linjen er 5px. touch-action: none,
   saa et traek i linjen spoler i stedet for at scrolle siden. */
.podcast-timeline__track {
	position: relative;
	flex: 1 1 auto;
	height: 18px;
	border-radius: 999px;
	cursor: pointer;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.podcast-timeline__track::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
}

.podcast-timeline__fill {
	position: absolute;
	left: 0;
	top: 50%;
	height: 5px;
	margin-top: -2.5px;
	width: calc(var(--podcast-progress, 0) * 100%);
	border-radius: 999px;
	background: #fff;
}

.podcast-timeline__fill::after {
	content: "";
	position: absolute;
	right: -7px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	transform: scale(0.85);
	transition: transform 0.15s ease;
}

.podcast-timeline__track:hover .podcast-timeline__fill::after,
.podcast-timeline__track:focus-visible .podcast-timeline__fill::after {
	transform: scale(1.1);
}

.podcast-timeline__track:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.podcast-timeline__time {
	flex: 0 0 auto;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.9;
}

/* Paa hvide kort: teal linje. */
.podcast-timeline--card {
	margin-top: 0.75rem;
}

.podcast-timeline--card .podcast-timeline__track::before {
	background: rgba(3, 109, 118, 0.16);
}

.podcast-timeline--card .podcast-timeline__fill,
.podcast-timeline--card .podcast-timeline__fill::after {
	background: #036d76;
}

.podcast-timeline--card .podcast-timeline__track:focus-visible {
	outline-color: #036d76;
}

.podcast-timeline--card .podcast-timeline__time {
	color: #6e6e6e;
	opacity: 1;
}

/* ---- Lead (forsiden) og fremhaevet afsnit (siden) ---- */
.podcast-lead {
	container: podcast-lead / inline-size;
	margin: 0 0 1.5rem;
	border-radius: 18px;
	overflow: hidden;
	background: #2a1b17;
	color: #fff;
	box-shadow: 0 16px 36px -24px rgba(20, 16, 15, 0.7);
}

.podcast-lead--page {
	scroll-margin-top: 150px;
}

/* Uden kanal-raekken er heroen hele kortet - lidt mere luft i bunden, saa
   tidslinjen ikke sidder klemt mod kanten. */
.podcast-lead--solo .podcast-lead__hero {
	padding-bottom: 1.4rem;
}

.podcast-lead__hero {
	padding: 1.1rem 1.25rem 1.25rem;
	color: #fff;
}

/* Kicker og "Alle podcasts" paa samme linje, yderst til hoejre. Kun widget'en har
   linket; /podcast-siden har bare sin <p class="podcast-lead__kicker"> som foer. */
.podcast-lead__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 0.85rem;
}

/* Kanalnavnet maa krympe og broede over to linjer; "Alle podcasts" maa aldrig krympe. Uden dette
   kunne et langt navn ("SENESTE EFFEKTIVT LANDBRUG") flyde ud over knappen paa en smal telefon. */
.podcast-lead__head .podcast-lead__kicker {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

.podcast-lead__head .podcast-lead__all {
	flex: 0 0 auto;
}

/* Paa et smalt kort krymper baade kanalnavnet og "Alle podcasts", og prikken ryger, saa
   de kan dele en linje. Bliver navnet alligevel for langt, broeder det over to linjer -
   knappen bliver staaende i sin egen bredde og bliver aldrig skrevet hen over.
   Regelsaettet staar to gange med vilje: foerst efter VINDUETS bredde, som alle browsere
   forstaar, derefter efter KORTETS egen bredde (container query), som er den rigtige maalestok,
   men som aeldre iOS Safari ikke kan. Uden den foerste blev teksten paa fuld stoerrelse paa de
   telefoner og skred ind over knappen. Samme vaerdier begge steder. */
@media (max-width: 575.98px) {
	.podcast-lead__head {
		gap: 0.5rem;
	}

	.podcast-lead__head .podcast-lead__dot {
		display: none;
	}

	.podcast-lead__head .podcast-lead__kicker {
		gap: 0;
		font-size: 0.62rem;
		letter-spacing: 0.03em;
	}

	.podcast-lead__head .podcast-lead__all {
		gap: 0.28rem;
		padding: 0.24rem 0.55rem;
		font-size: 0.68rem;
	}

	.podcast-lead__head .podcast-lead__all-icon {
		width: 11px;
		height: 11px;
	}
}

@container podcast-lead (max-width: 449px) {
	.podcast-lead__head {
		gap: 0.5rem;
	}

	.podcast-lead__head .podcast-lead__dot {
		display: none;
	}

	.podcast-lead__head .podcast-lead__kicker {
		gap: 0;
		font-size: 0.62rem;
		letter-spacing: 0.03em;
	}

	.podcast-lead__head .podcast-lead__all {
		gap: 0.28rem;
		padding: 0.24rem 0.55rem;
		font-size: 0.68rem;
	}

	.podcast-lead__head .podcast-lead__all-icon {
		width: 11px;
		height: 11px;
	}
}

.podcast-lead__kicker {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.85rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.92;
}

.podcast-lead__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5fb8bf;
}

/* Cover + tekst + knap paa EN raekke. Knappen (.podcast-lead__actions) fylder hele
   bredden og falder ned paa sin egen linje, indtil kortet er bredt nok - se
   container-forespoergslen nedenfor. */
.podcast-lead__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

/* Frostet cover: hvid flade i lav opacitet, glyffen ovenpaa i fuld hvid. */
.podcast-lead__cover {
	flex: 0 0 68px;
	width: 68px;
	height: 68px;
	padding: 16px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.podcast-lead__text {
	flex: 1 1 12rem;
	min-width: 0;
}

.podcast-lead__title {
	margin: 0 0 0.3rem;
	font-size: clamp(1.15rem, 1.9vw + 0.6rem, 1.55rem);
	line-height: 1.25;
	color: #fff;
}

.podcast-lead__meta {
	margin: 0;
	font-size: 0.875rem;
	color: #fff;
	opacity: 0.85;
}

.podcast-lead__actions {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.75rem;
}

/* Bredt kort: knappen til hoejre for titlen, saa pladsen bruges. */
@container podcast-lead (min-width: 560px) {
	.podcast-lead__actions {
		flex: 0 0 auto;
		margin-left: auto;
	}
}

/* "Alle afsnit" beside the play button on the featured block - the same white pill as "Alle podcasts",
   but a <button>, so it needs the button reset the link never did. */
.podcast-lead button.podcast-lead__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.9rem;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.podcast-lead button.podcast-lead__more:hover,
.podcast-lead button.podcast-lead__more:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
}

/* Det fremhaevede afsnits bagkatalog ligger paa hvidt under heroen - og skal derfor
   nulstille .podcast-lead's hvide tekstfarve, ellers staar afsnitstitlerne hvidt paa hvidt. */
.podcast-lead__episodes {
	padding: 0 1.25rem 1.1rem;
	background: #fff;
	color: #2b2b2b;
}

.podcast-lead__episodes .podcast-episode__title,
.podcast-lead__episodes .podcast-episode__teaser {
	color: #2b2b2b;
}

.podcast-lead__episodes .podcast-episodes {
	padding-top: 0;
}

.podcast-lead__teaser {
	margin: 0;
	padding: 0.9rem 1.25rem 1.1rem;
	background: #fff;
	color: #404040;
	font-size: 0.95rem;
}

/* ---- Kanal-raekken under leadet: PARKERET ----------------------------------
   Markup'en er taget ud af PodcastLead.razor (2026-09-07): raekken gjorde
   widget'en for hoej paa forsiden, og "Alle podcasts"-knappen ved siden af
   afspil-knappen er indtil videre den eneste vej videre. Reglerne bliver
   staaende - sammen med scrolleren i js/podcast-dock.js - saa raekken kan
   saettes tilbage ved at genindsaette <ul class="podcast-lead__list">, ikke
   ved at skrive den forfra. Ingen af dem koster noget, naar markup'en er vaek.
   .podcast-lead__lock er IKKE parkeret: den bruges stadig af haengelaasen paa
   afspil-knappen for et laast afsnit.
   --------------------------------------------------------------------------- */
.podcast-lead__channels {
	padding: 0.9rem 1.25rem 1.1rem;
}

.podcast-lead__channels-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 0 0 0.7rem;
}

.podcast-lead__channels-tools {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: auto;
}

/* Pile-knapperne: kun synlige (scriptet fjerner hidden), naar raekken har overloeb. */
.podcast-lead__arrow {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.podcast-lead__arrow svg {
	width: 14px;
	height: 14px;
}

.podcast-lead__arrow:hover:not(:disabled),
.podcast-lead__arrow:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
}

.podcast-lead__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.podcast-lead__channels-label {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.75;
}

/* "Alle podcasts" er en fast knap i hovedet - den kan aldrig blive klippet af scrolleren. */
.podcast-lead a.podcast-lead__all {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.8rem;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.podcast-lead a.podcast-lead__all:hover,
.podcast-lead a.podcast-lead__all:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
	color: #fff;
	text-decoration: none;
}

.podcast-lead__all-icon {
	width: 14px;
	height: 14px;
}

/* Vandret scroller, der bloeder ud til kortets kanter: en halvt synlig avatar i
   kanten viser i sig selv, at der er flere. Scriptet saetter .is-scrolled /
   .is-at-end, saa kun den kant, der skjuler noget, tones - og intet tones, naar
   alle kanaler er der. */
.podcast-lead__list {
	display: flex;
	gap: 0.35rem;
	margin: 0 -1.25rem;
	padding: 0 1.25rem;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-left: 1.25rem;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
}

.podcast-lead__list::-webkit-scrollbar {
	display: none;
}

.podcast-lead__list.is-scrolled {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2.5rem), transparent);
}

.podcast-lead__list.is-scrolled.is-at-end {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem);
	mask-image: linear-gradient(90deg, transparent, #000 2rem);
}

.podcast-lead__list.is-at-end:not(.is-scrolled) {
	-webkit-mask-image: none;
	mask-image: none;
}

/* Musen kan traekke raekken (scriptet); fingre og trackpads scroller den selv. */
@media (hover: hover) and (pointer: fine) {
	.podcast-lead__list {
		cursor: grab;
	}
}

.podcast-lead__list.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	-webkit-user-select: none;
	user-select: none;
}

.podcast-lead__list.is-dragging a {
	pointer-events: none;
}

.podcast-lead__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.podcast-lead a.podcast-lead__channel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	width: 74px;
	padding: 0.2rem 0;
	color: #fff;
	text-decoration: none;
}

.podcast-lead a.podcast-lead__channel:hover,
.podcast-lead a.podcast-lead__channel:focus-visible {
	color: #fff;
	text-decoration: none;
}

.podcast-lead a.podcast-lead__channel:hover .podcast-lead__avatar {
	transform: translateY(-2px);
}

.podcast-lead__avatar {
	position: relative;
	width: 52px;
	height: 52px;
	padding: 13px;
	border-radius: 14px;
	color: #fff;
	transition: transform 0.15s ease;
}

.podcast-lead__name {
	max-width: 74px;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
}

/* Haengelaas-badge paa avataren (ren CSS: boejle + krop, ingen ikonfont). */
.podcast-lead__lock {
	position: absolute;
	right: -5px;
	bottom: -5px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #3a2b27;
	border: 2px solid #2a1b17;
}

.podcast-lead__lock::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 3px;
	width: 6px;
	height: 6px;
	border: 1.5px solid #fff;
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
}

.podcast-lead__lock::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 8px;
	height: 6px;
	border-radius: 1.5px;
	background: #fff;
}

/* ---- Docken: sitets ene afspiller, fast i bunden af vinduet ----
   z-index 1040 ligger over indholdet og under Bootstraps modaler (1055),
   blackout'et og OneSignal-overlayet. */
.podcast-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1040;
	background: #2a1b17;
	color: #fff;
	box-shadow: 0 -14px 34px -18px rgba(0, 0, 0, 0.7);
	padding-bottom: env(safe-area-inset-bottom);
	transform: translateY(110%);
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.podcast-dock.is-open {
	transform: none;
}

/* Sidens indhold skal kunne scrolles fri af docken. */
body.has-podcast-dock {
	padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* Soegelinjen langs dockens overkant. Rammen er 14px hoej og rager 6px op over
   docken, saa den er til at ramme; linjen selv er 4px og vokser under markoeren. */
.podcast-dock__track {
	position: absolute;
	left: 0;
	right: 0;
	top: -6px;
	height: 14px;
	cursor: pointer;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.podcast-dock__track::before,
.podcast-dock__buffer,
.podcast-dock__fill {
	position: absolute;
	left: 0;
	top: 6px;
	height: 4px;
	transition: height 0.15s ease, top 0.15s ease;
}

.podcast-dock__track::before {
	content: "";
	right: 0;
	background: rgba(255, 255, 255, 0.16);
}

.podcast-dock__buffer {
	width: calc(var(--podcast-buffered, 0) * 100%);
	background: rgba(255, 255, 255, 0.2);
}

.podcast-dock__fill {
	width: calc(var(--podcast-progress, 0) * 100%);
	background: #5fb8bf;
}

.podcast-dock__fill::after {
	content: "";
	position: absolute;
	right: -6px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.podcast-dock__track:hover::before,
.podcast-dock__track:hover .podcast-dock__buffer,
.podcast-dock__track:hover .podcast-dock__fill,
.podcast-dock__track:focus-visible::before,
.podcast-dock__track:focus-visible .podcast-dock__buffer,
.podcast-dock__track:focus-visible .podcast-dock__fill {
	top: 5px;
	height: 6px;
}

.podcast-dock__track:hover .podcast-dock__fill::after,
.podcast-dock__track:focus-visible .podcast-dock__fill::after {
	opacity: 1;
	transform: none;
}

.podcast-dock__track:focus-visible {
	outline: 2px solid #5fb8bf;
	outline-offset: -2px;
}

.podcast-dock__inner {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0.7rem 1rem;
}

.podcast-dock__cover {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	padding: 11px;
	border-radius: 12px;
	color: #fff;
}

.podcast-dock__glyph {
	display: block;
	width: 100%;
	height: 100%;
}

.podcast-dock__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.podcast-dock a.podcast-dock__title {
	display: block;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
}

.podcast-dock a.podcast-dock__title:hover,
.podcast-dock a.podcast-dock__title:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.podcast-dock__meta {
	margin: 0;
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.8;
}

.podcast-dock__sep {
	margin: 0 0.35rem;
}

.podcast-dock__controls {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.3rem;
}

.podcast-dock__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	opacity: 0.85;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.podcast-dock__btn svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.podcast-dock__btn:hover,
.podcast-dock__btn:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	opacity: 1;
}

.podcast-dock__play {
	position: relative;
	width: 46px;
	height: 46px;
	margin: 0 0.2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.7);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.podcast-dock__play:hover,
.podcast-dock__play:focus-visible {
	background: #f6f3f2;
	transform: translateY(-1px);
}

.podcast-dock__play-icon::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 14px;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #036d76;
}

.podcast-dock.is-playing .podcast-dock__play-icon::before {
	left: 16px;
	top: 15px;
	width: 14px;
	height: 16px;
	border: 0;
	background: linear-gradient(90deg, #036d76 0 5px, transparent 5px 9px, #036d76 9px 14px);
}

.podcast-dock__speed {
	min-width: 48px;
	height: 30px;
	padding: 0 0.55rem;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.podcast-dock__speed:hover,
.podcast-dock__speed:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
}

.podcast-dock__close {
	margin-left: 0.2rem;
}

@media (max-width: 599px) {
	.podcast-dock__inner {
		gap: 0.7rem;
		padding: 0.6rem 0.8rem;
	}

	.podcast-dock__btn--skip {
		display: none;
	}

	.podcast-dock__speed {
		min-width: 42px;
		padding: 0 0.4rem;
	}
}

@media (max-width: 379px) {
	.podcast-dock__speed {
		display: none;
	}
}

/* ---- /podcast: hoved, adgangs-strimmel, kanalkort ----
   Kanalerne er kort paa deres egen brand-gradient: glyf, navn ved siden af, nyeste
   afsnit med resume, "Afspil" og "Alle afsnit". Kortene straekker sig IKKE til
   hinandens hoejde (align-items: start), saa en aabnet kanal aldrig goer naboerne
   hoejere. Faelles med det fremhaevede afsnit: adgangs-strimlen (.podcast-access),
   resumeet (.podcast-teaser), listen af tidligere afsnit (.podcast-episodes) og
   det kontekstuelle tilbud (.podcast-unlock). */
.podcast-page__head {
	margin: 0.5rem 0 1.25rem;
}

.podcast-page__kicker {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #036d76;
}

.podcast-page__title {
	margin: 0 0 0.5rem;
}

.podcast-page__lead {
	margin: 0;
	font-size: 1.05rem;
}

.podcast-page__status {
	color: #6e6e6e;
}

.podcast-page__section {
	margin: 0 0 0.9rem;
}

/* ---- Adgangs-strimlen: EN gang paa siden, aldrig pr. kanal ---- */
.podcast-access {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	margin: 0 0 1.75rem;
	padding: 0.8rem 1rem;
	border: 1px solid rgba(3, 109, 118, 0.2);
	border-left: 4px solid #036d76;
	border-radius: 12px;
	background: #f3f8f8;
	color: #2b2b2b;
}

.podcast-access__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #036d76;
	color: #fff;
}

.podcast-access__text {
	flex: 1 1 18rem;
	min-width: 0;
	margin: 0;
	font-size: 0.925rem;
	line-height: 1.4;
}

.podcast-access__actions {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-left: auto;
}

.podcast-access__login {
	font-size: 0.9rem;
	white-space: nowrap;
}

/* Haengelaasen (ren CSS: boejle + krop) - strimlen, noeglen og "Kun for abonnenter". */
.podcast-badge__lock {
	position: relative;
	display: inline-block;
	width: 10px;
	height: 11px;
}

.podcast-badge__lock::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0;
	width: 6px;
	height: 5px;
	border: 1.5px solid currentColor;
	border-bottom: 0;
	border-radius: 3px 3px 0 0;
}

.podcast-badge__lock::after {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 10px;
	height: 6px;
	border-radius: 1.5px;
	background: currentColor;
}

/* ---- Det kontekstuelle tilbud: foelger smagsproeven ----
   js/podcast-dock.js saetter klasserne paa docken og paa alle elementer med
   afsnittets data-podcast-id (kortet, det fremhaevede afsnit, afsnittet i listen):
     .is-preview         smagsproeven er den, der ligger i afspilleren -> tilbuddet vises
     .is-preview-ending  laase-beskeden laeses op lige nu (de sidste ~12 sekunder) -> det pulserer
     .is-preview-ended   smagsproeven er spillet faerdig -> det bliver ved med at pulsere
   Et afsnit i listen ligger inde i kortet, saa det viser kun SIT tilbud, naar det
   selv spiller (reglen med :not). */
@keyframes podcast-cta-pulse {
	0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(3, 109, 118, 0.55); }
	50%      { transform: scale(1.04); box-shadow: 0 0 0 12px rgba(3, 109, 118, 0); }
}

.podcast-page a.podcast-unlock {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	margin-top: 0.8rem;
	padding: 0.45rem 1rem;
	border: 1.5px solid #036d76;
	border-radius: 999px;
	color: #036d76;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.podcast-page .is-preview a.podcast-unlock {
	display: flex;
	animation: podcast-reveal 0.25s ease;
}

.podcast-page .podcast-episode:not(.is-preview) a.podcast-unlock {
	display: none;
}

.podcast-page a.podcast-unlock:hover,
.podcast-page a.podcast-unlock:focus-visible {
	background: rgba(3, 109, 118, 0.08);
	color: #036d76;
}

.podcast-page .is-preview-ending a.podcast-unlock,
.podcast-page .is-preview-ended a.podcast-unlock {
	background: #036d76;
	color: #fff;
	animation: podcast-cta-pulse 1.6s ease-in-out infinite;
}

.podcast-page a.podcast-unlock--compact {
	margin-top: 0.6rem;
	padding: 0.35rem 0.85rem;
	font-size: 0.8rem;
}

/* Paa gradienten: hvid kant, hvid tekst - og hvid pille, naar den pulserer. */
.podcast-page a.podcast-unlock--light {
	border-color: rgba(255, 255, 255, 0.85);
	color: #fff;
}

.podcast-page a.podcast-unlock--light:hover,
.podcast-page a.podcast-unlock--light:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.podcast-page .is-preview-ending a.podcast-unlock--light,
.podcast-page .is-preview-ended a.podcast-unlock--light {
	background: #fff;
	color: #036d76;
}

/* Samme tilbud paa det fremhaevede afsnit og forsidens lead (hvidt link paa gradienten -
   se noten om a:not(.btn) oeverst): skjult, indtil smagsproeven spiller. */
.podcast-lead a.podcast-lead__cta {
	display: none;
	margin-top: 0.85rem;
	padding: 0.35rem 0.9rem;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}

.podcast-lead.is-preview a.podcast-lead__cta {
	display: inline-block;
	animation: podcast-reveal 0.25s ease;
}

.podcast-lead a.podcast-lead__cta:hover,
.podcast-lead a.podcast-lead__cta:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.podcast-lead.is-preview-ending a.podcast-lead__cta,
.podcast-lead.is-preview-ended a.podcast-lead__cta {
	background: #fff;
	color: #036d76;
	animation: podcast-cta-pulse 1.6s ease-in-out infinite;
}

/* Docken: linket foelger smagsproeven og bliver en pulserende pille under laase-beskeden. */
.podcast-dock__cta {
	display: none;
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	margin-top: 0.15rem;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.podcast-dock.is-preview .podcast-dock__cta {
	display: inline-block;
}

.podcast-dock.is-preview-ending .podcast-dock__cta,
.podcast-dock.is-preview-ended .podcast-dock__cta {
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: #fff;
	color: #036d76;
	text-decoration: none;
	animation: podcast-cta-pulse 1.6s ease-in-out infinite;
}

.podcast-dock a.podcast-dock__cta:hover,
.podcast-dock a.podcast-dock__cta:focus-visible {
	color: #fff;
}

.podcast-dock.is-preview-ending a.podcast-dock__cta:hover,
.podcast-dock.is-preview-ending a.podcast-dock__cta:focus-visible,
.podcast-dock.is-preview-ended a.podcast-dock__cta:hover,
.podcast-dock.is-preview-ended a.podcast-dock__cta:focus-visible {
	color: #036d76;
}

/* ---- Resume med "Laes mere" ----
   Kassen er hoej til N linjer og skjuler resten. Selve afkortningen laver
   js/podcast-layout.js: den finder det sidste hele ord, der kan vaere, og saetter
   teksten til det - saa "... Laes mere" staar lige efter ordet, paa samme linje, i
   almindelig venstrestillet tekst. (Foerste forsoeg flooed linket ud i hoejre kant
   og strakte linjerne ud i begge sider for at naa det; mellemrummene mellem ordene
   blev for store.) Uden scriptet ser laeseren bare de foerste linjer uden link.
   Blazor renderer HELE teksten, saa den er der stadig, naar linket aabner den. */
.podcast-teaser {
	--podcast-teaser-lines: 3;
	max-height: calc(var(--podcast-teaser-lines) * 1.45em + 0.06em);
	overflow: hidden;
	line-height: 1.45;
}

.podcast-teaser.is-expanded {
	max-height: none;
}

.podcast-teaser__text {
	margin: 0;
}

/* Prikkerne og linket hoerer til den afkortede tekst - de vises kun, naar der ER
   skaaret noget vaek (.has-overflow, sat af scriptet). */
.podcast-teaser__cut,
.podcast-teaser__more,
.podcast-teaser__less {
	display: none;
}

.podcast-teaser.has-overflow:not(.is-expanded) .podcast-teaser__cut {
	display: inline;
}

.podcast-teaser.has-overflow:not(.is-expanded) .podcast-teaser__more {
	display: inline;
}

.podcast-teaser.is-expanded .podcast-teaser__less {
	display: inline-block;
	margin-top: 0.25rem;
}

.podcast-teaser__more,
.podcast-teaser__less {
	padding: 0;
	border: 0;
	background: none;
	color: #036d76;
	font: inherit;
	font-weight: 700;
	line-height: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.podcast-teaser__more:hover,
.podcast-teaser__more:focus-visible,
.podcast-teaser__less:hover,
.podcast-teaser__less:focus-visible {
	color: #025961;
}

/* Paa gradienten er baade tekst og link hvidt; i den hvide afsnitsliste er de moerke
   (uden denne opdeling stod "Laes mere" hvidt paa hvidt i listen). */
.podcast-poster__hero .podcast-teaser__more,
.podcast-poster__hero .podcast-teaser__less {
	color: #fff;
}

.podcast-poster__hero .podcast-teaser__more:hover,
.podcast-poster__hero .podcast-teaser__more:focus-visible,
.podcast-poster__hero .podcast-teaser__less:hover,
.podcast-poster__hero .podcast-teaser__less:focus-visible {
	color: #fff;
	opacity: 0.85;
}

/* ---- Faelles smaating i kort og lister ---- */
.podcast-kicker {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #036d76;
}

.podcast-kicker__count {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: #6e6e6e;
}

.podcast-meta {
	margin: 0;
	font-size: 0.85rem;
	color: #6e6e6e;
}

.podcast-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	border: 1.5px solid rgba(3, 109, 118, 0.45);
	border-radius: 999px;
	background: transparent;
	color: #036d76;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.podcast-more:hover,
.podcast-more:focus-visible {
	background: rgba(3, 109, 118, 0.08);
	border-color: #036d76;
}

.podcast-more:disabled {
	opacity: 0.45;
	cursor: default;
}

/* Kanalen, der hentes: knappen daempes, men bliver staaende - listen tegnes foerst,
   naar den er hel, saa der er kun EN hoejdeaendring (se ToggleChannelAsync). */
.podcast-more.is-loading {
	opacity: 0.75;
	cursor: progress;
}

/* Paa gradienten: hvid udgave. */
.podcast-more--light {
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.podcast-more--light:hover,
.podcast-more--light:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
}

/* "Vis N flere afsnit" er listens FOD, ikke en handling paa det sidste afsnit: egen
   linje over hele bredden med en streg over. */
.podcast-more--load {
	justify-content: center;
	width: 100%;
	margin-top: 0.25rem;
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0;
}

.podcast-more--load:hover,
.podcast-more--load:focus-visible {
	background: rgba(3, 109, 118, 0.06);
	border-color: rgba(0, 0, 0, 0.08);
}

/* Pilen paa "Alle afsnit": ned naar listen er lukket, op naar den er aaben. */
.podcast-chevron {
	width: 0.9em;
	height: 0.9em;
	transition: transform 0.2s ease;
}

[aria-expanded="true"] > .podcast-chevron {
	transform: rotate(180deg);
}

/* ---- Listen af tidligere afsnit (i kortet og under det fremhaevede afsnit) ---- */
.podcast-episodes {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-top: 1rem;
}

.podcast-episode {
	display: flex;
	flex-direction: column;
	padding-top: 0.85rem;
	border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

.podcast-episode:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.podcast-episode__title {
	margin: 0 0 0.15rem;
	font-size: 1rem;
}

.podcast-episode__teaser {
	margin: 0.3rem 0 0;
	font-size: 0.875rem;
	color: #4a4a4a;
}

/* Under det fremhaevede afsnit er der plads til hele resumeet - ingen beskaering. */
.podcast-episode__teaser--full {
	line-height: 1.45;
}

.podcast-episode__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.6rem;
}

/* Et afsnit uden hverken stream eller smagsproeve: en stille linje med et link. */
.podcast-episode__locked {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: #6e6e6e;
}

/* ---- Kanalkortene ---- */
.podcast-posters {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	align-items: start; /* et aabnet kort maa ikke traekke naboerne med i hoejden */
	gap: 1.1rem;
}

/* Masonry: js/podcast-layout.js saetter klassen og giver hvert kort et raekke-spaend
   svarende til sin egen hoejde, saa naeste kort starter lige under det korte kort i
   stedet for under raekkens hoejeste. Raekkerne er 1px og mellemrummet ligger i
   spaendet - derfor row-gap: 0. Uden scriptet staar reglerne herover alene: et
   almindeligt gitter med toppen af kortene i linje. */
.podcast-posters.is-masonry {
	grid-auto-rows: 1px;
	row-gap: 0;
}

.podcast-poster {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 18px;
	color: #fff;
	box-shadow: 0 16px 36px -24px rgba(20, 16, 15, 0.7);
	scroll-margin-top: 150px;
}

.podcast-poster__hero {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.15rem 1.15rem 1.25rem;
}

/* Glyf, kanalnavn og noegle paa EN linje - navnet ved siden af logoet, ikke under det. */
.podcast-poster__top {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.9rem;
}

.podcast-poster__glyph {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	padding: 13px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.podcast-poster__channel {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.15;
	color: #fff;
}

/* Noeglen: vejen ind i kampagnen FOER man trykker afspil. Ikon alene - ordene staar i strimlen. */
.podcast-page a.podcast-poster__key {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin-left: auto;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.podcast-page a.podcast-poster__key:hover,
.podcast-page a.podcast-poster__key:focus-visible {
	background: rgba(255, 255, 255, 0.38);
	color: #fff;
}

.podcast-poster__kicker {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.8;
}

.podcast-poster__title {
	margin: 0.2rem 0 0.25rem;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.podcast-poster__meta {
	margin: 0;
	font-size: 0.85rem;
	color: #fff;
	opacity: 0.85;
}

.podcast-poster__teaser {
	margin: 0.45rem 0 0;
	font-size: 0.925rem;
	color: #fff;
	opacity: 0.92;
}

/* Afspil til venstre, "Alle afsnit" helt til hoejre - paa EN linje, altid. */
.podcast-poster__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: 1.1rem;
}

.podcast-poster__actions .podcast-more {
	margin-left: auto;
}

/* Listen af tidligere afsnit ligger paa hvidt under kortet - og skal derfor nulstille
   kortets hvide tekstfarve, ellers staar titlerne hvidt paa hvidt. */
.podcast-poster__episodes {
	padding: 0 1.15rem 1.15rem;
	background: #fff;
	color: #2b2b2b;
}

.podcast-poster__episodes .podcast-episode__title {
	color: #2b2b2b;
}

/* ---- Reduceret bevaegelse ----
   To ting er UNDTAGET med vilje og animerer ALTID, ogsaa naar Windows eller browseren
   beder om mindre bevaegelse:
     - lydboelgen, afspillerens eneste tegn paa, at der spiller noget lige nu
     - det pulserende tilbud ("Hoer hele afsnittet - faa fuld adgang", dockens og
       leadets tilsvarende), som skal fange oejet praecis mens laase-beskeden laeses op
   Resten - svaev, glid, tidslinjens indtoning - staar stille som bedt om. */
@media (prefers-reduced-motion: reduce) {
	.podcast-play,
	.podcast-lead__arrow,
	.podcast-lead__avatar,
	.podcast-dock,
	.podcast-dock__play,
	.podcast-timeline__fill::after {
		transition: none;
	}

	.podcast-timeline.is-current {
		animation: none;
	}
}