/***************************************************/
/* CSS specific to pages: index.html, archive.html
/***************************************************/

/* Article grid */

#article-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  grid-gap: var(--space-s);
  padding: 0 var(--space-s);
  max-width: var(--width-content-large);
  margin: 2rem auto 0 auto;
}
#article-list > li {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 536px;
  background-color: var(--color-bg-alt);
  padding: var(--space-m);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

/* Cards typography */

#article-list > li > * {
  /* Reset all typography styles */
  margin: 0;
}
#article-list > li > p {
  font-size: 0.8rem;
  height: 100%;
}
#article-list > li span.truncate {
  -webkit-line-clamp: 2;
}
#article-list > li h3 a.truncate {
  -webkit-line-clamp: 4;
  padding-bottom: 2px;
}
#article-list > li h3 > a {
  text-decoration-thickness: 0.03em;
  text-decoration-color: var(--color-subtle);
}
#article-list > li h3 > a:hover,
#article-list > li h3 > a:focus {
  text-decoration-thickness: 0.06em;
  text-decoration-color: var(--color-text);
}
#article-list > li .article-details {
  display: flex;
  gap: var(--space-s);
  justify-content: space-between;
  align-items: flex-end;
  color: var(--color-subtle);
}
#article-list > li .article-source {
  overflow-x: hidden;
  text-decoration: var(--text-decoration-underline);
  text-underline-position: under;
  padding-bottom: 2px; /* so that the hidden overflow doesn't cut the underline */
}

/**********************************************/
/* Media queries 
/**********************************************/

@media only screen and (min-width: 768px) {
  /* Article grid */

  #article-list {
    grid-gap: var(--space-m);
    padding: 0 var(--space-m);
  }
  #article-list > li {
    padding: var(--space-l) var(--space-m);
  }
}