/* Komani Newsroom 40.0 | Desktop editorial refinement.
   Inspired by the compact CNN front page: a shorter lead photograph,
   clearer supporting cards, balanced newspaper desks, and a finer masthead.
   Do not alter the working AdSense containers, LIVE UI or mobile widths. */

@media (min-width: 1101px) {
  /* Keep the approved three-column proportions. Shorten the centre photo,
     not the page's width: reference newsroom lead photos are ~16:9. */
  body.home .kn32-home .front-hero,
  body.blog .kn32-home .front-hero {
    column-gap:clamp(26px,2.55vw,46px)!important;
    grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr)!important;
    align-items:start!important;
  }
  body.home .kn32-home .hero-main .story-cover-lead .story-lead-media,
  body.blog .kn32-home .hero-main .story-cover-lead .story-lead-media {
    width:100%!important;
    aspect-ratio:16/9!important;
    max-height:475px!important;
    border-radius:4px!important;
  }
  body.home .kn32-home .hero-main .story-cover-lead .story-lead-media img,
  body.blog .kn32-home .hero-main .story-cover-lead .story-lead-media img {
    width:100%!important;height:100%!important;object-fit:cover!important;
  }
  /* CNN-style lead photographs stay fully visible, without the legacy dark
     caption gradient (the headline sits above the photo). */
  .kn32-home .hero-main .story-cover-lead .story-lead-media::after {
    display:none!important;content:none!important;
  }
  /* Two genuine image-and-title cards on the left, as in the reference,
     then concise text headlines with subtle separating rules. */
  .kn32-home .hero-left .story-compact .story-media {
    aspect-ratio:16/9!important;
    margin-bottom:9px!important;
  }
  .kn32-home .hero-left .story-compact .story-title {
    font-size:clamp(18px,1.4vw,23px)!important;
    font-weight:500!important;line-height:1.23!important;
    letter-spacing:-.019em!important;margin:0!important;
  }
  .kn32-home .hero-left .story-stack>.story-card+.story-card {
    margin-top:17px!important;padding-top:15px!important;
    border-top:1px solid #e1e1e1!important;
  }
  .kn32-home .hero-left .story-mini .story-title {
    font-size:clamp(16px,1.14vw,19px)!important;
    font-weight:400!important;line-height:1.27!important;
  }
  /* A calmer, more structured right rail, consistent with the left side. */
  .kn32-home .hero-right .story-compact .story-media {aspect-ratio:16/9!important;}
  .kn32-home .hero-right .story-compact .story-title {
    margin-top:9px!important;font-size:clamp(18px,1.35vw,23px)!important;
    font-weight:500!important;line-height:1.23!important;
  }
  .kn32-home .hero-right .rail-header {
    border-top:1px solid #dedede!important;
    padding-top:15px!important;margin:21px 0 12px!important;
    font-size:19px!important;font-weight:600!important;line-height:1.2!important;
    letter-spacing:-.015em!important;
  }
  .kn32-home .hero-right .story-inline {
    grid-template-columns:40% minmax(0,1fr)!important;
    gap:12px!important;align-items:start!important;
  }
  .kn32-home .hero-right .story-inline .story-title {
    font-size:clamp(15px,1.06vw,18px)!important;line-height:1.25!important;
  }
  .kn32-home .hero-right .story-inline+.story-inline {
    border-top:1px solid #e0e0e0!important;
    margin-top:15px!important;padding-top:15px!important;
  }
  /* Strong headline hierarchy without link underlines until hover/focus. */
  .kn32-home .hero-main .story-cover-lead .story-title {
    font-size:clamp(34px,2.73vw,48px)!important;
    font-weight:700!important;line-height:1.07!important;
    letter-spacing:-.035em!important;margin-bottom:20px!important;
  }
  .kn32-home .hero-main .story-cover-lead .story-title a,
  .kn32-home .hero-main .story-cover-lead .story-title a:link,
  .kn32-home .hero-main .story-cover-lead .story-title a:visited {
    text-decoration:none!important;color:#0b0b0b!important;
  }
  .kn32-home .hero-main .story-cover-lead .story-title a:is(:hover,:focus-visible) {
    text-decoration:underline!important;text-underline-offset:4px!important;
  }
  .kn32-home .kn34-hero-headlines a {
    font-size:clamp(16px,1.12vw,19px)!important;
    padding:13px 0!important;line-height:1.31!important;
  }
  /* All desk sections use one density and card rhythm. Equal story counts
     are allocated by the PHP data layer, not by hiding extra stories in CSS. */
  .kn32-home .kn32-desk .front-category-layout {
    grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:clamp(22px,2.3vw,42px)!important;
    align-items:start!important;
  }
  .kn32-home .kn32-desk .front-category-layout.front-category-even {
    grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr)!important;
  }
  .kn32-home .kn32-desk .front-category-lead .story-media {aspect-ratio:16/9!important;}
  .kn32-home .kn32-desk .front-category-lead .story-title {
    font-size:clamp(24px,1.72vw,31px)!important;line-height:1.16!important;
    font-weight:600!important;letter-spacing:-.024em!important;
  }
  .kn32-home .kn32-desk .story-compact .story-media {aspect-ratio:16/9!important;}
  .kn32-home .kn32-desk .story-compact .story-title {
    font-size:clamp(18px,1.27vw,22px)!important;line-height:1.22!important;
    font-weight:500!important;
  }
  .kn32-home .kn32-desk .story-mini .story-title,
  .kn32-home .kn32-desk .kn34-lead-headlines a,
  .kn32-home .kn32-desk .kn34-rail-extra a {
    font-size:clamp(16px,1.07vw,19px)!important;
    line-height:1.3!important;
  }
  .kn32-home .kn32-desk .story-stack>.story-card+.story-card {
    border-top:1px solid #dedede!important;
    margin-top:15px!important;padding-top:14px!important;
  }
  .kn32-home .kn32-desk .front-category-top {
    padding-bottom:13px!important;
    border-bottom:1px solid #e0e0e0!important;
    margin-bottom:20px!important;
  }
}

/* Slightly lower, finer CNN-like desktop/laptop masthead. The LIVE status,
   search and Advertise controls keep their existing behaviour. */
@media(min-width:1061px) {
  body .site-header {border-bottom:0!important;box-shadow:none!important;}
  body .site-header .header-inner.container-wide {
    height:44px!important;min-height:44px!important;
    border-bottom:1px solid #222!important;
    column-gap:clamp(13px,1.15vw,21px)!important;
  }
  body .site-header .header-inner .header-nav .main-menu {
    gap:clamp(15px,1.28vw,24px)!important;
  }
  body .site-header .header-inner .header-nav .main-menu a {
    font-size:14.5px!important;line-height:1.15!important;
  }
  body .site-header .header-inner .header-tools {
    gap:11px!important;
  }
  body .site-header .header-inner .header-tools .header-advertise {
    height:30px!important;min-height:30px!important;
    padding-block:4px!important;border-radius:9px!important;
  }
}
@media(min-width:761px) and (max-width:1060px) {
  body .site-header {border-bottom:0!important;box-shadow:none!important;}
  body .site-header .header-inner.container-wide {
    height:45px!important;min-height:45px!important;
    border-bottom:1px solid #222!important;
  }
}
@media(min-width:1061px) and (max-width:1280px) {
  body .site-header .header-inner .header-nav .main-menu {gap:12px!important;}
  body .site-header .header-inner .header-nav .main-menu a {font-size:13px!important;}
  body .site-header .header-inner .header-tools {gap:8px!important;}
}
/* Small laptop/tablet keeps its existing 2-column homepage layout. Only
   proportionally shorten its lead image, not its side rails. */
@media(min-width:761px) and (max-width:1100px) {
  body.home .kn32-home .hero-main .story-cover-lead .story-lead-media,
  body.blog .kn32-home .hero-main .story-cover-lead .story-lead-media {
    aspect-ratio:16/9!important;max-height:450px!important;
  }
}