/* posts grid */
.posts-grid{display:grid;gap:20px;margin-top:18px}

/* breakpoints */
@media(min-width:1024px){
  .posts-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:768px) and (max-width:1023px){
  .posts-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
  .posts-grid{grid-template-columns:1fr}
}

.post-card{
  background:var(--card-bg, #fff);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(16,24,40,0.06);
  transition:transform .15s ease,box-shadow .15s ease;
  display:flex;
  flex-direction:column;
}
.post-card:hover{transform:translateY(-6px)}

.post-thumb{width:100%;height:160px;object-fit:cover;display:block}
.post-body{padding:16px;flex:1;display:flex;flex-direction:column}
.post-title{margin:0;font-size:18px;font-weight:700}
.post-meta{font-size:13px;color:var(--muted);margin-top:8px}
.post-desc{margin-top:12px;color:var(--muted);flex:1}
.tag-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tag{font-size:12px;padding:6px 8px;border-radius:999px;background:rgba(0,0,0,0.04);cursor:pointer}

.post-actions{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-top:12px}
.share-btn{background:transparent;border:none;cursor:pointer}

/* dark mode card styles */
body.dark .post-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 8px 30px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.03)}
body.dark .post-title{color:var(--dark-text)}
body.dark .post-desc{color:rgba(230,237,243,0.75)}
body.dark .tag{background:rgba(255,255,255,0.02)}

/* neon hover */
.post-card:hover .post-title{filter:drop-shadow(0 0 6px rgba(0,255,255,0.08))}

.pagination-row{display:flex;justify-content:center;gap:12px;margin:28px 0}

/* tag filter bar */
.tag-filter{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.tag-filter .tag{cursor:pointer}

/* -------------------------------------------------------------
   Responsive images – shrink to container width, keep aspect ratio
   ------------------------------------------------------------- */
img {
  max-width: 100%;      /* never wider than its parent */
  height: auto;         /* preserve aspect ratio */
  display: block;       /* removes the tiny bottom gap */
  margin: 1rem auto;    /* optional – centre & add vertical breathing room */
}

/* -------------------------------------------------------------
   Lightbox overlay
   ------------------------------------------------------------- */
.lightbox {
  display: none;               /* hidden until we open it */
  position: fixed;
  inset: 0;                    /* top/right/bottom/left = 0 */
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  z-index: 2000;               /* above everything else */
}

.lightbox img {
  max-width: 96vw;             /* never bigger than the viewport */
  max-height: 96vh;
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

/* Close button (×) */
.lightbox .close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  font-size: 2.5rem;
  color: #fff;
  cursor: pointer;
}

/* -------------------------------------------------------------
   SHARE BUTTON – make it readable in dark mode
   ------------------------------------------------------------- */

/* Normal (light) mode – keep the default colour (inherits from body) */
.share-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  /* optional – give a tiny visual cue */
  color: inherit;
}

/* Dark‑mode override – use the neon cyan (same as the header icons) */
body.dark .share-btn {
  color: var(--neon-green) !important;   /* bright enough on dark cards */
}