/* Komani Newsroom 28: one CNN-reference editorial canvas at every desktop width.
   Reference screenshots: ~32px gutters at 1766px, ~1760px capped canvas on
   very wide monitors. Keep mobile 16px gutters and avoid fixed oversized ads. */
:root{--kn-editorial-canvas:1760px;--kn-editorial-gutter:32px;}
@media(min-width:761px){
  body .header-inner.container-wide,
  body.home main.homepage.container-wide,
  body.blog main.homepage.container-wide,
  body main.archive-page.container-wide,
  body main.kn-editorial-archive.container-wide,
  body.kn-single-post main.single-page.container-wide,
  body .site-footer.kn-cnn-footer .container-wide,
  body .breaking-bar .container-wide,
  body .header-search .container-wide{
    box-sizing:border-box!important;
    width:min(calc(100% - (var(--kn-editorial-gutter) * 2)),var(--kn-editorial-canvas))!important;
    max-width:var(--kn-editorial-canvas)!important;
    margin-inline:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  /* Keep the desktop homepage's photo and news rails in the same 1:2:1
     proportions as the reference without giant spaces between columns. */
  body.home .homepage .front-hero,
  body.home .homepage .editorial-block,
  body.blog .homepage .front-hero,
  body.blog .homepage .editorial-block{
    grid-template-columns:minmax(0,1fr) minmax(0,2.02fr) minmax(0,1fr)!important;
    column-gap:clamp(26px,2.65vw,50px)!important;
    min-width:0!important;
  }
  body.home .homepage .front-hero,
  body.blog .homepage .front-hero{margin-bottom:42px!important;}
  body.home .homepage .editorial-block,
  body.blog .homepage .editorial-block{margin-bottom:46px!important;}
  body.home .homepage .editorial-subsection,
  body.blog .homepage .editorial-subsection{margin-top:28px!important;}
  /* Four compact supporting headlines fit below each secondary feature. */
  body.home .homepage .editorial-mini-grid,
  body.blog .homepage .editorial-mini-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:clamp(14px,1.4vw,24px)!important;
  }
  body.home .homepage .editorial-mini-grid .story-card,
  body.blog .homepage .editorial-mini-grid .story-card{min-width:0!important;}
  body.home .homepage .editorial-mini-grid .story-title,
  body.blog .homepage .editorial-mini-grid .story-title{font-size:clamp(15px,1.05vw,19px)!important;line-height:1.25!important;}

  /* WordPress categories can contain 1-6 articles. An absent optional side
     rail must not reserve a blank third column on desktop. */
  body.home .homepage .front-category-layout.kn-no-side,
  body.blog .homepage .front-category-layout.kn-no-side{
    grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)!important;
    column-gap:clamp(24px,2.5vw,48px)!important;
  }
  body.home .homepage .front-category-layout.kn-no-side.front-category-even,
  body.blog .homepage .front-category-layout.kn-no-side.front-category-even{
    grid-template-columns:minmax(0,1fr) minmax(0,1.9fr)!important;
  }
  body.home .homepage .front-category-layout.kn-no-side.front-category-even .front-category-lead,
  body.blog .homepage .front-category-layout.kn-no-side.front-category-even .front-category-lead{grid-column:2!important;grid-row:1!important;}
  body.home .homepage .front-category-layout.kn-no-side.front-category-even .front-category-rail,
  body.blog .homepage .front-category-layout.kn-no-side.front-category-even .front-category-rail{grid-column:1!important;grid-row:1!important;}
  body.home .homepage .front-category-layout.kn-one-story,
  body.blog .homepage .front-category-layout.kn-one-story{display:block!important;}
  body.home .homepage .front-category-layout.kn-one-story .front-category-lead,
  body.blog .homepage .front-category-layout.kn-one-story .front-category-lead{max-width:min(100%,1050px)!important;}
  body.home .homepage .front-category.kn-home-topic-section,
  body.blog .homepage .front-category.kn-home-topic-section{
    margin:39px 0 48px!important;
    padding-top:22px!important;
  }
  body.home .homepage .kn-home-topics,
  body.blog .homepage .kn-home-topics{margin:42px 0 55px!important;padding-top:24px!important;}
  /* A category label and article in one column should align with the rest
     of the editorial canvas, not a narrower inherited max-width. */
  body .homepage .hero-main,body .homepage .hero-right,body .homepage .hero-left,
  body .homepage .editorial-center,body .homepage .editorial-left,
  body .homepage .editorial-right,body .homepage .front-category-layout>*{
    min-width:0!important;
  }
}

/* Tablet: maintain the intentional two-column layouts already used by the
   theme instead of forcing a 3-column newspaper into a narrow viewport. */
@media(min-width:761px) and (max-width:1100px){
  body.home .homepage .front-hero,
  body.home .homepage .editorial-block,
  body.blog .homepage .front-hero,
  body.blog .homepage .editorial-block{
    grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)!important;
    gap:24px!important;
  }
  body.home .homepage .editorial-mini-grid,
  body.blog .homepage .editorial-mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  body.home .homepage .front-category-layout.kn-no-side,
  body.blog .homepage .front-category-layout.kn-no-side{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)!important;}
}

@media(max-width:760px){
  body.home main.homepage.container-wide,
  body.blog main.homepage.container-wide,
  body main.archive-page.container-wide,
  body main.kn-editorial-archive.container-wide,
  body.kn-single-post main.single-page.container-wide,
  body .site-footer.kn-cnn-footer .container-wide{
    box-sizing:border-box!important;
    width:calc(100% - 32px)!important;
    max-width:100%!important;
    margin-inline:auto!important;
    padding-inline:0!important;
  }
  body.home .homepage .front-hero,
  body.blog .homepage .front-hero{margin-bottom:35px!important;}
  body.home .homepage .editorial-block,
  body.blog .homepage .editorial-block{margin-bottom:38px!important;}
  body.home .homepage .editorial-subsection,
  body.blog .homepage .editorial-subsection{margin-top:24px!important;}
  body.home .homepage .front-category.kn-home-topic-section,
  body.blog .homepage .front-category.kn-home-topic-section{
    margin:34px 0 40px!important;padding-top:17px!important;
  }
  body.home .homepage .kn-home-topics,
  body.blog .homepage .kn-home-topics{margin:40px 0 45px!important;padding-top:20px!important;}
}

/* Lead story's three closely related cards fill the space beneath its photo,
   rather than leaving a large empty central rectangle while the side rails
   continue for several more headlines. All three are real WordPress posts. */
@media(min-width:1101px){
  body.home .homepage .kn-hero-support-grid,
  body.blog .homepage .kn-hero-support-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:clamp(13px,1.4vw,23px)!important;
    margin-top:22px!important;
    padding-top:20px!important;
    border-top:1px solid #dedede!important;
  }
  body.home .homepage .kn-hero-support-grid .story-card,
  body.blog .homepage .kn-hero-support-grid .story-card{min-width:0!important;}
  body.home .homepage .kn-hero-support-grid .story-title,
  body.blog .homepage .kn-hero-support-grid .story-title{
    font:500 clamp(16px,1.10vw,20px)/1.25 Arial,Helvetica,sans-serif!important;
    margin-top:10px!important;
  }
}
@media(max-width:1100px){
  body.home .homepage .kn-hero-support-grid,
  body.blog .homepage .kn-hero-support-grid{display:none!important;}
}

/* When a supporting post has no featured image, retain the headline and
   divider rather than reserving a conspicuous grey image-shaped hole. */
.homepage .story-card:not(.story-cover-lead):has(.story-image-fallback) .story-media,
.homepage .story-card:not(.story-cover-lead):has(.story-image-fallback) .story-cover-link{
  display:none!important;
}

/* Graceful layout when a new publication has fewer than nine stories. */
@media(min-width:1101px){
  body.home .homepage .front-hero.kn-front-hero-no-right,
  body.blog .homepage .front-hero.kn-front-hero-no-right{
    grid-template-columns:minmax(0,1fr) minmax(0,2.02fr)!important;
  }
  body.home .homepage .front-hero.kn-front-hero-only-lead,
  body.blog .homepage .front-hero.kn-front-hero-only-lead{display:block!important;}
  body.home .homepage .front-hero.kn-front-hero-only-lead .hero-main,
  body.blog .homepage .front-hero.kn-front-hero-only-lead .hero-main{max-width:min(100%,1100px)!important;margin-inline:auto!important;}
}