/* =========================================================
   EDIUSFA — 16-BLOG
   Page-specific styles for the blog archive (home.php).
   -----------------------------------------------------------------
   Source of truth: ediusfa-blog.html (BLOG ARCHIVE PAGE-SPECIFIC
   STYLES block, lines 812–914)
   -----------------------------------------------------------------
   NOTE: The following rules live in earlier files and are NOT
   redefined here (no duplication):
     - .pdp-container, .pdp-header, .pdp-breadcrumb-bar,
       .header-search-toggle, .comp-mobile-searchbar
       (03-components.css, 04-header.css, 12-archive.css)
     - .comp-footer overrides, .mobile-sticky-nav,
       body padding-bottom (05-footer.css)
     - .prod-card-cover, .prod-card .add-btn (03-components.css)
     - .searchbar, .search-clear (03-components.css)
     - .tabs, .tab, .tab.is-active (03-components.css)
     - .article-thumb, .article-body, .article-date (03-components.css)
     - .badge, .track-tag, .btn, .icon-btn, .link-more (03-components.css)
   -----------------------------------------------------------------

   @package    EdiusFA
   @subpackage assets/css
   @since      0.6.0
   @version    0.6.0
   ========================================================= */

/* ---------- Compact blog header ---------- */
.blog-header{padding:26px 0; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.blog-header-left{display:flex; align-items:center; gap:14px;}
.blog-header-icon{width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg, var(--cyan), var(--amber)); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;}
.blog-header h1{font-size:19px; font-weight:800; margin-bottom:3px;}
.blog-header-meta{font-size:12.5px; color:var(--ink-faint);}
.blog-header .searchbar{width:320px; flex-shrink:0;}
@media (max-width:700px){ .blog-header .searchbar{width:100%;} }

/* ---------- Featured article ---------- */
.featured-article{
  display:grid; grid-template-columns:1.2fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--bg-elevated); margin:32px 0 48px;
}
@media (max-width:800px){ .featured-article{grid-template-columns:1fr;} }
.featured-media{position:relative; min-height:260px; background:linear-gradient(135deg, var(--cyan-900), var(--amber-900)); display:flex; align-items:flex-end; padding:20px;}
.featured-media .track-tag{background:rgba(7,10,16,.55);}
.featured-body{padding:30px; display:flex; flex-direction:column; justify-content:center;}
.featured-body .eyebrow{font-family:var(--font-mono); font-size:11px; color:var(--cyan); letter-spacing:.04em; margin-bottom:10px; display:block;}
.featured-body h2{font-size:21px; font-weight:800; line-height:1.5; margin-bottom:10px;}
.featured-body p{font-size:13.5px; color:var(--ink-dim); line-height:1.85; margin-bottom:18px;}
.byline{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink-faint); margin-bottom:18px; flex-wrap:wrap;}
.byline .b-avatar{width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg, var(--cyan), var(--amber)); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--ink-on-accent); flex-shrink:0;}

/* ---------- Layout: main + sidebar ---------- */
.blog-layout{display:grid; grid-template-columns:1fr 300px; gap:32px; align-items:flex-start; padding-bottom:60px;}
@media (max-width:980px){ .blog-layout{grid-template-columns:1fr;} }

.blog-toolbar{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; flex-wrap:wrap;}
.blog-toolbar .tabs{margin-bottom:0; border-bottom:none;}
.result-note{font-size:12.5px; color:var(--ink-faint);}
.result-note b{color:var(--ink); font-family:var(--font-mono);}

.article-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
@media (max-width:600px){ .article-grid{grid-template-columns:1fr;} }
.article-card.blog-card{display:flex; flex-direction:column;}
.article-card.blog-card .article-thumb{height:130px; align-items:flex-start; padding:14px;}
.article-card.blog-card .article-thumb .badge{position:static;}
.article-card.blog-card .article-body{flex:1; display:flex; flex-direction:column;}
.article-card.blog-card .article-body h4{flex:1;}
.article-card.blog-card .article-body .art-meta{font-size:11.5px; color:var(--ink-faint); margin-bottom:10px; display:flex; gap:8px; flex-wrap:wrap;}

.load-more-wrap{display:flex; justify-content:center; margin-top:28px;}
.no-results{display:none; text-align:center; padding:50px 20px; color:var(--ink-faint); font-size:13.5px;}
.no-results.is-visible{display:block;}

/* ---------- Sidebar widgets ---------- */
.blog-sidebar{display:flex; flex-direction:column; gap:20px; position:sticky; top:96px;}
@media (max-width:980px){ .blog-sidebar{position:static; flex-direction:column;} }
.sidebar-widget{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px;}
.sidebar-widget h3{font-size:14.5px; font-weight:800; margin-bottom:16px; display:flex; align-items:center; gap:8px;}
.popular-list{display:flex; flex-direction:column; gap:14px;}
.popular-item{display:flex; align-items:center; gap:12px;}
.popular-rank{width:26px; height:26px; border-radius:8px; background:var(--bg-elevated-2); border:1px solid var(--line); font-family:var(--font-mono); font-size:12px; color:var(--cyan); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.popular-item h5{font-size:12.5px; line-height:1.6; margin-bottom:3px;}
.popular-item span{font-size:11px; color:var(--ink-faint);}

.cat-list{display:flex; flex-direction:column; gap:8px;}
.cat-list button{display:flex; justify-content:space-between; align-items:center; width:100%; padding:9px 10px; border-radius:8px; font-size:13px; color:var(--ink-dim); transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);}
.cat-list button:hover{background:var(--bg-elevated-2); color:var(--ink);}
.cat-list button.is-active{background:var(--bg-elevated-2); color:var(--cyan);}
.cat-list span.opt-count{color:var(--ink-faint); font-family:var(--font-mono); font-size:11px;}

.mini-cta{text-align:center;}
.mini-cta .icon{width:42px; height:42px; border-radius:12px; background:var(--bg-elevated-2); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:18px;}
.mini-cta p{font-size:12.5px; color:var(--ink-dim); margin-bottom:14px; line-height:1.7;}

/* Server-rendered archive grid */
.article-grid-server{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
@media (max-width:760px){
  .article-grid-server{grid-template-columns:1fr;}
}
.article-grid-server .article-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.article-grid-server .article-thumb{
  display:block;
  min-height:160px;
  background:linear-gradient(135deg,var(--cyan-900, #0a3a42),var(--amber-900,#3a2a0a));
  position:relative;
}
.article-grid-server .article-body{
  padding:0 16px 16px;
}
.article-grid-server .article-body h4{
  font-size:15.5px;
  font-weight:700;
  line-height:1.45;
  margin:0;
}

.featured-media.has-img{
  background-color: var(--bg-elevated);
  position: relative;
}
.featured-media.has-img .track-tag{
  position: relative;
  z-index: 1;
}
.featured-media.has-img::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(7,10,16,.55));
  pointer-events:none;
}
.article-card.blog-card .article-thumb.has-img{
  min-height:130px;
  height:130px;
  display:block;
  position:relative;
}
.article-card.blog-card .article-thumb .article-date{
  position:absolute;
  bottom:10px;
  inset-inline-end:10px;
  background:rgba(7,10,16,.75);
  padding:6px 10px;
  border-radius:8px;
}
.article-card.blog-card .article-thumb.has-img{
  height:140px;
  min-height:140px;
  background-color:var(--bg-sunken);
}
.article-grid .article-card.blog-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--bg-elevated);
}