.btn {
  display: inline-block;
  padding: var(--size-2) var(--size-4);
  background: var(--clce-accent);
  color: var(--clce-paper);
  border-radius: var(--radius-2);
  text-decoration: none;
  font-weight: var(--font-weight-6);
}
.btn:hover { background: var(--clce-accent-hover); color: var(--clce-paper); }

.card {
  background: var(--clce-paper);
  border: 1px solid var(--clce-rule);
  border-radius: var(--radius-3);
  padding: var(--size-5);
}

.entry-meta {
  color: var(--clce-fg-muted);
  font-size: var(--font-size-1);
}

.auth-card {
  max-width: 28rem;
  margin: var(--size-7) auto;
  padding: var(--size-6);
  background: var(--clce-paper);
  border: 1px solid var(--clce-rule);
  border-radius: var(--radius-3);
}

.auth-card h1 { margin-top: 0; }

.auth-card .field { margin-bottom: var(--size-4); }
.auth-card label { display: block; font-weight: var(--font-weight-6); margin-bottom: var(--size-1); }
.auth-card input[type="email"],
.auth-card input[type="password"] {
  width: 100%;
  padding: var(--size-2);
  border: 1px solid var(--clce-rule);
  border-radius: var(--radius-2);
  font: inherit;
}
.auth-card .field-checkbox label { font-weight: var(--font-weight-4); }
.auth-card .field-checkbox input { margin-right: var(--size-2); }

.auth-errors {
  background: var(--clce-burgundy-1);
  border-left: 3px solid var(--clce-burgundy-7);
  padding: var(--size-3);
  margin-bottom: var(--size-4);
  border-radius: var(--radius-2);
}
.auth-errors ul { margin: 0; padding-left: var(--size-4); }

.auth-help {
  margin-top: var(--size-5);
  font-size: var(--font-size-1);
  color: var(--clce-fg-muted);
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--size-4);
  list-style: none;
  padding: 0;
}

.member-card {
  background: var(--clce-paper);
  border: 1px solid var(--clce-rule);
  border-radius: var(--radius-3);
  padding: var(--size-4);
}

.member-card h3 { margin: 0; font-size: var(--font-size-3); }
.member-card .member-names { margin: var(--size-1) 0 var(--size-2); color: var(--clce-fg); font-size: var(--font-size-1); }
.member-card .member-meta { color: var(--clce-fg-muted); font-size: var(--font-size-1); margin: 0; }
.member-names-large { color: var(--clce-fg); font-size: var(--font-size-3); margin: 0 0 var(--size-4); }

.member-detail .member-photo {
  width: 12rem; height: 12rem; object-fit: cover;
  border-radius: var(--radius-round);
  margin-bottom: var(--size-4);
}
.member-contact { margin-top: var(--size-4); }
.member-contact dt { font-weight: var(--font-weight-6); margin-top: var(--size-3); }
.member-contact dd { margin: 0 0 var(--size-2); }

.sermon-audio { width: 100%; margin-block: var(--size-4); }
.sermon .prose, .statement .prose, .resource .prose { margin-top: var(--size-5); }

/* Image layouts within markdown content. */

.image-hero {
  margin: 0 0 var(--size-5);
}
.image-hero img {
  width: 100%;
  max-height: 28rem;
  object-fit: cover;
}

.image-right,
.image-left {
  max-width: 18rem;
  margin: 0 0 var(--size-3);
}
.image-right { float: right; margin-left: var(--size-5); }
.image-left { float: left; margin-right: var(--size-5); }

.image-right + h2,
.image-left + h2,
.image-right + h3,
.image-left + h3 { margin-top: 0; }

@media (max-width: 640px) {
  .image-right, .image-left {
    float: none;
    margin: var(--size-4) auto;
    max-width: 100%;
  }
}

.image-grid {
  display: grid;
  gap: var(--size-3);
  margin-block: var(--size-4);
}
.image-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-2);
  aspect-ratio: 4 / 3;
}
.image-grid-2 { grid-template-columns: repeat(2, 1fr); }
.image-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 640px) {
  .image-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Header search */
.header-search input {
  padding: var(--size-1) var(--size-2);
  border: 1px solid var(--clce-rule);
  border-radius: var(--radius-2);
  font: inherit;
  font-size: var(--font-size-0);
  background: var(--clce-bg);
}

/* Full-page search */
.search-form {
  display: flex;
  gap: var(--size-2);
  margin-block: var(--size-4);
}
.search-form input[type="search"] {
  flex: 1;
  padding: var(--size-2);
  border: 1px solid var(--clce-rule);
  border-radius: var(--radius-2);
  font: inherit;
  background: var(--clce-paper);
}
.search-results { list-style: none; padding: 0; }
.search-result {
  padding-block: var(--size-3);
  border-bottom: 1px solid var(--clce-rule);
}
.search-result:last-child { border-bottom: 0; }
.search-result h3 { margin: 0 0 var(--size-1); font-size: var(--font-size-3); }
.search-result .entry-meta { margin: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.sermon-list { list-style: none; padding: 0; }
.sermon-list-item {
  padding-block: var(--size-3);
  border-bottom: 1px solid var(--clce-rule);
}
.sermon-list-item:last-child { border-bottom: 0; }
.sermon-list-item h3 { margin: 0 0 var(--size-1); font-size: var(--font-size-3); }
.sermon-list-item .entry-meta { margin: 0; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-3);
  margin-top: var(--size-6);
  padding-block: var(--size-3);
  border-top: 1px solid var(--clce-rule);
  font-size: var(--font-size-1);
}

.pagination-prev,
.pagination-next {
  color: var(--clce-link);
  text-decoration: none;
  font-weight: var(--font-weight-6);
  white-space: nowrap;
}
.pagination-prev:hover,
.pagination-next:hover { color: var(--clce-accent-hover); text-decoration: underline; }

.pagination-prev.is-disabled,
.pagination-next.is-disabled {
  color: var(--clce-fg-muted);
  pointer-events: none;
}

.pagination-pages {
  display: flex;
  gap: var(--size-2);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.pagination-page {
  list-style: none;
}

.pagination-page a {
  display: inline-block;
  min-width: 2rem;
  padding: var(--size-1) var(--size-2);
  text-align: center;
  text-decoration: none;
  color: var(--clce-link);
  border-radius: var(--radius-2);
}
.pagination-page a:hover {
  background: var(--clce-burgundy-1);
  color: var(--clce-accent-hover);
}

.pagination-page.is-current {
  display: inline-block;
  min-width: 2rem;
  padding: var(--size-1) var(--size-2);
  text-align: center;
  background: var(--clce-accent);
  color: var(--clce-paper);
  border-radius: var(--radius-2);
  font-weight: var(--font-weight-6);
}

.pagination-gap {
  padding: 0 var(--size-1);
  color: var(--clce-fg-muted);
}

@media (max-width: 600px) {
  .pagination-pages { display: none; }
}

.resource-section { margin-block: var(--size-6); }
.resource-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--clce-rule);
  padding-bottom: var(--size-2);
  margin-bottom: var(--size-3);
}
.resource-section-head h2 { margin: 0; font-size: var(--font-size-4); }
.resource-view-all { font-size: var(--font-size-1); }

.resource-list { list-style: none; padding: 0; }
.resource-list li { padding-block: var(--size-2); }