/* === FULL MOBILE COVERAGE === */
/* Mobile-baseline för Moody Newsroom Bridge.
 * Bakad in i pluginet 2026-04 efter att tidigare per-sajt-injektion
 * (tmp_push_mobile_big.mjs → editorial-shell options) inte följde med
 * pluginutrullning. Allt nedan är body-scoped för att inte krocka med
 * GeneratePress eller stylePack-CSS. */

/* ═══════ Layout & wrappers ═══════ */
body,html{overflow-x:hidden}
body .entry-content,body .n24-wrap,body .nc-wrap{max-width:100%;overflow-x:hidden}
body .entry-content > *,body .n24-wrap > *,body .nc-wrap > *{max-width:100%;box-sizing:border-box}

/* Universal table wrapper — alla tabeller scrollar horisontellt på smala viewports */
body .entry-content table,body .n24-wrap table,body .nc-wrap table{
  display:block;
  width:100% !important;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
}
body .entry-content table thead,body .n24-wrap table thead,body .nc-wrap table thead{display:table-header-group}
body .entry-content table tbody,body .n24-wrap table tbody,body .nc-wrap table tbody{display:table-row-group}
body .entry-content table tr,body .n24-wrap table tr,body .nc-wrap table tr{display:table-row}
body .entry-content table th,body .entry-content table td,
body .n24-wrap table th,body .n24-wrap table td,
body .nc-wrap table th,body .nc-wrap table td{display:table-cell;white-space:normal}

@media (max-width:768px){
  body .entry-content table,body .n24-wrap table,body .nc-wrap table{
    display:table !important;
    overflow-x:visible;
  }
  /* But wrap them in scrollable containers */
  body .comparison-wrapper,
  body figure.wp-block-table{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    margin:16px -16px !important;
    padding:0 16px;
  }
}

/* ═══════ HERO CARD ═══════ */
@media (max-width:640px){
  body .n24-hero-card{padding:22px 18px !important;border-radius:8px !important;margin-bottom:20px !important}
  body .n24-hero-card .lead{font-size:15.5px !important;line-height:1.6 !important;margin-bottom:14px !important}
  body .n24-hero-card .byline{font-size:12px !important;gap:8px !important;padding-top:14px !important}
  body .n24-verified{font-size:10px !important;padding:3px 8px !important}
}

/* ═══════ TOC ═══════ */
@media (max-width:640px){
  body .n24-toc{padding:16px 18px !important;margin:20px 0 !important;border-radius:8px !important}
  body .n24-toc h3{font-size:12px !important;margin:0 0 8px !important}
  body .n24-toc ol{columns:1 !important;font-size:14px !important;padding-left:20px !important;line-height:1.65 !important}
  body .n24-toc ol li{margin:3px 0 !important}
}

/* ═══════ STATS LINE ═══════ */
@media (max-width:640px){
  body .n24-stats-line{padding:12px 14px !important;font-size:12.5px !important;line-height:1.65 !important}
}

/* ═══════ BREADCRUMBS ═══════ */
@media (max-width:640px){
  body .n24-breadcrumbs{font-size:11.5px !important;padding:7px 10px !important;margin:14px 0 !important}
  body .nc-breadcrumbs{font-size:11.5px !important;padding:7px 10px !important;margin:14px 0 !important}
}

/* ═══════ SNABB-BLOCK ═══════ */
@media (max-width:900px){.ucs-snabb-grid{grid-template-columns:1fr !important}}
.ucs-snabb-grid > p,.ucs-snabb-grid > br,.ucs-snabb-grid > p:empty{display:none !important}
.ucs-snabb-grid > .n24-card{width:auto;min-width:0}

@media (max-width:640px){
  #snabboversikt{padding:18px 14px !important;margin:18px 0 !important;border-radius:10px !important}
  #snabboversikt > div:first-child{flex-direction:column !important;align-items:flex-start !important;gap:10px !important;margin-bottom:16px !important}
  #snabboversikt > div:first-child > div:last-child{flex-wrap:wrap;gap:6px !important}
  #snabboversikt h2{font-size:18px !important}
  #snabboversikt > p{font-size:13.5px !important;margin-bottom:16px !important}
  #snabboversikt .n24-card{padding:14px 15px !important}
  #snabboversikt .n24-card .n24-card-header{gap:8px !important;margin-bottom:10px !important;padding-bottom:8px !important}
  #snabboversikt .n24-card ul{padding-left:18px !important;font-size:13.5px !important;line-height:1.55 !important}
  #snabboversikt .n24-card ul li{margin-bottom:6px !important}
  #sources-snabb{padding:14px 16px !important;font-size:12.5px !important;margin-top:18px !important}
  #sources-snabb ol{padding-left:18px !important}
  #sources-snabb ol li{line-height:1.55 !important;margin:4px 0 !important}
}

/* ═══════ RANKING TABLE ═══════ */
body .comparison-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px -4px;padding:0 4px}
body .editorial-ranking{min-width:720px}

@media (max-width:900px){
  body .editorial-ranking{min-width:640px}
}

@media (max-width:640px){
  body .comparison-wrapper{margin:16px -16px !important;padding:0 16px}
  body .editorial-ranking{min-width:580px;font-size:13px !important}
  body .editorial-ranking th{padding:10px 8px !important;font-size:11px !important}
  body .editorial-ranking td{padding:12px 8px !important}
  body .editorial-ranking .rank-cell{font-size:18px !important;width:32px !important}
  body .editorial-ranking .brand-cell{min-width:140px !important}
  body .editorial-ranking .brand-cell a{font-size:14.5px !important}
  body .editorial-ranking .meta{font-size:11px !important}
  body .editorial-ranking .observation-cell{font-size:13px !important;max-width:260px !important}
  body .editorial-ranking .date-cell{font-size:10.5px !important}
  body .editorial-ranking .link-cell{min-width:100px !important}
  body .editorial-ranking .internal-link{font-size:12px !important}
  body .editorial-ranking .ext-link a{font-size:11px !important}
  /* Delbetyg-chips — smaller on mobile, wrap properly */
  body .editorial-ranking .brand-cell > div[aria-label="Delbetyg"]{gap:4px !important;margin-top:6px !important}
  body .editorial-ranking .brand-cell > div[aria-label="Delbetyg"] span{font-size:10px !important;padding:2px 6px !important;border-radius:8px !important}
}

/* ═══════ N24-TRUST-ROW ═══════ */
body .n24-trust-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:22px 0}
@media (max-width:640px){
  body .n24-trust-row{grid-template-columns:1fr 1fr !important;gap:8px !important;margin:16px 0 !important}
  body .n24-trust-item{padding:12px 10px !important;font-size:11.5px !important}
  body .n24-trust-item .icon{font-size:18px !important;margin-bottom:4px !important}
}

/* ═══════ N24-CLARITY / TLDR / SOURCE-BOX ═══════ */
body .n24-clarity{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
@media (max-width:640px){
  body .n24-clarity{grid-template-columns:1fr !important;gap:14px !important}
  body .n24-clarity-col{padding:14px 16px !important}
  body .n24-tldr{padding:14px 16px !important;font-size:13.5px !important}
  body .n24-source-box{padding:14px 16px !important;font-size:12.5px !important}
}

/* ═══════ N24-FAQ-ITEM ═══════ */
body .n24-faq-item{margin:0 0 8px !important}
@media (max-width:640px){
  body .n24-faq-item summary{padding:11px 14px !important;font-size:14.5px !important}
  body .n24-faq-item p{padding:10px 14px !important;font-size:14px !important;line-height:1.65 !important}
}

/* ═══════ AUTHOR-BOX & TRUST-BANNER ═══════ */
@media (max-width:640px){
  body .author-box{padding:14px 16px !important;font-size:13.5px !important}
  body .trust-banner{padding:14px 16px !important;font-size:13.5px !important;margin:20px 0 !important}
  body .ranking-footnote{font-size:11.5px !important;padding:10px 12px !important}
}

/* ═══════ TOPBADGE-ROW (senast uppdaterad under H1) ═══════ */
@media (max-width:640px){
  body div[style*="border-radius:8px"][style*="font-size:13px"]:has(> span[style*="fbbf24"]),
  body div:has(> span:contains("Senast uppdaterad")){flex-direction:column;align-items:flex-start !important;padding:12px 14px !important}
}
/* Fallback: style all flex-gap badges responsively */
@media (max-width:540px){
  body .entry-content > div[style*="flex"][style*="background:#f8fafc"]{
    flex-direction:column !important;
    align-items:flex-start !important;
    padding:12px 14px !important;
    font-size:12px !important;
    gap:6px !important;
  }
  body .entry-content > div[style*="flex"][style*="background:#f8fafc"] > span[style*="margin-left:auto"]{
    margin-left:0 !important;
    margin-top:6px !important;
  }
}

/* ═══════ H2/H3 scroll-margin ═══════ */
html{scroll-behavior:smooth}
body .n24-wrap h2,body .nc-wrap h2{scroll-margin-top:80px}

@media (max-width:640px){
  body .n24-wrap h2{font-size:22px !important;margin:26px 0 12px !important;padding-bottom:6px !important}
  body .n24-wrap h3{font-size:17px !important;margin:18px 0 8px !important}
  body .n24-wrap p{font-size:15px !important;line-height:1.65 !important;margin:0 0 12px !important}
  body .n24-wrap ul,body .n24-wrap ol{padding-left:20px !important;font-size:15px !important}
}

/* ═══════ NC-WRAP (new support pages) ═══════ */
@media (max-width:640px){
  body .nc-wrap{font-size:15px !important;line-height:1.65 !important;padding:0 12px !important}
  body .nc-wrap h2{font-size:21px !important;margin:24px 0 10px !important;padding-bottom:5px !important}
  body .nc-wrap h3{font-size:17px !important;margin:18px 0 7px !important}
  body .nc-wrap h4{font-size:15px !important}
  body .nc-wrap p{font-size:15px !important;margin:0 0 12px !important}
  body .nc-wrap ul,body .nc-wrap ol{padding-left:20px !important}
  body .nc-wrap .nc-lead{font-size:16px !important;line-height:1.55 !important}
  body .nc-wrap .nc-toc{padding:14px 16px !important}
  body .nc-wrap .nc-toc h3{font-size:12px !important}
  body .nc-wrap .nc-toc ol{font-size:14px !important;line-height:1.7 !important}
  body .nc-wrap .nc-meta{font-size:12.5px !important;padding:12px 14px !important}
  body .nc-wrap .nc-table{font-size:12.5px !important;margin:14px -4px !important}
  body .nc-wrap .nc-table th{padding:8px 9px !important;font-size:10.5px !important}
  body .nc-wrap .nc-table td{padding:8px 9px !important}
  body .nc-wrap .nc-callout,body .nc-wrap .nc-info{padding:12px 14px !important;font-size:13.5px !important;line-height:1.55 !important;margin:14px 0 !important}
  body .nc-wrap .nc-sources{padding:14px 16px !important;font-size:13px !important;margin:22px 0 !important}
  body .nc-wrap .nc-sources ol{font-size:13px !important;padding-left:18px !important}
  body .nc-wrap .nc-authorbox{padding:14px 16px !important;font-size:13px !important;gap:12px !important;flex-direction:column !important}
  body .nc-wrap .nc-authorbox .col{min-width:0 !important}
  body .nc-wrap .nc-faq summary{padding:12px 14px !important;font-size:14.5px !important}
  body .nc-wrap .nc-faq div.a{padding:12px 14px !important;font-size:14px !important}
  body .nc-wrap blockquote{padding:10px 14px !important;font-size:14px !important}
}

/* ═══════ ORDLISTA A-Ö navigation ═══════ */
@media (max-width:640px){
  body .nc-wrap h2[id^="letter-"]{font-size:20px !important;min-width:44px !important;padding:7px 10px !important;margin:20px 0 8px !important}
}

/* ═══════ ALLA-GRANSKADE stats-grid ═══════ */
@media (max-width:640px){
  body .nc-wrap > div[style*="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))"]{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:10px !important;
  }
  body .nc-wrap > div[style*="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))"] > div{
    padding:12px 14px !important;
  }
  body .nc-wrap > div[style*="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))"] > div > div:last-child{
    font-size:22px !important;
  }
}

/* ═══════ IMAGES never overflow ═══════ */
body img,body iframe{max-width:100% !important;height:auto}
body .wp-block-image{max-width:100% !important}

/* ═══════ DETAILS/ACCORDION ═══════ */
body details{max-width:100%}
body details summary{cursor:pointer;list-style:none}
body details summary::-webkit-details-marker{display:none}

/* ═══════ Safe horizontal padding ═══════ */
@media (max-width:640px){
  body .single .entry-content,body .page .entry-content{padding-left:14px !important;padding-right:14px !important}
  body .n24-wrap{padding:0 12px !important}
}

/* ═══════ FORCE flex-wrap everywhere ═══════ */
@media (max-width:640px){
  body .entry-content div[style*="display:flex"]:not(.es-footer):not(#snabboversikt .n24-card-header){flex-wrap:wrap !important}
}

/* ═══════════════════════════════════════════════════════════════════════
 *  MOODY TEMPLATE HEADER / TOPBAR / NAV  —  MOBILE
 *  Templates renderar egen <header> + horisontell <ul> som inte är
 *  GeneratePress. På mobil pressas 6-8 menypunkter ihop tills text
 *  bryts mitt i orden ("BL OG I", "OPP AAT"). Här:
 *    - Topbar compactas + scrollar horisontellt vid trångt
 *    - Header-brand mindre + ellipsis så långa domännamn ryms
 *    - .md-nav <ul> kollapsar till hamburger (JS injicerar knappen)
 *    - Topic-row scrollar horisontellt istf radbryt
 *  Selectors body[class*="md-pack-"] höjer specifik så vi vinner mot
 *  template-inline-CSS (som ligger EFTER wp_head i renderingsordning).
 * ═══════════════════════════════════════════════════════════════════════ */

/* Default: hamburger osynlig på desktop */
body[class*="md-pack-"] .md-nav-toggle{display:none}

@media (max-width:880px){
  /* —— Topbar (utility-strip) ——————————————————————————— */
  body[class*="md-pack-"] .md-topbar{padding:0 !important}
  body[class*="md-pack-"] .md-topbar .md-shell{
    min-height:30px !important;
    padding:5px 12px !important;
    font-size:10px !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    scrollbar-width:none;
  }
  body[class*="md-pack-"] .md-topbar .md-shell::-webkit-scrollbar{display:none}
  body[class*="md-pack-"] .md-topbar .md-shell > *{flex-shrink:0}

  /* —— Header / brand —————————————————————————————————— */
  body[class*="md-pack-"] .md-header-main{
    padding:10px 14px !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  body[class*="md-pack-"] .md-brand-wrap{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
  body[class*="md-pack-"] .md-brand{
    font-size:24px !important;
    letter-spacing:0 !important;
    line-height:1.05 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    display:block !important;
    max-width:100% !important;
  }
  body[class*="md-pack-"] .md-brand-tag{display:none !important}

  /* —— Hamburger toggle —————————————————————————————— */
  body[class*="md-pack-"] .md-nav-toggle{
    display:inline-flex !important;
    align-items:center !important;
    gap:9px !important;
    background:transparent !important;
    border:1.5px solid currentColor !important;
    color:inherit !important;
    padding:9px 14px !important;
    margin:0 0 0 auto !important;
    font:700 11px/1 Arial,"Helvetica Neue",Helvetica,sans-serif !important;
    text-transform:uppercase !important;
    letter-spacing:.08em !important;
    cursor:pointer !important;
    border-radius:4px !important;
    flex-shrink:0 !important;
    align-self:center !important;
  }
  body[class*="md-pack-"] .md-nav-toggle::before{
    content:"" !important;
    display:inline-block !important;
    width:16px !important;
    height:12px !important;
    background:
      linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
      linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,
      linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;
    transition:background .2s ease;
  }
  body[class*="md-pack-"] .md-nav-toggle[aria-expanded="true"]::before{
    background:
      linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat !important;
  }

  /* —— Nav (kollaps) —————————————————————————————————— */
  body[class*="md-pack-"] .md-nav{
    flex-basis:100% !important;
    width:100% !important;
    min-height:0 !important;
    border-top:0 !important;
  }
  body[class*="md-pack-"] .md-nav ul{
    display:none !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    border-top:1px solid var(--md-line,#d8e1ee) !important;
    background:var(--md-nav-bg,#ffffff) !important;
  }
  body[class*="md-pack-"] .md-nav.is-open ul{display:flex !important}
  body[class*="md-pack-"] .md-nav li{
    width:100% !important;
    margin:0 !important;
    border-bottom:1px solid var(--md-line,#ecf0f5) !important;
  }
  body[class*="md-pack-"] .md-nav li:last-child{border-bottom:0 !important}
  body[class*="md-pack-"] .md-nav a{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    border-right:0 !important;
    padding:14px 18px !important;
    font-size:13px !important;
    line-height:1.2 !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
  }

  /* —— Topic-bar (kategori-chips) ——————————————————— */
  body[class*="md-pack-"] .md-topic{min-height:auto !important}
  body[class*="md-pack-"] .md-topic-inner{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding:8px 14px !important;
    gap:6px !important;
    min-height:auto !important;
    scrollbar-width:none;
  }
  body[class*="md-pack-"] .md-topic-inner::-webkit-scrollbar{display:none}
  body[class*="md-pack-"] .md-topic-inner a{
    flex-shrink:0 !important;
    white-space:nowrap !important;
  }

  /* —— Trending ticker ——————————————————————————————— */
  body[class*="md-pack-"] .md-trending{padding:5px 8px !important;margin:0 0 10px !important}
  body[class*="md-pack-"] .md-trending-label{font-size:9px !important;padding:2px 8px !important}
  body[class*="md-pack-"] .md-trending a{font-size:11px !important}

  /* —— Layout-specifika brand-storlekar ————————————— */
  body.md-layout-magazine .md-magazine-header-v2 .md-brand{font-size:32px !important;line-height:1 !important}
  body.md-layout-broadsheet .md-broadsheet-header .md-brand{font-size:26px !important}
  body.md-layout-tabloid .md-brand{font-size:26px !important}
  body.md-layout-heritage .md-broadsheet-header .md-brand{font-size:24px !important}
  body.md-layout-minimal .md-brand{font-size:26px !important}
  body.md-layout-modern .md-brand{font-size:26px !important}
  body.md-layout-compact .md-brand{font-size:26px !important}

  /* —— Layout-specifika utility-element som inte ryms —— */
  body.md-layout-magazine .md-magazine-utility-search{display:none !important}
  body.md-layout-tabloid .md-tabloid-support > a{display:none !important}
  body.md-layout-tabloid .md-tabloid-support > span{display:none !important}
  body.md-layout-compact .md-topbar.md-compact-utility .md-shell{
    grid-template-columns:1fr auto !important;
    min-height:30px !important;
  }

  /* —— Magazine-nav-frame: behåll knapp-look men kollaps —— */
  body.md-layout-magazine .md-magazine-nav-frame ul{
    display:none !important;
    flex-direction:column !important;
  }
  body.md-layout-magazine .md-nav.is-open .md-magazine-nav-frame ul,
  body.md-layout-magazine .md-magazine-nav-frame.is-open ul{display:flex !important}
  body.md-layout-magazine .md-magazine-nav-frame a{
    width:100% !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-top:0 !important;
    padding:13px 18px !important;
  }

  /* —— Site-content / hem-grid: 1 kolumn på mobil —————— */
  body[class*="md-pack-"] .md-home-wrap{margin:8px auto 14px !important;padding:0 !important}
}

/* —— Extra tight för iPhone SE / mindre skärmar ————— */
@media (max-width:380px){
  body[class*="md-pack-"] .md-brand{font-size:20px !important}
  body[class*="md-pack-"] .md-header-main{padding:8px 10px !important;gap:6px !important}
  body[class*="md-pack-"] .md-nav-toggle{padding:8px 11px !important;font-size:10px !important}
  body[class*="md-pack-"] .md-nav a{padding:13px 14px !important;font-size:12.5px !important}
  body[class*="md-pack-"] .md-topbar .md-shell{font-size:9px !important;padding:4px 10px !important}
}

/* ═══════════════════════════════════════════════════════════════════════
 *  MOODY SINGULAR-TEMPLATE  —  MOBILE
 *
 *  moody-singular-template.php renderar enskilda inlägg med en egen
 *  layout (.md-shell.md-layout > main > article.md-article > md-featured /
 *  md-meta / md-content / md-author-box). Singular-templaten saknar
 *  mediaquery för .md-layout (universal har den, singular har INTE) =>
 *  på mobil renderas grid 1fr+320px sidebar fortfarande, vilket pushar
 *  MAIN till 514 px i en 390 px viewport => featured image 468 px,
 *  H1 56 px, brödtext 22 px ⇒ allt klipps utanför skärmen.
 *
 *  Lösning: kollapsa grid + reducera padding/typografi/featured-image.
 *  Selectors body[class*="md-pack-"] för specifik > template-inline-CSS.
 * ═══════════════════════════════════════════════════════════════════════ */

/* —— 1. Kollapsa singular-grid (denna är ROOT-orsaken till overflow) — */
@media (max-width:980px){
  body[class*="md-pack-"] .md-shell.md-layout,
  body[class*="md-pack-"] .md-layout{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}

/* —— 2. Article-card: tightare padding + radius på mobil ——————— */
@media (max-width:880px){
  body[class*="md-pack-"] main{width:100% !important;min-width:0 !important}
  body[class*="md-pack-"] article.md-article,
  body[class*="md-pack-"] .md-article{
    padding:18px 16px !important;
    border-radius:8px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* —— 3. Featured image: cap höjden, behåll proportion —— */
  body[class*="md-pack-"] .md-featured{
    margin:0 -2px 14px !important;
  }
  body[class*="md-pack-"] .md-featured img{
    width:100% !important;
    max-height:240px !important;
    object-fit:cover !important;
    border-radius:8px !important;
    margin:0 0 12px !important;
    display:block;
  }

  /* —— 4. H1: 56px → 28px (spec-läsbarhet behållen) —— */
  body[class*="md-pack-"] .md-article h1,
  body[class*="md-pack-"] article.md-article h1{
    font-size:28px !important;
    line-height:1.15 !important;
    letter-spacing:-.01em !important;
    margin:0 0 10px !important;
    word-break:break-word;
    overflow-wrap:break-word;
    hyphens:auto;
  }

  /* —— 5. Meta-rad (författare/datum/granskat-av) —— */
  body[class*="md-pack-"] .md-meta{
    font-size:10.5px !important;
    line-height:1.5 !important;
    margin:0 0 14px !important;
    letter-spacing:.04em !important;
    word-break:break-word;
    overflow-wrap:break-word;
  }

  /* —— 6. Content-area: 22px → 16px för läsbarhet på mobil —— */
  body[class*="md-pack-"] .md-content,
  body[class*="md-pack-"] .md-content p{
    font-size:16px !important;
    line-height:1.65 !important;
  }
  body[class*="md-pack-"] .md-content > p,
  body[class*="md-pack-"] .md-content > ul,
  body[class*="md-pack-"] .md-content > ol{
    margin:0 0 12px !important;
  }
  body[class*="md-pack-"] .md-content h2{font-size:21px !important;line-height:1.2 !important;margin:22px 0 10px !important}
  body[class*="md-pack-"] .md-content h3{font-size:17px !important;line-height:1.25 !important;margin:18px 0 8px !important}
  body[class*="md-pack-"] .md-content h4{font-size:15px !important;line-height:1.3 !important;margin:14px 0 6px !important}

  /* —— 7. Author-box: 88px avatar → 56px, 1-kolumn fall-back om trångt —— */
  body[class*="md-pack-"] .md-author-box{
    grid-template-columns:56px minmax(0,1fr) !important;
    gap:12px !important;
    padding-top:14px !important;
    margin-top:14px !important;
    font-size:13px !important;
    line-height:1.55 !important;
  }
  body[class*="md-pack-"] .md-author-box img{
    width:56px !important;
    height:56px !important;
    border-radius:999px !important;
  }
  body[class*="md-pack-"] .md-author-box h4,
  body[class*="md-pack-"] .md-author-box strong{font-size:14px !important;line-height:1.25 !important}

  /* —— 8. Related-inline: tightare padding + mindre länkar —— */
  body[class*="md-pack-"] .md-related-inline{
    padding:12px 14px !important;
    margin:14px 0 16px !important;
    border-radius:8px !important;
  }
  body[class*="md-pack-"] .md-related-inline h3{font-size:12px !important;margin:0 0 8px !important}
  body[class*="md-pack-"] .md-related-inline a{font-size:14px !important;line-height:1.4 !important}

  /* —— 9. Säkerställ att inget i singular kan sprida bredden —— */
  body[class*="md-pack-"] article.md-article *{
    max-width:100% !important;
  }
  body[class*="md-pack-"] article.md-article img,
  body[class*="md-pack-"] article.md-article video,
  body[class*="md-pack-"] article.md-article iframe{
    max-width:100% !important;
    height:auto;
  }

  /* —— 10. md-shell padding på mobil: trimma till 12px för att ge artikeln plats —— */
  body[class*="md-pack-"] .md-home-wrap.md-shell,
  body[class*="md-pack-"] .md-shell.md-layout{
    padding-left:12px !important;
    padding-right:12px !important;
    margin-left:0 !important;
    margin-right:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* —— 10b. n24/nc/wp-tabeller inuti artikel: ALLTID scrollbara på mobil ——
 *  Befintlig table-regel högre upp sätter `display:table !important` i
 *  @media ≤768px för att låta `figure.wp-block-table`-wrappern sköta
 *  scrollen. Men n24-table renderas direkt i .n24-wrap utan figure-wrapper,
 *  så vi behöver en specifik override här. Specificity 0,2,2 + !important
 *  vinner mot 0,1,2 + !important ovan. */
@media (max-width:768px){
  body[class*="md-pack-"] .n24-wrap table.n24-table,
  body[class*="md-pack-"] .nc-wrap table.nc-table,
  body[class*="md-pack-"] article.md-article table.n24-table,
  body[class*="md-pack-"] .md-content table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    white-space:nowrap;
  }
  body[class*="md-pack-"] .n24-wrap table.n24-table thead,
  body[class*="md-pack-"] .nc-wrap table.nc-table thead,
  body[class*="md-pack-"] .md-content table thead{display:table-header-group !important}
  body[class*="md-pack-"] .n24-wrap table.n24-table tbody,
  body[class*="md-pack-"] .nc-wrap table.nc-table tbody,
  body[class*="md-pack-"] .md-content table tbody{display:table-row-group !important}
  body[class*="md-pack-"] .n24-wrap table.n24-table tr,
  body[class*="md-pack-"] .nc-wrap table.nc-table tr,
  body[class*="md-pack-"] .md-content table tr{display:table-row !important}
  body[class*="md-pack-"] .n24-wrap table.n24-table th,
  body[class*="md-pack-"] .n24-wrap table.n24-table td,
  body[class*="md-pack-"] .nc-wrap table.nc-table th,
  body[class*="md-pack-"] .nc-wrap table.nc-table td,
  body[class*="md-pack-"] .md-content table th,
  body[class*="md-pack-"] .md-content table td{
    display:table-cell !important;
    white-space:normal !important;
    padding:8px 10px !important;
    font-size:13px !important;
  }
}

/* —— 11. iPhone SE / mindre skärmar (≤380px) —— */
@media (max-width:380px){
  body[class*="md-pack-"] article.md-article,
  body[class*="md-pack-"] .md-article{padding:14px 12px !important}
  body[class*="md-pack-"] .md-article h1{font-size:24px !important;line-height:1.15 !important}
  body[class*="md-pack-"] .md-content,
  body[class*="md-pack-"] .md-content p{font-size:15.5px !important;line-height:1.6 !important}
  body[class*="md-pack-"] .md-featured img{max-height:200px !important}
  body[class*="md-pack-"] .md-author-box{grid-template-columns:48px minmax(0,1fr) !important}
  body[class*="md-pack-"] .md-author-box img{width:48px !important;height:48px !important}
}