/*
 * The blog listing block, styled for this theme.
 *
 * Written by the legacy import: the theme this site came with predates the block and has
 * no rules for its class names. Edit it like any other hosted stylesheet.
 */
.blog-listing__items {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .blog-listing--cols-2 .blog-listing__items,
  .blog-listing--cols-3 .blog-listing__items,
  .blog-listing--cols-4 .blog-listing__items { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .blog-listing--cols-3 .blog-listing__items { grid-template-columns: repeat(3, 1fr); }
  .blog-listing--cols-4 .blog-listing__items { grid-template-columns: repeat(4, 1fr); }
}

.blog-listing__item { min-width: 0; }

.blog-listing__media {
  display: block;
  overflow: hidden;
  border-radius: .5rem;
  background: #1b1b1b;
}

.blog-listing__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .35s ease;
}

.blog-listing__media:hover .blog-listing__image { transform: scale(1.04); }

.blog-listing__body { padding: .85rem .15rem 0; }

.blog-listing__tag {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.blog-listing__title {
  margin: .35rem 0 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.blog-listing__link {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.blog-listing__link:hover { color: #d4302f; }

.blog-listing__date {
  display: block;
  margin-top: .4rem;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a8a8a;
}

.blog-listing__excerpt {
  margin: .55rem 0 0;
  font-size: .875rem;
  line-height: 1.55;
  color: #b3b3b3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-listing--empty::after {
  content: "Nothing published here yet.";
  display: block;
  padding: 3rem 0;
  text-align: center;
  color: #8a8a8a;
}

/* The island's button ships no appearance of its own: a listing returns structure. */
.blog-listing__more { margin-top: 2.5rem; text-align: center; }

.blog-listing__more-button {
  padding: .7rem 2rem;
  border: 1px solid #444;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.blog-listing__more-button:hover { border-color: #d4302f; background: rgba(212, 48, 47, .1); }
.blog-listing__more-button[disabled] { opacity: .5; cursor: default; }
.blog-listing__error { margin-top: .75rem; font-size: .875rem; color: #ff8a8a; }