/* ============================================================
   ADDITIVE MODULE — Blog + FAQ components only.
   Reuses tokens/patterns from style.css. Does not alter
   any existing rule, section, color, spacing or animation.
   ============================================================ */

/* Blog filter pills (self-contained, page-scoped) */
.blog-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
.blog-filter{padding:10px 18px;border-radius:100px;border:1px solid var(--border-soft);background:rgba(255,255,255,.03);font-size:13px;font-weight:700;color:var(--text-muted);transition:.3s var(--ease);}
.blog-filter.active{background:linear-gradient(135deg,var(--primary-2),var(--primary));color:#fff;border-color:transparent;}

/* Blog grid + card */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media (max-width:1024px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{overflow:hidden;transition:transform .45s var(--ease),border-color .4s;display:flex;flex-direction:column;}
.blog-card:hover{transform:translateY(-8px);border-color:rgba(212,0,0,.4);}
.blog-card .svc-media{aspect-ratio:16/10;}
.blog-card-body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1;}
.blog-meta-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-dim);margin-bottom:12px;flex-wrap:wrap;}
.lang-tag{padding:4px 10px;border-radius:100px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(212,0,0,.14);border:1px solid rgba(212,0,0,.3);color:#ff6a6a;}
.blog-card-body h3{font-size:17px;margin-bottom:8px;line-height:1.35;}
.blog-card-body p{color:var(--text-muted);font-size:13.5px;margin-bottom:16px;flex:1;}

/* Blog post article layout */
.post-wrap{max-width:780px;margin:0 auto;}
.post-hero-img{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);margin-bottom:36px;box-shadow:var(--shadow-lg);aspect-ratio:16/8;}
.post-hero-img img{width:100%;height:100%;object-fit:cover;}
.post-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;color:var(--text-dim);font-size:13px;margin-bottom:20px;}
.post-body{color:var(--text-muted);font-size:16px;line-height:1.85;}
.post-body h2{color:#fff;font-size:24px;margin:38px 0 14px;}
.post-body h3{color:#fff;font-size:18.5px;margin:26px 0 10px;}
.post-body p{margin-bottom:16px;}
.post-body ul{margin:0 0 16px;padding-left:20px;list-style:disc;}
.post-body li{margin-bottom:8px;}
.post-body a{color:#ff6a6a;font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.post-cta{margin-top:44px;}

/* FAQ accordion (used on faq.html and inside blog posts) */
.faq-list{display:flex;flex-direction:column;gap:14px;}
.faq-item{border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,var(--card),var(--card-2));overflow:hidden;}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;cursor:pointer;font-weight:700;font-size:15px;color:#fff;}
.faq-q .faq-plus{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:rgba(212,0,0,.15);border:1px solid rgba(212,0,0,.3);display:flex;align-items:center;justify-content:center;color:#ff5050;transition:transform .35s var(--ease);}
.faq-item.open .faq-plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.faq-a-inner{padding:0 22px 20px;color:var(--text-muted);font-size:14.5px;line-height:1.7;}
.faq-item.open .faq-a{max-height:400px;}
.faq-mini{margin-top:30px;}
.faq-mini .faq-q{font-size:14px;padding:16px 18px;}
.faq-mini .faq-a-inner{padding:0 18px 16px;font-size:13.5px;}
.faq-cat-label{margin:34px 0 16px;}
.faq-cat-label:first-child{margin-top:0;}