/**
 * artikel-mobile-fix.css
 * 
 * Inkludér EFTER den eksisterende <style> i artikel.php,
 * eller erstat de tilsvarende sektioner direkte i filen.
 *
 * Løser: Horisontalt overflow i in-app browsers (Messenger, Instagram, etc.)
 * Årsag: Negative margins + calc(100% + 32px) bredder der skubber indhold
 *        ud over viewport. overflow-x:hidden på body virker ikke i alle WebViews.
 *
 * Strategi: 
 *   1. Fjern alle negative margins der udvider indhold forbi viewport
 *   2. Brug overflow:hidden på containere som sikkerhedsnet
 *   3. Opnå full-bleed effekt via reduceret padding i stedet
 */

/* =============================================================================
   FIX 1: Artikel-kort – overflow containment
   ============================================================================= */

.artikel-card {
    overflow: hidden;         /* Allerede sat, men gentag for specificity */
    max-width: 100%;          /* Aldrig bredere end parent */
}

/* =============================================================================
   FIX 2: Artikel body – den vigtigste container
   
   Problem: Children med negative margins skubber indhold ud.
   Fix:     overflow-x:hidden klipper alt der stikker ud.
            Reducér mobil-padding til 0 på siderne, brug padding
            på tekst-elementer i stedet. Så behøver intet negative margins.
   ============================================================================= */

@media (max-width: 767px) {

    .artikel-body {
        padding: 20px 0;        /* Fjern horisontal padding fra body */
        overflow-x: hidden;     /* Sikkerhedsnet */
    }

    /* Giv tekst-elementer deres egen padding */
    .artikel-content > p,
    .artikel-content > h2,
    .artikel-content > h3,
    .artikel-content > h4,
    .artikel-content > h5,
    .artikel-content > h6,
    .artikel-content > ul,
    .artikel-content > ol,
    .artikel-content > .faq-section,
    .artikel-content > .sources-section,
    .artikel-content > .disclaimer-box {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* FAQ og kilder der ligger udenfor .artikel-content */
    .artikel-body > .faq-section,
    .artikel-body > .sources-section,
    .artikel-body > .disclaimer-box,
    .artikel-body > .in-article-ad {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =============================================================================
   FIX 3: Billeder – full-bleed UDEN negative margins
   
   Problem: width: calc(100% + 32px) + margin-left: -16px
            Skubber siden 16px bredere i WebViews.
   Fix:     width: 100% (fylder hele .artikel-body som nu har 0 padding).
            Billeder er automatisk full-bleed.
   ============================================================================= */

.artikel-content img {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin-left: 0;              /* FJERNET: -16px */
    margin-right: 0;             /* FJERNET: -16px */
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    display: block;
    border-radius: 0;
}

@media (min-width: 768px) {
    .artikel-content img {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-radius: 12px;
        margin-top: 2em;
        margin-bottom: 2em;
    }
}

/* =============================================================================
   FIX 4: Blockquotes – full-bleed UDEN negative margins
   
   Problem: margin: 1.5em -16px skubber ud over viewport.
   Fix:     margin: 0, fuld bredde i den padding-fri body.
            Tilføj intern padding for teksten.
   ============================================================================= */

.artikel-content blockquote {
    margin: 1.5em 0;
    padding: 20px 20px;
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
    border-left: 3px solid #004aad;
    border-radius: 0;
    font-style: normal;
    color: #1f2937;
}

@media (min-width: 768px) {
    .artikel-content blockquote {
        margin: 2em 0;
        padding: 24px 28px;
        border-left-width: 4px;
        border-radius: 0 12px 12px 0;
    }
}

/* =============================================================================
   FIX 5: In-article annonce – UDEN negative margins
   
   Problem: margin: 32px -16px
   Fix:     margin: 0, fuld bredde i padding-fri body.
   ============================================================================= */

.in-article-ad {
    margin: 32px 0;             /* FJERNET: -16px */
    padding: 20px 16px;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}

@media (min-width: 768px) {
    .in-article-ad {
        margin: 32px 0;
        padding: 24px 0;
        border-radius: 0;
    }
}

/* =============================================================================
   FIX 6: Breadcrumbs – overflow containment
   
   Problem: overflow-x: auto kan trigge horisontal scroll på hele siden
            i WebViews der ikke isolerer scroll-containere korrekt.
   Fix:     max-width: 100% + clip usynligt overflow.
   ============================================================================= */

@media (max-width: 767px) {
    .artikel-breadcrumbs {
        max-width: 100%;
        overflow: hidden;           /* Klip i stedet for scroll */
        text-overflow: ellipsis;
        padding: 14px 16px 0;
    }
    
    .breadcrumb-current {
        max-width: 140px;           /* Kortere truncation */
    }
}

/* =============================================================================
   FIX 7: Mobil relaterede artikler – karusel overflow
   
   Problem: margin-right: -16px på .mobile-related-scroll
            Skubber indhold ud over viewport.
   Fix:     Contain scroll indenfor parent med overflow:hidden,
            brug padding i stedet for negative margin.
   ============================================================================= */

@media (max-width: 767px) {
    .mobile-sidebar {
        overflow: hidden;           /* Contain alt karusel-overflow */
        padding: 0 16px;
    }

    .mobile-related-scroll {
        margin-right: 0;            /* FJERNET: -16px */
        padding-right: 0;           /* FJERNET: 16px */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    
    /* Sidste kort får lidt luft i stedet */
    .mobile-related-card:last-child {
        margin-right: 4px;
    }
}

/* =============================================================================
   FIX 8: Tabeller – contained scroll
   
   Problem: Brede tabeller med display:block + overflow-x:auto
            kan påvirke parent bredde i WebViews.
   Fix:     Wrap i en container med max-width og overflow.
   ============================================================================= */

@media (max-width: 767px) {
    .artikel-content table {
        max-width: 100%;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =============================================================================
   FIX 9: Iframes (YouTube etc.) – contained
   ============================================================================= */

.artikel-content iframe {
    max-width: 100%;
    width: 100%;
    border-radius: 0;
}

@media (min-width: 768px) {
    .artikel-content iframe {
        border-radius: 12px;
    }
}

/* =============================================================================
   FIX 10: Artikel header + footer – sikre padding
   ============================================================================= */

@media (max-width: 767px) {
    .artikel-header {
        padding: 16px 16px 20px;
        max-width: 100%;
        overflow: hidden;
    }

    .artikel-footer {
        padding: 14px 16px;
        max-width: 100%;
    }
    
    /* Social share knapper: forhindre wrap-overflow */
    .social-share {
        flex-wrap: nowrap;
    }
}

/* =============================================================================
   FIX 11: Globale safety nets
   
   Disse regler er et ekstra sikkerhedsnet for WebViews der
   ikke respekterer overflow-x:hidden på html/body.
   ============================================================================= */

@media (max-width: 767px) {
    .artikel-page-container {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .artikel-outer-grid {
        max-width: 100%;
        overflow-x: hidden;
    }

    .artikel-inner-grid {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Mobil annonce wrapper */
    .mobile-ad-wrapper {
        max-width: 100%;
        overflow: hidden;
    }
}

/* =============================================================================
   FIX 12: Content badges (advertorial/sponsored)
   ============================================================================= */

@media (max-width: 767px) {
    .content-badge {
        padding: 14px 16px;
        max-width: 100%;
        overflow: hidden;
    }
    
    .badge-header {
        flex-wrap: wrap;
    }
}

/* =============================================================================
   FIX 13: Electricity company list – contained i artikel
   
   Sikrer at <electricity-company-list> web component
   ikke bryder ud af artiklen.
   ============================================================================= */

@media (max-width: 700px) {
    .ecl-wrap {
        max-width: 100%;
        overflow-x: hidden;
        padding: 0;             /* Padding styres af artikel-body */
    }
}