/* Single article page (desktop + tablet polish). Loaded after the other sheets; everything is scoped to .csru-article-detail-page.
   - comfortable reading width (about 75 characters per line), smaller consistent type
   - equal left / right space for ads: if one side has no ad yet, its space is still kept so the article stays centred
   - related articles use the same small card scale as the homepage */

@media (min-width: 992px) {
  html body .csru-article-detail-page .single-artical > .container:not(#ui-a) { max-width: var(--ui-container, 1600px) !important; width: calc(100% - 48px) !important; padding-left: 0 !important; padding-right: 0 !important; }
  html body .csru-article-detail-page .csru-article-body-layout:not(#ui-a) { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: flex-start !important; gap: 32px !important; margin: 0 !important; }
  html body .csru-article-detail-page .csru-article-body-layout .csru-reading-column:not(#ui-a) { flex: 0 1 760px !important; max-width: 760px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; order: 2 !important; }
  html body .csru-article-detail-page .csru-article-body-layout .csru-sidebar-left:not(#ui-a),
  html body .csru-article-detail-page .csru-article-body-layout .csru-sidebar-right:not(#ui-a) { flex: 0 0 300px !important; width: 300px !important; max-width: 300px !important; }
  /* keep the space of a side that has no ad yet (blank, not a fake ad) so left and right are always equal */
  .csru-article-detail-page .csru-article-body-layout:not(:has(> .csru-sidebar-left))::before { content: ""; flex: 0 0 300px; order: 1; }
  .csru-article-detail-page .csru-article-body-layout:not(:has(> .csru-sidebar-right))::after { content: ""; flex: 0 0 300px; order: 3; }
}
/* below 1280px the two 300px rails would squeeze the text: reading column keeps its width, rails of an empty side collapse */
@media (min-width: 992px) and (max-width: 1279px) {
  html body .csru-article-detail-page .csru-article-body-layout:not(#ui-a) { gap: 20px !important; }
  html body .csru-article-detail-page .csru-article-body-layout .csru-sidebar-left:not(#ui-a),
  html body .csru-article-detail-page .csru-article-body-layout .csru-sidebar-right:not(#ui-a) { flex-basis: 240px !important; width: 240px !important; max-width: 240px !important; }
  .csru-article-detail-page .csru-article-body-layout:not(:has(> .csru-sidebar-left))::before,
  .csru-article-detail-page .csru-article-body-layout:not(:has(> .csru-sidebar-right))::after { flex-basis: 240px; }
}

/* ---- type scale (desktop and tablet; phones keep their own sizes) ---- */
@media (min-width: 768px) {
  body .csru-article-detail-page .h1heading:not(#ui-a),
  body .csru-article-detail-page .csru-article-header h1:not(#ui-a) { font-size: 1.625rem !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: -0.01em; }
  body .csru-article-detail-page .singleartilepage:not(#ui-a),
  body .csru-article-detail-page .singleartilepage p:not(#ui-a),
  body .csru-article-detail-page .singleartilepage li:not(#ui-a) { font-size: 16.5px !important; line-height: 1.75 !important; }
  body .csru-article-detail-page .singleartilepage p:not(#ui-a) { margin-bottom: 1.05em; }
  body .csru-article-detail-page .singleartilepage h2:not(#ui-a) { font-size: 1.3rem !important; line-height: 1.35 !important; margin: 1.6em 0 .6em; }
  body .csru-article-detail-page .singleartilepage h3:not(#ui-a) { font-size: 1.12rem !important; line-height: 1.4 !important; margin: 1.4em 0 .5em; }
  body .csru-article-detail-page .csru-article-kicker:not(#ui-a) { font-size: .72rem !important; }
  body .csru-article-detail-page .csru-article-byline:not(#ui-a) { font-size: .8125rem !important; }
}

/* ---- related articles: same small card scale as the homepage ---- */
@media (min-width: 768px) {
  body .csru-article-detail-page .Related-artical .artical-details h3:not(#ui-a) { font-size: 15px !important; line-height: 1.32 !important; min-height: 0 !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3 !important; line-clamp: 3 !important; overflow: hidden !important; }
  body .csru-article-detail-page .Related-artical .artical-details p:not(#ui-a) { font-size: 13px !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  body .csru-article-detail-page .Related-artical .heading h2:not(#ui-a) { font-size: 1.4rem !important; }
}