/* ============================================================
   1080Agile — blog.css
   Styles for home.php (news hub), archive.php, and single.php.
   Loaded only on blog-related pages via functions.php.
============================================================ */

/* ---- Blog hub hero ---- */
.ag-blog-hero{background:linear-gradient(120deg,var(--navy-900) 0%,var(--navy-800) 52%,var(--navy-700) 100%);padding:72px 0 64px;isolation:isolate;position:relative}
.ag-blog-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 360px at 90% 10%,rgba(236,0,140,.24),transparent 60%),radial-gradient(480px 360px at 5% 95%,rgba(0,153,216,.20),transparent 62%);z-index:0}
.ag-blog-hero .container{position:relative;z-index:2}

/* ---- Category pill bar ---- */
.ag-cat-bar{background:#fff;border-bottom:1px solid var(--n-200);padding:14px 0;overflow-x:auto}
.ag-cat-pills{display:flex;gap:8px;align-items:center;white-space:nowrap}
.ag-pill{font-size:13px;font-weight:600;padding:8px 18px;border-radius:100px;background:var(--tint-2);color:var(--text-muted);border:1.5px solid transparent;transition:all .15s var(--ease)}
.ag-pill:hover{border-color:var(--pink-400);color:var(--pink-600)}
.ag-pill.active{background:var(--pink-500);color:#fff;border-color:var(--pink-500)}

/* ---- Featured grid ---- */
.ag-featured-grid{display:grid;grid-template-columns:1fr 360px;gap:24px}
.ag-featured-main{position:relative;border-radius:var(--radius);overflow:hidden;min-height:420px;display:block;background:#1a1a1a}
.ag-featured-main img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ag-featured-placeholder{position:absolute;inset:0;background:var(--navy-900)}
.ag-featured-copy{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:32px;background:linear-gradient(0deg,rgba(10,11,56,.92) 0%,transparent 100%)}
.ag-featured-copy h2{color:#fff;font-size:clamp(20px,2.6vw,30px);margin:8px 0 10px}
.ag-featured-side{display:flex;flex-direction:column;gap:18px}
.ag-side-card{display:flex;gap:14px;background:#fff;border:1px solid var(--n-200);border-radius:var(--radius);padding:16px;align-items:flex-start;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.ag-side-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--pink-400)}
.ag-side-img{width:90px;height:68px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden}
.ag-side-img img{width:100%;height:100%;object-fit:cover}
.ag-side-body h3{font-size:14px;margin:4px 0 6px;color:var(--ink);line-height:1.3}

/* ---- Post tags ---- */
.ag-post-tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(236,0,140,.10);color:var(--pink-600);border-radius:100px;padding:4px 12px;display:inline-block}
.ag-post-tag.soft{background:var(--tint-2);color:var(--text-muted)}

/* ---- Post meta ---- */
.ag-post-meta{font-size:13px;color:var(--text-muted);display:flex;align-items:center;gap:8px;margin-top:4px}

/* ---- Single post hero ---- */
.ag-post-hero{position:relative;min-height:380px;overflow:hidden;background:#1a1a1a}
.ag-post-hero-img{position:absolute;inset:0}
.ag-post-hero-img img{width:100%;height:100%;object-fit:cover}
.ag-post-hero-placeholder{background:var(--navy-900)}
.ag-post-hero-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,11,56,.88) 0%,rgba(10,11,56,.42) 55%,transparent 100%);display:flex;align-items:flex-end}
.ag-post-hero-content{padding:48px 0;max-width:760px}
.ag-post-hero-content h1{color:#fff;font-size:clamp(24px,3.6vw,44px);margin:10px 0 12px}
.ag-post-hero-content .ag-post-meta{color:rgba(255,255,255,.72)}

/* ---- Single post layout ---- */
.ag-post-layout{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start}
.ag-post-content{}
.ag-post-body{font-size:17px;line-height:1.78;color:var(--text)}
.ag-post-body h2{font-size:26px;margin:36px 0 12px;color:var(--ink)}
.ag-post-body h3{font-size:21px;margin:28px 0 10px;color:var(--ink)}
.ag-post-body p{margin:0 0 1.4em}
.ag-post-body img{border-radius:var(--radius);max-width:100%;margin:24px 0}
.ag-post-body blockquote{border-left:4px solid var(--pink-500);padding:16px 20px;background:var(--tint-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:24px 0;font-style:italic}
.ag-post-body ul,.ag-post-body ol{padding-left:24px;margin:0 0 1.4em}
.ag-post-body li{margin-bottom:6px}
.ag-post-body a{color:var(--cyan-600);text-decoration:underline;text-underline-offset:2px}

/* ---- Sidebar ---- */
.ag-post-sidebar{position:sticky;top:90px}
.ag-sidebar-title{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:16px}
.ag-sidebar-card{display:flex;gap:12px;padding:14px;background:#fff;border:1px solid var(--n-200);border-radius:var(--radius);margin-bottom:12px;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.ag-sidebar-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--pink-400)}
.ag-sidebar-img{width:70px;height:52px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden}
.ag-sidebar-img img{width:100%;height:100%;object-fit:cover}
.ag-sidebar-body h4{font-size:13px;margin:0 0 5px;color:var(--ink);line-height:1.35}

/* ---- Responsive ---- */
@media (max-width:1024px){
  .ag-featured-grid{grid-template-columns:1fr}
  .ag-featured-side{flex-direction:row}
  .ag-side-card{flex:1}
  .ag-post-layout{grid-template-columns:1fr}
  .ag-post-sidebar{position:static;margin-top:40px}
}
@media (max-width:767px){
  .ag-featured-side{flex-direction:column}
}