/* ===== BLOG LISTING — magazine layout: featured + category strip + grid ===== */

  .blog-hero{background:var(--bg); padding:60px 0 50px;}
  .blog-hero h1{font-size:clamp(1.9rem, 3.4vw, 2.6rem); max-width:18ch; margin:18px 0 10px;}
  .blog-hero p{color:var(--ink-soft); max-width:54ch;}

  /* Featured post — large editorial block */
  .featured-post{background:var(--paper); padding:0 0 70px;}
  .featured-card{
    display:grid; grid-template-columns:1.1fr 1fr; gap:0;
    border-radius:20px; overflow:hidden; box-shadow:0 28px 60px -22px rgba(15,23,42,0.18);
  }
  .featured-img{
    background:linear-gradient(140deg, var(--navy) 0%, var(--blue) 100%);
    position:relative; min-height:340px;
    display:flex; align-items:flex-end; padding:28px;
  }
  .featured-img .cat{
    background:var(--gold); color:var(--navy-deep); font-size:0.74rem; font-weight:800;
    text-transform:uppercase; letter-spacing:0.05em; padding:5px 11px; border-radius:6px;
  }
  .featured-body{background:var(--navy-deep); color:#fff; padding:42px; display:flex; flex-direction:column; justify-content:center;}
  .featured-body .fdate{font-size:0.82rem; color:#9FB1D6; margin-bottom:14px;}
  .featured-body h2{color:#fff; font-size:1.6rem; margin-bottom:14px; line-height:1.3;}
  .featured-body p{color:#CBD5E1; font-size:0.95rem; margin-bottom:22px;}
  .featured-body .read-more{color:var(--gold); font-weight:700; font-size:0.92rem;}

  /* Category strip */
  .cat-strip{background:var(--paper); padding-bottom:40px;}
  .cat-pills{display:flex; gap:10px; flex-wrap:wrap;}
  .cat-pills button{
    background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:9px 18px;
    font-family:var(--body); font-weight:600; font-size:0.86rem; color:var(--ink-soft);
    cursor:pointer; transition:background .18s, color .18s, border-color .18s;
  }
  .cat-pills button.active{background:var(--navy); color:#fff; border-color:var(--navy);}
  .cat-pills button:hover:not(.active){border-color:var(--blue); color:var(--blue);}

  /* Main grid + sidebar */
  .blog-main{background:var(--paper); padding-bottom:90px;}
  .blog-main-grid{display:grid; grid-template-columns:1fr 320px; gap:46px; align-items:flex-start;}
  .blog-grid-full{display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;}

  .blog-sidebar{display:flex; flex-direction:column; gap:28px; position:sticky; top:96px;}
  .sb-box{background:var(--bg); border-radius:14px; padding:24px;}
  .sb-box h4{font-size:0.96rem; margin-bottom:16px;}
  .sb-popular{display:flex; flex-direction:column; gap:16px;}
  .sb-popular .pp{display:flex; gap:12px; align-items:flex-start;}
  .sb-popular .pp .ppn{
    font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--gold-deep); flex-shrink:0; line-height:1;
  }
  .sb-popular .pp h5{font-size:0.88rem; line-height:1.4; margin-bottom:4px;}
  .sb-popular .pp span{font-size:0.76rem; color:var(--ink-soft);}

  .sb-tags{display:flex; flex-wrap:wrap; gap:8px;}
  .sb-tags a{
    font-size:0.8rem; background:var(--paper); border:1px solid var(--line); padding:6px 12px; border-radius:7px;
    color:var(--ink-soft); transition:border-color .18s, color .18s;
  }
  .sb-tags a:hover{border-color:var(--blue); color:var(--blue);}

  .sb-newsletter{background:var(--navy-deep); color:#fff;}
  .sb-newsletter h4{color:#fff;}
  .sb-newsletter p{font-size:0.84rem; color:#9FB1D6; margin-bottom:14px;}

  .pagination{display:flex; justify-content:center; gap:8px; margin-top:50px;}
  .pagination a{
    width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); font-weight:600; font-size:0.88rem; color:var(--ink-soft);
    transition:background .18s, color .18s, border-color .18s;
  }
  .pagination a.active, .pagination a:hover{background:var(--navy); color:#fff; border-color:var(--navy);}

  @media (max-width:1024px){
    .featured-card{grid-template-columns:1fr;}
    .blog-main-grid{grid-template-columns:1fr;}
    .blog-sidebar{position:static; flex-direction:row; flex-wrap:wrap;}
    .sb-box{flex:1; min-width:240px;}
  }
  @media (max-width:640px){
    .blog-grid-full{grid-template-columns:1fr;}
  }