/* ==========================================================================
   Stratboost Blog Styles
   Version: 2.0 (2025-08-11)
   Scoped to blog pages to avoid clashes with landing CSS
   ========================================================================== */

/* Root (align with site theme; harmless if already defined globally) */
:root{
    --color-primary:#6F00FF;
    --color-primary-dark:#5A00E0;
    --color-bg:#F9F9FA;
    --color-white:#FFFFFF;
    --color-black:#131628;
    --color-gray-50:#FCFCFD;
    --color-gray-100:#F4F6F8;
    --color-gray-200:#E5E7EB;
    --color-gray-300:#E2E8F0;
    --color-gray-400:#94A3B8;
    --color-gray-600:#475569;
    --radius:16px;
    --radius-pill:999px;
    --shadow-sm:0 4px 14px rgba(0,0,0,.07);
    --shadow-md:0 10px 30px rgba(0,0,0,.08);
    --max-w:1200px;
    --content-w:760px;
  }
  
  /* Utilities */
  .blog-container{width:90%;max-width:var(--max-w);margin:0 auto;}
  .blog-center{text-align:center;}
  .blog-btn{
    display:inline-block;
    padding:.75rem 1.5rem;
    border-radius:var(--radius-pill);
    font-weight:700;
    text-transform:uppercase;
    transition:all .25s ease;
    border:2px solid var(--color-primary);
  }
  .blog-btn.primary{background:var(--color-primary);color:#fff;}
  .blog-btn.primary:hover{background:var(--color-primary-dark);}
  .blog-btn.ghost{background:transparent;color:var(--color-primary);}
  .blog-btn.ghost:hover{background:var(--color-primary);color:#fff;}
  .is-hidden{display:none !important;}
  
  /* ===========================
     Blog LIST page
     =========================== */
  .blog-header{
    background: linear-gradient(135deg, #0f1020 0%, #1c1333 60%, #2b1952 100%);
    color:#fff;
    padding:3.5rem 0 2.25rem;
    margin:0 0 1rem;
  }
  .blog-header .blog-container{
    display:flex;flex-direction:column;align-items:center;gap:.5rem;
  }
  .blog-header h1{font-size:2.25rem;line-height:1.15;font-weight:800;text-align:center;}
  .blog-header p{opacity:.9;max-width:700px;text-align:center;}
  
  .blog-list-wrap{padding:1rem 0 3rem;background:var(--color-gray-50);}
  
  /* Section headers */
  .blog-section-title{
    font-size:1.35rem;
    font-weight:800;
    margin:2rem 0 1rem;
    text-align:left;
    position:relative;
  }
  .blog-section-title::after{
    content:"";
    display:block;
    width:60px;height:3px;
    margin:.5rem 0 0;
    border-radius:3px;
    background:linear-gradient(90deg, #bfa3ff 0%, var(--color-primary) 60%, #bfa3ff 100%);
    opacity:.9;
  }
  
  /* Grid */
  .blog-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1.25rem;
  }
  
  /* Card */
  .blog-card{
    background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
    display:flex;flex-direction:column;transition:transform .25s ease, box-shadow .25s ease;
  }
  .blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
  .blog-card a{color:inherit;text-decoration:none;}
  .blog-card .thumb{
    aspect-ratio:16/9;background:var(--color-gray-100);
    object-fit:cover;width:100%;display:block;
  }
  .blog-card .body{padding:1rem 1rem 1.1rem;}
  .blog-card h3{font-size:1.05rem;line-height:1.35;margin:0 0 .35rem;font-weight:800;}
  .blog-card p{color:#333;opacity:.9;font-size:.95rem;line-height:1.45;margin:.35rem 0 .75rem;}
  .blog-card time{font-size:.85rem;color:var(--color-gray-600);}
  .blog-card .tags{margin-top:.5rem;display:flex;gap:.4rem;flex-wrap:wrap;}
  .blog-card .tag{
    font-size:.72rem;padding:.25rem .6rem;border-radius:999px;background:#eef2ff;color:#3b2ca7;font-weight:700;
  }
  
  /* Featured region can reuse same cards, just more emphasis if needed */
  .featured-blogs .blog-grid{gap:1.35rem;}
  .featured-blogs .blog-card h3{font-size:1.12rem;}
  
  /* Load more */
  #load-more-wrap{display:flex;justify-content:center;margin:1.5rem 0 0;}
  #load-more{min-width:200px;}
  
  /* ===========================
     Blog DETAIL page
     =========================== */
  .blog-post-wrap{
    background:#fff;
  }
  .blog-post-header{
    background: linear-gradient(135deg, #0f1020 0%, #1c1333 60%, #2b1952 100%);
    color:#fff;padding:3.25rem 0 2.25rem;margin:0 0 1.25rem;
  }
  .blog-post-header .blog-container{max-width:var(--content-w);}
  .blog-post-header h1{font-size:2.2rem;line-height:1.15;font-weight:800;margin:0 0 .6rem;}
  .blog-meta{display:flex;gap:.75rem;flex-wrap:wrap;color:#d9d6ff;opacity:.95;font-size:.9rem;}
  .blog-meta .dot::before{content:"•";margin:0 .35rem;}
  
  .blog-cover{
    max-width:var(--content-w);
    margin:1rem auto 0;border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow-sm);
  }
  .blog-cover img{display:block;width:100%;height:auto;}
  
  /* Reading progress bar */
  .reading-progress{
    position:fixed;top:0;left:0;height:4px;width:0;
    background:linear-gradient(90deg,var(--color-primary),#9d6bff);
    z-index:9999;transition:width .1s linear;
  }
  
  /* Content */
  .blog-content-wrap{padding:1rem 0 3rem;}
  .blog-content{
    max-width:var(--content-w);margin:0 auto;color:var(--color-black);
    font-size:1.05rem;line-height:1.75;
  }
  .blog-content p{margin:0 0 1rem;color:#1f2437;}
  .blog-content h2{font-size:1.6rem;margin:2rem 0 .75rem;line-height:1.25;font-weight:800;}
  .blog-content h3{font-size:1.25rem;margin:1.5rem 0 .5rem;font-weight:800;}
  .blog-content h4{font-size:1.05rem;margin:1.25rem 0 .25rem;font-weight:800;}
  .blog-content a{color:var(--color-primary);text-decoration:underline;}
  .blog-content a:hover{color:var(--color-primary-dark);}
  
  .blog-content blockquote{
    background:var(--color-gray-100);
    border-left:4px solid var(--color-primary);
    margin:1.25rem 0;padding:1rem 1.25rem;border-radius:8px;
    color:#2b2f45;
  }
  .blog-content pre{
    background:#0f1222;color:#e7e8ff;border-radius:10px;padding:1rem 1.25rem;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    overflow:auto;margin:1rem 0;box-shadow:var(--shadow-sm);
  }
  .blog-content code{background:#f2f3ff;padding:.15rem .35rem;border-radius:6px;}
  .blog-content pre code{background:transparent;padding:0;}
  
  .blog-content ul, .blog-content ol{margin:.5rem 0 1rem 1.25rem;}
  .blog-content li{margin:.25rem 0;}
  .blog-content img{border-radius:12px;box-shadow:var(--shadow-sm);margin:1rem auto;display:block;}
  
  /* TOC */
  .blog-toc{
    max-width:var(--content-w);
    margin:0 auto 1rem; background:#fff; border:1px solid var(--color-gray-200);
    border-radius:12px; padding:.75rem 1rem; box-shadow:var(--shadow-sm);
  }
  .blog-toc strong{display:block;margin:0 0 .35rem;font-size:.95rem;color:#2b2f45;}
  .blog-toc ul{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;}
  .blog-toc a{display:block;text-decoration:none;color:#394057;font-size:.95rem;}
  .blog-toc a:hover{color:var(--color-primary);}
  
  /* Share bar */
  .social-share{
    max-width:var(--content-w);margin:1rem auto 0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  }
  .social-share p{margin:0 .5rem 0 0;font-weight:700;}
  .share-btn{
    display:inline-flex;align-items:center;gap:.35rem;
    padding:.5rem .8rem;border:1px solid var(--color-gray-300);border-radius:999px;
    background:#fff;color:#111;transition:all .2s ease;
  }
  .share-btn:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px);}
  .copy-link{cursor:pointer;}
  
  /* Related */
  .related-blogs{
    max-width:var(--content-w);margin:2rem auto 0;
  }
  .related-blogs h2{
    font-size:1.35rem;font-weight:800;margin:0 0 1rem;position:relative;
  }
  .related-blogs h2::after{
    content:"";display:block;width:50px;height:3px;background:var(--color-primary);
    border-radius:3px;margin:.5rem 0 0;opacity:.9;
  }
  .related-blog-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;
  }
  .related-blog-card{
    background:#fff;border:1px solid var(--color-gray-200);border-radius:12px;overflow:hidden;
    box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .2s ease;
  }
  .related-blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
  .related-blog-card img{width:100%;height:140px;object-fit:cover;display:block;}
  .related-blog-card .content{padding:.8rem 1rem;}
  .related-blog-card h3{font-size:1rem;margin:0 0 .3rem;font-weight:800;}
  .related-blog-card p{font-size:.92rem;color:#333;opacity:.9;}
  
  /* Newsletter (reused pattern) */
  .newsletter-signup{
    background:var(--color-gray-100);padding:1.25rem;border-radius:16px;
    margin:2rem auto 0;max-width:var(--content-w);text-align:center;box-shadow:var(--shadow-sm);
  }
  .newsletter-signup h2{font-size:1.25rem;margin:0 0 .35rem;font-weight:800;}
  .newsletter-signup p{opacity:.9;margin:0 0 .75rem;}
  .newsletter-signup form{
    display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;
  }
  .newsletter-signup input[type="email"]{
    min-width:240px;padding:.75rem 1rem;border:1px solid var(--color-gray-300);
    border-radius:999px;font-size:1rem;outline:none;
  }
  .newsletter-signup button{border:none}
  
  /* Ensure images fill the thumbnail tile */
.blog-card .thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; display: block; }
.blog-card .thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }

  /* Small screens */
  @media (max-width: 640px){
    .blog-header h1{font-size:1.8rem;}
    .blog-post-header h1{font-size:1.8rem;}
    .blog-content{font-size:1rem;line-height:1.7;}
    .share-btn{padding:.45rem .7rem;}
  }