/* ═══════════════════════════════════════════════════
   YUKICAR — BLOG STYLES
   ═══════════════════════════════════════════════════ */

/* Blog hero */
.blog-hero{
  position:relative;padding:9rem 0 4rem;
  background:linear-gradient(135deg,var(--navy-dark),var(--navy-mid));
  overflow:hidden;text-align:center;
}
.blog-hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 60%,rgba(245,175,2,.08) 0%,transparent 60%);
}
.blog-hero-content{position:relative;color:var(--white)}
.blog-hero-content h1{color:var(--white);margin:.75rem 0 .5rem}
.blog-hero-content p{color:rgba(255,255,255,.7);font-size:1.1rem}

/* Blog listing */
.blog-listing-section{padding:4rem 0 5rem}

.blog-filter-bar{
  display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.5rem;
}

.blog-listing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.75rem;
  margin-bottom:3rem;
}
.blog-card--lg{grid-column:1/-1;display:grid;grid-template-columns:1.4fr 1fr;gap:0;border-radius:var(--radius-lg)}
.blog-card--lg .blog-img-wrap{height:100%;min-height:260px;border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
.blog-card--lg .blog-content{padding:2.5rem 2rem}
.blog-card--lg h2{font-size:1.4rem}

/* Pagination */
.blog-pagination{display:flex;justify-content:center;gap:.6rem;align-items:center}
.pagination-btn{
  width:40px;height:40px;border-radius:50%;
  font-size:.9rem;font-weight:600;border:2px solid var(--gray-100);
  color:var(--gray-500);transition:var(--transition);
}
.pagination-btn.active,.pagination-btn:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
.pagination-next{width:auto;padding:0 1.1rem;border-radius:var(--radius-full);display:flex;align-items:center;gap:.4rem}

/* Real blog images */
.blog-img-wrap{overflow:hidden}
.blog-img-real{
  width:100%;height:100%;
  object-fit:cover;display:block;
  min-height:180px;
  transition:transform .35s ease;
}
.blog-card:hover .blog-img-real{transform:scale(1.04)}
.blog-card--lg .blog-img-real{min-height:260px}

/* Breadcrumb on blog post pages */
.blog-breadcrumb{
  display:flex;align-items:center;gap:.4rem;
  font-size:.85rem;color:rgba(255,255,255,.55);
  margin-bottom:1rem;justify-content:center;
}
.blog-breadcrumb a{color:rgba(255,255,255,.6);text-decoration:none}
.blog-breadcrumb a:hover{color:var(--gold)}
.blog-breadcrumb .sep{opacity:.4}

/* Blog post page */
.blog-post-wrap{max-width:780px;margin:0 auto;padding:2rem 1.5rem 5rem}
.blog-post-header{padding:8rem 0 3rem;text-align:center;
  background:linear-gradient(135deg,var(--navy-dark),var(--navy-mid));color:var(--white)}
.blog-post-header h1{color:var(--white);max-width:700px;margin:1rem auto}
.blog-post-header .blog-meta{justify-content:center;color:rgba(255,255,255,.6);margin-top:1rem}
.blog-post-body{font-size:1.05rem;line-height:1.8;color:var(--gray-700)}
.blog-post-body h2{font-size:1.5rem;color:var(--navy);margin:2.5rem 0 1rem}
.blog-post-body p{margin-bottom:1.25rem}
.blog-post-body ul{padding-left:1.5rem;margin-bottom:1.25rem}
.blog-post-body li{margin-bottom:.5rem}
.blog-post-cta-box{
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  border-radius:var(--radius-lg);padding:2.5rem;text-align:center;
  color:var(--white);margin:3rem 0;
}
.blog-post-cta-box h3{color:var(--white);margin-bottom:.75rem}
.blog-post-cta-box p{color:rgba(255,255,255,.75);margin-bottom:1.5rem}

@media(max-width:900px){
  .blog-listing-grid{grid-template-columns:1fr 1fr}
  .blog-card--lg{grid-column:1/-1;grid-template-columns:1fr}
  .blog-card--lg .blog-img-wrap{border-radius:var(--radius-md) var(--radius-md) 0 0;min-height:200px}
}
@media(max-width:600px){
  .blog-listing-grid{grid-template-columns:1fr}
  .blog-card--lg{grid-template-columns:1fr}
}