/* The index uses Theme utilities for presentation. Keep only exact block breakpoints
 * and states that depend on the server-rendered list and Interactivity router. */

.reher-blog-index { isolation: isolate; }

.reher-blog-index--top-default { padding-top: 4.5rem; }
.reher-blog-index--top-half { padding-top: 2.25rem; }
.reher-blog-index--top-none { padding-top: 0; }
.reher-blog-index--bottom-default { padding-bottom: 6rem; }
.reher-blog-index--bottom-half { padding-bottom: 3rem; }
.reher-blog-index--bottom-none { padding-bottom: 0; }

.reher-blog-filter {
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 17rem) auto;
}

.reher-blog-article__meta time::before {
  margin-right: 0.75rem;
  content: "·";
}

.reher-blog-article__fallback {
  background-image: linear-gradient(135deg, transparent 49.5%, var(--color-reher-border, var(--border)) 50%, transparent 50.5%);
}

.reher-blog-index[aria-busy="true"] .reher-blog-results { opacity: 0.65; }

@media (max-width: 56rem) {
  .reher-blog-filter { grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem); }
  .reher-blog-filter__actions { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {
  .reher-blog-index--top-default { padding-top: 3.5rem; }
  .reher-blog-index--top-half { padding-top: 1.75rem; }
  .reher-blog-index--bottom-default { padding-bottom: 4.5rem; }
  .reher-blog-index--bottom-half { padding-bottom: 2.25rem; }

  .reher-blog-filter {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 2rem;
    padding: 1rem;
  }
  .reher-blog-filter__actions {
    display: grid;
    grid-column: auto;
    grid-template-columns: 1fr 1fr;
  }
  .reher-blog-filter__input,
  .reher-blog-filter__select,
  .reher-blog-filter__submit,
  .reher-blog-filter__reset { min-height: 3rem; }

  .reher-blog-results { margin-top: 2.5rem; }
  .reher-blog-article__link {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 1.25rem;
  }
  .reher-blog-article__media,
  .reher-blog-article__fallback { aspect-ratio: 1; }
  .reher-blog-article__body { align-content: start; gap: 0.5rem; }
  .reher-blog-article__meta {
    display: grid;
    gap: 0.125rem;
    font-size: 0.8125rem;
  }
  .reher-blog-article__meta time::before { content: none; }
  .reher-blog-article__excerpt { -webkit-line-clamp: 3; }

  .reher-blog-pagination { justify-content: space-between; }
  .reher-blog-pagination__number,
  .reher-blog-pagination__ellipsis { display: none; }
  .reher-blog-pagination__status { display: inline; }
  .reher-blog-pagination__link { min-height: 3rem; }
}