/* =========================================================
   Static Noir Mint Dark — Posts
   Last updated: 2025-08-30
   ---------------------------------------------------------
   • Home container title bar: FULL gradient & centered
   • Post cards: max-width + centering when few/single
   • Tiny image thumb inside the title bar (when images exist)
   • Unified dark style for reaction/comments/delete
   • Bold counts; red trash icon; hover/focus glow
   ========================================================= */



/* ---- Home container title bar (FULL gradient, centered text) ---- */
.titlebar-block { background: var(--grad-primary); padding: var(--space-5) var(--space-6); position: relative; }
.titlebar-block .posts-heading {
  margin: 0; text-align: center; font-size: 1.5rem; line-height: 1.2;
  color: var(--title-color); background: transparent;
}
.titlebar-block .hero-actions {
  position: absolute; right: var(--space-6); top: 50%; transform: translateY(-50%);
}



/* Posts page (list/grid): keep categories to a single truncated line */
.posts-page .post-card .categories { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.posts-page .post-card .categories :is(a, span, .badge) { display: inline; margin-right: 0.5em; }

/* Structure */
.posts-page { display: flex; flex-direction: column; gap: var(--stack-gap); width: 100%; min-width: 0; }
.hero { display: flex; align-items: center; justify-content: center; gap: var(--space-5); height: 60px; }
.posts-heading { margin: 0; }

/* Grid (token-driven) — centered items */
.posts-grid {
  display: grid !important;
  /* Base/mobile-friendly default; desktop gets a stronger threshold below */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--post-min)), 1fr));
  gap: var(--stack-gap); width: 100%; min-width: 0; align-items: start; justify-items: center;
}

/* Desktop: auto-fit columns, but drop to one column before cards get squeezed */
@media (min-width: 1025px) {
  .posts-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  }
}
.posts-grid > * { min-width: 0; max-width: 100%; }

/* Post card — cap width + center */
.post-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  min-width: 0; width: min(100%, calc(var(--card-max) * 1.5)); max-width: calc(var(--card-max) * 1.5);
  justify-self: center;
}

/* =========================================================
   Header (gradient) with tiny image thumb in the title bar
   ========================================================= */
.post-header {
  position: relative; background: var(--grad-primary);
  /* Flush to the top full width of the card (no visible inset on top/left/right) */
  /* Generic .card adds 14px padding + 1px border => bleed by 15px to touch the card border */
  margin: -15px -15px 0 !important;
  width: calc(100% + 30px);
  align-self: stretch;
  box-sizing: border-box;
  padding: var(--space-4) var(--space-6); padding-right: calc(44px + var(--space-10));
  min-height: 66px;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  display: flex; align-items: center;
}
.post-title {
  margin: 0; font-size: 1.1rem; line-height: 1.25; color: var(--title-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  word-wrap: break-word; overflow-wrap: break-word;
  padding-bottom: 10px;
}
.post-title a {
  display: inline-block;
  transform: translateY(10px);
  color: var(--title-color); text-decoration: none;
}
.post-title a:link, .post-title a:visited, .post-title a:hover, .post-title a:active { color: var(--title-color); text-decoration: none; }

/* Tiny header thumbnail */
.posts-page .post-card .post-header .post-gallery.preview {
  position: absolute; top: 50%; right: var(--space-4); transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border); background: var(--control-bg); box-shadow: 0 6px 18px rgba(0,0,0,.28);
  padding: 0; margin: 0;
}
.posts-page .post-card .post-gallery.preview .cover-link { display: block; width: 100%; height: 100%; }
.posts-page .post-card .post-gallery.preview .cover-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.posts-page .post-card .post-gallery.preview .thumbs,
.posts-page .post-card .post-gallery.preview .imgs-count { display: none !important; }
.card:hover .post-gallery.preview { transform: translateY(-50%) scale(1.03); }

/* Categories (bold labels) */
.categories { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.badge {
  display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface-bg); color: var(--text); font-size: .85rem; font-weight: 700;
}

/* =========================================================
   Meta row — "username • date" (left-justified)
   ========================================================= */

.post-subheader {
  color: var(--muted);
  font-size: .92rem;
  min-width: 0;
}

.post-subheader .meta-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex-wrap: nowrap;            /* NEVER wrap to next line */
  white-space: nowrap;          /* keep everything on one line */
  overflow: hidden;             /* enforce single-line + ellipsis behavior */
}

.post-subheader .owner {
  flex: 1 1 auto;               /* username is the shrinkable part */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-subheader .owner strong {
  display: inline;              /* guard against any global strong styling */
}

.post-subheader .date {
  flex: 0 0 auto;               /* date never shrinks into wrapping */
  white-space: nowrap;
}


/* Bullet separator */
.post-subheader .dot {
  flex: 0 0 auto;
  opacity: 0.85;
}

/* Date/right cell stays compact and never forces wrap of name */
.post-subheader .date,
.post-subheader time {
  grid-column: 2 / 3;
  justify-self: end;
  max-width: 45%;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === LAST-RESORT GUARD — beats global rules ============================== */
:where(.posts-page) :where(.post-card) :where(.post-subheader)
  :where(.username, .user, .author, .owner, .byline, .meta-left, .left, .who,
         .username > *, .user > *, .author > *, .owner > *, .byline > *) {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Body preview (clamp) — ONLY on posts list cards (not single-post page) */
.posts-page .post-body {
  color: var(--text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.45;
  max-height: calc(1.45em * 6);
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* Footer */
.post-footer { margin-top: auto; }
.post-acts { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.inline-form { display: inline; margin: 0; }

/* Bold counts */
.count { color: var(--muted); font-size: .95rem; font-weight: 700; }

/* Responsive */
@media (max-width: 1024px) {
  .hero { flex-direction: column; align-items: flex-start; }
  .create-btn { width: 100%; text-align: center; }
  .post-header { padding-right: 58px; min-height: 60px; }
  .posts-page .post-card .post-gallery.preview { width: 40px; height: 40px; right: var(--space-3); }
}

/* === Added: posts list missing classes (message-title, thumb-link, thumb) === */
/* Empty-state title */
.posts-page .message-title {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--title-color);
  margin: 0 0 var(--space-2) 0;
}

/* Gallery thumbnails inside the post list header */
.posts-page .post-card .post-gallery.preview .thumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.posts-page .thumb-link {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--control-bg);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: transform var(--transition-fast), box-shadow var(--transition-base), border-color var(--transition-base);
}

.posts-page .thumb-link:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow);
}

.posts-page img.thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Audit fix: posts list title ellipsis at ~25 chars */
.posts-page .post-title {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.posts-page .post-title a {
  display: inline-block;
  max-width: 25ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Audit fix: show full 4 preview lines without clipping */
.posts-page .post-body {
  -webkit-line-clamp: 4;
  line-clamp: 4;
  line-height: 1.45;
  min-height: calc(1.45em * 4 + 0.45em);
  max-height: calc(1.45em * 4 + 0.45em);
}


/* Audit polish: force post titlebar to touch card border on top/left/right */
.posts-page .post-card .post-header {
  margin-top: -17px !important;
  margin-right: -17px !important;
  margin-left: -17px !important;
}


/* Audit polish: flush post titlebar to card border (spa .card uses 16px padding + 1px border) */
.posts-page .post-card.card > .post-header,
.posts-page .post-card > .post-header {
  margin-top: -17px !important;
  margin-right: -17px !important;
  margin-left: -17px !important;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}


/* Audit polish: force post title bar to touch card border on top/left/right */
.posts-page article.post-card.card > .post-header {
  margin: -15px -15px 0 !important;
  width: calc(100% + 30px) !important;
  align-self: stretch;
  box-sizing: border-box;
}


/* Audit fix: on posts page, keep title bar themed and aligned while overriding generic title pill offsets */
.posts-page .post-card .post-header > .post-title,
.posts-page .post-card .post-title {
  background: linear-gradient(180deg, rgba(22, 42, 38, 0.92), rgba(14, 24, 23, 0.92)) !important;
  border: 1px solid color-mix(in srgb, var(--border) 75%, rgba(124, 244, 191, 0.35));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 0 0 1px rgba(0,0,0,0.08);
  padding: 8px 12px !important;
  border-radius: 10px !important;
  display: flex;
  align-items: center;
  width: 100% !important;
  max-width: none !important;
  min-height: 40px !important;
  box-sizing: border-box;
  margin: 0 !important;
}

.posts-page .post-card .post-title a {
  display: block;
  max-width: 25ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  color: var(--title-color);
}

/* Audit polish: remove inner title pill design; use theme header colors from index.css */
.posts-page .post-card .post-header {
  background: linear-gradient(180deg, var(--surface-bg-strong), var(--surface-bg)) !important;
  border-bottom: 1px solid var(--surface-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.posts-page .post-card .post-header > .post-title,
.posts-page .post-card .post-title {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: flex;
  align-items: center;
  width: 100% !important;
  margin: 0 !important;
}

.posts-page .post-card .post-title a {
  display: block;
  max-width: 25ch;
  color: var(--title-color) !important;
  line-height: 1.25;
  text-decoration: none;
}

/* Audit polish: use theme primary gradient and improve title text alignment/inset */
.posts-page .post-card .post-header {
  background: var(--grad-primary) !important;
  display: flex;
  align-items: center;
}

.posts-page .post-card .post-header > .post-title,
.posts-page .post-card .post-title {
  display: flex !important;
  align-items: center !important;
  min-height: 100% !important;
  padding-left: 6px !important; /* small left offset for title text */
}

.posts-page .post-card .post-title a {
  display: block;
  line-height: 1.2;
  padding-left: 2px; /* visual nudge inside title container */
}

/* Audit polish: final header vertical centering tweak */
.posts-page .post-card .post-header {
  min-height: 52px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.posts-page .post-card .post-header > .post-title,
.posts-page .post-card .post-title {
  min-height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.posts-page .post-card .post-title a {
  display: flex !important;
  align-items: center;
  min-height: 100%;
  max-width: 25ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.8 !important;
  transform: translateY(4px); /* stronger nudge down toward visual center */
}