/* Exact DR.dk Design Copy */

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.4;
}

/* Sikkerhedsnet mod vandret scroll. De faktiske årsager er rettet ved roden
   (.footer-bottom og .more-articles .content-grid-reverse) — det her fanger
   fremtidige overløb. `clip` frem for `hidden`, fordi hidden gør elementet til
   en scroll-container og ville bryde position: sticky, hvis det tages i brug. */
html,
body {
    overflow-x: clip;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Exact DR.dk Header */
.header {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.header-top {
    background-color: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 0;
    font-size: 13px;
}

.header-top .container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header-links {
    display: flex;
    gap: 20px;
}

.header-link {
    color: #666;
    text-decoration: none;
    font-weight: 400;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.header-link:hover {
    color: #263852;
}

/* Main header with DR.dk logo style */
.header-main {
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #263852;
}

.logo-img {
    height: 45px;
    width: auto;
    display: block;
    transition: all 0.3s ease;
}

.logo-img:hover {
    opacity: 0.9;
}

.logo-icon {
    width: 48px;
    height: 48px;
    background-color: #263852;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 16px;
}

/* DR.dk navigation */
.main-nav {
    display: flex;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    background: white;
    border-bottom: 1px solid #ddd;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 0;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    min-width: max-content;
}

.nav-item {
    position: relative;
    flex-shrink: 0;
}

.nav-link {
    display: block;
    padding: 15px 16px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
    /* Teksten bliver marineblå (11.86:1), markøren guld. Guld som tekstfarve
       når ikke 4,5:1 mod hvid ved 13px - #b8860b ligger på 3,25:1 - men som
       3px understregning er den en UI-markør, hvor grænsen er 3:1. */
    color: #263852;
    border-bottom-color: #b8860b;
    background-color: #f8f8f8;
}

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Podcast button */
.podcast-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #263852 0%, #1b2a3d 100%);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

.podcast-btn:hover {
    background: linear-gradient(135deg, #1b2a3d 0%, #132030 100%);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    transform: translateY(-1px);
}

.podcast-btn.active {
    background: linear-gradient(135deg, #1b2a3d 0%, #132030 100%);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.5);
}

.podcast-icon {
    font-size: 18px;
    line-height: 1;
}

.podcast-text {
    font-size: 13px;
    font-weight: 600;
}

/* DR.dk Page Title */
.page-title-section {
    background-color: #fff;
    padding: 20px 0;
}

.page-title {
    font-size: 48px;
    font-weight: 700;
    color: #333;
    margin: 0;
    line-height: 1.1;
}

/* DR.dk Main Content Layout */
.main-content {
    background-color: #fff;
    padding: 30px 0;
}

.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

/* Main article (large left side) */
.main-article {
    position: relative;
}

.main-article > a {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
}

.main-article-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.main-article > a:hover .main-article-image {
    transform: scale(1.05);
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #666;
}

.article-category {
    background-color: #263852;
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.article-time {
    color: #999;
    font-size: 12px;
}

.main-article h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: #333;
}

.main-article h1 a {
    color: #333;
    text-decoration: none;
}

.main-article h1 a:hover {
    color: #263852;
}

/* Sidebar articles */
.sidebar-articles {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sidebar-article {
    display: block;
    text-decoration: none;
    color: inherit;
}

.sidebar-article-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 10px;
}

.sidebar-article h2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: #333;
}

.sidebar-article:hover h2 {
    color: #263852;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .content-grid,
    .content-grid-reverse {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .logo-img {
        height: 35px;
    }

    .nav-list {
        display: none;
    }

    .page-title {
        font-size: 32px;
    }

    .main-article h1 {
        font-size: 24px;
    }

    .main-article-image,
    .sidebar-article-image {
        height: 200px;
    }

    .article-row-content {
        grid-template-columns: 120px 1fr;
        gap: 15px;
    }

    .article-row-image img {
        height: 80px;
    }

    .article-row-text h3 {
        font-size: 16px;
    }
}

/* More Articles Section with DR.dk layout styles - Updated */
.more-articles {
    background: #fff;
    padding: 40px 0;
    border-top: 1px solid #e0e0e0;
}

/* Second section uses reversed grid layout */
.more-articles .content-grid-reverse {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Opposite of hero section (1fr 2fr instead of 2fr 1fr) */
    gap: 40px;
    margin-bottom: 40px;
}

.more-articles .articles-three-columns {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
}

/* Three column layout (like first DR.dk image) */
.articles-three-columns {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
    margin-bottom: 40px;
    width: 100%;
}

/* Ensure three-column articles are direct grid items */
.articles-three-columns .article-card-small {
    display: block;
}

.article-card-small {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.article-card-small .article-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.article-card-small .article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card-small .article-content {
    padding: 15px;
}

.article-card-small .article-title {
    margin: 8px 0 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.article-card-small .article-title a {
    color: #333;
    text-decoration: none;
}

.article-card-small .article-title a:hover {
    color: #263852;
}

/* Mixed layout removed - now using same structure as hero section */

.articles-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.article-card-medium {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card-medium:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.article-card-medium .article-image {
    width: 100%;
    height: 150px;
    overflow: hidden;
}

.article-card-medium .article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card-medium .article-content {
    padding: 15px;
}

.article-card-medium .article-title {
    margin: 8px 0 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.article-card-medium .article-title a {
    color: #333;
    text-decoration: none;
}

.article-card-medium .article-title a:hover {
    color: #263852;
}

/* Large article (right side) */
.article-card-large {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: fit-content;
}

.article-card-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.article-card-large .article-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.article-card-large .article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card-large .article-content {
    padding: 20px;
}

.article-card-large .article-title {
    margin: 10px 0 0 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.article-card-large .article-title a {
    color: #333;
    text-decoration: none;
}

.article-card-large .article-title a:hover {
    color: #263852;
}

/* Simple list layout */
.articles-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.article-row {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
}

.article-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.article-row-content {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 15px;
    align-items: start;
}

.article-row-image img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.article-row-text h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 8px 0 0 0;
    line-height: 1.3;
}

.article-row-text h4 a {
    color: #333;
    text-decoration: none;
}

.article-row-text h4 a:hover {
    color: #263852;
}

/* Mobile responsive for new layouts.

   Denne blok skal blive liggende EFTER `.more-articles .content-grid-reverse`
   og `.articles-three-columns` længere oppe i filen. Begge overrides herunder
   har samme specificitet som de regler, de skal slå (0,2,0), så det er
   kilderækkefølgen der afgør striden — ikke media query'en, som ikke tilføjer
   specificitet. Flyttes blokken op over dem, holder de op med at virke. */
@media (max-width: 768px) {
    /* To kolonner overlevede på telefoner og skubbede et 256px bredt element
       ud til x=466 på en 390px skærm. */
    .more-articles .content-grid-reverse {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Her kræves også !important: reglerne længere oppe sætter
       `repeat(3, 1fr) !important` på begge selektorer. Tre kolonner på 390px
       gav ~103px pr. kort og pressede titler og datoer ud over skærmkanten. */
    .articles-three-columns,
    .more-articles .articles-three-columns {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }



    .article-card-small .article-image,
    .article-card-medium .article-image {
        height: 200px;
    }

    .article-card-large .article-image {
        height: 250px;
    }

    .article-row-content {
        grid-template-columns: 100px 1fr;
        gap: 10px;
    }
}

/* Footer Styles - Professional Corporate */
.footer {
    background: #fafafa;
    border-top: 1px solid #e8e8e8;
    padding: 60px 0 0;
    margin-top: 80px;
    color: #4a4a4a;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.footer-content {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1.5fr;
    gap: 60px;
    margin-bottom: 50px;
}

/* Footer Brand Section */
.footer-brand {
    padding-right: 30px;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo-img {
    height: 50px;
    width: auto;
    display: block;
    transition: all 0.3s ease;
}

.footer-logo-img:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.footer-logo .logo-icon {
    background: linear-gradient(135deg, #263852 0%, #1b2a3d 100%);
    color: white;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.15);
    transition: transform 0.2s ease;
}

.footer-logo .logo-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.25);
}

.footer-tagline {
    color: #2c2c2c;
    font-size: 16px;
    margin-bottom: 15px;
    line-height: 1.5;
    font-weight: 600;
    max-width: 320px;
}

.footer-description {
    color: #666;
    font-size: 14px;
    margin-bottom: 30px;
    line-height: 1.6;
    font-weight: 400;
    max-width: 320px;
}

.footer-social {
    margin-bottom: 30px;
}

.social-label {
    color: #777;
    font-size: 12px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.social-icons {
    display: flex;
    gap: 8px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.social-icon:hover {
    background: #263852;
    color: white;
    border-color: #263852;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}

.footer-apps {
    margin-top: 25px;
}

.apps-label {
    color: #263852;
    font-size: 12px;
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.app-buttons {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

.app-button {
    display: inline-block;
    transition: all 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
}

.app-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.app-button img {
    height: 40px;
    width: auto;
    display: block;
}

/* Footer Columns */
.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-title {
    color: #2c2c2c;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    position: relative;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 30px;
    height: 2px;
    background: #263852;
    border-radius: 1px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s ease;
    display: block;
    line-height: 1.5;
    padding: 2px 0;
    position: relative;
}

.footer-links a:hover {
    color: #263852;
    padding-left: 8px;
}

.footer-links a::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: #263852;
    transition: width 0.3s ease;
}

.footer-links a:hover::before {
    width: 4px;
}

/* Footer Bottom */
/* Fuld bredde uden vw-hack: elementet ligger uden for .container i markuppet,
   så baggrunden fylder naturligt, mens indholdet holdes af .footer-bottom-inner.
   Det tidligere `margin: 0 -100vw` + `padding: 100vw` gjorde border-boxen 3720px
   bred ved 1280px viewport og var eneste årsag til vandret scroll på desktop. */
.footer-bottom {
    border-top: 1px solid #e8e8e8;
    padding: 30px 0;
    background: #f5f5f5;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom-left {
    display: flex;
    align-items: center;
}

.footer-social-bottom {
    display: flex;
    gap: 12px;
}

.social-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.social-circle.facebook {
    background: linear-gradient(135deg, #1877f2 0%, #166fe5 100%);
}

.social-circle.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-circle.linkedin {
    background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
}

.social-circle:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.footer-bottom-right {
    text-align: right;
}

.footer-legal {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
    justify-content: flex-end;
}

.footer-legal a {
    color: #777;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.footer-legal a:hover {
    color: #263852;
}

.footer-legal a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #263852;
    transition: width 0.3s ease;
}

.footer-legal a:hover::after {
    width: 100%;
}

.footer-copyright p {
    margin: 0;
    color: #888;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
}

/* Footer Mobile Responsive */
@media (max-width: 768px) {
    .footer {
        padding: 40px 0 0;
        margin-top: 60px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 40px;
    }

    .footer-brand {
        padding-right: 0;
        text-align: center;
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 30px;
        margin-bottom: 10px;
    }

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

    .footer-tagline {
        max-width: none;
        text-align: center;
    }

    .footer-description {
        max-width: none;
        text-align: center;
    }

    .social-icons {
        justify-content: center;
    }

    .app-buttons {
        align-items: center;
    }

    .footer-column {
        text-align: center;
        padding-bottom: 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    .footer-column:last-child {
        border-bottom: none;
    }

    .footer-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-links a:hover {
        padding-left: 0;
    }

    .footer-links a::before {
        display: none;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 25px;
        text-align: center;
        padding: 25px 0;
    }

    .footer-bottom-right {
        text-align: center;
    }

    .footer-legal {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .footer-social-bottom {
        justify-content: center;
    }
}

/* Tag Page Styles */
.tag-page {
    background: #ffffff;
    min-height: 100vh;
}

.tag-header {
    background: linear-gradient(135deg, #263852 0%, #1b2a3d 100%);
    color: white;
    padding: 60px 0;
    text-align: center;
}

.tag-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.tag-description {
    font-size: 1.1rem;
    opacity: 0.9;
    margin: 0;
}

.tag-articles {
    padding: 60px 0;
}

.tag-link {
    display: inline-block;
    background: #263852;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    margin-right: 6px;
    margin-bottom: 4px;
    transition: all 0.2s ease;
}

.tag-link:hover {
    background: #1b2a3d;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 8px 0;
}

/* Professional Article Page Styles */
.article-page-container {
    background: #fff;
    min-height: 100vh;
}

.article-breadcrumb {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 12px 0;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.breadcrumb-link {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-link:hover {
    color: #263852;
}

.breadcrumb-separator {
    color: #adb5bd;
    font-weight: 300;
}

.breadcrumb-current {
    color: #495057;
    font-weight: 500;
}

.article-main {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.article-header {
    margin-bottom: 30px;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.article-category {
    background: #263852;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.article-time {
    color: #6c757d;
    font-size: 13px;
    font-weight: 400;
}

.article-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    color: #212529;
    margin: 0 0 25px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.article-summary {
    font-size: 20px;
    line-height: 1.6;
    color: #6c757d;
    margin-bottom: 30px;
    font-weight: 400;
}

.article-byline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 30px;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #263852 0%, #1b2a3d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 18px;
    /* Uden disse to spildte et 120x120 rendition ud af den 48x48 cirkel:
       overflow var `visible`, og flex-containeren måtte gerne blive presset. */
    overflow: hidden;
    flex: 0 0 auto;
}

/* Forfatterprofilen under rubrikken.
   Markuppet er .author-profile-section > .author-profile > .author-avatar + .author-info,
   men reglerne ovenfor blev skrevet til den gamle .article-byline-struktur, hvor
   .author-info omsluttede avataren og .author-details. Derfor fandtes der ingen
   regler for .author-profile og .author-image overhovedet — avataren og teksten
   stablede lodret, og billedet blev vist i sin egen 120x120 størrelse. */
.author-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar .author-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* .author-info er her navn + titel, ikke avatar + detaljer som i .article-byline,
   så den skal stable lodret frem for at lægge de to linjer ved siden af hinanden. */
.author-profile .author-info {
    display: flex;
    flex-direction: column;
    /* Grundreglen .author-info saetter align-items:center. Med flex-direction
       column styrer den den vandrette placering, saa navnet blev centreret
       over titlen. flex-start stiller begge linjer venstrestillet. */
    align-items: flex-start;
    gap: 2px;
    margin-top: 0;
}

.author-details {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 600;
    color: #212529;
    font-size: 14px;
}

.author-title {
    color: #6c757d;
    font-size: 13px;
}

.article-share {
    display: flex;
    align-items: center;
    gap: 10px;
}

.share-label {
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
}

.share-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.share-link.facebook {
    background: #1877f2;
}

.share-link.twitter {
    background: #1da1f2;
}

.share-link.linkedin {
    background: #0077b5;
}

.share-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.article-cover {
    margin: 30px 0 40px 0;
    border-radius: 0;
    overflow: hidden;
}

.cover-image {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

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

.cover-video {
    width: 100%;
    height: auto;
    display: block;
}

.video-container-small {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-container-small video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-article-video,
.sidebar-article-video,
.article-card-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Make videos clickable */
a .video-container,
a .video-container-small {
    cursor: pointer;
}

a .video-container:hover video,
a .video-container-small:hover video {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

/* Basic Page Styles */
.basic-page-content {
    padding: 60px 0;
}

.basic-page-content .content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
}

.basic-page-content h2 {
    font-size: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.basic-page-content h3 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #333;
}

.basic-page-content p {
    margin-bottom: 1.5rem;
}

.basic-page-content ul,
.basic-page-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.basic-page-content li {
    margin-bottom: 0.5rem;
}

.basic-page-content a {
    color: #e50914;
    text-decoration: underline;
}

.basic-page-content a:hover {
    color: #b20710;
}

.image-caption {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 12px 20px;
    font-size: 13px;
    text-align: right;
}

.article-body {
    margin-bottom: 50px;
}

.article-content {
    font-size: 18px;
    line-height: 1.8;
    color: #343a40;
    font-family: Georgia, 'Times New Roman', serif;
}

.article-content .lead-paragraph {
    font-size: 22px;
    font-weight: 400;
    color: #495057;
    margin-bottom: 30px;
    padding-left: 20px;
    border-left: 4px solid #263852;
    font-style: italic;
}

.article-content h2 {
    font-size: 28px;
    font-weight: 700;
    color: #212529;
    margin: 40px 0 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.article-content p {
    margin-bottom: 20px;
}

.article-content strong {
    font-weight: 600;
    color: #212529;
}

.article-quote {
    background: #f8f9fa;
    border-left: 4px solid #263852;
    padding: 30px;
    margin: 40px 0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

.article-quote p {
    font-size: 20px;
    color: #495057;
    margin-bottom: 15px;
    font-weight: 400;
}

.article-quote cite {
    color: #6c757d;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
}

.article-list {
    background: #f8f9fa;
    padding: 25px 30px;
    border-radius: 8px;
    margin: 30px 0;
}

.article-list li {
    margin-bottom: 12px;
    color: #495057;
    font-weight: 500;
}

.article-list li::marker {
    color: #263852;
}

.article-footer {
    border-top: 2px solid #e9ecef;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.article-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tags-label {
    color: #6c757d;
    font-weight: 600;
    font-size: 14px;
}

.article-tag {
    background: #e9ecef;
    color: #495057;
    padding: 6px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.article-tag:hover {
    background: #263852;
    color: white;
    transform: translateY(-1px);
}

.article-actions {
    display: flex;
    gap: 15px;
}

.action-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    color: #495057;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-button:hover {
    background: #263852;
    border-color: #263852;
    color: white;
    transform: translateY(-2px);
}

.button-icon {
    font-size: 16px;
}

/* Related Articles Section */
.related-section {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

.section-title {
    font-size: 32px;
    font-weight: 800;
    color: #212529;
    margin-bottom: 30px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.related-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e9ecef;
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.related-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.related-card .related-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.related-card .related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-card:hover .related-image img {
    transform: scale(1.05);
}

.related-card .related-content {
    padding: 20px;
}

.related-card .related-category {
    display: inline-block;
    background: #263852;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.related-card h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px 0;
    color: #212529;
    transition: color 0.2s ease;
}

.related-card:hover h3 {
    color: #263852;
}

.related-card time {
    font-size: 14px;
    color: #6c757d;
}

/* Newsletter Section */
.newsletter-section {
    background: linear-gradient(135deg, #263852 0%, #1b2a3d 100%);
    padding: 60px 20px;
    margin: 60px 0;
}

.newsletter-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-title {
    font-size: 32px;
    font-weight: 800;
    color: white;
    margin-bottom: 15px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.newsletter-description {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    line-height: 1.6;
}

.newsletter-form {
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-input {
    flex: 1;
    padding: 15px 20px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    outline: none;
}

.newsletter-button {
    padding: 15px 30px;
    background: #212529;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    white-space: nowrap;
}

.newsletter-button:hover {
    background: #343a40;
}

/* Old sidebar styles - kept for backwards compatibility but not used in new layout */

.article-navigation {
    text-align: center;
    padding: 40px 0;
    border-top: 1px solid #e9ecef;
    margin-top: 40px;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #263852 0%, #1b2a3d 100%);
    color: white;
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.2);
}

.back-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.3);
    color: white;
}

/* Article Page Mobile Responsive */
@media (max-width: 768px) {
    .article-main {
        padding: 20px 15px;
    }

    .article-title {
        font-size: 28px;
    }

    .article-summary {
        font-size: 18px;
    }

    .cover-image {
        height: 250px;
    }

    .article-content {
        font-size: 16px;
    }

    .article-content .lead-paragraph {
        font-size: 18px;
        padding-left: 15px;
    }

    .article-content h2 {
        font-size: 24px;
    }

    .related-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .related-section {
        margin: 40px auto;
    }

    .section-title {
        font-size: 24px;
    }

    .newsletter-section {
        padding: 40px 20px;
        margin: 40px 0;
    }

    .newsletter-title {
        font-size: 24px;
    }

    .newsletter-description {
        font-size: 16px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .breadcrumb-nav {
        font-size: 13px;
    }

    .breadcrumb-current {
        display: none;
    }
}

/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .article-main {
        max-width: 700px;
    }
}


/* ==========================================================================
   Forside: dybdegående strøm
   --------------------------------------------------------------------------
   Vandrette kort med billede til venstre og et dybt indigo panel til højre,
   grupperet efter udgivelsesdag. Få, store elementer frem for et tæt gitter
   er det der bærer indtrykket af dybde: hver artikel får plads nok til at
   rubrik, resume og læsetid kan stå uden at slås om opmærksomheden.
   ========================================================================== */

.feature-page {
    /* Varm creme frem for den kolde grå. Papirfarve, ikke skærmfarve. */
    background-color: #fbf7ef;
}

.feature-stream {
    padding: 56px 0 88px;
}

.feature-day + .feature-day {
    margin-top: 72px;
}

.feature-day-heading {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #14161c;
    text-align: center;
    margin: 0 0 36px;
}

/* --- Kortet ------------------------------------------------------------- */

.feature-card {
    display: grid;
    /* minmax(0, 1fr) frem for 1fr: et grid-element har min-width auto, og
       billedets iboende bredde plus aspect-ratio gav mediesporet et
       min-content-krav, så halvdelene blev 412/316 i stedet for lige. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-radius: 10px;
    overflow: hidden;
    background-color: #263852;
}

.feature-card + .feature-card {
    margin-top: 28px;
}

.feature-card-media {
    display: block;
    /* Billedsiden får sit eget forhold, så rækken har samme højde uanset
       hvor lang rubrikken er. Panelet til højre strækker sig efter den. */
    aspect-ratio: 5 / 3;
    background-color: #e8e2d6;
}

.feature-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feature-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 13px;
    padding: 36px 42px;
    color: #fff;
}

.feature-card-kicker {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.feature-card-title {
    margin: 0;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-size: 27px;
    line-height: 1.24;
    letter-spacing: -0.005em;
}

.feature-card-title a {
    color: #fff;
    text-decoration: none;
}

.feature-card-title a:hover,
.feature-card-title a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.feature-card-summary {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

.feature-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 2px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

/* Skilletegn mellem metafelterne, uden tomme elementer i markuppet.
   ::after på det foregående felt frem for ::before på det næste: så
   følger tegnet teksten foran ved linjeombrud i stedet for at indlede
   den nye linje. */
.feature-card-meta span:not(:last-child)::after {
    content: "•";
    margin-left: 14px;
    color: rgba(255, 255, 255, 0.4);
}

.feature-card-author {
    color: rgba(255, 255, 255, 0.85);
}

.feature-empty {
    text-align: center;
    color: #6c757d;
    padding: 60px 0;
}

/* --- Smallere skærme ---------------------------------------------------- */

@media (max-width: 900px) {
    .feature-card-body {
        padding: 32px 30px;
    }

    .feature-card-title {
        font-size: 23px;
    }
}

@media (max-width: 700px) {
    .feature-stream {
        padding: 36px 0 56px;
    }

    .feature-day + .feature-day {
        margin-top: 48px;
    }

    .feature-day-heading {
        font-size: 27px;
        margin-bottom: 24px;
    }

    /* Stablet: billedet ligger over panelet og får et fladere forhold, så
       rubrikken stadig er synlig uden at scrolle. */
    .feature-card {
        grid-template-columns: 1fr;
    }

    .feature-card-media {
        aspect-ratio: 16 / 9;
    }

    .feature-card-body {
        padding: 26px 24px 30px;
    }

    .feature-card-title {
        font-size: 21px;
    }
}


/* --- Sidehoved på kategori- og tagsider --------------------------------
   Samme sprog som dagsoverskrifterne på forsiden, men venstrestillet og med
   en øjenbryn-linje, så man kan se hvor man er uden at læse overskriften. */

.feature-header {
    max-width: 760px;
    margin: 0 0 40px;
}

.feature-header-eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7c8596;
}

.feature-header-title {
    margin: 0;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 46px;
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: #263852;
}

.feature-header-description {
    margin: 14px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: #5a6475;
}

/* --- Paginering ---------------------------------------------------------- */

.feature-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #e3ddd0;
}

.feature-pagination-link {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #263852;
    text-decoration: none;
    padding: 9px 18px;
    border: 1px solid #263852;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.feature-pagination-link:hover,
.feature-pagination-link:focus-visible {
    background-color: #263852;
    color: #fbf7ef;
}

.feature-pagination-link.is-disabled {
    color: #a8a294;
    border-color: #ddd6c7;
    background: none;
}

.feature-pagination-status {
    font-size: 14px;
    color: #6b7383;
}

@media (max-width: 700px) {
    .feature-header {
        margin-bottom: 26px;
    }

    .feature-header-title {
        font-size: 33px;
    }

    .feature-header-description {
        font-size: 15px;
    }

    .feature-pagination {
        gap: 14px;
        margin-top: 32px;
        padding-top: 24px;
    }
}


/* --- Lydafspilning på kortet --------------------------------------------
   Vises kun når artiklen har en lydfil. Knappen er bevidst stor: den er det
   eneste interaktive element på kortet ud over rubrikken, og den skal kunne
   rammes på en telefon. */

.feature-card-duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.feature-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.feature-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.feature-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #fff;
    color: #263852;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.feature-play:hover {
    transform: scale(1.06);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.feature-play:focus-visible {
    outline: 3px solid #b8860b;
    outline-offset: 3px;
}

.feature-play-icon {
    width: 19px;
    height: 19px;
}

/* Ikonskifte styres af en klasse på knappen, så tilstanden kan aflæses
   i DOM'en frem for at ligge gemt i JavaScript. */
.feature-play-icon--pause,
.feature-play.is-playing .feature-play-icon--play {
    display: none;
}

.feature-play.is-playing .feature-play-icon--pause {
    display: block;
}

/* Afspilleren på selve artikelsiden */
.article-audio {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 30px;
    padding: 18px 22px;
    background-color: #263852;
    border-radius: 8px;
    color: #fff;
}

.article-audio .feature-play {
    background-color: #fff;
    color: #263852;
}

.article-audio-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.article-audio-label {
    font-size: 15px;
    font-weight: 600;
}

.article-audio-meta {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 700px) {
    .feature-play {
        width: 37px;
        height: 37px;
    }

    .article-audio {
        padding: 15px 16px;
        gap: 12px;
    }
}