/* ═══════════════════════════════════════════
   Chanlify Suisse — blog chrome (listing + article shell)
   Adapted from the .fr landing blog.css (apps/chanlify/landing/css/blog.css),
   trimmed to what the .ch shell renders: article typography, FAQ, sources,
   cards etc. come from guide.css (loaded alongside — the article layout and
   /blog both load guide.css + blog.css). Class namespace: .b-* (same
   no-collision rule as guide.css's .g-*).
   ═══════════════════════════════════════════ */

/* Breadcrumb (inside .g-hero on both the listing and articles) */
.b-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 500; color: var(--text-3);
  margin-bottom: 18px;
}
.b-crumbs a { color: var(--text-3); text-decoration: none; transition: color 0.15s; }
.b-crumbs a:hover { color: var(--text-2); }
.b-crumb-sep { color: var(--border-2); }
.b-crumbs [aria-current="page"] {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch;
}

/* Article meta row (date · reading time · author) */
.b-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 16px;
  font-size: 0.8125rem; font-weight: 500; color: var(--text-3);
}
.b-meta time { color: inherit; }
.b-meta-sep { color: var(--border-2); }

/* Standfirst under the article/listing header */
.b-lead {
  margin: 18px 0 0;
  max-width: 640px;
  font-size: 1.0625rem; line-height: 1.7; color: var(--text-2);
}

/* Listing */
.b-wrap { max-width: 780px; margin: 0 auto; padding: 32px 24px 72px; }
.b-grid { display: flex; flex-direction: column; gap: 16px; }
.b-card {
  display: block;
  padding: 26px 28px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none !important;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.b-card:hover { border-color: var(--accent-mid); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); }
.b-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.b-card-tag {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-light);
  border-radius: 5px; padding: 2px 8px;
}
.b-card-date { font-size: 0.75rem; font-weight: 500; color: var(--text-3); }
.b-card h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3;
  color: var(--text); margin: 0 0 10px;
}
.b-card p { font-size: 0.9375rem; line-height: 1.65; color: var(--text-2); margin: 0 0 14px; }
.b-card-read { font-size: 0.875rem; font-weight: 600; color: var(--accent-dark); }
.b-card:hover .b-card-read { text-decoration: underline; text-underline-offset: 3px; }

/* Empty state — a plain sentence, no card chrome */
.b-empty { font-size: 0.9825rem; line-height: 1.75; color: var(--text-2); margin: 8px 0 0; }

/* Related links slot ("À lire ensuite"), end of an article */
.b-related { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); }
.b-related-heading {
  font-size: 0.6875rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 16px;
}
.b-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
}
.b-rel-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 600; line-height: 1.45;
  color: var(--text-2);
  text-decoration: none !important;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.b-rel-card:hover { border-color: var(--accent); color: var(--accent-dark); }
.b-rel-card svg { flex-shrink: 0; stroke: currentColor; }

@media (max-width: 640px) {
  .b-wrap { padding-bottom: 56px; }
  .b-card { padding: 22px 20px; }
}