/* ============================================================
   CYBERSYS INDIA - BLOG STYLESHEET (blog.css)
   Used on: blogs.php, blog-inner.php
   ============================================================ */

/* ================================================================
   BLOCK B — ★ NEW CSS — COPY THIS BLOCK to your common stylesheet
   (Blog inner page classes: .blog-*, .nl-*)
   ================================================================ */
.blog-search{max-width:520px;margin:26px auto 0;display:flex;background:#fff;border:1.5px solid #DCE5EC;border-radius:14px;overflow:hidden;box-shadow:0 4px 18px rgba(13,33,55,.08)}
.blog-search input{flex:1;border:none;outline:none;padding:14px 18px;font-size:14.5px;font-family:inherit;background:transparent}
.blog-search button{border:none;background:var(--primary-green);color:#fff;padding:0 26px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.blog-search button:hover{background:#15925D}
.blog-hero-meta{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap;font-size:13px;color:#5B6B7F;font-weight:600}

/* Featured post */
.blog-featured{background:var(--light-bg);padding:70px 0 10px}
.blog-featured-card{background:#fff;border:1px solid #E5EAF1;border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 10px 40px rgba(13,33,55,.08)}
.blog-featured-img{min-height:340px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:110px;font-weight:800;position:relative}
.blog-featured-tag{position:absolute;top:20px;left:20px;background:#fff;color:#0D2137;font-size:12px;font-weight:800;letter-spacing:1px;padding:7px 16px;border-radius:20px}
.blog-featured-body{padding:44px 42px;display:flex;flex-direction:column;justify-content:center}
.blog-cat{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1px;padding:6px 15px;border-radius:20px;margin-bottom:14px}
.blog-cat-green{background:#DCFCE7;color:#15803D}
.blog-cat-blue{background:#DBEAFE;color:#1D4ED8}
.blog-cat-purple{background:#EDE9FE;color:#6D28D9}
.blog-cat-orange{background:#FEF3C7;color:#B45309}
.blog-date{font-size:13px;color:#7B8AA0;font-weight:600;margin-bottom:10px}
.blog-featured-body h2{font-size:clamp(22px,2.8vw,30px);font-weight:800;line-height:1.3;margin-bottom:12px}
.blog-featured-body h2 a{color:#0D2137;text-decoration:none}
.blog-featured-body h2 a:hover{color:var(--primary-green)}
.blog-featured-body p{color:#5B6B7F;font-size:15px;margin-bottom:22px}
.blog-readmore{display:inline-flex;align-items:center;gap:9px;background:var(--primary-dark);color:#fff;padding:12px 24px;border-radius:11px;font-weight:700;font-size:14px;text-decoration:none;width:fit-content}
.blog-readmore:hover{background:var(--primary-green)}

/* Filter chips */
.blog-filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:30px 0 40px}
.blog-chip{border:1.5px solid #E0E7EF;background:#fff;border-radius:25px;padding:9px 22px;font-size:13.5px;font-weight:700;cursor:pointer;color:#5B6B7F;font-family:inherit;transition:.2s;text-decoration:none;display:inline-block}
.blog-chip:hover{border-color:var(--primary-green);color:var(--primary-green)}
.blog-chip.on{background:var(--primary-dark);color:#fff;border-color:var(--primary-dark)}

/* Blog grid + cards */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.blog-card{background:#fff;border:1px solid #E5EAF1;border-radius:20px;overflow:hidden;transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);display:flex;flex-direction:column;box-shadow:0 4px 15px rgba(13,33,55,.03);width: 80%;}
.blog-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(13,33,55,.12);border-color:var(--primary-green)}
.blog-card-img{height: 220px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-size:64px;font-weight:800;position:relative}
.blog-card-img img{width: 100%;height: auto;object-fit:cover;transition:transform 0.4s ease}
.blog-card:hover .blog-card-img img{transform:scale(1.05)}
.blog-card-img .blog-cat{position:absolute;top:14px;left:14px;margin:0;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);z-index:2;box-shadow:0 4px 12px rgba(0,0,0,.08);font-size:12px;font-weight:700}
.blog-card-body{padding: 10px;display:flex;flex-direction:column;flex:1}
.blog-card-body h3{font-size: 16px;font-weight: 700;line-height:1.45;margin: 0 0 0px;}
.blog-card-body h3 a{color:#0D2137;text-decoration:none;transition:color 0.2s}
.blog-card-body h3 a:hover{color:var(--primary-green)}

/* Modern Dynamic Pagination */
.blog-pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:50px}
.blog-pagination .page-num, .blog-pagination .page-nav{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 16px;border-radius:12px;border:1.5px solid #E2E8F0;background:#fff;color:#475569;font-weight:700;font-size:14px;text-decoration:none;transition:all 0.2s ease;font-family:inherit}
.blog-pagination .page-num:hover, .blog-pagination .page-nav:hover:not(.disabled){background:var(--primary-green);color:#fff;border-color:var(--primary-green);transform:translateY(-2px);box-shadow:0 6px 18px rgba(21,128,61,0.25)}
.blog-pagination .page-num.on{background:var(--primary-green);color:#fff;border-color:var(--primary-green);box-shadow:0 6px 18px rgba(21,128,61,0.25)}
.blog-pagination .page-nav.disabled{color:#94A3B8;border-color:#F1F5F9;background:#F8FAFC;cursor:not-allowed;opacity:0.6}

/* ==========================================================================
   SEO DETAILED BLOG POST STYLES
   ========================================================================== */
.article-section { padding: 50px 0 80px; background: #FAFBFD; }
.article-header { text-align: center; max-width: 900px; margin: 0 auto 40px; }
.article-category-badge { display: inline-block; background: #DCFCE7; color: #15803D; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; padding: 6px 18px; border-radius: 30px; margin-bottom: 16px; text-transform: uppercase; }
.article-main-title { font-size: clamp(22px, 2.5vw, 32px); font-weight: 800; line-height: 1.3; color: #0D2137; margin-bottom: 20px; letter-spacing: -0.3px; }
.article-meta-bar { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; font-size: 14px; color: #64748B; font-weight: 500; border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; padding: 16px 0; margin-top: 20px; }
.article-author-info { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #0D2137; }
.article-author-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-green); }
.article-share-links { display: flex; align-items: center; gap: 10px; }
.article-share-btn { width: 34px; height: 34px; border-radius: 50%; background: #F1F5F9; color: #475569; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: .2s; font-size: 14px; border: none; }
.article-share-btn:hover { background: var(--primary-green); color: #fff; transform: translateY(-2px); }

/* Main Article Content & Sidebar Grid */
.article-grid-wrapper { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
@media (max-width: 991px) { .article-grid-wrapper { grid-template-columns: 1fr; } }

.article-main-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 24px; padding: 44px; box-shadow: 0 10px 40px rgba(13,33,55,.05); }
@media (max-width: 768px) { .article-main-card { padding: 24px 20px; } }

.article-featured-media { margin-bottom: 36px; border-radius: 20px; overflow: hidden; background: #F8FAFC; border: 1px solid #E2E8F0; }
.article-featured-media img { width: 100%; max-height: 440px; object-fit: cover; display: block; }
.article-featured-caption { font-size: 13px; color: #94A3B8; padding: 10px 16px; background: #F8FAFC; text-align: center; font-style: italic; border-top: 1px solid #F1F5F9; }

/* Takeaway Box */
.takeaway-box { background: linear-gradient(135deg, #F0FDF4, #ECFDF5); border: 1.5px solid #A7F3D0; border-radius: 16px; padding: 24px 28px; margin-bottom: 36px; }
.takeaway-box h4 { font-size: 17px; font-weight: 800; color: #065F46; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.takeaway-box ul { margin: 0; padding-left: 20px; color: #166534; font-size: 14.5px; line-height: 1.6; }
.takeaway-box li { margin-bottom: 6px; }

/* Table of Contents Box */
.toc-box { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 16px; padding: 24px 28px; margin-bottom: 36px; }
.toc-title { font-size: 16px; font-weight: 800; color: #0D2137; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { margin-bottom: 8px; font-size: 14.5px; }
.toc-list a { color: #334155; text-decoration: none; font-weight: 600; transition: .2s; display: inline-flex; align-items: center; gap: 6px; }
.toc-list a:hover { color: var(--primary-green); transform: translateX(3px); }

/* Article Typography */
.article-content { font-size: 16px; line-height: 1.8; color: #334155; }
.article-content h2 { font-size: 21px; font-weight: 700; color: #0D2137; margin: 30px 0 14px; padding-bottom: 8px; border-bottom: 2px solid #F1F5F9; scroll-margin-top: 100px; }
.article-content h3 { font-size: 18px; font-weight: 700; color: #0D2137; margin: 22px 0 10px; scroll-margin-top: 100px; }
.article-content p { margin-bottom: 22px; }
.article-content ul, .article-content ol { margin-bottom: 24px; padding-left: 24px; }
.article-content li { margin-bottom: 10px; }

.article-quote { background: #F8FAFC; border-left: 4px solid var(--primary-green); padding: 20px 24px; border-radius: 0 16px 16px 0; margin: 32px 0; font-size: 18px; font-style: italic; font-weight: 600; color: #0D2137; line-height: 1.6; }

/* Tags & Author Bio */
.article-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 40px 0 30px; padding-top: 24px; border-top: 1px solid #E2E8F0; }
.article-tag { background: #F1F5F9; color: #475569; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 20px; text-decoration: none; transition: .2s; }
.article-tag:hover { background: var(--primary-dark); color: #fff; }

.author-bio-card { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 20px; padding: 28px; display: flex; gap: 20px; align-items: center; margin-top: 36px; }
@media (max-width: 576px) { .author-bio-card { flex-direction: column; text-align: center; } }
.author-bio-img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.1); flex-shrink: 0; }
.author-bio-name { font-size: 18px; font-weight: 800; color: #0D2137; margin-bottom: 4px; }
.author-bio-role { font-size: 13px; color: var(--primary-green); font-weight: 700; margin-bottom: 8px; }
.author-bio-text { font-size: 14px; color: #64748B; margin: 0; line-height: 1.5; }

/* Sticky Article Sidebar */
.article-sidebar-sticky { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 30px; }
.sidebar-cta-card { background: linear-gradient(135deg, #0D2137, #1E3A8A); color: #fff; border-radius: 20px; padding: 32px 24px; text-align: center; box-shadow: 0 14px 35px rgba(13,33,55,.15); }
.sidebar-cta-card h4 { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.sidebar-cta-card p { font-size: 14px; color: #94A3B8; margin-bottom: 22px; line-height: 1.5; }

/* Related Articles Section */
.related-articles-sec { padding: 70px 0; background: #fff; border-top: 1px solid #E2E8F0; }
.related-articles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 36px; }
@media (max-width: 768px) { .related-articles-grid { grid-template-columns: 1fr; } }