/* Technology page - responsive, polished layout */
:root{
  --accent-from:#0037ff;
  --accent-to:#333;
  --accent-strong:#0037ffa2;
  --muted:#6b6b6b;
  --card-radius:12px;
  --glass: rgba(255,255,255,0.6);
  --transition:180ms;
}

/* Hero */
.tech-hero{
  margin:28px auto;
  max-width:1200px;
  padding:28px;
  border-radius:var(--card-radius);
  background:linear-gradient(180deg, #fff, #fffaf0);
  box-shadow:0 12px 40px rgba(0,0,0,0.06);
  display:flex;
  gap:22px;
  align-items:center;
  justify-content:space-between;
}
.tech-hero .muted{ color:var(--muted); margin-top:6px; }
.hero-actions{ margin-top:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.controls{ display:flex; gap:12px; align-items:center; }

/* tags area */
.tags-filter{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tag{ 
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent-from), #4766ff);
  color:#fff;
  font-size:.82rem;
  border:0;
  cursor:pointer;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.tag[aria-pressed="true"]{ box-shadow:0 8px 28px rgba(255,152,0,0.18); transform:translateY(-2px); }

/* grid */
.posts-grid{
  margin:22px 0;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:18px;
  align-items:start;
}
.post-card{
  background:linear-gradient(180deg,#fff,#fff);
  border-radius:var(--card-radius);
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display:flex;
  flex-direction:column;
  min-height:320px;
}
.post-card:hover{
  transform:translateY(-10px);
  box-shadow:0 26px 64px rgba(0,0,0,0.12);
  border:1px solid rgba(0,0,0,0.04);
}
.post-thumb{ width:100%; height:200px; object-fit:cover; display:block; background:#eee; }
.post-body{ padding:16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-meta{ color:var(--muted); font-size:.85rem; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.post-title{ margin:0; font-size:1.08rem; color:#110f01; transition: color var(--transition); }
.post-card:hover .post-title{ color:var(--accent-from); }
.post-excerpt{ color:#444; margin:0; line-height:1.45; flex:1; }

/* buttons */
.btn-primary, .btn-outline, .load-more{
  border-radius:26px; padding:10px 16px; cursor:pointer; font-weight:700; border:0;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.btn-primary{ background:linear-gradient(90deg,var(--accent-from),var(--accent-to)); color:#fff; }
.btn-outline{ background:transparent; border:1px solid #ddd; color:#222; }

/* load more */
.load-more{
  display:block; margin:28px auto 60px; background:linear-gradient(90deg,var(--accent-from),var(--accent-to)); color:#fff;
}

/* skeleton */
.skeleton{ opacity:.9; pointer-events:none; }
.skeleton-box{ height:180px; background:linear-gradient(90deg,#f3f3f3,#ededed,#f3f3f3); background-size:200% 100%; animation: shimmer 1.2s linear infinite; }
.skeleton-line{ height:14px; background:linear-gradient(90deg,#f3f3f3,#ededed,#f3f3f3); background-size:200% 100%; animation: shimmer 1.2s linear infinite; margin:8px 0; border-radius:6px; }
.skeleton-line.short{ width:35%; }
.skeleton-pill{ display:inline-block; width:60px; height:24px; border-radius:999px; background:linear-gradient(90deg,#f3f3f3,#ededed,#f3f3f3); animation: shimmer 1.2s linear infinite; }
@keyframes shimmer{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }

/* no posts text */
.no-posts{ text-align:center; color:var(--muted); padding:40px 0; }

/* accessibility helper */
.sr-only{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* responsive */
@media (max-width:1100px){ .posts-grid{ grid-template-columns:repeat(2,1fr); } .post-thumb{ height:160px; } .tech-hero{ padding:20px; } }
@media (max-width:700px){ .posts-grid{ grid-template-columns:1fr; } .tech-hero{ flex-direction:column; text-align:center; gap:12px; } .post-thumb{ height:140px; } .controls{ justify-content:center; } }

/* touch-friendly reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none!important; animation:none!important; }
}

/* ...existing code... */
/* Popular posts styles (append) */
.popular-section {
  margin: 20px auto;
  max-width: 1200px;
  padding: 18px;
  border-radius: 12px;
  background: linear-gradient(180deg,#fff,#fffef8);
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.popular-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.popular-header .muted { color: #666; margin:0; }

.popular-list {
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
}
.popular-card {
  min-width: 240px;
  max-width: 320px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease;
  flex:0 0 auto;
}
.popular-card:hover { transform: translateY(-6px); box-shadow:0 20px 48px rgba(0,0,0,0.10); }
.popular-thumb { width:88px; height:66px; object-fit:cover; border-radius:8px; flex:0 0 88px; }
.popular-body { display:flex; flex-direction:column; gap:6px; min-width:0; }
.popular-title { margin:0; font-size:0.98rem; color:#110f01; }
.popular-meta { font-size:0.82rem; color:#888; }

/* responsiveness */
@media (max-width:1000px) {
  .popular-card { min-width: 220px; max-width:260px; }
  .popular-thumb { width:72px; height:56px; flex:0 0 72px; }
}
@media (max-width:640px) {
  .popular-list { gap:10px; }
  .popular-card { min-width: 200px; max-width:220px; }
  .popular-thumb { width:64px; height:48px; flex:0 0 64px; }
}