/*******************************************************************************************
*                                                                                          *
*                                        <Article>                                         *
*                                                                                          *
********************************************************************************************/

.article {
  color: var(--cgd-text-color, var(--headings-highlights-color));
}

.article__header {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: var(--cgd-separator-big-margin, 3rem);
}

.article .page__title {
  margin-bottom: var(--cgd-headings-margin, 1.125rem);
}

.article__info-list {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--cgd-text-font-size, 1.125rem);
}

.article__info-item {
  margin-right: 0.625rem;
}

.article__info-item:nth-of-type(2) {
  color: var(--cgd-detail-dark-grey, var(--text-color));
}

.article__info-item::after {
  content: '|';
  margin-left: 0.625rem;
  color: var(--cgd-text-color, var(--headings-highlights-color));
}

.article__info-item:last-of-type::after {
  content: '';
}




/*******************************************************************************************
*                                                                                          *
*                       <ArticlePageLayout> && <ArticlesIndexLayout>                       *
*                                                                                          *
********************************************************************************************/

.article-page-layout,
.articles-index-layout,
.news-page-layout {
  width: 90%;
  display: flex;
  justify-content: space-between;
}

.article-page-layout .left-col,
.articles-index-layout .left-col,
.news-page-layout .left-col {
  width: 73%;
  margin-right: 3rem;
}

.article-page-layout .left-col {
  padding-left: 3rem;
}

.article-page-layout .return-link {
  margin-bottom: var(--cgd-separator-big-margin, 5rem);
}

.left-col__page-navigators {
  display: flex;
  margin-top: var(--cgd-separator-big-margin, 4.69rem);
}

.left-col__page-navigators > * {
  margin-right: 1.25rem;
}

.right-col {
  width: 19%;
  display: flex;
  flex-direction: column;
}

.article-page-layout .right-col {
  justify-content: space-between;

  /* Cheats needed to align the aside with the beginning of the article */
  margin-top: var(--cgd-separator-big-margin, 5rem);
  padding: 2rem 0;
}

.articles-index-layout .right-col,
.news-page-layout .right-col {
  /* Cheat needed to align the aside with the beginning of the article previews */
  margin-top: calc(15.5rem - var(--cgd-separator-big-margin, 0px));
}

.right-col__container {
  margin-bottom: var(--cgd-separator-big-margin, 5.3rem);
}

.right-col__container:last-of-type {
  margin-bottom: 0;
}

.article-page-layout .right-col__container > * {
  margin-bottom: var(--cgd-separator-big-margin, 5.3rem);
}

.articles-index-layout .right-col__container > *,
.news-page-layout .right-col__container > * {
  margin-bottom: var(--cgd-separator-big-margin, 3.2rem);
}

.news-page-layout .right-col__container.news-months > *:not(:last-child) {
  margin-bottom: calc(var(--cgd-separator-big-margin, 3.2rem) / 2);
}

.right-col__container > *:last-of-type {
  margin: 0;
}


/* ArticlePageLayout */

.article-page-layout .strip {
  padding: 0;
}

.article-page-layout .strip__wrapper {
  width: 100%;
}

/* H1 and H2 shouldn't be added to the markdown in the article page layout */
.toastui-editor-popup[aria-role="dialog"] li[data-type="Heading"][data-level="1"],
.toastui-editor-popup[aria-role="dialog"] li[data-type="Heading"][data-level="2"] {
  display: none !important;  
}

.article-page-layout .basic-info[type="left-image"],
.article-page-layout .basic-info[type="right-image"] {
  align-items: flex-start;
}

.article-page-layout .basic-info__text h3 {
  color: var(--cgd-headings-color, var(--primary-accent-color));
  font-weight: 600;
  font-size: var(--cgd-h3-font-size, 1.875rem);
}

.article-page-layout .basic-info__text h4 {
  font-weight: 600;
  font-size: var(--cgd-h4-font-size, 1.75rem);
}

.article-page-layout .basic-info__text h5 {
  font-size: var(--cgd-h5-font-size, 1.625rem);
}

.article-page-layout .basic-info__text h6 {
  font-size: var(--cgd-h6-font-size, 1.5rem);
}


/* ArticlesIndexLayout */

.articles-index-layout .page__title,
.news-page-layout .page__title {
  margin-bottom: var(--cgd-separator-big-margin, 1.534em);
}

.articles-index-layout .article-preview:not(:last-of-type) {
  margin-bottom: var(--cgd-separator-small-margin, 4.69rem);
}

.news-page-layout .strip:not([padding-top-value]),
.news-page-layout .strip:not([padding-top-value]) .strip__wrapper {
  padding-top: var(--cgd-section-padding-half-val2, 0.875rem);
}

.news-page-layout .strip:not([padding-bottom-value]),
.news-page-layout .strip:not([padding-bottom-value]) .strip__wrapper {
  padding-bottom: var(--cgd-section-padding-half-val2, 0.875rem);
}

.articles-index-layout .article-preview,
.news-page-layout .basic-info[type^="news-"] {
  min-height: 20.88rem;
  box-shadow: var(--cgd-card-box-shadow, none);
}

.articles-index-layout .article-preview:nth-of-type(even) {
  flex-direction: row-reverse;
}

.articles-index-layout .article-preview__description,
.news-page-layout .basic-info[type^="news-"] .basic-info__text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.articles-index-layout .article-preview__description {
  -webkit-line-clamp: 5;
}

.news-page-layout .basic-info[type^="news-"] .basic-info__text {
  --news-icon-spacing: 0.9375rem;
  -webkit-line-clamp: 10;
  position: relative;
  padding-bottom: var(--news-icon-spacing);
  margin-bottom: calc(var(--news-margin-bottom) - var(--news-icon-spacing));
  opacity: 1;
  transition: opacity 0.5s;
}

.news-page-layout .basic-info[type^="news-"] .basic-info__text::after {
  content: '+';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6.25rem;
  max-height: 50%;
  font-size: 2rem;
  font-weight: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--cgd-background-accent, var(--primary-accent-color));
  background: linear-gradient(0deg, var(--news-background) var(--news-icon-spacing), transparent);
  opacity: 1;
  pointer-events: none;
  transition: none;
}

.news-page-layout .basic-info[type^="news-"] .basic-info__text:hover {
  cursor: pointer;
}

.news-page-layout .basic-info[type^="news-"] .basic-info__text:not(.read-everything):hover {
  opacity: 0.85;
}

.news-page-layout .basic-info[type^="news-"] .basic-info__text.read-everything {
  overflow: visible;
  display: block;
}

.news-page-layout .basic-info[type^="news-"] .basic-info__text.read-everything::after {
  opacity: 0;
  transition: opacity 0.5s;
}

.articles-index-layout .article-preview__link .icon-container {
  width: 1.06rem;
  height: 1.06rem;
}



/*******************************************************************************************
*                                                                                          *
*                                      Media Queries                                       *
*                                                                                          *
********************************************************************************************/

/* <= 960px  */
@media (max-width:60rem) {
  .articles-index-layout,
  .news-page-layout,
  .article-page-layout {
    flex-direction: column;
  }

  .articles-index-layout .left-col,
  .news-page-layout .left-col,
  .article-page-layout .left-col {
    width: 100%;
    margin: 0 0 var(--cgd-separator-big-margin, 7rem) 0;
  }

  .article-page-layout .left-col {
    padding: 0;
  }

  .articles-index-layout .right-col,
  .news-page-layout .right-col,
  .article-page-layout .right-col {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .article .page__title,
  .articles-index-layout .page__title,
  .news-page-layout .page__title {
    font-size: var(--cgd-h1-font-size, 3.2rem);
  }

  .article-page-layout .share-info:last-of-type {
    display: none;
  }

  .article-page-layout .share-info .share-info__icons-wrapper {
    justify-content: space-around;
  }
}

/* <= 720px  */
@media (max-width:45rem) {
  .article .page__title,
  .articles-index-layout .page__title,
  .news-page-layout .page__title {
    font-size: 2.5rem;
  }

  .articles-index-layout .article-preview:nth-of-type(even) {
    flex-direction: column;
  }

  .articles-index-layout .article-preview,
  .news-page-layout .basic-info[type="news-left-image"],
  .news-page-layout .basic-info[type="news-right-image"] {
    min-height: 35rem;
  }

  .articles-index-layout .article-preview__media,
  .news-page-layout .basic-info[type^="news-"] .basic-info__media {
    height: 16rem;
  }
}

/* <= 480px  */
@media (max-width:30rem) {
  .article__info-list {
    flex-direction: column;
  }

  .article__info-item::after {
    content: '';
  }

  .article-page-layout .share-info .share-info__icons-wrapper {
    justify-content: space-between;
  }
}