/* css/pages/blog-index.css — Guides library page.
 * Loaded after styles.css from blog/index.html. Keeps every card visible
 * without JavaScript (cards hide only via the [hidden] attribute, which the
 * filter script sets) and keeps the filter controls at least 44px tall.
 */

/* Filter controls: minimum 44px hit area. The inline block on the page sets
 * padding and font only, so min-height applies without a fight. */
.blog-filter-pills button {
  min-height: 44px;
}

.blog-search-box input {
  min-height: 44px;
}

.empty-blog .btn {
  min-height: 44px;
}

/* Cards are visible by default; hiding happens only through [hidden]. */
.post-card[hidden] {
  display: none;
}

/* Start here: one question, one shelf. */
.start-here {
  padding: 32px 0 8px;
}

.start-here h2 {
  margin: 0 0 8px;
}

.start-here-intro {
  color: var(--muted);
  max-width: 68ch;
  line-height: 1.55;
  margin: 0 0 20px;
}

.start-here-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding-bottom: 16px;
}

@media (min-width: 760px) {
  .start-here-groups {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .start-here-groups {
    grid-template-columns: repeat(3, 1fr);
  }
}

.start-group {
  padding: 20px;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.start-group h3 {
  font-size: 1.05rem;
  margin: 0 0 6px;
}

.start-group .group-count {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.9rem;
}

.start-group p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 10px;
}

.start-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.start-links li {
  border-top: 1px dashed var(--border);
}

.start-links a {
  display: block;
  padding: 7px 0;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--text);
}

.start-links a:hover {
  color: var(--brand-text, #047857);
  text-decoration: underline;
}