/**
 * @file    css/_tmpl-loop.css
 * @brief   Loop stylesheet.
 *
 * @ingroup DKSL_CSS
 */

/**
 * Table of Contents
 *
 * 1.0 - Preview common
 * 2.0 - Preview Box
 *   2.1 - Wrapper
 *   2.2 - Article
 *   2.3 - Media Queries
 * 3.0 - Preview List
 */

/*===========================================================================*/
/* 1.0 Preview common                                                        */
/*===========================================================================*/
:root {
  --dksl-prew-look-color: var(--dksl-link-color);
}

@media screen and (max-width: 1023px) {
  :root {
  }
}

/*===========================================================================*/
/* 2.0 Preview Box                                                           */
/*===========================================================================*/
/**
 * 2.1 - Wrapper
 */
#dksl-articles.box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
  column-gap: 24px;
  row-gap: 24px;
  justify-items: center; /* aligns row */
  align-items: start; /* aligns column */
}

@media screen and (max-width: 1023px) {
  #dksl-articles.box {
    grid-template-columns: 100% ;
  }
}

/**
 * 2.2 - Article
 */
#dksl-articles article.dksl-preview-box {
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#dksl-articles article.dksl-preview-box > header > *,
#dksl-articles article.dksl-preview-box > main > *,
#dksl-articles article.dksl-preview-box > footer > * {
  padding-top: var(--dksl-box-padding-block);
  padding-bottom: var(--dksl-box-padding-block);
}

#dksl-articles article.dksl-preview-box a {
  text-decoration: none;
}

#dksl-articles article.dksl-preview-box .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--dksl-text-color);
  font-weight: 600;
  text-transform: uppercase;
}

#dksl-articles article.dksl-preview-box .title a {
  color: var(--dksl-text-color);
  font-weight: 600;
  letter-spacing: 0;
}

#dksl-articles article.dksl-preview-box .post-excerpt {
  --dksl-press-space-normal: 0.2em;
  --dksl-press-space-combo: 0.7em;
  text-align: center;
}

#dksl-articles article.dksl-preview-box .post-excerpt ol,
#dksl-articles article.dksl-preview-box .post-excerpt ul {
  width: fit-content;
  margin-left: calc(auto + 1.2em);
  margin-right: auto;
  text-align: left;
}

/**
 * 2.3 - Media Queries
 */
@media screen and (max-width: 1023px) {

  #dksl-articles article.dksl-preview-box .dksl-preview-footer {
    display: none;
  }
}

/*===========================================================================*/
/* 3.0 - Preview List                                                        */
/*===========================================================================*/