/* Article detail layout. Scoped to #article (only rendered by article.liquid);
   body class is "template_index" on every page, so it cannot be used for scoping. */

/* !important: the theme sets .container { max-width: none !important } from 1360px. */
#maincontent:has(> #article) {
  width: 100%;
  max-width: 1320px !important;
  padding-left: 16px;
  padding-right: 16px;
}

#article,
#article > .article,
#article .main-content {
  float: none;
  width: 100%;
  padding: 0;
}

#article .blog-breadcrumb {
  float: none;
  padding: 0;
}

/* Grid replaces the bootstrap floats; the row clearfix pseudo-elements would become grid items. */
#article .article-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin: 0;
}
#article .article-body::before,
#article .article-body::after,
#article .content-page > .row::before,
#article .content-page > .row::after {
  display: none;
}
#article .article-body > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
}

/* Mobile: article first, "latest posts" sidebar below it instead of hidden. */
#article .article-body > .col-md-3 {
  display: block !important;
  order: 2;
}
#article .article-body > #layout-page {
  order: 1;
}

/* Sidebar post list: the 4/8 bootstrap split leaves the thumbnail column narrower than the image at 280px. */
#article .news-latest .article {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
#article .news-latest .article::before,
#article .news-latest .article::after {
  display: none;
}
#article .news-latest .article > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
}
#article .news-latest .article > [class*="col-"]:first-child {
  flex: 0 0 88px;
}
#article .news-latest .article img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 992px) {
  #maincontent:has(> #article) {
    padding-left: 24px;
    padding-right: 24px;
  }
  #article .article-body {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 48px;
  }
  #article .article-body > .col-md-3 {
    order: 0;
  }
  #article .article-body > #layout-page {
    order: 0;
  }
}

#article #layout-page {
  max-width: none;
  margin-top: 0 !important;
  background: none;
  box-shadow: none;
  overflow: visible;
}

#article .header-page {
  display: block;
}
#article .header-page h1 {
  margin: 0 0 12px;
  padding: 0;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 800;
  text-transform: none;
}
#article .header-page #artice-p {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #6b6b6b;
}
@media (min-width: 768px) {
  #article .header-page h1 {
    font-size: 32px;
  }
}

/* The date used to occupy its own column (col-md-2) beside the text; show it as a meta line instead. */
#article .content-page {
  padding: 0;
}
#article .content-page > .row {
  display: block;
  margin: 0;
}
#article .content-page > .row > [class*="col-"] {
  float: none;
  width: 100%;
  padding: 0;
}
#article .author-date,
#article .author-date .date-post,
#article .author-date .date-post li {
  display: block;
  float: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
  color: #6b6b6b;
}
/* No bottom margin: .body-content is white-space: pre-line, so the newline before its first
   paragraph already renders as one blank line. */
#article .author-date .icon-time {
  display: none;
}
#article .author-date .date-post p {
  margin: 0;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}

#article .article-content {
  border-left: 0;
}
#article .body-content {
  font-size: 16px;
  line-height: 1.75;
  color: #222;
  overflow-wrap: break-word;
}
@media (min-width: 768px) {
  #article .body-content {
    font-size: 17px;
  }
}
@media (min-width: 1200px) {
  #article .body-content {
    font-size: 18px;
  }
}

/* Editor output carries inline justify and fixed pixel sizes; justify leaves wide gaps on narrow screens. */
#article .body-content [style*="text-align: justify"],
#article .body-content [style*="text-align:justify"] {
  text-align: left !important;
}
#article .body-content span[style*="font-size"] {
  font-size: inherit !important;
}

/* The theme pins p to 1rem/21px globally. */
#article .body-content p,
#article .body-content li {
  font-size: inherit;
  line-height: inherit;
}
#article .body-content p,
#article .body-content ul,
#article .body-content ol {
  margin: 0 0 1.1em;
}
#article .body-content h1,
#article .body-content h2 {
  margin: 1.6em 0 0.6em;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 800;
}
#article .body-content h3,
#article .body-content h4 {
  margin: 1.4em 0 0.5em;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
}
@media (min-width: 768px) {
  #article .body-content h1,
  #article .body-content h2 {
    font-size: 26px;
  }
  #article .body-content h3,
  #article .body-content h4 {
    font-size: 20px;
  }
}

/* Text blocks keep a readable measure (~85 chars at 18px); blocks holding images or video use the full column. */
#article .header-page,
#article .body-content > :not(:has(img, iframe, video, table)) {
  max-width: 820px;
}

#article .body-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
}
#article .body-content iframe,
#article .body-content video {
  max-width: 100%;
}
#article .body-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}