/* WordPress blog archive: additional styles only */

.lilly-blog-search:focus {
  outline: none;
  border-color: #93c5fd;
}

.lilly-blog-category-chip {
  background: #fff;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  text-decoration: none;
}

.lilly-blog-category-chip.is-active {
  background: #1e3a5f;
  color: #fff;
  border-color: #1e3a5f;
}

.lilly-blog-category-chip:hover {
  border-color: #cbd5e1;
}

.lilly-blog-category-chip.is-active:hover {
  border-color: #1e3a5f;
}

.lilly-blog-card-placeholder {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d4a7a 100%);
  height: 176px;
  min-height: 176px;
  max-height: 176px;
}

.lilly-blog-card-placeholder-label {
  color: #d4af37;
  border-color: rgba(212, 175, 55, .4);
  background: rgba(212, 175, 55, .1);
}

/* Archive card image: keep every thumbnail at the same height. */
.lilly-blog-card-image,
.page-template-template-blog-archive .wp-post-image,
.page-template-template-blog-archive img.lazyload,
.page-template-template-blog-archive img.lazyloaded {
  display: block;
  width: 100%;
  height: 176px !important;
  min-height: 176px;
  max-height: 176px;
  object-fit: cover;
}

/* Prevent the excerpt from stretching the card vertically. */
.lilly-blog-card-excerpt {
  flex: none !important;
  margin-bottom: 1rem;
}

.lilly-blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
}

.lilly-blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 2rem;
}

.lilly-blog-pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .65rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #6b7280;
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.lilly-blog-pagination-link:hover {
  border-color: #c9a227;
  color: #1e3a5f;
}

.lilly-blog-pagination-link.is-current {
  border-color: #1e3a5f;
  background: #1e3a5f;
  color: #fff;
}

@media (max-width: 639px) {
  .lilly-blog-pagination {
    gap: .4rem;
  }

  .lilly-blog-pagination-link {
    min-width: 2rem;
    height: 2rem;
    padding: 0 .55rem;
  }
}