/* ============================================================
   RIZON CLEANERS — BLOG STYLES
   Cards reuse .service-card / .card-body / .card-more from styles.css
   so the blog looks like a genuine part of the site.
   Banners use THEME variables (var(--grad), --primary, --accent),
   so they change automatically when the colour theme is switched.
   ============================================================ */

.blog-list-section{padding:10px 0 80px}

/* ---- 4 cards per row (responsive) ---- */
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1100px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr}}

.blog-card{text-decoration:none;color:inherit}

/* gradient banner replaces the service-card photo — follows the selected theme */
.bc-banner{aspect-ratio:3/2;width:100%;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;background:var(--grad)}
.bc-banner::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 20% 18%,rgba(255,255,255,.30),transparent 45%)}
.bc-banner svg{width:52px;height:52px;color:#fff;position:relative;z-index:1;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.22))}

/* subtle variety — all built from THEME variables, so they still follow the theme */
.blog-card:nth-child(4n+2) .bc-banner{background:linear-gradient(135deg,var(--primary),var(--accent))}
.blog-card:nth-child(4n+3) .bc-banner{background:linear-gradient(135deg,var(--accent),var(--primary-deep))}
.blog-card:nth-child(4n+4) .bc-banner{background:linear-gradient(160deg,var(--primary-deep),var(--primary))}

.bc-tag{align-self:flex-start;font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--primary-deep);background:var(--grad-soft);padding:5px 11px;border-radius:999px;margin-bottom:12px}

/* ---- single post view ---- */
.blog-post{display:none;padding:40px 0 80px}
.post-wrap{max-width:760px}
.post-back{display:inline-block;margin-bottom:22px;font-weight:700;color:var(--primary);text-decoration:none}
.post-back:hover{text-decoration:underline}
.post-cat{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--primary-deep);background:var(--grad-soft);padding:5px 12px;border-radius:999px;margin-bottom:16px}
.blog-post h1{font-family:'Sora',sans-serif;font-size:2rem;line-height:1.2;margin:0 0 22px;color:var(--ink)}
@media(max-width:600px){.blog-post h1{font-size:1.55rem}}

.post-body{color:#374151;font-size:1.04rem;line-height:1.75}
.post-body h2{font-family:'Sora',sans-serif;font-size:1.28rem;line-height:1.35;color:var(--ink);margin:30px 0 12px}
.post-body p{margin:0 0 16px}
.post-body ul{margin:0 0 16px;padding-left:22px}
.post-body li{margin-bottom:9px}
.post-body strong{color:var(--ink)}
.post-body em{color:#6b7280}

/* local CTA at the end of every post */
.post-cta{margin-top:34px;padding:28px 26px;border-radius:18px;background:var(--grad-soft);
  border:1px solid rgba(15,23,42,.06)}
.post-cta h3{font-family:'Sora',sans-serif;margin:0 0 8px;color:var(--ink)}
.post-cta p{margin:0 0 16px;color:#4b5563;line-height:1.65}
.post-cta-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.post-cta-links a{font-weight:700;color:var(--primary-deep);text-decoration:none;background:#fff;
  border:1px solid rgba(15,23,42,.10);padding:8px 14px;border-radius:999px;font-size:.9rem;transition:.18s}
.post-cta-links a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.post-cta-links a.btn{background:var(--primary);color:#fff;border-color:var(--primary)}
.post-cta-links a.btn:hover{filter:brightness(.95)}

/* ---- post dates (weekly-rolling in template; fixed real dates for clients) ---- */
.bc-date{display:block;font-size:.76rem;font-weight:700;color:#94a3b8;margin:-2px 0 10px}
.post-meta{color:#94a3b8;font-size:.9rem;font-weight:600;margin:0 0 22px}

/* ---- "Read next" related posts (3 cards under each article) ---- */
.related{margin-top:46px;border-top:1px solid rgba(15,23,42,.08);padding-top:30px}
.related-title{font-family:'Sora',sans-serif;font-size:1.3rem;color:var(--ink);margin:0 0 20px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:640px){.related-grid{grid-template-columns:1fr}}