/* Komani Newsroom 4.2.5
 * Wide desktop single-article proportions measured against the supplied
 * CNN reference at normal browser zoom. All homepage, category, page,
 * tablet and mobile styles remain exactly as in 4.2.4.
 *
 * Browser zoom is not directly detectable in CSS; the >=1600 CSS-pixel
 * breakpoint targets full-size desktop windows. More heavily zoomed-in
 * ordinary desktop windows continue to use the pre-existing layout.
 */
@media (min-width: 1600px) {
  /* CNN reference: the reading canvas begins about 5.85% into the viewport. */
  body.single-post.kn-single-post .site-header .header-inner.container-wide {
    width: 88.3% !important;
    max-width: none !important;
    height: 49px !important;
    min-height: 49px !important;
  }
  body.single-post.kn-single-post main.single-page.container-wide {
    box-sizing: border-box !important;
    width: 88.3% !important;
    max-width: none !important;
    padding-top: 50px !important;
  }
  body.single-post.kn-single-post main.single-page .article-taxonomy {
    margin-bottom: 23px !important;
  }
  body.single-post.kn-single-post main.single-page h1.article-title {
    font-size: 70px !important;
    line-height: 1.13 !important;
    margin-bottom: 35px !important;
  }
  /* The accent sits around 2.7vw from the viewport edge, instead of
     bleeding against the browser's physical left boundary. */
  body.single-post.kn-single-post main.single-page h1.article-title::before {
    left: -3.15vw !important;
    width: 15px !important;
    top: -3px !important;
    bottom: -3px !important;
    height: auto !important;
  }
  body.single-post.kn-single-post main.single-page .article-timestamp {
    margin-bottom: 14px !important;
  }
  body.single-post.kn-single-post main.single-page .article-heading {
    margin-bottom: 62px !important;
  }
  body.single-post.kn-single-post main.single-page .article-media-row {
    box-sizing: border-box !important;
    display: block !important;
    width: min(100%, 66.2vw) !important;
    max-width: none !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }
  body.single-post.kn-single-post main.single-page .article-media-row > figure.article-feature {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  body.single-post.kn-single-post main.single-page .article-media-row img.article-hero-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* v4.2.7: Single-article red accent ONLY. No changes to geometry, fonts,
 * homepage, article content or other placements.
 *
 * The v4.2.6 resolution: 1dppx test failed for Windows/macOS display
 * scaling above 100%, even when the browser itself was at 100% zoom.
 * The kn-browser-zoom-100 class is toggled by a small browser-window check;
 * because browsers provide no standardized exact zoom API, it is a best-
 * effort determination rather than a promise for every OS/browser setup.
 */
@media screen and (min-width: 1200px) {
  /* Preserve the existing edge-aligned stripe at other zoom levels. */
  body.single-post.kn-single-post main.single-page h1.article-title::before {
    left: calc(0px - (50vw - 50%)) !important;
  }
  /* At normal desktop zoom, align the stripe with the supplied CNN image. */
  html.kn-browser-zoom-100 body.single-post.kn-single-post main.single-page h1.article-title::before {
    left: calc(49px - (50vw - 50%)) !important;
    width: 15px !important;
  }
}


/* v4.2.9: CNN-reference article alignment at normal desktop browser zoom.
 * Prior versions incorrectly padded only the H1, so the red line could
 * overlap the text while category, metadata and hero stayed at a different
 * gutter. Instead align the WHOLE single-article canvas and leave the H1
 * without independent padding. The rules are scoped to the same normal-zoom
 * class used previously and to desktop screens only. Everything at other
 * zoom levels or on small screens retains v4.2.8 rendering.
 * Chrome/Firefox expose no standard exact browser zoom API; the class is
 * best effort, as it was in the previous version.
 */
@media screen and (min-width: 1200px) {
  html.kn-browser-zoom-100 body.single-post.kn-single-post main.single-page.container-wide {
    box-sizing: border-box !important;
    width: 88.3% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-top: 50px !important;
  }
  html.kn-browser-zoom-100 body.single-post.kn-single-post main.single-page h1.article-title {
    padding-left: 0 !important;
    font-size: 70px !important;
    line-height: 1.13 !important;
    margin-bottom: 35px !important;
  }
  html.kn-browser-zoom-100 body.single-post.kn-single-post main.single-page h1.article-title::before {
    left: -3.15vw !important;
    width: 15px !important;
    top: -3px !important;
    bottom: -3px !important;
    height: auto !important;
  }
  html.kn-browser-zoom-100 body.single-post.kn-single-post main.single-page .article-taxonomy {
    margin-bottom: 23px !important;
  }
  html.kn-browser-zoom-100 body.single-post.kn-single-post main.single-page .article-timestamp {
    margin-bottom: 14px !important;
  }
  html.kn-browser-zoom-100 body.single-post.kn-single-post main.single-page .article-heading {
    margin-bottom: 62px !important;
  }
  html.kn-browser-zoom-100 body.single-post.kn-single-post main.single-page .article-media-row {
    box-sizing: border-box !important;
    display: block !important;
    width: min(100%, 66.2vw) !important;
    max-width: none !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }
  html.kn-browser-zoom-100 body.single-post.kn-single-post main.single-page .article-media-row > figure.article-feature {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  html.kn-browser-zoom-100 body.single-post.kn-single-post main.single-page .article-media-row img.article-hero-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* v4.2.10 | 100%-zoom / 125%-display-scale alignment to the supplied CNN
 * reference. The source screenshots show the entire two-line Komani headline
 * scaled 1.25x, making both headline and its dependent stripe too tall.
 * Scale ONLY the headline font and dependent red accent in that case, so the
 * stripe spans the whole headline at CNN's ~15px x ~169px size without
 * overlapping the text or ending midway through the second line.
 * This rule is limited to single articles, normal-zoom desktop, and the
 * user's 125%-class display scaling. All other zooms/devices are unchanged.
 */
@media screen and (min-width:1200px) and (min-resolution:1.2dppx) and (max-resolution:1.35dppx) {
  html.kn-browser-zoom-100 body.single-post.kn-single-post main.single-page h1.article-title {
    font-size: 57px !important;
  }
  html.kn-browser-zoom-100 body.single-post.kn-single-post main.single-page h1.article-title::before {
    width: 12.6px !important;
  }
}