/* ==========================================================
   SOU VALORA — pages/blog.css
   Listagem de blog e layout de artigo
   ========================================================== */

.blog-section { padding: 60px 64px; background: var(--cream); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

/* ---------- CARD DE BLOG ---------- */
.blog-card {
  background: var(--white); cursor: pointer;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.blog-card:hover .blog-thumb img { transform: scale(1.05); }
.blog-thumb { height: 220px; overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.blog-body { padding: 28px; }
.blog-meta { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.blog-cat { font-size: 0.62rem; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
.blog-date { font-size: 0.75rem; color: var(--gray-light); display: flex; align-items: center; gap: 5px; }
.blog-date i { font-size: 0.65rem; color: var(--gray); }
.blog-title { font-family: var(--ff-serif); font-size: 1.2rem; color: var(--navy); line-height: 1.4; margin-bottom: 12px; font-weight: 500; }
.blog-excerpt { font-size: 0.855rem; color: var(--gray); line-height: 1.8; font-weight: 300; }
.blog-read-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; font-size: 0.78rem; color: var(--gold); font-weight: 600; letter-spacing: 0.06em; transition: gap 0.2s; }
.blog-card:hover .blog-read-more { gap: 12px; }

/* ---------- CARD DESTAQUE DO BLOG ---------- */
.blog-featured {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--white); border: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 56px; overflow: hidden;
  transition: box-shadow 0.3s;
}
.blog-featured:hover { box-shadow: var(--shadow-lg); }
.blog-featured-img { overflow: hidden; min-height: 360px; }
.blog-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.blog-featured:hover .blog-featured-img img { transform: scale(1.04); }
.blog-featured-body { padding: 56px; display: flex; flex-direction: column; justify-content: center; }
.blog-featured-body .blog-title { font-size: 1.8rem; margin-bottom: 16px; }
.blog-featured-body .blog-excerpt { font-size: 0.93rem; margin-bottom: 28px; }

/* ---------- ARTIGO INDIVIDUAL ---------- */
.artigo-layout {
  padding: 60px 64px; background: var(--cream);
  display: grid; grid-template-columns: 1fr 320px;
  gap: 52px; align-items: start;
}
.artigo-main {}
.artigo-hero-img { width: 100%; height: 420px; object-fit: cover; margin-bottom: 48px; }
.artigo-meta { display: flex; gap: 18px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
.artigo-cat { font-size: 0.65rem; color: var(--gold); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; background: rgba(201,169,110,0.1); padding: 5px 12px; border: 1px solid var(--border-gold); }
.artigo-date { font-size: 0.78rem; color: var(--gray); display: flex; align-items: center; gap: 6px; }
.artigo-autor { font-size: 0.78rem; color: var(--gray); display: flex; align-items: center; gap: 6px; }
.artigo-title { font-family: var(--ff-display); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 400; color: var(--navy); line-height: 1.15; margin-bottom: 32px; }
.artigo-content { font-size: 0.95rem; color: #444; line-height: 2; font-weight: 300; }
.artigo-content p { margin-bottom: 22px; }
.artigo-content h2 { font-family: var(--ff-serif); font-size: 1.5rem; color: var(--navy); font-weight: 500; margin: 36px 0 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.07); }
.artigo-content h3 { font-family: var(--ff-serif); font-size: 1.2rem; color: var(--navy); font-weight: 500; margin: 28px 0 12px; }
.artigo-content ul, .artigo-content ol { padding-left: 22px; margin-bottom: 22px; }
.artigo-content li { margin-bottom: 8px; }
.artigo-cta { margin-top: 56px; background: var(--navy); padding: 40px; text-align: center; border: 1px solid var(--border-gold); }
.artigo-cta p { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-bottom: 20px; }

/* Sidebar do artigo */
.artigo-sidebar {}
.artigo-sidebar-box { background: var(--white); padding: 28px; border: 1px solid rgba(0,0,0,0.08); margin-bottom: 24px; }
.artigo-sidebar-box h4 { font-size: 0.65rem; color: var(--gold); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; }
.artigo-relacionado { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.artigo-relacionado:last-child { border-bottom: none; padding-bottom: 0; }
.artigo-relacionado img { width: 72px; height: 54px; object-fit: cover; flex-shrink: 0; }
.artigo-relacionado-title { font-family: var(--ff-serif); font-size: 0.9rem; color: var(--navy); line-height: 1.4; }
.artigo-relacionado-date { font-size: 0.72rem; color: var(--gray); margin-top: 4px; }

/* ===================== RESPONSIVO ===================== */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .blog-section { padding: 40px 24px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-img { min-height: 240px; }
  .blog-featured-body { padding: 32px 24px; }
  .blog-featured-body .blog-title { font-size: 1.55rem; }
  .artigo-layout { grid-template-columns: 1fr; padding: 32px 24px; gap: 36px; }
  .artigo-hero-img { height: 280px; margin-bottom: 32px; }
}

@media (max-width: 640px) {
  .blog-section { padding: 32px 20px; }
  .blog-thumb { height: 200px; }
  .blog-body { padding: 22px; }
  .blog-title { font-size: 1.1rem; }
  .blog-featured-body { padding: 28px 20px; }
  .blog-featured-body .blog-title { font-size: 1.35rem; }

  .artigo-layout { padding: 24px 20px; }
  .artigo-hero-img { height: 220px; margin-bottom: 28px; border-radius: 0; }
  .artigo-meta { gap: 12px; margin-bottom: 20px; }
  .artigo-content { font-size: 0.95rem; line-height: 1.85; }
  .artigo-content h2 { font-size: 1.3rem; margin: 28px 0 12px; }
  .artigo-content h3 { font-size: 1.1rem; margin: 22px 0 10px; }
  .artigo-cta { padding: 28px 20px; margin-top: 36px; }

  .artigo-sidebar-box { padding: 22px 20px; margin-bottom: 16px; }
  .artigo-relacionado img { width: 64px; height: 48px; }
  .artigo-relacionado-title { font-size: 0.85rem; }
}