/* v0.1.0 archive and listing refinements */

/* -----------------------------------------------
   Left-align post headers in list layout
   (parent: .post-header { text-align: center })
   ----------------------------------------------- */

[data-layout*="list"] .post-header,
[data-layout*="list"] .blog-grid .post-header {
  text-align: left;
}

/* -----------------------------------------------
   Post title in listing cards
   ----------------------------------------------- */

.blog-grid .post-title {
  font-size: 1.35rem;
  line-height: 1.28;
  margin-bottom: 0.3em;
}

.blog-grid .post-title a {
  text-decoration: none;
}

.blog-grid .post-title a:hover {
  opacity: 0.72;
}

/* -----------------------------------------------
   Post categories in listing
   ----------------------------------------------- */

.blog-grid .post-categories {
  margin-bottom: 0.3em;
}

.blog-grid .post-categories a {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* -----------------------------------------------
   Post meta in listing
   ----------------------------------------------- */

.blog-grid .post-meta {
  font-size: 0.82em;
  color: #888;
  font-style: normal;
  letter-spacing: 0.02em;
  margin-bottom: 0.7em;
}

/* -----------------------------------------------
   Excerpt / post content in listing
   ----------------------------------------------- */

.blog-grid .post-content {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #444;
}

/* Override justify in excerpts */
.blog-grid .post-content p {
  text-align: left !important;
  margin-bottom: 0.8em;
}

/* -----------------------------------------------
   Read more button
   ----------------------------------------------- */

.read-more {
  margin: 16px 0 12px;
}

.read-more a {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid currentColor;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  line-height: 1;
  transition: opacity 0.2s;
}

.read-more a:hover {
  opacity: 0.6;
}

/* -----------------------------------------------
   List layout — breathing room between posts
   ----------------------------------------------- */

[data-layout*="list"] .blog-grid > li {
  padding-top: 2em;
  padding-bottom: 2em;
}

/* -----------------------------------------------
   Grid layout — card vertical spacing
   ----------------------------------------------- */

[data-layout*="col"] .blog-grid > li {
  margin-bottom: 2em;
}

/* -----------------------------------------------
   Category / tag archive header
   ----------------------------------------------- */

.category-description,
.tag-description {
  text-align: left;
  padding-bottom: 1.2em;
  margin-bottom: 1.8em;
}

.category-description h4,
.tag-description h4 {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.3em;
  line-height: 1.3;
}

.category-description p,
.tag-description p {
  font-size: 0.95rem;
  line-height: 1.65;
}

/* -----------------------------------------------
   Pagination
   ----------------------------------------------- */

.blog-pagination {
  padding-top: 1em;
  padding-bottom: 2.5em;
}

.blog-pagination.numeric a,
.blog-pagination.numeric span {
  font-size: 0.85rem;
  padding: 10px 14px;
  min-width: 36px;
  min-height: 38px;
  border-radius: 2px;
  transition: opacity 0.2s;
}

.blog-pagination.numeric a:hover {
  opacity: 0.6;
}

/* Default (prev/next text) pagination */
.previous-page a,
.next-page a {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  padding: 8px 0;
  display: inline-block;
}

/* -----------------------------------------------
   No results found
   ----------------------------------------------- */

.no-result-found {
  padding: 3em 0;
  margin-bottom: 2em;
}

.no-result-found h1 {
  font-size: 1.5rem;
  margin-bottom: 0.75em;
}

/* -----------------------------------------------
   Mobile
   ----------------------------------------------- */

@media screen and (max-width: 640px) {
  .blog-grid .post-title {
    font-size: 1.2rem;
  }

  /* Re-centre listing cards on small screens */
  [data-layout*="list"] .post-header,
  [data-layout*="list"] .blog-grid .post-header {
    text-align: center;
  }

  [data-layout*="list"] .blog-grid > li {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }
}