/* Layout */
.all-developers-wrapper{
  max-width:1200px; margin:0 auto; padding:32px 20px;
  display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.all-dev-title{ font-size:34px; font-weight:800; margin:0 0 14px; }

/* Featured */
.featured-developer{ margin-bottom:14px; padding:14px; background:#f0f8ff; border-radius:12px; text-align:center; }
.featured-card{ display:inline-flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; }
.featured-card img{ max-height:72px; transition:transform .3s ease; }
.featured-card:hover img{ transform:scale(1.04); }

/* Sticky Filter Bar */
#devFilterBar{ position:sticky; top:0; z-index:10; background:#fff; padding:8px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.05); margin-bottom:10px; }
#devFilterBar form{ display:flex; gap:6px; flex-wrap:wrap; }
#devFilterBar input,#devFilterBar select,#devFilterBar button{ padding:8px 10px; border:1px solid #e3e7ee; border-radius:8px; font-size:14px; }
#devFilterBar button{ background:#2da7ff; color:#fff; border:none; }
#devFilterBar button:hover{ background:#1c8fdd; }

/* Cards — tighter gap */
.developer-card{
  display:grid; grid-template-columns:84px 1fr; gap:14px; align-items:center;
  background:#fff; border:1px solid #e9eef3; border-radius:12px; padding:14px;
  margin-bottom:10px; /* 👈 small gap */
  box-shadow:0 4px 12px rgba(0,0,0,.04); transition:transform .15s ease, box-shadow .15s ease; cursor:pointer;
}
.developer-card:hover{ transform:translateY(-1px); box-shadow:0 8px 16px rgba(0,0,0,.06); }
.dev-logo{ display:grid; place-items:center; width:84px; height:84px; background:#fff; border:1px solid #eef2f5; border-radius:10px; overflow:hidden; }
.dev-logo img{ max-width:90%; max-height:90%; object-fit:contain; }
.logo-fallback{ font-weight:800; color:#2da7ff; }

.dev-headline{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dev-title{ font-size:20px; margin:0 0 4px; }
.dev-badges{ display:flex; gap:6px; flex-wrap:wrap; }
.badge{ display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; }
.badge.projects{ background:#eef7ff; color:#1d7ed6; border:1px solid #d9ecff; }
.badge.verified{ background:#e8f7ee; color:#237a4b; border:1px solid #c4ecd4; }

.dev-location{ font-size:13px; color:#576575; margin-bottom:4px; }

/* 2-line clamp (no <p> visible) */
.dev-desc{
  margin:0 0 6px; color:#425261; font-size:14px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.dev-meta{ list-style:none; padding:0; margin:0; font-size:14px; color:#4a4a4a; display:flex; gap:12px; flex-wrap:wrap; }
.dev-meta a{ color:#2da7ff; text-decoration:none; } .dev-meta a:hover{ text-decoration:underline; }

/* Native ad card (still small gap) */
.ad-card{ margin:8px 0 12px; }
.ad-card-inner{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(130deg,#f5fbff,#eef6ff); border:1px solid #dfeafb; border-radius:12px; padding:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.04); cursor:pointer;
}
.ad-label{ position:absolute; top:8px; right:8px; background:#ffd166; color:#4a3b00; font-size:10px; font-weight:800; padding:2px 6px; border-radius:999px; }
.fade-in-on-scroll{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.fade-in-on-scroll.visible{ opacity:1; transform:translateY(0); }

/* Sidebar */
.developers-sidebar{ position:sticky; top:24px; align-self:start; background:#fff; border:1px solid #e9eef3; border-radius:12px; padding:14px; display:grid; gap:12px; height:fit-content; }
.sidebar-box{ border:1px dashed #e7e7e7; border-radius:10px; padding:12px; }
.top-devs{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.top-devs li a{ display:grid; grid-template-columns:36px 1fr; gap:8px; align-items:center; text-decoration:none; }
.top-devs img{ width:36px; height:36px; object-fit:contain; border:1px solid #eef2f5; border-radius:8px; background:#fff; }
.top-devs .name{ font-size:14px; color:#0f1d2a; }
.top-devs .count{ font-size:12px; color:#64748b; }

/* Sidebar ads */
.ads-rotator{ position:relative; width:100%; aspect-ratio:300/250; overflow:hidden; border-radius:10px; margin-bottom:10px; background:#f6f9ff; border:1px solid #e4ebf7; }
.ads-rotator a{ display:none; }
.ads-rotator img{ width:100%; height:100%; object-fit:cover; display:block; }
.ad-slot.size-300x600{ display:block; width:100%; aspect-ratio:300/600; background:#f6f9ff; border:1px solid #e4ebf7; border-radius:10px; overflow:hidden; }
.ad-slot.size-300x600 img{ width:100%; height:100%; object-fit:cover; display:block; }
.sticky-ad{ position:sticky; top:80px; }

/* Pagination */
.developer-pagination{ display:flex; justify-content:center; margin-top:14px; }
.developer-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; margin:0 4px; border:1px solid #e7e7e7; border-radius:8px; }
.developer-pagination .current{ background:#2da7ff; color:#fff; border-color:#2da7ff; }

/* Responsive */
@media (max-width:980px){
  .all-developers-wrapper{ grid-template-columns:1fr; }
  .developers-sidebar{ position:static; order:-1; margin-top:0 !important; }
}

/* ===== Mobile: put sidebar after the cards ===== */
@media (max-width: 980px) {
  /* Stack the two columns vertically on mobile */
  .all-developers-wrapper {
    display: flex;
    flex-direction: column;
  }

  /* Content first */
  .developers-main {
    order: 1;
    width: 100%;
  }

  /* Sidebar second */
  .developers-sidebar {
    order: 2;
    width: 100%;
    margin-top: 16px;          /* breathing room under cards */
  }

  /* Optional: make sidebar boxes full‑width and tidy */
  .developers-sidebar .sidebar-box,
  .developers-sidebar .ads-box {
    width: 100%;
  }

  /* If the filter bar creates extra top offset for sidebar via JS, neutralize it */
  .developers-sidebar {
    margin-top: 16px !important;
  }
}

/* (Optional) Tighten ad images on small screens */
@media (max-width: 480px) {
  .developers-sidebar img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}