/* Komani Newsroom 26: small-screen geometry and unfilled-AdSense handling.
   Keep the desktop editorial layout unchanged. */

/* Google exposes data-ad-status after a request. Do not hide unrequested ads:
   invisible slots before the request can prevent Google from measuring them. */
ins.adsbygoogle[data-ad-status="unfilled"] { display:none !important; }
/* Collapse our own ad attribution and padding too when the only unit is unfilled.
   A slot containing a filled unit must never be collapsed. */
.kn-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]):not(:has(ins.adsbygoogle[data-ad-status="filled"])),
#site-shell > .kn-ad.kn-ad-above-header:has(ins.adsbygoogle[data-ad-status="unfilled"]):not(:has(ins.adsbygoogle[data-ad-status="filled"])) {
  display:none !important;
}

@media (max-width: 760px) {
  /* clip, unlike overflow:hidden, doesn't create a scroll container that
     interferes with the theme's sticky header. */
  html,body { width:100%; max-width:100%; overflow-x:clip; }
  #site-shell,main,header,footer,.homepage,.archive-page,.single-page,
  .site-header,.container-wide { box-sizing:border-box; max-width:100%; min-width:0; }

  /* Only the reader's viewport may scroll horizontally. Newspaper layouts,
     injected embeds and external ads must not expand document width. */
  :where(.front-hero,.editorial-block,.hero-main,.hero-left,.hero-right,
         .front-category,.front-category-layout,.front-category-lead,
         .front-category-rail,.front-category-side,.editorial-left,
         .editorial-center,.editorial-right,.kn-home-topics-layout,
         .kn-home-tag-cards,.story-card,.story-media,.story-cover-link,
         .kn-endcap,.article-columns,.article-content,.kn-page-body) {
    min-width:0 !important;
    max-width:100%;
  }
  .homepage img,.archive-page img,.single-page img,.kn-static-page img {
    max-width:100% !important;
  }
  :is(.homepage,.archive-page) .story-media img.story-img,
  .homepage .story-cover-image img {
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  /* Fit every header control into narrow phones without pushing the page
     sideways. The navigation drawer still exposes all topics. */
  .site-header .header-inner { gap:8px !important; width:calc(100% - 26px) !important; }
  .site-header .header-logo,
  .site-header .header-logo .kn-header-brand {max-width:clamp(104px,34vw,145px) !important;min-width:0!important;}
  .site-header .header-logo .kn-brand-image {max-width:100% !important;height:auto !important;max-height:23px!important;}
  .site-header .header-tools {gap:6px !important;min-width:0!important;}
  .site-header .header-tools .header-advertise {padding:5px 7px!important;font-size:10px!important;min-height:28px!important;}
  .site-header .header-tools .search-toggle {flex:0 0 24px!important;width:24px!important;height:28px!important;}
  .site-header .header-tools .search-toggle svg {width:19px!important;height:19px!important;}

  /* Don't reuse desktop's 100vw+transform news rail on narrow screens.
     Its negative left margin could cut the first story and add lateral sway. */
  body.home .homepage .news-trends,
  body.blog .homepage .news-trends {
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    transform:none !important;
    justify-content:flex-start !important;
    overflow:hidden !important;
    flex-wrap:nowrap !important;
  }

  /* Turn the patchwork of desktop desks into an intentional vertical news flow.
     Empty optional columns no longer reserve white rectangles or half-width gaps. */
  .homepage .front-hero,
  .homepage .editorial-block { display:flex !important; flex-direction:column !important; gap:24px !important; }
  .homepage .front-hero > *,
  .homepage .editorial-block > * { width:100% !important; min-width:0 !important; max-width:100% !important; }
  .homepage .front-category-layout,
  .homepage .front-category-layout.front-category-even,
  .homepage .front-category-layout.kn-topic-few-stories,
  .homepage .kn-home-topic-section .kn-topic-few-stories {
    display:flex !important;
    flex-direction:column !important;
    gap:19px !important;
    width:100% !important;
  }
  .homepage .front-category-layout > * {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-column:auto !important;
    grid-row:auto !important;
    margin:0 !important;
  }
  .homepage .front-category-rail .story-card+.story-card,
  .homepage .front-category-side .story-card+.story-card { border-top:1px solid #e5e5e5; padding-top:14px; margin-top:14px; }
  .homepage .front-category-lead .story-title { font-size:clamp(21px,5.5vw,27px) !important; }

  /* Image-free WordPress posts show their real headline, not a large blank
     grey/white media placeholder. Image-led featured stories remain intact. */
  .homepage .story-card:not(.story-cover-lead):has(.story-image-fallback) .story-media,
  .homepage .story-card:not(.story-cover-lead) .story-cover-link:has(.story-image-fallback) {
    display:none !important;
  }

  /* Small-screen AdSense containers: Google can measure the width of a
     responsive unit, but oversized ad internals cannot shift the page sideways. */
  #site-shell > .kn-ad-above-header,
  .kn-ad,
  .kn-ad-header,
  .kn-ad-footer,
  .article-content .kn-ad,
  .homepage .kn-ad,
  .article-sidebar .kn-ad {
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .kn-ad ins.adsbygoogle[data-ad-format] {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  #site-shell > .kn-ad-above-header,
  .kn-ad,
  .article-content .kn-ad,
  .homepage .kn-ad,
  .article-sidebar .kn-ad {
    overflow-x:clip !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .kn-ad > :is(iframe,div,ins,section),
  .article-content :is(iframe,video,embed,object),
  .kn-page-body :is(iframe,video,embed,object) {
    max-width:100% !important;
  }
  /* Never reserve a large empty banner in the mobile lead grid when the
     optional placement has no ad to display. */
  .homepage .hero-right .kn-ad:empty {display:none !important;}
  .homepage .hero-right .kn-ad {margin:16px 0 !important;}
  .article-content .kn-ad {margin-top:18px !important;margin-bottom:18px !important;}
  .article-content .kn-ad .kn-ad-label {margin-bottom:7px !important;}

  /* Block editor content can contain wide tables, code, galleries and embeds. */
  .article-content :is(pre,table,.wp-block-table,.wp-block-embed,.wp-block-gallery),
  .kn-page-body :is(pre,table,.wp-block-table,.wp-block-embed,.wp-block-gallery) {
    max-width:100% !important;
  }
  .article-content :is(pre,.wp-block-table,table),
  .kn-page-body :is(pre,.wp-block-table,table) {overflow-x:auto !important;}
  .article-content :is(p,li,h2,h3,blockquote),
  .kn-page-body :is(p,li,h2,h3,blockquote) {overflow-wrap:break-word;}
}

@media (max-width: 480px) {
  /* News stories should be readable rather than two narrow cards with
     unused media slots. Keep the large lead story first. */
  .homepage .hero-left { display:block !important; }
  .homepage .hero-left > .story-card + .story-card {
    border-top:1px solid #e5e5e5 !important;
    margin-top:15px !important;
    padding-top:15px !important;
  }
  .homepage .editorial-mini-grid {grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px !important;}
  .homepage .kn-home-tag-cards {grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

/* Small tablets can still receive phone-sized ads and oversized editor media.
   Keep their two-column editorial layout, but never allow content to widen the
   document past the browser viewport. */
@media (min-width:761px) and (max-width:1100px) {
  html,body {max-width:100%;overflow-x:clip;}
  #site-shell,main,.homepage,.archive-page,.single-page,.article-columns,
  .article-content,.article-media-row,.kn-ad {min-width:0;max-width:100%;}
  .kn-ad, .article-content .kn-ad {box-sizing:border-box!important;width:100%!important;max-width:100%!important;overflow-x:clip!important;}
  .kn-ad ins.adsbygoogle[data-ad-format]{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;}
  .article-content :is(pre,.wp-block-table,table),
  .kn-page-body :is(pre,.wp-block-table,table) {box-sizing:border-box;max-width:100%!important;overflow-x:auto!important;}
  .article-content :is(img,iframe,video,embed,object),
  .kn-page-body :is(img,iframe,video,embed,object){max-width:100%!important;}
}