/* ============================================================
 * blog-redesign.css — public blog index (smarch.se/blog/)
 *
 * Loads AFTER static/css/smarch3.css. Every rule is scoped to
 * .blog-index, a new class on the wrapping <section> of
 * templates/public/blog_list.html, so nothing else on the site
 * can be affected — including templates/blog/article_list.html,
 * which declares some of the same class names.
 *
 * Article pages are untouched. The only change there is the
 * featured image itself (1600 x 900 PNG).
 * ============================================================ */

/* --- 1. FILTER ROW — one hairline band, no navy button ------ */
.blog-index .blog-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  margin: 22px 0 40px;
  padding: 12px 0;
  border-top: 1px solid var(--s3-border);
  border-bottom: 1px solid var(--s3-border);
}
.blog-index .blog-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.blog-index .blog-cats a { font-size: 0.88rem; font-weight: 500; color: var(--s3-text-muted); padding: 5px 0; }
.blog-index .blog-cats a:hover { color: var(--s3-navy); }
.blog-index .blog-cats a.on { color: var(--s3-navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--s3-gold); }

.blog-index .blog-search { position: relative; flex: 0 0 230px; }
.blog-index .blog-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--s3-text-faint); pointer-events: none;
}
/* smarch3.css sets `.blog-filter .s3-input { width: auto }` for the old
   three-across row; the field is now nested in .blog-search, so it has to
   fill that 230px slot again. */
.blog-index .blog-search .s3-input { width: 100%; padding: 8px 12px 8px 34px; font-size: 0.86rem; }

/* the submit button stays for keyboard/no-JS, visually hidden */
.blog-index .blog-filter [type="submit"] {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.blog-index .blog-filter [type="submit"]:focus-visible {
  position: static; width: auto; height: auto; clip: auto;
}

@media (max-width: 760px) {
  .blog-index .blog-filter { flex-direction: column; align-items: stretch; gap: 12px; }
  .blog-index .blog-cats { gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .blog-index .blog-search { flex: 1 1 auto; }
}

/* --- 2. SECTION LABEL — caps + gold stub + hairline --------- */
.blog-index .blog-seclabel { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.blog-index .blog-seclabel .lbl {
  font-size: var(--s3-fs-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--s3-navy);
}
.blog-index .blog-seclabel .rule { width: 38px; height: 2px; background: var(--s3-gold); flex-shrink: 0; }
.blog-index .blog-seclabel .ln { flex: 1; height: 1px; background: var(--s3-border); }
.blog-index .blog-seclabel .n { font-family: var(--s3-font-accent); font-style: italic; color: var(--s3-text-faint); }

/* --- 3. LEAD ARTICLE ---------------------------------------- */
.blog-index .blog-featured { margin-bottom: 56px; }
.blog-index .blog-featured-img { min-height: 0; }
.blog-index .blog-featured-body { padding: 38px 36px; justify-content: center; gap: 13px; }
.blog-index .blog-featured-body h2 {
  font-size: clamp(1.5rem, 2.2vw, 1.86rem);
  line-height: 1.18; letter-spacing: -0.012em; text-wrap: pretty;
}
.blog-index .blog-featured-body .excerpt { font-size: 0.98rem; line-height: 1.62; text-wrap: pretty; }

/* --- 4. CARDS ----------------------------------------------- */
.blog-index .blog-card-body { padding: 20px 22px 18px; gap: 9px; }
.blog-index .blog-card-body h3 { font-size: 1.18rem; line-height: 1.24; text-wrap: pretty; }
.blog-index .blog-card-body .excerpt { font-size: 0.9rem; line-height: 1.58; text-wrap: pretty; }
.blog-index .blog-card .blog-meta { font-size: 0.78rem; gap: 6px 9px; }

/* six amber chips in a row carry no information — flatten to a label.
   The chip on the LEAD card keeps its colour (it is alone there). */
.blog-index .blog-card .cat-chip {
  background: none; border: 0; padding: 0; border-radius: 0;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--s3-text-faint);
}

@media (max-width: 1000px) { .blog-index .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  .blog-index .blog-grid { grid-template-columns: 1fr; }
  .blog-index .blog-featured { grid-template-columns: 1fr; }
  .blog-index .blog-featured-img { aspect-ratio: 16 / 9; min-height: 0; }
  .blog-index .blog-featured-body { padding: 26px 24px; }
}

/* --- 5. THE "WHAT THIS IS" PANEL, MOVED BELOW THE GRID ------ */
/* same copy, same buttons — it just stops standing between the
   reader and the articles. */
.blog-index .blog-about {
  margin-top: 56px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 36px; text-align: left;
}
.blog-index .blog-about p {
  margin: 0; font-size: 0.95rem; line-height: 1.65;
  color: var(--s3-text-muted); max-width: 640px; text-wrap: pretty;
}
.blog-index .blog-about .chip-row { flex-shrink: 0; margin: 0; }
@media (max-width: 900px) { .blog-index .blog-about { flex-direction: column; align-items: flex-start; } }

/* --- 6. POPULAR TOPICS -------------------------------------- */
.blog-index .blog-topics { margin-top: 52px; }
.blog-index .blog-topics .s3-chip {
  background: var(--s3-surface); color: var(--s3-text-muted);
  font-weight: 500; font-size: 0.82rem;
}
.blog-index .blog-topics .s3-chip:hover { border-color: var(--s3-navy); color: var(--s3-navy); }
.blog-index .blog-topics .s3-chip .n { color: #B4B8C0; }

/* --- 7. PAGE HEAD ------------------------------------------- */
/* only breathing room; type is unchanged */
.page-head + .blog-index { padding-top: 26px; }