/* Mobile hardening across OutOfHands.nl — 25 Sep 2026 */
@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}

  .standard-page .prose,
  .article-view .prose{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:break-word;
  }

  .standard-page .prose>*,
  .article-view .prose>*{
    max-width:100%;
    box-sizing:border-box;
  }

  .standard-page .prose img,
  .article-view .prose img,
  .standard-page .prose video,
  .article-view .prose video,
  .standard-page .prose svg,
  .article-view .prose svg{
    max-width:100%!important;
    height:auto;
  }

  .standard-page .prose iframe,
  .article-view .prose iframe{
    display:block;
    width:100%!important;
    max-width:100%!important;
  }

  .standard-page .prose .wp-block-table,
  .article-view .prose .wp-block-table{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .standard-page .prose table,
  .article-view .prose table{
    width:100%!important;
    max-width:100%!important;
  }

  .standard-page .prose>table,
  .article-view .prose>table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .standard-page .prose th,
  .standard-page .prose td,
  .article-view .prose th,
  .article-view .prose td{
    overflow-wrap:normal;
    word-break:normal;
  }

  .standard-page .prose pre,
  .article-view .prose pre{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Inline desktop grids in older dossiers collapse safely on phones. */
  .standard-page .prose [style*="grid-template-columns"]{
    grid-template-columns:1fr!important;
  }

  .standard-page .prose [style*="min-width"]{
    min-width:0!important;
  }

  /* Long generic page titles should never push beyond the viewport. */
  .standard-page>article>header h1{
    max-width:100%;
    font-size:clamp(33px,10vw,42px)!important;
    line-height:1.06!important;
    letter-spacing:-1.4px!important;
    overflow-wrap:break-word;
  }

  .standard-page .prose h2{
    overflow-wrap:break-word;
  }

  /* Older humanoid dossiers used five desktop KPI cells.
     Keep two balanced columns and let an odd final card use the full row. */
  .ooh-optimus .ooh-kpis,
  .ooh-figure03 .ooh-kpis,
  .ooh-atlas .ooh-kpis,
  .ooh-digit .ooh-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .ooh-optimus .ooh-kpi,
  .ooh-figure03 .ooh-kpi,
  .ooh-atlas .ooh-kpi,
  .ooh-digit .ooh-kpi{
    min-width:0;
  }

  .ooh-optimus .ooh-kpi:nth-child(2n),
  .ooh-figure03 .ooh-kpi:nth-child(2n),
  .ooh-atlas .ooh-kpi:nth-child(2n),
  .ooh-digit .ooh-kpi:nth-child(2n){
    border-right:0;
  }

  .ooh-optimus .ooh-kpi:last-child:nth-child(odd),
  .ooh-figure03 .ooh-kpi:last-child:nth-child(odd),
  .ooh-atlas .ooh-kpi:last-child:nth-child(odd),
  .ooh-digit .ooh-kpi:last-child:nth-child(odd){
    grid-column:1/-1;
    border-right:0;
  }

  /* The latest-news card on Optimus has a desktop grid inline. */
  .optimus-page .ooh-card[style*="grid-template-columns"]{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .optimus-page .ooh-card[style*="grid-template-columns"] img{
    width:100%!important;
    max-height:320px;
    object-fit:cover;
  }

  /* Prevent long technical strings and URLs in source blocks from widening pages. */
  .sources,
  .ooh-sources,
  .china-sources,
  .ooh-eu-sources{
    overflow-wrap:anywhere;
  }
}

@media (max-width:620px){
  .article-view .article-head{
    padding-top:36px!important;
  }

  .article-view .article-head h1{
    max-width:100%;
    font-size:clamp(33px,9.2vw,38px)!important;
    line-height:1.06!important;
    letter-spacing:-1.4px!important;
    overflow-wrap:break-word;
  }

  .article-view .dek{
    font-size:17px!important;
    line-height:1.5!important;
  }

  .article-view .article-image{
    margin-top:26px!important;
  }
}

@media (max-width:430px){
  .standard-page .prose{
    font-size:16px!important;
    line-height:1.72!important;
  }

  .standard-page .prose h2{
    font-size:27px!important;
    line-height:1.16!important;
  }

  .standard-page .prose h3{
    line-height:1.2!important;
  }

  .standard-page .prose .ooh-card{
    padding-left:16px!important;
    padding-right:16px!important;
  }
}