/* =========================================================
   She's Digital · Blog
   ========================================================= */

/* ---- Artículo ---- */
.bl-article { padding-block: var(--section); }

.bl-header { margin-bottom: clamp(32px, 5vw, 56px); }
.bl-eyebrow { margin-bottom: 12px; }
.bl-title {
  font-family: var(--display); font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 500; line-height: 1.08; letter-spacing: -.04em;
  max-width: 22ch; margin-bottom: 16px;
}
.bl-meta { font-size: var(--fs-6); color: var(--ink-2); }

/* Cuerpo editorial */
.bl-body { max-width: 68ch; }
.bl-body p { color: var(--ink-2); line-height: 1.75; margin-bottom: 20px; font-size: var(--fs-4); }
.bl-body p:last-child { margin-bottom: 0; }
.bl-body h2 {
  font-family: var(--display); font-size: var(--fs-3);
  font-weight: 500; letter-spacing: -.025em; line-height: 1.2;
  margin-top: clamp(32px, 4vw, 48px); margin-bottom: 12px; color: var(--ink);
}
.bl-body ul, .bl-body ol {
  padding-left: 1.4em; margin-bottom: 20px; color: var(--ink-2);
  font-size: var(--fs-4); line-height: 1.7;
}
.bl-body li { margin-bottom: 8px; }
.bl-body strong { color: var(--ink); font-weight: 600; }
.bl-body a { color: var(--ink); text-underline-offset: 3px; }
.bl-body a:hover { color: var(--accent); }

/* CTA inline al pie del artículo */
.bl-cta-inline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.bl-cta-inline > p { font-size: var(--fs-4); font-weight: 500; color: var(--ink); flex: 1 1 100%; }
@media (min-width: 600px) { .bl-cta-inline > p { flex: none; } }

/* ---- Índice del blog ---- */
.bl-listing { padding-block: var(--section); }

.bl-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px;
}

.bl-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--card-r);
  background: var(--bg); text-decoration: none; color: var(--ink);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.bl-card:hover, .bl-card:focus-visible {
  border-color: var(--accent); box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transform: translateY(-2px);
}
.bl-card__cat { font-size: var(--fs-6); margin-bottom: 4px; }
.bl-card__title {
  font-family: var(--display); font-size: var(--fs-3);
  font-weight: 500; letter-spacing: -.025em; line-height: 1.2;
  flex: 1; text-wrap: balance;
}
.bl-card__meta { font-size: var(--fs-6); color: var(--ink-2); }
.bl-card__arrow { margin-top: 8px; }
.bl-card__arrow svg {
  width: 20px; height: 20px; stroke: var(--accent);
  stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;
}