/* ============================================================
   Home Pro Guides — blog.css
   Grid de posts + artículo individual.
   ============================================================ */

.blog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card{
  display:flex; flex-direction:column; background:#fff; border-radius: 16px; overflow:hidden;
  box-shadow: 0 20px 50px -30px rgba(12,49,102,0.25); border: 1px solid rgba(12,49,102,0.06);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .blog-card:hover{ transform: translateY(-4px); box-shadow: 0 26px 60px -28px rgba(12,49,102,0.32); }
}
.blog-card-img{ aspect-ratio: 16/10; overflow:hidden; }
.blog-card-img img{ width:100%; height:100%; object-fit:cover; transition: transform 420ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .blog-card:hover .blog-card-img img{ transform: scale(1.05); } }
.blog-card-body{ padding: 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.blog-card-tag{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--primary); }
.blog-card-body h3{ font-size: 21px; line-height:1.25; margin:0; }
.blog-card-body p{ color: var(--text-dark-muted); font-size:14.5px; margin:0; flex:1; }
.blog-card-meta{ font-size:12.5px; color: var(--text-dark-muted); display:flex; gap:10px; align-items:center; margin-top:4px; }
.blog-card-meta::before{ content:none; }

@media (max-width: 980px){ .blog-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .blog-grid{ grid-template-columns: 1fr; } }

/* ---------- Article ---------- */
.article-hero{ position:relative; height: 56vh; min-height:380px; overflow:hidden; }
.article-hero img{ width:100%; height:100%; object-fit:cover; }
.article-hero::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,27,51,.65) 0%, rgba(7,27,51,.15) 45%, rgba(7,27,51,.75) 100%); }
.article-hero-content{ position:absolute; left:0; right:0; bottom:0; padding: 0 0 48px; }
.article-hero-content .container{ max-width: 780px; }
/* Same contrast safety net as the home tour: guarantee legibility over any
   photo content rather than hoping the gradient alone is always enough. */
.article-hero-content h1{ text-shadow: 0 2px 24px rgba(7,27,51,0.5); }
.article-hero-content .eyebrow{ text-shadow: 0 1px 10px rgba(7,27,51,0.5); }

.article-body{ max-width: 720px; margin: 0 auto; padding: 64px 28px 100px; }
.article-body h2{ font-size: 28px; margin-top: 2.2em; }
.article-body p{ font-size: 17.5px; line-height: 1.75; color: var(--text-dark); }
.article-body ul{ padding-left: 1.3em; font-size: 17px; line-height:1.8; }
.article-body li{ margin-bottom: .5em; }
.article-body blockquote{
  margin: 2em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold);
  font-family: var(--font-head); font-size: 22px; font-style: italic; color: var(--primary);
}
.article-meta{ display:flex; gap:14px; align-items:center; color: var(--text-muted); font-size:13.5px; margin-bottom: 18px; }
.article-cta{
  margin: 3em 0 0; padding: 32px; border-radius: 16px; background: var(--primary); color: var(--text);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.article-cta h4{ margin:0 0 4px; font-size:20px; }
.article-cta p{ margin:0; color: var(--text-muted); font-size:14.5px; }
.related-posts{ background: var(--bg-light); padding: 80px 0; }