/* Reference /blog sidebar: a 330px rail of four 16px-radius cards.
   Search 128, subscription card 205.5, recent updates 349.5 and tags 319. */
.blog-centre .content-sidebar .sidebar-card{padding:20px}
.blog-centre .content-sidebar .sidebar-card form{gap:0;padding:4px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;transition:border-color .2s,box-shadow .2s}
.blog-centre .content-sidebar .sidebar-card form:focus-within{border-color:#51a2ff;box-shadow:0 0 0 3px #eff6ff}
.blog-centre .content-sidebar .sidebar-card form input{height:40px;min-width:0;flex:1;padding:0 12px;border:0;border-radius:8px;background:transparent;box-shadow:none;font-size:14px}
.blog-centre .content-sidebar .sidebar-card form input:focus{box-shadow:none}
.blog-centre .content-sidebar .sidebar-card form button{display:inline-flex;align-items:center;justify-content:center;height:40px;min-height:40px;padding:0 20px;border:0;border-radius:8px;background:#1e2336;color:#fff;font-size:14px;line-height:20px;font-weight:700;white-space:nowrap}
.blog-centre .content-sidebar .sidebar-card form button:hover{background:#155dfc}

.blog-centre .content-sidebar .sidebar-resource-card{position:relative;overflow:hidden;background:#0f172a;border:1px solid #1e293b;color:#fff;box-shadow:0 20px 25px -5px rgb(15 23 42 / .1),0 8px 10px -6px rgb(15 23 42 / .1)}
.blog-centre .content-sidebar .sidebar-resource-glow{position:absolute;top:-48px;right:-48px;width:160px;height:160px;border-radius:9999px;background:rgb(59 130 246 / .2);filter:blur(40px);pointer-events:none;transition:background .5s}
.blog-centre .content-sidebar .sidebar-resource-card:hover .sidebar-resource-glow{background:rgb(59 130 246 / .3)}
.blog-centre .content-sidebar .sidebar-resource-eyebrow{position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin:0;font-size:11px;line-height:16.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#bedbff}
.blog-centre .content-sidebar .sidebar-resource-eyebrow svg{flex:0 0 16px;width:16px;height:16px}
.blog-centre .content-sidebar .sidebar-resource-title{position:relative;z-index:1;display:block;margin:8px 0 0;font-size:20px;line-height:27.5px;font-weight:900;color:#fff}
.blog-centre .content-sidebar .sidebar-resource-copy{position:relative;z-index:1;margin:8px 0 0;font-size:14px;line-height:22.75px;color:#cad5e2}
.blog-centre .content-sidebar .sidebar-resource-actions{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
.blog-centre .content-sidebar .sidebar-resource-actions a{display:block;box-sizing:border-box;padding:10px 12px;border:1px solid transparent;border-radius:12px;text-align:center;font-size:14px;line-height:20px;font-weight:700;color:#fff;text-decoration:none;overflow-wrap:anywhere}
.blog-centre .content-sidebar .sidebar-resource-compare{border-color:rgb(255 255 255 / .2);background:rgb(255 255 255 / .05)}
.blog-centre .content-sidebar .sidebar-resource-compare:hover{background:rgb(255 255 255 / .1)}
.blog-centre .content-sidebar .sidebar-resource-primary{background:#155dfc}
.blog-centre .content-sidebar .sidebar-resource-primary:hover{background:#2b7fff}
.blog-centre .content-sidebar .sidebar-resource-actions a:focus-visible{outline:3px solid #fbbf24;outline-offset:3px}

/* Below the reference `md` breakpoint every card drops to 16px padding and
   the tighter heading rhythm: search/tags 10px, recent updates 12px. */
@media(max-width:767px){
  .blog-centre .content-sidebar .sidebar-card{padding:16px}
  .blog-centre .content-sidebar .sidebar-card:not(.sidebar-resource-card) :is(h2,h3){margin-bottom:10px}
  .blog-centre .content-sidebar .sidebar-card:has(.recent-content) :is(h2,h3){margin-bottom:12px}
  .blog-centre .content-sidebar .sidebar-resource-title{font-size:18px;line-height:24.75px}
}