/* BLOG.CSS - Page Scoped Styles */

/* ── Scope: protect header & footer ── */
  body { font-family:'Avenir Next','Avenir',sans-serif!important; margin:0!important; }
  footer a,header a { text-decoration:none!important; color:inherit!important; }
  footer ul { list-style:none!important; padding:0!important; margin:0!important; }
  footer h4 { font-size:1rem!important; font-weight:700!important; margin-bottom:1rem!important; color:#000!important; }
  footer p  { margin:0!important; }
  footer > div { display:grid!important; }
  footer .flex { display:flex!important; }
  footer > div.border-t { text-align:center!important; }
  header { text-align:left!important; }

  /* ── Blog Scope ── */
  #blog-scope { background:#f4f6fb; }

  /* Hero */
  #blog-scope .blog-hero {
    background: linear-gradient(135deg, rgba(15, 60, 217, 0.88) 0%, rgba(26, 79, 232, 0.88) 100%),
                url('../../images/hero-square-bg-1.png') center/cover no-repeat;
    padding: 30px 0 0;
    position: relative;
    overflow: hidden;
  }
  #blog-scope .blog-hero::before {
    content:''; position:absolute; top:-80px; right:-80px;
    width:320px; height:320px; border-radius:50%;
    background:rgba(255,255,255,0.07); pointer-events:none;
  }
  #blog-scope .blog-hero h1 {
    font-family: 'Urbanist', 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 48px;
    line-height: 130%;
    letter-spacing: 0px;
    color: #fff;
  }
  #blog-scope .blog-hero p {
    font-family: 'Avenir Next', 'Helvetica Neue', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: 0px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 480px;
  }

  /* Featured Card */
  #blog-scope .featured-card {
    border:1px solid #e3e8f0; border-radius:16px; overflow:hidden;
    background:#fff; box-shadow:0 2px 16px rgba(0,0,0,0.06);
    transition:box-shadow .3s;
  }
  #blog-scope .featured-card:hover { box-shadow:0 8px 32px rgba(0,0,0,0.12); }
  #blog-scope .feat-img-wrap { overflow:hidden; }
  #blog-scope .feat-img { width:100%; height:100%; min-height:300px; object-fit:cover; transition:transform .4s; }
  #blog-scope .featured-card:hover .feat-img { transform:scale(1.04); }
  #blog-scope .feat-body { padding:36px 40px; display:flex; flex-direction:column; justify-content:center; }
  #blog-scope .feat-body h2 {
    font-family:'Urbanist','Helvetica Neue',sans-serif;
    font-size:1.5rem; font-weight:700; color:#1c222b; line-height:1.4; margin-bottom:14px;
  }
  #blog-scope .feat-body p { color:#5e718d; font-size:.95rem; line-height:1.7; }

  /* Blog Cards */
  #blog-scope .blog-card {
    border:1px solid #e3e8f0; border-radius:16px; overflow:hidden;
    background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.05);
    transition:box-shadow .3s,transform .3s; height:100%; display:flex; flex-direction:column; cursor:pointer;
    text-decoration:none; color:inherit;
  }
  #blog-scope .blog-card:hover { box-shadow:0 10px 30px rgba(0,0,0,0.12); transform:translateY(-4px); color:inherit; text-decoration:none; }
  #blog-scope .card-img-wrap { height:200px; overflow:hidden; position:relative; flex-shrink:0; }
  #blog-scope .card-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
  #blog-scope .blog-card:hover .card-img-wrap img { transform:scale(1.06); }
  #blog-scope .read-badge {
    display:inline-flex; align-items:center; gap:4px;
    background:#f0f4ff; color:#0f3cd9; font-size:11px; font-weight:600;
    padding:4px 10px; border-radius:50px;
  }
  #blog-scope .card-bd { padding:16px 18px 20px; display:flex; flex-direction:column; flex:1; }
  #blog-scope .card-bd h3 {
    font-family:'Urbanist','Helvetica Neue',sans-serif;
    font-size:.95rem; font-weight:700; color:#1c222b; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin-bottom:8px; transition:color .2s;
  }
  #blog-scope .blog-card:hover .card-bd h3 { color:#0f3cd9; }
  #blog-scope .card-bd p {
    color:#5e718d; font-size:.82rem; line-height:1.65;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; flex:1;
  }
  #blog-scope .author-row {
    display:flex; align-items:center; gap:10px;
    padding-top:12px; margin-top:12px; border-top:1px solid #f0f0f5;
  }
  #blog-scope .author-row img { width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  #blog-scope .author-name { font-size:.78rem; font-weight:600; color:#1c222b; line-height:1.2; }
  #blog-scope .author-date { font-size:.7rem; color:#9faab7; }

  /* Pagination */
  #blog-scope .blog-pagination .page-numbers {
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:8px; border:1px solid #e0e4ef;
    font-size:.85rem; font-weight:500; color:#5e718d; margin:0 3px;
    text-decoration:none; transition:all .2s;
  }
  #blog-scope .blog-pagination .page-numbers:hover,
  #blog-scope .blog-pagination .page-numbers.current {
    background:#0f3cd9; border-color:#0f3cd9; color:#fff;
  }
  #blog-scope .blog-pagination .page-numbers.dots { border:none; background:transparent; }

  #blog-scope .section-posts { padding:50px 0 70px; }
  #blog-scope .section-featured { background:#fff; padding:50px 0 30px; }

  /* Featured Read Time Badge & Mobile Responsiveness */
  #blog-scope .feat-read-badge {
    background: rgba(0, 0, 0, 0.55) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  @media (max-width: 991px) {
    #blog-scope .feat-body {
      padding: 24px 24px !important;
    }
  }

  @media (max-width: 767px) {
    #blog-scope .blog-hero h1 {
      font-size: 32px !important;
    }
    #blog-scope .blog-hero p {
      font-size: 15px !important;
    }
    #blog-scope .feat-img {
      min-height: 200px !important;
      max-height: 280px !important;
    }
    #blog-scope .feat-body {
      padding: 20px 18px !important;
    }
    #blog-scope .feat-body h2 {
      font-size: 1.25rem !important;
      margin-bottom: 10px !important;
    }
    #blog-scope .feat-author-row {
      flex-wrap: wrap !important;
      gap: 10px !important;
    }
  }

  @media (max-width: 575px) {
    #blog-scope .feat-body {
      padding: 16px 14px !important;
    }
    #blog-scope .feat-body h2 {
      font-size: 1.1rem !important;
    }
    #blog-scope .feat-read-badge {
      font-size: 10.5px !important;
      padding: 3px 8px !important;
    }
  }