:root {
  --nav-bg: var(--bg, #0b0f14);
  --nav-ink: var(--ink, #e7edf7);
  --nav-ink-dim: var(--ink-dim, #a0a8b4);
  --nav-accent: var(--accent, #7dd3fc);
  --nav-accent-warm: var(--accent-2, #facc15);
  --nav-radius: var(--radius, 12px);
  --nav-pad-x: var(--pad-x, 1rem);
  --nav-pad-y: var(--pad-y, .65rem);
  --nav-gap: var(--gap, .25rem);
}

  .posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    grid-auto-flow: dense;
  }

 .posts-grid--small {

    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }



  .post-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e6e6e6;
    border-radius: var(--nav-radius, 12px);
    overflow: hidden;
    background: transparent;
  }



/* double-width card */
.post-card--wide {
  /* mobile still full width, so no special rule here */
}

.post-card--transparent {border:0; background-color: transparent;}

@media (min-width: 640px) {
  .post-card--wide { grid-column: span 2; }
}

/* if you ever run super-wide grids, you can bump it again */
/* @media (min-width: 1280px) {
  .post-card--wide { grid-column: span 2; }  // or span 3 if you like
} */


  .post-card__media { position: relative; }
  .post-card__hero { /*aspect-ratio: 16 / 9;*/ overflow: hidden; }
  .post-card__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .post-card__placeholder {
    aspect-ratio: 16 / 9;
    display: grid; place-items: center;
    background: #f6f6f6; color: #999;
    font-size: 14px;
  }

  .post-card__status {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 10px; border-radius: 999px; font-size: 12px;
    background: #eee; color: #333;
  }
  .post-card__status--ready { background: #e6ffed; color: #0a7a2a; }
  .post-card__status--queued { background: #eef5ff; color: #1f5cb8; }
  .post-card__status--approved { background: #fff9e6; color: #7a5a00; }
  .post-card__status--failed { background: #ffefef; color: #9e1c1c; }
  .post-card__status--pending { background: #f0f0ff; color: #4b42a6; }

  .post-card__body { padding: 12px; display: grid; gap: 10px; }
  .post-card__meta { display: flex; gap: 8px; font-size: 12px; color: #666; }
  .post-card__footer { display: flex; gap: 8px; font-size: 12px; color: #666; margin-bottom:10px;}
  .post-card__caption { font-size: 14px; line-height: 1.4; max-height: 3.6em; overflow: hidden; color:#999}
  .post-card__thumbs { margin-top: 4px; display: flex; gap: 8px; overflow: hidden; }
  .post-card__thumb a, .post-card__thumb img { display: block; }
  .post-card__thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }

  .post-card__actions { margin-top: 6px; }