/* Single article (single-post.php): 8 col grid, 4 on mobile */
.article-post .article-main {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: 16px;
  align-items: start;
  padding: 0 16px 80px;
  box-sizing: border-box;
  background: var(--jct-grey-4);
  color: var(--jct-black);
  font: var(--body2);
}

/* Main image: full bleed, over the l/r paddings too.
   #content prefix is needed to beat the legacy #content .article-image rules in style.css. */
#content.article-post .article-image {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0 -16px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
#content.article-post .article-image > img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.article-post .article-main > .caption {
  grid-column: 1 / 3;
  padding: 0;
  margin-top: 16px;
  text-align: left;
  font: var(--body3);
}

#content.article-post .article-main > .article-title {
  grid-column: 1 / -1;
  margin: 40px 0 0;
  padding: 0;
  text-align: center;
  font: var(--h1);
}

.article-post .article-main > .details {
  grid-column: 1 / -1;
  margin-top: 40px;
  text-align: center;
}
.article-post .article-main > .details .meta {
  margin: 0;
  padding: 0;
  font: var(--body2);
}

.article-post .article-main > .content {
  grid-column: 5 / 8;
  min-width: 0;
  margin-top: 80px;
  text-align: left;
}

/* Global a { color: #fff } in style.css is meant for dark backgrounds */
.article-post .article-main > .content a,
.article-post .article-main > .content a:hover,
.article-post .article-main > .caption a,
.article-post .article-main > .caption a:hover {
  color: var(--jct-black);
  text-decoration: underline;
}

.article-post .article-main > .socmed-share-box {
  grid-column: 5 / 6;
  min-width: 0;
  margin: 80px 0 0;
  flex-direction: row;
  gap: 30px;
  justify-content: flex-start;
  align-items: center;
  white-space: nowrap;
}
.article-post .article-main > .socmed-share-box .socmed-share {
  padding: 0;
}
.article-post .article-main > .socmed-share-box .socmed-title {
  text-transform: none;
}
.article-post .article-main > .socmed-share-box .socmed-share li > a {
  display: flex;
}
/* !important beats the inline background-image (ACF socmed icon) set in SocmedHelpers::share() */
.article-post .article-main > .socmed-share-box .socmed-share li > a.facebook > i {
  width: 26px;
  height: 25px;
  padding: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='25' viewBox='0 0 26 25' fill='none'%3E%3Cpath d='M25.1406 12.5703C25.1406 5.62791 19.5127 0 12.5703 0C5.62791 0 0 5.62791 0 12.5703C0 18.8444 4.59675 24.0449 10.6062 24.9879V16.2039H7.41451V12.5703H10.6062V9.80091C10.6062 6.65047 12.4829 4.91027 15.3542 4.91027C16.7295 4.91027 18.168 5.15579 18.168 5.15579V8.24926H16.583C15.0215 8.24926 14.5344 9.2183 14.5344 10.2124V12.5703H18.0207L17.4634 16.2039H14.5344V24.9879C20.5438 24.0449 25.1406 18.8446 25.1406 12.5703Z' fill='%23060606'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

@media (max-width: 768px) {
  .article-post .article-main {
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: 40px;
    font: var(--body3);
  }
  .article-post .article-main > .caption {
    font: var(--body4);
  }
  #content.article-post .article-main > .article-title {
    font: var(--h2);
  }
  .article-post .article-main > .details .meta {
    font: var(--body3);
  }
  .article-post .article-main > .content {
    grid-column: 1 / -1;
    margin-top: 40px;
  }
  .article-post .article-main > .socmed-share-box {
    grid-column: 1 / 2;
    margin-top: 40px;
  }
}