/*
 * sf-blog-posts — generic blog / insights block styles.
 *
 * The canonical members (blog-posts-salesfision, home-insights-salesfision)
 * shipped NO own style.css; their .blog-* / .usecases-* / .blog-tag /
 * .section-badge / .btn-primary rules live in the shared site CSS bundle. The
 * class names below are kept IDENTICAL so that bundle keeps binding. These
 * rules only provide self-contained fallback defaults (layout + spacing +
 * brand colors via CSS custom properties); when the shared bundle is present
 * it layers on top without conflict.
 *
 * Override the custom properties per-site instead of editing rules.
 */
[data-sf-block="sf-blog-posts"] {
  --sf-blog-accent: #e63946;
  --sf-blog-bg: #111;
  --sf-blog-card-bg: #161616;
  --sf-blog-text: #fff;
  --sf-blog-muted: #888;
  --sf-blog-border: #222;
  --sf-blog-radius: 16px;
}

/* ── archive layout ─────────────────────────────────────────────── */
[data-sf-block="sf-blog-posts"] .blog-section {
  background: var(--sf-blog-bg);
  color: var(--sf-blog-text);
  padding: 4rem 1.5rem;
}
[data-sf-block="sf-blog-posts"] .blog-inner {
  max-width: 1200px;
  margin: 0 auto;
}

[data-sf-block="sf-blog-posts"] .blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
[data-sf-block="sf-blog-posts"] .filter-btn {
  background: transparent;
  color: var(--sf-blog-muted);
  border: 1px solid var(--sf-blog-border);
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  font: inherit;
  cursor: pointer;
}
[data-sf-block="sf-blog-posts"] .filter-btn.active,
[data-sf-block="sf-blog-posts"] .filter-btn:hover {
  background: var(--sf-blog-accent);
  border-color: var(--sf-blog-accent);
  color: var(--sf-blog-text);
}

[data-sf-block="sf-blog-posts"] .blog-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  background: var(--sf-blog-card-bg);
  border: 1px solid var(--sf-blog-border);
  border-radius: var(--sf-blog-radius);
  overflow: hidden;
  margin-bottom: 3rem;
}
[data-sf-block="sf-blog-posts"] .blog-featured-img img,
[data-sf-block="sf-blog-posts"] .blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-sf-block="sf-blog-posts"] .blog-card-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  background: var(--sf-blog-border);
  font-size: 2.5rem;
}
[data-sf-block="sf-blog-posts"] .blog-featured-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
[data-sf-block="sf-blog-posts"] .featured-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--sf-blog-accent);
  margin-bottom: 0.75rem;
}

[data-sf-block="sf-blog-posts"] .blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
[data-sf-block="sf-blog-posts"] .blog-card {
  background: var(--sf-blog-card-bg);
  border: 1px solid var(--sf-blog-border);
  border-radius: var(--sf-blog-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
[data-sf-block="sf-blog-posts"] .blog-card-body {
  padding: 1.5rem;
}

[data-sf-block="sf-blog-posts"] .blog-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
}
[data-sf-block="sf-blog-posts"] .blog-tag {
  background: var(--sf-blog-accent);
  color: var(--sf-blog-text);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
}
[data-sf-block="sf-blog-posts"] .blog-date {
  color: var(--sf-blog-muted);
}
[data-sf-block="sf-blog-posts"] .blog-read-more {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--sf-blog-accent);
  font-weight: 600;
}

/* ── teaser layout ──────────────────────────────────────────────── */
[data-sf-block="sf-blog-posts"] .usecases-section {
  position: relative;
  background: var(--sf-blog-bg);
  color: var(--sf-blog-text);
  padding: 4rem 1.5rem;
  overflow: hidden;
}
[data-sf-block="sf-blog-posts"] .page-deco {
  position: absolute;
  pointer-events: none;
  opacity: 0.6;
}
[data-sf-block="sf-blog-posts"] .usecases-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
[data-sf-block="sf-blog-posts"] .section-badge {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--sf-blog-accent);
  margin-bottom: 1rem;
}
[data-sf-block="sf-blog-posts"] .usecases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
[data-sf-block="sf-blog-posts"] .usecase-card {
  background: var(--sf-blog-card-bg);
  border: 1px solid var(--sf-blog-border);
  border-radius: var(--sf-blog-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
[data-sf-block="sf-blog-posts"] .usecase-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-sf-block="sf-blog-posts"] .usecase-card-body {
  padding: 1.5rem;
}
[data-sf-block="sf-blog-posts"] .usecases-see-more {
  text-align: center;
  margin-top: 2.5rem;
}
[data-sf-block="sf-blog-posts"] .btn-primary {
  display: inline-block;
  background: var(--sf-blog-accent);
  color: var(--sf-blog-text);
  border-radius: 999px;
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 768px) {
  [data-sf-block="sf-blog-posts"] .blog-featured {
    grid-template-columns: 1fr;
  }
}