/* ============================================================
   BLOG LISTING STYLESHEET  ->  blog.html only
   Loads after navorastyles.css. Uses the site's theme tokens
   (var(--text), var(--blue), var(--radius)…) so text + accents
   flip automatically; surface colors get explicit
   [data-theme="light"] overrides, matching the site's pattern.
   Colors are FLAT (no gradients) except the existing hero text.
   ============================================================ */

/* page-scoped surface tokens (dark defaults) */
.blog-page{
  --b-surface:#13131f;            /* card background */
  --b-surface-2:#0f0f18;          /* sunken / sticky bar */
  --b-line:rgba(255,255,255,.09);
  --b-tabbar:#09090f;
  padding-top:0;
}
[data-theme="light"] .blog-page{
  --b-surface:#ffffff;
  --b-surface-2:#f3f0e9;
  --b-line:rgba(10,10,30,.08);
  --b-tabbar:#faf8f3;
}

/* ---------- HERO (kept: "HR insights that actually matter") ---------- */
.bl-hero{max-width:1180px;margin:0 auto;padding:124px 40px 30px;text-align:center}
.bl-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-light)}
.bl-hero h1{font-size:clamp(2.4rem,5.5vw,4.4rem);font-weight:900;line-height:1.02;letter-spacing:-.04em;color:var(--text);margin-top:20px}
.bl-hero h1 .grad{background:linear-gradient(90deg,#6366f1,#8b5cf6,#e879a0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bl-hero p{color:var(--text-3);font-size:1.05rem;max-width:480px;margin:22px auto 0;line-height:1.6}

/* ---------- STICKY CATEGORY TABS ---------- */
.bl-tabbar{position:sticky;top:64px;z-index:30;background:var(--b-tabbar);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--b-line);border-bottom:1px solid var(--b-line);margin-bottom:40px}
.bl-tabs{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;padding:14px 40px;max-width:1180px;margin:0 auto}
.bl-tab{font-family:var(--font-b);font-size:.79rem;font-weight:600;color:var(--text-3);padding:8px 16px;border:1px solid var(--b-line);border-radius:100px;background:var(--b-surface);cursor:pointer;transition:all .18s;white-space:nowrap}
.bl-tab:hover{color:var(--text);border-color:var(--blue)}
.bl-tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ---------- shared wrap ---------- */
.bl-wrap{max-width:1180px;margin:0 auto;padding:0 40px}

/* ---------- FEATURED (flat indigo block) ---------- */
.bl-featured{border-radius:var(--radius-lg);background:var(--blue);padding:46px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;margin-bottom:60px;box-shadow:0 16px 44px rgba(99,102,241,.22);text-decoration:none;color:inherit}
.bl-featured .row{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.bl-chip-on{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;border-radius:100px;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28)}
.bl-featured h2{color:#fff;font-size:2.3rem;font-weight:800;line-height:1.06;letter-spacing:-.025em;margin-bottom:14px}
.bl-featured p{color:rgba(255,255,255,.85);line-height:1.6;font-size:1rem;margin-bottom:24px;max-width:94%}
.bl-feat-meta{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.82);font-size:.82rem}
.bl-av{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:.7rem;font-weight:700;color:#fff}
.bl-feat-vis{aspect-ratio:1;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}

/* ---------- SECTION HEADER ---------- */
.bl-sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px}
.bl-sec-head h2{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;color:var(--text)}
.bl-sec-head a{font-size:.83rem;font-weight:600;color:var(--blue-light);text-decoration:none}

/* ---------- LATEST GRID ---------- */
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:64px}
.bl-card{background:var(--b-surface);border:1px solid var(--b-line);border-radius:var(--radius-lg);padding:26px;display:flex;flex-direction:column;min-height:240px;transition:transform .22s,box-shadow .22s,border-color .22s;text-decoration:none;color:inherit}
.bl-card:hover{transform:translateY(-4px);box-shadow:var(--glass-shadow-lg);border-color:var(--blue)}
.bl-card:hover h3{color:var(--blue-light)}
.bl-chip{align-self:flex-start;margin-bottom:14px;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:100px;background:rgba(99,102,241,.12);color:var(--blue-light);border:1px solid rgba(99,102,241,.22)}
.bl-card h3{font-size:1.12rem;font-weight:700;line-height:1.25;letter-spacing:-.015em;margin-bottom:9px;color:var(--text);transition:color .2s}
.bl-card p{font-size:.85rem;color:var(--text-3);line-height:1.55;margin-bottom:16px;flex:1}
.bl-card .m{font-size:.74rem;color:var(--text-4)}

/* ---------- BROWSE BY TOPIC (matches About-page tile style) ---------- */
.bl-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:70px}
.bl-topic{border-radius:20px;padding:24px 26px;color:#fff;display:flex;align-items:center;justify-content:space-between;text-decoration:none;transition:transform .22s ease,box-shadow .22s ease}
.bl-topic:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.28)}
.bl-topic-text{display:flex;flex-direction:column}
.bl-topic .tl{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.55);margin-bottom:8px}
.bl-topic .tn{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.bl-topic .tc{font-size:.78rem;color:rgba(255,255,255,.62);margin-top:4px}
.bl-topic-icon{width:48px;height:48px;flex-shrink:0;border-radius:12px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8)}

/* ---------- NEWSLETTER (flat deep indigo, both modes) ---------- */
.bl-nl{border-radius:var(--radius-lg);background:#312e81;padding:52px;display:flex;justify-content:space-between;align-items:center;gap:40px;margin-bottom:70px}
.bl-nl h2{color:#fff;font-size:1.8rem;font-weight:800;letter-spacing:-.025em;margin-bottom:8px}
.bl-nl p{color:rgba(255,255,255,.7);font-size:.95rem}
.bl-nl-form{display:flex;gap:10px}
.bl-nl-form input{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:13px 18px;font-size:.9rem;font-family:var(--font-b);width:260px;outline:none}
.bl-nl-form input::placeholder{color:rgba(255,255,255,.5)}
.bl-nl-form button{background:#fff;color:#4f46e5;font-weight:700;font-size:.9rem;border:none;border-radius:10px;padding:13px 24px;cursor:pointer;white-space:nowrap;font-family:var(--font-b)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  .bl-tabbar{top:56px}
  .bl-card:hover{transform:none;box-shadow:none;border-color:var(--b-line)}
  .bl-card:hover h3{color:var(--text)}
  .bl-topic:hover{transform:none;box-shadow:none}
  .bl-featured,.bl-topics,.bl-nl{grid-template-columns:1fr}
  /* swipable article carousel on mobile */
  .bl-grid{grid-template-columns:none;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:14px;scrollbar-width:none;padding-bottom:6px}
  .bl-grid::-webkit-scrollbar{display:none}
  .bl-card{flex:0 0 82%;scroll-snap-align:start;min-height:auto}
  .bl-feat-vis{display:none}
  .bl-nl{flex-direction:column;align-items:flex-start}
  .bl-nl-form{width:100%;flex-direction:column}.bl-nl-form input{flex:1;width:100%}.bl-nl-form button{width:100%}
  .bl-featured,.bl-nl{padding:30px}
  .bl-hero,.bl-wrap{padding-left:20px;padding-right:20px}
  .bl-tabs{padding-left:20px;padding-right:20px;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none}
  .bl-tabs::-webkit-scrollbar{display:none}
}